/* =========================================================================
   Método Respira — mobile-first: as regras base assumem tela de celular;
   telas maiores (tablet/desktop) são "ampliadas" via @media(min-width:...).
   ========================================================================= */
:root{
  --navy-deep: oklch(18% .04 250); --navy: oklch(22% .05 250); --card: oklch(24% .05 250);
  --cream: oklch(94% .03 85); --cream-dim: oklch(82% .03 85);
  --sky: oklch(82% .07 235); --sky-bright: oklch(92% .05 220);
  --border: oklch(94% .03 85 / .15); --border-strong: oklch(82% .07 235 / .35);
  --danger:#e05a4a;
  --display:"Poppins", ui-sans-serif, system-ui, sans-serif; --sans:"Inter", ui-sans-serif, system-ui, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans); color:var(--cream); background:var(--navy-deep); line-height:1.6; overflow-x:hidden; -webkit-tap-highlight-color:transparent;}
button, .btn, .quiz-option, .quiz-back, .quiz-close, a{touch-action:manipulation;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{font-family:var(--display); font-weight:800; letter-spacing:-0.01em; color:var(--cream);}
.center{text-align:center;}
.kicker{font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--cream-dim); display:inline-flex; align-items:center; gap:8px;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--sans); font-weight:600; font-size:16px; padding:17px 28px; min-height:54px; border-radius:999px; cursor:pointer; border:none; position:relative; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease; width:100%;}
.btn-sky{background:linear-gradient(120deg, var(--sky), var(--sky-bright)); color:var(--navy-deep); box-shadow:0 10px 30px oklch(82% .07 235 / .3);}
.btn-sky:hover{transform:translateY(-2px); box-shadow:0 16px 36px oklch(82% .07 235 / .4);}
.btn-sky:active{transform:translateY(0) scale(.98);}
.btn:disabled{opacity:.65; cursor:not-allowed; transform:none;}
#progress{position:fixed; top:0; left:0; height:3px; background:linear-gradient(90deg, var(--sky), var(--sky-bright)); width:0%; z-index:1000;}

/* header */
.site-header{padding:20px 16px 0; display:flex; align-items:center; justify-content:space-between; max-width:1080px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:10px; color:var(--cream);}
.brand-name{font-family:var(--display); font-weight:700; letter-spacing:.02em; font-size:13px;}
.brand-name em{font-style:normal; color:var(--sky);}
.header-kicker{display:none;}

/* hero */
.hero{padding:24px 16px 56px; position:relative;}
.hero-inner{position:relative; z-index:2; max-width:640px; margin:0 auto; text-align:center;}
.hero h1{font-size:clamp(26px,7vw,44px); line-height:1.15; margin:18px 0 16px;}
.hero h1 em{font-style:normal; color:var(--sky);}
.hero p.lead{color:var(--cream-dim); font-size:15.5px; max-width:520px; margin:0 auto 20px;}
.hero p.note{color:oklch(82% .03 85 / .8); font-size:13.5px; max-width:460px; margin:0 auto 26px; border-left:2px solid oklch(82% .07 235 / .4); padding-left:14px; text-align:left;}

/* video (VTurb SmartPlayer) */
.video-frame{
  max-width:720px; margin:0 auto; background:#000;
  border:1px solid var(--border-strong); border-radius:12px; position:relative;
  overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,0.5);
}
.hero-cta{margin-top:36px;}
.hero-cta .cta-note{color:var(--cream-dim); font-size:14px; margin-bottom:18px; max-width:420px; margin-left:auto; margin-right:auto;}

/* ===== GATE: form de captação (estágio 1) x vídeo (estágio 2) ===== */
#hero-video{display:none;}
body.lead-captured #hero-gate{display:none;}
body.lead-captured #hero-video{display:block;}

/* o card fica sobre fundo chapado: blur de backdrop nao teria o que borrar e
   so custaria uma camada extra de GPU no celular. */
