/* EscutAdor — site/assets/css/site.css
   Pele: fundo azul-preto, serifa para a fala humana, mono para a máquina.
   Motion: transform/opacity só; sem blur em nada que se mexa.
   Piso tipográfico: nada abaixo de .75rem (12 px). */

:root{
  --bg:#070a12; --bg2:#04060c; --win:#0b1120; --card:#121b31;
  --ink:#f3ece0; --ink2:#d9d2c5; --mute:#8e9bb5;
  --blue:#86b6ff; --blue2:#2a62e6; --coral:#ff6b4a; --ans:#c9daff;
  --line:rgba(134,182,255,.14); --line2:rgba(134,182,255,.28);
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --gutter:clamp(16px,5vw,56px);
  --wrap:1180px;
  --mono-s:.75rem;      /* o menor mono do site: 12 px */
  --track:.08em;        /* espaçamento padrão dos rótulos em caixa alta */
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--serif);font-size:clamp(17px,1vw + 12px,20px);line-height:1.4;
  -webkit-font-smoothing:antialiased;overflow-x:clip;min-height:100svh;
}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ol,ul{list-style:none}
em{font-style:italic}
b,strong{font-weight:400;color:var(--ink)}
:focus-visible{outline:2px solid var(--coral);outline-offset:4px;border-radius:4px}
::selection{background:rgba(255,107,74,.35);color:#fff}

.wrap{width:min(var(--wrap),100%);margin-inline:auto;padding-inline:var(--gutter)}
.mono{font-family:var(--mono)}
.kicker{font-family:var(--mono);font-size:var(--mono-s);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:500}
.accent{color:var(--coral);font-style:italic}
.wordmark{font-family:var(--serif);font-size:1.35rem;letter-spacing:-.01em;color:var(--ink);line-height:1}
.wordmark b{color:var(--blue)}
h1,h2,h3{font-weight:400;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:clamp(2rem,3.2vw + .6rem,3.4rem);line-height:1.02}
h3{font-size:1.4rem;line-height:1.1}
.skip{position:absolute;left:var(--gutter);top:-4rem;z-index:50;background:var(--ink);color:var(--bg);padding:.6em 1em;border-radius:6px;font-family:var(--mono);font-size:.8rem}
.skip:focus{top:1rem}

/* ---------- reveals por rolagem (só com JS e sem movimento reduzido) ----------
   texto sobe 14 px; caixa (data-rv="box") só aparece e assenta (scale .985) */
.anima [data-rv]{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);transition-delay:var(--d,0ms)}
.anima [data-rv="box"]{transform:scale(.985)}
.anima [data-rv].in{opacity:1;transform:none}

/* ---------- chão (gradientes suaves, sem blur; a deriva é só transform e pausa fora da tela) ---------- */
.chao{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.chao::before{content:"";position:absolute;inset:-25%;
  background:
    radial-gradient(42% 38% at 20% 14%,rgba(42,98,230,.30),transparent 70%),
    radial-gradient(30% 28% at 86% 20%,rgba(134,182,255,.12),transparent 70%),
    radial-gradient(38% 34% at 76% 92%,rgba(255,107,74,.14),transparent 70%);
  animation:deriva 26s var(--ease-in-out) infinite alternate}
html.js .hero:not(.vivo) .chao::before{animation-play-state:paused}
@keyframes deriva{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(2%,3%,0) scale(1.05)}}
.chao .aneis{position:absolute;left:50%;top:40%;width:150vmax;height:150vmax;transform:translate(-50%,-50%)}

