/* GRINO — tokens do manual de marca v1.0 (§10) */
@font-face{font-family:"Barlow";src:url("fontes/Barlow-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url("fontes/Barlow-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow";src:url("fontes/Barlow-900.woff2") format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fontes/JetBrainsMono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito";src:url("fontes/Nunito-var.woff2") format("woff2");font-weight:200 1000;font-display:swap}

:root{
  --breu:#131210; --grafite:#1F1D19; --osso:#F4F1EA; --ambar:#FF9F1C;
  --nevoa:#9FB4BE; --pedra:#A39B8D;
  --fio:#2c2a25; --fio-2:#3a3730; --apagado:#5d584f;
  --display:"Barlow",system-ui,sans-serif;
  --dado:"Nunito","JetBrains Mono",ui-sans-serif,sans-serif;
  --margem:clamp(1.25rem,5.5vw,5.5rem);
  --topo:64px;
  --corte:cubic-bezier(.2,.85,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topo) + 24px)}
body{background:var(--breu);color:var(--osso);font:400 16px/1.65 var(--display);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--ambar);color:var(--breu)}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ambar);outline-offset:3px}
.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--margem)}

/* rótulo — o único caixa alta da página */
.rot{font:400 11px/1.4 var(--dado);letter-spacing:.2em;text-transform:uppercase;color:var(--nevoa)}
.rot-am{color:var(--ambar)}
.rot .sep{color:var(--apagado);margin-inline:.6em}

/* ---------- régua ---------- */
.regua{position:relative;height:9px;
  background-image:repeating-linear-gradient(90deg,var(--fio-2) 0 1px,transparent 1px 8px);
  border-block:1px solid var(--fio-2)}
.regua-alta{height:22px;margin-top:clamp(2.5rem,6vw,4.5rem)}
.regua .cheio{position:absolute;inset:0 auto 0 0;width:0;background:var(--fio-2)}
.regua .agulha{position:absolute;top:-4px;bottom:-4px;left:0;width:2px;background:var(--ambar)}

/* ---------- topo ---------- */
.topo{position:fixed;inset:0 0 auto 0;z-index:50;background:var(--breu)}
.topo-in{height:var(--topo);display:flex;align-items:center;gap:2rem;padding-inline:var(--margem)}
.marca{display:flex;align-items:center;gap:.7rem}
.simbolo{width:26px;height:26px;flex:none;fill:none;stroke:var(--osso);stroke-width:5}
.simbolo .desvio,.palco .desvio{stroke:var(--ambar)}
.nome{font:900 1.4rem/1 var(--display);letter-spacing:-.045em}
.nav{display:flex;gap:2.2rem;margin-left:auto;font:400 11px/1 var(--dado);letter-spacing:.2em;text-transform:uppercase;color:var(--pedra)}
.nav a{padding-block:.8rem;transition:color .15s}
.nav a:hover{color:var(--osso)}
.regua-topo{border-top:0;height:8px}
@media(max-width:760px){.nav{display:none}.topo .bt{margin-left:auto}}

/* ---------- botão ---------- */
.bt{display:inline-flex;align-items:center;gap:.9em;white-space:nowrap;
  font:400 11px/1 var(--dado);letter-spacing:.2em;text-transform:uppercase;
  padding:1.15em 1.5em;border:1px solid var(--fio-2);color:var(--osso);transition:background .15s,border-color .15s}
.bt:hover{background:var(--grafite);border-color:var(--pedra)}
.bt-am{background:var(--ambar);border-color:var(--ambar);color:var(--breu)}
.bt-am:hover{background:var(--osso);border-color:var(--osso)}
.bt .seta{display:inline-block;transition:transform .25s var(--corte)}
.bt:hover .seta{transform:translate(4px,-4px)}
.bt[href="#trabalho"]:hover .seta{transform:translateY(5px)}

/* ---------- abertura ---------- */
.abertura{min-height:100svh;padding-top:calc(var(--topo) + clamp(2.5rem,8vh,6rem));
  display:flex;flex-direction:column;justify-content:space-between;gap:clamp(2.5rem,6vh,4.5rem)}