.gate-card{
  max-width:440px; margin:28px auto 0; text-align:left;
  background:oklch(24% .05 250 / .6); border:1px solid var(--border-strong);
  border-radius:16px; padding:22px 18px; box-shadow:0 30px 70px rgba(0,0,0,0.35);
}
.gate-card .gate-title{color:var(--cream); font-family:var(--display); font-size:19px; text-align:center; margin-bottom:6px;}
.gate-card .gate-sub{color:var(--cream-dim); font-size:13.5px; text-align:center; margin-bottom:20px;}

.field{margin-bottom:16px;}
.gate-card .btn{margin-top:10px;}
.field label{display:block; font-size:12px; color:var(--cream-dim); margin-bottom:6px; font-weight:500;}
/* fonte >=16px evita zoom automático em inputs no iOS */
.field input{width:100%; padding:13px 14px; background:oklch(94% .03 85 / .08); border:1px solid var(--border); border-radius:8px; color:var(--cream); font-family:var(--sans); font-size:16px;}
.field input::placeholder{color:oklch(82% .03 85 / .45);}
.field input:focus{outline:none; border-color:var(--sky);}
.field.has-error input{border-color:var(--danger);}
.field .error-msg{display:none; color:#ffb4a8; font-size:11.5px; margin-top:5px;}
.field.has-error .error-msg{display:block;}

.form-feedback{display:none; font-size:13px; margin-top:12px; padding:11px 14px; border-radius:8px; text-align:center;}
.form-feedback.error{display:block; color:#ffb4a8; background:rgba(224,90,74,0.15); border:1px solid rgba(224,90,74,0.4);}

/* diagnóstico final (quiz de aplicação) */
.final-form-section{padding:56px 16px 76px; position:relative;}
.final-form-wrap{max-width:520px; margin:0 auto; position:relative; z-index:2; text-align:center;}
.who-photo{width:104px; height:104px; margin:0 auto 18px; border-radius:50%; overflow:hidden; border:2px solid var(--border-strong); box-shadow:0 10px 30px rgba(0,0,0,.35);}
.who-photo img{width:100%; height:100%; object-fit:cover; display:block; object-position:top center;}
.final-form-wrap h2{font-size:clamp(22px,5.5vw,32px); margin-top:14px;}
/* :not(.credential) e essencial aqui: como seletor de elemento + classe, esta regra
   vence .credential na especificidade e zerava a margem abaixo da assinatura,
   colando ela no botao. */
.final-form-wrap > p:not(.credential){color:var(--cream-dim); margin:16px auto 0; max-width:440px; font-size:15px;}
.credential{font-family:var(--display); font-size:12px; letter-spacing:.04em; color:var(--sky); margin:20px 0 30px;}
.form-note{font-size:11px; color:oklch(82% .03 85 / .5); margin-top:20px; text-align:center; max-width:360px; margin-left:auto; margin-right:auto;}

/* ===== quiz diagnóstico ===== */
.quiz-counter{font-family:var(--display); font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--sky); margin-bottom:12px;}
.quiz-question{color:var(--cream); font-family:var(--display); font-weight:700; font-size:19px; line-height:1.3; margin-bottom:8px;}
.quiz-context{color:var(--cream-dim); font-size:13.5px; margin-bottom:6px;}
.quiz-options{display:flex; flex-direction:column; gap:12px; margin-top:24px;}
.quiz-option{
  width:100%; text-align:left; font-family:var(--sans); font-size:15px; color:var(--cream);
  background:oklch(94% .03 85 / .06); border:1px solid var(--border);
  border-radius:10px; padding:14px 16px; cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .15s ease;
}
.quiz-option:hover{border-color:var(--sky); background:oklch(82% .07 235 / .1); transform:translateY(-1px);}
.quiz-option:active{transform:translateY(0) scale(.99); background:oklch(82% .07 235 / .16);}
.quiz-option.selected{border-color:var(--sky); background:oklch(82% .07 235 / .18); box-shadow:0 0 0 1px var(--sky) inset;}

#quiz-overlay{position:fixed; inset:0; z-index:2000; background:var(--navy-deep); overflow-y:auto;}
#quiz-overlay[hidden]{display:none;}
body.quiz-open{overflow:hidden;}
.quiz-close{
  position:fixed; top:8px; right:8px; z-index:2002; background:none; border:none;
  color:var(--cream-dim); font-size:30px; line-height:1; cursor:pointer; padding:10px 14px; transition:color .2s ease;
}
.quiz-close:hover{color:var(--sky);}
.quiz-progress{position:fixed; top:0; left:0; width:100%; height:4px; background:oklch(94% .03 85 / .12); z-index:2001;}
.quiz-progress-fill{height:100%; width:0%; background:linear-gradient(90deg, var(--sky), var(--sky-bright)); transition:width .35s ease;}
.quiz-stage{
  position:relative; z-index:2001; max-width:600px; margin:0 auto;
  min-height:100%; display:flex; align-items:flex-start; padding:64px 16px 40px;
}
.quiz-step{width:100%; animation:quizIn .35s ease;}
@keyframes quizIn{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);} }
.quiz-back{
  margin-top:32px; background:none; border:none; color:var(--cream-dim);
  font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.04em; cursor:pointer; padding:6px 0;
}
.quiz-back:hover{color:var(--sky);}
.quiz-step .form-success{text-align:center;}
.quiz-step .form-success h3{font-size:21px;}
.quiz-step .form-success p{color:var(--cream-dim); margin-top:10px; font-size:14px;}
.quiz-step .quiz-done{margin-top:30px;}

