/* EBOX · Anatomy of a Vial · v4 "Trailer" · fonte de verdade em specs/v4.md */
:root{
  --fundo:#070c26; --borda:#020308;
  --tinta:#eef1fb; --fraco:#8a94c2; --acento:#e02a2e;
  --gutter:clamp(22px,5vw,96px);
  --texto:"Text Me One","Inter",system-ui,sans-serif;   /* escritas menores: Text Me One (pedido de 27/09), so peso 400 */
  --display:"Michroma","Inter",system-ui,sans-serif;   /* titulos: Michroma (pedido de 27/09), larga e futurista */
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--borda);color-scheme:dark}
body{background:var(--borda);color:var(--tinta);font-family:var(--texto);font-weight:400;
     -webkit-font-smoothing:antialiased;overflow-x:hidden;cursor:none}
@media (hover:none),(max-width:900px){ body{cursor:auto} }
::selection{background:var(--acento);color:#fff}

/* a cena fica fixa atras de tudo; quem rola e o documento vazio */
#cena{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
/* veu escuro no pe da tela, so no celular: o texto fica sobre o DNA que vaza a tela inteira */
.veu{display:none;position:fixed;left:0;right:0;bottom:0;height:52%;z-index:1;pointer-events:none;
     background:linear-gradient(to top,rgba(2,3,8,.88) 0%,rgba(2,3,8,.55) 45%,rgba(2,3,8,0) 100%)}

/* ---------- HUD ---------- */
.hud{position:fixed;inset:0;z-index:5;pointer-events:none;font-family:var(--texto);
     font-size:13px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--fraco)}
.hud-canto{position:absolute;display:flex;flex-direction:column;gap:6px;line-height:1.3}
.topo-esq{left:var(--gutter);top:clamp(20px,2.6vw,34px)}
.topo-dir{right:var(--gutter);top:clamp(22px,2.7vw,36px);align-items:flex-end}
.base-esq{left:var(--gutter);bottom:clamp(20px,2.6vw,34px)}
.base-dir{right:var(--gutter);bottom:clamp(20px,2.6vw,34px);align-items:flex-end;transition:opacity .5s}
.base-dir.sumiu{opacity:0}
.base-dir .linha{display:block;width:1px;height:38px;background:var(--fraco);opacity:.7;transform-origin:top;
                 animation:rolar 1.8s ease-in-out infinite}
@keyframes rolar{0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top}
                 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom}}
.hud .logo{height:clamp(22px,2.2vw,30px);width:auto;display:block;opacity:.95}
.hud .sub{opacity:.7}
#hud-cena{color:var(--tinta);transition:opacity .3s}
#hud-cena.troca{opacity:0}
#hud-lote{color:var(--tinta)}
.progresso{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(138,148,194,.18)}
.progresso i{display:block;height:100%;width:0;background:var(--acento);transform-origin:left}

/* lista das seis cenas na borda direita (so desktop) */
.nav-cenas{--nav-w:4px;position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);list-style:none;
           display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:auto}
.nav-cenas li{display:flex;align-items:center;gap:10px}
.nav-cenas li::before{content:"";display:block;width:var(--nav-w,4px);height:1px;background:var(--fraco);opacity:.5;
                      transition:width .12s linear,background .3s,opacity .3s}
.nav-cenas li:has(.ativa)::before{background:var(--acento);opacity:1;width:calc(var(--nav-w,4px) + 10px)}
.nav-cenas button{appearance:none;background:none;border:0;padding:4px 0;cursor:none;font:inherit;
                  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--fraco);opacity:.55;
                  transition:opacity .3s,color .3s}
.nav-cenas button:hover{opacity:1;color:var(--tinta)}
.nav-cenas button.ativa{opacity:1;color:var(--acento)}