.display{font:900 clamp(3rem,min(8.8vw,15.5vh),7.6rem)/.9 var(--display);letter-spacing:-.045em}
.display-2{font-size:clamp(2.6rem,8vw,6.6rem);margin-top:1.6rem}
.display em,.frase em{font-style:normal;color:var(--ambar)}
.display .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.display .pl{display:inline-block;transform:translateY(112%);transition:transform .9s var(--corte);
  transition-delay:calc(var(--i)*55ms)}
.display.in .pl{transform:none}

.quadro{position:relative;display:inline-block;margin-top:clamp(2rem,5vh,3.5rem);
  padding:clamp(.9rem,2vw,1.8rem) clamp(1rem,2.4vw,2.2rem)}
.cn{position:absolute;width:clamp(22px,3.4vw,44px);height:clamp(22px,3.4vw,44px);
  border:0 solid var(--osso);--e:clamp(3px,.42vw,5px);
  transition:transform .7s var(--corte),border-color .01s .45s,opacity .01s}
.cn.tl{top:0;left:0;border-top-width:var(--e);border-left-width:var(--e)}
.cn.tr{top:0;right:0;border-top-width:var(--e);border-right-width:var(--e)}
.cn.bl{bottom:0;left:0;border-bottom-width:var(--e);border-left-width:var(--e)}
.cn.br{bottom:0;right:0;border-bottom-width:var(--e);border-right-width:var(--e)}
/* estado inicial: cantos fechados no centro; o quarto ainda alinhado */
.quadro .cn{opacity:0}
.quadro .cn.tl{transform:translate(18vw,6vw)}
.quadro .cn.tr{transform:translate(-18vw,6vw)}
.quadro .cn.bl{transform:translate(18vw,-6vw)}
.quadro .cn.br{transform:translate(-18vw,-6vw)}
.quadro.aberto .cn{opacity:1;transform:none}
.quadro.desviado .cn.tr{transform:translate(43%,-43%);border-color:var(--ambar);
  transition:transform .45s var(--corte),border-color .01s}

.abertura-pe{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:2rem 4rem;margin-top:clamp(2rem,5vh,3.5rem)}
.lide{max-width:44ch;font-size:clamp(1.05rem,1.45vw,1.3rem);line-height:1.5;color:var(--pedra)}
.lide b{font-weight:700;color:var(--osso)}
.acoes{display:flex;flex-wrap:wrap;gap:.8rem}

/* entrada por corte — deslize de 6px, sem fade */
.entra,.rv{clip-path:inset(-20% 100% -20% 0);transform:translateX(-6px);
  transition:clip-path .8s var(--corte),transform .8s var(--corte);transition-delay:calc(var(--i,0)*70ms)}
.entra.in,.rv.in{clip-path:inset(-20% -5% -20% -5%);transform:none}

/* ---------- tira de peças ---------- */
.tira{overflow:hidden}
.tira-trilho{display:flex;gap:1px;width:max-content;background:var(--fio);
  animation:tira 70s linear infinite}
.tira:hover .tira-trilho{animation-play-state:paused}
@keyframes tira{to{transform:translateX(-33.3333%)}}
.quadrinho{position:relative;width:clamp(120px,11.5vw,168px);aspect-ratio:9/16;flex:none;
  background:var(--grafite);overflow:hidden;display:block}
.quadrinho img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.62);
  transition:filter .01s}
.quadrinho:hover img{filter:none}
.quadrinho .rot{position:absolute;left:0;right:0;bottom:0;padding:.7em .8em;background:var(--breu);
  color:var(--pedra);font-size:9.5px;letter-spacing:.14em;
  transform:translateY(101%);transition:transform .3s var(--corte)}
.quadrinho:hover .rot{transform:none}
.quadrinho .rot b{font-weight:400;color:var(--ambar)}

