/* ============================================================================
   IMERSÃO CRÉDITO EM ESCALA · Crédito360
   Estrutura e linguagem visual copiadas de g4business.com/g4-valley.
   Marca, cores e copy são nossas.

   As medidas abaixo não são chute: foram lidas da página do G4 com
   getComputedStyle. Ficam anotadas ao lado de cada token para quem
   for mexer depois saber de onde veio o número.
   ========================================================================== */

@font-face{font-family:'Manrope';font-weight:400 800;font-display:swap;
  src:url('../fonts/manrope.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-weight:400 800;font-display:swap;
  src:url('../fonts/manrope-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}

/* A Kurdis do G4 é licenciada e não pode ser redistribuída. A Archivo é a
   substituta certa e não por parecer: ela tem os MESMOS dois eixos que a
   Kurdis usa na página — peso (100-900) e LARGURA (62-125). É o eixo de
   largura que faz a "Kurdis Wide" dos números, e quase nenhuma fonte livre
   tem isso.
   Medido no G4: a Kurdis aparece em 3 lugares só — o H1, a assinatura do
   topo e os números grandes. Todo o resto é Manrope. */
@font-face{font-family:'Archivo';font-weight:100 900;font-stretch:62% 125%;
  font-display:swap;src:url('../fonts/archivo.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-weight:100 900;font-stretch:62% 125%;
  font-display:swap;src:url('../fonts/archivo-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}

/* ESCALA DO TEXTO — POR QUE OS vw SÃO O QUE SÃO
   Num clamp(min, N vw, max) o termo do meio decide em QUE LARGURA o máximo é
   alcançado: ele satura em (max / N) * 100 px. Estes N foram recalculados
   para saturar em 1280px, a largura de laptop mais comum.
   O erro anterior: os N tinham sido escolhidos olhando só o celular e
   saturavam por volta de 1700-2000px. Resultado medido em 1440px: corpo a
   13,7px onde deveria ter 16px, chip a 11,5px onde deveria ter 13,5px. A
   página não quebrava no desktop — ela simplesmente não crescia, e parecia
   um layout de celular esticado. Ao criar um clamp novo, use max/12.8. */

/* ---------------------------------------------------------------- tokens -- */
:root{
  /* fundo azul-preto do G4 (medido: body rgb(1,12,20), hero rgb(3,21,34)).
     Combina com a arte nova dos ingressos, que tem azul, e com a foto do topo. */
  --fundo:#010C14;
  --fundo-alto:#031522;
  --superficie:#08141F;
  --superficie-2:#0C1B28;

  /* o bronze é o NOSSO (#C69C6D), não o do G4 (#B9915B).
     Diferença imperceptível na tela e mantém a marca igual ao ingresso,
     ao e-mail e à portaria. */
  --ouro:#C69C6D;
  --ouro-luz:#E4C79B;
  --ouro-fraco:rgba(198,156,109,.49);
  --ouro-linha:rgba(198,156,109,.22);

  --osso:#F5F4F3;          /* medido: rgb(245,244,243) nos títulos */
  --branco:#FFFFFF;
  --cinza:#B1B1B1;         /* medido: rgb(177,177,177) nos textos de apoio */
  --cinza-fraco:rgba(255,255,255,.56);
  --linha:rgba(255,255,255,.10);

  --fonte:'Manrope','Avenir Next','Helvetica Neue',Arial,sans-serif;
  --display:'Archivo','Manrope','Helvetica Neue',Arial,sans-serif;

  --pill:100px;            /* medido: border-radius 100px nos botões */
  --r:15px;                /* medido: 15px aparece 20x no G4; 20px só 4x */
  --r-mini:12px;

  --gutter:clamp(18px,4.6vw,48px);
  --largura:1200px;
  --estreita:820px;

  --expo:cubic-bezier(.16,1,.3,1);
  --quart:cubic-bezier(.25,1,.5,1);

  --secao:clamp(56px,7vw,120px);
  --barra-h:78px;          /* altura da barra fixa, para reservar espaço no pé */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--fundo);color:var(--branco);
  font-family:var(--fonte);font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  /* A barra fixa cobre o pé da página: sem isso o rodapé fica embaixo dela.
     Os 14px de folga não são enfeite — a altura da barra muda quando a fonte
     termina de carregar e quando o texto quebra em duas linhas, e medi de 3 a
     8px de sobreposição sem eles. */
  padding-bottom:calc(var(--barra-h) + 14px + env(safe-area-inset-bottom,0px));
}
/* height:auto é obrigatório aqui. Sem ele, o atributo height="" do HTML conta
   como altura declarada e ANULA todo aspect-ratio do CSS — foi exatamente o
   que deixou a foto do topo com 1029px em vez de 666px. */
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ouro);color:var(--fundo)}

.pular{position:absolute;left:-9999px}
.pular:focus{left:16px;top:16px;z-index:200;background:var(--ouro);color:var(--fundo);
  padding:10px 18px;border-radius:var(--pill)}

:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ouro-luz);outline-offset:3px;border-radius:6px}

/* ------------------------------------------------------------ estrutura -- */
.caixa{width:min(100% - var(--gutter)*2,var(--largura));margin-inline:auto}
.caixa--estreita{max-width:var(--estreita)}
.centro{text-align:center}
.secao{padding-block:var(--secao)}
.ouro{color:var(--ouro)}

/* Título de seção. Medido no G4: 32px / line-height 42px / peso 400,
   e a palavra destacada em bronze com peso 600. */
.titulo{
  margin:0;font-size:clamp(25px,2.3vw,34px);line-height:1.3;font-weight:400;
  color:var(--branco);letter-spacing:-.01em;text-wrap:balance}
.titulo .ouro{font-weight:600}
/* mesma cor, mais peso: usado quando a frase inteira em bronze
   precisa carregar a ideia, e nao so uma palavra */
.ouro-forte{color:var(--ouro);font-weight:700}
.titulo--m{font-size:clamp(21px,2.031vw,26px)}
.titulo--g{font-size:clamp(28px,3.125vw,40px);font-weight:500;text-transform:uppercase;letter-spacing:.01em}
.titulo--g .ouro{font-weight:800}

.sub{
  margin:16px auto 0;max-width:64ch;color:var(--cinza);
  font-size:clamp(14px,1.25vw,16px);line-height:1.65;text-wrap:pretty}
.sub--menor{font-size:14px;margin-top:var(--secao);margin-bottom:-10px}
.sub i{font-style:italic;color:var(--cinza-fraco)}
.sub b{color:var(--branco);font-weight:600}

/* trio de símbolos que o G4 usa como respiro antes do título */
.marcas{display:flex;justify-content:center;gap:16px;margin:0 0 22px}
.marcas svg{width:19px;height:19px;color:var(--ouro);opacity:.85}

/* ================================================================= HERO == */
.hero{position:relative;background:var(--fundo-alto);isolation:isolate}

.hero__foto{margin:0;position:relative}
.hero__foto img{
  width:100%;height:auto;
  /* A caixa quase quadrada mostra ~71% da largura da arte (janela de 14,6%
     a 85,4%). MEDIDO na foto: os três ocupam de 27,2% a 69,7%, centrados em
     48,5% — cabem com folga dos dois lados, então `center` serve.
     (A arte anterior era deslocada para a direita e exigia 72% aqui.) */
  aspect-ratio:1/.95;object-fit:cover;object-position:center 14%}
/* véu: a arte já escurece no pé, mas o degradê garante o contraste do texto
   em qualquer recorte. Termina na cor exata do fundo, sem emenda. */
.hero__foto::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(3,21,34,0) 30%,
    rgba(3,21,34,.30) 48%,
    rgba(3,21,34,.66) 64%,
    rgba(3,21,34,.90) 80%,
    var(--fundo-alto) 94%)}

