/*
 * Folha de estilo da LP2 da Vidius (a estátua que vê, esculpe e produz).
 *
 * Este arquivo é PRÓPRIO da LP2, e não um import de assets/estilo.css (que
 * carrega o layout da LP1: hero de busto, cenas antigas). O bloco TOKENS é
 * transcrito, valor por valor, do :root de assets/estilo.css, e os
 * componentes reaproveitados (botão, topo, cápsula, diálogo de cadastro,
 * rodapé, "o que eu confiro", cartões de plano) também, porque o HTML deles
 * é cópia estrutural do da main e a fiação já está provada. A partir de
 * "MOTOR DO PLANO-SEQUÊNCIA" o CSS é novo, escrito para esta página.
 */

/* ============================================================
   TOKENS (transcritos de assets/estilo.css :root)
   ============================================================ */
:root{
  --ink-0:#000000; --ink-2:#0a0a0a; --ink-3:#0f0f10; --ink-4:#171717; --ink-5:#262626;

  --rubi-9:#481010; --rubi-8:#751519; --rubi-7:#94151e; --rubi-6:#b3262f;
  --rubi-5:#cc3337; --rubi-4:#e14d47; --rubi-3:#ff8a83; --rubi-2:#ffcdc8; --rubi-1:#feebe9;
  --lente:#751519;
  --acento:225 77 71;
  --acento-luz:255 138 131;

  --marmore-1:#e3e2e2; --marmore-2:#dad8d9; --marmore-3:#c5c3c3; --marmore-4:#aaa7a6;
  --marmore-5:#9b9898; --marmore-6:#595252; --marmore-7:#261d1d; --marmore-8:#0c0b0b;

  --brasa-4:#f59e0b;

  /* A demonstração ao vivo (#confere) mostra a Pelina; a LP (barra de passos, linha, aro) usa --primary direto, sem
     token próprio (V7b, 28/09, retorno do Arthur: "deixa a marca vermelha para
     combinar com o site"). Não é --brasa-4 (--reprovado/--warn da página) e o
     verde-azulado #2ba59b da versão anterior saiu. */

  --bg:var(--ink-0);
  --surface:rgb(255 255 255 / .03);
  --surface-2:rgb(255 255 255 / .05);
  --border:rgb(255 255 255 / .08);
  --border-strong:rgb(255 255 255 / .16);
  --fg:var(--marmore-1);
  --fg-muted:var(--marmore-4);
  --fg-subtle:var(--marmore-5);
  --primary:var(--rubi-4);
  --primary-hover:color-mix(in oklch, var(--rubi-4), var(--rubi-3) 35%);
  --on-primary:var(--ink-0);
  --signal:var(--rubi-3);
  /* --lente-glow (C6) e --varre (C3) saíram -- código morto */
  --respira:3.2s;

  --shopify:#95bf47;
  --shopify-escuro:#5e8e3e;

  --warn:#f59e0b;
  --reprovado:var(--brasa-4);

  --font-display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --font-body:"Inter",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --font-serif:var(--font-display);

  --tracking-titulo:-.005em;
  --tracking-display:-.025em;
  --tracking-label:.1em;

  --raio-sm:8px;
  --raio-md:16px;
  --raio-lg:26px;
  --raio-pilula:9999px;
  --raio:var(--raio-md);

  --t-rotulo:11px;
  --t-mini:12.5px;
  --t-corpo-p:14px;
  --t-corpo:16px;
  --t-lead:19px;

  --lh-titulo:1.12;
  --lh-corpo:1.55;
  --lh-rotulo:1.35;

  --sombra-peca:0 18px 35px rgb(0 0 0 / .45), 0 0 0 1px var(--border);
  --sombra-reacao:0 10px 22px rgb(0 0 0 / .5), 0 0 0 1px var(--border-strong);

  --ease:cubic-bezier(.22,.61,.36,1);
  --rapida:.18s; --media:.32s;

  --gutter:clamp(16px,4vw,28px);
  --max:1200px;

  --topo-altura:67px;
  --secao-y:clamp(72px,9vw,104px);

  /* Tokens NOVOS da LP2 (não existem no estilo.css da LP1): o breu, cor de
     fundo dos quadros depois do filtro (BRIEF-PAGINA.md). É a costura entre o
     vídeo do plano-sequência e o resto da página. Preto quente da marca desde
     15/10/2026 (I7); era azulado. */
  --breu:#0c0b0b;
  --breu-suave:rgb(12 11 11 / .82);
}

/* ============================================================
   BASE (transcrito)
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:dark}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--font-body);font-size:var(--t-corpo);line-height:var(--lh-corpo);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input{font:inherit}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

h1,h2{font-family:var(--font-display);font-weight:400;letter-spacing:var(--tracking-titulo);line-height:var(--lh-titulo);margin:0}
h3,h4{font-family:var(--font-body);font-weight:600;letter-spacing:var(--tracking-display);line-height:var(--lh-titulo);margin:0}
h1{font-size:clamp(34px,6vw,68px)}
h2{font-size:clamp(25px,4.3vw,48px)}
h3{font-size:clamp(17px,2vw,21px)}
p{margin:0}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.secao{padding-block:var(--secao-y);position:relative}

.rotulo{border-radius:var(--raio-pilula);
  font-family:var(--font-mono);font-size:var(--t-rotulo);font-weight:500;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--fg-subtle);
}
.muted{color:var(--fg-muted)}


/* Placa de museu: o rótulo mono do capítulo/seção que está na tela. */
.museu{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:var(--t-rotulo);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg-subtle);
  margin-bottom:10px;
}
.museu::before{content:"";width:6px;height:6px;flex:0 0 auto;background:rgb(var(--acento));}

/* Cantos em L, usados na caixa do diálogo de cadastro. */
.cantos{position:relative}
.cantos::before,.cantos::after{content:"";position:absolute;width:20px;height:20px;pointer-events:none;z-index:3}
.cantos::before{top:-1px;left:-1px;border-top:1px solid var(--signal);border-left:1px solid var(--signal);border-top-left-radius:inherit}
.cantos::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--signal);border-right:1px solid var(--signal);border-bottom-right-radius:inherit}

/* Moldura vazia rotulada: o "placeholder honesto" da casa, reaproveitado
   aqui pelos blocos neutros das lojas fictícias enquanto a foto real não
   chega (BRIEF-PAGINA.md, mockups). */
.molde{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:12px;text-align:center;
  background:var(--ink-2);
  background-image:repeating-linear-gradient(45deg,rgb(var(--acento) / .05) 0 10px,transparent 10px 20px);
  border:1px solid var(--border);
}
.molde-rotulo{font-family:var(--font-mono);font-size:var(--t-rotulo);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-subtle)}

/* Botões. Sem brilho interno e sem pílula, de propósito. */
.btn{border-radius:var(--raio-sm);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border:1px solid transparent;
  font-family:var(--font-body);font-size:var(--t-corpo-p);font-weight:600;
  letter-spacing:-.01em;position:relative;overflow:hidden;
  transition:transform var(--rapida) var(--ease),box-shadow var(--rapida) var(--ease),background var(--rapida) var(--ease),border-color var(--rapida) var(--ease),color var(--rapida) var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0 auto 0 -100%;width:100%;
  background:linear-gradient(90deg,transparent,rgb(255 255 255 / .14),transparent);
  transition:left .55s var(--ease);
}
.btn:hover::before{left:100%}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sombra-reacao)}
.btn:active{transform:translateY(0)}
.btn-1{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.btn-1:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn-2{background:transparent;color:var(--fg);border-color:var(--border-strong)}
.btn-2:hover{border-color:rgb(var(--acento) / .5);color:var(--rubi-3)}
.btn-3{padding:9px 15px;font-size:var(--t-corpo-p);background:transparent;color:var(--fg);border-color:var(--border)}
.btn-3:hover{border-color:rgb(var(--acento) / .5)}
.btn-bloco{width:100%}
.btn:disabled{opacity:.5;transform:none}
.btn:disabled:hover{transform:none;box-shadow:none}

/* Pular para o conteúdo: fora da tela até o teclado chegar nele. Mora aqui,
   e não em onfocus/onblur no HTML, porque a CSP da LP2 recusa manipulador de
   evento escrito dentro da tag. */
.pular{position:absolute;left:-9999px;top:0;z-index:99}
.pular:focus{left:8px;top:8px}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.visivel{opacity:1;transform:none}
.reveal{transition-delay:calc(var(--degrau,0) * 70ms)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important
  }
  .reveal{opacity:1;transform:none;transition-delay:0ms!important}
}

/* .reveal não garantia conteúdo visível fora dos dois casos já cobertos (com
   JS ligando .visivel, ou menos movimento acima): defeito da página inteira,
   achado ao montar o protótipo do CTA final (V4, 26/09). Duas redes, cada
   uma cobrindo o que a outra não cobre:
   1) sem JS (nem tem-script nem .visivel chegam a existir): o seletor
      abaixo devolve o estado final direto, sem transição; */
html:not(.tem-script) .reveal{opacity:1;transform:none;transition:none}
/* 2) com JS, mas o script embutido marcou .tem-script e lp2.js não carregou
      ou quebrou antes de ligar o IntersectionObserver de ligarReveal: a
      página ficaria com os .reveal em opacity:0 pra sempre. Rede por CSS
      puro: se .visivel não chegou em 3s, revela sozinho (a animação, não a
      transição, porque não há classe nova disparando, só o tempo). */
html.tem-script .reveal:not(.visivel){animation:revelar-tarde 0s 3s forwards}
@keyframes revelar-tarde{to{opacity:1;transform:none}}

/* ============================================================
   O BRILHO QUE SEGUE O MOUSE (transcrito de assets/estilo.css, item 4)
   assets/luz.js escreve --mx/--my (px) via window.VidiusLaco; sem o
   script, a camada fica parada em opacity:0, sem custo.
   ============================================================ */
#luz-ponteiro{position:fixed;inset:0;z-index:30;pointer-events:none;opacity:0}
#luz-ponteiro.ativa{opacity:1}
@media (prefers-reduced-motion:no-preference){
  #luz-ponteiro{transition:opacity var(--media) var(--ease)}
}
#luz-ponteiro::before,#luz-ponteiro::after{content:"";position:absolute;inset:0}
/* HALO -- 440px de raio, 20% do acento (rubi). */
#luz-ponteiro::before{
  background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%),rgb(var(--acento) / .2),transparent 62%);
  mix-blend-mode:screen;
}
/* NÚCLEO -- 180px de raio, 12% do rubi claro. Nunca branco. */
#luz-ponteiro::after{
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),rgb(var(--acento-luz) / .12),transparent 62%);
  mix-blend-mode:overlay;
}
@media (prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){
  #luz-ponteiro{display:none}
}

/* ============================================================
   MARCA (transcrito)
   ============================================================ */
