/* Hadassah · site · paper and night */
:root{
  --paper:#C8BDAE; --paper-hi:#D6CDC1; --paper-lo:#BCB09F; --card:#E4DDD2;
  --ink:#171513; --ink-2:#3B3731; --ink-3:#4E483F; --line:rgba(23,21,19,.22); --line-strong:rgba(23,21,19,.5);
  --night:#262521; --night-2:#1C1B18; --night-3:#302E29;
  --cream:#E7E0D4; --cream-2:#B5AFA5; --cream-line:rgba(231,224,212,.22);
  --gold:#BEAB7B; --gold-soft:rgba(190,171,123,.35);
  --display:'Prata', Georgia, 'Times New Roman', serif;
  --text:'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --mono:'DM Mono', ui-monospace, Consolas, monospace;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-soft:cubic-bezier(.45,.05,.25,1);
  --gut:clamp(16px, 4vw, 56px); --max:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden; overflow-x:clip; scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; overflow-x:hidden; overflow-x:clip; background:var(--paper); color:var(--ink-2); font:300 16.5px/1.7 var(--text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
img,video,svg,canvas{display:block; max-width:100%}
img{height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; font-weight:400; text-wrap:balance}
p{margin:0 0 1em}
strong{font-weight:500; color:var(--ink)}
.sr{position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip{position:fixed; left:12px; top:-60px; z-index:100; background:var(--ink); color:var(--paper); padding:10px 16px; border-radius:99px; text-decoration:none; transition:top .3s var(--ease)}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:4px}
.dark :focus-visible,.on-dark :focus-visible{outline-color:var(--gold)}
main:focus{outline:none}

/* ---------- ambiente fixo: grão de papel + luz lenta ---------- */
.ambient{position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.38; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .09 0 0 0 0 .08 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ambient::after{content:""; position:absolute; inset:-30%; background:radial-gradient(40% 35% at 30% 30%, rgba(255,248,235,.5), transparent 70%); mix-blend-mode:soft-light; animation:drift 80s var(--ease-soft) infinite alternate; animation-delay:-20s}
@keyframes drift{to{transform:translate3d(18%,22%,0)}}

/* ---------- utilidades de texto ---------- */
.kicker{display:inline-flex; align-items:center; gap:12px; font:400 12px/1.4 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--ink-2); margin:0 0 22px}
.kicker::before{content:""; width:28px; height:1px; background:currentColor; opacity:.7}
.dark .kicker,.on-dark .kicker{color:var(--gold)}
.h2{font:400 clamp(34px,4.6vw,64px)/1.06 var(--display); color:var(--ink); letter-spacing:-.012em}
.dark .h2{color:var(--cream)}
.lede{font-size:clamp(17px,1.5vw,19.5px); line-height:1.65; color:var(--ink-2); max-width:58ch}
.dark .lede{color:var(--cream-2)}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gut)}
.dark{background:var(--night); color:var(--cream-2)}
.dark strong{color:var(--cream)}