/* Medido na arte: os três ocupam de 12,1% a 60,7% da altura e o resto é
   degradê vazio. O texto sobe e ocupa esse vazio — igual ao G4 — senão sobra
   um vão morto entre a foto e o título.
   A CONTA: a caixa tem 95vw de altura, e o pé deles está a 48,8% da altura
   da arte, ou seja a 0,488 × 95 = 46,4vw do topo. Sobram 48,6vw de vazio.
   -36vw come esse vazio e deixa 12,6vw de respiro.
   ESTE NÚMERO É REFÉM DA FOTO: a arte anterior terminava em 60,7% e pedia
   -24vw. Trocar a imagem sem refazer a conta joga o título nos rostos. */
.hero__int{
  position:relative;z-index:2;
  width:min(100% - var(--gutter)*2,880px);margin-inline:auto;
  margin-top:-36vw;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:16px}

.hero__logo{width:clamp(150px,15vw,220px);height:auto}

.hero__data{
  margin:0;display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:6px;
  font-size:clamp(12px,1.094vw,14px);color:var(--osso);font-weight:500}
.hero__cal{width:15px;height:15px;color:var(--ouro);flex:none}
.hero__data .ouro{font-weight:700}
.hero__sep,.hero__ponto{color:var(--cinza-fraco)}

/* Quebra de linha só a partir do tablet. No celular o texto flui sozinho. */
.quebra{display:none}
@media (min-width:721px){.quebra{display:inline}}

/* Medido no G4: 42px/52px, peso 700, caixa alta. Aqui vira fluido.
   O mínimo é 22px, não 27px: em 320px de largura "QUEM OPERA," já é a
   palavra mais longa e precisa caber inteira. */
.hero__titulo{
  margin:2px 0 0;font-family:var(--display);
  /* 42px/52px é o valor MEDIDO no G4 em desktop (line-height 1.238).
     Em 48px o título quebrava em 3 linhas mesmo numa coluna de 1100px e
     empurrava o topo para 1021px de altura. */
  font-size:clamp(22px,6.2vw,42px);line-height:1.238;
  font-weight:700;font-stretch:105%;
  text-transform:uppercase;letter-spacing:-.015em;
  color:var(--osso);text-wrap:balance}

.hero__sub{
  margin:2px 0 0;max-width:58ch;color:var(--cinza);
  font-size:clamp(13px,1.25vw,16px);line-height:1.6}
.hero__sub b{color:var(--branco);font-weight:600}

.hero__selo{
  margin:clamp(30px,2.6vw,38px) 0 0;padding-bottom:clamp(16px,1.5vw,20px);
  padding-inline:var(--gutter);
  text-align:center;font-family:var(--display);
  font-size:clamp(10.5px,0.938vw,12px);font-weight:500;font-stretch:112%;
  letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.42)}

/* ============================================================== ESTEIRA == */
.esteira{
  overflow:hidden;border-block:1px solid var(--ouro-linha);
  background:linear-gradient(90deg,#0A1420,#0E1D2B,#0A1420);
  padding-block:11px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.esteira__trilho{display:flex;width:max-content;animation:correr 34s linear infinite}
.esteira__trilho span{
  flex:none;padding-inline:20px;white-space:nowrap;
  font-size:clamp(9.5px,0.938vw,12px);font-weight:500;letter-spacing:.25em;
  text-transform:uppercase;color:var(--ouro)}
.esteira__trilho i{font-style:normal;opacity:.5;margin-inline:8px}
@keyframes correr{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.esteira__trilho{animation:none}}

/* ============================================================== NÚMEROS == */
.numeros{padding-block:clamp(34px,4vw,58px)}
.numeros__grade{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,34px)}
.numeros__grade li{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;
  position:relative}
.numeros__grade li+li::before{
  content:'';position:absolute;left:calc(-1 * clamp(7px,1.2vw,17px));top:16%;bottom:16%;
  width:1px;background:var(--linha)}
.numeros__ico{width:22px;height:22px;color:var(--ouro);opacity:.9}
/* medido no G4: 40px, peso 400, fonte larga. Manrope 700 apertado dá o mesmo peso ótico. */
/* Medido: "+15K" no G4 é Kurdis WIDE peso 400 — largo e leve, não bold
   apertado. Peso 700 aqui dava um bloco pesado que não é o gesto original. */
.numeros__n{
  margin:0;font-family:var(--display);
  font-size:clamp(24px,3vw,44px);font-weight:500;font-stretch:125%;
  line-height:1;letter-spacing:-.01em;color:var(--osso);white-space:nowrap}
.numeros__r{margin:0;font-size:clamp(10px,1.016vw,13px);line-height:1.4;color:var(--cinza)}

/* =========================================== NÃO É / É · dois quadros ==== */
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,26px)}
.quadro{
  position:relative;padding:clamp(24px,2.8vw,40px);
  border-radius:var(--r);border:1px solid var(--linha);background:var(--superficie)}