/* ---------- seção ---------- */
.secao{padding-block:clamp(5rem,13vh,9.5rem)}
.cab{display:flex;align-items:baseline;gap:1.2rem;margin-bottom:1.6rem}
.cab .num{font:400 12px/1 var(--dado);letter-spacing:.08em;color:var(--ambar)}
.titulo{font:900 clamp(1.7rem,3.3vw,2.6rem)/1.1 var(--display);letter-spacing:-.025em}
.cab .fio{flex:1;height:1px;background:var(--fio-2);align-self:center;min-width:2rem;
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--corte)}
.cab.in .fio{transform:none}
.cab .num,.cab .titulo{clip-path:inset(-20% 100% -20% 0);transition:clip-path .7s var(--corte)}
.cab.in .num,.cab.in .titulo{clip-path:inset(-20% -5% -20% -5%)}
.apoio{max-width:58ch;color:var(--pedra);font-size:1.06rem}

/* ---------- abas de nicho ---------- */
.abas{position:relative;display:flex;gap:clamp(1.4rem,4vw,3.5rem);margin-top:clamp(2.5rem,6vh,4rem);
  padding-bottom:1.1rem;border-bottom:1px solid var(--fio-2);overflow-x:auto;scrollbar-width:none}
.abas::-webkit-scrollbar{display:none}
.aba{display:flex;align-items:baseline;gap:.7rem;white-space:nowrap;
  font:900 clamp(1.5rem,3.6vw,2.9rem)/1 var(--display);letter-spacing:-.035em;color:var(--apagado);
  transition:color .15s}
.aba:hover{color:var(--pedra)}
.aba[aria-selected="true"]{color:var(--osso)}
.aba small{font:400 11px/1 var(--dado);letter-spacing:.14em;color:var(--apagado)}
.aba[aria-selected="true"] small{color:var(--nevoa)}
.abas-barra{position:absolute;bottom:-1px;left:0;height:4px;width:0;background:var(--ambar);
  transition:transform .5s var(--corte),width .5s var(--corte)}
.nicho-resumo{margin-top:1.2rem;min-height:1.4em}

/* ---------- miniaturas: a peça abre em outra aba ---------- */
.pecas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));align-items:start;
  gap:clamp(1.6rem,3vw,2.4rem) clamp(.9rem,1.6vw,1.4rem);margin-top:clamp(2rem,4vw,3rem)}
.mini{display:flex;flex-direction:column;gap:.55rem;min-width:0}
.mini.larga{grid-column:span 2}
.mini-img{position:relative;display:block;aspect-ratio:9/16;background:var(--grafite);
  border:1px solid var(--fio-2);overflow:hidden}
.mini.larga .mini-img{aspect-ratio:16/9}
.mini-img img{width:100%;height:100%;object-fit:cover}
.mini-img .cn{width:14px;height:14px;--e:2px;margin:9px;pointer-events:none;
  transition:transform .35s var(--corte),border-color .01s}
.mini:hover .cn.tr{transform:translate(5px,-5px);border-color:var(--ambar)}
.mini .tocar i{width:40px;height:40px}
.mini .tocar i::after{border-left-width:10px;border-block-width:7px;margin-left:3px}
.mini:hover .tocar i{transform:translate(5px,-5px);border-color:var(--ambar)}
.mini:hover .tocar i::after{border-left-color:var(--ambar)}
.mini .rot{font-size:9.5px;letter-spacing:.14em;margin-top:.2rem}
.mini-t{font:900 1.05rem/1.15 var(--display);letter-spacing:-.02em}
.mini:hover .mini-t{color:var(--ambar)}

/* ---------- página da peça ---------- */
.pag-peca{padding-top:calc(var(--topo) + clamp(1.6rem,4vh,2.6rem));padding-bottom:clamp(4rem,10vh,7rem)}
.pag-topo{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.8rem 2rem;margin-bottom:1.4rem}
.volta{font:400 11px/1 var(--dado);letter-spacing:.2em;text-transform:uppercase;color:var(--pedra);padding-block:.6rem}
.volta:hover{color:var(--ambar)}
.outras{margin-top:clamp(3.5rem,8vh,6rem)}

/* ---------- peça: visor + ficha ---------- */
.peca{display:grid;grid-template-columns:minmax(240px,330px) minmax(0,1fr);align-items:stretch;
  border:1px solid var(--fio-2);background:var(--grafite)}