.marca{display:inline-flex;align-items:center;gap:11px;user-select:none}
.marca-simbolo{position:relative;width:30px;height:30px;flex:0 0 auto;display:grid;place-items:center}
.marca-simbolo img{width:22px;height:22px;display:block;animation:lente-respira var(--respira) ease-in-out infinite}
.marca-simbolo::before{
  content:"";position:absolute;inset:0;border-radius:999px;padding:1px;
  background:conic-gradient(from 0deg,transparent 0deg 190deg,rgb(var(--acento) / .55) 280deg,transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  animation:lente-aro 9s linear infinite;
  pointer-events:none;
}
.marca:hover .marca-simbolo img{filter:brightness(1.35) drop-shadow(0 0 10px rgb(var(--acento) / .6))}
@keyframes lente-respira{0%,100%{filter:brightness(.92)}50%{filter:brightness(1.14)}}
@keyframes lente-aro{to{transform:rotate(1turn)}}
/* C3: .marca-simbolo.varrendo saiu, morto (#porta usa .marca-simbolo). */
/* Lockup em mármore (pedido do Arthur, 29/09, M-2 dos gates de 24/09 e
   29/09): troca o símbolo solto + "Vidius" em texto do cabeçalho e do
   rodapé pela peça do kit (óculos rubi sobre o "id"), fundo já recortado
   por distância do preto. O diálogo (.porta-topo .marca) NÃO muda --
   continua o símbolo + texto de sempre, fora do pedido. */
.marca-lockup{display:block;height:32px;width:auto}
.marca-nome{display:flex;flex-direction:column;line-height:1;min-width:0}
.marca-nome strong{font-family:var(--font-display);font-size:calc(var(--t-corpo) + 6px);font-weight:400;letter-spacing:-.005em;color:var(--fg)}
.marca-nome small{margin-top:5px;font-family:var(--font-serif);font-size:13px;font-weight:400;letter-spacing:.01em;text-transform:none;color:var(--fg-subtle);white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  .marca-simbolo::before{display:none}
}

/* ============================================================
   TOPO FIXO + CÁPSULA (transcrito)
   ============================================================ */
.topo{position:fixed;inset:0 0 auto 0;z-index:60;border-bottom:1px solid transparent;
  transition:background var(--media) var(--ease),border-color var(--media) var(--ease),backdrop-filter var(--media) var(--ease);
}
.topo.colado{background:rgb(0 0 0 / .72);border-bottom-color:var(--border);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.topo-linha{display:flex;align-items:center;gap:18px;height:calc(var(--topo-altura) - 1px)}
.topo-nav{display:flex;align-items:center;gap:5px;margin-left:auto}
.topo-acoes{display:flex;align-items:center;gap:12px}
.link-discreto{font-size:var(--t-corpo-p);color:var(--fg-subtle);padding:8px 4px;transition:color var(--rapida) var(--ease)}
.link-discreto:hover{color:var(--fg)}
.menu-btn{border-radius:var(--raio-sm);display:none;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid var(--border)}
.menu-btn span{display:block;width:16px;height:1px;background:var(--fg);position:relative}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:16px;height:1px;background:var(--fg)}
.menu-btn span::before{top:-5px}.menu-btn span::after{top:5px}
.topo-insta{border-radius:var(--raio-sm);display:flex;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid var(--border);color:var(--fg);transition:border-color var(--rapida) var(--ease),color var(--rapida) var(--ease)}
.topo-insta:hover{border-color:rgb(var(--acento) / .5);color:var(--rubi-3)}

section[id]{scroll-margin-top:calc(var(--topo-altura) + 30px)}

@media (min-width:821px){
  .capsula{position:relative;margin-left:auto;gap:0;padding:5px;
    border:1px solid var(--border-strong);border-radius:var(--raio-pilula);
    background:rgb(255 255 255 / .02);
    box-shadow:0 0 0 1px rgb(var(--acento) / .07),0 10px 28px rgb(0 0 0 / .5);
  }
  .capsula a{position:relative;z-index:1;padding:9px 17px;border-radius:var(--raio-pilula);
    font-family:var(--font-mono);font-size:var(--t-rotulo);font-weight:500;
    letter-spacing:.12em;text-transform:uppercase;color:var(--fg-subtle);
    transition:color var(--media) var(--ease);
  }
  .capsula a:hover{color:var(--fg)}
  .capsula a[aria-current]{color:var(--fg)}
  .capsula-traco{position:absolute;top:5px;bottom:5px;left:0;width:0;
    border-radius:var(--raio-pilula);opacity:0;pointer-events:none;
    background:rgb(var(--acento) / .14);
    box-shadow:inset 0 0 0 1px rgb(var(--acento) / .38);
    transition:transform .45s var(--ease),width .45s var(--ease),opacity .3s var(--ease);
  }
  .capsula[data-ativo] .capsula-traco{opacity:1}
}
@media (max-width:820px){.capsula-traco{display:none}}
@media (prefers-reduced-motion:reduce){.capsula-traco{transition:none}}

/* ============================================================
   VOLTAR AO TOPO (transcrito)
   ============================================================ */
/* O PULAR (25/10) usa o mesmo desenho e o mesmo lugar: ele vive na abertura
   e o Topo só no fim da página (lp2.js/ligarAoTopo), então nunca se cruzam. */
.ao-topo,.pular-flutuante{border-radius:var(--raio-sm);
  position:fixed;right:22px;bottom:22px;z-index:50;
  display:inline-flex;align-items:center;gap:7px;padding:11px 14px;
  font-family:var(--font-mono);font-size:var(--t-rotulo);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--fg-muted);
  background:rgb(0 0 0 / .72);border:1px solid var(--border);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:opacity var(--media) var(--ease),transform var(--media) var(--ease),visibility 0s,color var(--rapida) var(--ease),border-color var(--rapida) var(--ease);
}
html.tem-script :is(.ao-topo,.pular-flutuante){opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--media) var(--ease),transform var(--media) var(--ease),visibility 0s var(--media),color var(--rapida) var(--ease),border-color var(--rapida) var(--ease);
}
html.tem-script :is(.ao-topo,.pular-flutuante).aparece{opacity:1;visibility:visible;transform:none;
  transition:opacity var(--media) var(--ease),transform var(--media) var(--ease),visibility 0s,color var(--rapida) var(--ease),border-color var(--rapida) var(--ease);
}
.ao-topo:hover,.pular-flutuante:hover{color:var(--fg);border-color:var(--border-strong)}
.ao-topo svg,.pular-flutuante svg{display:block;flex:0 0 auto}
.pular-flutuante{min-height:44px;min-width:44px;justify-content:center}
/* sem JS não há como saber onde a pessoa está: o Pular fica de fora e o Topo, de sempre */
html:not(.tem-script) .pular-flutuante{display:none}
/* no celular os dois ficam só no ícone, como o Assistir: com o rótulo o
   Pular cobria texto da jornada (L31e). O nome vem do aria-label. */
@media (max-width:820px){.ao-topo,.pular-flutuante{right:14px;bottom:16px;padding:10px 12px}.ao-topo span,.pular-flutuante span{display:none}}

/* ============================================================
   ASSISTIR / PAUSAR: rolagem automática (pedido do Arthur, 23/09)
   Dois botões, o mesmo mecanismo (data-assistir, lp2.js#ligarAssistir):
   um na primeira batida (.batida-botoes), outro flutuante e discreto,
   perto do "Topo" -- mas sempre visível (não espera scrollY>700 como o
   .ao-topo, porque também serve para COMEÇAR a rolagem do zero).
   ============================================================ */
[data-assistir] .ic-pause{display:none}
[data-assistir].assistindo .ic-play{display:none}
[data-assistir].assistindo .ic-pause{display:block}

.assistir-flutuante{border-radius:var(--raio-sm);
  position:fixed;right:22px;bottom:70px;z-index:50;
  display:inline-flex;align-items:center;gap:7px;padding:11px 14px;
  font-family:var(--font-mono);font-size:var(--t-rotulo);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--fg-muted);
  background:rgb(0 0 0 / .72);border:1px solid var(--border);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:color var(--rapida) var(--ease),border-color var(--rapida) var(--ease);
}
.assistir-flutuante:hover{color:var(--fg);border-color:var(--border-strong)}
.assistir-flutuante.assistindo{color:var(--rubi-3);border-color:rgb(var(--acento) / .5)}
.assistir-flutuante svg{display:block;flex:0 0 auto}
/* No celular o rótulo some só da vista: com display:none o botão ficava sem
   nome para o leitor de tela, e ele é o único Assistir da abertura compacta. */
@media (max-width:820px){.assistir-flutuante{right:14px;bottom:60px;padding:10px 12px}.assistir-flutuante .assistir-rotulo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (prefers-reduced-motion:reduce){[data-assistir]{display:none!important}}

/* ============================================================
   MODO DE REVISAO: ?aida=1 (transcrito)
   ============================================================ */
.aida-etiqueta{border-radius:var(--raio-pilula);display:none}
body.modo-aida .aida-etiqueta{
  display:inline-flex;align-items:center;gap:7px;
  position:absolute;left:var(--gutter);top:8px;z-index:40;
  padding:5px 10px;background:var(--rubi-7);color:#fff;
  font-family:var(--font-mono);font-size:var(--t-rotulo);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}
body.modo-aida [data-aida]{outline:1px dashed rgb(var(--acento) / .3);outline-offset:-1px}
.aida-aviso{position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--rubi-7);color:#fff;padding:9px var(--gutter);
  font-family:var(--font-mono);font-size:var(--t-rotulo);letter-spacing:.08em;text-transform:uppercase;
  display:none;align-items:center;gap:10px;
}
body.modo-aida .aida-aviso{display:flex}

/* ============================================================
   PORTA: entrar e criar conta (transcrito)
   ============================================================ */
.porta{border:none;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%}
.porta::backdrop{background:rgb(0 0 0 / .82);backdrop-filter:blur(6px)}
.porta-caixa{border-radius:var(--raio-md);
  position:fixed;left:50%;top:50%;translate:-50% -50%;
  width:min(430px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow-y:auto;
  border:1px solid var(--border-strong);background:var(--ink-2);
  box-shadow:var(--sombra-peca);
}
.porta-topo{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--border)}
.porta-topo .marca{flex:1;min-width:0}
/* 48px, e não os 44px do piso do A3 (C9 do gate de 26/09: o fechar media
   exatamente 44px, sem folga). */
.porta-fechar{width:48px;height:48px;flex:0 0 auto;border:1px solid var(--border);display:grid;place-items:center;color:var(--fg-muted);transition:border-color var(--rapida) var(--ease),color var(--rapida) var(--ease)}
.porta-fechar:hover{border-color:var(--border-strong);color:var(--fg)}
.porta-corpo{padding:20px}
.campo{margin-bottom:14px}
.campo label{display:block;margin-bottom:7px}
.campo .rotulo{font-family:var(--font-body);font-size:var(--t-corpo-p);letter-spacing:normal;text-transform:none;color:var(--marmore-2)}
.campo input{border-radius:var(--raio-sm);width:100%;padding:12px 13px;background:var(--ink-0);border:1px solid var(--border-strong);color:var(--fg);font-family:var(--font-body);font-size:var(--t-corpo-p);transition:border-color var(--rapida) var(--ease)}
.campo input::placeholder{color:var(--fg-subtle)}
/* O foco do campo é o mesmo do resto do diálogo, o :focus-visible da base
   (C9 do gate de 26/09: a sombra de 3px a 10% era bem mais discreta que o
   contorno dos outros focáveis). Só a borda muda aqui. */
.campo input:focus{border-color:rgb(var(--acento) / .55)}
.campo-dica{margin-top:6px;font-family:var(--font-mono);font-size:var(--t-rotulo);color:var(--fg-subtle);line-height:1.6}
/* O erro do campo nasce logo abaixo dele (C5 do gate de 26/09). */
.campo-erro{margin-top:7px;font-size:var(--t-corpo-p);line-height:1.6;color:var(--reprovado)}
.campo-erro[hidden]{display:none}
/* Os dois espaçamentos do diálogo que eram style="" no HTML (C8 do gate de
   26/09, CONTRATO §7: prefira classe). */
.porta-legenda{margin-bottom:18px}
.porta-convite-bloco{margin-top:18px}
.porta-pe{padding:14px 20px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
/* A3 (E7, 26/09): a ação do rodapé do diálogo sobe para o piso de 44px de
   alvo de toque (min-height, sem tocar em texto ou cor); antes o link
   media a altura da própria linha, ~21-22px. */
.porta-pe a{font-size:var(--t-mini);color:var(--fg-subtle);border-bottom:1px solid var(--border);padding-bottom:1px;display:inline-flex;align-items:center;min-height:44px}
.porta-pe a:hover{color:var(--rubi-3)}
/* Sem barra visível dentro do cadastro também (pedido do Arthur, 24/09: "tira
   essas barras de rolagem também quando clico em criar conta"). A caixa continua
   rolando por roda, toque e teclado; só o desenho some. Sem a barra vertical de
   12px, o conteúdo não passa mais da largura, e a barra horizontal some junto;
   overflow-x fica travado por garantia. */
.porta-caixa{scrollbar-width:none;-ms-overflow-style:none;overflow-x:hidden}
.porta-caixa::-webkit-scrollbar{width:0;height:0;display:none}

/* ============================================================
   RODAPE (transcrito)
   ============================================================ */
.rodape{border-top:1px solid var(--border);padding-top:clamp(40px,6vw,60px);position:relative;overflow:hidden}
.rodape-grade{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,1.8fr);gap:clamp(22px,3vw,40px);padding-bottom:clamp(30px,4vw,44px)}
.rodape-marca p{margin-top:16px;font-size:var(--t-corpo-p);color:var(--fg-muted);max-width:280px}
.rodape-nav{display:flex;flex-direction:column;gap:9px}
.rodape-nav a{font-size:var(--t-corpo-p);color:var(--fg-muted);transition:color var(--rapida) var(--ease)}
.rodape-nav a:hover{color:var(--rubi-3)}
.rodape-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rodape-card{border-radius:var(--raio-md);border:1px solid var(--border);background:var(--surface);padding:14px}
.rodape-card .rotulo{display:block;margin-bottom:7px}
.rodape-card a,.rodape-card span{font-size:var(--t-corpo-p);color:var(--fg);word-break:break-word}
.rodape-card a:hover{color:var(--rubi-3)}
.rodape-card a{position:relative}
.rodape-card a::before{content:"";position:absolute;inset:-14px -6px}
.rodape-legal{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;border-top:1px solid var(--border);padding-block:18px;font-size:var(--t-mini);color:var(--fg-subtle)}
.rodape-legal a{border-bottom:1px solid var(--border)}
.rodape-legal a:hover{color:var(--fg-muted)}
/* .aguada saiu, C6: sem "Vidius" grande e apagado no rodapé. */

/* ============================================================
   A DEMONSTRAÇÃO AO VIVO do #confere, no desenho da referência do Arthur
   (24/10): cabeça centralizada, os 8 passos numa barra horizontal, o
   navegador grande no centro e o cartão de legenda à esquerda, ligado ao
   navegador por uma linha com um ponto na borda.
   Padrão R4: o CSS-base (sem .demo-viva) já mostra a loja PRONTA e o cartão
   no passo 08, o que cobre sem-JS, falha de IntersectionObserver e menos
   movimento pela MESMA regra. Só dentro de .demo-viva o JS escreve --d-*
   (0..1) e a loja nasce em camadas, do esqueleto escuro ao desenho final.
   O navegador é um container (cqw): tudo dentro escala junto com a largura.
   ============================================================ */
.secao-confere{padding-block:0}
/* margin-bottom, não padding-bottom: o respiro até o fim da seção não conta
   na altura que o JS mede (progressoDoElemento lê getBoundingClientRect()). */
.demo-trilho{height:320vh;position:relative;margin-bottom:clamp(40px,6vw,72px)}
.demo-palco{position:sticky;top:var(--topo-altura);height:calc(100svh - var(--topo-altura));
  display:flex;flex-direction:column;justify-content:center;overflow:hidden;isolation:isolate;
  /* largura do navegador: o que sobra da altura (cabeça + barra = 272px) ou
     da largura (cartão à esquerda), no máximo 880px */
  --W:clamp(500px,min(calc((100svh - var(--topo-altura) - 272px) / .7),calc(100vw - 540px)),880px)}
/* brilho vermelho difuso nas laterais, esmaecido em cima e embaixo para não
   marcar a emenda do palco preso com as seções vizinhas */
.demo-palco::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(46vw 50vh at 0% 24%,rgb(var(--acento) / .2),transparent 70%),
    radial-gradient(34vw 56vh at 100% 62%,rgb(var(--acento) / .15),transparent 70%);
  -webkit-mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent)}

.demo-cabeca{text-align:center;max-width:none;display:flex;flex-direction:column;align-items:center;margin-bottom:0}
.demo-cabeca .museu{margin-bottom:10px}
.demo-lead{color:var(--fg-muted);font-size:clamp(14px,1.5vw,16px);margin-top:10px;max-width:52ch}