.quadro--sim{border-color:var(--ouro-linha);background:linear-gradient(180deg,#0C1B28,#08141F)}
.quadro__ico{
  display:grid;place-items:center;width:38px;height:38px;margin-bottom:16px;
  border-radius:var(--r-mini);border:1px solid var(--linha);background:rgba(255,255,255,.04)}
.quadro__ico svg{width:16px;height:16px;color:var(--cinza)}
.quadro--sim .quadro__ico{border-color:var(--ouro-fraco);background:rgba(198,156,109,.12)}
.quadro--sim .quadro__ico svg{color:var(--ouro)}
.quadro__lista{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.quadro__lista li{
  display:grid;grid-template-columns:16px 1fr;gap:11px;align-items:start;
  font-size:clamp(13px,1.172vw,15px);line-height:1.55;color:var(--cinza)}
.quadro__lista svg{width:13px;height:13px;margin-top:5px;color:var(--cinza-fraco)}
.quadro--sim .quadro__lista svg{color:var(--ouro)}
.quadro--sim .quadro__lista li{color:rgba(255,255,255,.82)}

/* ========================================================= PILARES · 6 ==== */
.pilares{
  list-style:none;margin:clamp(28px,3.4vw,46px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.5vw,22px)}
.pilar{
  padding:clamp(20px,2.2vw,30px);text-align:center;
  border-radius:var(--r-mini);border:1px solid var(--linha);background:var(--superficie);
  transition:border-color .35s var(--quart),transform .35s var(--quart)}
.pilar:hover{border-color:var(--ouro-linha);transform:translateY(-3px)}
.pilar__ico{width:24px;height:24px;margin:0 auto 13px;color:var(--ouro)}
.pilar h3{margin:0 0 7px;font-size:clamp(14px,1.328vw,17px);font-weight:700;color:var(--osso)}
.pilar p{margin:0;font-size:clamp(12px,1.094vw,14px);line-height:1.55;color:var(--cinza)}

/* ======================================================== INGRESSOS ==== */
.oferta{
  background:
    radial-gradient(70% 44% at 50% 0%,rgba(198,156,109,.10),transparent 70%),
    var(--fundo)}
.oferta__logo{width:clamp(140px,13vw,190px);height:auto;margin:0 auto 22px;opacity:.9}
.oferta__nota{
  margin:clamp(24px,3vw,38px) auto 0;max-width:64ch;text-align:center;
  font-size:clamp(11px,1.016vw,13px);line-height:1.6;color:var(--cinza-fraco)}

.bilhetes{
  margin-top:clamp(32px,4vw,58px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px);
  align-items:start}

.bilhete{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r);border:1px solid var(--linha);background:var(--superficie);
  transition:border-color .4s var(--quart)}
.bilhete:hover{border-color:rgba(255,255,255,.20)}

/* o do meio é o alvo: borda de ouro, brilho e um degrau para cima no desktop */
.bilhete--alvo{
  border-color:var(--ouro-fraco);
  background:linear-gradient(180deg,#0E1E2C,#08141F);
  box-shadow:0 44px 96px -46px rgba(198,156,109,.5)}
.bilhete--alvo:hover{border-color:var(--ouro)}

.bilhete__flag{
  position:absolute;z-index:3;top:14px;right:14px;margin:0;
  padding:6px 13px;border-radius:var(--pill);
  background:var(--ouro);color:#17120B;
  font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}

.bilhete__tag{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover}

.bilhete__int{
  display:flex;flex-direction:column;flex:1;
  padding:clamp(20px,2.1vw,28px);gap:16px}

.bilhete__texto{margin:0;font-size:clamp(12px,1.094vw,14px);line-height:1.6;color:var(--cinza)}
.bilhete__texto b{color:var(--branco);font-weight:600}

.bilhete__lista{
  list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--linha);
  display:flex;flex-direction:column;gap:11px}
.bilhete__lista li{
  display:grid;grid-template-columns:15px 1fr;gap:10px;align-items:start;
  font-size:clamp(12px,1.094vw,14px);line-height:1.5;color:rgba(255,255,255,.80)}
.bilhete__lista svg{width:12px;height:12px;margin-top:5px;color:var(--ouro);flex:none}

/* o pé encosta no fundo do card para os três alinharem, mesmo com listas
   de tamanhos diferentes */
.bilhete__pe{margin-top:auto;padding-top:14px}

/* preço no formato do G4: "12x / R$" empilhado, número gigante, centavos altos.
   Medido: número 110px peso 700 com letter-spacing -5px; laterais 40px peso 500. */
.preco{
  margin:0;display:flex;align-items:flex-start;justify-content:center;gap:6px;
  color:var(--branco);line-height:1}
.preco__vezes{
  font-size:clamp(15px,1.484vw,19px);font-weight:500;line-height:1.15;
  text-align:right;padding-top:5px;color:var(--cinza)}
.preco__vezes i{font-style:normal;color:var(--branco);font-weight:600}
/* Medido no G4: 100px, peso 700, letter-spacing -5px, line-height 100px. */
.preco__n{
  font-size:clamp(52px,6.9vw,100px);font-weight:700;letter-spacing:-.05em;line-height:1}
.preco__c{
  font-size:clamp(16px,1.719vw,22px);font-weight:500;padding-top:5px}
.preco__vista{
  margin:9px 0 0;text-align:center;font-size:clamp(11px,1.016vw,13px);color:var(--cinza)}
.preco__vista b{color:var(--osso);font-weight:700}

.bilhete__nota{
  margin:9px 0 0;text-align:center;font-size:11px;color:var(--cinza-fraco)}

/* ---------------------------------------------------------------- pílula -- */
/* medido no G4: raio 100px, borda 0.5px rgba(bronze,.49), fundo transparente,
   texto bronze. A variante cheia é o botão do card em destaque. */
.pilula{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 24px;border-radius:var(--pill);
  border:1px solid var(--ouro-fraco);background:transparent;color:var(--ouro);
  font-size:clamp(11.5px,1.094vw,14px);font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;text-align:center;line-height:1.25;
  transition:background .3s var(--quart),color .3s var(--quart),border-color .3s var(--quart)}
.pilula:hover{background:rgba(198,156,109,.12);border-color:var(--ouro)}

.pilula--cheia{background:var(--ouro);border-color:var(--ouro);color:#17120B}
.pilula--cheia:hover{background:var(--ouro-luz);border-color:var(--ouro-luz);color:#17120B}

/* Botão ainda sem destino (o WhatsApp do Black Assessor).
   Lavar um botão cheio até virar cinza faz parecer defeito. Vira contorno
   tracejado: lê como "ainda não abriu", não como "quebrado". */
.pilula[disabled]{
  background:transparent;color:var(--ouro);
  border:1px dashed var(--ouro-fraco);
  cursor:not-allowed;opacity:.72}
.pilula[disabled]:hover{background:transparent;border-color:var(--ouro-fraco)}
.pilula[disabled] .pilula__ico{display:none}

.pilula__ico{display:grid;place-items:center;width:15px;height:15px;flex:none}
.pilula__ico svg{width:100%;height:100%;transition:transform .3s var(--quart)}
.pilula:not([disabled]):hover .pilula__ico svg{transform:translate(2px,-2px)}

/* dentro do card o botão ocupa a largura toda */
.bilhete__pe .pilula{display:flex;width:100%;margin-top:14px}

/* ============================================================== LOCAL ==== */
.ficha{
  margin:clamp(28px,3.4vw,46px) 0 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--linha);border:1px solid var(--linha);border-radius:var(--r);overflow:hidden}
.ficha>div{background:var(--superficie);padding:clamp(18px,2vw,28px)}
.ficha dt{
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ouro)}
.ficha dd{
  margin:9px 0 0;font-size:clamp(13px,1.25vw,16px);font-weight:600;color:var(--osso);line-height:1.35}
.ficha dd span{
  display:block;margin-top:5px;font-size:clamp(11px,0.977vw,12.5px);font-weight:400;
  color:var(--cinza);line-height:1.5}

/* ================================================================ FAQ ==== */
.faq{margin-top:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:10px}
.qa{
  border-radius:var(--r-mini);border:1px solid var(--linha);background:var(--superficie);
  overflow:hidden;transition:border-color .3s var(--quart)}
.qa[open]{border-color:var(--ouro-linha)}
.qa summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:clamp(15px,1.5vw,20px) clamp(16px,1.7vw,24px);
  font-size:clamp(13px,1.25vw,16px);font-weight:600;color:var(--osso)}
.qa summary::-webkit-details-marker{display:none}
.qa__mais{
  position:relative;flex:none;width:17px;height:17px;
  border-radius:50%;border:1px solid var(--ouro-fraco)}
.qa__mais::before,.qa__mais::after{
  content:'';position:absolute;inset:50% 4px auto;height:1.4px;margin-top:-.7px;
  background:var(--ouro);transition:transform .34s var(--expo)}
.qa__mais::after{transform:rotate(90deg)}
.qa[open] .qa__mais::after{transform:rotate(0)}
/* a grade 0fr→1fr anima altura sem saber a altura de antemão */
.qa__corpo{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--expo)}
.qa[open] .qa__corpo{grid-template-rows:1fr}
.qa__corpo>div{overflow:hidden}
.qa__corpo p{
  margin:0 0 12px;padding-inline:clamp(16px,1.7vw,24px);
  font-size:clamp(12.5px,1.172vw,15px);line-height:1.65;color:var(--cinza)}
.qa__corpo p:first-child{padding-top:2px}
.qa__corpo p:last-child{margin-bottom:clamp(16px,1.7vw,22px)}
.qa__corpo b{color:var(--osso);font-weight:600}

/* ============================================================= RODAPÉ ==== */
.rodape{border-top:1px solid var(--linha);padding-block:clamp(26px,3vw,40px)}
.rodape__int{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.rodape img{width:clamp(112px,10vw,140px);height:auto;opacity:.75}
.rodape p{margin:0;font-size:11.5px;color:var(--cinza-fraco)}

/* ========================================================= BARRA FIXA ==== */
/* medida no G4: fundo rgba(1,12,22,.77), borda de topo 1px bronze, padding 18px 0 */
.barra{
  position:fixed;z-index:100;inset:auto 0 0 0;
  background:rgba(1,12,22,.82);border-top:1px solid var(--ouro);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding-block:13px;padding-bottom:calc(13px + env(safe-area-inset-bottom,0px))}
.barra__int{display:flex;align-items:center;justify-content:space-between;gap:16px}
.barra__aviso{
  margin:0;font-size:clamp(11px,1.094vw,14px);line-height:1.35;color:var(--branco)}
.barra__aviso .ouro{font-weight:700}
/* 44px é o alvo de toque mínimo confortável no celular. Sem o min-height
   o botão da barra fechava em 39px. */
.pilula--barra{padding:12px 20px;flex:none;min-height:44px}

.conta{display:flex;align-items:flex-start;gap:5px}
.conta__bloco{display:flex;flex-direction:column;align-items:center;min-width:34px}
.conta__bloco span{
  font-size:clamp(15px,1.562vw,20px);font-weight:700;line-height:1;color:var(--osso);
  font-variant-numeric:tabular-nums}
.conta__bloco i{
  font-style:normal;margin-top:3px;font-size:7.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cinza-fraco)}
