/* ══════════════════════════════════════════════════════════════════
   LP MENTORIA GESTÃO CLÍNICA — Robson Lopes
   Layout fiel ao Figma "LP Mentoria" (Desktop 1440 / Mobile 390).
   Ponto de virada mobile ↔ desktop: 900px.
   ══════════════════════════════════════════════════════════════════ */

/* ─────────────────────── TOKENS ─────────────────────── */
:root {
  /* Cores */
  --preto:          #000214;
  --preto-puro:     #000;
  --escuro-azul:    #1d2f36;
  --claro:          #fafafa;
  --branco:         #fff;
  --texto-escuro:   #020202;
  --teal:           #1f595d;
  --cinza:          #888;
  --placeholder:    #d9d9d9;

  --verde-1:        #3ac24e;
  --verde-2:        #019417;
  --azul-1:         #6bdbe2;
  --azul-2:         #0bbed0;

  --grad-verde: linear-gradient(90deg, var(--verde-1), var(--verde-2));
  --grad-azul:  linear-gradient(90deg, var(--azul-1), var(--azul-2));

  /* Larguras de conteúdo (do Figma) */
  --container:        1192px;
  --container-fino:    990px;
  --padding-lateral:    24px;

  /* Tipografia — escalam entre mobile e desktop */
  --t-40: clamp(1.5rem,   3.4vw, 2.5rem);     /* títulos de seção      */
  --t-45: clamp(1.75rem,  3.8vw, 2.8125rem);  /* títulos duplos        */
  --t-50: clamp(1.75rem,  4.2vw, 3.125rem);   /* título do card preço  */
  --t-70: clamp(2.5rem,   5.8vw, 4.375rem);   /* "Investimento"        */
  --t-120: clamp(3.75rem, 9vw,   7.5rem);     /* valor R$              */
  --t-26: clamp(1rem,     1.9vw, 1.625rem);
  --t-24: clamp(0.9375rem, 1.75vw, 1.5rem);
  --t-22: clamp(0.9375rem, 1.6vw, 1.375rem);
  --t-20: clamp(0.875rem,  1.5vw, 1.25rem);
  --t-18: clamp(0.875rem,  1.35vw, 1.125rem);

  --raio-card: 50px;
  --raio-item: 20px;
}

/* ─────────────────────── RESET ─────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--claro);
  color: var(--texto-escuro);
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
strong, b { font-weight: 900; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─────────────────── UTILITÁRIOS ─────────────────── */

/* Texto com degradê azul */
.grad-azul {
  background: var(--grad-azul);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Painel escuro texturizado — reaproveitado em 5 seções.
   No Figma esses painéis usam a imagem de fundo GIRADA -90° e esticada
   (ex.: caixa 1819x1444 com a imagem a 189,65% x 103,2%). Por isso as ondas
   correm na vertical e ficam mais finas que no Hero. Em vez de girar via CSS
   (que quebraria o mix-blend-mode dos filhos), a imagem já vem pré-girada em
   fundo-vertical.webp e as porcentagens abaixo reproduzem a escala do Figma.
   NÃO usar `cover` aqui: num painel alto ele estoura a escala horizontal
   (~2,4x) e as linhas ficam grossas e grosseiras. */
.panel {
  position: relative;
  isolation: isolate;
  --fundo-img: url(../images/fundo-vertical.webp);
  --fundo-tam: 103.2% 189.65%;
}
.panel::before,
.panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.panel::before {
  z-index: -2;
  background: var(--fundo-img) center / var(--fundo-tam) no-repeat;
}
.panel::after {
  z-index: -1;
  background: rgba(0, 0, 0, 0.8);
}

/* Figma: caixa 849x820 / 1447x919 com a imagem a 183,77% x 100% */
.quem-e,
.card-preco { --fundo-tam: 100% 183.8%; }

/* FAQ e Sobre são os únicos painéis SEM rotação no Figma (object-cover puro) */
.faq,
.sobre__card {
  --fundo-img: url(../images/hero/fundo.webp);
  --fundo-tam: cover;
}

/* ─────────────────── BOTÃO CTA ─────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7.5px;
  padding: 10px 10px 10px 26px;
  border-radius: 200px;
  background: var(--grad-verde);
  color: var(--branco);
  font-weight: 900;
  font-size: var(--t-20);
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  will-change: transform;
}
.btn__icon {
  width: 51px;
  height: 50px;
  flex-shrink: 0;
  transition: transform .25s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(58, 194, 78, .38);
  filter: brightness(1.06);
}
.btn:hover .btn__icon { transform: translate(3px, -3px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--azul-1); outline-offset: 3px; }

.btn--lg {
  gap: 9px;
  padding: 12px 12px 12px 32px;
  font-size: clamp(1rem, 1.8vw, 1.518rem);
}
.btn--lg .btn__icon { width: 62px; height: 61px; }

/* Pulso sutil e contínuo nos botões dos cards de preço */
.card-preco .btn { animation: pulso 2.8s ease-in-out infinite; }
.card-preco .btn:hover { animation-play-state: paused; }
@keyframes pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(58, 194, 78, .5); }
  50%      { box-shadow: 0 0 0 18px rgba(58, 194, 78, 0); }
}

