/* ============================================================
   LUZ — rampa de luminosidade por estagio + correcoes mobile
   Just Laser Academy. Carregar DEPOIS de styles.css / do <style> da pagina.

   Como funciona: cada seccao de nivel superior recebe data-stage="1..11".
   O estagio redefine os tokens de cor (--bg, --bg3, --ink, --rule...) no
   proprio elemento, entao todas as regras existentes que usam var(--ink),
   var(--bg3) etc. se adaptam sem alteracao.

   Estagios 1-5 = escuro, tinta clara.  Estagios 6-11 = claro, tinta escura.
   A virada acontece em UMA fronteira, com faixa de degrade, para nunca
   atravessar o meio-tom (onde nem tinta clara nem escura atinge AA).
   ============================================================ */

/* ---------- tinta para fundos escuros ---------- */
[data-stage="1"],[data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"]{--ink:oklch(.97 .008 75);--ink-dim:oklch(.90 .012 70);--ink-soft:oklch(.845 .014 66);--ink-muted:oklch(.78 .014 62);--rule:oklch(.97 .008 75/.11);--rule-strong:oklch(.97 .008 75/.22);--rule2:oklch(.97 .008 75/.22);--red-ink:oklch(.68 .19 32);--tint:oklch(.97 .008 75/.04);--tint-2:oklch(.97 .008 75/.07);--scrim:oklch(.145 .016 42/.86)}

/* ---------- tinta para fundos claros ---------- */
[data-stage="7"],[data-stage="8"],[data-stage="9"],[data-stage="10"],[data-stage="11"],[data-stage="12"],[data-stage="13"]{--ink:oklch(.20 .022 38);--ink-dim:oklch(.375 .020 40);--ink-soft:oklch(.475 .018 42);--ink-muted:oklch(.545 .016 44);--rule:oklch(.20 .022 38/.13);--rule-strong:oklch(.20 .022 38/.26);--rule2:oklch(.20 .022 38/.26);--red-ink:oklch(.475 .195 27);--tint:oklch(.20 .022 38/.045);--tint-2:oklch(.20 .022 38/.08);--scrim:oklch(.20 .022 38/.80)}

/* ---------- a rampa: superficie sobe monotonicamente; o cartao alterna
   claro/escuro dentro de cada faixa, e dai vem o zebrado ---------- */
[data-stage="1"]{--bg:oklch(0.145 0.017 43);--bg2:oklch(0.145 0.017 43);--bg-2:oklch(0.145 0.017 43);--bg3:oklch(0.215 0.017 43);--bg-3:oklch(0.215 0.017 43);--bg4:oklch(0.265 0.017 43);--bg-4:oklch(0.265 0.017 43)}
[data-stage="2"]{--bg:oklch(0.18 0.018 45);--bg2:oklch(0.18 0.018 45);--bg-2:oklch(0.18 0.018 45);--bg3:oklch(0.24 0.018 45);--bg-3:oklch(0.24 0.018 45);--bg4:oklch(0.290 0.018 45);--bg-4:oklch(0.290 0.018 45)}
[data-stage="3"]{--bg:oklch(0.215 0.018 45);--bg2:oklch(0.215 0.018 45);--bg-2:oklch(0.215 0.018 45);--bg3:oklch(0.165 0.018 45);--bg-3:oklch(0.165 0.018 45);--bg4:oklch(0.215 0.018 45);--bg-4:oklch(0.215 0.018 45)}
[data-stage="4"]{--bg:oklch(0.25 0.019 47);--bg2:oklch(0.25 0.019 47);--bg-2:oklch(0.25 0.019 47);--bg3:oklch(0.315 0.019 47);--bg-3:oklch(0.315 0.019 47);--bg4:oklch(0.365 0.019 47);--bg-4:oklch(0.365 0.019 47)}
[data-stage="5"]{--bg:oklch(0.29 0.02 49);--bg2:oklch(0.29 0.02 49);--bg-2:oklch(0.29 0.02 49);--bg3:oklch(0.235 0.02 49);--bg-3:oklch(0.235 0.02 49);--bg4:oklch(0.285 0.02 49);--bg-4:oklch(0.285 0.02 49)}
[data-stage="6"]{--bg:oklch(0.33 0.021 52);--bg2:oklch(0.33 0.021 52);--bg-2:oklch(0.33 0.021 52);--bg3:oklch(0.4 0.021 52);--bg-3:oklch(0.4 0.021 52);--bg4:oklch(0.450 0.021 52);--bg-4:oklch(0.450 0.021 52)}
[data-stage="7"]{--bg:oklch(0.865 0.014 68);--bg2:oklch(0.865 0.014 68);--bg-2:oklch(0.865 0.014 68);--bg3:oklch(0.955 0.014 68);--bg-3:oklch(0.955 0.014 68);--bg4:oklch(0.985 0.014 68);--bg-4:oklch(0.985 0.014 68)}
[data-stage="8"]{--bg:oklch(0.89 0.014 68);--bg2:oklch(0.89 0.014 68);--bg-2:oklch(0.89 0.014 68);--bg3:oklch(0.83 0.014 68);--bg-3:oklch(0.83 0.014 68);--bg4:oklch(0.860 0.014 68);--bg-4:oklch(0.860 0.014 68)}
[data-stage="9"]{--bg:oklch(0.855 0.015 67);--bg2:oklch(0.855 0.015 67);--bg-2:oklch(0.855 0.015 67);--bg3:oklch(0.93 0.015 67);--bg-3:oklch(0.93 0.015 67);--bg4:oklch(0.960 0.015 67);--bg-4:oklch(0.960 0.015 67)}
[data-stage="10"]{--bg:oklch(0.905 0.013 70);--bg2:oklch(0.905 0.013 70);--bg-2:oklch(0.905 0.013 70);--bg3:oklch(0.965 0.013 70);--bg-3:oklch(0.965 0.013 70);--bg4:oklch(0.990 0.013 70);--bg-4:oklch(0.990 0.013 70)}
[data-stage="11"]{--bg:oklch(0.935 0.012 71);--bg2:oklch(0.935 0.012 71);--bg-2:oklch(0.935 0.012 71);--bg3:oklch(0.88 0.012 71);--bg-3:oklch(0.88 0.012 71);--bg4:oklch(0.910 0.012 71);--bg-4:oklch(0.910 0.012 71)}
[data-stage="12"]{--bg:oklch(0.965 0.009 75);--bg2:oklch(0.965 0.009 75);--bg-2:oklch(0.965 0.009 75);--bg3:oklch(0.91 0.009 75);--bg-3:oklch(0.91 0.009 75);--bg4:oklch(0.940 0.009 75);--bg-4:oklch(0.940 0.009 75)}
[data-stage="13"]{--bg:oklch(0.9 0.013 70);--bg2:oklch(0.9 0.013 70);--bg-2:oklch(0.9 0.013 70);--bg3:oklch(0.955 0.013 70);--bg-3:oklch(0.955 0.013 70);--bg4:oklch(0.985 0.013 70);--bg-4:oklch(0.985 0.013 70)}

/* aplica a superficie mesmo quando a regra original usava shorthand.
   As faixas com fundo cravado no CSS (o zebrado antigo do blog) precisam de
   especificidade maior para ceder o lugar aos tokens do estagio. */
[data-stage]{background-color:var(--bg);color:var(--ink)}
[data-stage].pb-band.alt,[data-stage].pb-band,[data-stage].post-cta,[data-stage].related{background-color:var(--bg)}

/* Artigos do blog: o corpo de texto usa --ink-dim; nas faixas claras isso
   precisa de mais peso para nao parecer apagado sobre osso. */
.stage-light .pb-inner p,.stage-light .pb-inner li{color:var(--ink-dim)}
.stage-light .pb-answer{background:var(--bg3);border:1px solid var(--rule)}
.stage-light table th{background:var(--bg3)}
.stage-light table td,.stage-light table th{border-color:var(--rule)}

/* ---------- a faixa da virada (amanhecer) ---------- */
/* O estagio 6 nasce do ultimo tom escuro e sobe ate a propria superficie.
   O padding-top mantem qualquer texto abaixo da faixa. */
[data-stage="7"]{background-image:linear-gradient(180deg,oklch(.330 .021 52) 0,oklch(.50 .026 57) 84px,oklch(.70 .022 63) 152px,oklch(.865 .014 68) 214px);background-repeat:no-repeat;padding-top:268px}
[data-stage="7"]>*{position:relative;z-index:1}
[data-stage="7"].pb-band{padding-top:246px}

/* ---------- ajustes que os tokens nao alcancam ---------- */
/* preenchimentos de branco-alfa viram tinta relativa ao estagio */
.stage-light .btn-outline:hover{background:var(--tint-2)}
.stage-light .fw-card-pain,.stage-light .fw-not{background:var(--tint)}

/* brilho vermelho fica gritante sobre osso: reduz nos estagios claros */
.stage-light.fcta{background-image:radial-gradient(ellipse at 50% 0%,oklch(.55 .21 27/.10) 0%,transparent 60%)}
.stage-light .tcard-avatar{box-shadow:0 2px 10px oklch(.20 .022 38/.18)}

/* sombras: sobre fundo claro precisam de mais opacidade para existir */
.stage-light .why-card,.stage-light .tcard,.stage-light .urg-item,.stage-light .pain-stat-card,.stage-light .fw-card,.stage-light .tr-card,.stage-light .ccard,.stage-light .pc-card{border:1px solid var(--rule);box-shadow:0 1px 2px oklch(.20 .022 38/.05),0 8px 24px -12px oklch(.20 .022 38/.12)}

/* selecao de texto legivel nos dois lados */
.stage-light ::selection{background:oklch(.55 .21 27);color:oklch(.98 .006 78)}

/* links: definidos explicitamente nos dois regimes */
[data-stage] a{color:var(--ink)}
[data-stage] a:hover{color:var(--red-ink)}
[data-stage] .btn-primary,[data-stage] .nav-cta,[data-stage] .ccard-cta{color:oklch(.98 .006 78)}

/* vermelho (e verde) como TEXTO pequeno nunca passa de 4.5:1 sobre estas
   superficies. --red-ink muda de luminosidade conforme o regime da faixa.
   O !important e necessario: varias dessas cores estao em style inline. */
[data-stage] .urgency-eyebrow,[data-stage] .urg-item-num,[data-stage] .tr-card-before,[data-stage] .tr-card-before::before,[data-stage] [style*="rgba(211,30,42,.5)"],[data-stage] [style*="rgba(211,30,42,.6)"],[data-stage] [style*="rgba(211,30,42,.7)"],[data-stage] [style*="rgba(211,30,42,.8)"]{color:var(--red-ink) !important}
/* Rotulos pequenos em vermelho de marca: #d31e2a como TEXTO de 10-11px da
   3,1:1 sobre a brasa escura (falha AA) e some sobre osso. --red-ink resolve
   os dois lados: mais claro no regime escuro, mais escuro no regime claro. */
[data-stage] .post-tag,[data-stage] .pb-eyebrow,[data-stage] .related-k,[data-stage] .section-eyebrow,[data-stage] .eyebrow,[data-stage] footer h4,[data-stage] .footer h4,[data-stage] .cur-num,[data-stage] .mod-num{color:var(--red-ink)}

.stage-light .tr-card-after,.stage-light [style*="rgba(50,220,120"]{color:oklch(.46 .13 152) !important}

/* ============================================================
   CORRECOES MOBILE
   ============================================================ */

/* 1. Secoes de scroll travado (rotate / protocol / cinema).
      O bug: height:100vh COM min-height:720px. Num celular de ~660px de
      altura util o elemento sticky fica MAIS ALTO que a viewport, e um
      sticky mais alto que a viewport nao gruda: ele rola e o conteudo
      sobrepoe. Alem disso 100vh no iOS conta a barra de endereco oculta,
      e o desalinhamento de -100vh joga a legenda fora do video.
      Correcao: svh (viewport minima, estavel) e sem min-height forcado. */
.cinema-video-wrap,.cinema-sticky{height:100svh}
.cinema-sticky{margin-top:-100svh}
@media (max-width:1000px){
  .rotate-sticky,.protocol-sticky{height:100svh;min-height:0;overflow:hidden}
  .rotate-stage{min-height:44svh}
  .protocol-terminal{height:44svh;min-height:0}
  .rotate-sticky{padding-top:72px}
  .protocol-sticky{padding-top:80px}
}
@media (max-width:900px){
  .cinema-captions{min-height:0}
  .cinema-sticky{padding:64px var(--pad) 48px;align-items:flex-end}
}

/* 2. Faixa ate 430px: styles.css nao tinha nenhum breakpoint abaixo de 660px. */
@media (max-width:430px){
  :root{--pad:18px}
  .hero-title{font-size:clamp(38px,11.5vw,52px) !important;letter-spacing:-.03em !important;line-height:1.05 !important}
  .section-title,.manifesto-title,.finalcta-title,.protocol-title,.rotate-panel h3{font-size:clamp(30px,8.6vw,42px) !important;line-height:1.04}
  .invest-price-big{font-size:clamp(38px,11vw,52px)}
  .stat-num,.trust-item strong{font-size:clamp(32px,9vw,44px)}
  .cap-headline{font-size:clamp(26px,7.6vw,36px)}
  .manifesto,.pillars,.curriculum,.includes,.quotes,.invest,.faq,.problem,.promise,.modules,.fit,.courses,.why,.mentor,.fcta,.pain,.for-who,.transform-section,.testimonials,.urgency{padding-top:64px;padding-bottom:64px}
  [data-stage="7"]{padding-top:214px;background-image:linear-gradient(180deg,oklch(.330 .021 52) 0,oklch(.50 .026 57) 58px,oklch(.70 .022 63) 106px,oklch(.865 .014 68) 164px)}
  .oc-grid,.inc-grid,.pillar-grid,.problem-grid,.fit-grid{grid-template-columns:1fr !important}
  /* area de toque: nada abaixo de 44px */
  a.btn-primary,a.btn-outline,button,.nav-cta,.ccard-cta,summary{min-height:44px}
  a.btn-primary,a.btn-outline,.nav-cta{display:inline-flex;align-items:center;justify-content:center}
}

/* 3. Brilhos radiais gigantes (70vw) pesam no GPU do celular e lavam o texto. */
@media (max-width:660px){
  .hero-glow-1,.hero-glow-2,.invest-glow{opacity:.28}
}

/* 4. Respeitar reducao de movimento tambem nas faixas de scroll travado. */
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none !important}
}