/* ==========================================================================
   Casting Seguros e Saúde — design system
   Marca: navy #0C2D72 · laranja #EB7539 (amostrados do logo)
   MOBILE FIRST: o estilo base é o do celular; as media queries só ampliam.
   Tema único claro (referência: Piwi / Pipo). Corpo 17px e alvo de toque 48px
   por causa do público 59+.
   ========================================================================== */

:root{
  color-scheme: light;

  --navy:#0C2D72;
  --navy-deep:#071A47;
  --navy-mid:#16307A;
  --orange:#EB7539;
  --orange-deep:#C95A22;
  --orange-soft:#FDEDE1;

  --paper:#FFFFFF;
  --panel:#FFFFFF;
  --panel-2:#F3F6FC;
  --azul-claro:#E7EDFA;
  --azul-medio:#D7E1F6;
  --ink:#0E1730;
  --muted:#586387;
  --line:#DFE5F1;

  --ok:#1A7F5A;
  --warn:#B4551F;

  --radius:16px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(12,45,114,.05), 0 8px 20px -14px rgba(12,45,114,.30);
  --shadow-md:0 2px 6px rgba(12,45,114,.06), 0 26px 50px -30px rgba(12,45,114,.45);

  --maxw:1140px;
  --gutter:18px;

  --serif:"Newsreader","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:"Figtree","Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation-duration:.01ms !important; transition-duration:.01ms !important}}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:var(--navy); text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--orange); outline-offset:2px; border-radius:4px;
}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.16; letter-spacing:-.02em; text-wrap:balance; margin:0; color:var(--ink)}
p{margin:0 0 1em}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter)}
.eyebrow{font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--orange)}
.lead{font-size:18px; color:var(--muted)}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  width:100%; min-height:54px; padding:0 24px; border-radius:999px; border:2px solid transparent;
  font-family:var(--sans); font-size:16.5px; font-weight:700; text-decoration:none; cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--orange); color:#fff; box-shadow:0 10px 24px -12px rgba(235,117,57,.9)}
