/* =========================================================================
   AULA AO VIVO — TRÁFEGO PAGO COM CLAUDE PARA CORRETOR DE IMÓVEIS
   Folha única. Tokens herdados da Imersão, layout novo: leve e mobile-first.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
:root{
  --tinta:      #06060A;
  --tinta-2:    #0A0A10;
  --tinta-3:    #101018;
  --papel:      #F4F0EA;
  --papel-90:   rgba(244,240,234,.90);
  --papel-78:   rgba(244,240,234,.78);
  --papel-58:   rgba(244,240,234,.58);
  --papel-18:   rgba(244,240,234,.18);
  --papel-11:   rgba(244,240,234,.11);
  --papel-06:   rgba(244,240,234,.06);

  --acento:     #D97757;          /* o coral do Claude */
  --acento-cl:  #E8977A;
  --acento-2:   #E8C06A;          /* dourado, só para o preço e o selo */
  --alerta:     #E06B5A;

  --serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --pad:    clamp(20px, 5.6vw, 64px);
  --largura: 1120px;
  --leitura: 720px;

  --ease:   cubic-bezier(.22,.61,.36,1);
  --raio:   14px;
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box }
/* Não colocar overflow no <html>: o overflow-x:hidden do body só protege a
   página porque propaga para a viewport. Com overflow no html, o body vira
   container de rolagem e o position:sticky para de funcionar, sem erro. */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0;
  background:var(--tinta);
  color:var(--papel);
  font-family:var(--sans);
  font-size:clamp(15.5px,1.02vw,17px);
  line-height:1.62;
  letter-spacing:.004em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

