@font-face{font-family:Archivo;src:url(fontes/archivo.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:ArchivoI;src:url(fontes/archivo-italic.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:italic;font-display:swap}
/* Motor comum das páginas v3 da Black: estrutura e movimento. Cada marca pinta com as variáveis:
   --fundo --fundo-2 --texto --suave --suave-2 --fio --acento --botao --botao-texto --f-titulo --f-corpo */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--fundo);color:var(--texto);font-family:var(--f-corpo);font-size:16.5px;line-height:1.58;-webkit-font-smoothing:antialiased;overflow-x:clip}
@media (min-width:900px){body{font-size:17.5px}}
img{display:block;max-width:100%;height:auto}
a{color:inherit} b,strong{font-weight:600}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--pad)}
.sec{padding:clamp(56px,10vw,120px) 0}
:root{--pad:clamp(18px,5vw,64px);--ease:cubic-bezier(.16,1,.3,1)}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
.botao{display:flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 26px;width:100%;background:var(--botao);color:var(--botao-texto);
  font:700 17px/1.2 var(--f-corpo);text-decoration:none;border:0;border-radius:var(--raio,2px);cursor:pointer;transition:filter .3s var(--ease),transform .2s var(--ease)}
.botao:hover{filter:brightness(1.06)}.botao:active{transform:scale(.985)}
.botao.fantasma{background:none;color:var(--texto);border:1px solid var(--fio)}
@media (min-width:600px){.botao{width:auto;display:inline-flex}}

/* ---- a história presa na tela ---- */
.historia{position:relative}
.palco{position:sticky;top:0;height:100svh;overflow:hidden;display:flex}
.trilho-rolagem{height:calc(var(--passos,3) * 112svh)}
.palavra{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);font-size:clamp(140px,42vw,500px);line-height:.8;white-space:nowrap;pointer-events:none;
  color:transparent;-webkit-text-stroke:1.2px var(--fio)}
.miolo{position:relative;z-index:2;width:100%;max-width:1120px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 18px) var(--pad) 104px;
  display:grid;grid-template-rows:auto auto 1fr auto;gap:14px}
.trilha{list-style:none;display:flex;gap:6px}
.trilha li{flex:1;min-width:0;font-size:12px;line-height:1.25;color:var(--suave-2);padding-top:8px;border-top:2px solid var(--fio);transition:color .4s var(--ease),border-color .4s var(--ease)}
.trilha li span{font-weight:700;margin-right:4px}
.trilha li.ativo{color:var(--texto);border-top-color:var(--acento)}
.textos{position:relative;min-height:var(--min-textos,190px)}
.passo{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .6s var(--ease);pointer-events:none}
.passo.ativo{opacity:1;transform:none;pointer-events:auto}
.passo .numero{font-family:var(--f-titulo);font-size:44px;line-height:.9;color:var(--acento)}
.passo h3{font-family:var(--f-titulo);font-size:clamp(32px,8vw,64px);line-height:1;margin-top:4px}
.passo .def{margin-top:10px;font-size:16px;line-height:1.45;max-width:46ch}
.passo .conta{margin-top:8px;font-size:13.5px;color:var(--suave)}
.pilha{list-style:none;align-self:start;max-width:640px}
.pilha li{display:none;grid-template-columns:1fr auto;gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--fio);opacity:0;transform:translateX(24px);
  transition:opacity .45s var(--ease),transform .55s var(--ease)}
.pilha li.no-passo{display:grid}
.pilha li.dentro{opacity:1;transform:none}
.pilha li b{font-family:var(--f-item,var(--f-titulo));font-size:16.5px;line-height:1.2}
.pilha li span{font-size:12.5px;color:var(--suave);text-align:right}
.pilha li.velho b{color:var(--suave);font-weight:400}
.pilha li.mais b::before{content:"+ ";color:var(--acento)}
.trava{display:flex;gap:12px;align-items:center;font-size:14px;color:var(--suave)}
.trava i{display:block;width:62px;height:12px;border-radius:6px;background:repeating-linear-gradient(90deg,var(--suave-2) 0 8px,transparent 8px 12px);filter:blur(1.3px);flex:none;opacity:.8}
.parado{display:none}
@media (min-width:900px){
  .miolo{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;column-gap:64px;align-content:center;padding-top:60px;padding-bottom:50px}
  .trilha,.trava{grid-column:1/-1}
  .textos{align-self:center;min-height:320px}
  .passo .numero{font-size:80px}.passo .def{font-size:19px}.passo .conta{font-size:15px}
  .pilha{align-self:center}.pilha li{padding:11px 0}.pilha li b{font-size:21px}.pilha li span{font-size:14px}
  .trilha li{font-size:14px}.trava{font-size:16px}
}
@media (max-height:700px){.pilha li{padding:5px 0}.pilha li b{font-size:15px}.passo .def{font-size:15px}}
@media (prefers-reduced-motion:reduce){.palco,.trilho-rolagem{display:none}.parado{display:block;padding:60px 0}}