.btn-primary:hover{background:var(--orange-deep)}
.btn-navy{background:var(--navy); color:#fff}
.btn-navy:hover{background:var(--navy-mid)}
.btn-outline{background:transparent; color:var(--navy); border-color:var(--line)}
.btn-outline:hover{border-color:var(--navy); background:var(--panel-2)}
.btn-claro{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
.btn-claro:hover{border-color:#fff; background:rgba(255,255,255,.12)}
@media (min-width:560px){ .btn{width:auto} .btn-lg{min-height:58px; font-size:17.5px; padding:0 32px} }

/* ---------- topbar ---------- */
.topbar{background:var(--panel-2); color:var(--muted); font-size:13.5px; border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex; flex-wrap:wrap; gap:2px 18px; align-items:center; justify-content:center; padding-block:8px; text-align:center}
.topbar a{color:var(--navy); text-decoration:none; font-weight:700}
.topbar .years{color:var(--orange); font-weight:700; letter-spacing:.03em}
@media (min-width:760px){ .topbar .wrap{justify-content:space-between; text-align:left} }

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:14px; padding-block:11px}
.brand{display:flex; align-items:center; text-decoration:none}
.brand img{height:34px; width:auto}
.brand .logo-dark{display:none}
.menu-toggle{background:none; border:1px solid var(--line); border-radius:10px; height:48px; width:48px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex:none}
.menu-toggle span{display:block; width:22px; height:2px; background:var(--ink); position:relative}
.menu-toggle span::before,.menu-toggle span::after{content:""; position:absolute; left:0; width:22px; height:2px; background:var(--ink)}
.menu-toggle span::before{top:-7px} .menu-toggle span::after{top:7px}
.nav{
  position:absolute; top:100%; left:0; right:0; background:var(--panel);
  border-bottom:1px solid var(--line); display:none; flex-direction:column; align-items:stretch;
  padding:10px var(--gutter) 20px; gap:2px; box-shadow:var(--shadow-md);
}
.nav.aberto{display:flex}
.nav a{
  padding:14px; border-radius:8px; color:var(--ink); text-decoration:none;
  font-weight:600; font-size:17px; min-height:48px; display:flex; align-items:center;
}
.nav a:hover{background:var(--panel-2); color:var(--navy)}
.nav a[aria-current="page"]{color:var(--navy); background:var(--panel-2)}
.nav .btn{margin-top:10px}
@media (min-width:1000px){
  .brand img{height:42px}
  .menu-toggle{display:none}
  .nav{display:flex; position:static; flex-direction:row; align-items:center; gap:4px; padding:0; border:0; box-shadow:none; background:none}
  .nav a{font-size:16px; padding:10px 13px; min-height:44px}
  .nav a[aria-current="page"]{background:none; box-shadow:inset 0 -3px 0 var(--orange)}
  .nav .btn{margin-top:0; margin-left:8px; width:auto}
}

/* ---------- hero editorial com foto ----------
   MOBILE FIRST: no celular a foto e uma faixa propria, com o bloco azul
   logo abaixo, para que os rostos nunca fiquem atras do texto.
   A partir de 760px a foto volta a ocupar a tela inteira, com o texto
   sobreposto, no formato das referencias (Piwi, Pipo). */
.hero{position:relative; color:#fff; background:var(--navy-deep); display:flex; flex-direction:column}
.hero-img{position:relative; overflow:hidden; aspect-ratio:5/6}
.hero-img img{width:100%; height:100%; object-fit:cover; object-position:center 20%}
.hero-img::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(7,26,71,.82) 0%, rgba(7,26,71,.46) 13%, rgba(7,26,71,.08) 31%, rgba(7,26,71,0) 46%, rgba(7,26,71,.86) 88%, var(--navy-deep) 100%);
}
.hero-conteudo{position:relative; z-index:1; padding-block:4px 30px; width:100%; margin-top:-34px}
.hero .eyebrow{color:#F9A86F}
.hero h1{font-size:clamp(32px,8.4vw,46px); line-height:1.06; color:#fff; margin:12px 0 16px; letter-spacing:-.032em; max-width:17ch}
.hero h1 em{font-style:normal; color:#F9A86F}
.hero-texto{font-size:16.5px; color:#D5E0F7; max-width:48ch; margin-bottom:24px}
.hero-actions{display:flex; flex-direction:column; gap:12px}

.hero-prova{position:relative; z-index:1; border-top:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.05)}
.hero-prova .wrap{display:grid; gap:12px; padding-block:18px}
.hero-prova div{display:flex; flex-direction:column; gap:1px}
.hero-prova b{font-family:var(--serif); font-size:17px; color:#fff; font-weight:600}
.hero-prova span{font-size:13.5px; color:#C6D4F2}

@media (min-width:620px){
  .hero-img{aspect-ratio:16/11}
  .hero-img img{object-position:center 26%}
}

@media (min-width:760px){
  .hero h1{font-size:clamp(40px,4.6vw,56px)}
  .hero-texto{font-size:18.5px}
  .hero-actions{flex-direction:row; flex-wrap:wrap; gap:14px}
  .hero-prova .wrap{grid-template-columns:repeat(3,1fr); gap:30px; padding-block:22px}
}

/* so no desktop a foto volta a ocupar a tela inteira, com o texto por cima.
   A arte ja vem com o lado esquerdo em azul, entao o recorte tem de sair da
   esquerda: object-position right mantem as duas pessoas onde foram posicionadas. */
@media (min-width:1000px){
  .hero{justify-content:flex-end; min-height:78svh}
  .hero-img{position:absolute; inset:0; aspect-ratio:auto}
  .hero-img img{object-position:right center}
  .hero-img::after{
    background:
      linear-gradient(180deg, rgba(7,26,71,.54) 0%, rgba(7,26,71,.20) 34%, rgba(7,26,71,.72) 100%),
      linear-gradient(90deg, rgba(7,26,71,.58) 0%, rgba(7,26,71,.20) 38%, rgba(7,26,71,0) 62%);
  }
  .hero-conteudo{padding-block:170px 44px; margin-top:0}
  .hero h1{font-size:clamp(50px,4.4vw,68px)}
  .hero-texto{font-size:19.5px; max-width:40ch}
  .hero-prova{background:rgba(7,26,71,.34)}
}

/* variante de duas colunas: foto de enquadramento central, em que a manchete
   sobreposta cobriria o rosto. Texto a esquerda, foto a direita, no desktop. */
@media (min-width:1000px){
  .hero-lado{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,44%);
    grid-template-rows:1fr auto; min-height:78svh; max-height:none; background:var(--navy-deep)}
  .hero-lado .hero h1{font-size:clamp(44px,3.8vw,58px)}
  .hero-lado .hero-img{position:relative; inset:auto; aspect-ratio:auto;
    grid-column:2; grid-row:1; height:100%}
  .hero-lado .hero-img img{object-position:center 26%}
  .hero-lado .hero-img::after{
    background:linear-gradient(90deg, var(--navy-deep) 0%, rgba(7,26,71,.62) 12%, rgba(7,26,71,.26) 30%, rgba(7,26,71,0) 60%);
  }
  /* a coluna de texto acompanha a mesma sarjeta das demais secoes do site */
  .hero-lado .hero-conteudo{grid-column:1; grid-row:1; align-self:center;
    padding-block:128px 44px; padding-right:44px; max-width:none; margin-inline:0;
    padding-left:max(24px, calc((100vw - 1180px) / 2))}
  .hero-lado .hero-conteudo .eyebrow,.hero-lado .hero-conteudo h1,
  .hero-lado .hero-conteudo p,.hero-lado .hero-conteudo .hero-actions{max-width:none}
  .hero-lado .hero-texto{max-width:44ch}
  .hero-lado .hero-prova{grid-column:1/-1; grid-row:2}
}

/* header sobreposto a foto, no formato das referencias */
.com-hero .topbar{display:none}
.com-hero .site-header{position:absolute; top:0; left:0; right:0; background:transparent;
  backdrop-filter:none; border-bottom:1px solid rgba(255,255,255,.16); transition:background .2s ease, border-color .2s ease}
.com-hero .site-header .nav a{color:#fff}
.com-hero .site-header .nav a:hover{background:rgba(255,255,255,.12); color:#fff}
.com-hero .site-header .nav a[aria-current="page"]{background:rgba(255,255,255,.14); box-shadow:none}
.com-hero .menu-toggle{border-color:rgba(255,255,255,.5)}
.com-hero .menu-toggle span,.com-hero .menu-toggle span::before,.com-hero .menu-toggle span::after{background:#fff}
.logo-branco{display:none}
.com-hero .logo-cor{display:none}
.com-hero .logo-branco{display:block}

/* ao rolar, o header desgruda da foto e fica solido */
.com-hero.rolou .site-header{position:fixed; background:rgba(255,255,255,.96); backdrop-filter:saturate(1.4) blur(10px); border-bottom-color:var(--line)}
.com-hero.rolou .site-header .nav a{color:var(--ink)}
.com-hero.rolou .site-header .nav a:hover{background:var(--panel-2); color:var(--navy)}
.com-hero.rolou .site-header .nav a[aria-current="page"]{background:none}
.com-hero.rolou .menu-toggle{border-color:var(--line)}
.com-hero.rolou .menu-toggle span,.com-hero.rolou .menu-toggle span::before,.com-hero.rolou .menu-toggle span::after{background:var(--ink)}
.com-hero.rolou .logo-cor{display:block}
.com-hero.rolou .logo-branco{display:none}

.nav .fone{display:none}
@media (min-width:1180px){
  .nav .fone{display:inline-flex; font-weight:700; font-size:15.5px; color:var(--navy)}
  .com-hero .nav .fone{color:#fff}
  .com-hero.rolou .nav .fone{color:var(--navy)}
}
/* no celular a gaveta do menu e branca, entao o texto volta ao tom normal */
.com-hero .nav.aberto{background:var(--panel)}
.com-hero .nav.aberto a{color:var(--ink)}
.com-hero .nav.aberto a:hover{background:var(--panel-2); color:var(--navy)}
.com-hero .nav.aberto .btn-primary{color:#fff}

/* ---------- faixa de chamada (substitui a antiga dobra de formulário) ---------- */
.faixa-cta .cta-card{display:grid; gap:22px; align-items:center}
.faixa-cta h2{font-size:clamp(26px,6vw,38px); margin:10px 0 12px}
.faixa-cta .lead{margin:0}
.cta-acao{display:flex; flex-direction:column; gap:12px}
.cta-nota{font-size:14px; color:var(--muted); margin:2px 0 0}
@media (min-width:860px){
  .faixa-cta .cta-card{grid-template-columns:minmax(0,1fr) minmax(0,340px); gap:48px}
  .cta-acao{align-items:stretch}
}

/* ---------- quiz em modal ---------- */
body.sem-rolagem{overflow:hidden}
.qz-fundo{position:fixed; inset:0; z-index:90; background:rgba(7,26,71,.62);
  backdrop-filter:blur(3px); display:flex; align-items:flex-end; justify-content:center}
/* sem esta linha o display:flex acima vence o hidden do navegador e o modal
   fica visivel o tempo todo */
.qz-fundo[hidden]{display:none}
@media (min-width:640px){ .qz-fundo{align-items:center; padding:24px} }

.qz-caixa{background:var(--panel); width:100%; max-width:560px; max-height:94svh; overflow:auto;
  border-radius:20px 20px 0 0; box-shadow:0 -12px 50px rgba(7,26,71,.3);
  animation:qzSobe .22s ease-out}
@media (min-width:640px){ .qz-caixa{border-radius:var(--radius); box-shadow:0 24px 60px rgba(7,26,71,.35)} }
@keyframes qzSobe{ from{transform:translateY(22px); opacity:.6} to{transform:none; opacity:1} }
@media (prefers-reduced-motion:reduce){ .qz-caixa{animation:none} }

.qz-topo{position:sticky; top:0; background:var(--navy); color:#fff; padding:16px 20px 12px; z-index:1}
.qz-topo-linha{display:flex; align-items:center; justify-content:space-between; gap:12px}
.qz-marca{font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#F9A86F}
.qz-fechar{background:none; border:0; color:#fff; font-size:19px; line-height:1; cursor:pointer;
  padding:6px 8px; border-radius:8px; min-width:40px; min-height:40px}
.qz-fechar:hover{background:rgba(255,255,255,.14)}
.qz-barra{height:4px; background:rgba(255,255,255,.22); border-radius:2px; margin:12px 0 8px; overflow:hidden}
.qz-barra-fill{height:100%; width:0; background:var(--orange); border-radius:2px; transition:width .25s ease}
.qz-passo{font-size:12.5px; color:#C6D4F2; margin:0}

.qz-corpo{padding:22px 20px 26px}
@media (min-width:640px){ .qz-corpo{padding:28px} }
.qz-pergunta{font-size:clamp(21px,5vw,26px); line-height:1.18; margin:0 0 8px}
.qz-ajuda{font-size:15px; color:var(--muted); margin:0 0 20px}

.qz-opcoes{display:grid; gap:10px}
.qz-opcao{display:flex; flex-direction:column; gap:2px; text-align:left; width:100%;
  background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:15px 16px;
  cursor:pointer; font:inherit; color:var(--ink); transition:border-color .15s, background .15s, transform .08s}
.qz-opcao span{font-weight:600; font-size:16.5px}
.qz-opcao small{font-size:13.5px; color:var(--muted)}
.qz-opcao:hover{border-color:var(--navy); background:var(--panel-2)}
.qz-opcao:active{transform:scale(.995)}

.qz-campo{margin-bottom:14px}
.qz-campo label{display:block; font-size:14px; font-weight:600; margin-bottom:6px}
.qz-campo input{width:100%; font:inherit; font-size:16px; padding:13px 14px;
  border:1.5px solid var(--line); border-radius:12px; background:#fff; color:var(--ink)}
.qz-campo input:focus{outline:2px solid var(--navy); outline-offset:1px; border-color:var(--navy)}
.qz-armadilha{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.qz-erro{color:#B3261E; font-size:14px; min-height:20px; margin:0 0 6px}

.qz-rodape{display:flex; align-items:center; gap:12px; margin-top:18px; flex-wrap:wrap}
.qz-rodape .qz-avancar{flex:1; min-width:180px}
.qz-voltar{background:none; border:0; color:var(--muted); font:inherit; font-size:15px;
  cursor:pointer; padding:10px 4px; text-decoration:underline; text-underline-offset:3px}
.qz-voltar:hover{color:var(--navy)}
.qz-nota{font-size:13px; color:var(--muted); margin:16px 0 0}
.qz-nota a{color:var(--navy)}

.qz-fim{text-align:center; padding:8px 0 4px}
.qz-check{width:56px; height:56px; margin:0 auto 16px; border-radius:50%; background:var(--navy);
  color:#fff; font-size:27px; display:flex; align-items:center; justify-content:center}
.qz-fim h3{font-size:24px; margin:0 0 8px}
.qz-fim p{color:var(--muted); margin:0 0 20px}
.qz-fim .btn{width:100%}
.qz-fim .qz-voltar{margin-top:12px}

/* ---------- formulário ---------- */
.field{margin-bottom:14px}
.field label{display:block; font-size:14.5px; font-weight:700; margin-bottom:6px; color:var(--ink)}
.field input,.field select,.field textarea{
  width:100%; min-height:52px; padding:12px 14px; font-family:var(--sans); font-size:16px;
  color:var(--ink); background:var(--panel); border:2px solid var(--line); border-radius:var(--radius-sm);
}
.field textarea{min-height:96px; resize:vertical}
.field input:focus,.field select:focus{border-color:var(--navy)}
.field-row{display:grid; grid-template-columns:1fr; gap:0}
.choice{display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:16px}
.choice input{position:absolute; opacity:0; pointer-events:none}
.choice label{
  display:flex; flex-direction:column; gap:2px; padding:14px; min-height:56px; cursor:pointer;
  border:2px solid var(--line); border-radius:var(--radius-sm); font-weight:700; font-size:15.5px;
}
.choice label small{font-weight:500; color:var(--muted); font-size:13px}
.choice input:checked + label{border-color:var(--navy); background:var(--panel-2)}
.choice input:focus-visible + label{outline:3px solid var(--orange); outline-offset:2px}
.form-note{font-size:13px; color:var(--muted); margin-top:12px}
.form-status{margin-top:12px; font-size:15px; font-weight:600}
.form-status.ok{color:var(--ok)} .form-status.err{color:var(--warn)}
@media (min-width:560px){
  .field-row{grid-template-columns:1fr 1fr; gap:12px}
  .choice{grid-template-columns:1fr 1fr}
}

/* ---------- seções ---------- */
.section{padding-block:52px}
.section-head{max-width:62ch; margin-bottom:28px}
.section-head.center{margin-inline:auto}
.section-head h2{font-size:clamp(26px,6vw,38px); margin:10px 0 12px}
.section-alt{background:var(--azul-claro); border-block:1px solid var(--azul-medio)}
@media (min-width:760px){ .section{padding-block:76px} .section-head{margin-bottom:38px} }

/* faixa em azul profundo da marca */
.section-navy{
  background:
    radial-gradient(120% 90% at 88% 8%, #16307A 0%, rgba(22,48,122,0) 58%),
    linear-gradient(160deg,#0C2D72 0%,#071A47 100%);
  color:#fff; position:relative; overflow:hidden;
}
.section-navy::after{
  content:""; position:absolute; inset:0;
  background:url("../img/simbolo-s-branco.webp") left -120px bottom -50px / auto 140% no-repeat;
  opacity:.07; pointer-events:none;
}
.section-navy > .wrap{position:relative; z-index:1}
.section-navy h2,.section-navy h3,.section-navy h4{color:#fff}
.section-navy p,.section-navy li,.section-navy .lead{color:#CCD9F6}
.section-navy a:not(.btn){color:#fff}

/* dois caminhos */
.paths{display:grid; grid-template-columns:1fr; gap:18px}
.path{
  position:relative; display:flex; flex-direction:column; gap:12px; padding:24px 22px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.path::before{content:""; position:absolute; inset:0 auto 0 0; width:5px; border-radius:var(--radius) 0 0 var(--radius); background:var(--navy)}
.path.senior::before{background:var(--orange)}
.path h3{font-size:25px}
.path ul{margin:0; padding-left:20px; color:var(--muted)}
.path ul li{margin-bottom:7px}
.path .btn{margin-top:6px}
@media (min-width:760px){
  .paths{grid-template-columns:1fr 1fr; gap:22px}
  .path{padding:32px}
  .path .btn{align-self:flex-start}
}

/* razões */
.reasons{display:grid; grid-template-columns:1fr; gap:24px}
.reason{display:flex; flex-direction:column; gap:6px}
.reason .num{font-size:18px; color:var(--orange); line-height:1}
.reason h3{font-size:20px}
.reason p{color:var(--muted); font-size:16px; margin:0}
@media (min-width:700px){ .reasons{grid-template-columns:1fr 1fr; gap:30px} }
@media (min-width:1000px){ .reasons{grid-template-columns:repeat(4,1fr)} }

/* passos */
.steps{counter-reset:step; display:grid; border-top:1px solid var(--line)}
.step{
  counter-increment:step; display:grid; grid-template-columns:48px 1fr; gap:16px;
  padding-block:22px; border-bottom:1px solid var(--line); align-items:start;
}
.step::before{
  content:counter(step,decimal-leading-zero); font-family:var(--serif); font-size:20px; color:var(--navy);
  border:2px solid var(--line); border-radius:50%; width:46px; height:46px; display:grid; place-items:center;
}
.step h3{font-size:20px; margin-bottom:4px}
.step p{color:var(--muted); margin:0}
@media (min-width:760px){
  .step{grid-template-columns:64px 1fr; gap:20px; padding-block:26px}
  .step::before{width:56px; height:56px; font-size:24px}
  .step h3{font-size:22px}
}

/* faixa 59+ */
.senior-band{display:grid; grid-template-columns:1fr; gap:28px; align-items:center}
.senior-facts{display:grid; gap:14px}
.fact{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-left:4px solid var(--orange); border-radius:var(--radius-sm); padding:18px 20px}
.fact b{display:block; font-family:var(--serif); font-size:19px; color:#fff; margin-bottom:4px}
.fact span{color:#CCD9F6; font-size:15px}
@media (min-width:900px){ .senior-band{grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:48px} .fact b{font-size:21px} }

/* faq */
.faq-list{border-top:1px solid var(--line)}
details.faq{border-bottom:1px solid var(--line)}
details.faq summary{
  cursor:pointer; list-style:none; padding:18px 40px 18px 0; position:relative;
  font-family:var(--serif); font-size:19px; font-weight:600; color:var(--ink);
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{
  content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  font-family:var(--sans); font-size:26px; font-weight:400; color:var(--orange);
}
details.faq[open] summary::after{content:"–"}
details.faq .answer{padding-bottom:20px; color:var(--muted); max-width:72ch}
@media (min-width:760px){ details.faq summary{font-size:21px; padding:20px 44px 20px 0} }

/* cards de artigo */
.posts-grid{display:grid; grid-template-columns:1fr; gap:20px}
.post-card{
  display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); text-decoration:none; color:inherit;
  transition:transform .18s ease, box-shadow .18s ease;
}
.post-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.post-card .cover{
  aspect-ratio:16/9; max-width:100%; display:grid; place-items:center; text-align:center; overflow:hidden;
  background:linear-gradient(150deg,#0C2D72,#071A47);
}
.post-card .cover img{width:100%; height:100%; object-fit:cover; display:block}
.post-card .cover span{font-family:var(--serif); font-size:19px; color:#fff; line-height:1.25; padding:20px}
.post-card .body{padding:20px; display:flex; flex-direction:column; gap:8px; flex:1}
.post-card .cat{font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--orange)}
.post-card h3{font-size:20px}
.post-card p{color:var(--muted); font-size:15.5px; margin:0}
.post-card .meta{margin-top:auto; padding-top:12px; font-size:13.5px; color:var(--muted)}
@media (min-width:620px){ .posts-grid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:24px} }

/* ---------- artigo ---------- */
.article-head{background:var(--panel-2); border-bottom:1px solid var(--line); padding-block:32px 28px}
.article-head .wrap{max-width:820px}
.article-head h1{font-size:clamp(27px,7vw,44px); margin:12px 0 14px; letter-spacing:-.028em}
.breadcrumb{font-size:13.5px; color:var(--muted)}
.breadcrumb a{color:var(--muted)}
.byline{display:flex; flex-wrap:wrap; gap:6px 20px; align-items:center; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:14px; color:var(--muted)}
.byline b{color:var(--ink)}
.article-body{max-width:820px; margin:0 auto; padding:32px var(--gutter) 52px; font-size:17.5px}
.article-body h2{font-size:clamp(23px,5.6vw,29px); margin:34px 0 12px}
.article-body h3{font-size:21px; margin:26px 0 10px}
.article-body ul,.article-body ol{padding-left:20px}
.article-body li{margin-bottom:8px}
.article-body table{width:100%; border-collapse:collapse; font-size:15.5px; margin:20px 0; min-width:460px}
.article-body thead th{background:var(--navy); color:#fff; text-align:left; padding:11px 13px; font-family:var(--sans); font-size:14px}
.article-body td{padding:11px 13px; border-bottom:1px solid var(--line)}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter)}
.direct-answer{
  background:var(--orange-soft); border-left:5px solid var(--orange); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:18px 20px; margin:0 0 26px; font-size:17.5px; color:var(--ink);
}
.direct-answer p:last-child{margin-bottom:0}
.author-box{display:flex; gap:14px; align-items:flex-start; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-top:40px}
.author-box .av{width:52px; height:52px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; font-family:var(--serif); font-size:21px; flex:none}
.author-box p{font-size:15.5px; color:var(--muted); margin:0}
@media (min-width:760px){
  .article-head{padding-block:46px 36px}
  .article-body{padding-block:44px 60px; font-size:18px}
  .table-scroll{margin-inline:0; padding-inline:0}
  .direct-answer{padding:22px 26px; font-size:18.5px}
}

/* ---------- barra fixa de ação no celular ---------- */
.acao-mobile{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-top:1px solid var(--line);
}
.acao-mobile .btn{min-height:50px; font-size:15.5px; padding:0 12px}
body{padding-bottom:78px}
@media (min-width:760px){ .acao-mobile{display:none} body{padding-bottom:0} }

/* whatsapp flutuante — só no desktop; no celular quem age é a barra fixa */
.wa-float{
  display:none; position:fixed; right:18px; bottom:18px; z-index:60;
  align-items:center; gap:10px; min-height:56px; padding:0 20px 0 16px;
  background:#15A85B; color:#fff; border-radius:999px; text-decoration:none; font-weight:700; font-size:16px;
  box-shadow:0 12px 28px -12px rgba(21,168,91,.9);
}
.wa-float svg{width:24px; height:24px; fill:currentColor}
@media (min-width:760px){ .wa-float{display:inline-flex} }

/* ---------- rodapé ---------- */
.site-footer{background:var(--navy-deep); color:#B9C6E8; padding-block:44px 24px; font-size:15px}
.site-footer h4{font-family:var(--sans); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin-bottom:12px}
.footer-grid{display:grid; grid-template-columns:1fr; gap:28px}
.site-footer a{color:#D7E0F6; text-decoration:none; display:inline-block; padding-block:6px}
.site-footer a:hover{color:#fff; text-decoration:underline}
.site-footer img{height:38px; width:auto; margin-bottom:14px}
.footer-legal{margin-top:30px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14); font-size:12.5px; color:#8FA0C9}
@media (min-width:560px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (min-width:960px){ .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px} .site-footer{padding-block:56px 28px} }

/* ---------- token de configuração pendente ---------- */
.todo{background:#FFE8D6; color:#9A3A00; border:1px dashed #E0873F; border-radius:4px; padding:1px 7px; font-family:var(--sans); font-size:13px; font-weight:700; white-space:nowrap}

/* ---------- banner do blog ---------- */
.banner-blog{background:var(--navy-deep); border-bottom:1px solid var(--line)}
.banner-blog img{width:100%; max-width:100%; display:block; aspect-ratio:900/620}
@media (min-width:620px){ .banner-blog img{aspect-ratio:1600/560} }

/* ---------- capa do artigo ---------- */
.artigo-capa{margin:0; background:var(--navy-deep)}
.artigo-capa img{width:100%; max-width:100%; display:block; aspect-ratio:16/9; object-fit:cover}
@media (min-width:860px){
  .artigo-capa{max-width:860px; margin:28px auto 0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md)}
}

/* ---------- tabela desenhada ----------
   MOBILE FIRST: no celular cada linha vira um cartão e o nome da coluna
   aparece ao lado do valor (vem do atributo data-rotulo). A partir de 720px
   ela volta a ser uma grade de verdade. A coluna em destaque é a que a
   página está defendendo. */
.tbl-quadro{margin:22px 0 8px}
.tbl-legenda{font-size:14px; color:var(--muted); margin:0 0 12px; order:2}
.tbl-comparativa{width:100%; border-collapse:collapse; font-size:15.5px}
.tbl-comparativa thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.tbl-comparativa tr{display:block; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:4px 0; margin-bottom:12px; overflow:hidden}
.tbl-comparativa th[scope="row"]{display:block; text-align:left; font-family:var(--serif);
  font-size:17px; font-weight:600; color:var(--navy); padding:11px 16px 7px;
  border-bottom:1px solid var(--line)}
.tbl-comparativa td{display:flex; gap:14px; justify-content:space-between; align-items:baseline;
  padding:9px 16px; border-bottom:1px solid var(--line); text-align:right}
.tbl-comparativa tr td:last-child{border-bottom:0}
.tbl-comparativa td::before{content:attr(data-rotulo); flex:0 0 auto; text-align:left;
  font-size:12.5px; font-weight:700; letter-spacing:.04em; color:var(--muted); text-transform:uppercase}
.tbl-comparativa td.col-destaque{background:var(--panel-2)}
.tbl-comparativa td.col-destaque::before{color:var(--navy)}
.tbl-comparativa td.col-destaque{font-weight:600; color:var(--navy)}

@media (min-width:720px){
  .tbl-quadro{display:flex; flex-direction:column}
  .tbl-comparativa{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
    background:var(--panel); box-shadow:var(--shadow-sm)}
  .tbl-comparativa thead{position:static; width:auto; height:auto; clip:auto}
  .tbl-comparativa tr{display:table-row; background:none; border:0; border-radius:0;
    padding:0; margin:0; overflow:visible}
  .tbl-comparativa thead th{background:var(--navy); color:#fff; text-align:left;
    font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; padding:14px 18px; border:0}
  .tbl-comparativa thead th.col-destaque{background:var(--navy-deep); color:#F9A86F;
    box-shadow:inset 0 -3px 0 var(--orange)}
  .tbl-comparativa th[scope="row"]{display:table-cell; font-size:15.5px; padding:14px 18px;
    border-bottom:1px solid var(--line); vertical-align:top; width:26%}
  .tbl-comparativa td{display:table-cell; padding:14px 18px; border-bottom:1px solid var(--line);
    vertical-align:top; color:var(--ink); text-align:left}
  .tbl-comparativa td::before{content:none}
  .tbl-comparativa tbody tr:last-child th,
  .tbl-comparativa tbody tr:last-child td{border-bottom:0}
  .tbl-comparativa tbody tr:hover th[scope="row"],
  .tbl-comparativa tbody tr:hover td{background:rgba(12,45,114,.035)}
  .tbl-comparativa td.col-destaque{background:var(--panel-2); font-weight:600; color:var(--navy)}
  .tbl-comparativa tbody tr:hover td.col-destaque{background:rgba(12,45,114,.075)}
}