/* ─────────────── TÍTULO DUPLO (branco + degradê) ─────────────── */
/* width:fit-content é o que mantém o brilho ancorado ao texto: sem isso o h2
   ocupa a largura toda do container e a % do brilho vira largura de seção. */
.titulo-duplo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  margin-inline: auto;
  font-size: var(--t-45);
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1.05;
  color: var(--branco);
  text-align: center;
}
.titulo-duplo__linha2 { line-height: 1.15; }
.titulo-duplo--esq { align-items: flex-start; text-align: left; margin-inline: 0; }
/* Figma: elipse de 282x47 atrás de um título de 316 de largura — o brilho
   fica contido atrás do texto, não vaza para as laterais da seção. */
.titulo-duplo__brilho {
  position: absolute;
  top: 55%;
  left: 50%;
  width: 89%;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
}
.titulo-duplo--glow { isolation: isolate; }

/* ═══════════════ PRIMEIRA DOBRA (HERO + DESTAQUES) ═══════════════ */
/* svh (small viewport height) evita o salto causado pela barra do navegador
   móvel — em telas sem essa barra o valor é igual a vh. */
.primeira-dobra {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
.primeira-dobra .hero { flex: 1 1 auto; }
.primeira-dobra .destaques { flex: 0 0 auto; }

/* ═══════════════════════════ HERO ═══════════════════════════ */
.hero {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--preto);
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: url(../images/hero/fundo.webp) center / cover no-repeat;
}
/* Recria o grupo "Robson" do Figma (1608x924 dentro de um canvas de 1440x845).
   A altura é % do Hero e o aspect-ratio garante a largura: assim o conjunto
   inteiro (foto + brilho + sombra) escala junto quando a janela é mais baixa.
   Ancorado pelo centro (720+285=1005 no Figma) para a foto não migrar ao encolher. */