.demo-grade{display:flex;flex-direction:column;align-items:center}

/* --------- A barra dos 8 passos --------- */
.demo-passos{list-style:none;margin:clamp(16px,2.2vw,28px) auto clamp(20px,3vw,34px);padding:0;display:flex;width:min(100%,1040px)}
.demo-passo{flex:1 1 0;min-width:0;display:flex;box-shadow:inset 0 -1px 0 var(--border)}
.demo-passo-rotulo{position:relative;display:inline-flex;align-items:baseline;gap:10px;padding-bottom:14px;white-space:nowrap}
.demo-passo-rotulo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--primary);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.demo-passo-num{font-family:var(--font-mono);font-size:11px;color:var(--fg-subtle);transition:color .3s var(--ease)}
.demo-passo-nome{font-size:13px;font-weight:500;color:var(--fg-muted);transition:color .3s var(--ease)}
/* o passo é um <button> (o JS embrulha o rótulo): clicar leva a rolagem até ele.
   Sem JS fica só o rótulo, leitura. */
.demo-passo-botao{appearance:none;background:none;border:0;margin:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  display:inline-flex;text-align:left;border-radius:4px}
.demo-passo-botao:hover .demo-passo-nome,.demo-passo-botao:hover .demo-passo-num{color:var(--fg)}
.demo-passo-botao:focus-visible{outline:2px solid var(--fg);outline-offset:4px}
/* a nota fica no DOM só para o leitor de tela (o cartão é decorativo) */
.demo-passo-nota{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* o passo atual; sem .demo-viva (sem JS, menos movimento) é o 08 */
.demo-passo.is-ativo .demo-passo-num,.demo-trilho:not(.demo-viva) .demo-passo:last-child .demo-passo-num{color:var(--primary)}
.demo-passo.is-ativo .demo-passo-nome,.demo-trilho:not(.demo-viva) .demo-passo:last-child .demo-passo-nome{color:var(--fg)}
.demo-passo.is-ativo .demo-passo-rotulo::after,.demo-trilho:not(.demo-viva) .demo-passo:last-child .demo-passo-rotulo::after{transform:scaleX(1)}

.demo-nota-generica{font-size:12px;color:var(--fg-subtle);font-style:italic;text-align:center;
  margin:clamp(14px,2.4vw,22px) auto 0}

/* --------- A vitrine: navegador + cartão de legenda + linha --------- */
.demo-vitrine{position:relative;width:var(--W);--card-cy:calc(var(--W) * .2)}
.demo-legenda{position:absolute;right:calc(100% + 2.8rem);top:var(--card-cy);translate:0 -50%;
  width:clamp(170px,calc(var(--W) * .25),236px);padding:18px 18px 20px;display:grid;
  border-radius:14px;background:rgb(14 14 15 / .86);border:1px solid var(--border-strong);box-shadow:0 14px 34px rgb(0 0 0 / .4)}
.demo-legenda-item{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.demo-legenda-item:last-child,.demo-legenda-item.is-ativo{opacity:1;visibility:visible}
.demo-viva .demo-legenda-item:last-child:not(.is-ativo){opacity:0;visibility:hidden}
.demo-legenda-num{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--primary)}
.demo-legenda-item strong{display:block;font-family:var(--font-display);font-weight:400;font-size:22px;line-height:1.15;color:var(--fg);
  margin:10px 0 12px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.demo-legenda-item p{margin:0;font-size:13px;line-height:1.5;color:var(--fg-muted)}

/* a linha: sai do cartão, desce pela borda do navegador e termina no ponto,
   à altura da parte da loja que o passo acabou de montar (--alvo-y, do JS) */
.demo-liga{position:absolute;inset:0;pointer-events:none;z-index:3}
.demo-liga i{position:absolute;display:block;background:var(--primary);transition:top .5s var(--ease),bottom .5s var(--ease)}
.demo-liga-h{right:100%;width:2.8rem;height:1px;top:var(--card-cy)}
.demo-liga-v{left:-1px;width:1px;top:min(var(--card-cy),var(--alvo-y,50%));bottom:calc(100% - max(var(--card-cy),var(--alvo-y,50%)))}
.demo-liga .demo-liga-ponto{left:0;top:var(--alvo-y,50%);width:10px;height:10px;translate:-50% -50%;border-radius:50%;
  box-shadow:0 0 0 4px rgb(var(--acento) / .2),0 0 14px rgb(var(--acento) / .6)}

/* --------- O navegador: HTML+CSS, a escala vem da largura (cqw) ---------
   A moldura (barra, bolinhas, aro) é da LP e fica escura; a PÁGINA dentro
   (.demo-tela) é da loja Pelina: fundo branco, texto #111111, logo colorido
   (3:1 sobre branco) e a cor principal #B27F00 em botão (texto #111111,
   5,3:1) e em detalhe gráfico. #B27F00 sobre branco dá só 3,5:1, então o
   texto pequeno na cor usa o tom escurecido #8F6700 (5,1:1). */
.demo-navegador{container-type:inline-size;border-radius:calc(var(--W) * .016);overflow:hidden;
  border:1px solid var(--border-strong);background:#0b0b0c;position:relative;
  box-shadow:0 22px 50px rgb(0 0 0 / .55),0 0 0 1px rgb(var(--acento) / calc(var(--d-previa,1) * .35)),0 0 calc(var(--W) * .05) rgb(var(--acento) / calc(var(--d-previa,1) * .2));
  --esq:rgb(17 17 17 / .08);
  --loja-cor:#b27f00;--loja-cor-texto:#8f6700;--loja-tinta:#111111;--loja-muda:#595959;--loja-linha:#e2e2e2;--loja-cartao:#f5f5f5}
.demo-navegador-barra,.demo-tela{font-size:calc(var(--k,1) * 1cqw)}
.demo-navegador-barra{display:flex;align-items:center;height:5.4cqw;padding:0 2.2cqw;background:#131314;border-bottom:1px solid var(--border)}
.demo-navegador-bolas{display:flex;gap:.9cqw;flex:1 1 0}
.demo-navegador-bolas i{width:1.25cqw;height:1.25cqw;border-radius:50%;background:#e5534b;display:block}
.demo-navegador-bolas i:nth-child(2){background:#e0893a}
.demo-navegador-bolas i:nth-child(3){background:#6b6b6f}
.demo-navegador-endereco{flex:0 0 48cqw;display:flex;align-items:center;justify-content:center;gap:.7cqw;height:3cqw;border-radius:1cqw;
  background:#1c1c1d;font-size:1em;color:var(--fg-subtle);white-space:nowrap;overflow:hidden}
.demo-endereco-cadeado{width:1.1em;height:1.1em;flex:0 0 auto;fill:currentColor}
.demo-endereco-texto{display:inline-block;border-radius:.3cqw;line-height:1.3}
.demo-previa-chip{flex:1 1 0;display:flex;justify-content:flex-end}
.demo-previa-chip{font-family:var(--font-mono);font-size:.85em;letter-spacing:.12em;text-transform:uppercase;color:var(--loja-cor)}

.demo-tela{--c:var(--loja-tinta);background:#fff;color:var(--loja-tinta)}
.demo-header{display:flex;align-items:center;justify-content:space-between;height:5.4cqw;padding:0 6cqw;background:#fff;border-bottom:1px solid var(--loja-linha)}
.demo-logo{display:block;border-radius:.3cqw;line-height:0}
.demo-logo-img{display:block;height:3.6cqw;width:auto;opacity:1}
.demo-menu{display:flex;gap:2.6cqw;font-size:1em;font-weight:600;color:var(--loja-tinta)}
.demo-menu span{border-radius:.3cqw;line-height:1.3;--c:var(--loja-tinta)}
.demo-icones{display:flex;gap:1.5cqw;color:var(--loja-tinta)}
.demo-icones svg{width:1.6cqw;height:1.6cqw;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.demo-icones .demo-hamburguer{display:none}

.demo-hero{position:relative;overflow:hidden;height:25cqw;background:var(--loja-cartao);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-left:9cqw}
.demo-hero-banner{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:50% 66%;opacity:1;transition:opacity .45s var(--ease)}
.demo-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgb(255 255 255 / .55),rgb(255 255 255 / .3) 36%,transparent 58%)}
.demo-hero-texto,.demo-hero-cta,.demo-hero-pontos{position:relative;z-index:2}
.demo-hero-texto{display:block}
.demo-hero-titulo{display:block;width:fit-content;font-family:var(--font-display);font-size:3.2em;line-height:1.12;color:var(--loja-tinta);border-radius:.4cqw;--c:var(--loja-tinta)}
.demo-hero-sub{display:block;width:fit-content;margin-top:1.3cqw;max-width:34cqw;font-size:1.5em;font-weight:600;line-height:1.35;color:var(--loja-tinta);border-radius:.3cqw;--c:var(--loja-tinta)}
.demo-hero-cta{display:inline-block;margin-top:2.3cqw;padding:1.1cqw 2.3cqw;border-radius:.35cqw;background:var(--loja-cor);color:var(--loja-tinta);
  font-family:var(--font-mono);font-size:.85em;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.demo-hero-pontos{position:absolute;left:55cqw;bottom:1.6cqw;display:flex;gap:.7cqw}
.demo-hero-pontos i{display:block;width:2.4cqw;height:.35cqw;border-radius:.3cqw;background:rgb(17 17 17 / .3)}
.demo-hero-pontos i:first-child{background:var(--loja-cor)}

.demo-secao{padding:3.6cqw 9cqw 3.4cqw;background:#fff}
.demo-secao-cabeca{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:1.8cqw}
.demo-secao-txt{display:grid;gap:.7cqw;justify-items:start}
.demo-destaque-selo{font-family:var(--font-mono);font-size:.72em;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--loja-cor-texto);border-radius:.3cqw;line-height:1.3;--c:var(--loja-cor-texto)}
.demo-grid-titulo{font-family:var(--font-display);font-size:2.2em;line-height:1.1;color:var(--loja-tinta);border-radius:.4cqw;--c:var(--loja-tinta)}
.demo-vertodos{font-size:.95em;font-weight:600;color:var(--loja-tinta);padding-bottom:.4cqw;border-bottom:2px solid var(--loja-cor);border-radius:0;--c:var(--loja-tinta)}
.demo-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:2cqw}
.demo-grid li{display:grid;align-content:start;gap:.3cqw;padding-bottom:.9cqw;border-radius:.9cqw;overflow:hidden;background:var(--loja-cartao);border:1px solid var(--loja-linha)}
.demo-tile-img{aspect-ratio:4/3;width:100%;height:auto;object-fit:cover;display:block;opacity:1;transition:opacity .45s var(--ease);margin-bottom:.6cqw}
.demo-tile-nome,.demo-tile-preco{display:block;width:fit-content;margin-inline:1cqw;border-radius:.3cqw;font-size:1.1em;font-weight:600;line-height:1.3;color:var(--loja-tinta);--c:var(--loja-tinta)}
.demo-tile-preco{font-size:1em;font-weight:500;color:var(--loja-muda);--c:var(--loja-muda)}
.demo-tile-linha{display:flex;align-items:center;gap:.6cqw;margin-inline:1cqw;font-size:.9em;line-height:1.3}
.demo-estrelas{color:var(--loja-cor-texto);letter-spacing:.05em;opacity:1}
.demo-tile-nota{display:block;border-radius:.3cqw;color:var(--loja-muda);--c:var(--loja-muda)}

/* --------- As 8 camadas: cada uma liga algo visível. Antes do limiar a peça é
   um esqueleto claro e discreto (--esq, cinza sobre o branco); depois, o desenho final. --------- */
.demo-viva .demo-endereco-texto,.demo-viva .demo-menu span,.demo-viva .demo-hero-titulo,
.demo-viva .demo-hero-sub,.demo-viva .demo-destaque-selo,.demo-viva .demo-grid-titulo,.demo-viva .demo-vertodos,
.demo-viva .demo-tile-nome,.demo-viva .demo-tile-preco,.demo-viva .demo-tile-nota{transition:color .3s,background .3s}
/* 01 Marca: o logo entra sobre uma caixa de esqueleto que some */
.demo-viva .demo-logo{background:color-mix(in oklch,var(--esq),transparent calc(var(--d-marca,1) * 100%))}
.demo-viva .demo-logo-img{opacity:var(--d-marca,1)}
.demo-viva .demo-icones{opacity:var(--d-marca,1)}
/* 02 Endereço */
.demo-viva .demo-endereco-texto{--d:var(--d-endereco,1);--c:var(--fg-subtle)}
.demo-viva .demo-endereco-cadeado{opacity:var(--d-endereco,1)}
/* 03 Idioma */
.demo-viva .demo-menu span,.demo-viva .demo-hero-titulo,.demo-viva .demo-hero-sub{--d:var(--d-idioma,1)}
/* 04 Cor: o selo, o sublinhado do "Ver todos" e o ponto do herói pegam o dourado da Pelina */
.demo-viva .demo-destaque-selo,.demo-viva .demo-vertodos{--d:var(--d-cor,1)}
.demo-viva .demo-vertodos{border-bottom-color:color-mix(in oklch,var(--esq),var(--loja-cor) calc(var(--d-cor,1) * 100%))}
.demo-viva .demo-hero-pontos i:first-child{background:color-mix(in oklch,rgb(17 17 17 / .3),var(--loja-cor) calc(var(--d-cor,1) * 100%))}
/* 05 Tema: o botão, o título da seção e a moldura dos cartões */
.demo-viva .demo-grid-titulo{--d:var(--d-tema,1)}
.demo-viva .demo-hero-cta{background:color-mix(in oklch,var(--esq),var(--loja-cor) calc(var(--d-tema,1) * 100%));
  color:color-mix(in oklch,transparent,var(--loja-tinta) calc(var(--d-tema,1) * 100%))}
.demo-viva .demo-grid li{background:color-mix(in oklch,transparent,var(--loja-cartao) calc(var(--d-tema,1) * 100%));
  border-color:color-mix(in oklch,transparent,var(--loja-linha) calc(var(--d-tema,1) * 100%))}
/* 06 Artes: o banner entra no herói */
.demo-viva .demo-hero-banner{opacity:var(--d-artes,1)}
/* 07 Produtos: foto, preço e nota (as estrelinhas junto) */
.demo-viva .demo-tile-img,.demo-viva .demo-estrelas{opacity:var(--d-produtos,1)}
.demo-viva .demo-tile-nome,.demo-viva .demo-tile-preco,.demo-viva .demo-tile-nota{--d:var(--d-produtos,1)}
/* 08 Prévia: o selo "Prévia" e o aro da loja pronta (no box-shadow do navegador) */
.demo-viva .demo-previa-chip{opacity:var(--d-previa,1)}
/* o esqueleto: caixa clara que some enquanto o texto aparece */
.demo-viva :is(.demo-endereco-texto,.demo-menu span,.demo-hero-titulo,.demo-hero-sub,.demo-destaque-selo,.demo-grid-titulo,.demo-vertodos,.demo-tile-nome,.demo-tile-preco,.demo-tile-nota){
  background:color-mix(in oklch,var(--esq),transparent calc(var(--d,1) * 100%));
  color:color-mix(in oklch,transparent,var(--c) calc(var(--d,1) * 100%))}
/* o endereço mora na barra ESCURA da moldura: o esqueleto dele é o claro de antes */
.demo-viva .demo-endereco-texto{background:color-mix(in oklch,rgb(255 255 255 / .06),transparent calc(var(--d,1) * 100%))}

/* --------- Celular e janelas até 1040px: cabeça centralizada, a barra de
   passos vira uma faixa que rola na horizontal (o passo atual fica no meio),
   o navegador ocupa a largura e o cartão vai embaixo, sem a linha lateral --------- */
@media (max-width:1040px){
  .demo-palco{padding-block:12px;--k:1.5}
  .demo-cabeca .museu{margin-bottom:6px}
  .demo-cabeca h2{font-size:clamp(24px,6vw,34px)}
  .demo-lead{margin-top:6px;font-size:14px}
  .demo-passos{margin:12px 0 14px;overflow-x:auto;scrollbar-width:none;width:100%;max-width:640px}
  .demo-passos::-webkit-scrollbar{display:none}
  .demo-passo{flex:0 0 auto;padding-inline:12px}
  .demo-trilho:not(.demo-viva) .demo-passos{flex-wrap:wrap;justify-content:center;overflow:visible}
  .demo-vitrine{width:100%;max-width:560px;display:flex;flex-direction:column}
  .demo-liga{display:none}
  .demo-legenda{position:static;translate:none;width:auto;order:2;margin-top:10px;padding:12px 16px 14px}
  .demo-legenda-item strong{font-size:19px;margin:6px 0 8px;padding-bottom:8px}
  .demo-legenda-item p{font-size:12.5px;line-height:1.45}
  /* a loja dentro do navegador vira a LOJA NO CELULAR (25/10): a letra deixa de
     escalar com a largura (a 390px dava menos de 6px) e ganha tamanho real
     (base 11-13px); o menu vai para o hambúrguer, o herói fica só com título e
     botão, e "Mais vendidos" vai a 2 colunas (4 no tablet). */
  .demo-navegador-barra{font-size:clamp(9px,1.9cqw,11px);height:auto;min-height:26px;padding:4px 12px}
  .demo-navegador-bolas i{width:7px;height:7px}
  .demo-navegador-endereco{height:18px;border-radius:6px}
  .demo-tela{font-size:clamp(11px,2.6cqw,13px)}
  .demo-header{height:3em;padding:0 1.2em}
  .demo-logo-img{height:1.9em}
  .demo-menu{display:none}
  .demo-icones{gap:.9em}
  .demo-icones svg{width:1.35em;height:1.35em}
  .demo-icones .demo-hamburguer{display:block}
  .demo-hero{height:auto;min-height:8.6em;padding:1em 1.3em 1.6em}
  .demo-hero::after{background:linear-gradient(90deg,rgb(255 255 255 / .82),rgb(255 255 255 / .5) 52%,transparent 82%)}
  .demo-hero-sub{display:none}
  .demo-hero-titulo{font-size:1.75em}
  .demo-hero-cta{margin-top:.9em;padding:.7em 1.1em;font-size:.85em}
  .demo-hero-pontos{left:auto;right:1.3em;bottom:.8em;gap:.4em}
  .demo-hero-pontos i{width:1.6em;height:.25em}
  .demo-secao{padding:.9em 1.2em 1em}
  .demo-secao-cabeca{margin-bottom:.8em}
  .demo-secao-txt{gap:.25em}
  .demo-destaque-selo{font-size:.8em}
  .demo-grid-titulo{font-size:1.5em}
  .demo-vertodos{font-size:.9em;padding-bottom:.2em}
  .demo-grid{grid-template-columns:repeat(2,1fr);gap:.8em}
  .demo-grid li{gap:.15em;padding-bottom:.6em;border-radius:.6em}
  .demo-tile-img{aspect-ratio:2/1;margin-bottom:.45em}
  .demo-tile-nome,.demo-tile-preco,.demo-tile-linha{margin-inline:.7em}
  .demo-tile-nome{font-size:1.05em}
  .demo-tile-preco{font-size:1em}
  .demo-tile-linha{gap:.4em;font-size:.9em}
}
/* celular: 2 produtos (os 4 empilhados não cabem no palco preso) */
@media (max-width:600px){
  .demo-grid li:nth-child(n+3){display:none}
}
/* tablet/janela baixa: o navegador encolhe para o cartão caber embaixo dele */
@media (min-width:601px) and (max-width:1040px){
  .demo-vitrine{width:min(100%,560px,calc((100svh - var(--topo-altura) - 330px) / .78))}
  .demo-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:1040px) and (max-height:700px){
  .demo-viva .demo-lead,.demo-viva .demo-cabeca .museu{display:none}
  /* janela baixa: a loja no celular encolhe na altura, não na letra */
  .demo-palco{padding-block:6px}
  .demo-hero{min-height:6.8em}
  .demo-tile-img{aspect-ratio:5/2}
  .demo-tile-linha{display:none}
  .demo-legenda{padding:9px 14px 10px}
  .demo-legenda-item strong{font-size:17px;margin:4px 0 6px;padding-bottom:6px}
}
@media (max-width:1040px) and (max-height:600px){
  .demo-legenda-item p{font-size:12px;line-height:1.35}
  .demo-legenda-num{display:none}
  .demo-passos{margin:8px 0 10px}
  .demo-hero{min-height:6.2em;padding:.7em 1.3em 1.1em}
}

@media (prefers-reduced-motion:reduce){
  .demo-trilho{height:auto}
  .demo-palco{position:relative;top:auto;height:auto;padding-block:40px}
  .demo-passo-rotulo::after,.demo-passo-num,.demo-passo-nome,.demo-legenda-item,.demo-liga i,.demo-hero-banner,.demo-tile-img{transition:none}
}


/* ============================================================
   OS PLANOS (transcrito, igual à main; sem o busto decorativo atrás e sem
   a inclinação por ponteiro do mouse: são cortes de escopo desta etapa,
   registrados no relatório)
   ============================================================ */
.secao-planos .planos-sub{color:var(--fg-muted);max-width:52ch;margin:10px 0 0;font-size:clamp(15px,1.6vw,17px)}

.planos-altar{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px);align-items:stretch;margin-top:clamp(28px,4vh,52px);perspective:1600px}
.plano{position:relative;display:flex;flex-direction:column;padding:clamp(20px,2vw,30px);border-radius:var(--raio-lg);transform-style:preserve-3d;
  background:linear-gradient(180deg, rgb(0 0 0 / .34) 0%, rgb(0 0 0 / .40) 100%),url("assets/pedra/vidro-pedra.webp") center / cover no-repeat,var(--ink-2);
  border:1px solid var(--border);
  /* A INCLINAÇÃO SEGUINDO O PONTEIRO, transcrita de assets/estilo.css
     (item do Arthur, "eu quero que os cards reajam com o mouse"). Reusa
     assets/inclinacao.js verbatim (mesmo seletor .plano); ele escreve só
     --px/--py, de -1 a 1, e o ângulo é decidido aqui. Sinal do eixo Y
     negativo porque a borda mais perto do ponteiro avança pro espectador. */
  --px:0;--py:0;
  --tilt-x:calc(var(--py) * 6deg);
  --tilt-y:calc(var(--px) * -6deg);
  transition:transform .5s var(--ease);
}
.plano.inclinando{transition:transform .08s linear}
.plano::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;
  background:linear-gradient(150deg,rgb(255 255 255 / .55) 0%,rgb(255 255 255 / .06) 30%,rgb(255 255 255 / 0) 55%,rgb(255 255 255 / .22) 100%);
  -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;
}
.plano:nth-child(1){transform:perspective(1600px) rotateY(9deg) translateZ(-40px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))}
.plano:nth-child(3){transform:perspective(1600px) rotateY(-9deg) translateZ(-40px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))}
/* 16/10/2026 à noite (Arthur: "induzir para comprar o mais caro"): o destaque e o selo
   foram para a Fábrica, o 3º cartão; a regra .plano-destaque.reveal, logo abaixo, vence a
   do nth-child(3) por vir depois. O Estúdio, no meio, recua um pouco, em degrau até a Fábrica. */
.plano:nth-child(2){transform:perspective(1600px) translateZ(-20px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))}
.plano-destaque{z-index:2;border-color:rgb(var(--acento) / .42);box-shadow:0 0 0 1px rgb(var(--acento) / .18),0 18px 60px -22px rgb(var(--acento) / .5)}
.plano-destaque.reveal{transform:translateZ(30px) scale(1.04) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))}
.plano-destaque::before{background:linear-gradient(150deg,rgb(var(--acento) / .95) 0%,rgb(var(--acento) / .28) 34%,rgb(255 255 255 / .05) 58%,rgb(var(--acento) / .6) 100%)}
.plano-selo{position:absolute;top:-11px;left:clamp(20px,2vw,30px);padding:3px 10px;border-radius:var(--raio-pilula);background:var(--primary);color:var(--on-primary);font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.plano-rotulo{font-family:var(--font-mono);font-size:var(--t-rotulo);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-subtle)}
.plano-destaque .plano-rotulo{color:rgb(var(--acento))}
.plano-nome{font-family:var(--font-display,inherit);font-size:clamp(26px,3vw,38px);line-height:1.1;margin:8px 0 0;font-weight:400}
.plano-para{color:var(--fg-muted);font-size:clamp(14px,1.4vw,15px);line-height:var(--lh-corpo);margin:10px 0 0}
.plano-preco{display:flex;align-items:baseline;gap:5px;margin:18px 0 0}
.plano-cifra{color:var(--fg-muted);font-size:clamp(14px,1.4vw,16px)}
.plano-valor{font-family:var(--font-display,inherit);font-size:clamp(38px,4.6vw,58px);line-height:1;color:var(--fg)}
.plano-periodo{color:var(--fg-muted);font-size:clamp(13px,1.3vw,15px)}
.plano-quota{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.pastilha{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--raio-pilula);border:1px solid var(--border-strong,var(--border));color:var(--fg-muted);font-size:13px}
.pastilha::before{content:"";width:5px;height:5px;border-radius:50%;background:rgb(var(--acento) / .8);flex:none}
.plano-itens{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.plano-itens li{position:relative;padding-left:18px;color:var(--fg-muted);font-size:clamp(13px,1.35vw,14.5px);line-height:var(--lh-corpo)}
.plano-itens li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:rgb(255 255 255 / .28)}
.plano-destaque .plano-itens li::before{background:rgb(var(--acento) / .75)}
.plano-acao{margin-top:auto;justify-content:center;width:100%}
.plano-itens + .plano-acao{margin-top:22px}
/* Uma linha só, comum aos três planos, logo abaixo dos cartões (16/10/2026,
   planos novos): depois de usar os recursos do plano, o uso continua por
   créditos dentro do app. Fica fora do .plano de propósito: a altura dos
   cartões é medida pelas travas de enquadramento (L25) e não pode crescer. */
.planos-creditos{margin:clamp(16px,2.2vh,26px) 0 0;text-align:center;color:var(--fg-muted);font-size:clamp(13px,1.35vw,15px);line-height:var(--lh-corpo)}
@media (max-width:820px){
  .planos-altar{grid-template-columns:1fr;perspective:none;gap:16px}
  .plano:nth-child(1),.plano:nth-child(2),.plano:nth-child(3),.plano-destaque.reveal{transform:none}
  .plano-destaque{box-shadow:0 0 0 1px rgb(var(--acento) / .18)}
}
@media (prefers-reduced-motion:reduce){
  .planos-altar{perspective:none}
  .plano:nth-child(1),.plano:nth-child(2),.plano:nth-child(3),.plano-destaque.reveal{transform:none}
}
/* Janela baixa de computador (o notebook de 1366x768 com a barra do navegador
   tem ~657px): os 3 cartões e o selo cabem inteiros depois do "Ver planos" (os
   botões saíam ~23px da tela). Só respiros, espaços e entrelinha; texto, ordem,
   cor e o corpo da lista (14,5px) não mudam. 720px é o corte medido: abaixo
   disso os botões deixam de caber com 10px de folga (715px a 1536 de largura,
   o pior caso); acima, o desenho segue igual.
   09/10 (B1 do parecer): de 821 a 1040px os planos já estão em 3 colunas, o
   mesmo desenho de computador (a coluna única só vale até 820px), e o iPad
   deitado com as barras do Safari (~1024x680) cortava os botões. A mesma
   compactação vale nessa faixa, com o corte dela: 740px, a maior altura em que,
   a 1024px, os cartões e os botões deixam de caber com 10px de folga (de 741px
   para cima já cabem; 1024x768 e acima ficam idênticos, pixel a pixel).
   Rodada 2 de 09/10 (BF do parecer): nas larguras mais estreitas os
   cartões ficam mais altos, então o corte de 740px só servia a partir de
   936px. Medido de 1 em 1px: de 821 a 935px de largura os cartões seguiam
   cortados ou com folga abaixo de 10px até 774px de altura (773px a 821, 774px
   em 823, 826, 831, 834 e 836). O 2º corte da lista cobre essa faixa estreita. */
@media (min-width:1041px) and (max-height:720px), (min-width:821px) and (max-width:1040px) and (max-height:740px), (min-width:821px) and (max-width:935px) and (max-height:774px){
  .plano{padding-block:16px}
  .plano-nome{margin-top:4px}
  .plano-para{margin-top:6px;line-height:1.4}
  .plano-preco{margin-top:10px}
  .plano-quota{margin-top:8px}
  .plano-itens{margin-top:10px;gap:5px}
  .plano-itens li{line-height:1.4}
  .plano-itens li::before{top:.54em}
  .plano-itens + .plano-acao{margin-top:12px}
}

/* ============================================================
   CTA FINAL PARA O INSTAGRAM DA VIDIUS: a última seção antes do rodapé. O
   botão reaproveita .btn.btn-1 SEM pílula, de propósito (só a composição da
   referência entra, a forma do botão não). O brilho "vivo" usa --respira, o
   MESMO timing do .lente-respira do cabeçalho: não inventa cadência nova.
   Composição (V7a, 28/09, variante A do mockup-cta\): no computador, texto à
   esquerda (order:1) e busto grande à direita (order:2), colunas separadas
   por flex-direction:row (nunca sobrepõem); no celular, pilha com o busto em
   cima. O &nbsp; entre "que" e "eu" no HTML impede o "eu" de ficar sozinho
   na linha; o título herda --font-display do h2 global; e o translate:-4.7%
   no busto (abaixo) recentra o rosto, que no arquivo de origem fica ~4,7% à
   direita do centro do quadro.
   ============================================================ */
.secao-cta-vidius{display:flex;flex-direction:row;align-items:stretch;justify-content:center;
  gap:clamp(32px,5vw,80px);text-align:left;overflow:hidden;padding-inline:var(--gutter);
  height:clamp(560px,78vh,820px)}
.cta-vidius-fundo{position:relative;order:2;flex:0 0 auto;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:none}
/* C6: sem brilho atrás do busto (era o --lente-glow vermelho). */
.cta-vidius-fundo picture{display:block;height:76%}
/* C6: nome no pedestal, 62% da largura do busto, mesmo -4,7% dele. */
.cta-vidius-nome{position:absolute;left:50%;bottom:12%;translate:calc(-50% - 4.7%) 30%;width:62%;height:auto;opacity:.55;pointer-events:none}
/* -4.7%: o rosto no busto-d.webp/busto-m.webp fica ~4,7% à direita do
   centro do quadro (medido, LEGENDA.md do mockup) -- desloca a imagem
   INTEIRA pra esquerda nessa fração da PRÓPRIA largura (translate em %
   é relativo ao elemento, não ao pai), o que recentra o rosto na coluna
   sem depender do tamanho renderizado (L22h mede o resultado). */
.cta-vidius-busto{position:relative;z-index:1;height:100%;width:auto;margin:0;translate:-4.7% 0}

.cta-vidius-conteudo{order:1;position:relative;display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;width:auto;max-width:min(42%,480px);margin:0;padding:0}
.cta-vidius-titulo{font-family:var(--font-display);font-size:clamp(2rem,5.4vw,4.2rem);line-height:1.08;max-width:15ch;margin-inline:0}
.cta-vidius-metal{background:linear-gradient(180deg,var(--marmore-1),var(--marmore-5) 45%,var(--marmore-1));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cta-vidius-lead{color:var(--fg-muted);font-size:clamp(15px,1.6vw,17px);margin:18px 0 32px;max-width:42ch}
.cta-vidius-botao{padding:16px 30px;font-size:var(--t-corpo)}

@media (max-width:820px){
  .secao-cta-vidius{height:auto;flex-direction:column;align-items:center;justify-content:flex-start;
    text-align:center;gap:26px;padding-block:clamp(56px,10vw,80px);min-height:66vh;overflow:visible}
  .cta-vidius-fundo{order:1;justify-content:center;height:auto}
  .cta-vidius-fundo picture{height:auto}
  .cta-vidius-busto{height:auto;width:min(64vw,300px);translate:-4.7% 0}
  .cta-vidius-nome{bottom:0;translate:calc(-50% - 4.7%) 20%}
  .cta-vidius-conteudo{order:2;height:auto;align-items:center;max-width:34ch;margin-inline:auto}
  .cta-vidius-titulo{margin-inline:auto}
  .cta-vidius-lead{margin:16px auto 26px}
}
/* C10 (gate 29/09, polimento): em telas baixas (360x640), o respiro de
   66vh/80px cortava a base do botão ao pousar no início da seção --
   reduz só o respiro vertical aqui, sem tocar a composição da V7a. */
@media (max-width:820px) and (max-height:700px){
  .secao-cta-vidius{padding-block:clamp(28px,6vw,48px);min-height:0}
}

/* ============================================================
   RESPONSIVO GERAL (transcrito)
   ============================================================ */
@media (max-width:1000px){
  .rodape-grade{grid-template-columns:1fr 1fr}
  .rodape-cards{grid-column:1 / -1}
}
@media (max-width:820px){
  .topo-nav{display:none}
  .menu-btn{display:flex}
  .menu-btn,.topo-insta{width:44px;height:44px}
  .topo-acoes .btn-3{padding-block:12px}
  #link-entrar{padding-block:13px}
}
@media (max-width:560px){
  .rodape-grade{grid-template-columns:1fr}
  .rodape-cards{grid-template-columns:1fr}
  .marca-nome small{display:none}
  .topo-insta{display:none}
}

/* ============================================================================
   MOTOR DO PLANO-SEQUÊNCIA
   UM palco só (.jornada > .palco), grudado (position:sticky) do começo ao
   fim da jornada. Um canvas cruza em fusão os quadros da lista CONTÍNUA dos
   12 trechos de vídeo, pelo progresso GLOBAL de rolagem da seção (lp2.js).
   .palco-texto guarda os 9 .capitulo-texto (o inicio e os 8); só o .ativo mostra (crossfade
   por opacity), e dentro dele só uma .batida por vez.
   ============================================================================ */
.jornada{position:relative;background:var(--breu)}
/* A altura total = 100svh (o palco) + a SOMA dos cursos dos 8 capítulos.
   ESPELHA quadros/manifesto.json (capitulos[].cursoDesktop/Mobile), de
   propósito NÃO lida do JSON em tempo de execução: mudar depois que a
   página já pintou re-fluiria o layout debaixo do dedo de quem está
   rolando. Quem mudar um curso no manifesto muda a soma aqui também.
   Desktop (I3, 15/10/2026: batida do tamanho da leitura, ~4 palavras/s):
   80+360+500+220+400+1300+540+760+340 = 4500 */
.jornada{min-height:calc(100svh + 4500 * 1svh)}
@media (max-width:820px){
  /* Mobile: 80+350+490+210+400+1300+540+740+320 = 4430 */
  .jornada{min-height:calc(100svh + 4430 * 1svh)}
}

.palco{position:sticky;top:var(--topo-altura);height:calc(100svh - var(--topo-altura));overflow:clip;background:var(--breu)}
.palco-tela{position:absolute;inset:0}
.palco-fallback,.palco-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--breu)}
.palco-fallback[hidden]{display:none}
/* Rótulo do fallback: só aparece se a imagem faltar E a página estiver
   rodando local (lp2.js decide isso; aqui só a aparência). Cantinho
   discreto, de propósito: um debug tag não pode brigar com o texto real. */
.palco-sem-quadro .palco-rotulo-fallback{
  display:flex;position:absolute;right:10px;top:10px;z-index:2;
  padding:3px 7px;background:rgb(0 0 0 / .5);border:1px solid var(--border);
  font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-subtle);
}
.palco-rotulo-fallback{display:none}