.conta__dp{font-size:clamp(13px,1.328vw,17px);font-weight:700;color:var(--ouro);line-height:1;opacity:.6}


/* ═══════════════════════════════════════════════ BLOCOS DA IMERSÃO ════ */

/* rótulo pequeno acima do título, no lugar onde o G4 usa o "kicker" */
.kicker{
  margin:0 0 14px;font-size:clamp(10.5px,0.898vw,11.5px);font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:var(--ouro)}

/* ---------------------------------------------- MURAL · quem abre ------ */
/* Mesma anatomia do G4: um card grande em cima, quatro menores embaixo. */
.destaque{
  margin:clamp(28px,3.4vw,46px) 0 clamp(14px,1.6vw,24px);
  overflow:hidden;border-radius:var(--r);
  border:1px solid var(--ouro-linha);background:var(--superficie)}
.destaque img{width:100%;height:auto}

.mural{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.5vw,22px)}
.mural__card{
  position:relative;overflow:hidden;border-radius:var(--r-mini);
  border:1px solid var(--linha);background:var(--superficie);
  aspect-ratio:760/1054;
  transition:border-color .35s var(--quart),transform .35s var(--quart)}
.mural__card:hover{border-color:var(--ouro-linha);transform:translateY(-3px)}
.mural__card img{width:100%;height:100%;object-fit:cover;object-position:center top}

/* --------------------------------------- lista "o que combinar" -------- */
.combina{
  list-style:none;margin:clamp(22px,2.6vw,34px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,16px)}
.combina li{
  display:grid;grid-template-columns:15px 1fr;gap:10px;align-items:center;
  padding:14px 16px;border-radius:var(--r-mini);
  border:1px solid var(--linha);background:var(--superficie);
  font-size:clamp(11.5px,1.055vw,13.5px);line-height:1.4;color:rgba(255,255,255,.82)}
.combina svg{width:12px;height:12px;color:var(--ouro);flex:none}

/* ------------------------------------------- MÉTODO · as 4 letras ------ */
.pilares--num{grid-template-columns:repeat(4,1fr);counter-reset:nenhum}
.pilar{position:relative}
/* A letra é o mecanismo (M-A-P-A). Fica atrás do conteúdo, grande e fraca:
   marca a frente sem competir com o título. */
.pilar__letra{
  position:absolute;top:10px;right:16px;
  font-size:clamp(46px,5.312vw,68px);font-weight:800;line-height:1;
  color:rgba(198,156,109,.16);pointer-events:none;user-select:none}

.plano{
  position:relative;margin-top:clamp(14px,1.6vw,24px);
  padding:clamp(24px,2.8vw,38px);border-radius:var(--r);
  border:1px solid var(--ouro-fraco);
  background:linear-gradient(180deg,#0E1E2C,#08141F);
  box-shadow:0 40px 90px -46px rgba(198,156,109,.4)}
.plano__flag{
  position:absolute;top:-13px;left:clamp(20px,2.4vw,34px);
  padding:6px 14px;border-radius:var(--pill);background:var(--ouro);color:#17120B;
  font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.plano h3{
  margin:8px 0 10px;font-size:clamp(19px,1.9vw,26px);font-weight:800;color:var(--osso);
  letter-spacing:-.015em}
.plano p{margin:0;font-size:clamp(12.5px,1.172vw,15px);line-height:1.65;color:var(--cinza);max-width:78ch}

/* ------------------------------------------------ ENTREGA · o mapa ----- */
.entrega{background:radial-gradient(66% 42% at 50% 0%,rgba(198,156,109,.09),transparent 70%),var(--fundo)}
.quadro__t{margin:0;font-size:clamp(16px,1.562vw,20px);font-weight:800;color:var(--osso);letter-spacing:-.01em}
.quadro__p{margin:12px 0 0;font-size:clamp(12.5px,1.133vw,14.5px);line-height:1.6;color:var(--cinza)}
.quadro__p b{color:var(--ouro-luz);font-weight:700}
.quadro--sim .quadro__t{color:var(--ouro-luz)}

/* ---------------------------------------------- INGRESSO único -------- */
/* Um ingresso só: a grade de três vira uma coluna centrada, senão o card
   fica esticado na largura toda e o preço perde o peso. */
.bilhetes--um{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
.bilhetes--um .bilhete--alvo{transform:none}

/* A "tag" do ingresso é desenhada. O ingresso é novo e ainda não tem arte,
   e um banner emprestado de outro lote diria o nome errado. */
.tag{
  position:relative;aspect-ratio:2/1;display:flex;flex-direction:column;
  justify-content:center;gap:2px;padding:clamp(20px,2.4vw,30px);
  background:
    radial-gradient(120% 90% at 82% 30%,rgba(198,156,109,.22),transparent 60%),
    linear-gradient(140deg,#132434,#0A1420 60%,#060E17);
  border-bottom:1px solid var(--ouro-linha);overflow:hidden}
.tag::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(115deg,transparent 0 12px,rgba(255,255,255,.022) 12px 13px)}
.tag__rot{
  position:relative;z-index:1;font-size:clamp(10px,.8vw,12px);font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--cinza)}
.tag__nome{
  position:relative;z-index:1;font-size:clamp(30px,3.4vw,46px);font-weight:800;
  letter-spacing:-.03em;line-height:1.02;color:var(--osso);text-transform:uppercase}
.tag__marca{
  position:absolute;z-index:1;right:clamp(18px,2.4vw,30px);top:50%;translate:0 -50%;
  display:grid;place-items:center;
  width:clamp(52px,5.6vw,78px);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--ouro-fraco);background:rgba(198,156,109,.10)}
.tag__marca svg{width:46%;height:46%;color:var(--ouro)}

/* ------------------------------------------------ escada de lotes ----- */
.lotes{
  list-style:none;margin:clamp(24px,3vw,38px) auto 0;padding:0;max-width:760px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,16px)}
.lote{
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  padding:16px 12px;border-radius:var(--r-mini);
  border:1px solid var(--linha);background:var(--superficie)}
.lote--agora{border-color:var(--ouro);background:var(--superficie-2)}
.lote__n{
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cinza-fraco)}
.lote--agora .lote__n{color:var(--ouro)}
.lote__v{font-size:clamp(19px,1.7vw,24px);font-weight:800;color:var(--osso);letter-spacing:-.02em}
.lote__d{font-size:clamp(11.5px,0.977vw,12.5px);line-height:1.45;color:var(--cinza)}
/* riscado nos lotes que ainda não valem: mostra a escada sem prometer nada */
.lote:not(.lote--agora) .lote__v{color:var(--cinza-fraco)}

/* Lote esgotado. Mostrar o preço riscado, em vez de apagar a linha, é o que
   faz a escada funcionar como argumento: quem chega agora VÊ que perdeu os
   R$ 497. Uma escada onde o degrau vendido some vira só uma tabela de preço. */
.lote--fim{opacity:.55}
.lote--fim .lote__v s{text-decoration-thickness:2px;text-decoration-color:var(--ouro-fraco)}
.lote--fim .lote__n{color:var(--cinza)}

/* --------------------------------------------------- PARA QUEM É ------ */
.publico{
  list-style:none;margin:clamp(26px,3vw,40px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,16px)}