h1,h2,h3,p,dl,dd,figure{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
img{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit }
::selection{ background:var(--acento); color:#0A0A10 }

.skip{
  position:fixed; left:-9999px; top:12px; z-index:300;
  background:var(--papel); color:var(--tinta);
  padding:10px 16px; border-radius:4px; font-size:14px;
}
.skip:focus{ left:12px }

:focus-visible{ outline:2px solid var(--acento); outline-offset:4px; border-radius:2px }

/* ============================================================ tipografia */
.kicker{
  font-family:var(--mono);
  font-size:clamp(10px,.72vw,11.5px);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--acento);
  display:flex; align-items:center; gap:12px;
  margin-bottom:18px;
}
.kicker-linha{
  width:clamp(22px,4vw,44px); height:1px; flex:none;
  background:linear-gradient(90deg,var(--acento),transparent);
}

.display{
  font-family:var(--sans);
  font-weight:600;
  font-size:clamp(30px,5.4vw,60px);
  line-height:1.04;
  letter-spacing:-.028em;
  text-wrap:balance;
}
.display em{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.012em;
  color:var(--acento);
  /* a serifa senta mais alta que a Inter e precisa descer um fio */
  display:inline-block;
  transform:translateY(.045em);
}
.titulo{
  font-family:var(--sans);
  font-weight:600;
  font-size:clamp(25px,3.5vw,40px);
  line-height:1.1;
  letter-spacing:-.024em;
  text-wrap:balance;
}
.titulo em{
  font-family:var(--serif); font-style:italic; font-weight:400;
  color:var(--acento); display:inline-block; transform:translateY(.045em);
}
.lede{
  font-size:clamp(16.5px,1.5vw,21px);
  line-height:1.5;
  color:var(--papel-90);
  max-width:38ch;
  text-wrap:pretty;
}
.corpo{ color:var(--papel-78); max-width:62ch; text-wrap:pretty }
.corpo + .corpo{ margin-top:1em }
.fino{ font-size:14px; color:var(--papel-58) }

/* ================================================================ botões */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  background:var(--acento); color:#120A06;
  font-weight:600; font-size:clamp(15px,1.15vw,17px); letter-spacing:-.005em;
  padding:17px 26px; border-radius:var(--raio); border:0;
  text-align:center; cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 14px 34px -16px rgba(217,119,87,.85);
  transition:transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.btn svg{ width:19px; height:19px; flex:none; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round }
.btn:hover{ background:var(--acento-cl); transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 20px 40px -16px rgba(217,119,87,.95) }
.btn:active{ transform:translateY(0) }
.btn-grande{ width:100%; max-width:440px; padding:20px 26px; font-size:clamp(16px,1.25vw,18.5px) }
@media (prefers-reduced-motion:reduce){ .btn,.btn:hover{ transform:none } }

.cta-bloco{ margin-top:30px; display:flex; flex-direction:column; align-items:flex-start; gap:12px }
.cta-bloco.centro{ align-items:center }
.cta-nota{ font-size:13.5px; color:var(--papel-58); display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.cta-nota b{ color:var(--papel-90); font-weight:500 }

.aviso{
  font-size:14px; color:var(--acento-2);
  border:1px solid rgba(232,192,106,.32);
  background:rgba(232,192,106,.07);
  padding:11px 15px; border-radius:10px; max-width:440px;
}

/* ============================================================ estrutura */
.envelope{ width:min(100% - var(--pad)*2, var(--largura)); margin-inline:auto }

.bloco{ padding-block:clamp(60px,9vw,120px); position:relative }
.bloco + .bloco{ border-top:1px solid var(--papel-06) }
.bloco-cabeca{ max-width:var(--leitura); margin-bottom:clamp(32px,4vw,52px) }
.bloco-cabeca .lede{ margin-top:18px; max-width:52ch }

/* Revelação na rolagem.
   O estado escondido só existe quando o main.js confirma que consegue revelar,
   ligando a classe .anim no <html>. Sem JS, com JS quebrado ou sem
   IntersectionObserver, nenhuma regra abaixo se aplica e a página nasce
   inteira visível. Página de conversão não pode depender de script para
   mostrar o próprio texto. */
html.anim [data-anim]{
  opacity:0; transform:translateY(16px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
html.anim [data-anim].dentro{ opacity:1; transform:none }
html.anim [data-anim][data-atraso="1"]{ transition-delay:.08s }
html.anim [data-anim][data-atraso="2"]{ transition-delay:.16s }
html.anim [data-anim][data-atraso="3"]{ transition-delay:.24s }
@media (prefers-reduced-motion:reduce){
  html.anim [data-anim]{ opacity:1; transform:none; transition:none }
}

/* ================================================================== topo */
.marca{
  position:relative; z-index:3;
  display:flex; align-items:center; gap:10px;
  padding-block:22px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--papel-58);
}
.marca-ponto{
  width:7px; height:7px; border-radius:50%; background:var(--acento);
  box-shadow:0 0 0 4px rgba(217,119,87,.16);
}
/* O nome da marca escapa do uppercase de propósito: o "IA" no meio de
   AgencIA é o trocadilho, e em caixa alta ele desaparece. */
.marca-nome{
  text-transform:none; font-weight:500; letter-spacing:.06em;
  color:var(--papel-90);
}

/* ================================================================== hero */
.hero{ position:relative; overflow:hidden; padding-bottom:clamp(56px,7vw,86px) }
.hero::before{
  content:''; position:absolute; inset:-20% -10% 30% -10%; z-index:0; pointer-events:none;
  background:radial-gradient(46% 46% at 62% 34%, rgba(217,119,87,.20) 0%, transparent 70%);
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, var(--tinta) 100%);
}
#gl{
  position:absolute; z-index:1; pointer-events:none;
  top:2%; right:-4%; width:52%; height:88%;
  opacity:0; transition:opacity 1.6s var(--ease);
}
#gl.pronto{ opacity:.95 }
@media (max-width:899px){ #gl{ display:none } }

.hero-in{ position:relative; z-index:2; max-width:660px; padding-top:clamp(8px,1.6vw,22px) }

.selo{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--papel-18); border-radius:999px;
  padding:8px 15px 8px 12px; margin-bottom:22px;
  font-size:12.5px; color:var(--papel-78);
  background:var(--papel-06); backdrop-filter:blur(3px);
}
.selo b{ color:var(--papel); font-weight:600 }
.selo-ponto{
  width:6px; height:6px; border-radius:50%; background:var(--acento-2); flex:none;
  box-shadow:0 0 0 3px rgba(232,192,106,.18);
}

.hero .lede{ margin-top:17px }

.hero-bullets{ margin-top:22px; display:grid; gap:10px }
.hero-bullets li{
  display:flex; align-items:flex-start; gap:12px;
  font-size:15.5px; color:var(--papel-90);
}
.hero-bullets svg{
  width:19px; height:19px; flex:none; margin-top:2px;
  fill:none; stroke:var(--acento); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}

.hero-meta{
  margin-top:22px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  color:var(--papel-78);
}
.hero-meta b{ color:var(--papel); font-weight:500 }
.hero-meta .sep{ color:var(--papel-18) }
.hero-meta .preco{ color:var(--acento-2) }
#contagem{
  color:var(--acento); border:1px solid rgba(217,119,87,.3);
  border-radius:999px; padding:3px 10px; background:rgba(217,119,87,.08);
}