/* ---- detalhe dos itens (abre e fecha) ---- */
.itens{list-style:none;border-top:1px solid var(--fio)}
.item{border-bottom:1px solid var(--fio)}
.item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:4px 14px;padding:16px 0;align-items:start}
.item summary::-webkit-details-marker{display:none}
.item .nome{font-family:var(--f-item,var(--f-titulo));font-weight:700;font-size:clamp(18px,2.4vw,23px);line-height:1.15}
.item .num{font-size:13.5px;color:var(--suave)}
.item .tag{grid-column:2;grid-row:1/span 2;align-self:center;display:flex;align-items:center;gap:10px}
.item .tag small{font-size:11.5px;padding:3px 8px;border:1px solid currentColor;border-radius:2px;white-space:nowrap;opacity:.85}
.item .abre{width:30px;height:30px;border-radius:50%;border:1px solid var(--fio);display:grid;place-items:center;transition:transform .4s var(--ease)}
.item .abre::before{content:"+";font-size:18px;line-height:1}
.item details[open] .abre{transform:rotate(45deg)}
.item .dentro-item{padding:0 0 18px;font-size:15px;color:var(--suave)}
.item .dentro-item ul{list-style:none;display:grid;gap:7px}
.item .dentro-item li{padding-left:16px;position:relative}
.item .dentro-item li::before{content:"";position:absolute;left:2px;top:.55em;width:6px;height:1.5px;background:var(--acento)}
.item .dentro-item b{color:var(--texto)}

/* ---- datas ---- */
.datas{list-style:none;margin-top:28px}
.datas li{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--fio);align-items:baseline}
.datas .dia{font-family:var(--f-titulo);font-size:clamp(26px,5vw,42px);line-height:.95}
.datas .dia small{display:block;font-family:var(--f-corpo);font-size:12.5px;color:var(--suave-2);margin-top:6px;font-weight:400;font-style:normal;letter-spacing:0}
.datas p{color:var(--suave);font-size:15.5px}.datas p b{color:var(--texto)}
.datas li.forte{border-top-color:var(--acento)}
@media (min-width:900px){.datas li{grid-template-columns:180px 1fr}}

/* ---- formulário ---- */
form{margin-top:24px;display:grid;gap:18px}
.campo{display:grid;gap:7px}
.campo label{font-size:14.5px;font-weight:600}
.campo input,.campo select{width:100%;min-height:54px;padding:0 16px;background:var(--fundo-2);color:var(--texto);border:1px solid var(--fio);border-radius:var(--raio,2px);font:400 17px/1 var(--f-corpo);appearance:none}
.campo input::placeholder{color:var(--suave-2)}
.campo input:focus,.campo select:focus{border-color:var(--acento);outline:none}
.campo .erro{font-size:13.5px;color:#e8907f;display:none}
.campo.com-erro input,.campo.com-erro select{border-color:#d0705f}.campo.com-erro .erro{display:block}
form .botao{width:100%;margin-top:4px}
form .botao[disabled]{opacity:.6}
.consentimento{font-size:13.5px;color:var(--suave-2);line-height:1.5}
.seguranca{padding-top:16px;border-top:1px solid var(--fio);font-size:14.5px;color:var(--suave);display:grid;gap:10px}
.seguranca b{color:var(--texto)}
.obrigado{display:none}.enviado .formulario{display:none}.enviado .obrigado{display:block}
.obrigado ul{list-style:none;margin:18px 0 26px;display:grid;gap:12px}
.obrigado li{color:var(--suave);padding-left:18px;position:relative}
.obrigado li::before{content:"";position:absolute;left:2px;top:.6em;width:7px;height:1.5px;background:var(--acento)}
.obrigado li b{color:var(--texto)}

/* ---- barra fixa no celular ---- */
.fixo{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,transparent,var(--fundo) 32%);transform:translateY(110%);transition:transform .5s var(--ease)}
.fixo.ativo{transform:none}
.fixo .botao{width:100%}
.fixo small{display:block;text-align:center;font-size:12.5px;color:var(--suave);margin-top:6px}
@media (min-width:900px){.fixo{display:none}}

/* ---- revelação ---- */
[data-r]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
[data-r].dentro{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-r]{opacity:1;transform:none;transition:none}}
.rodape{padding:40px var(--pad) calc(100px + env(safe-area-inset-bottom));font-size:13.5px;color:var(--suave-2)}
.rodape .wrap{padding:0;display:grid;gap:12px;max-width:820px;margin:0}
.rodape nav{display:flex;gap:18px;flex-wrap:wrap}
@media (min-width:900px){.rodape{padding-bottom:46px}}

/* ==========================================================
   KIT DE MOVIMENTO · motion.css
   Par do motion.js. Regra da casa: o JS só troca classe e
   atributo; toda curva, tempo e pose mora aqui.
   O HTML nasce na pose final: sem JS ou com "reduzir
   movimento" a página aparece pronta, nunca vazia.
   ========================================================== */

:root {
  /* curvas */
  --mv-chega:  cubic-bezier(0.22, 1, 0.36, 1);    /* entrada padrão */
  --mv-calmo:  cubic-bezier(0.4, 0, 0.2, 1);      /* mudança neutra, acordeão, hover */
  --mv-sai:    cubic-bezier(0.5, 0, 0.9, 0.35);   /* saída: acelera e some */
  --mv-pouso:  cubic-bezier(0.5, 0, 0.25, 1);     /* objeto grande pousando */
  --mv-balao:  cubic-bezier(0.175, 0.885, 0.32, 1.1); /* mensagem de chat */
  --mv-abrir:  cubic-bezier(0.34, 0.28, 0.18, 1); /* algo se abrindo do próprio tamanho */
  --mv-slot:   cubic-bezier(0.5, 0.05, 0.2, 1);   /* troca de texto em slot */

  /* tempos */
  --mv-t-sai: 200ms;
  --mv-t-entra: 400ms;
  --mv-t-hover: 300ms;
}

/* Quadro mudo: zera transições para rearmar uma cena sem animar a volta */
.is-mudo, .is-mudo * { transition: none !important; animation: none !important; }

/* Pausa genérica de animações CSS em laço (fora da tela ou aba oculta) */
.is-parado, .is-parado * , .is-pausado, .is-pausado * { animation-play-state: paused !important; }