/* ---------- botões ---------- */
.btn{--bg:var(--ink); --fg:var(--paper); display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 26px; border-radius:999px; border:1px solid var(--bg); background:var(--bg); color:var(--fg); font:500 13px/1 var(--text); letter-spacing:.14em; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:transform .5s var(--ease), background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn .arr{transition:transform .5s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn.ghost{background:transparent; color:var(--bg); border-color:var(--line-strong)}
.btn.ghost:hover{border-color:var(--bg)}
.on-dark .btn,.dark .btn{--bg:var(--cream); --fg:var(--ink)}
.on-dark .btn.ghost,.dark .btn.ghost{color:var(--cream); border-color:rgba(231,224,212,.4)}
.on-dark .btn.ghost:hover,.dark .btn.ghost:hover{border-color:var(--cream)}
.link{display:inline-flex; gap:8px; align-items:baseline; font:500 13px/1.4 var(--text); letter-spacing:.12em; text-transform:uppercase; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--line-strong); padding-bottom:3px; transition:border-color .4s var(--ease)}
.link:hover{border-color:var(--ink)}
.dark .link{color:var(--cream); border-color:rgba(231,224,212,.35)}
.dark .link:hover{border-color:var(--cream)}

/* ---------- navegação ---------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:50; transition:background-color .5s var(--ease), box-shadow .5s var(--ease), color .5s var(--ease)}
.nav-in{max-width:1400px; margin:0 auto; padding:18px var(--gut); display:flex; align-items:center; gap:28px}
.mark{font:400 13px/1 var(--text); letter-spacing:.56em; text-decoration:none; color:var(--ink); padding:8px 0; margin-right:auto; transition:opacity .5s var(--ease), color .5s var(--ease)}
.nav-links{display:flex; gap:26px; list-style:none; margin:0; padding:0}
.nav-links a{font:400 12px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; text-decoration:none; color:var(--ink-2); padding:10px 0; position:relative; transition:color .4s var(--ease)}
.nav-links a::after{content:""; position:absolute; left:0; right:0; bottom:4px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav .btn{min-height:40px; padding:0 20px; font-size:12px}
.nav.solid{background:rgba(200,189,174,.86); backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1); box-shadow:0 1px 0 var(--line)}
.nav.over-dark{color:var(--cream)}
.nav.over-dark .mark{color:var(--cream)}
.nav.over-dark .nav-links a{color:var(--cream-2)}
.nav.over-dark .nav-links a:hover{color:var(--cream)}
.nav.over-dark .btn{--bg:var(--cream); --fg:var(--ink)}
.nav.over-dark.solid{background:rgba(28,27,24,.82); box-shadow:0 1px 0 var(--cream-line)}
.nav.hero-top .mark{opacity:0}
.burger{display:none; width:44px; height:44px; border:0; background:transparent; cursor:pointer; position:relative}
.burger span{position:absolute; left:11px; right:11px; height:1.5px; background:currentColor; transition:transform .45s var(--ease), opacity .3s}
.burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:26px}
.nav.open .burger span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.nav.open .burger span:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)}
@media (max-width:1060px){
  .nav-links{position:fixed; inset:0 0 auto 0; top:0; padding:88px var(--gut) 32px; flex-direction:column; gap:4px; background:var(--paper); box-shadow:0 20px 40px rgba(0,0,0,.12); transform:translateY(-104%); transition:transform .6s var(--ease); z-index:-1}
  .nav-links a{display:block; font-size:14px; padding:14px 0; color:var(--ink)!important; border-bottom:1px solid var(--line)}
  .nav.open .nav-links{transform:none}
  .nav.open{color:var(--ink)}
  .nav.open .mark{color:var(--ink); opacity:1}
  .burger{display:block; color:inherit}
  .nav .btn{display:none}
}

/* ---------- HERO: a capa ganha vida ---------- */
.hero{position:relative; height:250vh; background:var(--night); clip-path:inset(0)}
.stage{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; background:var(--night-2); --bt:64; --p:0}
.h-band{display:none}
.h-art{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.h-cosmos{position:fixed; top:0; left:0; width:100%; height:100vh; height:100svh; overflow:hidden; pointer-events:none}
.h-cosmos.poster img.main.h-expand{opacity:1; transform:scale(calc(1.04 + var(--cz,0) * .08)); transform-origin:50% 40%}
.h-cosmos.poster img.main.h-planet{opacity:var(--co,0)}
.h-cosmos img{width:100%; height:100%; object-fit:cover; object-position:50% 62%; transform:scale(calc(1.06 + var(--cz,0) * .08)); transform-origin:50% 60%}
.h-cosmos::after{content:""; position:absolute; inset:0; background:radial-gradient(70% 70% at 50% 55%, rgba(28,27,24,.14), rgba(28,27,24,.58) 100%), linear-gradient(rgba(28,27,24,.55), transparent 35%, transparent 70%, rgba(28,27,24,.6))}
.h-art.on-paper{display:none}
.h-art.on-night{clip-path:none}
.h-art .ring{fill:none; stroke-width:1}
.h-art.on-paper .ring{stroke:rgba(23,21,19,.42)}
.h-art.on-night .ring{stroke:rgba(231,224,212,.3)}
.h-art .run{fill:none; stroke-width:1.6; stroke-linecap:round}
.h-art.on-paper .run{stroke:var(--ink)}
.h-art.on-night .run{stroke:var(--gold)}
.h-art .stem{stroke-width:1}
.h-art.on-paper .stem{stroke:rgba(23,21,19,.78)}
.h-art.on-night .stem{stroke:rgba(231,224,212,.4)}
.h-art .node{r:4}
.h-art.on-paper .node,.h-art.on-paper .dot{fill:var(--ink)}
.h-art.on-night .node{fill:var(--cream)}
.h-art.on-night .dot{fill:var(--gold)}
.h-art .tick{transition:opacity .6s var(--ease)}
.h-art .tick text{font:400 11px var(--mono); letter-spacing:.12em}
.h-art.on-paper .tick circle{fill:var(--paper); stroke:var(--ink)}
.h-art.on-paper .tick text{fill:var(--ink-2)}
.h-art.on-night .tick circle{fill:var(--night); stroke:var(--gold)}
.h-art.on-night .tick text{fill:var(--gold)}
.h-art,.h-center{opacity:calc(1 - var(--hf,0))}
.h-copy{position:absolute; inset:0; pointer-events:none}
.h-copy > *{pointer-events:auto}
.h-brand{position:absolute; left:0; right:0; top:clamp(84px,11vh,112px); text-align:center; font:400 13px var(--text); letter-spacing:.62em; padding-left:.62em; color:var(--cream)}
.h-brand::after{content:""; display:block; width:64px; margin:16px auto 0; border-top:1px solid var(--gold)}
.h-title{position:absolute; left:var(--gut); right:var(--gut); top:clamp(140px,19vh,200px); margin:0 auto; max-width:15ch; text-align:center; font:400 clamp(40px,6.6vw,104px)/1.02 var(--display); letter-spacing:-.018em; color:var(--cream); text-shadow:0 2px 30px rgba(20,19,16,.8)}
.h-title .w{display:inline-block; opacity:0; transform:translateY(.32em); transition:opacity 1.1s var(--ease), transform 1.3s var(--ease)}
.loaded .h-title .w{opacity:1; transform:none}
.h-side{position:absolute; right:calc(50% + 28px); top:calc(var(--bt0, 64) * 1vh - 38px); font:400 13px var(--text); letter-spacing:.3em; color:var(--gold); white-space:nowrap}
.h-words{position:absolute; left:0; right:0; top:calc(var(--bt0, 64) * 1vh + clamp(34px,6vh,64px)); text-align:center; font:400 12px/2 var(--text); letter-spacing:.32em; padding-left:.32em; text-transform:uppercase; color:var(--cream-2)}
.h-words span{display:block}
.h-ctas{position:absolute; left:0; right:0; bottom:clamp(28px,6vh,60px); display:flex; justify-content:center; gap:14px; flex-wrap:wrap; padding:0 var(--gut)}
.h-fade{opacity:calc(1 - var(--f, 0)); transform:translateY(calc(var(--f, 0) * -24px))}
.h-center{position:absolute; left:50%; top:calc(var(--ringTop, 480) * 1px - 44px); width:min(86vw, 900px); transform:translate(-50%,-100%); text-shadow:0 2px 28px rgba(20,19,16,.95), 0 0 70px rgba(20,19,16,.8); text-align:center; pointer-events:none; color:var(--cream)}
.h-center p{font:400 clamp(30px,4.4vw,64px)/1.12 var(--display); margin:0; letter-spacing:-.01em}
.h-center .w{display:inline-block; opacity:var(--kc,0); transform:translateY(calc((1 - var(--kc,0)) * 18px)); filter:none}
.h-center small{display:block; margin-top:26px; font:400 12px var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--gold); opacity:var(--ks,0)}
.cue{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); font:400 10px var(--mono); letter-spacing:.3em; text-transform:uppercase; color:var(--cream-2); display:flex; flex-direction:column; align-items:center; gap:8px; opacity:calc(1 - var(--f,0) * 2)}
.cue i{width:1px; height:28px; background:linear-gradient(var(--cream-2), transparent); animation:cue 2.6s var(--ease-soft) infinite}
@keyframes cue{0%{transform:scaleY(0); transform-origin:top}45%{transform:scaleY(1); transform-origin:top}55%{transform:scaleY(1); transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}
@media (max-height:620px), (max-width:720px) and (max-height:760px){.h-words{display:none}}
@media (max-height:560px){.cue{display:none}}
@media (max-width:720px){
  .hero{height:210vh}
  .h-title{top:118px; font-size:clamp(36px,10.4vw,52px); max-width:12ch}
  .h-brand{top:74px; font-size:11px}
  .h-brand::after{margin-top:10px; width:44px}
  .h-side{right:calc(50% + 14px); left:var(--gut); font-size:10.5px; letter-spacing:.2em; white-space:normal; text-align:right; line-height:1.6; top:calc(var(--bt0, 64) * 1vh - 52px)}
  .h-words{font-size:10.5px; line-height:1.9}
  .h-ctas{flex-direction:column; align-items:stretch; bottom:22px}
  .h-ctas .btn{width:100%}
  .cue{display:none}
}

/* ---------- PADRÃO: as palavras dela, sobre o halo ---------- */
.pattern{position:relative; height:calc(100vh + 5 * 78vh); background:var(--night); clip-path:inset(0)}
.pattern .sticky{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:grid; place-items:center}
.cosmos{position:fixed; top:0; left:0; width:100%; height:100vh; height:100svh; overflow:hidden}
.cosmos .cl{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:var(--o,0)}
.cosmos .cl-nebula{--o:1; transform:scale(var(--z,1)); transform-origin:50% 55%; object-position:50% 58%}
.cosmos .cl-veil{position:absolute; inset:0; background:radial-gradient(70% 70% at 50% 55%, rgba(28,27,24,.14), rgba(28,27,24,.58) 100%)}
.halo{position:absolute; left:50%; top:54%; width:min(118vh,118vw); aspect-ratio:1; transform:translate(-50%,-50%); opacity:calc(.55 * var(--ho,1))}
.p-kicker{opacity:var(--ho,1)}
.halo::before{content:""; position:absolute; inset:24%; border-radius:50%; background:radial-gradient(closest-side, rgba(190,171,123,.16), rgba(190,171,123,.05) 60%, transparent)}
.halo canvas{width:100%; height:100%}
.halo .spin{position:absolute; inset:0; animation:spin 160s linear infinite}
.halo .spin.rev{animation-duration:220s; animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.horizon{position:absolute; left:-10%; right:-10%; bottom:-6vh; height:42vh; background:radial-gradient(50% 60% at 50% 100%, rgba(190,171,123,.22), transparent 70%), linear-gradient(to top, rgba(28,27,24,.95), transparent)}
.slides{position:relative; width:min(88vw, 900px); min-height:50vh; display:grid; place-items:center; text-align:center}
.slides::before{content:""; position:absolute; left:50%; top:50%; width:min(170vw,1500px); height:min(120vw,900px); transform:translate(-50%,-50%); background:radial-gradient(closest-side, rgba(28,27,24,.82), rgba(28,27,24,.66) 40%, rgba(28,27,24,.35) 70%, transparent); pointer-events:none}
.slide{grid-area:1/1; margin:0; font:400 clamp(28px,3.9vw,54px)/1.2 var(--display); color:var(--cream); letter-spacing:-.008em; text-shadow:0 2px 28px rgba(20,19,16,.95), 0 0 60px rgba(20,19,16,.7)}
.slide .w{display:inline-block; opacity:calc(.3 + .7 * var(--kc,0)); transition:opacity .25s linear}
.slide{opacity:var(--so,0); transform:translateY(calc((1 - var(--so,0)) * 26px)); visibility:hidden}
.slide.vis{visibility:visible}
.p-meta{position:absolute; left:0; right:0; bottom:clamp(22px,5vh,48px); display:flex; justify-content:center; align-items:center; gap:18px; font:400 11px var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--cream-2)}
.p-ticks{display:flex; gap:6px}
.p-ticks i{width:22px; height:2px; background:var(--cream-line); position:relative; overflow:hidden}
.p-ticks i::after{content:""; position:absolute; inset:0; background:var(--gold); transform:scaleX(var(--t,0)); transform-origin:left}
.p-kicker{position:absolute; top:clamp(90px,14vh,140px); left:0; right:0; text-align:center}
.p-kicker .kicker{margin:0}

/* ---------- O CICLO (9 estações) ---------- */
.loop{padding:clamp(96px,14vh,160px) 0}
.loop-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(40px,6vw,96px); align-items:center}
.loop-text .h2{max-width:13ch; margin-bottom:28px}
.loop-text .quote{font:400 clamp(19px,1.7vw,23px)/1.5 var(--display); color:var(--ink); max-width:34ch; margin:0 0 22px; padding-left:22px; border-left:1px solid var(--ink)}
.loop-text .quote cite{display:block; margin-top:12px; font:400 11px var(--mono); letter-spacing:.2em; text-transform:uppercase; font-style:normal; color:var(--ink-3)}
.loop-fig{position:relative; aspect-ratio:1; width:100%; max-width:620px; justify-self:center}
.loop-fig svg{width:100%; height:100%; overflow:visible}
.lf-ring{fill:none; stroke:rgba(23,21,19,.38); stroke-width:1}
.lf-run{fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; transition:stroke-dashoffset 1.2s var(--ease)}
.lf-stem{stroke:rgba(23,21,19,.5); stroke-width:1}
.st{cursor:pointer; outline:none}
.st circle.hit{fill:transparent}
.st circle.dotc{fill:var(--paper); stroke:var(--ink); stroke-width:1.2; transition:r .5s var(--ease), fill .4s var(--ease)}
.st text{font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; fill:var(--ink-2); transition:fill .4s var(--ease)}
.st text.n{font-size:10px; fill:var(--ink-3)}
.st.on circle.dotc{fill:var(--ink); r:7}
.st.on text{fill:var(--ink)}
.st:focus-visible circle.dotc{stroke-width:2.5}
.lf-center{position:absolute; left:50%; top:50%; width:58%; transform:translate(-50%,-50%); text-align:center}
.lf-center .num{font:400 12px var(--mono); letter-spacing:.24em; color:var(--ink-3)}
.lf-center h3{font:400 clamp(26px,2.8vw,40px)/1.1 var(--display); color:var(--ink); margin:8px 0 12px}
.lf-center p{font-size:15px; line-height:1.6; margin:0; color:var(--ink-2); min-height:4.8em}
.lf-center .swap{transition:opacity .45s var(--ease), transform .45s var(--ease)}
.lf-center.out .swap{opacity:0; transform:translateY(8px)}
.loop-list{list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 28px; max-width:560px}
.loop-list li{display:flex; gap:12px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--ink-2)}
.loop-list b{font:400 11px var(--mono); letter-spacing:.14em; color:var(--ink-3)}
.loop-list span{font-weight:400; color:var(--ink)}
.loop-cta{margin-top:34px; display:flex; gap:18px; flex-wrap:wrap; align-items:center}
@media (max-width:900px){
  .loop-grid{grid-template-columns:1fr}
  .loop-fig{max-width:520px}
  .lf-center p{font-size:14px}
}
@media (max-width:520px){
  .st text{font-size:10px; letter-spacing:.08em}
  .st text.n{display:none}
  .lf-center{width:62%}
  .lf-center h3{font-size:24px; margin:4px 0 6px}
  .lf-center p{font-size:12.5px; line-height:1.5; min-height:5.6em}
  .loop-list{grid-template-columns:1fr}
}

