/* ===================================================================
   PERFIL BLINDADO — CSS da página
   resolva.com.br/perfil-blindado

   ATENÇÃO aos caminhos de imagem: dentro de um .css o `url()` resolve a partir
   do PRÓPRIO ARQUIVO, não do HTML. Daqui (assets/css/) as artes ficam em
   `../img/`. Escrever `assets/img/` pediria `assets/css/assets/img/` e dá 404
   silencioso — o fundo some sem nenhum aviso na tela.

   Ordem do arquivo:
     1. Tokens do design system
     2. Base e utilitários (container, tipografia, CTA obrigatório, revelação)
     3. Uma seção por vez, na mesma ordem em que aparecem no HTML
     4. Movimento reduzido
     5. Responsivo, no fim, conforme o padrão do projeto

   Carregado DEPOIS do Bootstrap de propósito: várias regras daqui (o container,
   os títulos, as listas) precisam vencer o Reboot, e com especificidade igual
   quem vem por último ganha.
   =================================================================== */

/* ===================================================================
   TOKENS — design system das referências spe-t001 / spe-t002,
   extraído por getComputedStyle nas próprias páginas.
   Rampa da marca: roxo -> magenta -> laranja -> amarelo.
   =================================================================== */
:root{
  --fundo:#0B0212;
  --fundo-2:#0F0317;
  --fundo-3:#160A22;
  --roxo:#6833DC;
  --magenta:#D418C5;
  --laranja:#FF631F;
  --amarelo:#FFB92E;
  --branco:#FFFFFF;
  --texto:#828282;
  --texto-claro:#CCCCCC;
  --borda:rgba(255,255,255,.10);
  --rampa:linear-gradient(107deg,#6833DC,#D418C5 25%,#FF631F 72%,#FFB92E);
  --rampa-texto:linear-gradient(140deg,#D418C5,#FF631F 49%,#FFB92E);
  --raio:20px;
  --max:1180px;
  /* variante clara — a mesma do spe-t002, usada só na seção de oferta */
  --claro-1:#FAFAFA;
  --claro-2:#E7E7EE;
  --tinta:#0B0212;
  --tinta-fraca:#52525B;
  --verde-tinta:#158828;
  /* a rampa cheia vai até amarelo, que sobre claro dá 2,85 — abaixo do mínimo.
     Na seção clara ela para no magenta, que dá 4,25 em texto grande. */
  --rampa-texto-clara:linear-gradient(140deg,#6833DC,#D418C5);
}

/* ===================================================================
   BASE
   =================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--fundo);
  color:var(--texto);
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
/* Títulos leves e com tracking negativo — a assinatura tipográfica do sistema.
   Peso 500, não 700: é o que dá o ar editorial das referências. */
h1,h2,h3,h4,h5,h6{
  color:var(--branco);font-weight:500;line-height:1.2;
  letter-spacing:-.02em;margin:0 0 18px;
}
h1{font-size:clamp(32px,5.4vw,60px);letter-spacing:-.03em}
h2{font-size:clamp(27px,3.4vw,35px)}
h3{font-size:clamp(18px,1.6vw,21px);font-weight:600;letter-spacing:-.01em}
p{margin:0 0 18px}
a{color:var(--texto-claro)}
strong{color:var(--branco);font-weight:600}
.container{max-width:var(--max)}
section{padding:80px 0;position:relative}

/* Palavra destacada com gradiente de texto — técnica das referências */
.marca{
  background:var(--rampa-texto);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

.olho{
  display:inline-flex;align-items:center;gap:9px;
  margin-bottom:18px;padding:8px 16px;
  border:1px solid var(--borda);border-radius:999px;
  background:rgba(104,51,220,.14);
  color:var(--texto-claro);
  font-size:14px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
}
.olho svg{flex:none;color:var(--magenta)}
.centro{text-align:center}
.sub{color:var(--texto);font-size:clamp(15px,1.5vw,17px);max-width:720px;margin-inline:auto}

/* CTA — CSS obrigatório definido pelo padrão do projeto */
button.cta, a.cta{
  clear: both;
  display: block;
  background-color: #61CE70;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  fill: #FFFFFF;
  color: #FFFFFF;
  padding: 15px 75px;
  margin: 35px auto 0 auto;
  border: none;
  background: linear-gradient(106deg, #59F370 1.19%, #158828 89.9%);
  box-shadow: 0px 0px 111px 0px #43D059;
  border-radius: 200px 200px 200px 200px;
  -moz-border-radius: 200px 200px 200px 200px;
  -webkit-border-radius: 200px 200px 200px 200px;
}
/* complementos que não alteram nenhuma propriedade declarada acima */
button.cta, a.cta{
  width:fit-content;max-width:100%;
  text-align:center;text-decoration:none;line-height:1.3;
  font-family:inherit;cursor:pointer;
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
button.cta:hover, a.cta:hover{transform:translateY(-3px);filter:brightness(1.06);box-shadow:0 0 60px 0 #43D059}
button.cta:focus-visible, a.cta:focus-visible{outline:3px solid var(--magenta);outline-offset:4px}
.cta-apoio{margin:14px auto 0;text-align:center;color:var(--texto);font-size:14px}

/* Revelação na rolagem.
   O estado escondido NÃO nasce do CSS: quem o liga é o scripts.js, e só nos
   blocos que estão abaixo da dobra no momento em que ele roda. Antes havia uma
   classe `.js` num script mínimo dentro do <head> para isso; com todo o JS agora
   num arquivo `defer`, esse script sairia do ar e o estado escondido chegaria
   depois da primeira pintura — o conteúdo do topo desceria 22px e voltaria.
   Marcando só o que está fora da tela, não há nada para piscar: o topo nunca
   se mexe e o resto continua animando.
   Bônus: sem JavaScript (ou com ele quebrado por um pixel mal colado), nenhum
   bloco recebe `.preparado` e a página inteira já está no lugar certo.

   Anima SÓ o deslocamento, nunca a opacidade. Com `opacity:0` o conteúdo fica
   literalmente invisível até o observador disparar — um erro de script deixaria
   a página em branco, e as ferramentas que medem antes do disparo (Lighthouse,
   leitores automatizados) não conseguem resolver a cor do texto e reprovam o
   contraste. Foi o que derrubou a acessibilidade de 100 para 96.

   A transição mora no estado FINAL, não no inicial: assim o `.preparado` é
   aplicado de uma vez, sem animar a descida. */
.reveal.preparado{transform:translateY(22px)}
.reveal.preparado.visivel{transform:none;transition:transform .6s ease}

/* ===================================================================
   SEÇÃO: HEADER
   =================================================================== */
.header{
  position:fixed;inset-inline:0;top:0;z-index:50;
  padding:14px 0;
  background:rgba(11,2,18,0);
  transition:background-color .3s ease, box-shadow .3s ease, padding .3s ease, backdrop-filter .3s ease;
}
.header.fixo{
  padding:9px 0;
  background:rgba(11,2,18,.86);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  box-shadow:0 1px 0 0 var(--borda), 0 18px 40px rgba(0,0,0,.5);
}
.header__grid{display:flex;align-items:center;justify-content:space-between;gap:18px}
.header__logo{width:188px;transition:width .3s ease}
.header.fixo .header__logo{width:154px}
.header__cta{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 24px;border-radius:80px;
  background:linear-gradient(45deg,#05811A,#08D23E,#05811A,#08D23E);
  color:#fff;font-size:14px;font-weight:500;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;
  transition:transform .2s ease,filter .2s ease;
}
.header__cta:hover{transform:translateY(-2px);filter:brightness(1.07);color:#fff}

/* ===================================================================
   SEÇÃO: HERO
   =================================================================== */
/* A arte é o FUNDO da seção, não um elemento dentro dela — o mesmo arranjo da
   seção do expert. `min-height` existe porque, sem a coluna da imagem, o hero
   passaria a ter a altura do texto e o enquadramento da arte se perderia.
   `background-position: 74%` mantém a pessoa em quadro em telas largas: ela
   fica no terço direito da arte, e centralizar cortaria justamente esse lado. */
.hero{
  padding:250px 0 200px;
  overflow:hidden;
  min-height:min(86vh, 700px);
  display:flex;align-items:center;
  background:url("../img/hero-bg-2.webp") 74% 50% / cover no-repeat, var(--fundo);
}
/* Véu de leitura + os dois brilhos de marca que já estavam aqui.
   O véu é o que garante o contraste do texto: a arte é azul-escura e uniforme
   do lado esquerdo, mas "escura" não é o mesmo que "escura o bastante" — medido,
   o lead passou de 3,9 para 7,2 depois do véu. Ele morre antes dos 80% para não
   apagar a pessoa, e há um degradê no rodapé para a arte não terminar em corte
   seco contra a seção seguinte. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(90deg, var(--fundo) 0%, rgba(11,2,18,.92) 30%, rgba(11,2,18,.55) 58%, transparent 80%),
    linear-gradient(180deg, transparent 62%, var(--fundo) 100%),
    radial-gradient(900px 480px at 78% 26%, rgba(104,51,220,.30), transparent 62%),
    radial-gradient(620px 380px at 12% 76%, rgba(212,24,197,.16), transparent 66%);
  pointer-events:none;
}
.hero .container{position:relative;z-index:1;width:100%}
/* Uma coluna só, de 50% da largura, encostada à esquerda — o que sobra é a arte */
.hero__grid{display:grid;grid-template-columns:minmax(0,50%);gap:0;align-items:center}
/* O lead usa a tinta CLARA, não o cinza padrão dos textos de apoio: com a arte
   no fundo ele deixou de estar sobre o #0B0212 chapado. Medido no pior pixel da
   sua própria caixa — o brilho verde do CTA, que é obrigatório pelo padrão e
   pinta POR CIMA do véu — o #828282 dava 3,76, abaixo do mínimo de 4,5.
   O #CCCCCC dá 9,08 no mesmo ponto. */
.hero__lead{font-size:clamp(15px,1.6vw,18px);color:var(--texto-claro);max-width:560px}
/* O CTA obrigatório traz `margin: 35px auto 0 auto`, que o centraliza na coluna.
   No hero a coluna é de texto alinhado à esquerda, e o botão centralizado ficava
   fora do eixo de tudo que está acima dele. Zerar só a margem de início resolve
   sem tocar em nenhuma outra propriedade do padrão. */
.hero__texto .cta{margin-inline-start:0}

/* ===================================================================
   SEÇÃO: TARJA ROLANTE (tipos de restrição)
   =================================================================== */
.tarja{
  padding:0;
  /* a régua de gradiente da rampa, assinatura das referências */
  border-block:1px solid transparent;
  background:
    linear-gradient(var(--fundo-2),var(--fundo-2)) padding-box,
    var(--rampa) border-box;
  overflow:hidden;
}
.tarja__pista{display:flex;width:max-content;animation:correr 34s linear infinite}
.tarja__grupo{display:flex;align-items:center;flex:none}
.tarja__item{
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 30px;white-space:nowrap;
  color:var(--texto-claro);font-size:15px;font-weight:500;
}
.tarja__item svg{flex:none;color:var(--laranja)}
@keyframes correr{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tarja:hover .tarja__pista{animation-play-state:paused}

/* ===================================================================
   SEÇÃO: PROBLEMA
   =================================================================== */
/* Textura de grade ao fundo — usada por #problema e por #aulas.
   A arte original era um desenho fechado de 1920x418: cobria só a faixa central
   e, esticada para a seção inteira, distorcia até 14x no celular. Virou um
   LADRILHO de 68px que se repete — cobre qualquer tamanho de seção, em qualquer
   tela, sem deformar uma única linha.
   O esmaecimento das bordas, que no arquivo original vinha de gradientes presos
   ao canvas de 1920px, agora é uma máscara em CSS: ela acompanha a altura real
   da seção, que muda com a quantidade de texto.
   As duas seções compartilham a regra de propósito — se a densidade da grade
   mudar, muda nas duas juntas e elas não saem de sintonia. */
.problema, .aulas, .oferta{background:var(--fundo-2)}
.problema::before, .aulas::before, .oferta::before{
  content:"";position:absolute;inset:0;
  background:url("../img/grid-tile.svg") 50% 50% / 68px 68px repeat;
  opacity:.14;
  /* some nas quatro bordas em vez de bater na emenda com a seção vizinha */
  -webkit-mask-image:radial-gradient(ellipse 72% 68% at 50% 50%, #000 42%, transparent 100%);
          mask-image:radial-gradient(ellipse 72% 68% at 50% 50%, #000 42%, transparent 100%);
  pointer-events:none;
}
.problema .container, .aulas .container, .oferta .container{position:relative;z-index:1}
.sintomas{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px;padding:0;list-style:none}
.sintoma{
  padding:30px 26px;border:1px solid var(--borda);border-radius:var(--raio);
  background:var(--fundo-3);
  transition:transform .26s ease,border-color .26s ease,box-shadow .26s ease;
}
.sintoma:hover{transform:translateY(-5px);border-color:rgba(212,24,197,.45);box-shadow:0 20px 44px rgba(0,0,0,.5)}
.sintoma__icone{
  width:50px;height:50px;margin-bottom:18px;
  display:grid;place-items:center;border-radius:14px;
  background:rgba(104,51,220,.18);color:var(--magenta);
}
.sintoma h3{margin-bottom:10px}
.sintoma p{margin:0;font-size:15px}

/* ===================================================================
   SEÇÃO: VIRADA
   =================================================================== */
.virada__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:center}

/* --- Escudo flutuante ---
   A arte já vem sobre fundo escuro, então ela NÃO ganha moldura: em vez de
   cantos arredondados com sombra (que recortariam um retângulo visível contra
   o #0B0212 da página), as bordas se dissolvem numa máscara radial e o brilho
   vem de um halo atrás, da cor da própria arte. Ela paira, não está colada.
   `perspective` fica aqui porque a inclinação acontece no filho. */
/* Sem `perspective` aqui: perspective cria contexto de empilhamento, e contexto
   de empilhamento isola a mesclagem — o `screen` da camada de baixo pararia de
   enxergar o fundo da página. A perspectiva foi para dentro do próprio
   `transform` da arte, onde não isola nada. */
.virada__img{position:relative}
.virada__img::before{
  content:"";position:absolute;z-index:0;
  left:50%;top:50%;width:76%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(104,51,220,.42) 0%, rgba(212,24,197,.20) 45%, transparent 70%);
  filter:blur(46px);pointer-events:none;
}
.virada__arte{
  position:relative;z-index:1;
  display:block;width:100%;height:auto;
  /* `perspective()` dentro do transform, e não no pai — ver a nota em
     .virada__img. Os dois valores abaixo são escritos pelo JS a cada quadro. */
  transform:perspective(1100px)
            translate3d(0, var(--paralaxe, 0px), 0)
            rotateX(var(--giro-x, 0deg)) rotateY(var(--giro-y, 0deg));
  will-change:transform;
}
/* A flutuação mora numa camada só dela: é animação de CSS, e o JS escreve
   transform no filho. Duas camadas, duas propriedades, sem conflito.
   É também aqui que a arte se mistura com a página: o render é um brilho sobre
   preto, e no modo `screen` o preto não altera o que está atrás — só a luz
   passa. Sem isso a arte vira um retângulo preto sobre o roxo do fundo, porque
   o preto dela e o #0B0212 da página não são a mesma cor. Vai nesta camada, e
   não na <img>, porque o transform do filho já isolaria a mesclagem. */
.virada__flutua{animation:flutuar 7s ease-in-out infinite;mix-blend-mode:screen}
@keyframes flutuar{
  0%,100%{transform:translate3d(0,-9px,0)}
  50%    {transform:translate3d(0, 9px,0)}
}
/* Quem pediu menos movimento não recebe nem a flutuação nem o paralaxe —
   o JS também não registra o listener de scroll nesse caso. */
@media (prefers-reduced-motion: reduce){
  .virada__flutua{animation:none}
  .virada__arte{transform:none}
}
.virada__lista{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:16px}
.virada__lista li{display:flex;gap:14px;align-items:flex-start;font-size:15px}
.virada__lista svg{flex:none;margin-top:3px;color:var(--laranja)}

/* ===================================================================
   SEÇÃO: AULAS
   =================================================================== */
.aulas__lista{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:46px;padding:0;list-style:none;counter-reset:aula}
.aula{
  position:relative;display:flex;gap:20px;align-items:flex-start;
  padding:28px 28px 28px 24px;border:1px solid var(--borda);border-radius:var(--raio);
  background:var(--fundo-3);
  transition:transform .26s ease,border-color .26s ease;
}
.aula:hover{transform:translateY(-4px);border-color:rgba(212,24,197,.45)}
.aula__num{
  counter-increment:aula;flex:none;
  width:46px;height:46px;display:grid;place-items:center;border-radius:12px;
  background:var(--rampa);
  color:var(--branco);font-weight:600;font-size:17px;
}
.aula__num::before{content:"0" counter(aula)}
.aula h3{margin:0 0 8px}
.aula p{margin:0;font-size:15px}

/* ===================================================================
   SEÇÃO: PARA QUEM
   =================================================================== */
.publicos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px;padding:0;list-style:none}
.publico{
  padding:32px 26px;border-radius:var(--raio);
  border:1px solid var(--borda);
  background:radial-gradient(360px 200px at 50% 0%,rgba(104,51,220,.28),transparent 70%),var(--fundo-3);
}
.publico__icone{width:52px;height:52px;margin-bottom:18px;display:grid;place-items:center;border-radius:50%;background:rgba(212,24,197,.16);color:var(--magenta)}
.publico h3{margin-bottom:10px}
.publico p{margin:0;font-size:15px}

/* ===================================================================
   SEÇÃO: PROVAS (perfis blindados)
   A faixa de depoimentos sangra de ponta a ponta: o <div class="splide">
   fica FORA do .container de propósito, para os cartões passarem pelas
   bordas da tela em vez de pararem numa caixa. Os slides são só a imagem
   com canto arredondado — sem fundo, sem moldura, sem padding.
   =================================================================== */
.provas{overflow:hidden}

/* --- Variante CLARA — a mesma da garantia ---
   Duas ilhas claras na página escura: os depoimentos e a garantia. As duas usam
   o mesmo gradiente de 45°, a mesma tinta e a mesma rampa de destaque, para
   lerem como um par e não como dois acidentes.
   Cada cor foi reconferida contra o fundo novo: o cinza do corpo (#828282) dava
   3,06 sobre o claro e foi trocado pela tinta fraca (7,7). */
.provas{
  background:linear-gradient(45deg, var(--claro-1) 0%, var(--claro-2) 100%);
  color:var(--tinta-fraca);
}
.provas h2{color:var(--tinta)}
.provas .sub{color:var(--tinta-fraca)}
.provas strong{color:var(--tinta)}
/* A rampa cheia termina em amarelo (2,85 sobre claro). Aqui ela para no
   magenta, que dá 4,25 — o mesmo corte feito na garantia. */
.provas .marca{background:var(--rampa-texto-clara);-webkit-background-clip:text;background-clip:text;color:transparent}
/* O olho translúcido roxo sobre claro compõe rgb(230,222,246): o texto em roxo
   dá 5,21 e o ícone magenta 3,41. O contorno branco some, então vira tinta. */
.provas .olho{border-color:rgba(11,2,18,.10);color:var(--roxo)}

.prova__carrossel{margin-top:46px;width:100%}
/* O Splide-core não traz layout pronto: o track e a lista são montados aqui.
   Usamos só o CSS mínimo da biblioteca para não herdar o visual dela. */
.prova__carrossel .splide__track{overflow:hidden}
.prova__carrossel .splide__list{display:flex;margin:0;padding:0;list-style:none}
.prova__item{
  flex:none;margin:0;padding:0;background:none;border:0;
}
.prova__item img{
  display:block;width:100%;height:auto;
  border-radius:var(--raio);
  /* o fio de contorno dá recorte sobre o fundo claro sem virar moldura, e a
     sombra é da mesma família da caixa da garantia (tinta, não preto puro) */
  box-shadow:0 0 0 1px rgba(11,2,18,.10), 0 18px 40px rgba(11,2,18,.14);
}

/* As pontas somem, reforçando a leitura de "faixa que continua".
   É MÁSCARA, não um degradê da cor do fundo por cima: o fundo da seção é um
   gradiente de 45°, então nenhuma cor sólida fecharia nas duas bordas sem
   emenda visível. A máscara apaga o pixel e deixa o fundo real aparecer,
   qualquer que ele seja. */
.prova__carrossel{
  position:relative;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%);
}

/* ===================================================================
   SEÇÃO: EXPERT
   Mesma organização da seção principal do resolva.com.br: a foto é FUNDO
   da seção, não um elemento, e o texto ocupa a metade esquerda — que na
   arte é justamente a parte escura e vazia.
   =================================================================== */
.expert{
  background:
    url("../img/expert-bg.webp") 50% 0 / cover no-repeat,
    var(--fundo-2);
  padding:96px 0;
}
/* Véu na metade esquerda: a arte já é escura ali, mas o degradê garante o
   contraste do texto mesmo se a imagem for trocada por outra mais clara. */
.expert::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(11,2,18,.92) 0%, rgba(11,2,18,.78) 38%, rgba(11,2,18,0) 66%);
  pointer-events:none;
}
.expert .container{position:relative;z-index:1}
.expert__grid{display:block}
/* 50% da coluna, com teto de 620px. O CSS do site explica por que não é 50%
   puro: a linha estica junto com a janela e passa dos ~65 caracteres que o
   olho lê confortavelmente. */
.expert__texto{width:50%;max-width:620px}
.expert__dados{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 0;padding:0;list-style:none}
.expert__dado{
  padding:18px 24px;border-radius:14px;border:1px solid var(--borda);
  background:rgba(22,10,34,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  min-width:150px;
}
.expert__dado b{
  display:block;font-size:28px;font-weight:600;line-height:1.1;letter-spacing:-.02em;
  background:var(--rampa-texto);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.expert__dado span{font-size:14px;color:var(--texto-claro)}
/* o CTA desta seção acompanha a coluna, não a largura toda */
.expert__texto .cta{margin-inline:0}

/* ===================================================================
   SEÇÃO: OFERTA
   =================================================================== */
.oferta{position:relative}
/* O brilho roxo mudou de ::before para ::after porque o ::before passou a ser a
   grade, compartilhada com #problema e #aulas. Os dois convivem: a grade no
   ::before, o brilho por cima dela no ::after, e o conteúdo acima dos dois. */
.oferta::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(760px 420px at 50% 44%,rgba(104,51,220,.22),transparent 66%);
  pointer-events:none;
}
/* borda em gradiente: a rampa como moldura da caixa de preço */
.caixa{
  max-width:720px;margin:44px auto 0;padding:46px 40px;
  border:1px solid transparent;border-radius:26px;
  background:
    linear-gradient(var(--fundo-3),var(--fundo-3)) padding-box,
    var(--rampa) border-box;
  box-shadow:0 30px 90px rgba(0,0,0,.65);
  text-align:center;
}
.caixa__inclui{margin:0 0 30px;padding:0;list-style:none;display:grid;gap:13px;text-align:left}
.caixa__inclui li{display:flex;gap:13px;align-items:flex-start;font-size:15px}
.caixa__inclui svg{flex:none;margin-top:4px;color:#08D23E}
.preco{margin:0 0 6px;color:var(--texto);font-size:15px}
/* A linha do parcelamento inteira no verde do CTA — inclusive o "3x de", que
   antes era cinza. Amarra visualmente o preço ao botão logo abaixo. */
.preco__parcela{display:block;color:#59F370;font-size:clamp(34px,5vw,52px);font-weight:600;line-height:1.1;letter-spacing:-.03em}
/* "3x de" em 25px fixos, não em `em`: em medida relativa ele encolheria junto
   com o valor no celular (o clamp do parcelamento cai de 52px para 34px) e a
   proporção entre os dois mudaria de tela para tela. */
.preco__parcela small{font-size:25px;font-weight:500;color:inherit;letter-spacing:0}
.preco__avista{margin:8px 0 0;font-size:16px;color:var(--texto-claro)}
/* Selos de confiança no lugar da lista de formas de pagamento.
   `alt` descritivo e não vazio: a imagem carrega informação (compra segura,
   satisfação garantida, privacidade protegida), não é decoração — quem usa
   leitor de tela perderia o argumento se ficasse como `alt=""`.
   A opacidade abaixo de 1 é do desenho da arte, que já vem em cinza claro. */
.selos{
  display:block;width:100%;max-width:420px;height:auto;
  margin:26px auto 0;opacity:.72;
}

/* ===================================================================
   SEÇÃO: GARANTIA
   =================================================================== */
/* --- Variante CLARA ---
   A página inteira é escura; a garantia inverte para claro de propósito. Não sai
   do design system: o spe-t002 das referências é exatamente a base clara do mesmo
   sistema, com os mesmos acentos.
   Cada cor foi reconferida contra o fundo novo — o que passava no escuro não
   passa automaticamente no claro. */
.garantia{
  background:linear-gradient(45deg, var(--claro-1) 0%, var(--claro-2) 100%);
  color:var(--tinta-fraca);
}
.garantia h2{color:var(--tinta)}
/* A rampa cheia termina em amarelo, que sobre claro dá 2,85 — abaixo do mínimo
   de 3 para texto grande. Aqui ela para no magenta, que dá 4,25. */
.garantia .marca{background:var(--rampa-texto-clara);-webkit-background-clip:text;background-clip:text;color:transparent}
.garantia strong{color:var(--tinta)}
.garantia__caixa{
  max-width:820px;margin-inline:auto;padding:38px 34px;
  display:flex;gap:28px;align-items:center;
  border:1px solid rgba(11,2,18,.10);border-radius:var(--raio);
  background:#fff;
  box-shadow:0 20px 48px rgba(11,2,18,.10);
}

/* O selo é uma arte fechada: sai o círculo tingido que servia de moldura para o
   ícone antigo. `alt=""` porque o título e o texto ao lado já dizem "7 dias" —
   descrever a imagem faria o leitor de tela repetir a mesma informação. */
/* O selo é arte de LINHA BRANCA, desenhada para fundo escuro: sobre a seção clara
   ele simplesmente desapareceria. Invertido, as linhas viram tinta escura. */
.garantia__selo{flex:none;width:177px;height:auto;filter:invert(1)}
.garantia h2{font-size:clamp(22px,2.4vw,28px);margin-bottom:10px}
.garantia p{margin:0;font-size:15px}

/* ===================================================================
   SEÇÃO: FAQ
   =================================================================== */
.faq__lista{max-width:820px;margin:46px auto 0;display:grid;gap:14px}
.faq__item{border:1px solid var(--borda);border-radius:var(--raio);background:var(--fundo-2);overflow:hidden}
.faq__item summary{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:22px 26px;cursor:pointer;list-style:none;
  color:var(--branco);font-weight:500;font-size:17px;letter-spacing:-.01em;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary svg{flex:none;color:var(--magenta);transition:transform .26s ease}
.faq__item[open] summary svg{transform:rotate(45deg)}
.faq__item .faq__resposta{padding:0 26px 24px;margin:0;font-size:15px}

/* ===================================================================
   SEÇÃO: FOOTER
   =================================================================== */
.footer{padding:56px 0 40px;border-top:1px solid var(--borda);background:var(--fundo-2)}
.footer__logo{width:150px;margin:0 auto 22px}
.footer p{margin:0 0 10px;font-size:14px;color:var(--texto);text-align:center}
.footer a{color:var(--texto-claro);text-decoration:underline}
/* Seletor com o elemento junto (.footer p.footer__legal) de propósito: a regra
   `.footer p` acima tem especificidade 0,1,1 e venceria um `.footer__legal`
   sozinho (0,1,0) — o `margin:0 0 10px` dela anulava o `margin-inline:auto`
   daqui, e o bloco de 760px ficava encostado à esquerda, 198px fora do centro. */
/* Sem `opacity` aqui: o #828282 do sistema JÁ é o tom fraco, e 85% em cima dele
   compõe 4,11 contra o fundo do rodapé — abaixo dos 4,5 exigidos. Limpo, dá 5,22. */
.footer p.footer__legal{max-width:760px;margin-inline:auto;font-size:14px;line-height:1.75}

/* Movimento reduzido: quem pediu menos animação recebe a página parada */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal.preparado{transform:none;transition:none}
  .tarja__pista{animation:none}
  .sintoma:hover,.aula:hover,button.cta:hover,a.cta:hover,.header__cta:hover{transform:none}
}

/* Responsivo */
@media (max-width: 700px) {

  /* BASE — tipografia e respiro no celular */
  body{font-size:15px}
  section{padding:56px 0}
  .container{padding-inline:20px}
  h1{font-size:clamp(28px,7.8vw,36px)}
  h2{font-size:clamp(24px,6.6vw,30px)}
  h3{font-size:18px}
  p, li, .sub{font-size:15px}
  .centro-mob, .centro-mob h1, .centro-mob h2, .centro-mob p, .centro-mob .olho{text-align:center}
  .olho{font-size:14px;padding:7px 14px}

  /* CTA — centralizado com precisão e sem estourar a tela */
  button.cta, a.cta{
    width:100%;max-width:340px;
    padding:16px 24px;font-size:18px;
    margin:28px auto 0 auto;
  }

  /* HEADER — logo menor, o CTA vira rótulo curto para não quebrar a linha */
  .header{padding:10px 0}
  .header__logo{width:132px}
  /* o link do logo colapsava na altura da imagem (30px); o padding leva o alvo
     de toque a 44px sem empurrar a linha do cabeçalho, que tem folga de sobra */
  .header__grid > a{display:flex;align-items:center;min-height:44px}
  .header.fixo .header__logo{width:116px}
  .header__cta{padding:10px 18px;font-size:14px;min-height:44px}
  .header__cta span{display:none}

  /* HERO — a arte vai para o topo e o texto desce para baixo dela.
     O arquivo do celular é um RECORTE em volta da pessoa, não a arte 16:9
     reposicionada: esticada em `cover` numa tela de 390px, a arte larga deixaria
     só um pedaço do rosto em quadro. Com o recorte, `50% top` já enquadra certo.

     O véu vertical entra na MESMA pilha de backgrounds da arte, com altura
     `110vw` — que é exatamente a altura que o recorte (760x838) ganha ao ocupar
     100% da largura. Preso assim, ele termina de escurecer na borda de baixo da
     arte, e não numa porcentagem da seção: a altura da seção muda com o texto,
     e um stop em % dela deixaria o título em cima do rosto em telas estreitas. */
  .hero{
    padding:92px 0 46px;
    min-height:0;
    background-image:
      linear-gradient(180deg, rgba(11,2,18,0) 26%, rgba(11,2,18,.55) 53%, rgba(11,2,18,.93) 76%, var(--fundo) 92%),
      url("../img/hero-bg-mb-2.webp");
    background-position:50% top, 50% top;
    /* 116vw, e não os 110vw exatos da arte: com o valor exato sobrava UMA linha
       de arte crua na emenda (medida em 429px, rgb(0,13,38) entre dois #0B0212),
       porque o arredondamento do gradiente e o da imagem não caem no mesmo px.
       O véu passa do fim da arte e o excedente é #0B0212 sobre #0B0212. */
    background-size:100% 116vw, 100% auto;
    background-repeat:no-repeat, no-repeat;
  }
  /* no celular o ::before guarda só o brilho de marca; o véu subiu para a pilha */
  .hero::before{
    background:radial-gradient(520px 320px at 50% 16%, rgba(104,51,220,.24), transparent 66%);
  }
  /* o texto começa nos dois terços de baixo da arte, onde o véu já fechou */
  .hero__grid{grid-template-columns:1fr;gap:30px;text-align:center;padding-top:62vw}
  .hero__lead{margin-inline:auto}
  /* o documento exige CTA centralizado na versão responsiva */
  .hero__texto .cta{margin-inline:auto}

  /* TARJA ROLANTE — passo mais curto e texto menor */
  .tarja__item{padding:13px 20px;font-size:14px;gap:9px}
  .tarja__pista{animation-duration:26s}

  /* PROBLEMA — cartões empilhados */
  /* O ladrilho não precisa de tratamento próprio no celular: ele repete no mesmo
     tamanho e não deforma. Só a célula encolhe um pouco, para a grade não ficar
     grossa demais numa tela estreita. */
  .problema::before, .aulas::before, .oferta::before{background-size:52px 52px}
  .sintomas{grid-template-columns:1fr;gap:16px;margin-top:32px}
  .sintoma{padding:24px 22px}

  /* VIRADA — imagem acima do texto */
  .virada__grid{grid-template-columns:1fr;gap:30px;text-align:center}
  .virada__lista{text-align:left;margin-top:22px}

  /* AULAS — uma por linha */
  .aulas__lista{grid-template-columns:1fr;gap:14px;margin-top:32px}
  .aula{padding:22px 20px;gap:16px}
  .aula__num{width:42px;height:42px;font-size:16px}

  /* PARA QUEM — empilhado e centralizado */
  .publicos{grid-template-columns:1fr;gap:16px;margin-top:32px}
  .publico{padding:26px 22px;text-align:center}
  .publico__icone{margin-inline:auto}

  /* PROVAS — a faixa continua sangrando; só o esmaecimento das pontas encolhe,
     senão ele comeria metade de um cartão numa tela estreita */
  .prova__carrossel{
    margin-top:32px;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  }

  /* EXPERT — mesma lógica do site no celular: a arte vertical encosta na base
     e o padding inferior reserva a altura dela, para o texto nunca cair em cima
     da foto. O véu vira vertical, escuro em cima e transparente embaixo. */
  .expert{
    background:
      url("../img/expert-bg-mb.webp") 50% bottom / cover no-repeat,
      var(--fundo-2);
    padding:48px 0 430px;
  }
  .expert::before{
    background:linear-gradient(180deg, rgba(11,2,18,.92) 0%, rgba(11,2,18,.72) 42%, rgba(11,2,18,0) 72%);
  }
  .expert__texto{width:100%;max-width:100%;text-align:center}
  .expert__texto .cta{margin-inline:auto}
  .expert__dados{justify-content:center;gap:10px}
  .expert__dado{flex:1 1 150px;min-width:0;padding:16px 12px}
  .expert__dado b{font-size:24px}

  /* OFERTA — caixa mais estreita e lista alinhada à esquerda */
  .caixa{padding:32px 22px;margin-top:32px;border-radius:20px}
  .caixa__inclui li{font-size:15px}
  .selos{max-width:300px;margin-top:22px}

  /* GARANTIA — selo acima do texto */
  .garantia__caixa{flex-direction:column;text-align:center;gap:18px;padding:30px 22px}

  /* FAQ — pergunta com mais respiro para o toque */
  .faq__lista{margin-top:32px}
  .faq__item summary{padding:18px 20px;font-size:16px}
  .faq__item .faq__resposta{padding:0 20px 20px;font-size:15px}

  /* FOOTER */
  .footer{padding:44px 0 34px}
  /* Alvos de toque: medidos em 320px, os links do rodapé tinham 20px de altura e
     o logo 30px — abaixo dos 44px que o dedo precisa. O padding vertical resolve
     sem mexer no espaçamento visual, porque o `inline-block` já estava colapsado
     na altura da linha. */
  .footer a{display:inline-block;padding-block:12px}
  .footer p{margin-bottom:2px}
  .header__cta{min-height:44px}
  .footer p.footer__legal{font-size:14px;line-height:1.75}
}
/* Responsivo */

/* Faixa intermediária (tablet): o que não cabe em 3 colunas vai para 2 */
@media (min-width: 701px) and (max-width: 991px){
  /* HERO no tablet — empilhado, como no celular.
     Lado a lado aqui não fecha: `cover` numa caixa estreita e alta recorta
     justamente o lado ESQUERDO vazio da arte, que é onde o texto moraria, e
     sobra só a pessoa. Medido em 820px: o título passava por cima do rosto.
     Empilhado, a arte vira uma faixa de 450px no topo e o texto vem abaixo. */
  .hero{
    padding:104px 0 56px;
    min-height:0;
    display:block;
    background-image:
      /* fecha as bordas VERTICAIS da faixa: aqui a arte não ocupa a largura toda
         (450px de altura dão 408px de largura), então os dois lados dela ficavam
         como um retângulo azul recortado sobre o roxo da página */
      linear-gradient(90deg, var(--fundo) 0, transparent 16%, transparent 84%, var(--fundo) 100%),
      linear-gradient(180deg, rgba(11,2,18,0) 26%, rgba(11,2,18,.55) 53%, rgba(11,2,18,.93) 76%, var(--fundo) 92%),
      url("../img/hero-bg-mb-2.webp");
    background-position:50% top, 50% top, 50% top;
    /* o véu é 20px mais alto que a arte para não sobrar linha de emenda */
    background-size:412px 470px, 100% 470px, auto 450px;
    background-repeat:no-repeat, no-repeat, no-repeat;
  }
  .hero::before{background:radial-gradient(520px 320px at 50% 16%, rgba(104,51,220,.24), transparent 66%)}
  .hero__grid{padding-top:330px;text-align:center}
  .hero__lead{margin-inline:auto}
  .hero__texto, .hero__texto h1, .hero__texto p, .hero__texto .olho{text-align:center}
  /* o desktop zera a margem de início do CTA para alinhá-lo à esquerda; aqui a
     coluna voltou a ser centralizada, então a margem automática volta também */
  .hero__texto .cta{margin-inline:auto}

  .hero__grid,.virada__grid{grid-template-columns:1fr;gap:34px}
  /* entre 701 e 991 a coluna de texto ganha mais espaço sobre a arte */
  .expert__texto{width:64%;max-width:none}
  .sintomas,.publicos{grid-template-columns:repeat(2,1fr)}
  .aulas__lista{grid-template-columns:1fr}
}