/* ---------- 01 · Faixa infinita ---------- */
[data-mv="faixa"] {
  --mv-vao: 32px;
  --mv-fade: 80px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--mv-fade), #000 calc(100% - var(--mv-fade)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--mv-fade), #000 calc(100% - var(--mv-fade)), transparent 100%);
}
.mv-faixa-fita {
  display: flex;
  width: max-content;
  animation: mv-anda var(--mv-dur, 40s) linear infinite;
}
[data-sentido="volta"] > .mv-faixa-fita { animation-direction: reverse; }
.mv-faixa-fila { display: flex; flex: none; align-items: center; }
/* o vão vai no item, inclusive no último, nunca em gap: é o que apaga a emenda */
.mv-faixa-fila > * { flex: none; margin-right: var(--mv-vao); }
@keyframes mv-anda { to { transform: translate3d(calc(-100% / var(--mv-copias, 2)), 0, 0); } }


/* ---------- 02 · Header que troca de tema ---------- */
[data-mv="header"] {
  transition: background-color var(--mv-t-hover) ease, color var(--mv-t-hover) ease,
              border-color var(--mv-t-hover) ease, box-shadow var(--mv-t-hover) ease;
}
/* o visual de .is-claro é de cada página */


/* ---------- 03 · Montagem em cascata ---------- */
.mv-js [data-mv="monta"]:not(.is-vivo) .mv-peca { opacity: 0; }
[data-mv="monta"].is-vivo .mv-peca {
  animation: mv-entra 520ms var(--mv-chega)
             calc(var(--mv-base, 120ms) + var(--i, 0) * var(--mv-passo, 90ms)) backwards;
}
[data-mv="monta"].is-vivo .mv-peca.mv-cresce-x { animation-name: mv-cresce-x; animation-duration: 700ms; transform-origin: left center; }
[data-mv="monta"].is-vivo .mv-peca.mv-cresce-y { animation-name: mv-cresce-y; animation-duration: 700ms; transform-origin: center bottom; }
.mv-traca { stroke-dasharray: 1; }
[data-mv="monta"].is-vivo .mv-peca.mv-traca { animation-name: mv-traca; animation-duration: 1100ms; animation-timing-function: var(--mv-calmo); }
@keyframes mv-entra    { from { opacity: 0; transform: translateY(10px); } }
@keyframes mv-cresce-x { from { transform: scaleX(0); } }
@keyframes mv-cresce-y { from { transform: scaleY(0); } }
@keyframes mv-traca    { from { stroke-dashoffset: 1; } }


/* ---------- 04 · Máquina de escrever ---------- */
[data-mv="escreve"] { white-space: nowrap; }
[data-mv="escreve"]::after {
  content: "";
  display: inline-block;
  width: 2px; height: 1.1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: currentColor;
  animation: mv-pisca 1s steps(1) infinite;
}
@keyframes mv-pisca { 50% { opacity: 0; } }


/* ---------- 05 · Chat que se escreve ---------- */
.mv-js [data-mv="chat"] .mv-msg:not(.is-vista) { display: none; }
[data-mv="chat"] .mv-digitando:not(.is-vista) { display: none; }
[data-mv="chat"] .mv-msg.is-vista { animation: mv-balao 400ms var(--mv-balao) backwards; }
[data-mv="chat"] .mv-rolo { overflow: hidden; }
@keyframes mv-balao { from { opacity: 0; transform: translateY(15px); } }
.mv-pontos { display: inline-flex; gap: 4px; }
.mv-pontos i {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  animation: mv-ponto 1.4s infinite;
}
.mv-pontos i:nth-child(2) { animation-delay: .2s; }
.mv-pontos i:nth-child(3) { animation-delay: .4s; }
@keyframes mv-ponto { 0%, 100% { opacity: .3; } 40% { opacity: 1; } }


/* ---------- 06 · Utilidades para relógio de fases ---------- */
/* Abrir a partir do próprio retângulo: defina --mv-de no elemento */
.mv-abre {
  clip-path: inset(var(--mv-de, 40% 10% 40% 10% round 14px));
  transition: clip-path 620ms var(--mv-abrir);
}
.is-aberto .mv-abre { clip-path: inset(0 round var(--mv-raio, 18px)); }
.is-saindo .mv-abre { transition-duration: 340ms; }

/* Troca de texto em slot: dois filhos, o segundo assume */
.mv-slot { display: inline-grid; overflow: hidden; vertical-align: bottom; }
.mv-slot > * { grid-area: 1 / 1; transition: transform 380ms var(--mv-slot); }
.mv-slot > :last-child { transform: translateY(105%); }
.is-trocado .mv-slot > :first-child { transform: translateY(-105%); }
.is-trocado .mv-slot > :last-child { transform: none; }


/* ---------- 07 · Palco com cenas ---------- */
[data-mv="palco"] .mv-cenas { display: grid; }
[data-mv="palco"] .mv-cena { grid-area: 1 / 1; opacity: 0; transition: opacity 550ms ease; }
[data-mv="palco"] .mv-cena.is-ativa { opacity: 1; }
.mv-js [data-mv="palco"] .mv-cena:not(.is-ativa) .mv-peca { opacity: 0; }
[data-mv="palco"] .mv-cena.is-ativa .mv-peca {
  animation: mv-entra 560ms var(--mv-chega) calc(var(--mv-base, 450ms) + var(--i, 0) * var(--mv-passo, 600ms)) backwards;
}
[data-mv="palco"] .mv-cena.is-ativa .mv-zoom { animation: mv-zoom calc(var(--mv-dur, 4600ms) + 800ms) linear forwards; }
@keyframes mv-zoom { from { transform: scale(1.06); } }
/* lista de passos: acordeão sem medir altura + barra que dura o mesmo que a cena */
.mv-corpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 450ms var(--mv-chega); }
.mv-corpo > * { min-height: 0; overflow: hidden; }
[data-ir].is-ativa .mv-corpo { grid-template-rows: 1fr; }
.mv-progresso { transform: scaleX(0); transform-origin: left center; }
.mv-js [data-ir].is-ativa .mv-progresso { animation: mv-enche var(--mv-dur, 4600ms) linear forwards; }
@keyframes mv-enche { from { transform: scaleX(0); } to { transform: scaleX(1); } }


