/* ============================================================
   Requer Seguros — estilos compartilhados (todas as páginas)
   ============================================================ */
:root{
  --bg:#ffffff; --panel:#f6f8fb; --card:#ffffff; --border:#e6e9ef;
  --text:#0b1220; --muted:#5b677a;
  --brand1:#00a3ff; --brand2:#2b6fff; --brand:#2b6fff;
  --radius:16px;
  --shadow:0 12px 28px rgba(16,24,40,.06);
  --shadow-lg:0 22px 48px rgba(16,24,40,.12);
  --ring:0 0 0 3px rgba(43,111,255,.18);
  /* larguras globais centralizadas (iguais em todas as seções) */
  --wrap:1120px; --narrow:880px; --gridw:1040px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  /* fundo suave que dá um respiro azulado no topo */
  background:
    radial-gradient(1200px 480px at 50% -120px, rgba(43,111,255,.10), transparent 70%),
    linear-gradient(180deg, #f4f8ff 0%, #ffffff 520px);
  background-repeat:no-repeat;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

/* Wrapper global centralizado */
.wrap{width:min(100%, var(--wrap)); margin-inline:auto; padding:0 20px}
.kicker{color:var(--brand2); font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:.78rem; margin:0}
.lead{font-size:1.075rem; color:var(--muted); margin:6px 0 0; line-height:1.55}
.note{color:var(--muted)}

/* Foco visível (acessibilidade) */
:focus-visible{outline:3px solid rgba(43,111,255,.45); outline-offset:2px; border-radius:8px}

/* Header */
header{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.82); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--border)}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:12px}
.brand{display:flex; gap:12px; align-items:center}
.brand img{height:52px}
.nav{display:flex; gap:10px; align-items:center}
.nav a{padding:10px 12px; border-radius:10px}
.home .nav{margin:0 auto}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; cursor:pointer; font-weight:700; border-radius:12px; padding:12px 18px; box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease, filter .15s ease}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(135deg,var(--brand1),var(--brand2)); color:#fff}
.btn-primary:hover{filter:brightness(1.05)}
.btn-outline{background:#fff; border:1px solid var(--border); color:#0b1220; box-shadow:none}
.btn-outline:hover{border-color:var(--brand2); box-shadow:var(--shadow)}
.btn-sm{padding:10px 14px; border-radius:10px; box-shadow:none}
.btn[disabled]{opacity:.6; cursor:progress; transform:none}

.only-mobile{display:inline-flex}
.only-desktop{display:none}
@media(min-width:960px){ .only-mobile{display:none} .only-desktop{display:inline-flex} }

/* Hero */
.hero{padding:56px 0 40px; text-align:center}
.title,.hero .title{font-size:clamp(30px,5.4vw,50px); line-height:1.05; margin:0; letter-spacing:-.02em; font-weight:800}
.hero .lead{max-width:var(--narrow); margin:14px auto 0; font-size:1.15rem}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:22px}

/* Selo de confiança opcional (ex.: SUSEP) */
.trust{display:inline-flex; align-items:center; gap:8px; margin:18px auto 0; padding:7px 14px; border-radius:999px; background:#fff; border:1px solid var(--border); box-shadow:var(--shadow); font-size:.85rem; font-weight:700; color:var(--muted)}
.trust::before{content:"🛡️"}

/* Seções */
.section{margin:56px 0}
.head{max-width:var(--narrow); margin:0 auto 22px; text-align:center}
.head h2{margin:8px 0 0; font-size:clamp(22px,3.2vw,32px); letter-spacing:-.01em}
/* Na home os títulos de seção ficam alinhados à esquerda */
.home .head{margin:14px 0 18px; text-align:left}

/* Cards (home) */
.cards{display:grid; gap:18px; width:min(100%, var(--gridw)); margin:0 auto}
@media(min-width:980px){ .cards{grid-template-columns:repeat(3,1fr)} }
.card{position:relative; background:var(--card); border:1px solid var(--border); border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow); transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.card::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; border-radius:16px 16px 0 0; background:linear-gradient(90deg,var(--brand1),var(--brand2)); opacity:0; transition:opacity .16s ease}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent}
.card:hover::before{opacity:1}
.card h3{margin:0; font-size:1.2rem}
.card .desc{color:var(--muted); line-height:1.55}
.card .go{margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:10px 16px; font-weight:700; color:var(--brand2); transition:gap .16s ease, background .16s ease}
.card .go:hover{gap:12px; background:var(--panel)}