/* ---------- QUIZ ---------- */
.quiz{background:var(--paper-hi); padding:clamp(96px,13vh,150px) 0; position:relative; overflow:hidden}
.quiz-head{text-align:center; max-width:760px; margin:0 auto 46px}
.quiz-head .h2{margin-bottom:18px}
.quiz-head .lede{margin:0 auto}
.qcard{position:relative; max-width:860px; margin:0 auto; background:var(--card); border-radius:28px; padding:clamp(26px,4.4vw,56px); box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 30px 60px -30px rgba(40,34,26,.35)}
.qtop{display:flex; align-items:center; gap:18px; margin-bottom:28px; font:400 12px var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2)}
.qring{width:46px; height:46px; flex:none}
.qring circle{fill:none; stroke-width:2}
.qring .bg{stroke:rgba(23,21,19,.14)}
.qring .fg{stroke:var(--ink); stroke-linecap:round; transition:stroke-dashoffset .8s var(--ease); transform:rotate(-90deg); transform-origin:50% 50%}
.qback{margin-left:auto; background:none; border:0; cursor:pointer; font:inherit; letter-spacing:inherit; text-transform:inherit; color:var(--ink-2); padding:10px 0; display:inline-flex; gap:8px; align-items:center}
.qback[disabled]{opacity:0; pointer-events:none}
.qstep{transition:opacity .5s var(--ease), transform .5s var(--ease)}
.qstep.out{opacity:0; transform:translateY(12px)}
.qq{font:400 clamp(24px,2.7vw,36px)/1.22 var(--display); color:var(--ink); margin:0 0 26px; max-width:26ch}
.qopts{display:grid; gap:10px}
.qopt{display:flex; gap:16px; align-items:center; width:100%; text-align:left; padding:16px 20px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.28); cursor:pointer; font-size:16px; line-height:1.45; color:var(--ink); transition:border-color .35s var(--ease), background-color .35s var(--ease), transform .45s var(--ease)}
.qopt b{flex:none; width:28px; height:28px; border-radius:50%; border:1px solid var(--line-strong); display:grid; place-items:center; font:400 11px var(--mono); color:var(--ink-2); transition:background-color .35s var(--ease), color .35s var(--ease)}
.qopt:hover{border-color:var(--ink); transform:translateX(4px)}
.qopt.sel{border-color:var(--ink); background:rgba(255,255,255,.55)}
.qopt.sel b{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.qstart{text-align:center}
.qstart p{max-width:52ch; margin:0 auto 28px}
.qstart .facts{display:flex; justify-content:center; gap:26px; flex-wrap:wrap; margin-bottom:30px; font:400 12px var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2)}
.qres .tag{font:400 12px var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--ink-2); margin:0 0 10px}
.qres h3{font:400 clamp(34px,4.4vw,58px)/1.04 var(--display); color:var(--ink); margin:0 0 14px}
.qres .story{font:400 clamp(20px,2vw,26px)/1.35 var(--display); color:var(--ink-2); margin:0 0 26px}
.qres-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:26px 0}
.qres-grid div{background:rgba(255,255,255,.34); border-radius:16px; padding:18px 20px}
.qres-grid h4{font:400 11px var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); margin:0 0 6px}
.qres-grid p{margin:0; font-size:15px; line-height:1.55; color:var(--ink)}
.qres .first{background:var(--night); color:var(--cream-2); border-radius:18px; padding:22px 24px; margin:0 0 26px}
.qres .first h4{font:400 11px var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:0 0 8px}
.qres .first p{margin:0; color:var(--cream)}
.qres .also{font-size:14.5px; color:var(--ink-2)}
.qres .acts{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.qres .note{margin:22px 0 0; font-size:12.5px; color:var(--ink-3)}
.qbars{display:grid; gap:8px; margin:6px 0 4px}
.qbars div{display:grid; grid-template-columns:150px 1fr 26px; gap:12px; align-items:center; font-size:13px; color:var(--ink-2)}
.qbars i{height:6px; border-radius:6px; background:rgba(23,21,19,.1); position:relative; overflow:hidden}
.qbars i::after{content:""; position:absolute; inset:0; background:var(--ink); transform:scaleX(var(--v,0)); transform-origin:left; transition:transform 1.2s var(--ease)}
@media (max-width:640px){
  .qres-grid{grid-template-columns:1fr}
  .qbars div{grid-template-columns:110px 1fr 22px; font-size:12px}
  .qopt{padding:14px 16px; font-size:15px}
  .qcard{border-radius:22px}
}

/* ---------- AULA GRATUITA ---------- */
.lesson{background:var(--night-2); padding:clamp(96px,13vh,150px) 0; color:var(--cream-2)}
.lesson-head{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,80px); align-items:end; margin-bottom:44px}
.lesson-head .h2{color:var(--cream)}
.lesson-head .h2 em{font-style:normal; color:var(--gold)}
.meta{display:flex; gap:22px; flex-wrap:wrap; font:400 12px var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--cream-2); margin-top:22px}
.meta span{display:inline-flex; align-items:center; gap:8px}
.meta span::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--gold)}
.player{position:relative; aspect-ratio:16/9; border-radius:22px; overflow:hidden; background:#0f0e0c; box-shadow:0 40px 90px -40px rgba(0,0,0,.8), 0 0 0 1px var(--cream-line)}
.player video{width:100%; height:100%; object-fit:cover; background:#0f0e0c}
.player .poster{position:absolute; inset:0; border:0; padding:0; cursor:pointer; background:#0f0e0c; display:block; width:100%}
.player .poster img{width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease), opacity .6s var(--ease)}
.player .poster::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(15,14,12,.78), rgba(15,14,12,.08) 55%)}
.player .poster:hover img{transform:scale(1.025)}
.play{position:absolute; left:clamp(18px,3vw,34px); bottom:clamp(16px,3vw,30px); z-index:2; width:84px; height:84px; border-radius:50%; background:rgba(231,224,212,.92); display:grid; place-items:center; transition:transform .6s var(--ease)}
.play::before{content:""; position:absolute; inset:-10px; border-radius:50%; border:1px solid rgba(231,224,212,.45); animation:pulse 3.6s var(--ease-soft) infinite; animation-delay:-1.4s}
@keyframes pulse{0%{transform:scale(.9); opacity:0}40%{opacity:1}100%{transform:scale(1.25); opacity:0}}
.play svg{width:28px; height:28px; margin-left:5px; fill:var(--ink)}
.player .poster:hover .play{transform:scale(1.06)}
.poster-cap{position:absolute; left:calc(clamp(18px,3vw,34px) + 104px); bottom:clamp(22px,3.4vw,40px); z-index:2; text-align:left; color:var(--cream)}
.poster-cap b{display:block; font:400 11px var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--gold); font-weight:400}
.poster-cap span{display:block; font:400 clamp(22px,2.6vw,34px)/1.1 var(--display); margin-top:6px}
.player.playing .poster{opacity:0; pointer-events:none; transition:opacity .5s var(--ease)}
.player .err{position:absolute; inset:0; display:none; place-items:center; text-align:center; padding:24px; color:var(--cream)}
.player.failed .err{display:grid}
.lesson-body{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,72px); margin-top:56px}
.chapters h3,.worksheet h3{font:400 12px var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin:0 0 14px}
.chapters ol{list-style:none; margin:0; padding:0}
.chapters button{display:grid; grid-template-columns:58px 1fr; gap:10px; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--cream-line); padding:12px 0; cursor:pointer; color:var(--cream-2); font-size:15px; transition:color .35s var(--ease), padding-left .45s var(--ease)}
.chapters button:hover,.chapters button.on{color:var(--cream); padding-left:8px}
.chapters button.on time{color:var(--gold)}
.chapters time{font:400 12px var(--mono); letter-spacing:.1em; color:var(--cream-2); padding-top:3px}
.worksheet{background:var(--paper-hi); color:var(--ink-2); border-radius:22px; padding:clamp(22px,3vw,34px)}
.worksheet h3{color:var(--ink-2)}
.worksheet .wt{font:400 clamp(22px,2.2vw,28px)/1.2 var(--display); color:var(--ink); margin:0 0 10px}
.worksheet label{display:block; font:400 11px var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); margin:16px 0 8px}
.worksheet input,.worksheet textarea,.apply input,.apply textarea,.apply select{width:100%; border:1px solid var(--line-strong); background:rgba(255,255,255,.45); border-radius:12px; padding:12px 14px; font-size:15.5px; line-height:1.5; color:var(--ink); transition:border-color .35s var(--ease), background-color .35s var(--ease)}
.worksheet textarea{min-height:128px; resize:vertical}
.worksheet input:focus,.worksheet textarea:focus,.apply input:focus,.apply textarea:focus,.apply select:focus{outline:none; border-color:var(--ink); background:rgba(255,255,255,.7)}
.cols{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.ws-foot{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-top:16px; font-size:12.5px; color:var(--ink-3)}
.ws-foot button{background:none; border:0; padding:8px 0; cursor:pointer; font:500 12px var(--text); letter-spacing:.12em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--line-strong)}
.homework{margin-top:22px; padding:18px 20px; border-radius:16px; background:var(--night-3); color:var(--cream-2); font-size:15px}
.homework b{display:block; font:400 11px var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; font-weight:400}
.lesson-next{margin-top:34px; display:flex; gap:18px; align-items:center; flex-wrap:wrap}
@media (max-width:900px){
  .lesson-head,.lesson-body{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr}
  .play{width:64px; height:64px}
  .poster-cap{left:calc(clamp(18px,3vw,34px) + 80px)}
  .play svg{width:22px; height:22px}
}