/* ---------- nav ---------- */
.nav{position:relative;z-index:5}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.2rem;border-bottom:1px solid var(--line)}
.marca{display:inline-flex;align-items:center;gap:.75rem}
.marca img{width:46px;height:46px;border-radius:11px;box-shadow:0 6px 18px -8px rgba(134,182,255,.5)}
.nav .wordmark{font-size:1.9rem}
@media (max-width:480px){.marca img{width:38px;height:38px;border-radius:9px}.nav .wordmark{font-size:1.5rem}}
.links{display:flex;align-items:center;gap:1.6rem;font-family:var(--mono);font-size:var(--mono-s);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.links a{position:relative;padding:.3em 0;transition:color .2s ease}
.links a:not(.pill):not(.selo)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
.links a:not(.pill):not(.selo):hover{color:var(--ink)}
.links a:not(.pill):not(.selo):hover::after{transform:scaleX(1)}
.nav .selo-nav{margin-left:.4rem;border-radius:7px}
.nav .selo-nav img{height:40px}
@media (max-width:480px){.nav .selo-nav img{height:36px}}
.pill{color:var(--ink);border:1px solid rgba(243,236,224,.3);border-radius:999px;padding:.6em 1.1em;transition:border-color .2s ease,background .2s ease,transform .2s var(--ease-out)}
.pill:hover{border-color:var(--ink);background:rgba(243,236,224,.07)}
.pill:active{transform:scale(.98)}
@media (max-width:640px){.nav .links a:not(.pill):not(.selo){display:none}}

/* ---------- selo oficial da Mac App Store (SVG da Apple, nunca redesenhado) ---------- */
.selo{position:relative;display:inline-block;border-radius:9px;transition:transform .25s var(--ease-out),box-shadow .25s ease;will-change:transform}
.selo img{height:56px;width:auto}
@media (hover:hover) and (pointer:fine){
  .selo:hover{transform:translateY(-2px);box-shadow:0 16px 36px -14px rgba(134,182,255,.6)}
}
.selo:active{transform:translateY(0) scale(.985)}
@media (max-width:480px){.selo img{height:48px}}
/* onda sonora ao clicar: três anéis finos que se abrem a partir do selo e somem (pedido do Ramon, 11/10) */
.onda{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;border:1px solid rgba(134,182,255,.7);opacity:0;animation:onda .95s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes onda{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.34)}}
@media (prefers-reduced-motion:reduce){.onda{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero-in{display:grid;grid-template-columns:1fr;gap:0;align-items:center;
  padding-block:clamp(3rem,7vw,6.5rem) clamp(3rem,6vw,5rem)}
.hero .kicker{display:flex;align-items:center;gap:.8em;margin-bottom:1.5rem}
.ponto{display:inline-block;width:.55em;height:.55em;border-radius:50%;background:var(--coral);box-shadow:0 0 0 0 rgba(255,107,74,.6);animation:ping 1.8s ease-out infinite}
@keyframes ping{to{box-shadow:0 0 0 .75em rgba(255,107,74,0)}}
h1{font-size:clamp(2.8rem,7.2vw + .4rem,8rem);line-height:.96;max-width:none}
h1 .accent{display:block}
.lede{margin-top:2rem;max-width:52ch;color:var(--ink2);font-size:clamp(1.05rem,1.1vw + .6rem,1.3rem);line-height:1.4}
.lede b{color:#fff;font-style:italic}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:2.2rem}
.more{font-family:var(--mono);font-size:var(--mono-s);letter-spacing:.1em;text-transform:uppercase;color:var(--blue);border-bottom:1px solid rgba(134,182,255,.35);padding-bottom:.3em;transition:border-color .2s ease}
.more:hover{border-color:var(--blue)}

/* a janela de Mac com a demo viva */
.palco-hero{position:relative}
.demo{position:relative;background:var(--win);border:1px solid var(--line2);border-radius:14px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.6);
  animation:pousa 1.2s var(--ease-out) both}
@keyframes pousa{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.demo .barra{display:flex;align-items:center;gap:.7rem;padding:.65rem .9rem;border-bottom:1px solid var(--line);background:rgba(4,6,12,.5)}
.demo .luzes{display:flex;gap:6px}
.demo .luzes i{width:11px;height:11px;border-radius:50%;display:block}
.demo .luzes i:nth-child(1){background:#ff5f57}.demo .luzes i:nth-child(2){background:#febc2e}.demo .luzes i:nth-child(3){background:#28c840}
.demo .titulo{flex:1;text-align:center;font-family:var(--mono);font-size:var(--mono-s);color:var(--mute);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo .vivo{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:var(--mono-s);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  background:rgba(255,107,74,.1);border:1px solid rgba(255,107,74,.35);border-radius:999px;padding:.3em .7em .3em .55em;white-space:nowrap}
.demo .vivo .ponto{width:7px;height:7px}
.demo .barras{display:inline-flex;align-items:flex-end;gap:2px;height:11px}
.demo .barras i{display:block;width:2px;height:40%;background:var(--coral);border-radius:1px;transform-origin:bottom;animation:barra 1s ease-in-out infinite}
.demo .barras i:nth-child(2){animation-delay:.15s}.demo .barras i:nth-child(3){animation-delay:.3s}.demo .barras i:nth-child(4){animation-delay:.45s}
@keyframes barra{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.demo .corpo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:320px}
.demo .fala{padding:1rem 1.1rem 1.2rem;border-right:1px solid var(--line)}
.demo .fala-h{display:flex;justify-content:space-between;font-family:var(--mono);font-size:var(--mono-s);letter-spacing:var(--track);text-transform:uppercase;color:var(--mute);margin-bottom:.9rem}
.linha{display:grid;grid-template-columns:3.2em 1fr;gap:.6rem;align-items:baseline;padding:.5rem .6rem;margin:0 -.6rem;border-radius:9px;transition:background .4s ease,opacity .35s ease}
.linha .quem{font-family:var(--mono);font-size:var(--mono-s);color:var(--mute);letter-spacing:.04em;text-transform:uppercase}
.linha .txt{font-size:clamp(.95rem,1vw,1.08rem);line-height:1.3;min-height:1.3em;color:var(--ink)}
.linha.e-pergunta{background:rgba(255,107,74,.09);box-shadow:inset 3px 0 0 var(--coral)}
.linha.e-pergunta .quem{color:var(--coral)}
.linha.e-pergunta .txt{color:#fff}
.demo.is-live .linha:not(.on){opacity:0}
.demo.is-live .linha.on.digitando .txt::after{content:"";display:inline-block;width:2px;height:.95em;background:var(--mute);margin-left:3px;vertical-align:-2px;animation:pisca .8s steps(1) infinite}
@keyframes pisca{50%{opacity:0}}
.demo .lado{padding:.85rem;display:flex;flex-direction:column;gap:.65rem;min-width:0}
.cartao{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.7rem .85rem;transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.cartao .rotulo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.15rem .6rem;font-family:var(--mono);font-size:var(--mono-s);letter-spacing:var(--track);text-transform:uppercase;color:var(--mute);margin-bottom:.5rem}
.cartao-p .rotulo b{color:var(--coral);font-weight:500}
.cartao-p .p-txt{font-size:1rem;line-height:1.25}
.cartao-r{border-color:rgba(201,218,255,.22);background:linear-gradient(180deg,rgba(201,218,255,.07),rgba(201,218,255,.02)),var(--card)}
.cartao-r .r-txt{color:var(--ans);font-style:italic;font-size:.95rem;line-height:1.35;min-height:3.9em}
.demo.is-live:not(.q-on) .cartao-p,.demo.is-live:not(.a-on) .cartao-r{opacity:.16;transform:translateY(8px)}
.medidor{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;padding-top:.6rem;border-top:1px solid var(--line)}
.medidor .tempo{white-space:nowrap;font-family:var(--mono);font-weight:700;font-size:clamp(1.7rem,2.2vw,2.3rem);letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;color:var(--coral);transition:color .3s ease}
.demo.is-live:not(.done) .medidor .tempo{color:var(--mute)}   /* entre uma pergunta e outra, o último 1,1 s fica em cinza */
.medidor .leg{font-family:var(--mono);font-size:var(--mono-s);letter-spacing:var(--track);text-transform:uppercase;color:var(--mute);line-height:1.45}

@media (max-width:980px){
  .hero-in{grid-template-columns:1fr;gap:2.4rem}
  h1{max-width:none}
}
@media (max-width:640px){
  .demo .corpo{grid-template-columns:1fr;min-height:0}
  .demo .fala{border-right:0;border-bottom:1px solid var(--line)}
  .demo .titulo{display:none}
  .demo .barra{justify-content:space-between}
  .cartao-r .r-txt{min-height:0}
}

/* ---------- prova: 0,5 s · 1,1 s · centavos (os contadores já são o motion; sem reveal) ---------- */
.prova-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.prova .n{padding:1.6rem clamp(1rem,2.5vw,2.2rem) 1.7rem 0;border-right:1px solid var(--line)}
.prova .n + .n{padding-left:clamp(1rem,2.5vw,2.2rem)}
.prova .n:last-child{border-right:0}
.prova .num{font-family:var(--mono);font-weight:700;font-size:clamp(2.4rem,3.6vw,3.6rem);letter-spacing:-.05em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.prova .num small{font-size:.45em;font-weight:500;color:var(--coral);letter-spacing:-.02em;margin-left:.1em}
.prova .num.palavra{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.02em;color:var(--coral)}
.prova p{margin-top:.6rem;color:var(--mute);font-size:1rem;line-height:1.35;max-width:22ch}
.prova .nota{grid-column:1/-1;max-width:none;padding:.8rem 0 1rem;border-top:1px dashed var(--line);margin-top:-1px}
@media (max-width:640px){
  .prova-in{grid-template-columns:1fr}
  .prova .n,.prova .n + .n{padding:1.1rem 0;border-right:0;border-bottom:1px solid var(--line)}
  .prova .n:last-of-type{border-bottom:0}
  .prova p{max-width:none}
}

/* ---------- divisor: batimento desenhado pelo scroll ---------- */
.pulso{display:block;width:100%;height:auto;color:var(--coral);overflow:visible;margin-block:clamp(1rem,3vw,2rem)}
.pulso path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease-in-out)}
.pulso.in path{stroke-dashoffset:0}
html:not(.anima) .pulso path{stroke-dashoffset:0}

/* ---------- vídeo do Reels: o telefone e a frase que está sendo dita ---------- */
.reels{padding-block:clamp(2rem,5vw,4rem) clamp(3rem,7vw,6rem)}
.reels-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.telefone{position:relative;width:min(100%,340px);margin-inline:auto;aspect-ratio:9/16;border-radius:34px;overflow:hidden;background:var(--bg2);
  border:1px solid var(--line2);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 50px 100px -40px rgba(0,0,0,.95),0 0 0 6px #0a0f1d,0 0 0 7px rgba(134,182,255,.18)}
.telefone video{width:100%;height:100%;object-fit:cover}
.telefone video::cue{font-family:var(--serif);font-size:1rem;background:rgba(4,6,12,.7);color:var(--ink)}
.telefone .som{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;
  font-family:var(--mono);font-size:var(--mono-s);letter-spacing:var(--track);text-transform:uppercase;color:var(--ink);
  background:rgba(4,6,12,.72);border:1px solid rgba(243,236,224,.3);border-radius:999px;padding:.6em 1em .6em .8em;
  transition:background .2s ease,border-color .2s ease,transform .2s var(--ease-out)}
.telefone .som svg{width:1em;height:1em;flex:none}
.telefone .som:hover{background:rgba(4,6,12,.9);border-color:var(--ink)}
.telefone .som:active{transform:translateX(-50%) scale(.97)}
.telefone .som[aria-pressed="true"]{border-color:var(--coral);color:var(--coral)}
.roteiro .kicker{margin-bottom:1.2rem}
.falas{display:grid;gap:.55rem;font-size:clamp(1.35rem,2vw + .4rem,2.2rem)}
.falas li{line-height:1.08;letter-spacing:-.015em;color:var(--mute);text-wrap:balance;transition:color .45s ease}
.falas li.on{color:var(--ink)}
.falas li em{color:var(--coral)}
/* com motion: só a frase que está sendo dita, uma linha grande, em crossfade */
.anima .falas{display:block;position:relative;min-height:3.4em}
.anima .falas li{position:absolute;inset:0;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s var(--ease-out),color .45s ease}
.anima .falas li.on{opacity:1;transform:none}
@media (max-width:860px){
  .reels-in{grid-template-columns:1fr}
  .roteiro{text-align:center}
  .anima .falas{min-height:3.6em}
}

/* ---------- como funciona: a página que congela ---------- */
.como{padding-top:clamp(2rem,5vw,4rem);border-top:1px solid var(--line)}
.pista{position:relative}
.palco{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;gap:clamp(1rem,3vh,2.5rem) clamp(1.5rem,4vw,4.5rem);
  align-items:start;min-height:100svh;padding-block:clamp(2rem,6vh,3.5rem) clamp(1rem,4vh,3rem)}
.como-head{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem 3rem}
.como-head .dica{display:inline-flex;align-items:center;gap:.7em;padding-bottom:.4em}
.como-head .dica::after{content:"";width:1px;height:1.8em;background:linear-gradient(var(--coral),transparent);transform-origin:top;animation:desce 1.6s ease-in-out infinite}
@keyframes desce{0%{transform:scaleY(0);opacity:0}30%{opacity:1}100%{transform:scaleY(1);opacity:0}}
html:not(.scrub) .como-head .dica{display:none}
.passos{display:grid;gap:clamp(.8rem,2vh,1.6rem);align-self:center}
.passo{position:relative;padding-left:3.4rem;transition:opacity .4s ease}
.passo .n{position:absolute;left:0;top:.35em;font-family:var(--mono);font-size:var(--mono-s);letter-spacing:.1em;color:var(--coral)}
.passo .n::after{content:"";position:absolute;left:0;top:1.5em;width:2.2rem;height:1px;background:var(--line2)}
.passo h3{font-size:clamp(1.9rem,2.6vw + .4rem,3.2rem);line-height:1}
.passo p{margin-top:.45rem;color:var(--ink2);font-size:1.05rem;line-height:1.35;max-width:30ch}
.anima .passo{opacity:.3}
.anima .passo.on{opacity:1}
.cena{position:relative;width:min(100%,calc(58svh * 4 / 3));margin-inline:auto;aspect-ratio:4/3;align-self:center}
.reuniao{position:absolute;inset:0;background:var(--win);border:1px solid var(--line2);border-radius:16px;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);transform-origin:center;will-change:transform,opacity}
.reuniao-barra{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:.6rem .9rem;font-family:var(--mono);font-size:var(--mono-s);letter-spacing:var(--track);text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--line);white-space:nowrap}
.reuniao-barra span{display:inline-flex;align-items:center;gap:.5em;min-width:0;overflow:hidden;text-overflow:ellipsis}
.reuniao-barra .vivo-p{width:7px;height:7px;border-radius:50%;background:var(--coral);flex:none;transition:background .4s ease}
.azulejos{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;padding:10px;min-height:0;transition:filter .4s ease}
.azulejo{position:relative;background:var(--card);border:1px solid var(--line);border-radius:11px;display:grid;place-items:center;min-height:0;transition:border-color .4s ease}
.azulejo.fala-agora{border-color:var(--blue)}
.avatar{position:relative;width:clamp(34px,17%,58px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:clamp(.9rem,.5rem + .9vw,1.3rem);color:#fff;letter-spacing:.02em;background:var(--cor)}
.azulejo.fala-agora .avatar::before,.azulejo.fala-agora .avatar::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid var(--coral);opacity:0;animation:anel 2.4s ease-out infinite}
.azulejo.fala-agora .avatar::after{animation-delay:1.2s}
@keyframes anel{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.2)}}
.azulejo .nome{position:absolute;left:10px;bottom:8px;font-family:var(--mono);font-size:var(--mono-s);color:var(--mute)}
.azulejo .mic{position:absolute;right:10px;bottom:9px;display:flex;gap:2px;align-items:flex-end;height:10px}
.azulejo .mic i{width:2px;height:100%;background:var(--mute);opacity:.5;transform:scaleY(.4);transform-origin:bottom}
.azulejo.fala-agora .mic i{background:var(--blue);opacity:1;animation:barra 1s ease-in-out infinite}
.azulejo.fala-agora .mic i:nth-child(2){animation-delay:.15s}.azulejo.fala-agora .mic i:nth-child(3){animation-delay:.3s}.azulejo.fala-agora .mic i:nth-child(4){animation-delay:.45s}
.pergunta{border-top:1px solid var(--line);padding:.6rem .9rem .8rem}
.pergunta .quem{display:flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:var(--mono-s);letter-spacing:var(--track);text-transform:uppercase;color:var(--mute)}
.pergunta .quem i{width:6px;height:6px;border-radius:50%;background:var(--coral)}
.pergunta .q{margin-top:.3rem;font-size:clamp(1rem,.6rem + 1.2vw,1.5rem);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:clip}
.pergunta .q .qm{color:var(--coral)}
/* o congela: a reunião perde a cor de uma vez (classe .gelo, p ≥ .5), não escorrendo pelo scrub */
.reuniao.gelo .azulejos,html:not(.scrub) .reuniao .azulejos{filter:grayscale(1)}
.reuniao.gelo .vivo-p,html:not(.scrub) .reuniao .vivo-p,.reuniao.gelo .pergunta .quem i,html:not(.scrub) .reuniao .pergunta .quem i{background:var(--mute)}
.reuniao.gelo .azulejo.fala-agora,html:not(.scrub) .azulejo.fala-agora{border-color:var(--line)}
.reuniao.gelo .azulejo.fala-agora .avatar::before,.reuniao.gelo .azulejo.fala-agora .avatar::after,
html:not(.scrub) .azulejo.fala-agora .avatar::before,html:not(.scrub) .azulejo.fala-agora .avatar::after{animation:none;opacity:0}
.reuniao.gelo .azulejo.fala-agora .mic i,html:not(.scrub) .azulejo.fala-agora .mic i{animation:none;transform:scaleY(.4);background:var(--mute);opacity:.5}
/* o cartão sobe por cima dos azulejos, sem cobrir a pergunta recém-digitada */
.resposta{position:absolute;right:-5%;bottom:20%;width:min(68%,420px);background:var(--card);border:1px solid rgba(201,218,255,.28);border-radius:14px;padding:.9rem 1.1rem 1rem;
  box-shadow:0 2px 4px rgba(0,0,0,.4),0 40px 80px -24px rgba(0,0,0,.9);will-change:transform,opacity}
.resposta .rotulo{display:flex;justify-content:space-between;gap:.6rem;font-family:var(--mono);font-size:var(--mono-s);letter-spacing:var(--track);text-transform:uppercase;color:var(--mute)}
.resposta .rotulo b{color:var(--coral);font-weight:500}
.resposta .p-txt{margin-top:.4rem;font-size:1.05rem;line-height:1.25}
.resposta .r-txt{margin-top:.35rem;color:var(--ans);font-style:italic;font-size:.98rem;line-height:1.3}
.resposta .t{margin-top:.6rem;padding-top:.5rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem;font-family:var(--mono);font-size:var(--mono-s);letter-spacing:var(--track);text-transform:uppercase;color:var(--mute)}
.resposta .t b{font-size:1.6rem;font-weight:700;letter-spacing:-.05em;color:var(--coral);font-variant-numeric:tabular-nums;white-space:nowrap}
/* sem scrub (sem GSAP, movimento reduzido ou JS fora): o quadro final fica parado */
html:not(.scrub) .reuniao{opacity:.4;transform:scale(.97)}
html:not(.scrub) .reuniao .mic i{animation:none}
html:not(.scrub) .palco{min-height:0;padding-block:clamp(1rem,3vw,2rem) clamp(4rem,10vw,7rem)}
html:not(.scrub) .passo{opacity:1}
@media (max-width:900px){
  .palco{grid-template-columns:1fr;grid-template-rows:auto auto auto;align-content:start;min-height:0;gap:clamp(1.2rem,3vh,2rem);padding-block:1.5rem 2rem}
  html:not(.scrub) .palco{padding-block:1.5rem clamp(3rem,8vh,5rem)}
  .como-head{flex-direction:column;align-items:flex-start;gap:.6rem}
  .passos{grid-template-columns:1fr;gap:.6rem}
  .passo{padding-left:2.6rem}
  .passo h3{font-size:clamp(1.4rem,5vw,2rem)}
  .passo p{font-size:.95rem;max-width:none}
  .anima .passo p{display:none}
  .anima .passo.on p{display:block}
  html:not(.scrub) .passo p{display:block}
  .cena{width:100%;aspect-ratio:1}
  .resposta{right:-2%;bottom:22%;width:84%}
  .pergunta .q{white-space:normal;font-size:1rem}
}

/* ---------- livro-razão: fica / sai ---------- */
.livro{padding-block:clamp(3rem,7vw,6rem)}
.livro header{margin-bottom:clamp(1.6rem,3vw,2.6rem)}
.ledger{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(11,17,32,.6)}
.ledger > div{padding:1.5rem clamp(1.1rem,3vw,2.2rem) 1.7rem}
.ledger > div + div{border-left:1px solid var(--line)}
.ledger .h{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1rem}
.ledger h3{font-size:1.5rem;line-height:1}
.ledger ul{font-family:var(--mono);font-size:.8rem;line-height:1.5;color:var(--ink2)}
.ledger li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-top:1px dashed rgba(134,182,255,.2)}
.ledger li span:last-child{text-align:right;flex:none;color:var(--mute)}
.ledger .fica li span:last-child{color:var(--blue)}
.ledger .sai li span:last-child{color:var(--coral)}
.ledger .nota{margin-top:1rem;font-size:1rem;color:var(--ink2);line-height:1.4}
@media (max-width:760px){
  .ledger{grid-template-columns:1fr}
  .ledger > div + div{border-left:0;border-top:1px solid var(--line)}
}

/* ---------- modos ---------- */
.modos{padding-block:0 clamp(3rem,7vw,6rem)}
.modos header{margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.tabela{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:14px;background:rgba(11,17,32,.6)}
.tabela table{width:100%;min-width:560px;border-collapse:collapse;font-family:var(--mono);font-size:.8rem;line-height:1.4}
.tabela th,.tabela td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
.tabela thead th{font-weight:500;background:rgba(4,6,12,.5);vertical-align:bottom}
.tabela thead th .modo{display:block;font-family:var(--serif);font-size:1.35rem;letter-spacing:-.01em;color:var(--ink);line-height:1;margin-bottom:.35rem}
.tabela thead th .modo em{color:var(--blue)}
.tabela thead th .tag{display:inline-block;font-size:var(--mono-s);letter-spacing:var(--track);text-transform:uppercase;color:var(--mute);border:1px solid var(--line2);border-radius:999px;padding:.25em .7em}
.tabela thead th .tag.inc{color:var(--blue);border-color:rgba(134,182,255,.4)}
.tabela th:first-child{width:30%;color:var(--mute);font-weight:400}
.tabela tbody th{color:var(--ink);font-weight:400}
.tabela tbody tr:last-child td,.tabela tbody tr:last-child th{border-bottom:0}
.tabela .nao{color:var(--mute)}
.tabela .sim{color:var(--ink)}
.tabela .ctx{color:var(--coral)}
/* no celular, cada linha vira um bloco: o rótulo em cima, os três modos lado a lado embaixo. Sem rolagem lateral. */
@media (max-width:640px){
  .tabela{overflow:visible}
  .tabela table,.tabela thead,.tabela tbody{display:block;min-width:0}
  .tabela tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 .6rem;padding:.75rem .9rem;border-bottom:1px solid var(--line)}
  .tabela thead tr{background:rgba(4,6,12,.5);align-items:end}
  .tabela thead th:first-child{display:none}
  .tabela th,.tabela td,.tabela th:first-child{padding:0;border-bottom:0;width:auto}
  .tabela thead th .modo{font-size:1.05rem;margin-bottom:.3rem}
  .tabela thead th .tag{display:block;border:0;padding:0;letter-spacing:.04em}
  .tabela tbody th{grid-column:1/-1;margin-bottom:.4rem;color:var(--mute)}
  .tabela tbody tr:last-child{border-bottom:0}
}

/* ---------- sua chave em 2 minutos ---------- */
.chave{padding-block:clamp(3rem,7vw,6rem);border-top:1px solid var(--line)}
.chave-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.passos-chave{margin-top:clamp(1.6rem,3vw,2.4rem);border-top:1px solid var(--line)}
.passos-chave li{display:grid;grid-template-columns:3.2rem 1fr;gap:1rem;padding:1.2rem 0;border-bottom:1px solid var(--line)}
.passos-chave .n{font-family:var(--serif);font-style:italic;font-size:2.2rem;line-height:.9;color:var(--coral)}
.passos-chave h3{font-size:1.4rem;line-height:1.1}
.passos-chave p{margin-top:.35rem;color:var(--ink2);font-size:1.02rem;line-height:1.35;max-width:46ch}
.passos-chave a{color:var(--blue);border-bottom:1px solid rgba(134,182,255,.35);font-family:var(--mono);font-size:.85em}
.passos-chave a:hover{border-color:var(--blue)}
.janela{position:relative;border-radius:14px;overflow:hidden;background:var(--win);border:1px solid var(--line2);aspect-ratio:540/470;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 40px 90px -30px rgba(0,0,0,.9)}
.janela video{width:100%;height:100%;object-fit:contain;background:var(--win)}
.janela figcaption{position:absolute;left:0;right:0;bottom:0;padding:.8rem 1rem;font-family:var(--mono);font-size:var(--mono-s);letter-spacing:var(--track);text-transform:uppercase;color:var(--mute);background:linear-gradient(180deg,transparent,rgba(4,6,12,.85))}
@media (max-width:860px){
  .chave-in{grid-template-columns:1fr}
  .janela{max-width:480px;margin-inline:auto}
}

/* ---------- faixa da loja ---------- */
.loja{position:relative;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(4,6,12,0),rgba(4,6,12,.9) 40%,var(--bg2));overflow:hidden}
.loja-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem 4rem;align-items:center;padding-block:clamp(3rem,7vw,6rem)}
.logo-metal{position:relative;justify-self:center;width:min(100%,420px);aspect-ratio:1}
.logo-metal::before{content:"";position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle,rgba(42,98,230,.36),rgba(42,98,230,0) 68%)}
.logo-metal canvas,.logo-metal img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.logo-metal img{display:none}
.loja h2{margin-top:.8rem}
.loja .texto > p{margin-top:1rem;color:var(--ink2);max-width:40ch}
.loja .cta{margin-top:1.8rem}
.loja .texto > .fine{margin-top:1.4rem;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;max-width:none}
@media (max-width:760px){.loja-in{grid-template-columns:1fr}.logo-metal{width:min(72%,280px)}}