.hero__stage {
  position: absolute;
  top: 45.3%;                 /* centro do grupo: 383/845 */
  left: calc(50% + 285px);    /* centro do grupo: 1005 - 720 */
  transform: translate(-50%, -50%);
  height: 109.35%;            /* 924/845 */
  aspect-ratio: 1608 / 924;
  z-index: -2;
  pointer-events: none;
}
.hero__glow {
  position: absolute;
  left: 4.04%;                /* 65/1608  */
  top: 2.27%;                 /* 21/924   */
  width: 95.27%;              /* 1532/1608 */
  height: 97.62%;             /* 902/924  */
  background: url(../images/hero/brilho.webp) center / 100% 100% no-repeat;
  mix-blend-mode: screen;
}
.hero__scrim {
  position: absolute;
  left: -4.04%;               /* -65/1608 */
  top: 44.7%;                 /* 413/924  */
  width: 51.93%;              /* 835/1608 */
  height: 38.74%;             /* 358/924  */
  background: url(../images/hero/sombra-texto.svg) center / 100% 100% no-repeat;
  mix-blend-mode: multiply;
}
.hero__photo {
  position: absolute;
  left: 33.52%;               /* 539/1608 */
  top: 12.12%;                /* 112/924  */
  width: 36.44%;              /* 586/1608 */
  height: 87.88%;             /* 812/924  */
  object-fit: contain;
  object-position: top center;
}
.hero__shadow {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 228px;
  z-index: -1;
  background: linear-gradient(180deg, rgba(102,102,102,0), var(--preto));
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* Os valores em vh fazem o conteúdo encolher junto com a janela, para que
   Hero + Destaques sempre caibam na primeira dobra. Os limites do clamp()
   preservam o tamanho do Figma em telas altas e evitam texto pequeno demais
   nas baixas. */
.hero__inner {
  position: relative;
  --logo-larg: clamp(260px, 46vh, 503px);
  max-width: var(--container-fino);
  margin: 0 auto;
  padding: clamp(18px, 4.5vh, 76px) var(--padding-lateral) clamp(14px, 2.6vh, 32px);
  min-height: 0;
}
/* O arquivo do logo tem 2,87% de margem transparente à esquerda. Sem compensar,
   o desenho nasce ~13px à direita do texto. A margem negativa alinha a arte
   (não a caixa) com a coluna de texto. Não usar transform aqui: viraria
   contexto de empilhamento e quebraria o mix-blend-mode do brilho. */
.hero__logo {
  position: relative;
  width: var(--logo-larg);
  max-width: 100%;
  margin-left: calc(var(--logo-larg) * -0.0287);
}
.hero__logo-img { width: 100%; height: auto; }
.hero__logo-glow {
  position: absolute;
  left: 40%;
  top: -5%;
  width: 46%;
  height: auto;
  mix-blend-mode: screen;
  pointer-events: none;
}
.hero__copy { max-width: 480px; margin-top: clamp(4px, 1vh, 12px); }
.hero__headline {
  font-size: min(var(--t-18), 2.1vh);
  font-weight: 900;
  line-height: 1.35;
  color: var(--branco);
}
.hero__headline b { font-weight: 900; }
.hero__text {
  margin-top: clamp(10px, 2.6vh, 30px);
  font-size: min(var(--t-18), 2.1vh);
  font-weight: 400;
  line-height: 1.55;
  color: var(--branco);
}
.hero__inner .btn { margin-top: clamp(14px, 3.4vh, 40px); }
.hero__sub {
  max-width: 360px;
  margin-top: clamp(12px, 3.4vh, 40px);
  font-size: min(var(--t-18), 2vh);
  line-height: 1.45;
  color: var(--branco);
}

/* ═════════════════════════ DESTAQUES ═════════════════════════ */
.destaques { background: var(--escuro-azul); }
.destaques__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 1140px;
  min-height: 150px;
  margin: 0 auto;
  padding: 24px var(--padding-lateral);
}
.destaque { display: flex; align-items: center; gap: 15px; }
.destaque__icon { width: 50px; height: 50px; flex-shrink: 0; }
.destaque__icon--lg { width: 59px; height: 59px; }
.destaque__text {
  font-size: var(--t-20);
  font-weight: 300;
  line-height: 1.2;
  color: var(--branco);
}

/* ═══════════════════════════ VÍDEO ═══════════════════════════ */
.video {
  background: var(--claro);
  padding: 95px var(--padding-lateral);
}
.video__player {
  position: relative;
  width: 481.5px;
  max-width: 100%;
  aspect-ratio: 481.5 / 856;
  margin: 0 auto;
  border-radius: var(--raio-card);
  background: var(--placeholder);
  overflow: hidden;
}
.video__player iframe,
.video__player video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 151px;
  height: 151px;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.video__play img { width: 100%; height: 100%; }
.video__play:hover { transform: translate(-50%, -50%) scale(1.09); }
.video__play:focus-visible { outline: 3px solid var(--azul-2); outline-offset: 6px; border-radius: 50%; }

/* ═══════════════════════════ INTRO ═══════════════════════════ */
.intro { background: var(--claro); padding: 70px var(--padding-lateral); }
.intro__inner { max-width: var(--container-fino); margin: 0 auto; text-align: center; }
.intro__title {
  max-width: 786px;
  margin: 0 auto;
  font-size: var(--t-40);
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1.2;
}
.intro__body {
  display: flex;
  flex-direction: column;
  gap: 35px;
  margin-top: 60px;
  font-size: var(--t-22);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: .03em;
}