/* ---------- BIBLIOTECA ---------- */
.library{padding:clamp(96px,13vh,150px) 0}
.lib-head{display:flex; justify-content:space-between; align-items:end; gap:30px; flex-wrap:wrap; margin-bottom:56px}
.lib-head .h2{max-width:14ch}
.lib-head .lede{max-width:44ch; margin:0}
.books{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.6vw,36px)}
.book{display:flex; flex-direction:column}
.book .cover3d{perspective:1400px; padding:18px 18px 30px; background:var(--paper-lo); border-radius:22px; display:grid; place-items:center; position:relative; overflow:hidden}
.book .cover3d::before{content:""; position:absolute; left:16%; right:16%; bottom:18px; height:20px; background:radial-gradient(50% 50% at 50% 50%, rgba(23,21,19,.35), transparent 70%); filter:blur(6px)}
.book .cover3d img{width:72%; aspect-ratio:2/3; object-fit:cover; border-radius:2px 4px 4px 2px; transform:rotateY(-16deg) rotateX(2deg); transform-origin:left center; box-shadow:-1px 0 0 rgba(255,255,255,.25) inset, 18px 24px 40px -12px rgba(23,21,19,.45), 2px 2px 0 rgba(23,21,19,.12); transition:transform 1s var(--ease); position:relative}
.book:hover .cover3d img{transform:rotateY(-6deg) rotateX(1deg) translateY(-6px)}
.book .vol{margin:22px 0 6px; font:400 11px var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--ink-2)}
.book h3{font:400 clamp(24px,2.2vw,30px)/1.15 var(--display); color:var(--ink); margin:0 0 10px}
.book p{font-size:15px; margin:0 0 12px}
.book ul{list-style:none; padding:0; margin:0 0 20px; font-size:14px}
.book li{padding:7px 0 7px 22px; border-bottom:1px solid var(--line); position:relative}
.book li::before{content:""; position:absolute; left:2px; top:15px; width:9px; height:9px; border:1px solid var(--ink); border-radius:50%}
.book .acts{margin-top:auto; display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.book .size{font:400 11px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.also{margin-top:64px; padding-top:34px; border-top:1px solid var(--line); display:grid; grid-template-columns:auto 1fr 1fr; gap:clamp(18px,3vw,40px); align-items:start}
.also h3{font:400 12px var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--ink-2); margin:6px 0 0; max-width:16ch; line-height:1.7}
.guide{display:grid; grid-template-columns:88px 1fr; gap:18px; align-items:start; text-decoration:none; padding:6px; border-radius:16px; transition:background-color .4s var(--ease)}
.guide:hover{background:rgba(255,255,255,.22)}
.guide img{width:88px; border-radius:3px; box-shadow:6px 10px 20px -8px rgba(23,21,19,.4)}
.guide b{display:block; font:400 19px/1.25 var(--display); color:var(--ink); font-weight:400; margin-bottom:4px}
.guide span{display:block; font-size:14px; line-height:1.55}
.guide em{display:inline-block; margin-top:8px; font:500 12px var(--text); font-style:normal; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--line-strong)}
@media (max-width:980px){
  .books{grid-template-columns:1fr; max-width:560px; margin:0 auto}
  .also{grid-template-columns:1fr}
}