.hero-nota{ margin-top:15px; font-size:13.5px; color:var(--papel-58); max-width:44ch }

/* Celular. Mesmo objetivo: promessa, data, preço e botão na primeira tela,
   sem cortar nenhum conteúdo. */
@media (max-width:560px){
  .marca{ padding-block:14px }
  .hero-in{ padding-top:0 }
  .selo{ margin-bottom:14px; padding:7px 13px 7px 11px; font-size:12px }
  .kicker{ margin-bottom:12px }
  .hero .lede{ margin-top:14px; max-width:none }
  .hero-bullets{ margin-top:16px; gap:8px }
  .hero-bullets li{ font-size:15px }
  .hero-meta{ margin-top:16px; gap:8px 12px }
  .cta-bloco{ margin-top:20px }
  .hero-nota{ margin-top:13px }
  .btn-grande{ max-width:none }
}

/* Notebook de tela baixa (1366x768, 1280x800). O botão principal precisa
   caber na primeira tela, senão a página perde o clique mais barato que tem. */
@media (min-width:900px) and (max-height:900px){
  .marca{ padding-block:16px }
  .hero-in{ padding-top:4px }
  .hero .display{ font-size:clamp(30px,3.5vw,46px) }
  .hero .lede{ font-size:17px; margin-top:14px; max-width:46ch }
  .selo{ margin-bottom:16px }
  .kicker{ margin-bottom:13px }
  .hero-bullets{ margin-top:18px; gap:8px }
  .hero-bullets li{ font-size:15px }
  .hero-meta{ margin-top:18px }
  .cta-bloco{ margin-top:22px }
  .hero{ padding-bottom:48px }
}

