/* aliceempresas.com.br: site da American Saúde (corretora). Sem framework, mobile primeiro.
   Tipografia e base neutra do design system do portal novo da American (design_handoff_portal_american_saude/README.md):
   Archivo nos títulos, Source Sans 3 no texto; faixas branco/areia; corpo em #0B2230; rodapé #00506F com a logo
   negativa da American (a assinatura da corretora continua com as cores dela).
   Cores de destaque = marca da Alice (decisão do dono, 19/09/2026; _kit-sites-operadoras/marcas.json, CSS oficial de
   alice.com.br): magenta #BE0380, hover #960169, pressed #750153, magenta-00 #FFF0FA, beterraba #690046. Entram na
   abertura das páginas de venda, botões, links, faixas, marcadores e ícones; fundos e texto de corpo seguem sóbrios.
   Contraste (WCAG 2.x, calculado; o lint confere os pares marcados com *):
   * branco sobre #BE0380 5,98 · #960169 8,38 · #750153 11,14 · #690046 12,43
   * #BE0380 sobre branco 5,98 · areia 5,44 · #FFF0FA 5,43 (links, marcadores)
   * #0074A8 sobre branco 5,17 ("corretora" do cabeçalho, que continua nas cores da American); #5F7480 no branco 4,89
     e branco 90% sobre #BE0380 5,01 (o "/" das migalhas)
   * #0B2230 sobre branco 16,3 · areia 14,9 · #FFF0FA 14,85; #37505C sobre branco 8,5 · areia 7,8 · #FFF0FA 7,75
   * #690046 sobre branco 12,43 · #FFF0FA 11,31 (botão branco da abertura e da faixa final; selo)
   #5F7480 SÓ sobre branco (4,9; na areia 4,45 e no #FFF0FA 4,44 reprovam); #F5C6E4 só em grafismo/borda;
   branco sobre #00506F 8,8 e branco 90% 7,5 (rodapé); #8A4522 sobre #FBEAE1 6,1 (atenção).
   Logo da Alice: só em branco (abertura magenta) ou preto (ficha em fundo claro), como pede o guia do corretor Alice. */
:root{
  --marca:#BE0380;--marca-escura:#960169;--marca-escura-hover:#750153;--marca-clara:#FFF0FA;--marca-borda:#F5C6E4;
  --apoio:#690046;
  --am-100:#BFE7F8;--am-400:#009EE3;--am-700:#0074A8;--am-900:#00506F;
  --ink:#0B2230;--ink2:#37505C;--muted:#5F7480;--line:#DDE4E8;--sand:#F7F4EE;--sand2:#EFE9DE;
  --warn:#E2703A;--warn-ink:#8A4522;--warn-bg:#FBEAE1;
  --f-tit:"Archivo","Helvetica Neue",Arial,system-ui,sans-serif;
  --f-txt:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --pad:16px;--sec:56px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:400 17px/1.62 var(--f-txt);overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
strong,b{font-weight:600;color:var(--ink)}
a{color:var(--marca);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(190,3,128,.45)}
a:hover{color:var(--ink);text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--marca);outline-offset:3px;border-radius:2px}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--pad)}
.pular{position:absolute;left:-9999px;top:0}
.pular:focus{left:8px;top:8px;z-index:100;background:#fff;color:var(--ink);padding:10px 14px;border:1.5px solid var(--marca);border-radius:3px}

/* ---------- cabeçalho claro: nome do site + "corretora" em texto (decisão do dono); nenhum logo aqui (nem da Alice).
   O cabeçalho é a identidade do site: fica nas cores da American (#0074A8 texto 5,17:1 no branco; #009EE3 e #BFE7F8 só
   em traço), como nas landings do kit. A cor da Alice começa na abertura, abaixo dele. */
.cab{background:#fff;border-bottom:1px solid var(--line)}
.cab :focus-visible{outline-color:var(--am-700)}
.cab-in{display:grid;gap:2px 32px;padding-top:16px}
.marca{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;justify-self:start;text-decoration:none;color:var(--ink)}
.marca:hover{color:var(--ink)}
.marca-nome{font:700 1.2rem/1.2 var(--f-tit);letter-spacing:-.025em}
.marca-tipo{font:600 .75rem/1 var(--f-tit);letter-spacing:.16em;text-transform:uppercase;color:var(--am-700);white-space:nowrap}
.marca-tipo::before{content:"";display:inline-block;vertical-align:middle;width:16px;height:1.5px;margin:-2px 8px 0 0;background:var(--am-400)}
.descritor{margin:0;font-size:.875rem;line-height:1.4;color:var(--muted)}
.menu{display:flex;flex-wrap:wrap;align-items:center;gap:0 2px;margin:8px -8px 0}
.menu a{font:500 .9375rem/1.2 var(--f-tit);color:var(--ink2);text-decoration:none;padding:13px 8px 11px;border-bottom:2px solid transparent}
.menu a:hover{color:var(--ink);border-bottom-color:var(--am-100)}
.menu a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--am-700)}
.menu a.cliente{margin:6px 8px 8px;padding:8px 12px;border:1.5px solid var(--line);border-radius:3px;color:var(--ink)}
.menu a.cliente:hover,.menu a.cliente[aria-current="page"]{border-color:var(--am-700)}