/* ---------- SOBRE + FEED ---------- */
.about{background:var(--paper-hi); padding:clamp(96px,13vh,150px) 0}
.about-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,6vw,100px); align-items:center}
.portrait{position:relative; border-radius:220px 220px 22px 22px; overflow:hidden; aspect-ratio:4/5; background:var(--paper-lo)}
.portrait img{width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 1.6s var(--ease)}
.about.in .portrait img{transform:scale(1)}
.portrait figcaption{position:absolute; left:16px; bottom:14px; font:400 10.5px var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--cream); background:rgba(23,21,19,.55); padding:6px 10px; border-radius:99px}
.about-text .h2{margin-bottom:26px}
.about-text p{max-width:54ch}
.about-text .sign{font:400 clamp(22px,2.2vw,30px)/1.3 var(--display); color:var(--ink); margin:26px 0 24px}
.feed{margin-top:clamp(70px,10vh,110px)}
.feed-head{display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap; margin-bottom:22px}
.feed-head h3{font:400 clamp(24px,2.4vw,32px)/1.15 var(--display); color:var(--ink)}
.reels{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px}
.reel{position:relative; display:block; aspect-ratio:9/16; border-radius:16px; overflow:hidden; background:var(--night); text-decoration:none}
.reel img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.reel:hover img{transform:scale(1.05)}
.reel span{position:absolute; left:10px; bottom:10px; font:400 10px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--cream); background:rgba(23,21,19,.6); padding:5px 8px; border-radius:99px; opacity:0; transform:translateY(6px); transition:opacity .4s var(--ease), transform .4s var(--ease)}
.reel:hover span,.reel:focus-visible span{opacity:1; transform:none}
@media (max-width:980px){
  .about-grid{grid-template-columns:1fr}
  .portrait{max-width:440px}
  .reels{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 calc(var(--gut) * -1); padding:0 var(--gut) 8px; scrollbar-width:none}
  .reels::-webkit-scrollbar{display:none}
  .reel{flex:0 0 42vw; max-width:220px; scroll-snap-align:start}
  .reel span{opacity:1; transform:none}
}