/* ---------- rodapé ---------- */
/* ===== o vídeo (YouTube), no fim da página ===== */
.video{border-top:1px solid var(--line);background:var(--bg2)}
.video-in{display:grid;grid-template-columns:200px minmax(0,1fr);gap:2rem clamp(2rem,5vw,4.5rem);align-items:center;padding-block:clamp(3rem,6vw,5rem)}
.cartaz{position:relative;display:block;aspect-ratio:9/16;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#0b1120;box-shadow:0 24px 50px -30px rgba(0,0,0,.9)}
.cartaz img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease-out);will-change:transform}
.cartaz:hover img{transform:scale(1.04)}
.cartaz .play{position:absolute;inset:0;display:grid;place-items:center}
.cartaz .play svg{width:62px;height:62px;padding:16px;box-sizing:border-box;border-radius:50%;fill:#fff;background:rgba(7,10,18,.55);border:1px solid rgba(243,236,224,.25);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .35s var(--ease-out),background .25s ease}
.cartaz:hover .play svg{transform:scale(1.08);background:rgba(255,107,74,.85);border-color:transparent}
.cartaz .dur{position:absolute;right:.7rem;bottom:.7rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:#fff;background:rgba(7,10,18,.7);padding:.25em .55em;border-radius:5px}
.video .texto .kicker{color:var(--mute)}
.video .texto h2{margin-top:.8rem}
.video .texto > p{margin-top:1rem;color:var(--ink2);max-width:40ch}
.video .texto .more{display:inline-block;margin-top:1.6rem}
@media (max-width:640px){.video-in{grid-template-columns:1fr;justify-items:start}.cartaz{width:min(60%,200px)}}

.rodape{border-top:1px solid var(--line);background:var(--bg2)}
.rodape-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.8rem 2rem;padding-block:1.4rem}
.rodape .links{gap:1.4rem}
.rodape .links a:hover{color:var(--ink)}
.rodape .assina{font-family:var(--mono);font-size:var(--mono-s);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.rodape .assina em{font-style:italic;text-transform:none;letter-spacing:0;font-family:var(--serif);font-size:1rem;color:var(--ink2)}

/* ---------- movimento reduzido: estado final, parado ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .anima [data-rv]{opacity:1;transform:none}
  .pulso path{stroke-dashoffset:0}
  .demo.is-live .linha:not(.on){opacity:1}
}