.peca > *{min-width:0}
.peca.larga{grid-template-columns:1fr}
.peca.larga .palco-video{border-right:0;border-bottom:1px solid var(--fio-2)}
.peca.larga .visor{aspect-ratio:16/9}

.palco-video{display:flex;flex-direction:column;background:var(--breu);border-right:1px solid var(--fio-2)}
.visor{position:relative;aspect-ratio:9/16;background:#0c0b0a;overflow:hidden;cursor:pointer}
.visor video{width:100%;height:100%;object-fit:cover}
.visor .cn{width:20px;height:20px;--e:2px;margin:14px;pointer-events:none;
  transition:transform .35s var(--corte),border-color .01s}
.peca.tocando .visor .cn.tr,.visor:hover .cn.tr{transform:translate(6px,-6px);border-color:var(--ambar)}
.visor .etq{position:absolute;top:17px;left:44px;font-size:9.5px;letter-spacing:.16em;color:var(--osso);pointer-events:none}
.tocar{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.tocar i{display:grid;place-items:center;width:64px;height:64px;background:var(--breu);border:1px solid var(--fio-2);
  transition:transform .25s var(--corte)}
.tocar i::after{content:"";border-left:15px solid var(--osso);border-block:10px solid transparent;margin-left:4px}
.visor:hover .tocar i{transform:translate(6px,-6px);border-color:var(--ambar)}
.visor:hover .tocar i::after{border-left-color:var(--ambar)}
.peca.tocando .tocar{display:none}

.ctrl{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.9rem;
  padding:.75rem .9rem;border-top:1px solid var(--fio-2)}
.tc{font:400 12px/1 var(--dado);letter-spacing:.06em;color:var(--osso);font-variant-numeric:tabular-nums}
.peca.tocando .tc{color:var(--ambar)}
.ctrl .regua{height:18px;cursor:ew-resize;touch-action:none}
.ctrl .regua .cheio{background:var(--apagado)}
.ctrl-bts{display:flex;gap:.2rem}
.ctrl-bts button{font:400 9.5px/1 var(--dado);letter-spacing:.14em;text-transform:uppercase;
  color:var(--pedra);padding:.6em .5em}
.ctrl-bts button:hover{color:var(--osso)}
.ctrl-bts button[aria-pressed="true"]{color:var(--ambar)}

.ficha{display:flex;flex-direction:column}
.ficha-topo{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.9rem clamp(1rem,2.2vw,1.8rem);border-bottom:1px solid var(--fio-2)}
.estado{display:flex;align-items:center;gap:.7em;color:var(--pedra)}
.estado::before{content:"";width:7px;height:7px;background:var(--apagado)}
.peca.tocando .estado{color:var(--ambar)}
.peca.tocando .estado::before{background:var(--ambar);animation:pisca 1.2s steps(1) infinite}
@keyframes pisca{50%{opacity:.15}}
.ficha-id{padding:clamp(1.4rem,3vw,2.4rem) clamp(1rem,2.2vw,1.8rem) clamp(1.2rem,2.4vw,1.9rem)}
.ficha-id h3{font:900 clamp(1.6rem,3vw,2.5rem)/1.05 var(--display);letter-spacing:-.03em;margin-top:.7rem}
.ficha-meta{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-top:1rem;color:var(--pedra);
  font:400 12px/1.6 var(--dado);letter-spacing:.06em}
.ficha-meta b{font-weight:400;color:var(--osso)}

.numeros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--fio-2);
  border-block:1px solid var(--fio-2);flex:1}
.numero{background:var(--grafite);padding:clamp(1rem,2vw,1.6rem) clamp(1rem,2.2vw,1.8rem);
  display:flex;flex-direction:column;justify-content:space-between;gap:.9rem;min-height:7.6rem;
  cursor:default;transition:background .01s}