/* O véu: terço esquerdo escurecido para o texto, faixa de baixo para a
   barra de contraste. Emenda com --breu, sem linha visível. */
.palco-veu{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg, var(--breu) 0%, var(--breu-suave) 22%, rgb(12 11 11 / .28) 44%, transparent 62%),
    linear-gradient(to top, var(--breu) 0%, rgb(12 11 11 / .7) 20%, transparent 48%);
}

/* Banda de 62% da altura do palco, encostada no fundo: o .museu fica no
   topo dela (fluxo normal, já que é o único filho que não é .batida), e
   cada .batida é absoluta DENTRO desta banda, ancorada no fundo dela. Sem
   a banda ter altura explícita, .palco-texto encolhia para a altura do
   .museu sozinho (as .batida, absolutas, não contam pra altura do pai) e
   tudo ficava espremido nos últimos pixels do palco — medido no Playwright. */
.palco-texto{position:absolute;left:0;right:0;bottom:0;height:62%;z-index:1;padding:0 var(--gutter) clamp(28px,6vh,56px)}

/* Um .capitulo-texto por capítulo, todos empilhados na MESMA caixa
   (inset:0 dentro de .palco-texto, sem padding/borda própria: a geometria
   de .batida abaixo não muda nada). Só o .ativo mostra; a troca é opacity,
   nunca display, para o crossfade ficar suave. .capitulo-cena (o
   quadro-chave final de cada capítulo) só existe visualmente sob
   prefers-reduced-motion, mais abaixo. */