/* ---------- textos: camada fixa ---------- */
.textos{position:fixed;inset:0;z-index:4;pointer-events:none}
.bloco{position:absolute;max-width:min(46vw,640px);opacity:0;visibility:hidden}
.bloco.esq{left:var(--gutter);top:50%;transform:translateY(-50%)}
.bloco.esq-topo{left:var(--gutter);top:clamp(96px,15vh,150px);max-width:min(34vw,500px)}   /* o titulo quebra em duas linhas e nao alcanca o DNA */
.bloco.strand-bloco{max-width:min(40vw,560px)}   /* a Strand: titulo e subtitulo no meio, a esquerda, sem alcancar o DNA */
.bloco.esq-baixo{left:var(--gutter);bottom:clamp(88px,14vh,140px)}
.bloco.centro-baixo{left:50%;transform:translateX(-50%);bottom:clamp(70px,12vh,120px);text-align:center;max-width:none;white-space:nowrap}
.bloco > *{opacity:0;transform:translateY(18px)}      /* o js anima cada linha */

.rotulo{font-family:var(--texto);font-size:14px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;
        color:var(--fraco);margin-bottom:clamp(14px,1.6vw,22px)}
/* seta fina (Lucide arrow-right) em vermelho antes do rotulo, no lugar da bolinha (pedido de 27/09) */
.rotulo::before{content:"";display:inline-block;width:16px;height:12px;background:var(--acento);margin-right:12px;vertical-align:-1px;
                -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9h19M15 3l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
                mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9h19M15 3l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.rotulo.creditos::before{display:none}
.titulo{font-family:var(--display);font-weight:400;letter-spacing:.01em;line-height:1.18;
        font-size:clamp(22px,2.7vw,40px);color:var(--tinta)}
.titulo.pequeno{font-size:clamp(18px,1.8vw,26px)}
.titulo em{font-style:normal;color:var(--acento)}
.linha{margin-top:clamp(14px,1.6vw,22px);font-size:14px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta);opacity:.75}
.linha.fraca{opacity:.5;margin-top:10px;font-size:12px}

/* ---------- assinatura manuscrita do fim: o traco escreve letra por letra, o cheio revela atras,
   e um fecho de luz passa pelas letras no final (pedido de 27/09) ---------- */
.assinatura{display:block;width:min(420px,78vw);height:auto;margin:0 auto 18px;overflow:visible}
.assinatura .traco{fill:none;stroke:var(--tinta);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;
                   stroke-dasharray:var(--len,4000);stroke-dashoffset:var(--len,4000);opacity:.9}
.assinatura .cheio{fill:var(--tinta)}
.assinatura .ass-revela{transform:scaleX(0);transform-origin:left;transform-box:fill-box}
.assinatura .brilho{opacity:0;mix-blend-mode:screen}
.bloco.escreve .assinatura .traco{animation:ass-escrever 2.6s cubic-bezier(.45,0,.25,1) forwards}
.bloco.escreve .assinatura .ass-revela{animation:ass-revelar 2.6s cubic-bezier(.45,0,.25,1) .12s forwards}
.bloco.escreve .assinatura .brilho{animation:ass-luz .85s ease-in-out 2.85s forwards}
.bloco.escreve .assinatura .cheio{animation:ass-brilhar .9s ease-out 2.9s}
@keyframes ass-escrever{to{stroke-dashoffset:0}}
@keyframes ass-revelar{to{transform:scaleX(1)}}
@keyframes ass-luz{0%{opacity:0;transform:translateX(0)} 15%{opacity:1} 85%{opacity:1} 100%{opacity:0;transform:translateX(calc(var(--w) * 1.75px))}}
@keyframes ass-brilhar{0%{filter:drop-shadow(0 0 0 rgba(238,241,251,0))} 40%{filter:drop-shadow(0 0 14px rgba(238,241,251,.95))} 100%{filter:drop-shadow(0 0 0 rgba(238,241,251,0))}}
@media (prefers-reduced-motion:reduce){
  .assinatura .traco{stroke-dashoffset:0}
  .assinatura .ass-revela{transform:none}
  .bloco.escreve .assinatura .traco,.bloco.escreve .assinatura .ass-revela,.bloco.escreve .assinatura .brilho,.bloco.escreve .assinatura .cheio{animation:none}
}