/* ═══════════════════════════ SOBRE ═══════════════════════════ */
.sobre { background: var(--claro); padding: 40px var(--padding-lateral) 66px; }
.sobre__card {
  display: grid;
  grid-template-columns: minmax(0, 385px) 483px;
  grid-template-areas:
    "titulo foto"
    "texto  foto"
    "botao  foto";
  align-content: center;
  justify-content: space-between;
  column-gap: 40px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 100px;
  border-radius: var(--raio-card);
  overflow: hidden;
}
.sobre__card::after { background: rgba(0, 0, 0, 0.7); }
.sobre__title {
  grid-area: titulo;
  max-width: 382px;
  font-size: var(--t-40);
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1.2;
  color: var(--branco);
}
.sobre__text {
  grid-area: texto;
  margin-top: 32px;
  font-size: var(--t-18);
  line-height: 1.78;
  letter-spacing: .03em;
  font-weight: 400;
  color: var(--branco);
}
.sobre__btn { grid-area: botao; justify-self: start; margin-top: 44px; }
.sobre__photo { grid-area: foto; align-self: center; width: 483px; height: auto; }

/* ═════════════ BLOCO ESCURO: RECEBER + 8 FRENTES ═════════════ */
/* overflow:hidden segura o brilho do "vai receber", que é bem mais largo que a
   tela de propósito — sem isso ele cria barra de rolagem horizontal. */
.bloco-escuro { padding: 100px var(--padding-lateral); overflow: hidden; }

/* ─────────────── O QUE VOCÊ VAI RECEBER ─────────────── */
.receber { max-width: var(--container); margin: 0 auto; }
.receber__carrossel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 60px;
}
.receber__viewport { position: relative; flex: 1; overflow: hidden; z-index: 1; }
/* O SVG tem viewBox 1788x844 com a elipse ocupando 1188x244 no centro — o resto
   é a área do desfoque. Manter essa proporção deixa o brilho respirar como no Figma. */
.receber__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  max-width: none;
  aspect-ratio: 1788 / 844;
  transform: translate(-50%, -50%);
  z-index: 0;
  opacity: .85;
  pointer-events: none;
}
.receber__track {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.etapa {
  position: relative;
  padding: 30px;
  min-height: 312px;
  border-radius: 30px;
  background: url(../images/receber/card-shape.svg) center / 100% 100% no-repeat;
  transition: transform .35s ease;
}
.etapa:hover { transform: translateY(-8px); }
.etapa__icon { position: relative; width: 70px; height: 70px; }
.etapa__icon-bg { position: absolute; inset: 0; width: 70px; height: 70px; }
.etapa__icon-glyph {
  position: absolute;
  top: 10.5px;
  left: 10.5px;
  width: 49px;
  height: 49px;
}
.etapa__titulo {
  margin-top: 20px;
  font-size: var(--t-22);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--teal);
}
.etapa__texto {
  margin-top: 20px;
  font-size: var(--t-18);
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--cinza);
}
.carrossel__seta {
  display: none;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  font-size: 28px;
  color: var(--branco);
  opacity: .85;
  transition: opacity .2s ease, transform .2s ease;
}
.carrossel__seta:hover { opacity: 1; transform: scale(1.15); }
.carrossel__seta:disabled { opacity: .25; cursor: default; transform: none; }
.receber__pontos { display: none; }
.receber__rodape {
  margin-top: 62px;
  font-size: var(--t-20);
  line-height: 1.5;
  letter-spacing: .01em;
  text-align: center;
  color: var(--branco);
}
.receber__rodape strong { font-weight: 700; }

/* ─────────────── AS 8 FRENTES ─────────────── */
.frentes { max-width: var(--container); margin: 155px auto 0; }
.frentes__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px 28px;
  margin-top: 68px;
}
.frente {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 148px;
  padding: 24px 47px;
  border-radius: var(--raio-item);
  background: rgba(255, 255, 255, .1);
  border: .5px solid rgba(255, 255, 255, .5);
  backdrop-filter: blur(2px);
  transition: background .3s ease, transform .3s ease, border-color .3s ease;
}
.frente:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .75);
  transform: translateY(-4px);
}
.frente__icon { width: 50px; height: 50px; flex-shrink: 0; margin-right: 11px; }
.frente__texto {
  font-size: var(--t-22);
  line-height: 1.36;
  letter-spacing: .01em;
  color: var(--branco);
}
.frentes__cta { margin-top: 80px; text-align: center; }