.numero:hover,.numero.lido{background:var(--breu)}
.numero .v{font:900 clamp(1.7rem,3.1vw,2.9rem)/1 var(--display);letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.numero .v small{font:400 .38em/1 var(--dado);letter-spacing:.04em;color:var(--pedra);margin-right:.35em;vertical-align:.5em}
.numero .v small.depois{margin:0 0 0 .2em}
.numero:first-child .v{color:var(--ambar)}
.numero .n{font:400 11.5px/1.4 var(--dado);letter-spacing:.04em;color:var(--pedra);min-height:1.4em}

.ficha-pe{display:grid;gap:1rem;padding:1.1rem clamp(1rem,2.2vw,1.8rem) 1.3rem}
.leitura{font:400 12px/1.6 var(--dado);letter-spacing:.04em;color:var(--pedra);min-height:1.6em}
.leitura b{font-weight:400;color:var(--osso)}
.corte-nota{border-left:4px solid var(--ambar);padding-left:1rem}
.corte-nota p{color:var(--osso);max-width:52ch;line-height:1.5;margin-top:.35rem}
.aviso{color:var(--apagado)}

@media(max-width:860px){
  .peca{grid-template-columns:1fr}
  .palco-video{border-right:0;border-bottom:1px solid var(--fio-2)}
  .visor{width:min(100%,340px);margin-inline:auto}
  .peca.larga .visor{width:100%}
  .numeros{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- IA: do bruto ao lote ---------- */
.secao-ia{border-top:1px solid var(--fio)}
.ia-grade{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--fio-2);
  border:1px solid var(--fio-2);margin-top:clamp(2rem,5vw,3.5rem)}
.ia-passo{background:var(--breu);padding:clamp(1.2rem,2.2vw,1.9rem)}
.ia-passo h3{font:900 clamp(1.25rem,1.9vw,1.6rem)/1.1 var(--display);letter-spacing:-.025em;margin:.9rem 0 .7rem}
.ia-passo p{color:var(--pedra);font-size:.98rem;line-height:1.55}
.ia-rot{margin-top:clamp(2.5rem,6vw,4rem)}
.ia-numeros{margin-top:1rem;border:1px solid var(--fio-2)}
.ia-numeros .numero{min-height:11rem}
.ia-numeros .n{font-size:12.5px;line-height:1.5;max-width:30ch}
.ia-nota{margin-top:clamp(1.8rem,4vw,2.6rem)}
.tot-intro{margin-top:1.6rem}
.tot-numeros{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:clamp(1.5rem,4vw,2.5rem)}
.tot-numeros .numero{min-height:8.5rem}
@media(max-width:980px){.tot-numeros{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){.ia-grade{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.ia-grade,.ia-numeros{grid-template-columns:1fr}}

/* ---------- nota ---------- */
.nota-sec{padding-block:clamp(4rem,11vh,8rem);border-block:1px solid var(--fio)}
.frase{font:900 clamp(2.1rem,6.4vw,5.4rem)/.98 var(--display);letter-spacing:-.04em;max-width:17ch;margin-top:1.6rem}
.frase .pl{display:inline-block;clip-path:inset(-10% 100% -20% 0);transform:translateX(-6px);
  transition:clip-path .5s var(--corte),transform .5s var(--corte);transition-delay:calc(var(--i)*60ms)}
.frase.in .pl{clip-path:inset(-10% -8% -20% -8%);transform:none}

/* ---------- critério ---------- */
.criterio{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,6rem);
  margin-top:clamp(2rem,5vw,3.5rem);align-items:start}
.palco{position:sticky;top:calc(var(--topo) + 2.5rem);border:1px solid var(--fio-2);background:var(--grafite)}
.palco svg{display:block;width:100%;fill:none;stroke:var(--osso);stroke-width:5}
.palco .grade path{stroke:var(--fio-2);stroke-width:.4;stroke-dasharray:1.5 1.5}
.cota{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 1.1rem;border-top:1px solid var(--fio-2);
  font:400 12px/1 var(--dado);letter-spacing:.06em;color:var(--pedra)}
.cota span:first-child{color:var(--ambar)}
.passos{list-style:none;display:grid}
.passo{padding-block:clamp(1.8rem,4vw,3rem);border-top:1px solid var(--fio-2)}
.passo:last-child{border-bottom:1px solid var(--fio-2)}
.passo h3{font:900 clamp(1.5rem,2.9vw,2.3rem)/1.08 var(--display);letter-spacing:-.03em;margin:.9rem 0 .8rem;max-width:18ch}
.passo p{color:var(--pedra);max-width:46ch}
@media(max-width:860px){.criterio{grid-template-columns:1fr}.palco{position:static;max-width:320px}}

/* ---------- quem edita ---------- */
.secao-quem{border-top:1px solid var(--fio)}
.quem{display:grid;grid-template-columns:minmax(220px,360px) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);
  align-items:end;margin-top:clamp(2rem,5vw,3.5rem)}
.quem-foto{position:relative;aspect-ratio:3/4;background:var(--grafite);border:1px solid var(--fio-2);overflow:hidden}
.quem-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 10%}
.quem-foto .cn{width:20px;height:20px;--e:2px;margin:14px}
.quem-foto .cn.tr{transform:translate(6px,-6px);border-color:var(--ambar)}
.quem-txt h3{font:900 clamp(2rem,4.6vw,3.6rem)/1 var(--display);letter-spacing:-.035em;margin:.9rem 0 1.4rem}
.quem-txt p{color:var(--pedra);max-width:50ch;font-size:1.06rem;margin-bottom:.9rem}
.quem-txt .ficha-meta{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--fio-2)}
@media(max-width:760px){.quem{grid-template-columns:1fr}.quem-foto{max-width:320px}}