/* ---------- galeria "The line": lista de produtos e glitch de troca do nome ---------- */
.lista-produtos{list-style:none;margin-top:clamp(22px,3vw,40px);display:flex;flex-direction:column;gap:6px;pointer-events:auto}
.lista-produtos button{appearance:none;background:none;border:0;padding:3px 0;cursor:none;font-family:var(--texto);font-size:12px;white-space:nowrap;
                       letter-spacing:.2em;text-transform:uppercase;color:var(--fraco);opacity:.7;transition:opacity .25s,color .25s,transform .25s;text-align:left}
.lista-produtos button::before{content:"";display:inline-block;width:14px;height:10px;margin-right:10px;vertical-align:0;background:currentColor;opacity:.6;
                       -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9h19M15 3l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
                       mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9h19M15 3l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.lista-produtos button:hover{opacity:1;color:var(--tinta);transform:translateX(4px)}
.lista-produtos button.ativo{opacity:1;color:var(--acento)}
.lista-produtos button.ativo::before{opacity:1}
@media (hover:none),(max-width:900px){ .lista-produtos button{cursor:pointer} }
.titulo.troca{animation:glitch .32s steps(1,end) both}
@keyframes glitch{
  0%{clip-path:inset(0 0 62% 0);transform:translateX(-6px);text-shadow:2px 0 var(--acento),-2px 0 #3f5cff}
  20%{clip-path:inset(38% 0 22% 0);transform:translateX(5px)}
  40%{clip-path:inset(70% 0 0 0);transform:translateX(-3px);text-shadow:-2px 0 var(--acento),2px 0 #3f5cff}
  60%{clip-path:inset(12% 0 48% 0);transform:translateX(3px)}
  80%{clip-path:inset(52% 0 10% 0);transform:translateX(-2px)}
  100%{clip-path:none;transform:none;text-shadow:none}}
@media (prefers-reduced-motion:reduce){ .titulo.troca{animation:none} }

/* ---------- hero: aviso de rolar centralizado; a logo da HUD some enquanto a grande esta na tela ---------- */
.fio-rolar{display:block;width:1px;height:38px;margin:16px auto 0;background:var(--fraco);opacity:.8;transform-origin:top;animation:rolar 1.8s ease-in-out infinite}
.bloco.intro .rotulo.creditos{font-size:12px;margin-bottom:8px}
.hud .logo{transition:opacity .6s}
body.hero-logo .hud .logo{opacity:0}
@media (prefers-reduced-motion:reduce){ .fio-rolar{animation:none} }

/* ---------- verificacao de originalidade (hero): celulas do codigo, loading, selo ---------- */
.verificar{margin:clamp(10px,1.6vw,18px) auto;pointer-events:auto;display:flex;flex-direction:column;align-items:center}
.ver-form{display:flex;flex-direction:column;align-items:center;gap:12px}
.ver-rotulo{display:inline-flex;align-items:center;gap:10px;font-family:var(--texto);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--fraco)}
.ver-rotulo svg{width:15px;height:15px;stroke:var(--acento);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ver-campo{position:relative;display:flex;gap:10px;align-items:stretch}
/* as 8 celulas: cada caractere digitado acende uma; a proxima pisca; a borda do grupo tem uma luz que gira */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.ver-celulas{position:relative;display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:14px;cursor:text;isolation:isolate;
             background:rgba(8,11,30,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden}
.ver-celulas::before{content:"";position:absolute;inset:0;padding:1px;border-radius:14px;z-index:-1;
             background:conic-gradient(from var(--ang),rgba(238,241,251,.10) 0 62%,var(--acento) 76%,rgba(238,241,251,.9) 82%,rgba(238,241,251,.10) 92%);
             -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
             animation:ver-borda 4s linear infinite}
@keyframes ver-borda{to{--ang:360deg}}
.verificar.foco .ver-celulas::before{animation-duration:1.6s}
.ver-celulas .cel{width:34px;height:44px;border-radius:9px;border:1px solid rgba(238,241,251,.16);background:rgba(238,241,251,.04);
             display:grid;place-items:center;font-family:var(--display);font-size:19px;color:var(--tinta);position:relative;
             transition:border-color .25s,background .25s,box-shadow .25s,transform .25s}
.ver-celulas .cel.cheia{border-color:rgba(238,241,251,.5);background:rgba(238,241,251,.09);box-shadow:0 0 14px rgba(223,232,255,.25),inset 0 0 8px rgba(223,232,255,.08)}
.ver-celulas .cel.pop{animation:cel-pop .32s cubic-bezier(.2,1.6,.4,1)}
@keyframes cel-pop{0%{transform:scale(.6);box-shadow:0 0 0 rgba(224,42,46,0)} 50%{transform:scale(1.14);box-shadow:0 0 22px rgba(224,42,46,.55)} 100%{transform:none}}
.ver-celulas .cel.ativa{border-color:var(--acento);box-shadow:0 0 16px rgba(224,42,46,.35)}
.ver-celulas .cel.ativa::after{content:"";position:absolute;width:12px;height:1.5px;bottom:9px;background:var(--acento);animation:cel-caret 1s steps(2,end) infinite}
@keyframes cel-caret{50%{opacity:0}}
.ver-celulas .sep{width:10px;height:1.5px;background:var(--fraco);opacity:.6;margin:0 2px}
.ver-varredura{position:absolute;top:0;bottom:0;width:70px;left:-90px;pointer-events:none;opacity:0;
             background:linear-gradient(90deg,transparent,rgba(223,232,255,.35),transparent)}
.verificar.completo .ver-celulas .cel.cheia{border-color:rgba(238,241,251,.75)}
.verificar.carregando .ver-varredura{opacity:1;animation:ver-varre 1.1s ease-in-out infinite}
@keyframes ver-varre{to{left:calc(100% + 20px)}}
.verificar.carregando .ver-celulas .cel{animation:cel-onda 1.1s ease-in-out infinite;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes cel-onda{50%{border-color:rgba(238,241,251,.8);box-shadow:0 0 18px rgba(223,232,255,.45);transform:translateY(-2px)}}
.verificar.ok .ver-celulas .cel{border-color:#3ddc97;background:rgba(61,220,151,.12);box-shadow:0 0 18px rgba(61,220,151,.45);color:#d9ffee}
.verificar.ok .ver-celulas::before{background:conic-gradient(from var(--ang),rgba(61,220,151,.25) 0 60%,#3ddc97 78%,#fff 84%,rgba(61,220,151,.25) 94%);animation-duration:1.2s}
.verificar.erro .ver-celulas{animation:ver-treme .45s}
.verificar.erro .ver-celulas .cel{border-color:var(--acento);background:rgba(224,42,46,.12);box-shadow:0 0 16px rgba(224,42,46,.5)}
@keyframes ver-treme{0%,100%{transform:none}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.ver-oculto{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;background:none;color:transparent;caret-color:transparent;
             font-size:16px;cursor:text;z-index:1}   /* o campo de verdade, invisivel, por cima das celulas (o teclado do celular abre ao tocar) */
.ver-campo .ver-botao{position:relative;z-index:2}
.ver-botao{position:relative;appearance:none;padding:0 18px;border-radius:12px;border:1px solid var(--acento);background:var(--acento);color:#fff;font-family:var(--texto);
           font-size:13px;letter-spacing:.2em;text-transform:uppercase;cursor:none;min-width:104px;transition:filter .25s,box-shadow .25s;box-shadow:0 8px 24px rgba(224,42,46,.28)}
.ver-botao:hover{filter:brightness(1.12);box-shadow:0 10px 30px rgba(224,42,46,.45)}
.ver-spinner{position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;opacity:0;animation:ver-gira .8s linear infinite}
.verificar.carregando .ver-texto{opacity:0}
.verificar.carregando .ver-spinner{opacity:1}
@keyframes ver-gira{to{transform:rotate(360deg)}}
.ver-status{min-height:1.3em;font-family:var(--texto);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--acento);opacity:0;transition:opacity .3s;max-width:min(460px,84vw);text-align:center}
.ver-status.mostra{opacity:1}
.verificar.carregando .ver-status{color:var(--fraco)}
.verificar.ok .ver-status{color:#3ddc97}
.ver-pilula{appearance:none;display:inline-flex;align-items:center;gap:10px;padding:9px 18px;border-radius:999px;border:1px solid rgba(238,241,251,.28);
            background:linear-gradient(135deg,rgba(24,31,70,.62),rgba(8,11,30,.4));color:var(--tinta);font-family:var(--texto);font-size:11px;letter-spacing:.2em;
            text-transform:uppercase;cursor:none;transition:border-color .25s,transform .25s}
.ver-pilula:hover{border-color:var(--acento);transform:translateY(-1px)}
@media (hover:none),(max-width:900px){ .ver-pilula,.ver-botao{cursor:pointer} }
/* ---------- o selo: flash na tela, varredura de luz, raios, carimbo com aneis girando, faiscas, cartao ---------- */
.selo-original{position:fixed;right:var(--gutter);top:50%;transform:translateY(-50%);z-index:6;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:14px;
               width:min(300px,80vw);opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.selo-original.mostra{opacity:1;visibility:visible;transition:opacity .4s}
.selo-flash{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 62% 50%,rgba(61,220,151,.42),rgba(61,220,151,.10) 35%,transparent 70%);opacity:0}
.selo-original.mostra .selo-flash{animation:selo-flash 1.3s ease-out}
@keyframes selo-flash{0%{opacity:0} 12%{opacity:1} 100%{opacity:0}}
.selo-scan{position:fixed;left:0;right:0;top:0;height:3px;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,#3ddc97 30%,#fff 50%,#3ddc97 70%,transparent);
           box-shadow:0 0 24px 6px rgba(61,220,151,.55)}
.selo-original.mostra .selo-scan{animation:selo-scan .9s cubic-bezier(.4,0,.2,1) forwards}
@keyframes selo-scan{0%{opacity:1;transform:translateY(0)} 90%{opacity:1} 100%{opacity:0;transform:translateY(100vh)}}
.selo-carimbo{position:relative;width:180px;height:180px;filter:drop-shadow(0 0 22px rgba(61,220,151,.5))}
.selo-original.mostra .selo-carimbo{animation:carimbar .8s cubic-bezier(.2,1.5,.4,1) .55s both}
@keyframes carimbar{0%{transform:scale(2.4) rotate(-80deg);opacity:0} 45%{opacity:1} 100%{transform:none;opacity:1}}
.selo-raios{position:absolute;inset:-70px;border-radius:50%;pointer-events:none;opacity:0;
            background:conic-gradient(from 0deg,transparent 0 6%,rgba(61,220,151,.28) 8%,transparent 12%,transparent 30%,rgba(61,220,151,.22) 33%,transparent 37%,transparent 55%,rgba(61,220,151,.3) 58%,transparent 62%,transparent 78%,rgba(61,220,151,.22) 81%,transparent 86%);
            -webkit-mask:radial-gradient(circle,transparent 34%,#000 42%,transparent 72%);mask:radial-gradient(circle,transparent 34%,#000 42%,transparent 72%);
            animation:selo-raios 14s linear infinite}
.selo-original.mostra .selo-raios{opacity:1;transition:opacity 1s .8s}
@keyframes selo-raios{to{transform:rotate(360deg)}}
.selo-carimbo svg{width:100%;height:100%;overflow:visible;position:relative}
.selo-carimbo .anel{fill:rgba(8,11,30,.6);stroke:#3ddc97;stroke-width:2.4}
.selo-carimbo .anel.tracejado{fill:none;stroke-width:1;stroke-dasharray:3 6;opacity:.8;transform-box:fill-box;transform-origin:center;animation:selo-gira-inv 30s linear infinite}
.selo-carimbo .anel.fino{fill:none;stroke-width:1;opacity:.7}
.selo-carimbo .giro{font-family:var(--texto);font-size:13.5px;letter-spacing:.2em;fill:#3ddc97;transform-box:fill-box;transform-origin:center;animation:selo-gira 18s linear infinite}
@keyframes selo-gira{to{transform:rotate(360deg)}}
@keyframes selo-gira-inv{to{transform:rotate(-360deg)}}
.selo-carimbo .check{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:80;stroke-dashoffset:80;filter:drop-shadow(0 0 8px #fff)}
.selo-original.mostra .check{animation:ver-traco .5s ease-out 1.15s forwards}
@keyframes ver-traco{to{stroke-dashoffset:0}}
.selo-faiscas{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.faisca{position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:#d9ffee;box-shadow:0 0 8px 2px rgba(61,220,151,.9);opacity:0;
        animation:faisca .9s cubic-bezier(.1,.8,.3,1) var(--atraso,.6s) forwards}
@keyframes faisca{0%{opacity:0;transform:translate(0,0) scale(.4)} 12%{opacity:1} 100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0)}}
.selo-texto{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:16px 20px;border-radius:16px;border:1px solid rgba(61,220,151,.28);
            background:linear-gradient(135deg,rgba(24,31,70,.66),rgba(8,11,30,.46));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
            box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 30px rgba(61,220,151,.14),inset 0 1px 0 rgba(255,255,255,.08);width:100%;opacity:0;transform:translateY(12px)}
.selo-original.mostra .selo-texto{animation:selo-texto .6s ease-out 1.3s forwards}
@keyframes selo-texto{to{opacity:1;transform:none}}
.selo-titulo{font-family:var(--texto);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#3ddc97;text-shadow:0 0 12px rgba(61,220,151,.6)}
.selo-nome{font-family:var(--display);font-size:clamp(16px,1.3vw,19px);color:var(--tinta);line-height:1.2}
.selo-linha{font-family:var(--texto);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta);opacity:.85}
.selo-linha.fraca{color:var(--fraco);opacity:.9}
.selo-original .ver-pilula{margin-top:6px}
@media (max-width:900px){
  .ver-rotulo{display:block;text-align:center;max-width:320px;line-height:1.5}
  .ver-rotulo svg{vertical-align:-3px;margin-right:6px}
  .ver-celulas{gap:4px;padding:7px 8px}
  .ver-celulas .cel{width:30px;height:40px;font-size:17px}
  .ver-campo{flex-direction:column;align-items:stretch}
  .ver-botao{padding:12px 18px}
  .selo-original{right:auto;left:50%;top:clamp(76px,10vh,96px);transform:translateX(-50%);flex-direction:row;align-items:center;gap:10px;width:calc(100% - 2 * var(--gutter))}
  .selo-original.mostra{transform:translateX(-50%)}
  .selo-carimbo{width:104px;height:104px;flex:none}
  .selo-raios{inset:-40px}
  .selo-carimbo .giro{font-size:14.5px}
  .selo-texto{padding:12px 14px;align-items:flex-start;text-align:left;gap:4px}
  .selo-flash{background:radial-gradient(ellipse at 50% 30%,rgba(61,220,151,.42),rgba(61,220,151,.10) 35%,transparent 70%)}
}
@media (prefers-reduced-motion:reduce){
  .ver-celulas::before,.selo-carimbo .giro,.selo-carimbo .anel.tracejado,.selo-raios,.ver-spinner{animation:none}
  .selo-original.mostra .selo-carimbo,.selo-original.mostra .selo-flash,.selo-original.mostra .selo-scan,.selo-original.mostra .check,.selo-original.mostra .selo-texto,.faisca{animation:none}
  .selo-original.mostra .check{stroke-dashoffset:0} .selo-original.mostra .selo-texto{opacity:1;transform:none}
}
body.verificando .hud .logo{opacity:0}

/* ---------- legendas: camada fixa, esquerda termina no traco, direita comeca nele ---------- */
.legendas{position:fixed;inset:0;z-index:4;list-style:none;pointer-events:none}
.chamada{position:absolute;left:0;top:0;opacity:0;transition:opacity .3s;will-change:transform}
.chamada .ponto{position:absolute;left:-3.5px;top:-3.5px;width:7px;height:7px;border-radius:50%;background:var(--tinta);
                box-shadow:0 0 0 4px rgba(238,241,251,.12),0 0 18px rgba(223,232,255,.7)}
.chamada .traco{position:absolute;top:0;height:1px;width:56px;background:rgba(238,241,251,.6);
                transform:scaleX(0);transition:transform .35s ease-out}
.chamada.dir .traco{left:0;transform-origin:left}
.chamada.esq .traco{right:0;transform-origin:right}
.chamada .txt{position:absolute;top:0;transform:translateY(-50%);width:max-content;max-width:260px;display:flex;flex-direction:column;gap:3px;
              font-size:14px;letter-spacing:.16em;text-transform:uppercase;line-height:1.35}
.chamada.dir .txt{left:66px;text-align:left;align-items:flex-start}
.chamada.esq .txt{right:66px;text-align:right;align-items:flex-end}
.chamada .t{color:var(--tinta);font-weight:400;font-size:15px}
.chamada .d{color:var(--fraco);font-weight:400;font-size:13px}
.chamada.visivel{opacity:1}
.chamada.visivel .traco{transform:scaleX(1)}

/* ---------- infos da strand como DADOS: numero grande que conta, brilho no ponto, fio que se desenha ---------- */
.chamada.dado .txt{gap:2px}
.chamada.dado .valor{font-family:var(--display);font-size:clamp(26px,2.6vw,38px);letter-spacing:.02em;line-height:1;color:var(--tinta);
                     text-shadow:0 0 18px rgba(223,232,255,.55);text-transform:none;margin-bottom:6px}
.chamada.dado .t{font-size:13px;letter-spacing:.2em;color:var(--tinta)}
.chamada.dado .d{font-size:12px;letter-spacing:.14em;color:var(--fraco);text-transform:none;opacity:.9}
.chamada.dado .ponto{background:var(--acento);box-shadow:0 0 0 4px rgba(224,42,46,.18),0 0 22px rgba(224,42,46,.85)}
.chamada.dado.visivel .ponto{animation:pulso 2.2s ease-in-out infinite}
.chamada.dado .traco{background:linear-gradient(90deg,var(--acento),rgba(238,241,251,.7))}
.chamada.dado.esq .traco{background:linear-gradient(270deg,var(--acento),rgba(238,241,251,.7))}
.chamada.dado .txt{opacity:0;transform:translateY(8px);transition:opacity .5s ease .25s,transform .5s ease .25s}
.chamada.dado.visivel .txt{opacity:1;transform:none}
@keyframes pulso{0%,100%{box-shadow:0 0 0 4px rgba(224,42,46,.18),0 0 22px rgba(224,42,46,.85)} 50%{box-shadow:0 0 0 9px rgba(224,42,46,.06),0 0 34px rgba(224,42,46,1)}}
@media (max-width:900px){
  .chamada.dado .valor{font-size:30px;margin-bottom:2px}
  .chamada.dado .txt{transition:none;opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){ .chamada.dado.visivel .ponto{animation:none} .chamada.dado .txt{transition:none;opacity:1;transform:none} }

/* ---------- cartoes de vidro nas infos (referencia: painel escuro translucido com borda fina) ---------- */
.chamada.dado .txt{padding:14px 18px 15px;border:1px solid rgba(238,241,251,.14);border-radius:14px;
                   background:linear-gradient(135deg,rgba(24,31,70,.62),rgba(8,11,30,.40));
                   -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
                   box-shadow:0 12px 34px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08)}
.chamada.dado .valor{margin-bottom:4px}
.chamada.dado .t{margin-top:2px}
@media (max-width:900px){ .chamada.dado .txt{border-left:2px solid var(--acento);border-radius:0 12px 12px 0} }

/* ---------- palco: so distancia de rolagem ---------- */
.palco{position:relative;z-index:1;pointer-events:none}
.cena{min-height:100svh}
.presa{min-height:100svh}
.trecho{min-height:130svh}
/* o DNA fica mais tempo na tela (pedido de 27/09): aproximacao e morfose mais longas; o pin da Strand e 340% */
.trecho.aproxima{min-height:20svh}    /* a aproximacao acontece enquanto o hero sai da tela (fim em 'bottom top'): 120svh ate a Strand */
.trecho.morfose{min-height:180svh}    /* + 100svh ate a Object travar (fim em 'bottom top') */
.trecho.fim{min-height:140svh}

/* ---------- carga: logo e uma linha de progresso (sem arco) ---------- */
.carga{position:fixed;inset:0;z-index:9;display:grid;place-items:center;background:var(--borda);
       transition:opacity .5s ease,visibility 0s .5s}
.carga.foi{opacity:0;visibility:hidden;pointer-events:none}
.carga-miolo{display:grid;justify-items:center;gap:22px;width:min(300px,70vw)}
.carga .logo{width:min(180px,44vw);height:auto;opacity:.92}
.barra-carga{width:100%;height:1px;background:rgba(138,148,194,.22)}
.barra-carga i{display:block;height:100%;width:0;background:var(--tinta);transition:width .3s ease}
.carga .num{font-family:var(--texto);font-size:13px;font-weight:400;letter-spacing:.22em;color:var(--fraco)}
.carga .num::after{content:"%";margin-left:2px}

/* ---------- cursor proprio (so desktop com mouse): a seta da EBOX ----------
   ponteiro branco com contorno navy e a lateral vermelha da marca; sobre algo clicavel
   (ou arrastavel) vira vermelho com brilho. A ponta fica no ponteiro (sem centralizar). */
.cursor{position:fixed;left:0;top:0;width:24px;height:28px;z-index:20;pointer-events:none;opacity:0;
        background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M3 2.5 3 22.2 8.3 17.4 12.1 26 15.8 24.4 12 15.8 18.8 15.3Z' fill='%23eef1fb' stroke='%230b1130' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M3.7 4 3.7 20.6' stroke='%23e02a2e' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0/contain;
        filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));transform-origin:3px 3px;
        transition:opacity .3s,transform .2s,filter .25s}
.cursor.viva{opacity:1}
.cursor.grande{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M3 2.5 3 22.2 8.3 17.4 12.1 26 15.8 24.4 12 15.8 18.8 15.3Z' fill='%23e02a2e' stroke='%23eef1fb' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M3.7 4 3.7 20.6' stroke='%23eef1fb' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");transform:scale(1.12);
               filter:drop-shadow(0 0 7px rgba(224,42,46,.7))}
.cursor.pegando{transform:scale(.92) rotate(-12deg)}
@media (hover:none),(max-width:900px){ .cursor{display:none} }

/* ---------- celular: a mesma jornada, em pe ---------- */
@media (max-width:900px){
  .veu{display:block}
  .bloco,.bloco.esq,.bloco.esq-topo,.bloco.esq-baixo{max-width:none;left:var(--gutter);right:var(--gutter);top:auto;bottom:clamp(84px,14vh,130px);transform:none}
  .bloco.intro{bottom:clamp(96px,16vh,150px)}
  .bloco.centro-baixo{left:var(--gutter);right:var(--gutter);transform:none;white-space:normal;text-align:center}
  .titulo{font-size:clamp(19px,5.6vw,26px)}
  .titulo.pequeno{font-size:clamp(16px,4.4vw,20px)}
  /* legendas: no celular so UMA por vez (o js escolhe a mais recente), num lugar fixo acima do texto */
  .legendas{position:fixed;inset:auto var(--gutter) clamp(236px,31vh,300px) var(--gutter);display:block}
  .chamada{position:relative;transform:none !important;display:none;opacity:1}
  .chamada.visivel{display:block;animation:legenda-entra .45s ease-out}
  @keyframes legenda-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .chamada .ponto,.chamada .traco{display:none}
  .chamada .txt,.chamada.esq .txt,.chamada.dir .txt{position:static;transform:none;text-align:left;align-items:flex-start;flex-direction:column;gap:4px;max-width:none;
    padding-left:14px;border-left:2px solid var(--acento)}
  .chamada .t{font-size:16px}
  .chamada .d{font-size:13px}
  /* na Anatomy o frasco explodido ocupa o meio da tela: o cartao sobe para logo abaixo da logo */
  .legendas.anatomia{top:clamp(76px,10vh,96px);bottom:auto}
  .lista-produtos{display:none}
  .bloco.linha-bloco{top:auto;bottom:clamp(84px,14vh,130px)}
  .hud .sub{display:none}
  .base-dir{display:none}
  .nav-cenas{display:none}
}
@media (prefers-reduced-motion:reduce){
  .base-dir .linha{animation:none}
  .chamada .traco{transition:none;transform:scaleX(1)}
}