/* ===== prova social (carrossel de depoimentos em vídeo) ===== */
.section-testi{padding:48px 16px 16px;}
.section-testi h2{font-size:clamp(20px,5.5vw,30px); margin-top:14px;}
/* a abertura da seção segue a prosa do resto da página: alinhada à esquerda */
.section-testi .prose{text-align:left;}

.testi-carousel{position:relative; max-width:1080px; margin:28px auto 0; display:flex; align-items:center; gap:6px;}
.testi-track{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:4px 4px 14px; flex:1;
  scrollbar-width:none;
}
.testi-track::-webkit-scrollbar{display:none;}
.testi-slide{
  /* mobile: card grande e dominante (mais fácil de tocar/assistir/tela cheia) */
  flex:0 0 auto; width:min(76vw, 280px); scroll-snap-align:center;
}
/* estagiona a entrada dos cards (fade + slide-up) conforme a posição */
.testi-slide:nth-child(1){transition-delay:0ms;}
.testi-slide:nth-child(2){transition-delay:90ms;}
.testi-slide:nth-child(3){transition-delay:180ms;}
.testi-slide:nth-child(4){transition-delay:270ms;}
.testi-slide:nth-child(5){transition-delay:360ms;}
.testi-slide:nth-child(6){transition-delay:450ms;}

/* IMPORTANTE: nunca colocar transform aqui (ou em qualquer ancestral do
   <video>) — um ancestral com transform ativo quebra a Fullscreen API
   nativa em vários navegadores (o vídeo "não abre" em tela cheia, ou abre
   com tamanho/posição errada). O destaque do card ativo usa só opacidade,
   saturação, borda e sombra — nada que afete o layout do <video>. */