.publico li{
  display:grid;grid-template-columns:17px 1fr;gap:11px;align-items:center;
  padding:16px 18px;border-radius:var(--r-mini);
  border:1px solid var(--linha);background:var(--superficie);
  font-size:clamp(11.5px,1.055vw,13.5px);line-height:1.45;color:rgba(255,255,255,.82)}
.publico svg{width:15px;height:15px;color:var(--ouro);flex:none}

/* ═══════════════════════════════════ RESPONSIVO DOS BLOCOS NOVOS ════ */
@media (max-width:1024px){
  .combina{grid-template-columns:repeat(2,1fr)}
  .publico{grid-template-columns:repeat(2,1fr)}
  .pilares--num{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  /* No celular o mural desliza na horizontal. Três retratos empilhados
     dariam ~1600px de rolagem só de foto; três em coluna de 118px não
     mostram rosto nenhum. O card ocupa 72% da tela: sobra uma fresta do
     próximo, e é essa fresta que avisa que dá para arrastar. */
  .mural{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:6px;
    scrollbar-width:none;-ms-overflow-style:none;
    /* sangra até a borda da tela para a fresta não morrer no gutter */
    margin-inline:calc(-1 * var(--gutter));
    padding-inline:var(--gutter)}
  .mural::-webkit-scrollbar{display:none}
  .mural__card{flex:0 0 72%;scroll-snap-align:center}
}
@media (max-width:620px){
  .combina{grid-template-columns:1fr}
  .publico{grid-template-columns:1fr}
  .pilares--num{grid-template-columns:1fr}
  .lotes{grid-template-columns:1fr;max-width:340px}
  .lote{flex-direction:row;justify-content:space-between;align-items:center;text-align:left}
  .lote__d{flex-basis:100%;order:3}
  .pilar__letra{font-size:52px;top:8px;right:14px}
}

/* ═══════════════════════════════════════════════════════ RESPONSIVO ════ */

/* -- desktop: a foto do topo vira faixa e o card do meio ganha um degrau -- */
@media (min-width:861px){
  /* Faixa: aqui o corte é VERTICAL (a caixa é mais larga que a foto), então
     só o segundo valor do object-position tem efeito.
     A arte nova não tem o emblema que antes obrigava a começar em 0%; as
     pessoas ficam entre 11,2% e 48,8%. 12% desce a janela para 3,2%–77,5%,
     deixa 8% de ar acima das cabeças e sobra vazio embaixo para o texto. */
  .hero__foto img{aspect-ratio:16/8;object-position:center 12%}
  .hero__int{margin-top:-138px}
  .bilhete--alvo{transform:translateY(-16px)}
}
/* a partir daqui o hero inteiro (foto + texto) precisa caber numa tela de
   ~900px de altura útil, senão o título nasce abaixo da dobra */
@media (min-width:1180px){
  /* As pessoas ocupam só 37,6% da altura da arte (11,2% a 48,8%), então a
     faixa pode voltar a ser baixa: 16/6 mostra 55,7% e ainda sobra folga.
     Faixa baixa aqui não é estética, é a dobra: o topo inteiro precisa caber
     numa tela de ~900px de altura, senão o título nasce fora da vista. */
  .hero__foto img{aspect-ratio:16/6;object-position:center 12%}
  /* A coluna do texto abre para 1100px (o G4 usa 1200). MOTIVO MEDIDO: em
     880px o H1 quebrava em 3 linhas e o topo inteiro ia a 1018px de altura —
     acima da dobra de um laptop de 900px. Em 1100px são 2 linhas. */
  .hero__int{width:min(100% - var(--gutter)*2,1100px);margin-top:-60px}
  .hero__logo{width:clamp(150px,12vw,180px)}
}

/* -------------------------------------------------- tablet até 1024px -- */
@media (max-width:1024px){
  .pilares{grid-template-columns:repeat(2,1fr)}
  .ficha{grid-template-columns:repeat(2,1fr)}
  /* três cards de ingresso em 1024 ficam estreitos demais para o preço
     gigante: viram uma coluna só, e o do meio sobe para o topo. */
  .bilhetes{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .bilhete--alvo{order:-1}
}

/* ------------------------------------------------------ celular 860px -- */
@media (max-width:860px){
  .dupla{grid-template-columns:1fr}
  .conta{display:none}          /* não cabe junto do aviso e do botão */
  .barra__int{gap:12px}
  .barra__aviso{font-size:11.5px}
  .pilula--barra{padding:11px 16px;font-size:10.5px;letter-spacing:.06em;min-height:44px}
}

/* ------------------------------------------------------ celular 620px -- */
@media (max-width:620px){
  :root{--barra-h:112px}
  .hero__int{gap:14px}
  .numeros__grade{grid-template-columns:1fr;gap:22px}
  .numeros__grade li+li::before{
    left:22%;right:22%;top:calc(-11px);bottom:auto;width:auto;height:1px}
  .pilares{grid-template-columns:1fr}
  .ficha{grid-template-columns:1fr}
  /* a barra vira duas linhas: aviso em cima, botão largo embaixo */
  .barra__int{flex-direction:column;align-items:stretch;text-align:center}
  .pilula--barra{width:100%}
  .rodape__int{flex-direction:column;text-align:center}
}

/* ------------------------------------------------------ celular 400px -- */
@media (max-width:400px){
  .preco__n{font-size:46px}
  .bilhete__flag{font-size:10.5px;padding:5px 11px;letter-spacing:.09em}
}

/* --------------------------------------------------------- impressão -- */
@media print{
  .barra,.esteira,.logos{display:none}
  body{background:#fff;color:#000;padding-bottom:0}
}


/* ═══════════════════════════════════════════════ BLOCOS DO FUNIL ════ */
/* Daqui para baixo é o que veste a ESTRUTURA do funil (consorcioclub) com
   a identidade da Imersão Crédito em Escala. Tudo acima é o imersao.css do
   evento, copiado inteiro e sem alteração. Regra: só var(--token); os dois
   valores novos abaixo entram no :root e não soltos pelo arquivo. */
:root{
  --tinta:#17120B;               /* texto sobre o ouro; já existia solto em .pilula--cheia */
  --veu:rgba(1,12,20,.86);       /* véu do lightbox e do rótulo dos vídeos */
  --sombra:rgba(0,0,0,.55);
}

/* O evento esconde a contagem com el.hidden, mas .conta{display:flex} vence o
   [hidden] do navegador. Aqui a regra fica explícita e vale para tudo. */
[hidden]{display:none!important}

/* O evento rola suave via CSS. Aqui a suavidade fica no JS, só nos cliques
   em âncora. MOTIVO MEDIDO: com scroll-behavior:smooth, o window.scrollTo()
   das ferramentas de captura/auditoria anda devagar, nunca chega ao pé da
   página, e as imagens com loading="lazy" das últimas seções (Canopus,
   mentor, mídia) saíam em branco no print. */
html{scroll-behavior:auto}

/* o funil usa <strong> onde o evento usa <span class="ouro"> */
.titulo strong{font-weight:600;color:var(--ouro)}
.titulo--g strong{font-weight:800}
/* frase das seções em duas colunas: maior que .titulo, menor que o H1 */
.titulo--f{font-size:clamp(26px,2.8vw,36px);line-height:1.2}
.titulo--canopus{font-size:clamp(20px,2.1vw,27px);line-height:1.4}
/* a citação do Pedro */
.titulo--cita{font-size:clamp(28px,3.4vw,44px);font-weight:700;line-height:1.15;color:var(--osso);letter-spacing:-.02em}
.sub em{font-style:italic;color:var(--osso)}
.sub strong{color:var(--branco);font-weight:600}
.secao--alta{background:var(--fundo-alto)}
.bloco+.bloco{margin-top:clamp(48px,6vw,96px)}
.secao__cta{display:flex;justify-content:center;margin-top:clamp(28px,3.4vw,46px)}

/* ------------------------------------------------ barra de topo ------- */
/* Faixa estática do funil ("ATENÇÃO, ÚLTIMAS VAGAS"). Vestida como a
   .bilhete__flag: ouro, caixa alta, peso 800. */
.topo{background:var(--ouro);color:var(--tinta);padding:12px var(--gutter);text-align:center}
.topo__aviso{margin:0;font-size:clamp(12px,1.094vw,14px);font-weight:800;letter-spacing:.11em;text-transform:uppercase;line-height:1.3}
.topo__vagas{width:min(100%,410px);height:18px;margin:8px auto 0;background:var(--fundo);border-radius:3px;overflow:hidden}
.topo__cheio{
  display:flex;align-items:center;justify-content:space-between;height:100%;width:97%;padding-inline:8px;
  background:var(--superficie-2);color:var(--ouro);
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1}

/* ---------------------------------------------------------- hero ------ */
.hero--funil{overflow:hidden;padding-block:clamp(40px,5vw,72px) clamp(56px,7vw,96px)}
/* o brilho branco do funil vira brilho de ouro, como o .oferta do evento */
.hero--funil::before{
  content:'';position:absolute;left:50%;bottom:-45%;width:140%;height:90%;z-index:-1;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(198,156,109,.16),rgba(198,156,109,.07) 45%,transparent 100%);
  filter:blur(40px)}
.hero__centro{
  position:relative;z-index:2;width:min(100% - var(--gutter)*2,1100px);margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.hero__centro .hero__logo{width:clamp(220px,28vw,420px)}
.hero__centro .hero__titulo{max-width:980px}
.hero__titulo strong{color:var(--ouro);font-weight:800}
.hero__centro .hero__data{
  font-size:clamp(12px,1.25vw,16px);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ouro)}
.hero__cta{margin-top:6px}
.hero__video{width:100%;max-width:860px;margin-top:clamp(14px,2vw,24px)}

/* ícones flutuantes do funil: só no desktop, mesma dança (4s, 14px) */
.hero__flutua{position:absolute;inset:0;pointer-events:none;display:none;z-index:1}
.hero__flutua img{
  position:absolute;width:110px;height:auto;animation:flutuar 4s ease-in-out infinite;
  filter:drop-shadow(0 18px 30px rgba(1,12,20,.55))}
.hero__flutua img:nth-child(1){left:2%;top:42%}
.hero__flutua img:nth-child(2){right:4%;top:18%;animation-delay:-1.2s}
.hero__flutua img:nth-child(3){right:2%;top:68%;animation-delay:-2.4s}
@keyframes flutuar{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media (min-width:861px){.hero__flutua{display:block}}
@media (prefers-reduced-motion:reduce){.hero__flutua img{animation:none}}

/* ----------------------------------------------------------- vídeo ---- */
/* Capa local + botão. O iframe do YouTube só nasce no clique (lightbox). */
.video{
  position:relative;display:block;width:100%;padding:0;overflow:hidden;
  border-radius:var(--r);border:1px solid var(--linha);background:var(--fundo);
  box-shadow:0 30px 70px -34px var(--sombra);text-align:left;color:var(--osso);
  transition:border-color .35s var(--quart)}
.video:hover{border-color:var(--ouro-linha)}
.video--largo{aspect-ratio:16/9}
.video--alto{aspect-ratio:9/16}
.video img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--quart)}
.video:hover img{transform:scale(1.03)}
.video__rot{
  position:absolute;inset:0 0 auto 0;padding:14px 16px 30px;pointer-events:none;
  background:linear-gradient(180deg,var(--veu),transparent)}
.video__t{display:block;font-size:clamp(12px,1.094vw,14px);font-weight:700;line-height:1.3;color:var(--osso)}
.video__s{display:block;margin-top:2px;font-size:clamp(10.5px,.9vw,12px);color:var(--cinza)}
.video__play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  display:grid;place-items:center;width:clamp(56px,5.6vw,72px);aspect-ratio:1;border-radius:50%;
  background:var(--ouro);color:var(--tinta);border:1px solid var(--ouro-luz);
  box-shadow:0 18px 40px -12px var(--ouro-fraco);
  transition:transform .35s var(--quart),background .3s var(--quart)}