/* ---------- MENTORIA + CANDIDATURA ---------- */
.mentor{background:var(--night); padding:clamp(100px,14vh,170px) 0; position:relative; overflow:hidden}
.mentor .orbit{position:absolute; right:-22vw; top:-10vw; width:70vw; aspect-ratio:1; border:1px solid var(--cream-line); border-radius:50%; pointer-events:none}
.mentor .orbit::after{content:""; position:absolute; inset:9%; border:1px solid rgba(190,171,123,.18); border-radius:50%}
.mentor-head{max-width:880px; position:relative}
.mentor-head .h2{margin-bottom:26px}
.mentor-head .lede{max-width:60ch}
.steps{list-style:none; margin:64px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2.4vw,30px); counter-reset:s; position:relative}
.steps::before{content:""; position:absolute; left:0; right:0; top:36px; height:1px; background:var(--cream-line)}
.steps li{position:relative; padding-top:0}
.steps .n{display:grid; place-items:center; width:72px; height:72px; border-radius:50%; background:var(--night); border:1px solid rgba(190,171,123,.5); font:400 26px var(--display); color:var(--gold); margin-bottom:22px; position:relative}
.steps h3{font:400 22px/1.2 var(--display); color:var(--cream); margin:0 0 8px}
.steps p{font-size:15px; margin:0; color:var(--cream-2)}
.fit{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,40px); margin-top:72px}
.fit > div{border:1px solid var(--cream-line); border-radius:22px; padding:clamp(22px,3vw,34px)}
.fit h3{font:400 12px var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin:0 0 16px}
.fit ul{list-style:none; padding:0; margin:0}
.fit li{padding:10px 0 10px 30px; border-bottom:1px solid var(--cream-line); position:relative; color:var(--cream)}
.fit li:last-child{border-bottom:0}
.fit li::before{content:""; position:absolute; left:2px; top:17px; width:14px; height:8px; border-left:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold); transform:rotate(-45deg)}
.fit .not li::before{width:12px; height:0; border-left:0; border-bottom:1.5px solid var(--cream-2); transform:none; top:22px}
.fit .not li{color:var(--cream-2)}
.details{display:flex; gap:26px; flex-wrap:wrap; margin-top:40px; font:400 12px var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--cream-2)}
.details span{display:inline-flex; align-items:center; gap:10px}
.details span::before{content:""; width:6px; height:6px; border-radius:50%; border:1px solid var(--gold)}
.apply{margin-top:80px; display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,5vw,80px); align-items:start}
.apply-intro .h2{font-size:clamp(30px,3.4vw,46px); margin-bottom:18px}
.apply-intro .face{display:flex; align-items:center; gap:16px; margin-top:28px}
.apply-intro .face img{width:64px; height:64px; border-radius:50%; object-fit:cover; border:1px solid rgba(190,171,123,.5)}
.apply-intro .face p{margin:0; font-size:14.5px; line-height:1.5}
.apply form{background:var(--paper-hi); border-radius:26px; padding:clamp(22px,3.4vw,40px); color:var(--ink-2)}
.apply .row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.apply label{display:block; font:400 11px var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); margin:16px 0 8px}
.apply label i{font-style:normal; text-transform:none; letter-spacing:0; font-family:var(--text); color:var(--ink-3)}
.apply textarea{min-height:110px; resize:vertical}
.apply select{appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position:calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size:5px 5px; background-repeat:no-repeat; padding-right:40px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips label{margin:0; position:relative}
.chips input{position:absolute; opacity:0; width:1px; height:1px}
.chips span{display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border:1px solid var(--line-strong); border-radius:99px; font:400 14px var(--text); letter-spacing:0; text-transform:none; color:var(--ink); cursor:pointer; transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease)}
.chips input:checked + span{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.chips input:focus-visible + span{outline:2px solid var(--ink); outline-offset:2px}
.agree{display:flex!important; gap:12px; align-items:flex-start; text-transform:none!important; letter-spacing:0!important; font:300 14px/1.5 var(--text)!important; color:var(--ink-2)!important; margin-top:20px!important; cursor:pointer}
.agree input{width:18px!important; height:18px; margin-top:2px; flex:none; accent-color:var(--ink)}
.form-foot{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:24px}
.form-foot small{font-size:12.5px; color:var(--ink-3); max-width:36ch}
.form-msg{display:none}
.apply form.sent .fields{display:none}
.apply form.sent .form-msg{display:block}
.form-msg h3{font:400 clamp(26px,2.6vw,34px)/1.15 var(--display); color:var(--ink); margin:0 0 12px}
.form-msg pre{white-space:pre-wrap; font:400 13px/1.6 var(--mono); background:rgba(255,255,255,.45); border-radius:12px; padding:14px 16px; max-height:220px; overflow:auto; color:var(--ink)}
.form-msg .acts{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}
.err-msg{color:#7a2a1c; font-size:13.5px; margin:10px 0 0; min-height:1.2em}
@media (max-width:980px){
  .steps{grid-template-columns:1fr 1fr; row-gap:40px}
  .steps::before{display:none}
  .fit,.apply{grid-template-columns:1fr}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .apply .row{grid-template-columns:1fr}
}

/* ---------- FAQ ---------- */
.faq{padding:clamp(96px,13vh,150px) 0}
.faq-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,6vw,100px); align-items:start}
.faq-grid .h2{position:sticky; top:120px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; align-items:baseline; padding:24px 0; font:400 clamp(19px,1.8vw,24px)/1.3 var(--display); color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none; width:14px; height:14px; position:relative; top:2px}
.faq summary i::before,.faq summary i::after{content:""; position:absolute; left:0; right:0; top:6px; height:1.5px; background:var(--ink); transition:transform .5s var(--ease)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq details p{margin:0 0 24px; max-width:60ch}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}.faq-grid .h2{position:static}}