/* ============================================================ barra fixa */
.barra{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  background:rgba(8,8,14,.86);
  backdrop-filter:blur(14px) saturate(1.3);
  border-top:1px solid var(--papel-11);
  transform:translateY(104%);
  transition:transform .38s var(--ease);
}
.barra.vista{ transform:none }
.barra-txt{ min-width:0; line-height:1.28 }
.barra-txt b{ display:block; font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.barra-txt span{ font-family:var(--mono); font-size:11px; letter-spacing:.09em; color:var(--papel-58) }
.barra .btn{ padding:13px 20px; font-size:14.5px; flex:none }
@media (prefers-reduced-motion:reduce){ .barra{ transition:none } }
@media (max-width:479px){
  .barra .btn svg{ display:none }
  .barra .btn{ padding:13px 16px }
}

/* ============================================================== atenção */
.bloco-atencao{ background:linear-gradient(180deg, rgba(224,107,90,.055), transparent 62%) }
.atencao-lista{ display:grid; gap:14px; max-width:var(--leitura) }
.atencao-lista li{
  display:flex; align-items:flex-start; gap:15px;
  padding:19px 21px; border-radius:var(--raio);
  border:1px solid var(--papel-11);
  background:linear-gradient(180deg, var(--papel-06), transparent);
  font-size:clamp(16px,1.35vw,19px); font-weight:500; line-height:1.4;
  color:var(--papel);
  text-wrap:pretty;
}
.atencao-lista svg{
  width:21px; height:21px; flex:none; margin-top:2px;
  fill:none; stroke:var(--alerta); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

/* ================================================================ cartões */
.cartoes{ display:grid; gap:16px }
@media (min-width:760px){ .cartoes.duas{ grid-template-columns:1fr 1fr } }
@media (min-width:760px){ .cartoes.tres{ grid-template-columns:repeat(3,1fr) } }

.cartao{
  border:1px solid var(--papel-11); border-radius:var(--raio);
  background:linear-gradient(180deg, var(--papel-06), transparent 70%);
  padding:clamp(22px,2.6vw,30px);
  position:relative; overflow:hidden;
}
.cartao-num{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  color:var(--acento); margin-bottom:14px; display:block;
}
.cartao h3{
  font-size:clamp(18px,1.7vw,22px); font-weight:600; line-height:1.22;
  letter-spacing:-.016em; margin-bottom:11px; text-wrap:balance;
}
.cartao p{ color:var(--papel-78); font-size:15.5px; text-wrap:pretty }

/* ================================================= google x instagram */
.versus{ display:grid; gap:16px }
@media (min-width:820px){ .versus{ grid-template-columns:1fr 1fr; gap:20px } }

.lado{
  border:1px solid var(--papel-11); border-radius:var(--raio);
  padding:clamp(24px,2.8vw,32px);
  background:linear-gradient(180deg, var(--papel-06), transparent 72%);
}
.lado-cabeca{ display:flex; align-items:center; gap:13px; margin-bottom:8px }
.lado-icone{
  width:38px; height:38px; flex:none; border-radius:10px;
  display:grid; place-items:center;
  border:1px solid var(--papel-18); background:var(--papel-06);
}
.lado-icone svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.lado-google .lado-icone{ color:var(--acento-2) }
.lado-meta .lado-icone{ color:var(--acento-cl) }
.lado h3{ font-size:clamp(19px,1.8vw,23px); font-weight:600; letter-spacing:-.018em }
.lado-tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--papel-58); display:block; margin-bottom:18px;
}
.lado ul{ display:grid; gap:11px; margin-top:18px }
.lado li{ display:flex; align-items:flex-start; gap:11px; font-size:15.5px; color:var(--papel-90) }
.lado li svg{ width:17px; height:17px; flex:none; margin-top:3px; fill:none; stroke:var(--acento); stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round }

.versus-fecho{
  margin-top:22px; padding:22px 24px;
  border:1px solid rgba(217,119,87,.26); border-radius:var(--raio);
  background:rgba(217,119,87,.07);
  font-size:clamp(16px,1.4vw,19px); line-height:1.45; font-weight:500;
  text-wrap:pretty;
}

/* ============================================================ mecanismo */
.terminal{
  border:1px solid var(--papel-11); border-radius:var(--raio); overflow:hidden;
  background:var(--tinta-2); font-family:var(--mono); font-size:13.5px; line-height:1.72;
  max-width:640px;
}
.terminal-topo{
  display:flex; align-items:center; gap:7px;
  padding:11px 15px; border-bottom:1px solid var(--papel-11);
  background:var(--papel-06);
}
.terminal-topo i{ width:9px; height:9px; border-radius:50%; background:var(--papel-18); display:block }
.terminal-topo span{ margin-left:8px; font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--papel-58) }
.terminal-corpo{ padding:18px 17px; display:grid; gap:5px }
.terminal-corpo .voce{ color:var(--papel) }
.terminal-corpo .voce::before{ content:'> '; color:var(--acento) }
.terminal-corpo .ele{ color:var(--papel-58); padding-left:16px }
.terminal-corpo .ele::before{ content:'· '; color:var(--acento-2) }