.video__play svg{width:40%;height:40%;margin-left:6%}
.video:hover .video__play{transform:scale(1.07);background:var(--ouro-luz)}

.depoimentos{
  list-style:none;margin:clamp(28px,3.4vw,46px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px)}

/* ------------------------------------------------- duas colunas -------- */
.duas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,64px);align-items:center}
.duas--larga{grid-template-columns:1.1fr 1fr}
.duas+.duas{margin-top:clamp(40px,6vw,96px)}
.duas .destaque{margin:0}
.duas .sub{margin-inline:0;max-width:56ch}
.duas .pilula{margin-top:clamp(18px,2.2vw,28px)}
.duas__solta{width:100%;height:auto}
.destaque--retrato{max-width:480px;margin-inline:auto}

/* ---------------------------------------- "Eu vendi 1.5 bi" ----------- */
/* A foto do Pedro encosta no pé da seção, como no funil. */
.secao--operacao{padding-bottom:0;background:linear-gradient(180deg,var(--fundo),var(--fundo-alto))}
.duas--operacao{align-items:end}
.duas--operacao .duas__texto{padding-bottom:var(--secao)}
.combina--coluna{grid-template-columns:1fr;max-width:345px;margin-top:clamp(22px,2.6vw,34px)}
.combina--coluna li{font-weight:600}
.mentor{position:relative;display:flex;justify-content:flex-end;align-items:flex-end}
/* a foto agora é o trio (mais larga que o retrato original): o losango
   desce e encolhe para ficar atrás dos ombros, não acima das cabeças */
.mentor__forma{position:absolute;right:10%;bottom:4%;width:clamp(200px,24vw,340px);height:auto;pointer-events:none;opacity:.9}
.mentor__foto{position:relative;width:min(100%,520px);height:auto}

/* --------------------------------------- o que vai aprender ----------- */
/* 6 cards em 3 colunas, 2 em 2 colunas, 1 largo ao lado do botão. */
.pilares--texto .pilar{text-align:left}
.pilares+.pilares{margin-top:clamp(12px,1.5vw,22px)}
.pilares--dois{grid-template-columns:repeat(2,1fr)}
.pilares--fim{grid-template-columns:1.35fr 1fr;align-items:center}
.pilares__cta{display:flex;justify-content:center}

/* ------------------------------------------------- ingressos ---------- */
.contagem{display:flex;justify-content:center;gap:clamp(28px,8vw,130px);margin-top:clamp(28px,3.4vw,46px)}
.contagem__bloco{display:flex;flex-direction:column;align-items:center;gap:8px}
.contagem__n{
  margin:0;font-family:var(--display);font-size:clamp(44px,5.5vw,72px);font-weight:500;font-stretch:125%;
  line-height:1;letter-spacing:-.01em;color:var(--osso);font-variant-numeric:tabular-nums}
.contagem__r{margin:0;font-size:clamp(11px,1.016vw,13px);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza)}

.bilhetes--dois{grid-template-columns:repeat(2,1fr);max-width:1000px;margin-inline:auto;align-items:start}
/* o nome do ingresso vira <h3> e a flag "65% OFF" mora dentro dele */
.tag__nome{position:static;margin:0}
.bilhete__int>.bilhete__lista:first-child{padding-top:0;border-top:0}
.bilhete__lista li.nao{color:var(--cinza-fraco)}
.bilhete__lista li.nao svg{color:var(--cinza-fraco)}
.preco__antes{margin:0 0 6px;text-align:center;font-size:clamp(15px,1.484vw,19px);color:var(--cinza-fraco)}
.preco__antes s{text-decoration-thickness:2px;text-decoration-color:var(--ouro-fraco)}
.preco--funil{gap:8px;font-size:clamp(48px,5.8vw,84px);font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--osso)}
.preco--funil small{font-size:clamp(15px,1.484vw,19px);font-weight:600;line-height:1.15;padding-top:6px;color:var(--cinza);letter-spacing:0}
.bilhete__pe .bilhete__texto{margin-top:14px;text-align:center}