/* ---------- 08 · Cartão que segue o mouse ---------- */
[data-mv="tilt"] { perspective: 1200px; }
[data-mv="tilt"] .mv-tilt { transform-style: preserve-3d; will-change: transform; }
.mv-flutua { animation: mv-flutua 4.8s ease-in-out infinite alternate; }
@keyframes mv-flutua { from { transform: translateY(8px) rotate(1deg); } to { transform: translateY(-8px) rotate(-0.8deg); } }


/* ---------- 10 · Acordeão nativo que anima a altura ---------- */
.mv-faq { interpolate-size: allow-keywords; }
.mv-faq details::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 340ms var(--mv-calmo), content-visibility 340ms allow-discrete;
}
.mv-faq details[open]::details-content { block-size: auto; }


/* ---------- Reduzir movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mv-faixa-fita { animation: none; transform: translate3d(calc(var(--mv-pose, 0px) * -1), 0, 0); }
  [data-mv] *, [data-mv] *::before, [data-mv] *::after,
  .mv-flutua, .mv-faq details::details-content {
    animation: none !important;
    transition: none !important;
  }
  .mv-js [data-mv="monta"]:not(.is-vivo) .mv-peca,
  .mv-js [data-mv="palco"] .mv-cena:not(.is-ativa) .mv-peca { opacity: 1; }
  [data-ir].is-ativa .mv-progresso { transform: none; }
}

/* v5: clone da anatomia da referência que o cliente aprovou (talesramiroart.com/tudosobreablacktreta).
   Coluna estreita no centro, fundo grafite, títulos curtos em caixa alta, cartões arredondados com borda,
   caixas de produto, carrossel de capas, módulos em linhas, grade de projetos, FAQ em linhas claras.
   O rosa da referência vira o verde do logo da CRIA (#12F522). */