.capitulo-texto{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .6s var(--ease)}
.capitulo-texto.ativo{opacity:1;pointer-events:auto}
/* O rótulo herda margin-left, nunca padding no .capitulo-texto: .batida é
   position:absolute com left PRÓPRIO (var(--gutter) aqui, 150px abaixo), e
   um padding no pai não moveria a caixa de inset dela -- só a do .museu,
   que é o único filho de fluxo normal. Sem isto, o .museu ficava sempre em
   x≈0 (o defeito de 1909x872 achado pelo Arthur: colava no trilho
   VI·ESCULPI·PRODUZI, left:22px). */
.capitulo-texto .museu{position:relative;color:var(--fg-subtle);margin-left:var(--gutter)}
/* C8 (I8): rótulo >= 4,5:1 sobre o filme claro (era 2,8:1 em --fg-subtle). */
.palco-texto .museu{color:var(--fg);text-shadow:0 1px 2px rgb(0 0 0 / .95),0 0 8px rgb(0 0 0 / .85)}
.capitulo-cena{display:none}

.batida{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(28px,6vh,56px);
  max-width:min(560px,92%);
  opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  pointer-events:none;
}
.batida.ativa{opacity:1;transform:none;pointer-events:auto}
.batida h2{color:var(--fg)}
.batida p{font-size:clamp(16px,1.8vw,19px);color:var(--fg);line-height:var(--lh-corpo)}
.batida p b{color:var(--fg);font-weight:500}
.batida-lista{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.batida-lista li{position:relative;padding-left:20px;font-size:clamp(14px,1.6vw,16px);color:var(--fg-muted);line-height:var(--lh-corpo)}
.batida-lista li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--reprovado)}
.batida .btn{margin-top:16px}
/* A fileira de botões da primeira batida (ex-.heroi-botoes): só ela tem
   dois CTAs lado a lado; as outras têm no máximo um .btn. */
.batida-botoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}

/* O trilho VI · ESCULPI · PRODUZI mora fixo em left:22px no computador e
   pode invadir a mesma faixa esquerda que o texto do capítulo usa. Reservo
   a largura dele aqui, só no computador (no celular o trilho vira uma
   faixa fina no topo, e não disputa espaço com o texto). */
@media (min-width:821px){
  .palco-texto{padding-left:150px}
  .batida{left:150px;max-width:min(560px,92%,calc(100vw - 300px))}
  .capitulo-texto .museu{margin-left:150px}
}

@media (max-width:820px){
  /* CONTRASTE NO CELULAR (23/09). O bug: .palco-texto{height:72%} bate o topo
     do texto (onde o .museu senta) EXATAMENTE no ponto "transparent 72%" do
     véu antigo: zero escurecimento bem onde o rótulo precisa dele, e o quadro
     do vídeo (mármore claro, faísca) vazava atrás da letra. Duas frentes,
     nenhuma escurece o vídeo INTEIRO:
     1) o véu nunca chega a 0 dentro da faixa de texto (0-72%): o stop final
        foi de "transparent 72%" para "rgb(.../.22) 72%" e empurrado pra
        "transparent 86%" (só o topo do palco, sem texto, fica limpo);
     2) sombra no PRÓPRIO texto (.museu e .batida), que garante letra legível
        em cima de QUALQUER quadro, sem depender só do gradiente. */
  .palco-veu{background:
    linear-gradient(to top, var(--breu) 0%, rgb(12 11 11 / .85) 30%, rgb(12 11 11 / .38) 55%, rgb(12 11 11 / .22) 72%, transparent 86%);
  }
  .batida h2,.batida p,.batida-lista li{
    text-shadow:0 1px 2px rgb(0 0 0 / .95), 0 1px 7px rgb(0 0 0 / .9), 0 2px 20px rgb(0 0 0 / .75);
  }
  /* O .museu é mono pequeno (11px): sombra sozinha não segura contraste
     contra um quadro claro/saturado (medido: "06 · PRODUZI", fundo azul
     do criativo). Uma pilula escura por trás -- não o palco inteiro --
     garante legibilidade em QUALQUER quadro, do jeito mais barato. */
  .palco-texto .museu{
    background:rgb(0 0 0 / .74);border-radius:var(--raio-pilula);
    padding:5px 11px;
    backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  }
  /* B2: Assistir e Topo (só ícone até 820 px) cobriam o fim das frases; a coluna
     para 66 px da borda (14 + 44 + 8). */
  .batida{max-width:100%;bottom:clamp(24px,6vh,48px);right:66px}
  .palco-texto{height:72%;padding-bottom:clamp(24px,6vh,48px)}
}