/* --------------------------------------------------- canopus ---------- */
.canopus__logo{width:clamp(150px,14vw,200px);height:auto;margin:0 0 clamp(18px,2.2vw,28px)}
.canopus__video{width:100%;max-width:380px;margin-inline:auto}

/* --------------------------------------------- mídia · marquee -------- */
/* A .esteira do evento com fotos em vez de texto. O trilho vem duplicado
   no HTML; margin-right no lugar de gap para o -50% fechar sem emenda. */
.esteira--fotos{border:0;background:none;padding-block:0;margin-top:clamp(26px,3vw,40px)}
.esteira--fotos .esteira__trilho{animation-duration:70s}
.esteira--rapida .esteira__trilho{animation-duration:55s}
.esteira--fotos img{
  flex:none;height:clamp(200px,24vw,320px);width:auto;margin-right:16px;
  border-radius:var(--r-mini);border:1px solid var(--linha);object-fit:cover;background:var(--superficie)}
.esteira--fotos:hover .esteira__trilho{animation-play-state:paused}

/* ------------------------------------------------------- FAQ ---------- */
.caixa--faq{max-width:1060px}
.qa__corpo ul{
  margin:0 0 12px;padding:0 clamp(16px,1.7vw,24px) 0 calc(clamp(16px,1.7vw,24px) + 18px);
  font-size:clamp(12.5px,1.172vw,15px);line-height:1.65;color:var(--cinza)}
.qa__corpo ul ul{margin:6px 0 0;padding:0 0 0 18px}
.qa__corpo li{margin:0 0 8px}
.qa__corpo li::marker{color:var(--ouro)}
.qa__corpo li p{margin:4px 0 0;padding-inline:0}
.qa__corpo li p:last-child{margin-bottom:0}
.qa__corpo h3{
  margin:16px 0 8px;padding-inline:clamp(16px,1.7vw,24px);
  font-size:clamp(14px,1.25vw,16px);font-weight:700;color:var(--osso)}
.qa__corpo strong{color:var(--osso);font-weight:600}
.qa__corpo>div>:last-child{margin-bottom:clamp(16px,1.7vw,22px)}

/* ---------------------------------------------------- rodapé ---------- */
.rodape--funil .rodape__int{flex-direction:column;justify-content:center;text-align:center;gap:16px}
.rodape--funil img{width:clamp(150px,14vw,200px)}

/* ------------------------------------------- WhatsApp flutuante ------- */
/* fica acima da barra fixa: o pé usa a mesma --barra-h que o JS mede */
.zap{
  position:fixed;z-index:110;right:16px;bottom:calc(var(--barra-h) + 16px);
  width:56px;height:56px;border-radius:50%;
  box-shadow:0 14px 30px -10px var(--sombra);transition:transform .3s var(--quart)}
.zap:hover{transform:scale(1.08)}
.zap img{width:100%;height:100%}

/* ------------------------------------------------- lightbox ----------- */
.luz{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:var(--gutter)}
.luz__fundo{position:absolute;inset:0;background:var(--veu);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.luz__caixa{position:relative;width:min(100%,960px)}
.luz__caixa--alto{width:min(100%,420px,calc((100vh - 2*var(--gutter) - 56px) * 9 / 16))}
.luz__video{
  position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r);
  border:1px solid var(--ouro-linha);background:var(--fundo);box-shadow:0 40px 90px -40px var(--sombra)}
.luz__caixa--alto .luz__video{aspect-ratio:9/16}
.luz__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.luz__fechar{
  position:absolute;right:0;top:-48px;display:grid;place-items:center;
  width:40px;height:40px;border-radius:50%;border:1px solid var(--ouro-fraco);
  background:rgba(198,156,109,.12);color:var(--ouro);transition:background .3s var(--quart),color .3s var(--quart)}
.luz__fechar:hover{background:var(--ouro);color:var(--tinta)}
.luz__fechar svg{width:16px;height:16px}
body.sem-rolagem{overflow:hidden}

/* ═══════════════════════════════ RESPONSIVO DOS BLOCOS DO FUNIL ════ */
@media (max-width:1024px){
  .depoimentos{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .duas,.duas--larga{grid-template-columns:1fr;gap:clamp(24px,4vw,40px)}
  .duas__texto{text-align:center}
  .duas .sub{margin-inline:auto}
  .duas--foto-cima .duas__texto{order:2}
  .duas--operacao .duas__texto{padding-bottom:0}
  .mentor{justify-content:center;margin-top:8px}
  .mentor__forma{right:8%}
  .combina--coluna{margin-inline:auto}
  .canopus__logo{margin-inline:auto}
  .pilares--fim{grid-template-columns:1fr}
  .bilhetes--dois{grid-template-columns:1fr;max-width:520px}
}
@media (max-width:620px){
  .depoimentos{grid-template-columns:1fr;max-width:380px;margin-inline:auto}
  .pilares--dois{grid-template-columns:1fr}
  .contagem{gap:clamp(24px,9vw,48px)}
  .topo{padding-block:10px}
}

@media print{
  .topo,.zap,.luz,.hero__flutua{display:none}
}

/* ═══════════════════════════ COPY CRÉDITO360 · blocos novos (2026-09-10) ════ */
/* A copy deixou de ser a do consórcio. Estes blocos vestem o que mudou:
   subtítulo do hero, vídeo local no lightbox, números de prova, grade de
   logos dos bancos e os cards de quem conduz / mentores com legenda. */
.hero__centro .hero__sub{margin:0;max-width:62ch}
.luz__video video{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--fundo)}

/* números de prova: o .numeros do evento, logo abaixo do título da seção */
.numeros--funil{padding-top:clamp(22px,2.6vw,34px);padding-bottom:0}
.numeros--funil .numeros__r{max-width:24ch}

/* logos dos bancos: cada um num quadrado claro, porque são coloridos e
   brigariam com o fundo azul-preto se ficassem soltos */
.bancos{
  list-style:none;margin:0;padding:0;max-width:480px;margin-inline:auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,14px)}
.bancos li{
  display:grid;place-items:center;aspect-ratio:1;padding:14%;
  border-radius:var(--r-mini);background:var(--osso);border:1px solid var(--linha)}
.bancos img{width:100%;height:100%;object-fit:contain}

/* rótulo "Dia 1 / Dia 2" acima das grades do que vai aprender */
.kicker.dia{margin:clamp(28px,3.4vw,46px) 0 0;text-align:center}
.kicker.dia+.pilares{margin-top:clamp(14px,1.6vw,22px)}

/* oferta única: sem contagem, o título fala sozinho; o card do evento
   (.bilhetes--um) já centraliza em 520px */
.oferta .sub b{color:var(--osso)}

/* quem conduz / mentores: o .mural do evento, com legenda fora do card */
.mural--conduz{margin-top:clamp(28px,3.4vw,46px)}
.mural--quatro{grid-template-columns:repeat(4,1fr)}
.quem{list-style:none}
.quem__nome{margin:12px 0 0;font-size:clamp(14px,1.25vw,16px);font-weight:700;color:var(--osso)}
.quem__nome span{
  display:block;margin-top:3px;font-size:clamp(10.5px,.9vw,12px);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ouro)}
.quem__nota{margin:6px 0 0;font-size:clamp(12px,1.094vw,14px);line-height:1.5;color:var(--cinza)}