/* ═══════════════════════ PARA QUEM É ═══════════════════════ */
.para-quem {
  background: var(--claro);
  padding: 100px var(--padding-lateral);
}
.para-quem__bloco { max-width: 786px; margin: 0 auto; }
.para-quem__bloco + .para-quem__bloco { margin-top: 160px; }
.para-quem__titulo {
  font-size: var(--t-40);
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1.2;
  text-align: center;
}
.lista-check { margin-top: 108px; display: flex; flex-direction: column; gap: 50px; }
.lista-check li {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding-left: 47px;
}
.lista-check img { width: 50px; height: 41px; flex-shrink: 0; margin-top: 4px; }
.lista-check--x img { width: 41px; height: 41px; }
.lista-check--x li { gap: 37px; }
.lista-check span {
  font-size: var(--t-26);
  font-weight: 500;
  line-height: 1.23;
  letter-spacing: .01em;
}

/* ═══════════════════════ QUEM É ROBSON ═══════════════════════ */
.quem-e { padding: 130px var(--padding-lateral); }
.quem-e__inner {
  display: grid;
  grid-template-columns: 1fr 476px;
  gap: 60px;
  max-width: var(--container);
  margin: 0 auto;
}
.quem-e__cabecalho { display: flex; align-items: center; gap: 30px; }
.quem-e__cabecalho .titulo-duplo { flex-shrink: 0; }
.quem-e__sub {
  max-width: 200px;
  padding-left: 30px;
  border-left: 1px solid rgba(255, 255, 255, .45);
  font-size: var(--t-26);
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--branco);
}
.quem-e__body {
  display: flex;
  flex-direction: column;
  gap: 34px;
  max-width: 581px;
  margin-top: 60px;
  font-size: var(--t-20);
  line-height: 1.7;
  letter-spacing: .01em;
  color: var(--branco);
}
.quem-e__fotos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  align-content: start;
}
/* object-fit:cover preserva a proporção original e recorta o excedente — nunca
   estica. (No Figma, os preenchimentos de "equipe-1" e "vie" estão em modo
   esticar e achatam a foto ~21%; aqui isso é corrigido de propósito.)
   O object-position aproxima o enquadramento do que o Figma mostra. */
.quem-e__fotos img {
  width: 100%;
  height: 355px;
  border-radius: 30px;
  object-fit: cover;
  transition: transform .4s ease;
}
.quem-e__fotos img:nth-child(1) { object-position: 50% 72%; } /* Robson na mesa  */
.quem-e__fotos img:nth-child(2) { object-position: 58% 50%; } /* rosto à direita */
.quem-e__fotos img:nth-child(3) { object-position: 45% 52%; } /* equipe          */
.quem-e__fotos img:nth-child(4) { object-position: 50% 50%; } /* fachada         */
.quem-e__fotos img:hover { transform: scale(1.03); }

/* ═══════════════════════ INVESTIMENTO ═══════════════════════ */
.investimento { background: var(--claro); padding: 77px var(--padding-lateral) 100px; }
.investimento__topo { text-align: center; }
.investimento__titulo {
  font-size: var(--t-70);
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1.1;
}
.investimento__sub {
  margin-top: 24px;
  font-size: var(--t-22);
  letter-spacing: .01em;
}
.investimento__inner {
  display: grid;
  grid-template-columns: 1fr 483px;
  align-items: center;
  gap: 60px;
  max-width: var(--container);
  margin: 60px auto 0;
}
.investimento__texto {
  display: flex;
  flex-direction: column;
  gap: 38px;
  max-width: 590px;
  font-size: var(--t-24);
  line-height: 1.58;
  letter-spacing: .02em;
}
.investimento__card {
  position: relative;
  width: 483px;
  height: 650px;
  justify-self: end;
}
.investimento__card-fundo {
  position: absolute;
  top: 82px;
  left: 0;
  width: 483px;
  height: 564px;
  border-radius: 31px;
  overflow: hidden;
}
.investimento__card-glow {
  position: absolute;
  top: -134px;
  left: -315px;
  width: 1190px;
  height: 701px;
  background: url(../images/hero/brilho.webp) center / contain no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
}
.investimento__card-sombra {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 242px;
  background: linear-gradient(180deg, rgba(102,102,102,0), var(--preto));
  mix-blend-mode: multiply;
  pointer-events: none;
}
.investimento__card-foto {
  position: absolute;
  left: 8px;
  top: 0;
  width: 467px;
  height: 647px;
  object-fit: contain;
  z-index: 1;
}