@media (prefers-reduced-motion:reduce){
  /* Sem rolagem guiada: a jornada solta o palco, e cada capítulo vira um
     bloco parado na lista (a imagem do quadro-chave final + o texto
     inteiro, todas as batidas ativas, sem transição) -- como já era antes
     de existir um palco por capítulo. lp2.js não liga o laço de progresso
     neste modo; esta regra é a rede de segurança visual caso ele rode
     mesmo assim. */
  .jornada{min-height:0}
  .palco{position:static;height:auto;overflow:visible;padding-block:var(--secao-y)}
  .palco-fallback,.palco-canvas,.palco-veu,.palco-rotulo-fallback,.aida-etiqueta{display:none}
  .palco-texto{position:static;height:auto;padding:0}
  .capitulo-texto{position:static;opacity:1;pointer-events:auto;transition:none;margin-bottom:clamp(40px,8vh,72px)}
  .capitulo-texto:last-child{margin-bottom:0}
  .batida{position:relative;left:0;right:0;bottom:0;max-width:100%;opacity:1;transform:none;pointer-events:auto;margin-bottom:18px}
  .capitulo-texto .museu{margin-left:0}
  .capitulo-cena{display:block;position:relative;min-height:56svh;overflow:hidden;border-radius:var(--raio-md);margin-bottom:20px;background:var(--breu)}
  .capitulo-cena img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
  .capitulo-cena::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--breu) 0%,transparent 60%)}
  /* No primeiro capítulo o texto vem antes da imagem: com a imagem na
     frente, o H1 e o CTA de conta nasciam fora da primeira tela. */
  #inicio{display:flex;flex-direction:column}
  #inicio .capitulo-cena{order:1}
}

/* Motor do plano-sequência fora do ar (manifesto sumido ou malformado,
   jornadaSemMotor em lp2.js): o mesmo desenho parado do bloco acima, sem a
   imagem de cada capítulo, porque o caminho dela vem do manifesto. A
   jornada nunca some: o texto inteiro e os CTAs ficam na página. */
.jornada.sem-motor{min-height:0}
.sem-motor .palco{position:static;height:auto;overflow:visible;padding-block:var(--secao-y)}
.sem-motor .palco-fallback,.sem-motor .palco-canvas,.sem-motor .palco-veu,.sem-motor .palco-rotulo-fallback,.sem-motor .aida-etiqueta,.sem-motor .capitulo-cena{display:none}
.sem-motor .palco-texto{position:static;height:auto;padding:0}
.sem-motor .capitulo-texto{position:static;opacity:1;pointer-events:auto;transition:none;margin-bottom:clamp(40px,8vh,72px)}
.sem-motor .capitulo-texto:last-child{margin-bottom:0}
.sem-motor .batida{position:relative;left:0;right:0;bottom:0;max-width:100%;opacity:1;transform:none;pointer-events:auto;margin-bottom:18px}
.sem-motor .capitulo-texto .museu{margin-left:0}

/* A primeira batida (id="inicio", ex-herói): abertura limpa (16/10/2026,
   pedido do Arthur). Só os três botões aparecem, sobre o filme. O h1 (título
   da página, um só por documento) continua no DOM, oculto só para os olhos
   (o mesmo padrão de .trilho-palavra): serve ao Google e ao leitor de tela. */
#inicio h1{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (min-width:821px){
  #inicio .batida{max-width:min(900px,92%,calc(100vw - 300px))}
}
@media (max-width:560px){
  #inicio .batida-botoes .btn{width:100%}
}
/* Em celular de tela baixa o "Assistir" da abertura sai: o botão flutuante
   faz o mesmo em toda a página, e lado a lado com "Ver a jornada" o rótulo
   da abertura ficava embaixo dele (gate de 24/09). */
@media (max-width:340px), (max-width:560px) and (max-height:760px){
  #inicio .batida-botoes .btn-3{display:none}
  /* Sem o Assistir inline: a coluna da batida já reserva a faixa do flutuante (B2). */
}

/* ============================================================
   TRILHO VI · ESCULPI · PRODUZI
   ============================================================ */
.trilho-vep{position:fixed;z-index:45;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--media) var(--ease),visibility 0s var(--media);
}
.trilho-vep.visivel{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--media) var(--ease),visibility 0s}
@media (min-width:821px){
  .trilho-vep{left:22px;top:50%;translate:0 -50%;display:flex;flex-direction:column;gap:26px;align-items:flex-start;padding-left:14px}
  .trilho-linha{position:absolute;left:3px;top:2px;bottom:2px;width:1px;background:var(--border-strong)}
  .trilho-preenchido{position:absolute;left:0;top:0;width:100%;height:0;background:var(--signal);box-shadow:0 0 8px rgb(var(--acento-luz) / .6);transition:height .15s linear}
  .trilho-vep a{position:relative;font-family:var(--font-mono);font-size:var(--t-rotulo);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-subtle);transition:color var(--rapida) var(--ease)}
  .trilho-vep a::before{content:"";position:absolute;left:-14px;top:50%;translate:0 -50%;width:7px;height:7px;border-radius:50%;background:var(--ink-3);border:1px solid var(--border-strong);transition:background var(--rapida) var(--ease),border-color var(--rapida) var(--ease)}
  .trilho-vep a:hover{color:var(--fg)}
  .trilho-vep a[aria-current]{color:var(--fg)}
  .trilho-vep a[aria-current]::before{background:var(--signal);border-color:var(--signal);box-shadow:0 0 8px rgb(var(--acento-luz) / .7)}
}
@media (max-width:820px){
  .trilho-vep{left:0;right:0;top:var(--topo-altura);height:3px;display:flex;gap:2px;padding:0 2px}
  .trilho-vep .trilho-linha,.trilho-vep .trilho-preenchido{display:none}
  .trilho-vep a{flex:1;position:relative;height:3px;background:var(--border-strong);overflow:hidden}
  .trilho-vep a::before{content:"";position:absolute;left:-6px;right:-6px;top:-18px;bottom:-18px}
  .trilho-vep a .trilho-fatia{position:absolute;inset:0;width:0;background:var(--signal);transition:width .15s linear}
  .trilho-vep a[aria-current] .trilho-fatia,.trilho-vep a.feito .trilho-fatia{width:100%}
  .trilho-vep .trilho-palavra{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  .trilho-vep{position:static;opacity:1;visibility:visible;pointer-events:auto;margin:0 auto var(--secao-y);width:fit-content}
  .trilho-preenchido,.trilho-fatia{display:none}
}
/* Só no computador: o trilho já ocupa a faixa sob o cabeçalho, e com o
   respiro dele mais o do topo do palco o CTA de conta nascia fora da
   primeira tela (gate de 24/09). No celular o trilho é fino, e são esses
   respiros que tiram o texto de baixo do cabeçalho fixo: ficam. */
@media (prefers-reduced-motion:reduce) and (min-width:821px){
  .trilho-vep{margin-bottom:16px}
  /* .sem-motor .palco repete aqui porque a regra do desenho parado, mais
     específica, vencia esta e devolvia o respiro de seção (rodada 2). */
  .palco,.sem-motor .palco{padding-top:16px}
}

/* ============================================================
   QUAIS DESTAS VOCÊ SENTE? — LINHA DO TEMPO. Guiado só pela rolagem,
   reversível nos dois sentidos, com as respostas SEMPRE visíveis (decisão do
   Arthur, 26/09). Refeito em 23/10 pela referência dele: cabeça centralizada,
   duas colunas de cartões, linha reta no meio com UM ponto por linha de
   cartões, botão em pílula embaixo. O óculos, os números, os vistos e a
   contagem saíram.
   R4 de novo: o CSS-base já é o estado COMPLETO (linha 100% desenhada, todos
   os cartões e pontos acesos, as 8 respostas, que NUNCA colapsam); só quando
   o JS liga .dores-viva entra a EXCEÇÃO "não visto", e só nela.
   ============================================================ */
/* A base do #dores se dissolve no preto puro do #lojas-ficticias (lente,
   23/10: degrau de tom na emenda). */
.secao-dores{background:linear-gradient(to bottom,var(--marmore-8) 0,var(--marmore-8) calc(100% - 180px),var(--ink-0) 100%)}
/* Boot síncrono (R5, §6.1): .dores-boot congela toda transição enquanto o
   JS roda as duas passadas do estado real (quadroDoresLinha). */
.secao-dores.dores-boot *{transition:none!important}

.dores-cabeca{margin-bottom:clamp(28px,4vw,44px);text-align:center}
.dores-cabeca .museu{color:rgb(var(--acento))}
.dores-cabeca .museu::before{display:none}
.dores-cabeca h2{margin-top:14px}
.dores-h2-linha{display:block}
.dores-destaque{color:var(--primary)}
.dores-sub{margin:16px auto 0;max-width:560px;color:var(--fg-muted);font-size:clamp(14px,1.5vw,16px);line-height:1.55}
.dores-corpo-wrap{position:relative}

.dores-trilha{position:relative}
.dores-lista{list-style:none;padding:0;margin:0;display:block}
.dor-item{position:relative}
.dor-cartao{border-radius:var(--raio-md);border:1px solid rgb(var(--acento) / .55);
  background:linear-gradient(180deg,rgb(var(--acento) / .07),var(--surface) 70%);
  box-shadow:inset 0 0 26px rgb(var(--acento) / .10);
  padding:16px 18px;transition:border-color .3s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease)}
.dor-titulo{font-size:var(--t-corpo);font-weight:600;color:var(--fg);line-height:1.4;margin-bottom:6px;transition:color .3s var(--ease)}
.dor-resposta{font-size:var(--t-corpo-p);color:var(--fg-muted);line-height:var(--lh-corpo);margin:0}

/* O ponto da linha: por padrão (R4) nasce ACESO, vermelho com brilho. */
.dor-no{display:block;width:16px;height:16px;border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 0 4px var(--marmore-8),0 0 14px 3px rgb(var(--acento) / .7);z-index:1;
  transition:background .3s var(--ease),box-shadow .3s var(--ease)}

/* NÃO VISTO: só existe quando o JS ligou .dores-viva E o item ainda não
   foi alcançado pela linha de leitura (histerese, §6.1). */
.dores-viva .dor-item:not(.dor-item--visto) .dor-cartao{border-color:var(--border);background:var(--surface);box-shadow:none}
.dores-viva .dor-item:not(.dor-item--visto) .dor-titulo{color:var(--fg-muted)}
/* "esperando": a resposta apagada fica abaixo do título apagado (era a mesma
   cor). #8a8685 dá ~5,2:1 sobre o cartão apagado, acima do piso de 4,5. */
.dores-viva .dor-item:not(.dor-item--visto) .dor-resposta{color:#8a8685}
.dores-viva .dor-item:not(.dor-item--visto) .dor-no{background:var(--border-strong);box-shadow:0 0 0 4px var(--marmore-8)}

/* A linha RETA (SVG): pathLength=1 + stroke-dasharray:1 + stroke-dashoffset
   ligado a --dores-reach (0..1, fração de itens alcançados agora — nunca
   incrementado, sempre recalculado do zero a cada quadro, §6.1). Padrão
   (sem .dores-viva): reach cai em 1 (linha inteira, R4). A ponta de cima e a
   de baixo se dissolvem. */
.dores-linha{display:block;position:absolute;pointer-events:none;overflow:visible;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%)}
/* SEM vector-effect:non-scaling-stroke: com pathLength=1 ele faz o dasharray
   virar ~1px e a linha sai TRACEJADA (lente, 23/10). O SVG tem 40px de
   largura para 100 unidades (escala 0,4 em x), então 5 e 6 unidades dão 2px
   e 2,4px; a escala vertical não afeta o dash, que é em fração do caminho. */
.dores-linha-calha{fill:none;stroke:var(--border-strong);stroke-width:5}
.dores-linha-traco{fill:none;stroke:var(--primary);stroke-width:6;
  filter:drop-shadow(0 0 5px rgb(var(--acento) / .65));
  stroke-dasharray:1;stroke-dashoffset:calc(1 - 1);transition:stroke-dashoffset .25s linear}
.dores-viva .dores-linha-traco{stroke-dashoffset:calc(1 - var(--dores-reach,0))}