/* Diferenciais / passos */
.grid-3{display:grid; gap:18px; width:min(100%, var(--gridw)); margin:0 auto}
@media(min-width:900px){ .grid-3{grid-template-columns:repeat(3,1fr)} }
.feature{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:20px; box-shadow:var(--shadow); transition:transform .16s ease, box-shadow .16s ease}
.feature:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.feature strong{display:block; margin-bottom:6px; font-size:1.05rem}
.steps{display:grid; gap:16px; width:min(100%, var(--gridw)); margin:0 auto}
@media(min-width:900px){ .steps{grid-template-columns:repeat(3,1fr)} }
.step{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:20px; display:flex; gap:14px; align-items:flex-start; box-shadow:var(--shadow); transition:transform .16s ease, box-shadow .16s ease}
.step:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.badge{flex:none; min-width:38px; height:38px; border-radius:999px; background:linear-gradient(135deg,var(--brand1),var(--brand2)); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:800; box-shadow:0 6px 16px rgba(43,111,255,.35)}

/* Marcas (home) */
.brand-logos{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; width:min(100%, var(--gridw)); margin:0 auto}
@media(min-width:720px){ .brand-logos{grid-template-columns:repeat(6,1fr)} }
.brand-logos .logo{background:#fff; border:1px solid var(--border); border-radius:12px; height:64px; display:grid; place-items:center; font-weight:700; color:#334155}

/* Tabela (home) */
.table-wrap{width:min(100%, var(--gridw)); margin:0 auto; overflow:auto}
.table{width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--border); border-radius:14px; overflow:hidden; table-layout:fixed; word-wrap:break-word; box-shadow:var(--shadow)}
.table th,.table td{padding:14px; border-bottom:1px solid var(--border); background:#fff}
.table th{background:#f2f6ff; text-align:left; font-size:.92rem}
.table tr:last-child td{border-bottom:0}
.table .note{text-align:center}

/* ===== Formulário (páginas de produto) ===== */
.form-card{background:var(--card); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-lg); margin:22px auto 0; width:min(100%,820px); text-align:left}
.form-body{padding:22px}
.grid{display:grid; grid-template-columns:1fr; gap:12px}
@media(min-width:820px){ .grid.two{grid-template-columns:1fr 1fr} .grid.three{grid-template-columns:repeat(3,1fr)} }
label{font-size:12px; color:#42526b; font-weight:600}
.input,.select{width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border); outline:none; background:#fff; transition:border-color .15s ease, box-shadow .15s ease}
.input:focus,.select:focus{border-color:var(--brand); box-shadow:var(--ring)}
.input.invalid,.select.invalid{border-color:#e11d48; box-shadow:0 0 0 3px rgba(225,29,72,.15)}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.toggle-advanced{display:inline-flex; gap:6px; align-items:center; font-weight:700; cursor:pointer; color:var(--brand2); background:#fff; border:1px solid var(--border); padding:10px 14px; border-radius:10px; transition:background .15s ease}
.toggle-advanced:hover{background:var(--panel)}

/* Mensagem de retorno do formulário */
.form-msg{margin-top:10px; min-height:1.2em}
.form-msg.is-loading{color:var(--muted)}
.form-msg.is-success{color:#0a7d33; font-weight:700}
.form-msg.is-error{color:#e11d48; font-weight:700}

/* Urgência / contador */
.deal{background:linear-gradient(135deg, rgba(43,111,255,.10), rgba(0,163,255,.10)); border:1px solid rgba(43,111,255,.25); padding:16px 18px; border-radius:16px; display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; width:min(100%,820px); margin:14px auto 0}
.timer{font-variant-numeric:tabular-nums; font-weight:800; color:var(--brand2)}

/* Timeline (consórcio) */
.explain{background:var(--card); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); padding:24px; width:min(100%, var(--gridw)); margin:0 auto}
.flow{position:relative; display:grid; gap:14px; margin-top:6px}
.flow:before{content:""; position:absolute; left:22px; top:0; bottom:0; width:2px; background:linear-gradient(180deg,var(--brand1),var(--brand2)); opacity:.35}
.flow-item{position:relative; display:grid; grid-template-columns:48px 1fr; gap:12px; align-items:start; background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:14px}
.flow-badge{position:absolute; left:-6px; top:12px; width:28px; height:28px; border-radius:999px; background:linear-gradient(135deg,var(--brand1),var(--brand2)); color:#fff; display:grid; place-items:center; font-weight:700; font-size:13px; box-shadow:0 4px 12px rgba(43,111,255,.25)}
.flow-icon{width:36px; height:36px; border-radius:10px; background:#fff; border:1px solid var(--border); display:grid; place-items:center}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.chip{padding:6px 10px; border-radius:999px; background:#fff; border:1px solid var(--border); font-size:12px; color:#334155}
.costs{display:grid; grid-template-columns:1fr; gap:10px; margin-top:14px}
.cost{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px}
@media(min-width:980px){
  .flow{grid-template-columns:repeat(4,1fr); align-items:stretch}
  .flow:before{display:none}
  .flow-item{grid-template-columns:1fr; text-align:center}
  .flow-badge{left:calc(50% - 14px); top:-14px}
  .flow-icon{margin:18px auto 6px}
  .costs{grid-template-columns:repeat(3,1fr)}
}

/* FAQ */
.faq{border:1px solid var(--border); border-radius:16px; overflow:hidden; background:#fff; width:min(100%, 920px); margin:0 auto; box-shadow:var(--shadow)}
.faq-item+*{border-top:1px solid var(--border)}
.faq-q{width:100%; text-align:left; background:#fff; padding:16px 18px; font-weight:700; border:0; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; transition:background .15s ease}
.faq-q:hover{background:var(--panel)}
.faq-q::after{content:"+"; font-size:1.3em; color:var(--brand2); transition:transform .2s}
.faq-q[aria-expanded="true"]::after{content:"−"}
.faq-a{display:none; padding:0 18px 18px; color:var(--muted); line-height:1.6}

/* CTA band */
.cta-band{background:linear-gradient(135deg, var(--brand1), var(--brand2)); padding:26px; border-radius:18px; display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; width:min(100%, var(--gridw)); margin:0 auto; box-shadow:var(--shadow-lg); color:#fff}
.cta-band strong{font-size:1.2rem}
.cta-band .note{color:rgba(255,255,255,.9)}
.cta-band .btn-primary{background:#fff; color:var(--brand2)}
.cta-band .btn-outline{background:transparent; border-color:rgba(255,255,255,.6); color:#fff}

/* Footer */
footer{padding:36px 0 28px; color:#6b788e; font-size:13px; border-top:1px solid var(--border); margin-top:56px; background:var(--panel)}
.foot{display:grid; gap:16px; width:min(100%, var(--gridw)); margin:0 auto}
@media(min-width:900px){ .foot{grid-template-columns:2fr 1fr 1fr} }
.foot h4{margin:0 0 8px; color:var(--text)}
.foot a:hover{color:var(--brand2)}

/* WhatsApp flutuante */
.whats-fab{position:fixed; right:18px; bottom:18px; z-index:30}
.whats-fab a{display:inline-flex; align-items:center; gap:8px; background:#25D366; color:#fff; padding:13px 18px; border-radius:999px; box-shadow:0 14px 30px rgba(37,211,102,.45); font-weight:800; transition:transform .15s ease, box-shadow .15s ease}
.whats-fab a:hover{transform:translateY(-2px) scale(1.03); box-shadow:0 18px 38px rgba(37,211,102,.55)}
.whats-fab svg path:first-child{fill:#fff}      /* contorno do balão -> branco */
.whats-fab svg path:last-child{fill:#25D366}   /* telefone interno -> verde */

/* ============================================================
   TEMA HÍBRIDO — topo (header + hero) e rodapé escuros,
   conteúdo no claro. Consistente com o painel administrativo.
   ============================================================ */
header{
  background:linear-gradient(180deg,#0b1220,#0f1a30);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand img{filter:brightness(0) invert(1)}            /* logo -> branco no header escuro */
header .nav a{color:#fff}
header .nav .btn-outline{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.22); color:#fff}
header .nav .btn-outline:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.42)}

/* Hero com faixa escura full-width (sem alterar o HTML) */
.hero{position:relative; color:#fff}
.hero::before{
  content:""; position:absolute; z-index:-1; top:0; left:50%; transform:translateX(-50%);
  width:100vw; height:100%;
  background:
    radial-gradient(900px 380px at 50% -30%, rgba(43,111,255,.38), transparent 70%),
    linear-gradient(180deg,#0f1a30 0%, #16223e 100%);
}
.hero .kicker{color:#7cc5ff}
.hero .title{color:#fff}
.hero .lead{color:rgba(255,255,255,.82)}

/* Caixa de urgência (contador) sobre o hero escuro */
.deal{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2)}
.deal strong{color:#fff}
.timer{color:#9ad0ff}

/* Rodapé escuro */
footer{background:linear-gradient(180deg,#0f1a30,#0b1220); color:#9fb0c8; border-top:0; margin-top:0}
.foot h4{color:#fff}
footer a{color:#cdd9ee}
footer a:hover{color:#fff}