/* ---------- CTA FINAL + RODAPÉ ---------- */
.final{background:var(--night-2); padding:clamp(110px,16vh,190px) 0 clamp(80px,12vh,130px); text-align:center; position:relative; overflow:hidden}
.final .arcs{position:absolute; left:50%; bottom:-46vw; width:92vw; aspect-ratio:1; transform:translateX(-50%); border:1px solid var(--cream-line); border-radius:50%; pointer-events:none}
.final .arcs::before{content:""; position:absolute; left:50%; top:-30vw; height:42vw; border-left:1px solid var(--cream-line)}
.final h2{font:400 clamp(40px,6.6vw,104px)/1.02 var(--display); color:var(--cream); max-width:13ch; margin:0 auto 26px; letter-spacing:-.016em; position:relative}
.final p{max-width:46ch; margin:0 auto 34px; color:var(--cream-2); position:relative}
.final .acts{display:flex; justify-content:center; gap:14px; flex-wrap:wrap; position:relative}
.foot{background:var(--night-2); color:var(--cream-2); padding:0 0 40px; font-size:14px}
.foot-in{border-top:1px solid var(--cream-line); padding-top:40px; display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:30px}
.foot .mark{color:var(--cream); display:inline-block; margin-bottom:14px}
.foot ul{list-style:none; padding:0; margin:0}
.foot li{margin:0 0 8px}
.foot a{text-decoration:none; color:var(--cream-2); transition:color .3s var(--ease)}
.foot a:hover{color:var(--cream)}
.foot h3{font:400 11px var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin:4px 0 14px}
.legal{grid-column:1/-1; border-top:1px solid var(--cream-line); padding-top:22px; margin-top:10px; font-size:12.5px; line-height:1.65; color:rgba(181,175,165,.85); display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap}
.legal p{margin:0; max-width:80ch}
@media (max-width:760px){.foot-in{grid-template-columns:1fr}}

/* ---------- entradas ---------- */
.rv{opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1.1s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv.in.d1{transition-delay:.08s}.rv.in.d2{transition-delay:.16s}.rv.in.d3{transition-delay:.24s}.rv.in.d4{transition-delay:.32s}.rv.in.d5{transition-delay:.4s}
.rv.in.done{transition-delay:0s}

/* movimento reduzido (classe aplicada ao vivo pelo JS e pela media query) */
.rm .hero{height:auto}
.rm .stage{position:relative}
.rm .h-center,.rm .cue{display:none}
.rm .pattern{height:auto}
.rm .pattern .sticky{position:relative; height:auto; min-height:100vh; padding:150px 0 130px}
.rm .slides{display:flex; flex-direction:column; gap:44px; min-height:0}
.rm .slide{opacity:1; transform:none; visibility:visible; font-size:clamp(24px,3vw,40px)}
.rm .slide .w{opacity:1}
.rm .p-ticks,.rm .p-count{display:none}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

@media (pointer:coarse){
  .btn,.link,.qopt,.chapters button{min-height:44px}
  .link{display:inline-flex; align-items:center}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition:none!important; transition-delay:0s!important}
  .rv{opacity:1!important; transform:none!important}
  .h-title .w{opacity:1!important; transform:none!important}
  .hero{height:auto}
  .stage{position:relative; height:100vh; height:100svh}
}

.qloops{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 auto 30px; max-width:640px; list-style:none; padding:0}
.qloops li{padding:9px 16px; border:1px solid var(--line-strong); border-radius:99px; font:400 13px var(--text); color:var(--ink)}
@media (min-width:901px){.loop-list{display:none}}

/* ---------- seções cósmicas: a página de papel desliza sobre o cosmos ---------- */
.cosmic{position:relative; clip-path:inset(0); isolation:isolate}
.cosmic > .wrap{position:relative; z-index:1}
.cosmic > .orbit,.cosmic > .arcs{z-index:1}
.cosmic .cbg{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:var(--night-2)}
.cosmic .cbg img,.cosmic .cbg canvas{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.cosmic .cbg img{animation:kenburns 90s var(--ease-soft) infinite alternate; animation-play-state:paused; transform-origin:50% 50%}
.cosmic.live .cbg img{animation-play-state:running}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.12)}}
.cosmic .cbg::after{content:""; position:absolute; inset:0}
.cbg-lesson img{object-position:50% 50%}
.cbg-lesson::after{background:linear-gradient(rgba(28,27,24,.72), rgba(28,27,24,.62) 40%, rgba(28,27,24,.82))}
.cbg-portal img{object-position:50% 45%}
.cbg-portal::after{background:linear-gradient(90deg, rgba(28,27,24,.9) 0%, rgba(28,27,24,.74) 38%, rgba(28,27,24,.38) 70%, rgba(28,27,24,.32) 100%), linear-gradient(rgba(28,27,24,.5), transparent 25%, transparent 75%, rgba(28,27,24,.6))}
.cbg-grid img{object-position:50% 55%; opacity:.75}
.cbg-grid canvas{opacity:.85}
.cbg-grid::after{background:radial-gradient(60% 60% at 50% 60%, rgba(28,27,24,.25), rgba(28,27,24,.7) 100%)}
@media (hover:hover) and (pointer:fine) and (min-width:900px){
  .cosmic .cbg{position:fixed; top:0; left:0; width:100%; height:100vh; height:100lvh}
}
.mentor{background:var(--night-2)}
.lesson{background:var(--night-2)}