/* A resposta curta é o argumento inteiro da dobra 2: precisa de peso. */
.terminal-corpo .feito{
  margin-top:12px; padding-top:13px;
  border-top:1px solid var(--papel-11);
  font-size:clamp(20px,2.4vw,30px); font-weight:500; line-height:1.1;
  color:var(--acento-2); letter-spacing:-.01em;
}
.terminal-corpo .feito::before{ content:'· '; color:var(--acento) }

/* ============================================================ nova era */
.bloco-era{ background:linear-gradient(180deg, rgba(217,119,87,.06), transparent 60%) }
.demo{ max-width:660px }
.demo-nota{
  margin-top:13px; font-size:14px; color:var(--papel-58);
  display:flex; align-items:flex-start; gap:9px;
}
.demo-nota::before{
  content:''; width:16px; height:1px; flex:none; margin-top:11px;
  background:var(--acento);
}
.era-fecho{ margin-top:clamp(30px,3.6vw,46px); max-width:640px }
.era-frase{
  margin-top:20px; padding-left:20px;
  border-left:2px solid var(--acento);
  font-size:clamp(17px,1.6vw,21px); line-height:1.4; font-weight:500;
  color:var(--papel); text-wrap:pretty;
}

.passos{ display:grid; gap:2px; margin-top:30px; counter-reset:p }
.passos li{
  display:flex; gap:16px; align-items:flex-start;
  padding:17px 0; border-top:1px solid var(--papel-06);
}
.passos li::before{
  counter-increment:p; content:counter(p,decimal-leading-zero);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--acento);
  padding-top:3px; flex:none;
}
.passos b{ display:block; font-weight:600; margin-bottom:3px }
.passos p{ color:var(--papel-78); font-size:15px }

/* ================================================================ wagner */
.wagner{ display:grid; gap:clamp(28px,4vw,52px); align-items:start }
@media (min-width:860px){ .wagner{ grid-template-columns:minmax(0,300px) 1fr } }
.retrato{
  border-radius:var(--raio); overflow:hidden; position:relative;
  border:1px solid var(--papel-11); max-width:300px;
}
.retrato img{ width:100%; height:auto; filter:grayscale(.25) contrast(1.04) }
.retrato::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 52%, rgba(6,6,10,.62) 100%);
}
/* O número é a única prova dura da página. Ganha peso de manchete, mas em
   dourado, para não competir com o coral dos títulos. */
.numerao{
  margin-top:26px; padding:20px 24px; border-radius:var(--raio);
  border:1px solid rgba(232,192,106,.3); background:rgba(232,192,106,.07);
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
}
.numerao b{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(38px,4.6vw,56px); line-height:.9; letter-spacing:-.02em;
  color:var(--acento-2);
}
.numerao span{ font-size:15.5px; color:var(--papel-78) }

.credenciais{ display:grid; gap:10px; margin-top:26px }
.credenciais li{ display:flex; align-items:flex-start; gap:12px; color:var(--papel-90); font-size:15.5px }
.credenciais svg{ width:18px; height:18px; flex:none; margin-top:3px; fill:none; stroke:var(--acento); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }
.assinatura{
  margin-top:26px; padding-left:20px; border-left:2px solid var(--acento);
  font-family:var(--serif); font-style:italic;
  font-size:clamp(19px,1.9vw,25px); line-height:1.3; color:var(--papel);
  text-wrap:pretty;
}

