/* =========================================================================
   Alexandre Lacava — identidade visual (portada da página original)
   Estrutura de classes = formato da landing aula+quiz.
   Paleta, tipografia e tratamentos = Download Mental / Alexandre Lacava.
   ========================================================================= */

:root{
  --radius:.9rem;
  --background:oklch(19% .072 259);
  --foreground:oklch(97% .008 250);
  --surface:oklch(24% .075 260);
  --surface-2:oklch(28% .075 261);
  --muted-foreground:oklch(76% .03 254);
  --accent:oklch(78% .093 250);
  --accent-soft:oklch(86% .062 246);
  --accent-foreground:oklch(19% .072 259);
  --destructive:oklch(63% .19 25);
  --border:oklch(98% .02 250/.14);
  --input:oklch(98% .02 250/.18);
  --ring:oklch(78% .093 250/.55);
  --gradient-accent:linear-gradient(135deg, var(--accent-soft), var(--accent));
  --shadow-elevated:0 30px 70px -30px oklch(10% .06 260/.9);

  --serif:"Fraunces", Georgia, serif;
  --sans:"Instrument Sans", system-ui, sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  font-family:var(--sans);
  background:var(--background);
  color:var(--foreground);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  isolation:isolate;
  position:relative;
}

img{max-width:100%; display:block;}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:0;}
input,textarea,select{font:inherit;}

/* ===== atmosfera: halos + malha de pontos + grão (o fundo da página original) ===== */
.blueprint-bg{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    radial-gradient(circle at 18% 8%, oklch(78% .093 250/.16), transparent 45%),
    radial-gradient(circle at 88% 42%, oklch(78% .093 250/.11), transparent 42%),
    radial-gradient(oklch(78% .093 250/.22) 1px, transparent 1px);
  background-size:100% 100%, 100% 100%, 26px 26px;
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== barra de progresso de rolagem ===== */
#progress{
  position:fixed; top:0; left:0; height:2px; width:0;
  background-image:var(--gradient-accent); z-index:60; transition:width .1s linear;
}

/* ===== tipografia ===== */
h1,h2,h3,h4{font-weight:600; line-height:1.15; letter-spacing:-.01em;}
h1{font-size:clamp(1.9rem,5.2vw,3.1rem); line-height:1.12;}
h2{font-size:clamp(1.5rem,3.4vw,2.4rem);}
h3{font-size:1.25rem;}
h4{font-size:1.05rem;}

/* o destaque serifado em itálico — a assinatura da página original */
em,.key{font-family:var(--serif); font-style:italic; color:var(--accent-soft); font-weight:500;}

.eyebrow{
  display:inline-block; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.22em; color:var(--accent-soft);
}
.lead{
  font-size:1rem; line-height:1.65; color:var(--muted-foreground);
  max-width:36rem; margin-top:1.5rem;
}
.center{text-align:center;}
/* título de seção: eyebrow curto em cima, manchete longa embaixo */
.section h2,.final-form-wrap h2{margin-top:1rem; max-width:26ch;}
.center h2{margin-left:auto; margin-right:auto;}
.wrap>h2,.wrap-narrow>h2{margin-bottom:0;}
.center .eyebrow, .center .lead{margin-left:auto; margin-right:auto;}

/* ===== containers ===== */
.wrap{max-width:72rem; margin:0 auto; width:100%;}
.wrap-narrow{max-width:48rem; margin:0 auto; width:100%;}

.section{padding:64px 20px;}
.section-alt{background:oklch(24% .075 260/.35);}

/* ===== hero (coluna única, centralizado) ===== */
.hero{position:relative; padding:56px 20px 48px; text-align:center;}
.hero-inner{max-width:52rem; margin:0 auto;}
.hero .eyebrow{
  border:1px solid var(--border); border-radius:999px; padding:.375rem .75rem;
}
.hero h1{margin:1.75rem auto 0; max-width:20ch;}
.hero .lead{margin-left:auto; margin-right:auto;}

/* ===== estágios (gate x aula) ===== */
#hero-video{display:none;}
body.lead-captured #hero-gate{display:none;}
body.lead-captured #hero-video{display:block;}
.delayed{display:none !important;}