/* ---------- contato + rodapé ---------- */
.contato{padding-block:clamp(5rem,14vh,10rem);border-top:1px solid var(--fio)}
.rodape{border-top:1px solid var(--fio);padding-block:2.2rem}
.rodape-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.2rem}

/* ---------- foco: o colchete que enquadra o que o cursor aponta ---------- */
.foco{position:fixed;top:0;left:0;z-index:90;pointer-events:none;width:22px;height:22px;opacity:0;will-change:transform,width,height}
.foco i{position:absolute;width:9px;height:9px;border:0 solid var(--osso)}
.foco .tl{top:0;left:0;border-top-width:2px;border-left-width:2px}
.foco .tr{top:0;right:0;border-top-width:2px;border-right-width:2px;border-color:var(--ambar);transform:translate(4px,-4px)}
.foco .bl{bottom:0;left:0;border-bottom-width:2px;border-left-width:2px}
.foco .br{bottom:0;right:0;border-bottom-width:2px;border-right-width:2px}
@media(hover:none),(pointer:coarse){.foco{display:none}}

/* ---------- vinheta de abertura ---------- */
.vinheta{position:fixed;inset:0;z-index:100;background:var(--breu);display:grid;place-items:center;
  transition:clip-path .6s var(--corte)}
.vinheta svg{width:min(26vw,120px);fill:none;stroke:var(--osso);stroke-width:5}
.vinheta path{visibility:hidden}
.vinheta .c4{transform:translate(-6px,6px);transition:transform .4s var(--corte)}
.vinheta.p1 .c1,.vinheta.p2 .c2,.vinheta.p3 .c3,.vinheta.p4 .c4{visibility:visible}
.vinheta.p5 .c4{transform:none;stroke:var(--ambar)}
.vinheta.sai{clip-path:inset(0 0 100% 0)}

/* letra miúda: Nunito, um pouco mais firme para ler em 11 px */
.rot,.nav,.bt,.volta,.ctrl-bts button,.aba small,.cab .num,.tc,.ficha-meta,.leitura,.numero .n,.cota{font-weight:600}
.ficha-meta b,.leitura b,.quadrinho .rot b{font-weight:700}

/* ---------- vidro líquido: só uma sensação ---------- */
:root{--vidro:linear-gradient(135deg,rgba(244,241,234,.16),rgba(244,241,234,.04) 55%,rgba(244,241,234,.09));
  --vidro-borda:rgba(244,241,234,.22);
  --vidro-luz:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.25),0 10px 28px rgba(0,0,0,.35)}