@media (max-width:1024px){
  .mural--quatro{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  /* no celular o .mural do evento vira trilho horizontal; aqui o item é o
     <li class="quem">, então a largura do card vai nele */
  .mural>li{flex:0 0 72%;scroll-snap-align:center}
  .mural--quatro>li{flex-basis:62%}
  .bancos{grid-template-columns:repeat(3,1fr)}
}

/* ═══════════════════════════ PÁGINA DE VSL (funil 02 / 03) ═══════════════ */
/* O hero do funil, com o vídeo trocado por um palco de VSL (Panda) e um
   bloco de perfil que vem do quiz pela URL (?p=&r=). */
.hero__kicker{margin:0;font-size:clamp(10.5px,.9vw,11.5px);font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--ouro)}
.vsl{width:100%;max-width:880px;margin-top:clamp(14px,2vw,24px)}
.vsl__caixa{
  position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r);
  border:1px solid var(--ouro-linha);background:var(--fundo);
  box-shadow:0 30px 70px -34px var(--sombra)}
.vsl__caixa iframe,.vsl__caixa video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* lugar reservado até a VSL chegar: capa + aviso discreto */
.vsl__ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.vsl__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.vsl__ph span{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;
  padding:10px 16px;border-radius:var(--pill);border:1px solid var(--ouro-fraco);
  background:rgba(1,12,20,.7);color:var(--ouro);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.vsl__ph span svg{width:14px;height:14px}

/* botões liberados pelo tempo de vídeo (vsl.js) */
.vsl-liberado{animation:vslEntra .5s var(--expo) both}
@keyframes vslEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.vsl-liberado{animation:none}}

/* bloco "seu perfil", só aparece quando a URL traz ?p= */
.perfil{
  width:100%;max-width:760px;margin-top:clamp(18px,2.4vw,28px);padding:clamp(20px,2.4vw,30px);
  text-align:left;border-radius:var(--r);border:1px solid var(--ouro-linha);
  background:linear-gradient(180deg,#0E1E2C,#08141F);box-shadow:0 40px 90px -46px rgba(198,156,109,.35)}
.perfil__selo{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--pill);
  border:1px solid var(--ouro-fraco);background:rgba(198,156,109,.10);
  font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ouro)}
.perfil__selo svg{width:12px;height:12px}
.perfil h2{margin:12px 0 0;font-size:clamp(18px,1.9vw,24px);font-weight:700;color:var(--osso);letter-spacing:-.015em;line-height:1.25}
.perfil p{margin:8px 0 0;font-size:clamp(13px,1.15vw,15px);line-height:1.6;color:var(--cinza)}
.perfil ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.perfil li{display:grid;grid-template-columns:14px 1fr;gap:10px;align-items:start;font-size:clamp(12.5px,1.1vw,14.5px);line-height:1.5;color:rgba(255,255,255,.86)}
.perfil li svg{width:13px;height:13px;margin-top:4px;color:var(--ouro)}
.perfil li b{color:var(--osso)}

/* oferta única */
.oferta .sub b{color:var(--osso)}
.kicker.dia{margin:clamp(28px,3.4vw,46px) 0 0;text-align:center}
.kicker.dia+.pilares{margin-top:clamp(14px,1.6vw,22px)}

/* ═══════════════════ SEM LETRAS ESPAÇADAS (pedido do Max, 2026-09-10) ═════ */
/* Todo rótulo com tracking largo do evento perde o espaçamento e a caixa
   alta. Os números largos (Archivo 125%) voltam à largura normal. */
.topo__aviso,.topo__cheio,.kicker,.hero__kicker,.hero__data,.hero__selo,.pilula,.bilhete__flag,.tag__rot,
.lote__n,.ficha dt,.esteira__trilho span,.conta__bloco i,.quem__nome span,.perfil__selo,.plano__flag,.vsl__ph span,
.contagem__r,.numeros__r,.tag__nome{letter-spacing:0}
.topo__aviso,.kicker,.hero__kicker,.hero__data,.pilula,.bilhete__flag,.tag__rot,.quem__nome span,.perfil__selo,.vsl__ph span,.contagem__r,.topo__cheio{text-transform:none}
.kicker,.hero__kicker{font-size:clamp(13px,1.1vw,14.5px);font-weight:700}
.topo__aviso{font-size:clamp(13px,1.15vw,15px);font-weight:700}
.hero__data{font-size:clamp(13px,1.2vw,15.5px);font-weight:700}
.pilula{font-size:clamp(13.5px,1.2vw,15.5px);font-weight:700}
.pilula--barra{font-size:clamp(13px,1.1vw,14.5px)}
.tag__rot{font-size:clamp(12px,1vw,13.5px);font-weight:600}
.bilhete__flag{font-size:12px;font-weight:700}
.quem__nome span{font-size:clamp(12px,1vw,13.5px);font-weight:600}
.perfil__selo{font-size:12.5px;font-weight:700}
.numeros__n,.contagem__n{font-stretch:100%;letter-spacing:-.02em;font-weight:600}
.hero__titulo{font-stretch:100%;letter-spacing:-.02em}
.titulo--g{text-transform:none;letter-spacing:-.01em;font-weight:600}

/* ═══════════════════ v2 · neste vídeo, para quem, como funciona ══════════ */
.vsl__topicos{
  list-style:none;margin:14px auto 0;padding:0;width:100%;max-width:880px;
  display:grid;gap:8px;text-align:left}
.vsl__topicos li{
  display:grid;grid-template-columns:14px 1fr;gap:10px;align-items:start;
  padding:11px 14px;border-radius:var(--r-mini);border:1px solid var(--linha);background:var(--superficie);
  font-size:clamp(13px,1.1vw,14.5px);line-height:1.5;color:rgba(255,255,255,.86)}
.vsl__topicos svg{width:13px;height:13px;margin-top:4px;color:var(--ouro)}
.quadro--nao .quadro__ico svg,.quadro--nao .quadro__lista svg{color:var(--cinza-fraco)}
.quadro .titulo strong{font-weight:700}
.pilares--tres{grid-template-columns:repeat(3,1fr);counter-reset:nenhum}
.pilares--tres .pilar{position:relative;padding-top:clamp(26px,3vw,36px)}
.pilares--tres .pilar__letra{font-size:clamp(40px,4.6vw,60px)}
@media (max-width:860px){.pilares--tres{grid-template-columns:1fr}}

/* a regra do hero do funil tem mais peso que o bloco acima; repetida aqui com a mesma especificidade */
.hero__centro .hero__data{letter-spacing:0;text-transform:none}
.hero__centro .hero__kicker{letter-spacing:0;text-transform:none}

/* ═══════════════════ v2 · garantia no card e última chamada ══════════════ */
.garantia{
  display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;
  margin:14px 0 0;padding:12px 14px;border-radius:var(--r-mini);
  border:1px solid var(--ouro-linha);background:rgba(198,156,109,.08);
  font-size:clamp(12px,1.05vw,13.5px);line-height:1.5;color:var(--cinza);text-align:left}
.garantia b{color:var(--osso);font-weight:700}
.garantia__ico{
  display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--ouro);color:var(--tinta)}
.garantia__ico svg{width:12px;height:12px}

.fecho{background:radial-gradient(60% 40% at 50% 0%,rgba(198,156,109,.10),transparent 70%),var(--fundo-alto)}
.fecho .sub{margin-inline:auto}
.fecho__nota{margin:14px 0 0;font-size:clamp(11.5px,1vw,13px);color:var(--cinza-fraco)}

/* o card do trio já traz nome e cargo gravados na arte: a legenda embaixo é só
   a frase de contexto, um pouco mais forte por ser o único texto do card */
.mural--conduz:not(.mural--quatro) .quem__nota{margin-top:12px;color:rgba(255,255,255,.82);font-size:clamp(12.5px,1.1vw,14.5px)}