/* ===== painel (o .panel da página original) ===== */
.gate-card,.situation-card,.pillar,.doubt-item,.story-box,.process-item,
.quiz-option,.stat-band>div,.final-form-wrap{
  background:linear-gradient(160deg,
    color-mix(in oklab, var(--surface) 92%, transparent),
    color-mix(in oklab, var(--background) 88%, transparent));
  border:1px solid var(--border);
  border-radius:calc(var(--radius) + 8px);
}

/* ===== formulário de captura ===== */
#hero-gate{margin-top:2rem;}
.gate-card{
  width:100%; max-width:30rem; margin:2rem auto 0;
  padding:1.75rem 1.5rem; box-shadow:var(--shadow-elevated);
  text-align:left; /* rótulo e campo alinhados à esquerda: legibilidade do formulário */
}
.gate-title,.gate-sub{text-align:center;}
.gate-title{font-size:1.5rem;}
.gate-sub{font-size:.875rem; color:var(--muted-foreground); margin-top:.375rem;}

.field{margin-top:1.25rem;}
.field label{
  display:block; font-size:.875rem; font-weight:500;
  color:color-mix(in oklab, var(--foreground) 90%, transparent); margin-bottom:.5rem;
}
.field input,.field select,.field textarea{
  width:100%; padding:.8rem 1rem; font-size:.95rem;
  color:var(--foreground); outline:none;
  border:1px solid var(--input);
  border-radius:calc(var(--radius) - 2px);
  background:color-mix(in oklab, var(--background) 60%, transparent);
  transition:border-color .2s, box-shadow .2s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-foreground);}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px var(--ring);
}
.field .error-msg{
  display:none; font-size:.8rem; color:var(--destructive); margin-top:.375rem;
}
.field.has-error input,.field.has-error select{border-color:var(--destructive);}
.field.has-error .error-msg{display:block;}

.form-feedback{font-size:.875rem; margin-top:.875rem;}
.form-feedback.error{color:var(--destructive);}
.form-note{
  font-size:.75rem; line-height:1.6; color:var(--muted-foreground);
  margin-top:1.25rem; max-width:34rem; margin-left:auto; margin-right:auto;
}

/* ===== botões (o .btn-pill da página original) ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:999px; padding:.9rem 1.75rem;
  font-size:.95rem; font-weight:600;
  transition:transform .2s, filter .2s, box-shadow .2s;
}
.btn-gold{
  background-image:var(--gradient-accent); color:var(--accent-foreground);
  box-shadow:0 12px 30px -14px oklch(78% .093 250/.8);
}
.btn-gold:hover{filter:brightness(1.05); transform:translateY(-2px);}
.btn-gold:active{transform:translateY(0);}
.gate-card .btn{width:100%; margin-top:1.75rem;}

/* ===== vídeo ===== */
#hero-video{margin-top:2rem;}
.video-frame{
  margin:1.75rem auto 0; max-width:56rem;
  border-radius:calc(var(--radius) + 12px);
  overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-elevated);
}
.hero-cta{margin-top:2.5rem; text-align:center;}
.cta-note{font-size:.95rem; color:var(--muted-foreground); margin-bottom:1.25rem;}
.cta-title{
  font-size:clamp(1.25rem,2.6vw,1.75rem); line-height:1.35;
  max-width:34rem; margin:0 auto 1.75rem;
}
.section-cta{text-align:center;}

/* ===== situações ===== */
.situation-grid{display:grid; gap:1.25rem; margin-top:2.75rem;}
.situation-card{padding:1.75rem 1.5rem;}
.situation-card .num{
  font-family:var(--serif); font-size:2rem; font-weight:600;
  color:color-mix(in oklab, var(--accent) 45%, transparent);
}
.situation-card p{font-size:.95rem; color:var(--muted-foreground); margin-top:.75rem;}
.situation-card strong{color:var(--foreground); font-weight:600;}