.testi-video-wrap{
  aspect-ratio:9/16; background:#000; border:1px solid var(--border-strong);
  border-radius:14px; overflow:hidden; position:relative; box-shadow:0 16px 40px rgba(0,0,0,.35);
  opacity:.65; filter:saturate(.85) brightness(.9);
  transition:opacity .4s ease, box-shadow .4s ease, filter .4s ease, border-color .4s ease;
}
/* card em foco no centro do carrossel: ganha destaque (sem transform) */
.testi-slide.active .testi-video-wrap{
  opacity:1; filter:saturate(1) brightness(1);
  border-color:var(--sky); box-shadow:0 22px 54px rgba(0,0,0,.5), 0 0 0 2px oklch(82% .07 235 / .35);
}
.testi-slide:hover .testi-video-wrap{opacity:1; filter:saturate(1) brightness(1);}
.testi-video-wrap video{width:100%; height:100%; object-fit:contain; display:block; background:#000;}
.testi-caption{margin-top:10px; font-size:12.5px; color:var(--cream-dim); text-align:center;}

/* alvo de toque confortavel no celular (>=40px) */
.testi-arrow{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%; border:1px solid var(--border-strong);
  background:oklch(24% .05 250 / .7); color:var(--cream); font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:border-color .2s ease, background .2s ease;
}
.testi-arrow:hover{border-color:var(--sky); background:oklch(82% .07 235 / .12);}

.testi-progress{width:140px; height:3px; margin:20px auto 0; background:oklch(94% .03 85 / .12); border-radius:2px; overflow:hidden;}
.testi-progress-fill{height:100%; width:0%; background:linear-gradient(90deg, var(--sky), var(--sky-bright)); border-radius:2px;}
.testi-progress-fill.running{animation:testiFill 4.5s linear forwards;}
@keyframes testiFill{ from{width:0%;} to{width:100%;} }

.testi-dots{display:flex; justify-content:center; gap:2px; margin-top:10px; flex-wrap:wrap;}
/* o ponto continua com 7px de bolinha, mas o botao tem 23px de area de toque
   (padding + background-clip) — bem mais facil de acertar com o dedo. */
.testi-dot{
  width:23px; height:23px; padding:8px; border:none; cursor:pointer; border-radius:50%;
  background:oklch(94% .03 85 / .25); background-clip:content-box;
  transition:background .3s ease, transform .3s ease;
}
.testi-dot.active{background:var(--sky); transform:scale(1.4);}

/* =========================================================================
   SEÇÕES DE CONTEÚDO (blocos liberados depois da aula)
   Cabeçalho centralizado + prosa/listas à esquerda numa coluna centrada,
   mesmo padrão do hero (h1 centralizado, .note à esquerda).
   ========================================================================= */
.section{padding:48px 16px;}
.wrap-narrow{max-width:640px; margin:0 auto;}
.wrap-wide{max-width:1080px; margin:0 auto;}
.section-header{text-align:center;}
.section-header h2{font-size:clamp(22px,5.8vw,32px); line-height:1.22; margin-top:14px;}
.section-header h2 em{font-style:normal; color:var(--sky);}
.prose{max-width:560px; margin:18px auto 0;}
.prose p{color:var(--cream-dim); font-size:15.5px;}
.prose p + p{margin-top:14px;}

/* B1 · ponte: risco no topo marcando a virada do vídeo pro conteúdo */
.section-bridge{padding-top:0;}
.section-bridge > .wrap-narrow{border-top:1px solid var(--border); padding-top:44px;}

/* frase-chave em destaque (mesma linguagem da .hero p.note) */
.pull-quote{
  font-family:var(--display); font-weight:700; font-size:clamp(17px,4.6vw,21px);
  line-height:1.35; color:var(--cream);
  border-left:2px solid var(--sky); padding-left:16px; margin-top:18px;
}
.prose .pull-quote + p{margin-top:18px;}

/* B3 · os quatro pilares */
.pillar-grid{display:grid; gap:12px; max-width:880px; margin:26px auto 0;}
.pillar{
  background:oklch(24% .05 250 / .6); border:1px solid var(--border); border-radius:14px;
  padding:18px; transition:border-color .3s ease;
}
.pillar:hover{border-color:var(--border-strong);}
.pillar-num{
  display:block; font-family:var(--display); font-weight:700; font-size:12px;
  letter-spacing:.1em; color:var(--sky); margin-bottom:8px;
}
.pillar p{color:var(--cream); font-size:15px; line-height:1.5;}

/* listas com check desenhado em CSS (sem asset externo) */
.check-list{list-style:none; display:grid; gap:14px; max-width:560px; margin:24px auto 0;}
.check-list li{position:relative; padding-left:32px; color:var(--cream-dim); font-size:15px;}
.check-list li::before{
  content:""; position:absolute; left:0; top:3px; width:19px; height:19px; border-radius:50%;
  border:1px solid var(--border-strong); background:oklch(82% .07 235 / .12);
}
.check-list li::after{
  content:""; position:absolute; left:6px; top:9px; width:6px; height:3px;
  border-left:1.5px solid var(--sky); border-bottom:1.5px solid var(--sky); transform:rotate(-45deg);
}

/* fecho de seção (mesmo tratamento da .hero p.note) */
.section-close{
  max-width:560px; margin:22px auto 0; color:var(--cream); font-size:15px;
  border-left:2px solid oklch(82% .07 235 / .4); padding-left:14px;
}

/* B6 · quem está te ensinando */
.who-grid{max-width:860px; margin:0 auto; display:grid; gap:22px;}
.who-portrait{
  width:100%; max-width:240px; margin:0 auto; aspect-ratio:4/5; border-radius:18px; overflow:hidden;
  border:1px solid var(--border-strong); box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.who-portrait img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block;}
.who-text{text-align:left;}
.who-text .kicker{margin-bottom:14px;}
.who-text p{color:var(--cream-dim); font-size:15.5px;}
.who-text p + p{margin-top:14px;}

footer{background:var(--navy-deep); padding:28px 16px; border-top:1px solid var(--border); text-align:center;}
footer p{font-size:11.5px; color:var(--cream-dim); margin-bottom:6px;}

/* conteúdo liberado apenas aos 5min do vídeo (estágio 3) */
.delayed{display:none !important;}

[data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
[data-reveal].visible{opacity:1; transform:translateY(0);}

/* =========================================================================
   TABLET / DESKTOP — a partir daqui, "amplia" o layout mobile-first acima.
   ========================================================================= */
@media(min-width:641px){
  .header-kicker{display:inline-flex;}
  .site-header{padding:32px 24px 0;}
  .brand{gap:12px;}
  .brand-name{font-size:14px;}

  .hero{padding:40px 24px 76px;}
  .hero-cta{margin-top:44px;}
  .hero p.lead{font-size:17px;}

  .btn{width:auto; padding:16px 32px;}
  .gate-card .btn, .hero-cta .btn, .final-form-wrap .btn{width:auto;}

  .gate-card{padding:28px 26px;}
  .gate-card .gate-title{font-size:20px;}
  .gate-card .gate-sub{margin-bottom:22px;}
  .field input{font-size:14px; padding:12px 14px;}

  .final-form-section{padding:80px 24px 96px;}
  .who-photo{width:120px; height:120px; margin-bottom:20px;}
  .credential{margin:22px 0 34px;}

  .quiz-stage{align-items:center; padding:70px 24px;}
  .quiz-question{font-size:clamp(22px,2.6vw,28px);}
  .quiz-option{padding:16px 18px;}
  .quiz-close{top:18px; right:22px; font-size:34px; padding:0;}

  .section-testi{padding:70px 24px 20px;}
  .testi-carousel{margin-top:40px; gap:10px;}
  .testi-slide{width:220px;}
  .testi-arrow{width:44px; height:44px; font-size:16px;}
  .testi-progress{margin-top:22px;}

  footer{padding:36px 24px;}
}

/* seções de conteúdo no tablet/desktop */
@media(min-width:641px){
  .section{padding:76px 24px;}
  .section-bridge > .wrap-narrow{padding-top:64px;}
  .prose{margin-top:20px;}
  .prose p{font-size:16.5px;}

  .pillar-grid{grid-template-columns:1fr 1fr; gap:16px; margin-top:34px;}
  .pillar{padding:22px 24px;}
  .pillar p{font-size:15.5px;}

  .check-list{margin-top:30px; gap:16px;}
  .check-list-2col{max-width:880px; grid-template-columns:1fr 1fr; gap:18px 32px;}

  .who-grid{grid-template-columns:240px 1fr; gap:40px; align-items:center;}
  .who-portrait{margin:0;}
}

/* respeita "reduzir movimento" do sistema */
@media (prefers-reduced-motion: reduce){
  .quiz-step{animation:none;}
  [data-reveal]{transition:none; opacity:1; transform:none;}
  html{scroll-behavior:auto;}
  .testi-video-wrap{transition:none; transform:none; opacity:1;}
  .testi-progress-fill.running{animation:none; width:0%;}
}