/* ============================================================= para quem */
.duas-colunas{ display:grid; gap:16px }
@media (min-width:760px){ .duas-colunas{ grid-template-columns:1fr 1fr; gap:20px } }
.coluna{
  border:1px solid var(--papel-11); border-radius:var(--raio);
  padding:clamp(24px,2.8vw,30px);
  background:linear-gradient(180deg, var(--papel-06), transparent 72%);
}
.coluna h3{
  font-size:16px; font-weight:600; margin-bottom:18px;
  font-family:var(--mono); font-size:11px; letter-spacing:.17em; text-transform:uppercase;
}
.coluna-sim h3{ color:var(--acento) }
.coluna-nao h3{ color:var(--papel-58) }
.coluna ul{ display:grid; gap:12px }
.coluna li{ display:flex; align-items:flex-start; gap:12px; font-size:15.5px }
.coluna li svg{ width:17px; height:17px; flex:none; margin-top:3px; fill:none; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round }
.coluna-sim li{ color:var(--papel-90) } .coluna-sim li svg{ stroke:var(--acento) }
.coluna-nao li{ color:var(--papel-58) } .coluna-nao li svg{ stroke:var(--papel-18) }

/* ================================================================ oferta */
.bloco-oferta{ background:linear-gradient(180deg, rgba(217,119,87,.07), transparent 58%) }
.cartao-oferta{
  border:1px solid rgba(217,119,87,.3); border-radius:18px;
  background:linear-gradient(180deg, rgba(217,119,87,.09), var(--tinta-2) 62%);
  padding:clamp(26px,3.4vw,44px);
  max-width:620px; margin-inline:auto; text-align:center;
  position:relative; overflow:hidden;
}
.cartao-oferta::before{
  content:''; position:absolute; inset:-40% -20% 60% -20%; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(232,192,106,.14), transparent 70%);
}
.cartao-oferta > *{ position:relative }
.cartao-oferta .kicker{ justify-content:center }

.checklist{ display:grid; gap:11px; text-align:left; margin:26px 0 }
.checklist li{ display:flex; align-items:flex-start; gap:12px; font-size:15.5px; color:var(--papel-90) }
.checklist svg{ width:18px; height:18px; flex:none; margin-top:3px; fill:none; stroke:var(--acento); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }

.fatos{ display:grid; gap:0; text-align:left; margin:26px 0 }
.fatos .linha{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:12px 0; border-top:1px solid var(--papel-11);
}
.fatos dt{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--papel-58) }
.fatos dd{ margin:0; font-size:15.5px; font-weight:500; text-align:right }
.fatos .linha:last-child dd{ color:var(--acento-2); font-size:17px; font-weight:600 }

.preco-grande{
  display:flex; align-items:baseline; justify-content:center; gap:10px; flex-wrap:wrap;
  margin-bottom:8px;
}
.preco-grande b{
  font-size:clamp(38px,5.2vw,58px); font-weight:600; letter-spacing:-.03em;
  color:var(--acento-2); line-height:1;
}
.preco-grande span{ font-size:14px; color:var(--papel-58) }

/* ================================================================== faq */
.faq{ max-width:var(--leitura); display:grid; gap:0 }
.faq details{ border-top:1px solid var(--papel-11) }
.faq details:last-of-type{ border-bottom:1px solid var(--papel-11) }
.faq summary{
  cursor:pointer; list-style:none; padding:21px 40px 21px 0; position:relative;
  font-size:clamp(16px,1.35vw,18px); font-weight:500; letter-spacing:-.012em;
  text-wrap:pretty;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:''; position:absolute; right:6px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--acento); border-bottom:2px solid var(--acento);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .25s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg) }
.faq summary:hover{ color:var(--acento-cl) }
.faq .resposta{ padding:0 0 23px; color:var(--papel-78); max-width:60ch; text-wrap:pretty }
.faq .resposta p + p{ margin-top:.8em }

/* ================================================================ final */
.bloco-final{ text-align:center }
.bloco-final .titulo{ margin-inline:auto; max-width:16ch }
.bloco-final .lede{ margin:20px auto 0; max-width:46ch }

.rodape{
  border-top:1px solid var(--papel-06);
  padding-block:34px calc(96px + env(safe-area-inset-bottom));
  display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--papel-58); text-align:center;
}
.rodape-sep{ color:var(--papel-18) }

/* =========================================================== impressão */
@media print{
  #gl,.barra,.skip{ display:none }
  body{ background:#fff; color:#000 }
}