:root{--fundo:#262626;--fundo-2:#1d1d1d;--texto:#f4f4f4;--suave:rgba(244,244,244,.78);--suave-2:rgba(244,244,244,.5);--fio:rgba(244,244,244,.16);
  --acento:#12f522;--botao:#12f522;--botao-texto:#062a08;--f-titulo:Archivo,system-ui,sans-serif;--f-corpo:Archivo,system-ui,sans-serif;--raio:22px;--col:560px}
body{background:var(--fundo)}
.col{max-width:var(--col);margin:0 auto;padding:0 18px}
.verde{color:var(--acento)}
.tit{font-family:var(--f-titulo);font-weight:800;font-stretch:96%;text-transform:uppercase;text-align:center;font-size:clamp(17px,4.4vw,22px);line-height:1.25;letter-spacing:.005em}
.botao{border-radius:999px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:13px;min-height:44px;padding:0 22px}

/* topo */
.topo{padding:calc(env(safe-area-inset-top) + 26px) 0 10px;text-align:center}
.topo .logo{width:150px;margin:0 auto}
.topo .linha{margin:18px auto 0;max-width:420px;font-size:17.5px;font-weight:700;line-height:1.35}
.topo .linha span{color:var(--acento)}
.palco-produto{position:relative;margin:18px auto 0;max-width:420px}
.palco-produto img.caixa{width:100%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.palco-produto .brilho{position:absolute;inset:20% 10% 10%;background:radial-gradient(closest-side,rgba(18,245,34,.22),transparent);z-index:-1}

/* cartão de prioridade, com o formulário */
.prioridade{margin:-10px auto 0;max-width:440px;border:2px solid rgba(244,244,244,.85);border-radius:28px;padding:22px 18px 18px;background:var(--fundo);position:relative;z-index:2}
.prioridade h2{font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;text-align:center;font-size:16px;line-height:1.3}
.prioridade .info{text-align:center;font-size:12px;color:var(--suave);margin-top:10px}
.prioridade form{margin-top:14px;gap:10px}
.prioridade .campo label{font-size:12.5px}
.prioridade .campo input,.prioridade .campo select{min-height:46px;border-radius:12px;font-size:16px;background:#1b1b1b}
.prioridade form .botao{margin-top:6px}
.prioridade .consentimento{font-size:11.5px;text-align:center}
.seta{display:grid;place-items:center;margin:22px auto 6px;width:30px;height:30px;border:1.5px solid var(--suave-2);border-radius:50%;color:var(--suave);font-size:14px;text-decoration:none}

/* faixa colorida */
.faixa-cor{margin-top:34px;padding:34px 18px;background:linear-gradient(120deg,#0b8a18,#12f522 55%,#7dff86);color:#062a08;text-align:center}
.faixa-cor p{font-weight:800;text-transform:uppercase;font-size:14px;line-height:1.35}

/* carrossel de capas */
.capas-sec{padding:40px 0 34px;background:var(--fundo-2)}
.capas{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;max-width:400px;margin:22px auto 0;border-radius:6px;scrollbar-width:none}
.capas::-webkit-scrollbar{display:none}
.capas figure{flex:0 0 50%;scroll-snap-align:start;position:relative;aspect-ratio:4/5}
.capas img{width:100%;height:100%;object-fit:cover}
.capas figcaption{position:absolute;left:10px;right:10px;bottom:12px;font-family:ArchivoI;font-style:italic;font-weight:900;text-transform:uppercase;font-size:17px;line-height:.95;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.capas figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.75))}
.capas figcaption{z-index:1}
.capas-nav{display:flex;justify-content:center;gap:10px;margin-top:12px}
.capas-nav button{width:34px;height:34px;border-radius:50%;border:1px solid var(--fio);background:#1b1b1b;color:var(--texto);font-size:15px;cursor:pointer}

/* cursos: cartão com caixa e módulos */
.cursos-sec{padding:44px 0}
.cursos{display:grid;gap:14px;max-width:760px;margin:0 auto;padding:0 18px}
.curso{background:#1f1f1f;border-radius:var(--raio);padding:18px 16px 16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.curso h3{font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;font-size:19px}
.curso .desc{font-size:14.5px;color:var(--suave);margin-top:6px;line-height:1.45}
.curso .num{font-size:12px;font-weight:700;color:var(--acento);margin-top:6px}
.caixa-curso{display:grid;place-items:center;padding:24px 0 18px;perspective:900px}
.caixa3d{--w:150px;--h:188px;--d:30px;width:var(--w);height:var(--h);position:relative;transform-style:preserve-3d;transform:rotateY(-26deg) rotateX(8deg)}
.caixa3d .frente,.caixa3d .lado,.caixa3d .topo-c{position:absolute;backface-visibility:hidden}
.caixa3d .frente{inset:0;border-radius:4px;overflow:hidden;transform:translateZ(calc(var(--d)/2));box-shadow:0 0 0 1px rgba(18,245,34,.35)}
.caixa3d .frente img{width:100%;height:100%;object-fit:cover}
.caixa3d .frente::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.88))}
.caixa3d .frente b{position:absolute;left:10px;right:10px;bottom:10px;z-index:1;font-family:ArchivoI;font-style:italic;font-weight:900;font-size:15px;line-height:.95;text-transform:uppercase}
.caixa3d .lado{top:0;bottom:0;width:var(--d);left:calc(var(--w) - var(--d)/2);transform:rotateY(90deg);background:linear-gradient(180deg,#0f3d12,#062108);border-radius:2px}
.caixa3d .lado span{position:absolute;inset:0;display:grid;place-items:center;writing-mode:vertical-rl;font-family:ArchivoI;font-style:italic;font-weight:900;font-size:11px;color:var(--acento);text-transform:uppercase}
.caixa3d .topo-c{left:0;right:0;height:var(--d);top:calc(var(--d)/-2);transform:rotateX(90deg);background:#0c2a0e}
.caixa-curso::after{content:"";display:block;width:160px;height:18px;margin-top:6px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent)}
.mods{display:grid;gap:7px}
.mods details{border:1px solid rgba(244,244,244,.85);border-radius:8px}
.mods summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 12px;font-size:14.5px;font-weight:700;color:var(--acento)}
.mods summary::-webkit-details-marker{display:none}
.mods summary::after{content:"+";flex:none;width:20px;height:20px;border-radius:50%;background:var(--acento);color:#062a08;display:grid;place-items:center;font-size:14px;line-height:1}
.mods details[open] summary::after{content:"−"}
.mods details p{padding:0 12px 12px;font-size:13.5px;color:var(--suave)}
@media (min-width:760px){.cursos{grid-template-columns:1fr 1fr;align-items:start}}

/* projetos */
.projetos-sec{padding:20px 0 44px}
.projetos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:620px;margin:24px auto 0;padding:0 18px}
.projetos figure{position:relative;aspect-ratio:9/16;border-radius:4px;overflow:hidden;background:#111}
.projetos img,.projetos video{width:100%;height:100%;object-fit:cover}
.projetos .play{position:absolute;inset:0;display:grid;place-items:center;border:0;background:transparent;cursor:pointer}
.projetos .play i{width:32px;height:32px;border-radius:6px;background:rgba(0,0,0,.72);display:grid;place-items:center}
.projetos .play i::before{content:"";border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.projetos figure.tocando .play{opacity:0}

/* quem */
.quem-sec{padding:20px 0 44px}
.quem{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;max-width:620px;margin:0 auto;padding:0 18px}
.quem .foto{position:relative}
.quem .foto::before{content:"";position:absolute;left:-10px;top:14px;width:78%;height:82%;background:var(--acento)}
.quem .foto img{position:relative;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 18%;filter:grayscale(.15)}
.quem h2{font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;font-size:15px;color:var(--acento)}
.quem p{font-size:14.5px;line-height:1.5;margin-top:8px;color:var(--suave)}
.quem p b{color:var(--texto)}

/* faq */
.faq-sec{padding:20px 0 50px}
.faq{max-width:520px;margin:20px auto 0;padding:0 18px;display:grid;gap:8px}
.faq details{background:#f2f2f2;color:#1b1b1b;border-radius:6px}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:10px;padding:13px 14px;font-size:14.5px;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"⌄";font-size:14px}
.faq details p{padding:0 14px 14px;font-size:14px;color:#444;line-height:1.5}

/* final */
.final{background:#f2f2f2;color:#1b1b1b;padding:46px 18px;text-align:center}
.final .botao{display:inline-flex;width:auto}
.rodape{background:#1b1b1b;text-align:center;padding-bottom:calc(30px + env(safe-area-inset-bottom))}
.rodape .wrap{justify-items:center;margin:0 auto}
.obrigado h2{font-size:18px;text-transform:uppercase;text-align:center}
.obrigado .intro{text-align:center;font-size:13.5px}
.obrigado ul{font-size:13.5px}


/* ================= v6: as cenas dirigidas pela rolagem =================
   GSAP + ScrollTrigger dirigem; Lenis suaviza; Three.js desenha as caixas 3D.
   Cada cena é um bloco preso (pin) com a duração em altura de rolagem. Com "reduzir movimento",
   nada é preso e tudo aparece na pose final. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.cena{position:relative;height:100svh;overflow:hidden;background:#050605;color:#f2f4f1}
.cena .centro{position:absolute;inset:0;display:grid;place-items:center}
/* A · abertura Black: a palavra BLACK acende como neon, a câmera atravessa o "A" e a marca bate na tela */
#cena-a{background:#030403}
#cena-a .grao{position:absolute;inset:0;opacity:.09;pointer-events:none;z-index:6;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
#cena-a .data-a{position:absolute;left:0;right:0;top:calc(50% - clamp(90px,28vw,420px)*.78);text-align:center;font:italic 900 clamp(13px,2.6vw,20px)/1 ArchivoI,Impact,sans-serif;color:#12f522;opacity:0;z-index:3;pointer-events:none}
#cena-a .black-palavra{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center;z-index:3;opacity:0;transform-origin:47% 56%;will-change:transform}
#cena-a .black-palavra span{grid-area:1/1;font:italic 900 clamp(90px,28vw,420px)/.8 ArchivoI,Impact,sans-serif;font-stretch:88%;letter-spacing:-.02em;padding-right:.08em}
#cena-a .contorno{color:transparent;-webkit-text-stroke:1.5px rgba(18,245,34,.55)}
#cena-a .cheio{color:#12f522;text-shadow:0 0 30px rgba(18,245,34,.6),0 0 90px rgba(18,245,34,.35);clip-path:inset(0 100% 0 0)}
#cena-a .flash{position:absolute;inset:0;background:#12f522;opacity:0;z-index:5;pointer-events:none;mix-blend-mode:screen}
#cena-a .fitas{position:absolute;inset:0;z-index:1;pointer-events:none}
#cena-a .fita{position:absolute;left:-20%;right:-20%;top:46%;transform:rotate(-9deg);overflow:hidden}
#cena-a .fita.f2{top:52%;transform:rotate(7deg)}
#cena-a .fita .vai{display:flex;width:max-content;animation:fita-anda 18s linear infinite}
#cena-a .fita.f2 .vai{animation-direction:reverse}
#cena-a .fita span{display:block;white-space:nowrap;padding:.42em 0;font:italic 900 clamp(16px,3.2vw,30px)/1 ArchivoI,Impact,sans-serif;text-transform:uppercase}
#cena-a .f1{background:#12f522;color:#030403;box-shadow:0 0 40px rgba(18,245,34,.4)}
#cena-a .f2{background:#0b0d0b;color:#12f522;border-block:1.5px solid #12f522}
@keyframes fita-anda{to{transform:translateX(-50%)}}
#cena-a .pose{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,1.4svh,16px);padding:calc(env(safe-area-inset-top) + 4svh) 18px 4svh}
#cena-a .logo-a{width:min(84vw,500px);filter:drop-shadow(0 18px 30px rgba(0,0,0,.7));will-change:transform}
#cena-a .palco-p{position:relative;width:min(58vw,330px)}
#cena-a .halo{position:absolute;inset:-40%;border-radius:50%;background:radial-gradient(closest-side,rgba(18,245,34,.4),transparent 70%);z-index:-1}
#cena-a .produto{width:100%;mix-blend-mode:lighten;will-change:transform;-webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent);mask-image:radial-gradient(closest-side,#000 72%,transparent)}
@media (min-width:900px){
  #cena-a .pose{display:grid;grid-template-columns:auto auto;align-content:center;justify-content:center;column-gap:24px;row-gap:10px}
  #cena-a .logo-a{width:min(40vw,560px)}#cena-a .palco-p{width:min(32vw,440px)}#cena-a .fecho{grid-column:1/-1;justify-self:center}
}
#cena-a .fecho{text-align:center;max-width:36ch}
#cena-a .fecho p{font-size:clamp(14px,2vw,17px);line-height:1.4;color:rgba(242,244,241,.8);margin:0 0 12px}
#cena-a .fecho p b{color:#fff}
#cena-a .fecho .botao{display:inline-flex;width:auto}
#cena-a .dica{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-size:12px;color:rgba(242,244,241,.5);text-transform:uppercase;z-index:4}
/* B · anel 3D de caixas */
/* celular sem WebGL: a capa do curso ativo no lugar do anel 3D */
#cena-b .capa-b{display:none;position:absolute;left:50%;top:46%;width:min(52vw,300px);transform:translate(-50%,-50%);border-radius:6px;box-shadow:0 0 0 1px rgba(18,245,34,.4),0 30px 60px rgba(0,0,0,.6)}
#cena-b.sem-3d .capa-b{display:block}
#cena-b canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
#cena-b .rotulo{position:absolute;left:0;right:0;bottom:8svh;text-align:center;padding:0 20px;pointer-events:none}
#cena-b .rotulo small{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#12f522;margin-bottom:8px}
#cena-b .rotulo h3{font-family:ArchivoI,Impact,sans-serif;font-style:italic;font-weight:900;text-transform:uppercase;font-size:clamp(30px,6vw,64px);line-height:.95}
#cena-b .rotulo p{margin-top:8px;color:rgba(242,244,241,.75);font-size:15px}
#cena-b .topo-b{position:absolute;top:8svh;left:0;right:0;text-align:center;font-family:ArchivoI,Impact,sans-serif;font-style:italic;font-weight:900;text-transform:uppercase;font-size:clamp(20px,3.6vw,34px);padding:0 20px}
#cena-b .topo-b span{color:#12f522}
#cena-b .pontos{position:absolute;top:50%;right:18px;display:grid;gap:8px;transform:translateY(-50%)}
#cena-b .pontos i{width:6px;height:6px;border-radius:50%;background:rgba(242,244,241,.25);transition:background .3s,transform .3s}
#cena-b .pontos i.on{background:#12f522;transform:scale(1.6)}
/* C · zoom atravessando o vídeo de 6,3 mi */
#cena-c .cartao{position:absolute;left:50%;top:50%;width:min(34vw,220px);aspect-ratio:9/16;transform:translate(-50%,-50%);border-radius:18px;overflow:hidden;will-change:width,border-radius}
#cena-c .cartao img{width:100%;height:100%;object-fit:cover}
#cena-c .cartao::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.65))}
#cena-c .numero{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;z-index:2;padding:0 16px}
#cena-c .cartao::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(0,0,0,var(--escuro,0))}
#cena-c .numero b{display:block;font-family:ArchivoI,Impact,sans-serif;font-style:italic;font-weight:900;font-size:clamp(80px,22vw,260px);line-height:.85;color:#fff;text-shadow:0 10px 40px rgba(0,0,0,.6)}
#cena-c .numero>span{display:block;margin-top:14px;font-size:clamp(15px,2.4vw,22px);font-weight:700;max-width:30ch;margin-left:auto;margin-right:auto}
#cena-c .numero span em{color:#12f522;font-style:normal}
/* D · parede de vídeos */
#cena-d .palco-d{position:absolute;inset:-25% -10%;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;transform:rotateX(18deg) rotateZ(-8deg);transform-style:preserve-3d}
#cena-d{perspective:1200px}
#cena-d .coluna{display:grid;gap:14px;align-content:start;will-change:transform}
#cena-d .coluna figure{aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#111}
#cena-d .coluna img,#cena-d .coluna video{width:100%;height:100%;object-fit:cover}
#cena-d .titulo-d{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;z-index:2;padding:0 16px}
#cena-d .titulo-d h2{font-family:ArchivoI,Impact,sans-serif;font-style:italic;font-weight:900;text-transform:uppercase;font-size:clamp(36px,8vw,96px);line-height:.92;text-shadow:0 10px 50px rgba(0,0,0,.9)}
#cena-d .titulo-d h2 span{color:#12f522}
#cena-d .veu{position:absolute;inset:0;background:radial-gradient(closest-side,rgba(5,6,5,.75),rgba(5,6,5,.2));z-index:1}
/* E · Prompt Box se monta */
#cena-e .grade-e{position:absolute;left:50%;top:54%;width:min(92vw,620px);transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#cena-e .grade-e div{aspect-ratio:1;border-radius:14px;overflow:hidden;position:relative;will-change:transform,opacity}
#cena-e .grade-e img{width:100%;height:100%;object-fit:cover}
#cena-e .grade-e div::after{content:"copiar prompt";position:absolute;left:8px;bottom:8px;font-size:10.5px;font-weight:800;color:#062a08;background:#12f522;padding:4px 8px;border-radius:999px}
#cena-e .selo-e{position:absolute;left:50%;top:13svh;width:min(64vw,330px);transform:translateX(-50%)}
#cena-e .legenda-e{position:absolute;left:0;right:0;bottom:calc(10svh + 30px);text-align:center;padding:0 20px;color:rgba(242,244,241,.8);font-size:15px}
#cena-e .legenda-e b{color:#fff}
@media (prefers-reduced-motion:reduce){
  .cena{height:auto;min-height:100svh}
  #cena-a .black-palavra,#cena-a .data-a,#cena-a .dica{display:none}
}
/* hero Black: a ficha da oferta. contagem até o lote 1, os lotes com o preço tarjado e a lista VIP */
.topo-black{position:relative;background:#030403;color:#f2f4f1;padding:0 0 34px;overflow:clip}
.topo-black::before{content:"";position:absolute;left:50%;top:180px;width:140vmin;height:140vmin;margin-left:-70vmin;border-radius:50%;background:radial-gradient(closest-side,rgba(18,245,34,.13),transparent 70%);pointer-events:none}
.fita-topo{background:#12f522;color:#030403;overflow:hidden;transform:rotate(-2deg);margin:18px -10px 30px;box-shadow:0 0 40px rgba(18,245,34,.35)}
.fita-topo .vai{display:flex;width:max-content;animation:fita-anda 22s linear infinite}
.fita-topo span{white-space:nowrap;padding:9px 0;font:italic 900 15px/1 ArchivoI,Impact,sans-serif;text-transform:uppercase}
.topo-black .col{position:relative;text-align:left}
.topo-black h1{font:italic 900 clamp(34px,9.6vw,58px)/.92 ArchivoI,Impact,sans-serif;font-stretch:90%;text-transform:uppercase;letter-spacing:-.01em}
.topo-black h1 span{color:#12f522;text-shadow:0 0 24px rgba(18,245,34,.45)}
.topo-black h1 em{font-style:inherit;-webkit-text-stroke:1.5px #f2f4f1;color:transparent}
.topo-black .sub{margin-top:14px;font-size:15.5px;line-height:1.45;color:rgba(242,244,241,.78);max-width:40ch}
.topo-black .sub b{color:#fff}
.contagem{margin-top:24px}
.contagem p{font:italic 900 13px/1 ArchivoI,Impact,sans-serif;text-transform:uppercase;color:#12f522;margin-bottom:8px}
.contagem .digitos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.contagem .digitos div{background:linear-gradient(180deg,#121512 50%,#0b0d0b 50%);border:1px solid rgba(18,245,34,.28);border-radius:12px;padding:12px 0 8px;text-align:center;position:relative}
.contagem .digitos div::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#030403}
.contagem b{display:block;font:italic 900 clamp(34px,10vw,52px)/1 ArchivoI,Impact,sans-serif;font-variant-numeric:tabular-nums;color:#f2f4f1}
.contagem small{display:block;margin-top:4px;font-size:11px;color:rgba(242,244,241,.55)}
.lotes{list-style:none;margin:22px 0 0;padding:0;border-top:1.5px dashed rgba(242,244,241,.25)}
.lotes li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:13px 4px;border-bottom:1.5px dashed rgba(242,244,241,.25)}
.lotes .n{font:italic 900 19px/1 ArchivoI,Impact,sans-serif;text-transform:uppercase;min-width:4.6em}
.lotes .d{font-size:13.5px;color:rgba(242,244,241,.7)}
.lotes .p{font:italic 900 15px/1 ArchivoI,Impact,sans-serif;color:rgba(242,244,241,.85);text-align:right}
.lotes .p i{display:inline-block;font-style:normal;filter:blur(5px);user-select:none}
.lotes .p small{display:block;font:600 10.5px/1.2 Archivo,sans-serif;color:rgba(242,244,241,.5);margin-top:4px;filter:none}
.lotes li.um{background:#12f522;color:#030403;border-radius:12px;border-bottom-color:transparent;margin:8px 0;padding:14px 12px;transform:rotate(-1deg);box-shadow:0 14px 40px -12px rgba(18,245,34,.6)}
.lotes li.um .d,.lotes li.um .p,.lotes li.um .p small{color:#030403}
.lotes li.um .tag{display:inline-block;margin-left:6px;font:italic 900 10.5px/1 ArchivoI,sans-serif;background:#030403;color:#12f522;padding:4px 7px;border-radius:999px;vertical-align:middle}
.topo-black .prioridade{margin:28px auto 0;max-width:none;border:0;border-radius:18px;background:#0c0e0c;box-shadow:0 0 0 1.5px #12f522,0 30px 80px -24px rgba(18,245,34,.45);padding:0 18px 18px;overflow:hidden}
.topo-black .prioridade .vip{margin:0 -18px 18px;background:repeating-linear-gradient(-45deg,#12f522 0 14px,#030403 14px 28px);padding:6px 0}
.topo-black .prioridade .vip b{display:block;width:max-content;margin:0 auto;background:#030403;color:#12f522;font:italic 900 14px/1 ArchivoI,Impact,sans-serif;text-transform:uppercase;padding:6px 12px;border-radius:6px}
.topo-black .prioridade h2{text-align:left;font:italic 900 19px/1.05 ArchivoI,Impact,sans-serif}
.topo-black .seta{border-color:rgba(18,245,34,.5);color:#12f522}
@media (min-width:900px){.topo-black .col{max-width:640px}}
/* o caminho: trilho de luz na borda que enche com a rolagem, o dedo que ensina a rolar e o aviso da próxima tela */
.trilho-guia{position:fixed;left:8px;top:18svh;bottom:18svh;width:2px;background:rgba(242,244,241,.12);border-radius:2px;z-index:40;pointer-events:none}
.trilho-guia i{position:absolute;left:0;top:0;width:100%;height:100%;background:#12f522;box-shadow:0 0 10px #12f522;transform-origin:top;transform:scaleY(var(--p,0));border-radius:2px}
.trilho-guia b{position:absolute;left:-4px;top:calc(var(--p,0)*100%);width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#12f522;box-shadow:0 0 0 4px rgba(18,245,34,.25),0 0 18px #12f522}
.dedo{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 18px);transform:translateX(-50%);z-index:7;display:grid;justify-items:center;gap:6px;pointer-events:none}
.dedo svg{width:34px;height:52px;overflow:visible}
.dedo .mao{animation:dedo-sobe 1.6s cubic-bezier(.5,0,.2,1) infinite}
.dedo .rastro{stroke-dasharray:40;stroke-dashoffset:40;animation:dedo-rastro 1.6s cubic-bezier(.5,0,.2,1) infinite}
.dedo small{font:italic 900 12px/1 ArchivoI,Impact,sans-serif;text-transform:uppercase;color:#12f522}
@keyframes dedo-sobe{0%{transform:translateY(14px);opacity:0}20%{opacity:1}70%{transform:translateY(-14px);opacity:1}100%{transform:translateY(-14px);opacity:0}}
@keyframes dedo-rastro{0%,15%{stroke-dashoffset:40;opacity:1}70%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.proxima{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 14px);transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:8px;white-space:nowrap;background:rgba(3,4,3,.82);border:1px solid rgba(18,245,34,.45);border-radius:999px;padding:8px 14px 8px 10px;font-size:12.5px;color:rgba(242,244,241,.85);opacity:0;pointer-events:none}
.proxima b{color:#12f522;font:italic 900 12.5px/1 ArchivoI,Impact,sans-serif;text-transform:uppercase}
.proxima::before{content:"";width:18px;height:18px;border-radius:50%;background:#12f522 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 7l4 4 4-4' fill='none' stroke='%23030403' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;animation:proxima-pula 1.2s ease-in-out infinite}
@keyframes proxima-pula{50%{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){.dedo .mao,.dedo .rastro,.proxima::before{animation:none}.dedo .rastro{stroke-dashoffset:0}}
/* primeiro quadro já na pose inicial da abertura (a classe js nasce no <head>) */
@media (prefers-reduced-motion:no-preference){.js #cena-a .black-palavra,.js #cena-a .data-a{opacity:1}.js #cena-a .logo-a,.js #cena-a .produto,.js #cena-a .halo,.js #cena-a .fecho{opacity:0}}