/* ===== dúvidas ===== */
.doubts-grid{display:grid; gap:.875rem; margin-top:2.5rem;}
.doubt-item{display:flex; gap:.875rem; align-items:flex-start; padding:1.125rem;}
.doubt-item .n{
  font-family:var(--mono); font-size:.75rem; font-weight:700;
  color:var(--accent-soft); flex-shrink:0; padding-top:.15rem;
}
.doubt-item p{font-size:.9rem; color:var(--muted-foreground);}

/* ===== história ===== */
.story-box{max-width:45rem; margin:2.75rem auto 0; padding:2rem 1.75rem;}
.story-box p{margin-bottom:1rem; font-size:.97rem; color:var(--muted-foreground);}
.story-box p:last-child{margin-bottom:0;}
.story-box strong{color:var(--accent-soft); font-weight:600;}

/* ===== método ===== */
.pillars{display:grid; gap:1.25rem; margin-top:3rem;}
.pillar{padding:1.75rem 1.5rem;}
.pillar .tag{
  display:block; font-family:var(--mono); font-size:.65rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--accent-soft); margin-bottom:.5rem;
}
.pillar .letter{
  font-family:var(--serif); font-size:2.5rem; font-weight:600; line-height:1;
  color:color-mix(in oklab, var(--accent) 45%, transparent);
}
.pillar h4{margin:.875rem 0 .5rem;}
.pillar p{font-size:.9rem; color:var(--muted-foreground);}

/* ===== resultados ===== */
.stat-band{display:grid; gap:1.25rem; margin-top:2.75rem; text-align:center;}
.stat-band>div{padding:1.75rem 1.25rem;}
.stat-band .num{
  display:block; font-family:var(--serif); font-size:2.25rem;
  font-weight:600; color:var(--accent-soft);
}
.stat-band .label{
  display:block; font-size:.75rem; line-height:1.5;
  color:var(--muted-foreground); margin-top:.5rem;
}

/* ===== jornada ===== */
.process-list{margin-top:2.75rem; display:grid; gap:1rem;}
.process-item{
  display:grid; grid-template-columns:auto 1fr; gap:1.25rem;
  align-items:center; padding:1.5rem;
}
.process-num{
  font-family:var(--serif); font-size:1.75rem; font-weight:600;
  color:color-mix(in oklab, var(--accent) 45%, transparent);
}
.process-item h4{margin-bottom:.375rem;}
.process-item p{font-size:.9rem; color:var(--muted-foreground);}

/* ===== quem conduz ===== */
.who-grid{display:grid; gap:2.5rem; align-items:center; margin-top:2.75rem;}
.photo-frame{
  aspect-ratio:4/5; overflow:hidden;
  border:1px solid var(--border);
  border-radius:calc(var(--radius) + 12px);
  background:color-mix(in oklab, var(--surface) 50%, transparent);
  box-shadow:var(--shadow-elevated);
  max-width:26rem; margin:0 auto; width:100%;
}
.photo-img{width:100%; height:100%; object-fit:cover; display:block;}
.who-copy p{margin-bottom:.875rem; font-size:.97rem; color:var(--muted-foreground);}
.credentials{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem;}
.credentials span{
  font-size:.75rem; border:1px solid var(--border); border-radius:999px;
  padding:.375rem .875rem; color:color-mix(in oklab, var(--foreground) 80%, transparent);
}

/* ===== bloco final do diagnóstico ===== */
.final-form-section{position:relative; padding:64px 20px;}
.final-form-wrap{
  max-width:45rem; margin:0 auto; padding:2.5rem 1.75rem; text-align:center;
  box-shadow:var(--shadow-elevated);
}
.final-form-wrap p{
  font-size:.97rem; color:var(--muted-foreground); margin-top:1.25rem;
}
.quiz-proofs{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin:1.75rem 0;
}
.quiz-proofs span{
  font-size:.75rem; border:1px solid var(--border); border-radius:999px;
  padding:.375rem .875rem; color:var(--accent-soft);
}

/* ===== overlay do quiz ===== */
#quiz-overlay{
  position:fixed; inset:0; z-index:100; overflow-y:auto;
  background:var(--background);
  display:flex; flex-direction:column;
}
#quiz-overlay[hidden]{display:none;}
body.quiz-open{overflow:hidden;}