/* ═══════════════════════ CARD DE PREÇO ═══════════════════════ */
.preco { background: var(--branco); padding: 100px var(--padding-lateral); }
/* Card ~12% mais compacto que o Figma, a pedido: menos respiro interno e
   tipografia um pouco menor, mantendo as proporções entre os elementos. */
.card-preco {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 62px 52px 68px;
  border-radius: var(--raio-card);
  text-align: center;
}
.card-preco__titulo {
  max-width: 580px;
  font-size: clamp(1.6rem, 3.5vw, 2.625rem);
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1.2;
  color: var(--branco);
}
.card-preco__valor { margin-top: 34px; }
.card-preco__parcela,
.card-preco__avista {
  font-size: clamp(0.95rem, 1.7vw, 1.375rem);
  letter-spacing: .01em;
  color: var(--branco);
}
.card-preco__numero {
  font-size: clamp(3.25rem, 7.6vw, 6.25rem);
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1.1;
  margin: 6px 0 12px;
}
.card-preco__pagamento {
  width: 290px;
  max-width: 100%;
  height: auto;
  margin-top: 36px;
  mix-blend-mode: screen;
}
.card-preco .btn { margin-top: 36px; }

/* ═══════════════════════════ FAQ ═══════════════════════════ */
.faq { padding: 100px var(--padding-lateral); }
.faq__titulo {
  max-width: 786px;
  margin: 0 auto;
  font-size: var(--t-40);
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1.2;
  text-align: center;
  color: var(--branco);
}
.faq__lista {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: var(--container-fino);
  margin: 108px auto 0;
}
.faq__item {
  border-radius: var(--raio-item);
  background: var(--branco);
  overflow: hidden;
  transition: box-shadow .3s ease;
}
.faq__item[open] { box-shadow: 0 18px 44px rgba(0, 0, 0, .28); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 80px;
  padding: 28px;
  font-size: var(--t-20);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.3;
  color: var(--preto-puro);
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline: 3px solid var(--azul-2); outline-offset: -3px; }
.faq__sinal {
  flex-shrink: 0;
  width: 24px;
  font-size: var(--t-20);
  font-weight: 900;
  text-align: center;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.faq__item[open] .faq__sinal { transform: rotate(135deg); }
.faq__resposta { padding: 0 28px 28px; }
.faq__resposta p {
  font-size: var(--t-18);
  font-weight: 400;
  line-height: 1.7;
  color: #3a3a3a;
}

/* ═══════════════════════ CTA FINAL ═══════════════════════ */
.cta-final { background: var(--claro); padding: 100px var(--padding-lateral); }
.cta-final__titulo {
  max-width: 620px;
  margin: 0 auto;
  font-size: var(--t-40);
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1.2;
  text-align: center;
}
.cta-final__texto {
  max-width: 836px;
  margin: 68px auto 0;
  font-size: var(--t-24);
  line-height: 1.58;
  letter-spacing: .02em;
  text-align: center;
}
.cta-final .card-preco { margin-top: 100px; }

/* ═══════════════════════════ RODAPÉ ═══════════════════════════ */
.rodape {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px var(--padding-lateral);
  background: var(--preto-puro);
}
.rodape p {
  font-size: var(--t-18);
  font-weight: 200;
  line-height: 1.4;
  text-align: center;
  color: var(--branco);
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE — abaixo de 900px
   Segue os frames Mobile do Figma (390px).
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  :root { --padding-lateral: 20px; --raio-card: 30px; }

  /* ── PRIMEIRA DOBRA: no mobile só o Hero ocupa a dobra ──
     Os Destaques saem da dobra e entram no scroll. */
  .primeira-dobra { display: block; min-height: 0; }

  /* ── HERO: empilhado — logo, texto, botão e só então a foto ──
     O .hero__stage vem antes no HTML (para o desktop, onde é absoluto).
     No mobile ele entra no fluxo, então o flex + order recolocam a foto
     depois do conteúdo, como no Figma. */
  .hero {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
  }
  .hero__inner { order: 1; flex: 0 0 auto; }
  /* flex:1 faz o palco tomar o espaço que sobra; a foto entra pelo topo dele
     e o que passar da dobra é cortado pelo overflow do Hero — como no Figma,
     onde a foto também é cortada embaixo. */
  .hero__stage {
    order: 2;
    flex: 1 1 auto;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    /* Sobe a foto até a cabeça cruzar ~10px a borda inferior do botão, sem
       chegar no texto dele (o CTA não pode perder legibilidade). Em vw porque
       a foto também escala em vw — a sobreposição fica igual em qualquer tela.
       z-index:auto (em vez do -2 do desktop) deixa a cabeça passar por cima. */
    margin-top: -5.9vw;
    z-index: auto;
  }
  .hero__photo { z-index: 2; }
  .hero__glow {
    left: -36%;
    top: -12%;
    width: 172%;
    height: 118%;
    background-size: 100% 100%;
  }
  .hero__scrim {
    left: 47.4%;
    top: 52%;
    width: 71.5%;
    height: 52%;
  }
  .hero__photo {
    left: 12.8%;
    top: 0;
    width: 74.6%;
    height: auto;
  }
  .hero__inner {
    position: static;
    min-height: 0;
    padding: 22px var(--padding-lateral) 0;
  }
  /* Logo maior: é o primeiro peso da hierarquia no mobile */
  .hero__inner { --logo-larg: min(330px, 88%); }
  .hero__logo { width: var(--logo-larg); margin-left: calc(var(--logo-larg) * -0.0287); }
  .hero__copy { margin-top: 22px; max-width: 100%; }
  .hero__headline { font-size: clamp(14px, 4.1vw, 17px); }
  /* Quebra pedida: "...Não foi sorte." / "Foi gestão." */
  .hero__headline b { display: block; }
  .hero__text { margin-top: 14px; font-size: clamp(13px, 3.7vw, 15px); }
  .hero__inner .btn { margin-top: 22px; }
  /* A legenda sai do fluxo e vai sobre a foto, no canto inferior direito */
  .hero__sub {
    position: absolute;
    right: 5.6vw;
    bottom: 6.9vw;
    z-index: 2;
    width: 31.3vw;
    max-width: none;
    margin: 0;
    font-size: clamp(9px, 2.9vw, 13px);
    line-height: 1.35;
  }
  .hero__shadow { height: 120px; }

  /* ── DESTAQUES: viram carrossel automático ──
     Os 3 ficam empilhados no mesmo lugar; o JS alterna a classe .ativo. */
  .destaques__inner {
    position: relative;
    justify-content: center;
    min-height: 114px;
  }
  .destaque {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(100% - 2 * var(--padding-lateral));
    justify-content: center;
    opacity: 0;
    transform: translate(-50%, calc(-50% + 14px));
    transition: opacity .55s ease, transform .55s ease;
    pointer-events: none;
  }
  .destaque.ativo {
    opacity: 1;
    transform: translate(-50%, -50%);
    pointer-events: auto;
  }
  /* Sem JS, o primeiro fica visível assim mesmo */
  .destaques__inner:not(.js-carrossel) .destaque:first-child {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  .destaque__text { max-width: 230px; }

  /* ── VÍDEO ── */
  .video { padding: 50px var(--padding-lateral); }
  .video__player { width: 312px; }
  .video__play { width: 98px; height: 98px; }

  /* ── INTRO ── */
  .intro { padding: 50px var(--padding-lateral); }
  .intro__body { gap: 22px; margin-top: 30px; }

  /* ── SOBRE: título em cima, foto à direita do texto e alinhada por baixo ── */
  .sobre { padding: 25px var(--padding-lateral); }
  .sobre__card {
    grid-template-columns: minmax(0, 1fr) 112px;
    grid-template-areas:
      "titulo titulo"
      "texto  foto"
      "botao  botao";
    column-gap: 12px;
    padding: 28px 22px 32px;
  }
  .sobre__title { max-width: 100%; }
  /* align-self:end alinha a base da foto com a base do texto */
  .sobre__photo { width: 112px; align-self: end; }
  .sobre__text { margin-top: 20px; }
  .sobre__btn { justify-self: center; margin-top: 28px; }

  /* ── BLOCO ESCURO ── */
  /* No mobile o Figma comprime a imagem pela metade na horizontal
     (caixa 1764x389 com a imagem a 206,69% x 103,2%): as linhas quase
     somem nas 8 frentes e aparecem mais no "O que você vai receber". */
  .bloco-escuro {
    padding: 45px var(--padding-lateral);
    --fundo-tam: 103.1% 206.7%;
  }
  .quem-e,
  .card-preco { --fundo-tam: 103.1% 190%; }

  /* ── RECEBER: vira carrossel de 1 card por vez ── */
  .receber__carrossel { margin-top: 34px; gap: 4px; }
  .carrossel__seta { display: block; }
  .receber__track {
    grid-template-columns: repeat(4, 100%);
    gap: 0;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
  }
  .etapa {
    min-height: 0;
    margin: 0 8px;
    padding: 26px;
  }
  .receber__glow { width: 260%; }
  .receber__pontos {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
  }
  .receber__ponto {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .32);
    transition: background .3s ease, transform .3s ease;
  }
  .receber__ponto[aria-selected="true"] {
    background: var(--azul-1);
    transform: scale(1.3);
  }
  .receber__rodape { margin-top: 30px; text-align: center; }

  /* ── 8 FRENTES: coluna única ── */
  .frentes { margin-top: 70px; }
  .frentes__grid { grid-template-columns: 1fr; gap: 14px; margin-top: 34px; }
  .frente { min-height: 91px; padding: 16px 28px; gap: 8px; }
  .frente__icon { width: 31px; height: 31px; margin-right: 8px; }
  .frentes__cta { margin-top: 40px; }

  /* ── PARA QUEM É ── */
  .para-quem { padding: 50px var(--padding-lateral); }
  .para-quem__bloco + .para-quem__bloco { margin-top: 60px; }
  .lista-check { margin-top: 34px; gap: 24px; }
  .lista-check li,
  .lista-check--x li { gap: 14px; padding-left: 0; }
  .lista-check img { width: 32px; height: 26px; margin-top: 2px; }
  .lista-check--x img { width: 26px; height: 26px; }

  /* ── QUEM É ROBSON ── */
  .quem-e { padding: 55px var(--padding-lateral); }
  .quem-e__inner { grid-template-columns: 1fr; gap: 40px; }
  .quem-e__cabecalho { gap: 16px; }
  .quem-e__sub { padding-left: 16px; font-size: 14px; max-width: 150px; }
  .quem-e__body { margin-top: 28px; gap: 20px; }
  .quem-e__fotos { gap: 12px; }
  .quem-e__fotos img { height: 220px; border-radius: 20px; }

  /* ── INVESTIMENTO ── */
  .investimento { padding: 50px var(--padding-lateral); }
  .investimento__inner { grid-template-columns: 1fr; gap: 30px; margin-top: 36px; }
  .investimento__texto { gap: 22px; }
  .investimento__card {
    width: 100%;
    max-width: 340px;
    height: auto;
    aspect-ratio: 483 / 650;
    justify-self: center;
  }
  .investimento__card-fundo {
    top: 12.6%;
    width: 100%;
    height: 86.8%;
    border-radius: 22px;
  }
  .investimento__card-glow { top: -20%; left: -65%; width: 246%; height: 108%; }
  .investimento__card-sombra { height: 43%; }
  .investimento__card-foto {
    left: 1.7%;
    width: 96.6%;
    height: 99.5%;
  }

  /* ── PREÇO ── */
  .preco { padding: 50px var(--padding-lateral); }
  .card-preco { padding: 40px 24px 46px; }
  .card-preco__valor { margin-top: 28px; }
  .card-preco__pagamento { width: 240px; margin-top: 28px; }
  .card-preco .btn { margin-top: 30px; }

  /* ── FAQ ── */
  .faq { padding: 55px var(--padding-lateral); }
  .faq__lista { gap: 14px; margin-top: 34px; }
  .faq__item summary { min-height: 0; padding: 20px; gap: 14px; }
  .faq__resposta { padding: 0 20px 20px; }

  /* ── CTA FINAL ── */
  .cta-final { padding: 55px var(--padding-lateral); }
  .cta-final__texto { margin-top: 26px; }
  .cta-final .card-preco { margin-top: 40px; }
}

/* Telas bem estreitas */
@media (max-width: 400px) {
  .btn { padding: 9px 9px 9px 18px; font-size: 13px; }
  .btn__icon { width: 38px; height: 38px; }
}

/* ─────────── Estados iniciais das animações ───────────
   Só escondem quando o JS confirma que vai animar (evita
   texto invisível se o GSAP não carregar). */
.js-anim [data-reveal],
.js-anim [data-reveal-stagger] {
  opacity: 0;
  will-change: transform, opacity;
}
/* O brilho do logo entra depois dele (ver js/main.js) */
.js-anim [data-brilho-logo] { opacity: 0; }