/* ---------- pôster vertical: imagem inteira no centro, cópia desfocada preenche as laterais ---------- */
.poster img.blur{position:absolute; inset:-6%; width:112%; height:112%; object-fit:cover; filter:blur(26px) brightness(.62) saturate(1.1); animation:none!important; transform:none!important}
.poster img.main{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; opacity:1}
.poster img.main.cl-nebula{object-fit:cover; object-position:50% 50%}
.h-cosmos.poster img.main{object-position:50% 50%}
.cbg-portal.poster img.main{object-position:50% 50%}
.cbg-grid.poster img.main{object-position:50% 40%}
.cbg-lesson.poster img.main{object-position:50% 50%}
.h-cosmos.poster img{transform:scale(calc(1.02 + var(--cz,0) * .06)); transform-origin:50% 50%}
.cosmos.poster .cl-nebula{transform:scale(var(--z,1.08)); transform-origin:50% 50%}
.h-cosmos .h-planet{transform:scale(1.08); transform-origin:50% 50%}
.cosmos.poster img.blur{display:none}
.cbg-lesson.poster img.main{object-position:50% 40%}
.cbg-lesson::after{background:linear-gradient(rgba(28,27,24,.7), rgba(28,27,24,.55) 40%, rgba(28,27,24,.8))}
.cbg-grid.poster img.main{opacity:.9}
.cbg-grid canvas{opacity:.75}
.cbg-portal::after{background:linear-gradient(90deg, rgba(28,27,24,.86) 0%, rgba(28,27,24,.6) 35%, rgba(28,27,24,.25) 60%, rgba(28,27,24,.45) 100%), linear-gradient(rgba(28,27,24,.5), transparent 25%, transparent 75%, rgba(28,27,24,.6))}

/* ---------- retrato no hero (desktop): composição ocupa os 62% da esquerda ---------- */
.h-portrait{display:none}
@media (min-width:721px){
  .stage{--lw:.62}
  .h-brand,.h-words,.h-ctas{right:38%}
  .h-title{right:calc(38% + var(--gut)); max-width:13ch}
  .h-side{right:calc(69% + 28px)}
  .h-center{left:31%}
  .cue{left:31%}
  .h-portrait{display:block; position:absolute; right:2vw; bottom:0; height:94%; z-index:2; pointer-events:none; opacity:0; transform:translateY(24px); transition:opacity 1.4s var(--ease) .3s, transform 1.6s var(--ease) .3s}
  .h-portrait::before{content:""; position:absolute; left:10%; right:10%; top:8%; bottom:10%; border-radius:50%; background:radial-gradient(closest-side, rgba(190,171,123,.28), transparent); filter:blur(40px)}
  .h-portrait img{position:relative; height:100%; width:auto; filter:drop-shadow(0 30px 60px rgba(20,19,16,.45))}
  .loaded .h-portrait{opacity:calc((1 - var(--f,0) * .35) * (1 - var(--hf,0))); transform:none}
}
@media (min-width:721px) and (max-width:1100px){.h-portrait{height:80%; right:0}}

/* ---------- passagens entre seções: sem corte seco ---------- */
.sec-paper{position:relative; z-index:2; border-radius:44px 44px 0 0; margin-top:-44px; box-shadow:0 -30px 60px -30px rgba(20,19,16,.55)}
.sec-paper::before{content:""; position:absolute; left:0; right:0; top:0; height:140px; border-radius:inherit; background:linear-gradient(to bottom, rgba(28,27,24,.22), transparent); pointer-events:none}
.sec-blend{position:relative; z-index:2}
.sec-blend::before{content:""; position:absolute; left:0; right:0; top:0; height:180px; background:linear-gradient(to bottom, var(--from, var(--paper)), transparent); pointer-events:none; z-index:0}
.sec-blend > *{position:relative; z-index:1}
.cosmic.sec-dissolve::before{content:""; position:absolute; left:0; right:0; top:0; height:160px; background:linear-gradient(to bottom, var(--from, var(--paper)) 0%, rgba(200,189,174,.35) 45%, rgba(28,27,24,0) 100%); z-index:1; pointer-events:none}
.quiz{--from:var(--paper)}
.about{--from:var(--paper)}
.lesson{--from:var(--paper-hi)}
.mentor{--from:var(--paper-hi)}
.final{--from:var(--paper)}
/* fio dourado que costura as seções ao entrar */
.seam{position:absolute; left:50%; top:0; width:1px; height:140px; margin-left:-.5px; background:linear-gradient(var(--gold), transparent); transform:scaleY(0); transform-origin:top; transition:transform 1.4s var(--ease); z-index:3; pointer-events:none}
.sec-in .seam{transform:scaleY(1)}
.kicker::before{transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease) .2s}
.in .kicker::before,.kicker.in::before,.sec-in .kicker::before{transform:scaleX(1)}
@media (max-width:720px){.sec-paper{border-radius:28px 28px 0 0; margin-top:-28px}}
@media (prefers-reduced-motion:reduce){.seam{transform:none} .kicker::before{transform:none}}

/* ---------- aura: núcleo de luz no peito da silhueta ---------- */
.h-aura{position:absolute; inset:0; width:100%; height:100%; z-index:1; opacity:calc(1 - var(--co,0)); pointer-events:none}
.h-cosmos .h-planet{z-index:2}

/* ---------- ciclo: cursor de demonstração + dica ---------- */
.lf-cursor{position:absolute; left:0; top:0; width:26px; height:26px; z-index:5; pointer-events:none; opacity:0; transform:translate(var(--cx,50%),var(--cy,50%)); transition:transform 1.1s cubic-bezier(.45,.05,.25,1), opacity .5s var(--ease)}
.lf-cursor svg{width:26px; height:26px; fill:var(--ink); stroke:var(--paper); stroke-width:1.4; stroke-linejoin:round; filter:drop-shadow(0 4px 8px rgba(23,21,19,.35)); transform-origin:20% 15%; transition:transform .18s var(--ease)}
.lf-cursor i{position:absolute; left:2px; top:2px; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; border:1.5px solid var(--ink); opacity:0; transform:scale(.3)}
.lf-cursor.on{opacity:1}
.lf-cursor.click svg{transform:scale(.82)}
.lf-cursor.click i{animation:lfripple .7s var(--ease) forwards}
@keyframes lfripple{0%{opacity:.7; transform:scale(.3)}100%{opacity:0; transform:scale(1.4)}}
.lf-hint{position:absolute; left:0; right:0; bottom:-6px; margin:0; text-align:center; font:400 11px var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); transition:opacity .6s var(--ease)}
.lf-hint::before{content:""; display:inline-block; width:7px; height:7px; margin-right:10px; border-radius:50%; background:var(--ink); vertical-align:1px; animation:lfdot 1.8s var(--ease-soft) infinite}
@keyframes lfdot{0%,100%{opacity:.25; transform:scale(.8)}50%{opacity:1; transform:scale(1.15)}}
.lf-hint .h-touch{display:none}
@media (hover:none){.lf-hint .h-desk{display:none}.lf-hint .h-touch{display:inline}}
.loop-fig.touched .lf-hint{opacity:0}
.loop-fig.touched .lf-cursor{opacity:0!important}
.st:hover circle.dotc{r:8}
@media (prefers-reduced-motion:reduce){.lf-cursor{display:none}.lf-hint::before{animation:none}}