/* Botão e frase, centralizados embaixo da trilha. */
.dores-acao{margin-top:clamp(26px,3.4vw,40px);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.dores-acao .btn-1{border-radius:999px;padding:15px 38px;color:#fff;
  background:linear-gradient(180deg,#d03f39,#a82925);border-color:rgb(255 255 255 / .12);
  box-shadow:0 0 30px rgb(var(--acento) / .55),inset 0 1px 0 rgb(255 255 255 / .22)}
.dores-acao .btn-1:hover{background:linear-gradient(180deg,#d03f39,#a82925);border-color:rgb(255 255 255 / .2);
  box-shadow:0 0 40px rgb(var(--acento) / .75),inset 0 1px 0 rgb(255 255 255 / .28)}
.dores-seta{font-weight:400;line-height:1}
.dores-nota{margin:0;color:var(--fg-subtle);font-size:12.5px;line-height:1.4}

@media (prefers-reduced-motion:reduce){
  .dor-cartao,.dor-no,.dores-linha-traco{transition:none}
}

/* --------- Computador (≥821px): 2 colunas por linha de cartões + linha central --------- */
@media (min-width:821px){
  :root{ --dl-lane:clamp(76px,9vw,128px); }
  .dores-trilha{max-width:1040px;margin-inline:auto}
  .dores-lista{display:grid;grid-template-columns:1fr var(--dl-lane) 1fr;
    row-gap:clamp(16px,1.8vw,26px);align-items:stretch;position:relative}
  .dor-item--esq{grid-column:1}
  .dor-item--dir{grid-column:3}
  .dor-item .dor-cartao{height:100%}
  /* UM ponto por linha: o do cartão da esquerda, no meio do par. */
  .dor-item--esq .dor-no{position:absolute;top:50%;translate:0 -50%;right:calc(-1 * var(--dl-lane) / 2 - 8px)}
  .dor-item--dir .dor-no{display:none}

  .dores-linha{display:block;left:50%;top:0;height:100%;width:40px;translate:-50% 0}
}

/* --------- Celular (≤820px): uma coluna, linha reta à esquerda com o ponto de cada cartão --------- */
@media (max-width:820px){
  .dores-corpo-wrap{display:flex;flex-direction:column}
  .dor-item{padding-left:34px;margin-bottom:clamp(16px,4.5vw,24px)}
  .dor-item:last-child{margin-bottom:0}
  .dor-item--esq .dor-cartao,.dor-item--dir .dor-cartao{text-align:left}
  .dor-no{position:absolute;left:5px;top:20px}
  .dores-linha{left:-7px;top:0;height:100%;width:40px}
  .dores-sub-br{display:none}
}

/* ============================================================
   LOJAS FICTÍCIAS: cartões no estilo Sabino (REFERENCIA-SABINO.md, item
   2). Não há iframe nem vídeo: "a loja rodando" é uma captura de PÁGINA
   INTEIRA, parada, dentro de uma janela com overflow:hidden, que rola no
   hover (computador) ou já fica no fim do brilho (toque).
   ============================================================ */
.secao-mockups .cabeca{max-width:640px;margin-bottom:clamp(24px,4vw,40px)}
.secao-mockups .cabeca p{color:var(--fg-muted);font-size:clamp(15px,1.6vw,17px);margin-top:12px}
.mockups-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,30px)}

.mockup{position:relative;border-radius:var(--raio-lg);border:1px solid var(--border);background:var(--ink-2);
  padding:10px;isolation:isolate;
  /* Nomeia a timeline AQUI, não no <img>: .navegador-tela (overflow:hidden)
     seria o scroller mais próximo do <img> e travaria a animação num
     valor fixo (medido ao vivo -- achado real). */
  view-timeline-name:--lojas-scroll;view-timeline-axis:block}
/* O brilho interno, no rubi da casa (a Sabino usa ciano; REFERENCIA-SABINO.md
   item 2 pede o acento daqui no lugar dele). No toque fica sempre aceso --
   é como o site de referência compensa a falta de hover. */
.mockup::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  box-shadow:inset 0 -15px 34px -10px rgb(var(--acento) / 0);
  transition:box-shadow .8s cubic-bezier(.24,0,.28,1);
}
@media (hover:hover){ .mockup:hover::after{box-shadow:inset 0 -15px 34px -10px rgb(var(--acento) / .55)} }
@media (hover:none){ .mockup::after{box-shadow:inset 0 -15px 34px -10px rgb(var(--acento) / .55)} }

/* A janela de navegador: reaproveita o componente da main (dots + barra
   de endereço), agora com a captura de página inteira dentro. */
.navegador{border-radius:calc(var(--raio-lg) - 6px);position:relative;overflow:hidden;
  border:1px solid var(--border-strong);background:var(--ink-2);box-shadow:var(--sombra-peca)}
.navegador-barra{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);background:var(--ink-3)}
.navegador-bolas{display:flex;gap:5px}
.navegador-bolas i{width:8px;height:8px;border-radius:50%;background:var(--ink-5);display:block}
.navegador-url{flex:1;min-width:0;padding:5px 10px;background:var(--ink-0);border:1px solid var(--border);font-family:var(--font-mono);font-size:var(--t-rotulo);color:var(--fg-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navegador-tela{aspect-ratio:16/10;overflow:hidden;position:relative;background:var(--ink-0)}
.navegador-tela img{width:100%;height:auto;display:block;transform:translateY(0)}
/* D10: -65,1% = 1-(10/16)/(1376/768), em fração da imagem. Mouse: desce
   no hover em 3,5s. Toque com @supports: guiada pela rolagem, CSS puro.
   Sem suporte OU menos movimento: PARADA NO TOPO (o herói já representa
   a loja; a placa "Loja fictícia" mora fora da imagem). */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .navegador-tela img{transition:transform 3.5s cubic-bezier(.44,0,.56,1) .1s}
  .mockup:hover .navegador-tela img{transform:translateY(-65.1%)}
}
@media (hover:none) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    /* --lojas-scroll é nomeada em .mockup (acima), não view() anônima
       aqui: ver o comentário em .mockup sobre por que precisa ser assim. */
    .navegador-tela img{animation:lojas-pan linear both;animation-timeline:--lojas-scroll;animation-range:cover 0% cover 100%}
  }
}
@keyframes lojas-pan{from{transform:translateY(0)}to{transform:translateY(-65.1%)}}

.mockup-rodape{display:flex;flex-direction:column;gap:12px;padding:14px 8px 6px}
.mockup-rodape-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.mockup-nome{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:clamp(19px,2vw,23px);color:var(--fg)}
.mockup-swatch{width:10px;height:10px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 3px rgb(255 255 255 / .08)}
.mockup-nicho{font-family:var(--font-mono);font-size:var(--t-rotulo);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-subtle);margin-top:4px}

/* O selo "Novo": pílula com estrela, brilho interno no rubi (a Sabino usa
   ciano aqui também). */
.mockup-selo-novo{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:6px 14px;border-radius:var(--raio-pilula);background:var(--ink-3);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-subtle);
  box-shadow:inset 0 -9px 15px -10px rgb(var(--acento) / .5);
}
.mockup-selo-novo svg{width:12px;height:12px;color:rgb(var(--acento));flex:0 0 auto}

.mockup-acao{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding-top:12px;border-top:1px solid var(--border)}
/* padding:12px (não os 13px do .btn base) só pra abrir espaço pro selo
   ao lado sem quebrar linha; a soma com a borda ainda fecha 44px de alvo
   de toque (revisão de celular, item 5). */
.mockup-entrar{padding:12px 16px;font-size:13px}
.mockup-placa{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-subtle);border:1px solid var(--border);padding:4px 9px;border-radius:var(--raio-sm);white-space:nowrap}

/* Bloco neutro: fica embaixo da foto de produto por CSS (background-image
   sobre background-color). Se o arquivo não existir, a cor mostra sozinha,
   sem JavaScript de fallback e sem link quebrado visível. */
.bloco-neutro{aspect-ratio:1/1;border-radius:var(--raio-sm);background-size:cover;background-position:center}

@media (max-width:1000px){
  /* minmax(0,...) como na regra de computador: com 1fr puro, a barra de
     endereço (texto sem quebra) esticava a coluna e a página rolava 13px
     na horizontal em 320px. */
  .mockups-grade{grid-template-columns:minmax(0,1fr)}
  .mockup{max-width:440px;margin-inline:auto;width:100%}
}

/* Entrada pela rolagem, SÓ NO COMPUTADOR (REFERENCIA-SABINO.md item 2):
   cada cartão nasce em translateY(50px) scale(.9), opacidade .4, e vai ao
   natural conforme entra na tela. animation-timeline:view() faz isso sem
   JS; onde falta suporte, ligarEntradaMockups (lp2.js) troca por
   IntersectionObserver + a MESMA transição, disparada uma vez -- nunca os
   dois motores ligados ao mesmo tempo (o CSS testa o suporte do outro com
   @supports, o JS testa o do CSS com CSS.supports). */
@keyframes mockup-entra{
  from{opacity:.4;transform:translateY(50px) scale(.9)}
  to{opacity:1;transform:none}
}
@media (min-width:1001px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .mockup{animation:mockup-entra linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  }
  @supports not (animation-timeline:view()){
    .mockup{opacity:.4;transform:translateY(50px) scale(.9);transition:opacity .6s var(--ease),transform .6s var(--ease)}
    .mockup.mockup-entrou{opacity:1;transform:none}
  }
}

@media (prefers-reduced-motion:reduce){
  .navegador-tela img{transition:none;animation:none;transform:translateY(0)}
}

/* ============================================================
   CRIATIVOS FICTÍCIOS: o anel 3D da Sabino (REFERENCIA-SABINO.md, item
   1), com a estátua de corpo inteiro (fotos/estatua-toga.webp) no lugar
   da janela do herói dela. CSS 3D puro: a rotação é @keyframes, não JS;
   ligarCarrosselCriativos (lp2.js) só pausa fora da tela.
   ============================================================ */
.secao-criativos{background:var(--ink-0);overflow:clip}
.criativos-cabeca{max-width:640px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:clamp(28px,4vw,44px)}
.criativos-cabeca p{color:var(--fg-muted);font-size:clamp(15px,1.6vw,17px)}
.criativos-cabeca .btn{margin-top:4px}

/* O palco: a estátua fica presa no FUNDO dele (o pedestal encosta no
   rodapé da seção); a altura escala com a viewport, então o anel e a
   estátua crescem/encolhem juntos sem breakpoint próprio -- só o --k do
   anel (abaixo) é ajustado à parte, porque o raio/perspectiva/cartão do
   anel são px fixos (mesma receita da Sabino), não porcentagem. */
.criativos-palco{position:relative;height:clamp(420px,88vw,760px);margin-top:clamp(-8px,-1vw,0px)}

/* A estátua: camada plana por cima (z-index maior que o anel), presa no
   fundo do palco. Fundo já preto na própria imagem (breu): o palco
   também é --ink-0 puro, para a emenda não aparecer. */
.criativos-estatua{position:absolute;left:50%;bottom:0;translate:-50% 0;
  height:100%;width:auto;max-width:none;z-index:2;pointer-events:none;
  -webkit-user-select:none;user-select:none;
}

/* O anel: atrás da estátua, a .6 de opacidade, dissolvendo para
   transparente embaixo (mesma receita da Sabino). O centro (equador) fica
   na ALTURA DO PEITO da estátua -- medido na imagem (estatua-toga.webp,
   1000x1491): o peito/ombro fica a uns 32% do topo. Como a estátua tem
   height:100% do palco, 32% do PALCO é o mesmo ponto. */
.criativos-anel-camada{position:absolute;left:50%;top:32%;z-index:1;
  width:1360px;height:486px;
  --k:1;
  transform:translate(-50%,-50%) scale(var(--k));
  perspective:800px;
  opacity:.6;
  -webkit-mask-image:linear-gradient(to bottom, black 55%, transparent 95%);
  mask-image:linear-gradient(to bottom, black 55%, transparent 95%);
  pointer-events:none;
}
.criativos-anel{position:relative;width:100%;height:100%;transform-style:preserve-3d}
@media (prefers-reduced-motion:no-preference){
  .criativos-anel{animation:criativos-girar 50s linear infinite}
  .criativos-anel.criativos-pausado{animation-play-state:paused}
}
@keyframes criativos-girar{from{transform:rotateY(0)}to{transform:rotateY(-360deg)}}

/* Cada cartão: pivô no centro da caixa (top/left 50% + margem negativa de
   metade da largura/altura), depois gira i*30° em volta do eixo, empurra
   pro raio, e vira 180° pra olhar pro centro -- backface-visibility
   esconde a fatia da frente sozinha (a "parede côncava" da Sabino). */
.criativos-cartao{position:absolute;top:50%;left:50%;width:260px;height:370px;margin:-185px 0 0 -130px;
  border-radius:20px;overflow:hidden;background:var(--ink-2);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transform:rotateY(calc(var(--i) * 30deg)) translateZ(570px) rotateY(180deg);
  box-shadow:var(--sombra-peca);
}
.criativos-cartao img{width:100%;height:100%;object-fit:cover;display:block}
.criativos-titulo{position:absolute;left:0;right:0;bottom:0;padding:14px 16px 16px;
  background:linear-gradient(to top, rgb(0 0 0 / .88) 0%, rgb(0 0 0 / .35) 60%, transparent 100%);
  font-family:var(--font-display);font-size:18px;line-height:1.22;color:var(--fg);
}

@media (max-width:820px){
  .criativos-anel-camada{--k:.6}
}
@media (max-width:480px){
  .criativos-anel-camada{--k:.46}
}

@media (prefers-reduced-motion:reduce){
  .criativos-palco{height:clamp(320px,72vw,520px)}
}

/* ============================================================
   FAIXAS DE BANNERS: duas fileiras inclinadas, sentidos opostos
   (REFERENCIA-SABINO.md, item 3a). ligarFaixasBanners (lp2.js, ~45
   linhas) é o único motor de transform daqui -- o CSS só inclina, corta
   e esmaece as pontas.
   ============================================================ */
.secao-banners{background:radial-gradient(ellipse 60% 100% at 50% 30%, rgb(var(--acento) / .07), transparent 60%), var(--ink-0);
  overflow:clip;padding-block:clamp(40px,6vw,64px)}
.banners-cabeca{margin-bottom:clamp(20px,3vw,32px)}

.banners-pista{display:flex;flex-direction:column;gap:12px}
.banners-linha{transform:perspective(1200px) rotateX(16deg)}
/* Item 8 do backlog do RETOMAR-LP2.md: a 2ª fileira nascia esmaecida de
   propósito (opacity:.5, texto de 2 a 3,5:1) -- decisão do Arthur, 29/09:
   legível. opacity é um multiplicador: a .5 ela METADE a força real do
   véu abaixo (.85 -> .425, .72 -> .36), os dois abaixo do piso .6 que o
   comentário do véu já provava suficiente. Em 1 (sem diluir), o mesmo véu
   já validado passa de novo -- nenhuma outra mudança precisa. */