.topo{background:rgba(19,18,16,.55);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  border-bottom:1px solid rgba(244,241,234,.07)}
.topo .regua-topo{opacity:.7}

/* botões em pílula; o secundário é de vidro e tem brilho que segue o cursor */
.bt{position:relative;overflow:hidden;border-radius:999px;transition:background .2s,border-color .2s,transform .25s var(--corte)}
.bt:not(.bt-am){background:var(--vidro);border-color:var(--vidro-borda);box-shadow:var(--vidro-luz);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6)}
.bt::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;
  background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),transparent 65%)}
.bt:hover::after{opacity:1}
.bt:hover{transform:translateY(-2px)}
.bt:not(.bt-am):hover{background:var(--vidro);border-color:rgba(244,241,234,.4)}

/* abas: a pílula de vidro desliza atrás do nicho ativo */
.abas{border-bottom:0;padding-bottom:0;gap:clamp(.2rem,.8vw,.6rem);align-items:center;flex-wrap:wrap;overflow:visible}
.aba{position:relative;z-index:1;padding:.42em .7em;border-radius:999px;font-size:clamp(1.15rem,2.5vw,2rem)}
.abas-barra{top:0;bottom:auto;height:0;border-radius:999px;background:var(--vidro);border:1px solid var(--vidro-borda);
  box-shadow:var(--vidro-luz);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  transition:transform .55s var(--corte),width .55s var(--corte),height .3s}

/* miniaturas: inclinam para o cursor, com um reflexo que acompanha */
.mini-img,.quem-foto{border-radius:14px;transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .35s var(--corte),border-color .2s,box-shadow .3s}
.mini-img img,.quem-foto img{transition:transform .6s var(--corte)}
.mini:hover .mini-img img,.quem-foto:hover img{transform:scale(1.06)}
.mini-img::after,.quem-foto::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.3),transparent 60%);mix-blend-mode:screen}
.mini:hover .mini-img::after,.quem-foto:hover::after{opacity:1}
.mini:hover .mini-img,.quem-foto:hover{border-color:rgba(244,241,234,.35);box-shadow:0 18px 40px rgba(0,0,0,.45)}

/* botão de tocar: gota de vidro sobre a imagem */
.tocar i{border-radius:50%;background:var(--vidro);border-color:var(--vidro-borda);box-shadow:var(--vidro-luz);
  -webkit-backdrop-filter:blur(10px) saturate(1.8);backdrop-filter:blur(10px) saturate(1.8)}
.mini:hover .tocar i,.visor:hover .tocar i{transform:scale(1.12);border-color:rgba(255,159,28,.8)}
.visor,.peca{border-radius:14px}
.peca{overflow:hidden}

/* cartões de texto: uma luz âmbar passa por baixo do cursor */
.ia-grade,.ia-numeros{border-radius:14px;overflow:hidden}
.ia-passo,.ia-numeros .numero,.passo{position:relative;overflow:hidden;transition:background .3s}
.ia-passo::before,.ia-numeros .numero::before,.passo::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .3s;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(255,159,28,.16),transparent 65%)}
.ia-passo:hover::before,.ia-numeros .numero:hover::before,.passo:hover::before{opacity:1}
.ia-passo > *,.ia-numeros .numero > *,.passo > *{position:relative}
.ia-passo h3,.passo h3{transition:transform .35s var(--corte)}
.ia-passo:hover h3,.passo:hover h3{transform:translateX(6px)}

/* abertura: um clarão quente acompanha o cursor */
.abertura{position:relative}
.abertura::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px circle at var(--lx,70%) var(--ly,30%),rgba(255,159,28,.09),transparent 70%)}
.abertura > *{position:relative}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .entra,.rv,.frase .pl,.cab .num,.cab .titulo{clip-path:none;transform:none}
  .display .pl,.cab .fio{transform:none}
  .quadro .cn{opacity:1;transform:none}
  .quadro .cn.tr{transform:translate(43%,-43%);border-color:var(--ambar)}
  .foco,.vinheta{display:none}
  .mini-img,.quem-foto{transform:none}
}