.quiz-close{
  position:absolute; top:1rem; right:1rem; z-index:2;
  width:2.5rem; height:2.5rem; display:grid; place-items:center;
  font-size:1.75rem; line-height:1; border-radius:999px;
  border:1px solid var(--border); color:var(--muted-foreground);
  transition:color .2s, border-color .2s;
}
.quiz-close:hover{color:var(--foreground); border-color:var(--accent);}

.quiz-progress{height:2px; background:var(--surface-2); flex-shrink:0;}
.quiz-progress-fill{
  height:100%; width:0; background-image:var(--gradient-accent);
  transition:width .4s ease-out;
}
.quiz-stage{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:4rem 1.25rem 2.5rem;
}
.quiz-step{width:100%; max-width:38rem;}
.quiz-counter{
  font-family:var(--mono); font-size:.7rem; text-transform:uppercase;
  letter-spacing:.18em; color:var(--accent-soft);
}
.quiz-question{
  font-size:clamp(1.25rem,3.4vw,1.75rem); line-height:1.3; margin-top:1rem;
}
.quiz-context{
  font-size:.9rem; color:var(--muted-foreground); margin-top:.75rem;
}
.quiz-options{display:grid; gap:.75rem; margin-top:1.75rem;}
.quiz-option{
  width:100%; text-align:left; padding:1rem 1.25rem; font-size:.95rem;
  transition:transform .15s, border-color .2s, background .2s;
}
.quiz-option:hover{border-color:var(--accent); transform:translateY(-1px);}
.quiz-option.selected{
  background-image:var(--gradient-accent); color:var(--accent-foreground);
  border-color:transparent; font-weight:600;
}
.quiz-back{
  margin-top:1.5rem; font-size:.875rem; color:var(--muted-foreground);
  transition:color .2s;
}
.quiz-back:hover{color:var(--foreground);}

.form-success{text-align:center;}
.form-success h3{font-size:1.5rem;}
.form-success p{
  font-size:.97rem; color:var(--muted-foreground); margin-top:1rem;
  max-width:32rem; margin-left:auto; margin-right:auto;
}
.form-success .btn{margin-top:1.75rem;}

/* ===== rodapé ===== */
footer{
  border-top:1px solid var(--border); padding:3rem 20px;
  text-align:center;
}
footer p{font-size:.75rem; color:var(--muted-foreground);}
footer p:first-child{
  font-family:var(--serif); font-size:1.5rem; font-weight:600;
  color:var(--foreground); margin-bottom:1rem;
}

/* ===== animação de entrada ===== */
@keyframes lp-rise{from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:none;}}
[data-reveal]{opacity:0; transform:translateY(22px);}
[data-reveal].visible{animation:.7s cubic-bezier(.22,1,.36,1) both lp-rise;}

/* ===== tablet ===== */
@media(min-width:640px){
  .section{padding:80px 32px;}
  .hero{padding:72px 32px 64px;}
  .final-form-section{padding:80px 32px;}
  .gate-card{padding:2rem;}
  .doubts-grid{grid-template-columns:1fr 1fr;}
  .situation-grid{grid-template-columns:1fr 1fr;}
  .pillars{grid-template-columns:1fr 1fr;}
  .stat-band{grid-template-columns:repeat(3,1fr);}
  .final-form-wrap{padding:3rem;}
  .quiz-stage{padding:5rem 2rem 3rem;}
}

/* ===== desktop ===== */
@media(min-width:1024px){
  .hero-inner{padding:2rem 0;}
  .situation-grid{grid-template-columns:repeat(3,1fr);}
  .pillars{grid-template-columns:repeat(4,1fr);}
  .who-grid{grid-template-columns:.8fr 1.2fr;}
  .process-item{grid-template-columns:4rem 1fr;}
}

/* ===== acessibilidade ===== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
  }
  html{scroll-behavior:auto;}
  [data-reveal]{opacity:1; transform:none;}
}

:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}