.banners-linha:last-child{opacity:1}
.banners-mascara{overflow:hidden;padding:10px 0;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.banners-trilho{display:flex;gap:14px;width:max-content;list-style:none;margin:0;padding:0}
.banner-item{position:relative;flex:0 0 auto;width:clamp(240px,30vw,480px);aspect-ratio:3.2/1;
  border-radius:var(--raio-sm);overflow:hidden;background:var(--ink-2)}
.banner-item img{width:100%;height:100%;object-fit:cover;display:block}
/* O véu segura pelo menos 60% de preto em toda a altura da letra: com .15
   no alto, a legenda caía sobre a foto clara e media 1,6:1 (gate de 24/09).
   Acima de .6, o creme passa de 4,5:1 até sobre branco puro. */
.banner-texto{position:absolute;left:0;right:0;bottom:0;padding:clamp(10px,1.6vw,16px);
  background:linear-gradient(to top, rgb(0 0 0 / .85) 0%, rgb(0 0 0 / .72) 70%, transparent 100%);
  font-family:var(--font-display);font-size:clamp(14px,1.5vw,19px);color:var(--fg);line-height:1.2}
/* A arte da marca já traz o título e o botão embaixo: a legenda some da vista
   (fica para leitor de tela) para não escrever por cima dela. */
.banner-item--arte .banner-texto{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ============================================================
   QUEM SOU: um palco só (.quem-palco, sticky). Os blocos entram pela
   rolagem (ligarQuem, lp2.js). O curso é curto: 100svh do palco + 160svh
   de rolagem; o último bloco entra em 79% e o resto é respiro de leitura.
   ============================================================ */
.secao-quem{position:relative;background:var(--ink-2);min-height:calc(100svh + 160 * 1svh)}

.quem-palco{position:sticky;top:var(--topo-altura);height:calc(100svh - var(--topo-altura));overflow:clip}

/* .quem-bloco é a versão "tocada pelo progresso" do .reveal, com os MESMOS
   valores de opacidade/transform -- mas .reveal é ligado por
   IntersectionObserver e acende uma vez só, e aqui a entrada de cada bloco
   precisa ser reversível quadro a quadro com a rolagem, por isso a classe
   própria. */
.quem-fase{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}
.quem-envelope{display:flex;flex-direction:column;align-items:center;gap:2px}
.quem-bloco{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.quem-bloco.visivel{opacity:1;transform:none}

.quem-cartao{width:min(640px,100%);border-radius:var(--raio-md);border:1px solid var(--border);background:var(--surface);padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:16px}
.quem-cartao-topo{display:flex;align-items:center;gap:16px}
.quem-foto{width:84px;height:84px;border-radius:50%;overflow:hidden;border:1px solid var(--border-strong);flex:0 0 auto}
/* arthur-quem.webp é retrato 9:16 (893x1600, filtro breu); num círculo de
   84px o "cover" (que enquadra pela LARGURA) sobraria quase o dobro da
   altura da caixa -- centralizado (padrão) cortava o rosto pela metade e
   sobrava paletó. object-position sobe o enquadramento pros olhos. */
.quem-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.quem-nome{font-family:var(--font-display);font-size:clamp(21px,2.2vw,26px);color:var(--fg)}
.quem-cargo{font-family:var(--font-mono);font-size:var(--t-rotulo);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-subtle);margin-top:4px}
.quem-texto p{color:var(--fg-muted);font-size:var(--t-corpo-p);line-height:var(--lh-corpo)}
.quem-texto p + p{margin-top:10px}
.quem-texto b{color:var(--fg);font-weight:500}
.quem-cartao .btn{align-self:flex-start;margin-top:4px}

@media (prefers-reduced-motion:reduce){
  /* Sem rolagem guiada: o cartão aparece inteiro, parado, em fluxo normal --
     mesma rede de segurança que .jornada já usa. ligarQuem (lp2.js) só
     acende os blocos neste modo; isto é o visual caso o laço rode mesmo
     assim. */
  .secao-quem{min-height:auto}
  .quem-palco{position:static;height:auto;overflow:visible;display:flex;flex-direction:column;padding-block:var(--secao-y)}
  .quem-fase{position:static;inset:auto}
  .quem-bloco{opacity:1;transform:none;transition:none}
}

/* ============================================================
   BARRA DE ROLAGEM: escondida, sem marcador nenhum no lugar.
   O Arthur pediu em 23/09 "eu quero a seta vermelha e nao quero barra de
   rolagem aparecendo": a "seta vermelha" era o CURSOR vermelho da LP da main
   (bloco transcrito logo abaixo), nao um marcador; o marcador lateral
   vermelho que chegou a existir saiu no mesmo dia ("sem essa barra lateral
   vermelha de scroll"). scrollbar-width/-webkit-scrollbar so ESCONDEM o
   desenho; roda, toque, teclado e arrastar continuam iguais. */
html,body,*{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar,*::-webkit-scrollbar{width:0;height:0;display:none}

/* ============================================================
   6. O CURSOR
   Os três cursores (seta, mão, texto) são SVG embutido, cada um numa
   var(--cur-*) -- nunca cursor do sistema (cursor:none não aparece em
   lugar nenhum). body{cursor:var(--cur-seta)} cobre a página inteira
   por herança; só onde se CLICA (mão) e onde se DIGITA (barra) pedem
   outro desenho. Fora desses dois grupos, nenhuma regra deste bloco
   declara `cursor`, e todo `cursor:` daqui tem que ser um `var(--cur-*)`.
   Contorno preto a 80% nos três, pra tinta rubi aparecer sobre
   qualquer fundo por trás. ATENÇÃO: `%23e14d47` é a única cor do
   arquivo fora de var() -- mudou o acento da casa, muda nas três
   variáveis abaixo junto. */
@media (hover:hover) and (pointer:fine){
  /* Só onde existe ponteiro de verdade, e as TRÊS variáveis moram
     dentro do mesmo @media: fora dele elas não existem, e um
     `var(--cur-seta)` usado por engano em toque cai no valor inválido,
     que devolve o cursor do sistema — errado de um jeito visível, não
     calado. */
  :root{
    /* SETA. Ponto quente na ponta (4 3) — o mesmo desenho que já
       existia aqui, só que agora nomeado. */
    --cur-seta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 2.5v16.2l4.3-4 2.9 6.5 2.7-1.2-2.8-6.3h5.9z' fill='%23e14d47' stroke='%23000' stroke-opacity='.8' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3,default;
    /* MÃO. Um dedo indicador apontando (a ponta, à esquerda), os
       outros três dobrados em degrau de altura e o polegar tocando a
       base — a mesma leitura da mão branca do Windows, na tinta da
       casa. Ponto quente na ponta do dedo (8 3), como o pedido descreve. */
    --cur-mao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='2' y='14' width='7' height='4.2' rx='2.1' fill='%23e14d47' stroke='%23000' stroke-opacity='.8' stroke-width='1.5' transform='rotate(-22 5.5 16.1)'/%3E%3Crect x='5' y='12' width='15' height='9' rx='4' fill='%23e14d47' stroke='%23000' stroke-opacity='.8' stroke-width='1.5'/%3E%3Crect x='17.7' y='9' width='3' height='4.3' rx='1.5' fill='%23e14d47' stroke='%23000' stroke-opacity='.8' stroke-width='1.2'/%3E%3Crect x='14.3' y='7.5' width='3.4' height='5.8' rx='1.7' fill='%23e14d47' stroke='%23000' stroke-opacity='.8' stroke-width='1.2'/%3E%3Crect x='10.5' y='6' width='3.6' height='7.3' rx='1.8' fill='%23e14d47' stroke='%23000' stroke-opacity='.8' stroke-width='1.2'/%3E%3Crect x='6' y='3' width='4' height='10.5' rx='2' fill='%23e14d47' stroke='%23000' stroke-opacity='.8' stroke-width='1.5'/%3E%3C/svg%3E") 8 3,pointer;
    /* BARRA DE DIGITAR. Um I maiúsculo com serifa em cima e embaixo —
       a mesma leitura do I-beam do sistema. Ponto quente no centro
       (12 12): aqui não existe ponta, é uma barra que pousa sobre o
       texto onde o clique vai cair. */
    --cur-texto:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M8 3h8v3h-3v12h3v3H8v-3h3V6H8z' fill='%23e14d47' stroke='%23000' stroke-opacity='.8' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 12 12,text;
  }

  body{cursor:var(--cur-seta)}
  /* `<label>` tem cursor PRÓPRIO na folha do navegador (`cursor:default` em
     todo `label[for]`, medido no Chromium): não é herança, é uma regra que
     compete com ela e vence. Sem esta linha, os quatro rótulos do formulário
     (Nome, E-mail, Celular, Senha) voltavam para o branco do sistema, o mesmo
     defeito do D4 por outra porta (só apareceu na varredura de
     `getComputedStyle`). A regra do rótulo de caixa de marcar, logo abaixo, é
     mais específica (`:has()` soma) e vence esta para o caso da caixa. */
  label{cursor:var(--cur-seta)}

  /* ONDE SE CLICA, A MÃO DA CASA.
     `a[href] *` e `button *` existem porque o texto de um rótulo pode morar
     num <span> dentro do <button> ou do <a>, e a herança sozinha não chega lá
     se o <span> pegar regra de tag depois. `select` e o rótulo de caixa de
     marcar entram por completude (a página não tem nenhum dos dois hoje):
     abrir um select ou marcar uma caixa é clique, não leitura. */
  a[href],a[href] *,button,button *,summary,[role="button"],select,
  label:has(input[type="checkbox"]){cursor:var(--cur-mao)}
  /* Desabilitado não é clicável: a seta volta, no lugar do círculo
     cortado do Windows. `.btn:disabled` (seção de botões, no topo do
     arquivo) perdeu a própria linha de cursor por causa desta regra —
     ver o comentário lá: cursor passou a ter UM dono na página
     inteira, que é este bloco. */
  button:disabled,button:disabled *{cursor:var(--cur-seta)}

  /* ONDE SE DIGITA, A BARRA DA CASA.
     Só os campos de TEXTO: os três tipos que a página usa hoje (texto,
     e-mail, senha) mais textarea, que ainda não existe mas é o mesmo
     caso do `select` acima. Radio, checkbox, range e file não entram
     aqui — quem marca ou escolhe não digita, e fica com a mão. */
  input[type="text"],input[type="email"],input[type="password"],
  textarea{cursor:var(--cur-texto)}
}

/* Quem liga alto contraste, ou ponteiro grande, ou cursor invertido no
   sistema operacional, pediu o ponteiro DELE. Nenhum @media enxerga a
   preferência de ponteiro, mas estas duas chegam perto o bastante, e
   nelas o desenho sai de cena inteiro. Este é também o interruptor de
   emergência do cursor: a mesma linha, sem @media, desliga tudo. */
@media (forced-colors:active),(prefers-contrast:more){
  body{cursor:auto}
}

/* ============================================================
   ACABAMENTO DE 23/09: borda da estátua do anel e alvos de toque
   ============================================================ */
/* A foto da estátua tem fundo quase preto, mas não o preto exato da seção:
   aparecia como um retângulo mais claro atrás dela. As bordas se dissolvem
   (laterais e topo); a base fica inteira. */
.criativos-estatua{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 100%);
  mask-composite:intersect;
}
/* Alvos de toque de 44px que a revisão de celular apontou (pré-existentes). */
.assistir-flutuante{min-height:44px;min-width:44px;justify-content:center}
.marca{min-height:44px}
@media (min-width:821px){
  .trilho-vep{gap:0}
  .trilho-vep a{min-height:44px;display:flex;align-items:center}
}
@media (max-width:820px){
  .trilho-vep a::before{top:-21px;bottom:-21px}
}

/* ============================================================
   ACABAMENTO UI/UX (24/09): F2, F5, F6 e F8 da varredura de UI/UX
   (docs/uiux/2026-09-24-varredura-landing.md). F3 já estava resolvido (ver
   .assistir-flutuante, acima); F4, decidido pelo Arthur em 25/09, é o
   último item deste bloco.
   ============================================================ */
/* F2: .ao-topo não tinha o mesmo piso de 44px que .assistir-flutuante e
   .marca já usam (bloco ACABAMENTO DE 23/09, logo acima). */
.ao-topo{min-height:44px;min-width:44px;justify-content:center}

/* F5: o ícone de três barras vira X quando a gaveta abre. O aria-expanded
   e o aria-label ("Abrir menu" <-> "Fechar menu") já existiam
   (lp2.js:396-403) -- só faltava o ícone acompanhar. A barra do meio
   (span) some; as outras duas (::before/::after) perdem o afastamento
   vertical e giram 45°/-45° até virar um X centrado. */
.menu-btn span,.menu-btn span::before,.menu-btn span::after{
  transition:transform var(--rapida) var(--ease),top var(--rapida) var(--ease),opacity var(--rapida) var(--ease);
}
.menu-btn[aria-expanded="true"] span{background:transparent}
.menu-btn[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* F6: os três "Entrar na loja" das lojas fictícias trocaram disabled por
   aria-disabled (index.html) para continuar focáveis pelo teclado.
   pointer-events:none tira clique e hover do mouse (sem onclique mesmo
   assim, já que montarLinks() só liga o botão quando data-loja-url é uma
   URL de verdade); a opacidade repete o mesmo .5 que .btn:disabled já
   usava, então o visual não muda. */
.mockup-entrar[aria-disabled="true"]{opacity:.5;pointer-events:none}

/* F8: os 5 links do rodapé tinham ~22px de altura clicável (só a
   line-height do corpo, sem padding). O gap entre eles vira padding
   dentro de cada link -- mesma régua de separação visual, mas agora
   dentro da área de toque, chegando a ~44-46px por linha. */
.rodape-nav{gap:0}
.rodape-nav a{padding-block:12px}


/* ============================================================
   ESTÁTUA DO ANEL: bordas dissolvidas (acabamento de 23/09)
   ============================================================ */
/* Estátua do anel: a base também se dissolve ("desfoque para não mostrar o
   delimitador da imagem"), e as laterais com faixa mais larga. */
.criativos-estatua{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 22%,#000 78%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 80%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 22%,#000 78%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 80%,transparent 100%);
}