.migalhas{font-size:.875rem;color:var(--muted);padding-top:20px}
.migalhas ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px}
/* o "/" das migalhas é lido como texto: #5F7480 no branco 4,89:1; na abertura magenta, branco 90% dá 5,01:1 */
.migalhas li+li::before{content:"/";margin-right:8px;color:var(--muted)}
.topo-marca{background:var(--marca);color:#fff}
.topo-marca .migalhas{color:#fff}
.topo-marca .migalhas a{color:#fff;text-decoration-color:rgba(255,255,255,.6)}
.topo-marca .migalhas li+li::before{color:rgba(255,255,255,.9)}
.topo-marca :focus-visible{outline-color:#fff}

/* ---------- tipografia */
h1,h2,h3{font-family:var(--f-tit);color:var(--ink);text-wrap:balance}
h1{font-weight:700;font-size:clamp(2rem,1.3rem + 3vw,3.35rem);line-height:1.05;letter-spacing:-.035em;margin:0 0 20px;max-width:24ch}
h2{font-weight:700;font-size:clamp(1.55rem,1.15rem + 1.5vw,2.15rem);line-height:1.12;letter-spacing:-.03em;margin:0 0 22px}
h2::before{content:"";display:block;width:28px;height:2px;margin-bottom:18px;background:var(--marca)}
h3{font-weight:600;font-size:1.22rem;line-height:1.3;letter-spacing:-.015em;margin:32px 0 10px}
p,ul,ol,dl{margin:0 0 18px}
li{margin-bottom:10px}
sup.ref{font-size:.68em;line-height:0;margin-left:1px;white-space:nowrap}
sup.ref a{text-decoration:none;padding:0 1px;font-weight:600}

/* ---------- abertura: título forte, subtítulo, CTA primário + secundário, linha de revisão */
.abertura{padding:32px 0 var(--sec)}
.abertura-grade{display:grid;gap:36px}
.resposta{font-size:1.125rem;line-height:1.6;color:var(--ink2);max-width:62ch;margin:0 0 28px}
.acoes{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin:0 0 32px}
.abertura-texto{max-width:52rem}
.abertura-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-top:20px;border-top:1px solid var(--line)}
.revisado{margin:0;font-size:.875rem;color:var(--muted)}
.selo{margin:0;font:600 .875rem/1.2 var(--f-tit);color:var(--apoio);background:var(--marca-clara);border-radius:999px;padding:8px 14px}
.abertura .foto img{aspect-ratio:4/3;object-position:62% 40%}

/* abertura das páginas de venda: magenta da Alice, texto e logo em branco ("Fundo magenta com texto e elementos gráficos
   em branco", guia do corretor Alice). O botão principal vira branco com texto beterraba (12,43). */
.abertura-marca{background:var(--marca);color:#fff}
.abertura-marca h1,.abertura-marca .resposta,.abertura-marca strong,.abertura-marca .revisado{color:#fff}
.abertura-marca a{color:#fff;text-decoration-color:rgba(255,255,255,.6)}
.abertura-marca a:hover{color:#fff;text-decoration-color:#fff}
.abertura-marca .btn{background:#fff;border-color:#fff;color:var(--apoio)}
.abertura-marca .btn:hover{background:var(--marca-clara);border-color:var(--marca-clara);color:var(--apoio)}
.abertura-marca .btn-sec{color:#fff;border-bottom-color:rgba(255,255,255,.7)}
.abertura-marca .btn-sec:hover{color:#fff;border-bottom-color:#fff}
.abertura-marca .abertura-meta{border-top-color:rgba(255,255,255,.32)}
.abertura-marca .selo{background:var(--marca-escura);color:#fff}
.abertura-marca :focus-visible{outline-color:#fff}
.topo-marca+main .abertura-marca{padding-top:24px}
/* "Plano [logo] comercializado pela American Saúde, corretora": o logo identifica o produto, alinhado na linha de base */
.produto{margin:0 0 24px;font:600 1rem/1.5 var(--f-tit);letter-spacing:-.005em;color:#fff}
.produto .logo-produto{display:inline-block;height:48px;width:auto;margin:0 .5em;vertical-align:baseline}
.ficha-logo{margin:0 0 24px}
.ficha-logo .logo-produto{height:44px;width:auto}

/* ---------- faixas alternando branco e areia, com ritmo vertical generoso */
.faixa{padding:var(--sec) 0}
.areia{background:var(--sand)}
.sec-corpo>p,.sec-corpo>ul,.sec-corpo>ol,.sec-corpo>h3,.sec-corpo>dl,.faq-lista,.fontes .sec-corpo{max-width:68ch}
.sec-corpo>:last-child{margin-bottom:0}
.sec-corpo>h3:first-child{margin-top:0}
.sec-corpo ul{list-style:none;padding:0}
.sec-corpo ul>li{position:relative;padding-left:22px}
.sec-corpo ul>li::before{content:"";position:absolute;left:1px;top:.66em;width:6px;height:6px;background:var(--marca)}
.sec-corpo ol{padding-left:26px}
.sec-corpo ol>li::marker{font:600 .95em var(--f-tit);color:var(--marca)}
.miudo{font-size:.9375rem;color:var(--ink2)}
.atencao{background:var(--warn-bg);color:var(--warn-ink);border-left:3px solid var(--warn);border-radius:0 4px 4px 0;padding:14px 18px}
.atencao strong,.atencao a{color:var(--warn-ink)}
.aviso-forte{background:#fff;border:1.5px solid var(--ink);border-radius:5px;padding:18px 20px;font-weight:600;margin:0 0 22px}
.foto{margin:8px 0 24px}
.foto img{width:100%;border-radius:4px;aspect-ratio:960/538;object-fit:cover;background:var(--marca-clara)}

/* ---------- botões (WhatsApp sempre por <a href="/wa.php?..."> real) */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:14px 24px;border:1.5px solid var(--marca);border-radius:3px;background:var(--marca);color:#fff;text-decoration:none;font:600 1rem/1.25 var(--f-tit);letter-spacing:-.005em}
.btn:hover{background:var(--marca-escura);border-color:var(--marca-escura);color:#fff}
.btn:active{background:var(--marca-escura-hover);border-color:var(--marca-escura-hover)}
.btn svg{flex:none}
.btn small{display:block;margin-top:2px;font:400 .8125rem/1.3 var(--f-txt);letter-spacing:0;opacity:.92}
.btn-sec{display:inline-flex;align-items:center;min-height:48px;padding:6px 2px;color:var(--ink);text-decoration:none;font:600 1rem/1.25 var(--f-tit);border-bottom:2px solid var(--marca)}
.btn-sec:hover{color:var(--marca)}
.cta{margin:26px 0 8px}
.cta-bloco{margin:30px 0 8px;padding:24px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--marca);border-radius:4px}
.cta-bloco p{margin:0 0 16px;font:600 1.125rem/1.4 var(--f-tit);letter-spacing:-.01em}
.areia .cta-bloco{border-color:var(--line);border-top-color:var(--marca)}

/* CTA final: faixa beterraba #690046, texto branco (12,43), botão branco com texto beterraba */
.faixa-cta{background:var(--apoio);color:#fff}
.faixa-cta .cta-bloco{margin:0;padding:0;background:none;border:0;display:grid;gap:24px;align-items:center}
.faixa-cta .cta-bloco p{margin:0;max-width:34ch;color:#fff;font:700 clamp(1.35rem,1.05rem + 1.1vw,1.85rem)/1.2 var(--f-tit);letter-spacing:-.025em}
.faixa-cta .btn{background:#fff;border-color:#fff;color:var(--apoio);justify-self:start}
.faixa-cta .btn:hover{background:var(--marca-clara);border-color:var(--marca-clara);color:var(--apoio)}
.faixa-cta :focus-visible{outline-color:#fff}

/* ---------- tabelas: cabeçalho magenta-00 da Alice, rolam dentro da caixa (nunca a página) */
.tabela{overflow-x:auto;margin:22px 0 24px;background:#fff;border:1px solid var(--line);border-radius:5px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.9375rem;line-height:1.5}
.tabela.larga table{min-width:680px}
.tabela.larga td{min-width:8rem}
th,td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
tbody tr:last-child>*{border-bottom:0}
thead th{background:var(--marca-clara);border-bottom:1px solid var(--marca-borda);font:600 .75rem/1.3 var(--f-tit);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
tbody th{font-family:var(--f-tit);font-weight:600;font-size:.9375rem}
caption{caption-side:bottom;text-align:left;font-size:.8125rem;line-height:1.5;color:var(--muted);padding:12px 16px;border-top:1px solid var(--line)}

/* ---------- ficha da operadora */
.ficha dl{border-top:1px solid var(--line)}
.ficha dt{padding-top:14px;font:600 .8125rem/1.35 var(--f-tit);letter-spacing:.04em;color:var(--ink2)}
.ficha dd{margin:2px 0 0;padding-bottom:14px;border-bottom:1px solid var(--line)}

/* ---------- perguntas frequentes com <details>/<summary> (abre sem JavaScript) */
.faq-lista{border-top:1px solid var(--line)}
.faq-lista details{border-bottom:1px solid var(--line)}
.faq-lista summary{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:20px 2px;cursor:pointer;list-style:none}
.faq-lista summary::-webkit-details-marker{display:none}
.faq-lista summary::after{content:"+";flex:none;width:28px;height:28px;margin-top:-1px;border:1.5px solid var(--line);border-radius:999px;font:400 1.2rem/25px var(--f-tit);text-align:center;color:var(--marca)}
.faq-lista details[open]>summary::after{transform:rotate(45deg);border-color:var(--marca)}
.faq-lista summary h3{margin:0;font-size:1.125rem;line-height:1.4}
.faq-lista summary:hover h3{color:var(--marca)}
.faq-lista details>p{margin:0;padding:0 8px 22px 2px;color:var(--ink2)}

/* ---------- fontes: notas discretas (#5F7480, 14px), sempre em fundo branco */
.fontes{border-top:1px solid var(--line);font-size:.875rem;line-height:1.55;color:var(--muted)}
.fontes h2{font-size:1.25rem}
.fontes h2::before{width:20px}
.fontes li{margin-bottom:8px}
.fontes .sec-corpo ol>li::marker{font-family:var(--f-txt);color:var(--muted)}
.fontes a{overflow-wrap:anywhere}

/* ---------- rodapé #00506F (cores da American: é a assinatura da corretora), logo negativa da American, aviso de não-oficial */
.rod{background:var(--am-900);color:rgba(255,255,255,.9);font-size:.875rem;line-height:1.6;padding:56px 0 110px}
.rod a{color:#fff;text-decoration-color:rgba(255,255,255,.5)}
.rod a:hover{color:#fff;text-decoration-color:#fff}
.rod :focus-visible{outline-color:#fff}
.rod strong{color:#fff}
.rod p{margin:0 0 12px}
.rod img{height:34px;width:auto;margin-bottom:20px}
.rod-grade{display:grid;gap:12px 48px}
.rod-aviso{color:#fff;border-left:2px solid var(--am-400);padding-left:14px}
.rod-base{margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16)}
.rod-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:6px}
.prefs-cookies{background:none;border:0;color:#fff;text-decoration:underline;text-underline-offset:3px;font:inherit;padding:0;cursor:pointer}
.prefs-cookies[hidden]{display:none}

/* ---------- WhatsApp fixo: barra no celular, botão flutuante no desktop (ambos escritos no HTML) */
.flutuante{display:none}
.barra-mobile{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(255,255,255,.97);border-top:1px solid var(--line);padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
.barra-mobile .btn{width:100%;justify-content:center;min-height:48px;padding:12px 16px}
.sem-barra .rod{padding-bottom:40px}

/* ---------- aviso de cookies: acima da barra no celular, embaixo à esquerda no desktop */
#as-consent{position:fixed;left:12px;right:12px;bottom:84px;z-index:60;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:5px;box-shadow:0 18px 40px -28px rgba(11,34,48,.4),0 2px 8px rgba(11,34,48,.06);padding:16px 18px;font-size:.875rem;line-height:1.5}
.sem-barra #as-consent{bottom:12px}
#as-consent p{margin:0 0 12px}
#as-consent button{font:600 .875rem/1.2 var(--f-tit);padding:10px 16px;min-height:42px;border-radius:3px;border:1.5px solid var(--marca);background:#fff;color:var(--ink);margin:0 8px 0 0;cursor:pointer}
#as-consent button[data-v="all"]{background:var(--marca);color:#fff}

/* ---------- movimento mínimo, só para quem não pediu menos movimento */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .btn,.btn-sec,.menu a,#as-consent button{transition:background-color .18s ease,border-color .18s ease,color .18s ease}
  .faq-lista summary::after{transition:transform .26s cubic-bezier(.22,1,.36,1),border-color .18s ease}
}

@media (min-width:600px){
  :root{--pad:24px;--sec:72px}
  .faixa-cta .cta-bloco{grid-template-columns:1fr auto;gap:40px}
  .faixa-cta .btn{justify-self:end}
  .ficha dl{display:grid;grid-template-columns:200px 1fr}
  .ficha dt{padding:14px 16px 14px 0;border-bottom:1px solid var(--line)}
  .ficha dd{margin:0;padding:14px 0}
  .rod-grade{grid-template-columns:1fr 1fr}
  .rod-marca{grid-column:1/-1}
}
@media (min-width:768px){
  body{font-size:18px}
  .resposta{font-size:1.25rem}
  .abertura{padding-top:44px}
  .abertura-grade.com-foto{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:center}
  .abertura .foto{margin:0}
  .barra-mobile{display:none}
  /* anel branco: o botão magenta continua visível quando passa sobre a abertura magenta */
  .flutuante{display:inline-flex;position:fixed;right:24px;bottom:24px;z-index:50;min-height:48px;padding:12px 22px;border:2px solid #fff;border-radius:999px;box-shadow:0 18px 40px -18px rgba(11,34,48,.55)}
  .flutuante:hover{border-color:#fff}
  .rod{padding-bottom:104px}
  #as-consent,.sem-barra #as-consent{left:24px;right:auto;bottom:24px;max-width:430px}
}
@media (min-width:1024px){
  :root{--pad:32px;--sec:96px}
  .sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:0 clamp(48px,6vw,88px);align-items:start}
  .sec>h2{position:sticky;top:32px;margin:0}
  .sec-solo .sec-corpo,.sec>.sec-corpo{grid-column:2}
  .sec-empilhada{display:block}
  .sec-empilhada>h2{position:static;max-width:26ch;margin-bottom:28px}
  .faq-lista details>p{padding-right:48px}
  .abertura-grade.com-foto{gap:72px}
  .rod-grade{grid-template-columns:1.1fr 1fr 1fr}
  .rod-marca{grid-column:auto}
}
@media (min-width:1100px){
  .cab-in{grid-template-columns:auto 1fr;grid-template-areas:"marca menu" "desc menu";align-items:center;padding-top:14px;padding-bottom:14px}
  .marca{grid-area:marca}
  .descritor{grid-area:desc}
  .menu{grid-area:menu;justify-self:end;flex-wrap:nowrap;margin:0 -8px 0 0}
  .menu a{padding:10px 10px}
  .menu a.cliente{margin:0 0 0 12px;padding:9px 14px}
}
@media print{
  .flutuante,.barra-mobile,#as-consent,.menu,.acoes{display:none}
  .faixa{padding:20px 0}
  .faq-lista details>p{padding-right:0}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
