/* =============================================================================
   nucleo.css — piso de design das páginas interativas (07/11/2026)
   -----------------------------------------------------------------------------
   Tirado da v5 do site do Estúdio Kronos (06/11/2026, aprovada e no ar), que
   seguiu o nível do Mindloop (Mohammad Shehadeh, MIT, via 21st.dev) e portou
   para CSS puro, sem biblioteca, estes componentes do 21st.dev:
     Morphing Scroll Navbar + Scroll Spy (menu), Border Beam (feixe do menu),
     Spotlight Card (holofote), Marquee (faixas e esteira), Scroll word reveal
     (palavras que acendem), Stack Spread (camadas 3D), Animated Beam
     Integration (rede), Typewriter (pílula do topo), Liquid Glass (vidro).
   Retematize pelos tokens de :root. Classes de página ficam na própria página.
   Cada bloco aponta para a receita em cookbook/ e para o componente em
   componentes/.
   ========================================================================== */

:root {
  color-scheme: dark;
  /* Cores: troque só aqui. Os *-rgb existem para transparências (rgba(var(--acento-rgb), .2)). */
  --fundo: #000;
  --cartao: #0C0C0C;
  --cartao-2: #141414;
  --tinta: #FFFFFF;
  --tinta-2: #ECEEF1;
  --suave: #A6A6A6;
  --linha: rgba(255, 255, 255, 0.1);
  --acento: #FF6A2B;
  --acento-rgb: 255, 106, 43;
  --acento-claro: #FFB892;
  --ouro: #C9A36A;
  --ouro-rgb: 201, 163, 106;
  --destaque: #FFD9C2;
  --particula-1: #FF8A55;
  --particula-2: #E9C995;
  /* Tipografia: duas faces e uma mono. Carregue as fontes no <head> da página. */
  --f-sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --f-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  /* Medidas */
  --lado: max(20px, env(safe-area-inset-left, 0px), min(7vw, 112px));
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font-family: var(--f-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
section { overflow-x: clip; }
a { color: inherit; }
img, video { max-width: 100%; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 6px; }
.pular { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--tinta); color: #000; text-decoration: none; font-weight: 600; }
.pular:focus { top: 12px; }

.serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; }
h1 .serif, h2 .serif, h3 .serif, .frase-grande .serif { color: var(--destaque); }
.faixa { padding-inline: var(--lado); }
.dentro { max-width: 72rem; margin: 0 auto; }
.borda { border-top: 1px solid var(--linha); }
.rotulo { margin: 0; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--suave); }
h1 { margin: 24px 0 0; font-weight: 500; font-size: clamp(3rem, 7.4vw, 6.4rem); line-height: 0.98; letter-spacing: -0.035em; max-width: 12ch; text-wrap: balance; }
h2 { margin: 0; font-weight: 500; font-size: clamp(2.5rem, 6vw, 5.6rem); line-height: 1; letter-spacing: -0.03em; text-wrap: balance; }
h2.menor { font-size: clamp(2rem, 4.1vw, 3.4rem); letter-spacing: -0.02em; }
.cabeca-secao h2 { margin-top: 20px; max-width: 52rem; }
.cabeca-secao > p:last-child { margin: 22px 0 0; max-width: 44rem; font-size: 1.08rem; line-height: 1.6; color: var(--suave); text-wrap: pretty; }
.centro { text-align: center; }
.centro .cabeca-secao h2, .centro .cabeca-secao > p:last-child { margin-inline: auto; }
.secao { padding-block: clamp(110px, 13vw, 170px); }

/* ---------- Vidro líquido (Mindloop, MIT) — componentes/vidro-liquido ---------- */
.vidro { background: rgba(255, 255, 255, 0.01); background-blend-mode: luminosity; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: none; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; }
.vidro::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 20%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.15) 80%, rgba(255, 255, 255, 0.45) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* ---------- Holofote que segue o mouse (Spotlight Card) — componentes/holofote ---------- */
[data-holofote] { background-image: radial-gradient(320px circle at var(--hx, -999px) var(--hy, -999px), rgba(var(--acento-rgb), 0.1), transparent 60%); }

/* ---------- Menu cápsula (Morphing Scroll Navbar + Scroll Spy + Border Beam) — componentes/menu-capsula ---------- */
.nav { position: fixed; z-index: 60; inset: 0 0 auto 0; padding-top: env(safe-area-inset-top, 0px); display: flex; justify-content: center; pointer-events: none; }
.nav__barra { position: relative; pointer-events: auto; width: 100%; max-width: 100%; margin-top: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px var(--lado); border-radius: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); transition: max-width 0.5s var(--ease), margin-top 0.5s var(--ease), padding 0.5s var(--ease), border-radius 0.5s var(--ease), background-color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.nav.compacto .nav__barra { max-width: min(1080px, calc(100% - 24px)); margin-top: 12px; padding: 7px 8px 7px 9px; border-radius: 999px; background: rgba(10, 10, 10, 0.74); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 20px 50px -20px rgba(0, 0, 0, 0.9); }
@property --feixe { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.nav.compacto .nav__barra::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: conic-gradient(from var(--feixe), transparent 0 72%, rgba(var(--acento-rgb), 0.9) 82%, rgba(var(--ouro-rgb), 0.85) 87%, transparent 94%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: feixe 8s linear infinite; }
.marca { display: flex; align-items: center; gap: 14px; text-decoration: none; flex: none; }
.marca__selo { position: relative; width: 56px; height: 56px; flex: none; transition: transform 0.5s var(--ease); transform-origin: left center; }
.nav.compacto .marca__selo { transform: scale(0.8); margin-right: -10px; }
.marca__selo::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--acento-rgb), 0.55), transparent 70%); filter: blur(8px); animation: respirar 3.6s ease-in-out infinite alternate; }
.marca__emblema { position: absolute; inset: 7px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #3a2a1f, #0d0907 70%); box-shadow: 0 0 0 1px rgba(var(--ouro-rgb), 0.55), 0 8px 22px -8px rgba(var(--acento-rgb), 0.75); transition: transform 0.6s var(--ease); font: italic 400 22px/1 var(--f-serif); color: var(--destaque); }
img.marca__emblema { object-fit: cover; }
.marca:hover .marca__emblema { transform: rotate(-14deg) scale(1.06); }
.marca__selo svg { position: absolute; inset: 0; width: 56px; height: 56px; transform: rotate(-90deg); overflow: visible; }
.marca__selo .orbita-marca { fill: none; stroke: rgba(var(--ouro-rgb), 0.6); stroke-width: 1.1; stroke-dasharray: 2.2 4.2; transform-box: fill-box; transform-origin: center; animation: girar 40s linear infinite; }
.marca__selo .anel { fill: none; stroke: var(--acento); stroke-width: 2.4; stroke-linecap: round; transition: stroke-dashoffset 0.12s linear; filter: drop-shadow(0 0 4px rgba(var(--acento-rgb), 0.8)); }
.marca__nome { display: grid; line-height: 1; }
.marca__nome b { display: flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 600; letter-spacing: 0.32em; }
.marca__nome b i { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: 22px; letter-spacing: 0; color: var(--destaque); }
.marca__nome small { margin-top: 7px; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ouro); }
.nav.compacto .marca__nome small { display: none; }
.nav__links { position: relative; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; }
.nav__links a { position: relative; z-index: 1; font-size: 13.5px; color: var(--suave); text-decoration: none; padding: 8px 13px; border-radius: 999px; transition: color 0.2s var(--ease); white-space: nowrap; }
.nav__links a:hover, .nav__links a[aria-current="true"] { color: var(--tinta); }
.nav__pilula { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12); transition: transform 0.45s var(--ease), width 0.45s var(--ease), opacity 0.3s; opacity: 0; }
.nav__dir { display: flex; align-items: center; gap: 8px; flex: none; }
.nav__para { font-size: 13px; padding: 9px 16px; border-radius: 999px; color: var(--tinta); white-space: nowrap; text-decoration: none; }
.nav__botao { width: 42px; height: 42px; border-radius: 50%; border: 0; color: var(--tinta); cursor: pointer; display: grid; place-items: center; flex: none; }
.nav__botao svg { width: 15px; height: 15px; }
.nav__menu { display: none; }
.nav__menu span { display: block; width: 16px; height: 1.5px; background: currentColor; margin: 4px auto; transition: transform 0.3s var(--ease), opacity 0.2s; }
.nav__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.folha-menu { position: fixed; z-index: 59; inset: 0; background: rgba(0, 0, 0, 0.93); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; align-content: center; gap: 2px; padding: 96px var(--lado) 40px; opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease); overflow-y: auto; }
.folha-menu.aberta { opacity: 1; pointer-events: auto; }
.folha-menu a { font-size: 1.55rem; font-weight: 500; letter-spacing: -0.02em; text-decoration: none; padding: 9px 0; border-bottom: 1px solid var(--linha); }
.folha-menu a .serif { color: var(--ouro); }
@media (max-width: 1120px) { .nav__links { display: none; } .nav__menu { display: grid; } }
@media (max-width: 560px) { .nav__para { display: none; } .marca__nome small { display: none; } .marca__selo { transform: scale(0.86); margin-right: -6px; } }

/* ---------- Blocos que sobem ao aparecer — data-sobe ---------- */
.js [data-sobe].esperando { opacity: 0; transform: translateY(24px); }
[data-sobe] { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }

/* ---------- Topo imersivo — cookbook/01-topo-imersivo.md ---------- */
.topo { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; --s: 0; }
.topo__fundo, .topo > video { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(calc(1 + var(--s) * 0.1)); opacity: calc(1 - var(--s) * 0.45); }
.topo > video { object-fit: cover; object-position: 62% 50%; }
/* Fundo sem arquivo: aurora em CSS (inspirado no Aurora Shader/Aurora Background do 21st.dev). Troque por <video> quando houver material. */
.topo__fundo { background: radial-gradient(60% 50% at 72% 38%, rgba(var(--acento-rgb), 0.38), transparent 70%), radial-gradient(40% 40% at 88% 70%, rgba(var(--ouro-rgb), 0.28), transparent 70%), radial-gradient(70% 60% at 30% 100%, rgba(var(--acento-rgb), 0.12), transparent 70%), var(--fundo); }
.topo__fundo::before { content: ''; position: absolute; inset: -30%; background: conic-gradient(from 0deg at 65% 45%, transparent 0 20%, rgba(var(--acento-rgb), 0.22) 30%, transparent 42%, rgba(var(--ouro-rgb), 0.18) 60%, transparent 72%); filter: blur(60px); animation: girar 38s linear infinite; }
.topo__fundo::after { content: ''; position: absolute; inset: 0; opacity: 0.08; background-image: radial-gradient(rgba(255, 255, 255, 0.9) 0.6px, transparent 0.6px); background-size: 3px 3px; mix-blend-mode: overlay; }
.topo .escuro-lado { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 40%, rgba(0, 0, 0, 0) 64%); }
.topo .escuro-baixo { position: absolute; inset: auto 0 0 0; height: 16rem; background: linear-gradient(0deg, var(--fundo), rgba(0, 0, 0, 0)); }
.topo .conteudo { position: relative; z-index: 2; width: 100%; padding-block: 150px clamp(56px, 12vh, 120px); transform: translateY(calc(var(--s) * -70px)); opacity: calc(1 - var(--s) * 1.3); }
.topo p.sub { margin: 24px 0 0; max-width: 40rem; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--tinta-2); text-wrap: pretty; }
.selo { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; font-size: 14px; color: var(--suave); }
.selo i { width: 7px; height: 7px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 4px rgba(var(--acento-rgb), 0.18); }
.pilula { margin-top: 36px; display: flex; align-items: center; gap: 8px; max-width: 40rem; padding: 8px; border-radius: 999px; }
.pilula .escrita { flex: 1; min-width: 0; padding-inline: 18px; font-size: 14px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pilula .escrita b { color: var(--tinta); font-weight: 500; }
.cursor-texto { display: inline-block; width: 1px; height: 1em; background: var(--tinta); vertical-align: -2px; margin-left: 2px; animation: piscar 0.9s steps(2) infinite; }
.botao-claro { flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; border-radius: 999px; background: var(--tinta); color: #000; font-weight: 600; font-size: 13px; letter-spacing: 0.04em; text-decoration: none; transition: transform 0.15s var(--ease); }
.botao-claro:hover { transform: scale(1.03); }
.botao-claro:active { transform: scale(0.98); }
@media (max-width: 520px) {
  .pilula { flex-direction: column; align-items: stretch; border-radius: 22px; }
  .pilula .escrita { padding: 10px 12px 4px; white-space: normal; min-height: 3.2em; }
  .botao-claro { width: 100%; }
}

/* ---------- Partículas (canvas) — data-particulas ---------- */
.particulas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

/* ---------- Sequência que acende com a rolagem — data-sequencia (cookbook/03) ---------- */
.frases-acendem { margin: 22px 0 0; display: grid; gap: 0.12em; font-size: clamp(2.1rem, 5.4vw, 4.8rem); line-height: 1.04; letter-spacing: -0.035em; font-weight: 500; }
.frases-acendem > * { --v: 1; display: block; opacity: calc(0.14 + var(--v) * 0.86); transform: translateY(calc((1 - var(--v)) * 28px)); filter: blur(calc((1 - var(--v)) * 6px)); }
.frases-acendem .forte { color: var(--tinta); }
.riscos { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 14px; max-width: 34rem; }
.riscos li { --v: 1; display: flex; align-items: baseline; gap: 14px; font-size: 1.15rem; color: var(--tinta-2); opacity: calc(0.2 + var(--v) * 0.8); }
.riscos li::before { content: '×'; color: var(--acento); font-size: 1.2em; }
.riscos li span { background-image: linear-gradient(rgba(var(--acento-rgb), 0.85), rgba(var(--acento-rgb), 0.85)); background-repeat: no-repeat; background-position: 0 58%; background-size: calc(var(--v) * 100%) 1.5px; }

/* ---------- Faixas de frases que andam (Marquee + rolagem) — data-faixa (cookbook/06) ---------- */
.frases { position: relative; overflow: hidden; padding-block: clamp(30px, 4.5vw, 56px); border-block: 1px solid var(--linha); background: radial-gradient(60% 130% at 50% 50%, rgba(var(--acento-rgb), 0.08), transparent 70%); }
.frases__linha { display: flex; width: max-content; font-weight: 600; font-size: clamp(2.1rem, 5.8vw, 5.2rem); line-height: 1.08; letter-spacing: -0.035em; white-space: nowrap; will-change: transform, translate; animation: faixa-anda 55s linear infinite; }
.frases__linha + .frases__linha { margin-top: 0.06em; }
.frases__linha span { display: inline-flex; align-items: center; gap: 0.38em; padding-right: 0.38em; }
.frases__linha span::after { content: '✦'; font-size: 0.42em; color: var(--acento); }
.frases__linha .serif { font-weight: 400; color: var(--destaque); letter-spacing: -0.02em; }
.frases__linha--vazada { animation-direction: reverse; animation-duration: 66s; color: transparent; -webkit-text-stroke: 1.4px rgba(255, 255, 255, 0.6); }
.frases__linha--vazada .serif { color: transparent; -webkit-text-stroke: 1.2px rgba(255, 217, 194, 0.8); }

/* Esteira de pílulas (ferramentas, clientes) */
.esteira { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.esteira + .esteira { margin-top: 12px; }
.esteira__trilho { display: flex; gap: 12px; width: max-content; animation: esteira 40s linear infinite; }
.esteira--volta .esteira__trilho { animation-direction: reverse; animation-duration: 46s; }
.esteira span { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; background: var(--cartao); box-shadow: 0 0 0 1px var(--linha); font-size: 15px; font-weight: 500; color: var(--tinta-2); white-space: nowrap; }
.esteira span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 10px rgba(var(--acento-rgb), 0.8); }

/* ---------- Grade de ícones em vidro que se encaixam — data-entrada (cookbook/07) ---------- */
.grade-icones { margin-top: 70px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.grade-icones article { --e: 1; position: relative; display: flex; flex-direction: column; align-items: center; border-radius: 28px; padding: 6px 4px 16px; transform: translate3d(calc((1 - var(--e)) * var(--dx, 0px)), calc((1 - var(--e)) * 100px), 0) rotate(calc((1 - var(--e)) * var(--rz, 0deg))) scale(calc(0.85 + var(--e) * 0.15)); opacity: calc(0.12 + var(--e) * 0.88); }
.grade-icones article:nth-child(5n+1) { --dx: -140px; --rz: -12deg; }
.grade-icones article:nth-child(5n+2) { --dx: -70px; --rz: -6deg; }
.grade-icones article:nth-child(5n+4) { --dx: 70px; --rz: 6deg; }
.grade-icones article:nth-child(5n+5) { --dx: 140px; --rz: 12deg; }
.icone { width: 100%; max-width: 168px; aspect-ratio: 1; border-radius: 2rem; display: grid; place-items: center; transition: transform 0.45s var(--ease); }
.icone::after { content: ''; position: absolute; inset: 20%; border-radius: 50%; z-index: -1; background: radial-gradient(circle, rgba(var(--acento-rgb), 0.3), transparent 70%); filter: blur(14px); opacity: 0.7; transition: opacity 0.4s var(--ease); }
.grade-icones article:hover .icone { transform: translateY(-6px) rotate(-2deg); }
.grade-icones article:hover .icone::after { opacity: 1; }
.icone svg { width: 46%; height: 46%; color: var(--tinta); }
.grade-icones h3 { margin: 26px 0 0; font-size: 1.05rem; font-weight: 600; text-align: center; }
.grade-icones p { margin: 8px 0 0; max-width: 15rem; font-size: 0.9rem; line-height: 1.55; color: var(--suave); text-align: center; }
@media (max-width: 1000px) { .grade-icones { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; } }
@media (max-width: 640px) { .grade-icones { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grade-icones article { --dx: 0px !important; } }

/* ---------- Cena fixa (a seção gruda e a rolagem vira tempo) — data-cena (cookbook/04) ---------- */
.cena { position: relative; height: var(--altura, 400vh); --p: 0; }
.cena__palco { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); align-items: center; gap: clamp(20px, 4vw, 64px); padding: 96px var(--lado) 40px; }
.cena__texto > p { margin: 20px 0 0; max-width: 30rem; font-size: 1.02rem; line-height: 1.6; color: var(--suave); }
.passos { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 4px; counter-reset: passo; }
.passos li { counter-increment: passo; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; padding: 10px 12px; border-radius: 12px; color: #6E6E6E; transition: color 0.3s var(--ease), background-color 0.3s var(--ease); }
.passos li::before { content: counter(passo, decimal-leading-zero); font: 500 12px/1.9 var(--f-mono); color: #5A5A5A; transition: color 0.3s; }
.passos li b { display: block; font-size: 15px; font-weight: 600; }
.passos li span { display: block; font-size: 13.5px; line-height: 1.5; margin-top: 2px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s var(--ease), opacity 0.3s; }
.passos li.feito { color: var(--suave); }
.passos li.agora { color: var(--tinta); background: rgba(255, 255, 255, 0.05); }
.passos li.agora::before { color: var(--acento); }
.passos li.agora span { max-height: 5em; opacity: 1; color: var(--suave); }
@media (max-width: 900px) {
  .cena__palco { grid-template-columns: 1fr; align-content: start; gap: 18px; padding-top: 88px; }
  .cena__texto h2 { font-size: 2rem; }
  .cena__texto > p { display: none; }
  .passos { margin-top: 14px; }
  .passos li:not(.agora) { display: none; }
}

/* ---------- Camadas 3D que se juntam (Stack Spread) — data-camadas (cookbook/05) ---------- */
.quadro3d { position: relative; width: 100%; aspect-ratio: 16 / 9; perspective: 1400px; perspective-origin: 50% 40%; transform-style: preserve-3d; transform: perspective(1600px) rotateX(calc(var(--ty, 0) * 1deg)) rotateY(calc(var(--tx, 0) * 1deg)); transition: transform 0.6s var(--ease); animation: flutuar 8s ease-in-out infinite alternate; }
.camada { position: absolute; inset: 0; border-radius: 14px; transform-style: preserve-3d; will-change: transform, opacity; }
.camada--fundo { background: radial-gradient(80% 90% at 70% 30%, rgba(var(--acento-rgb), 0.35), transparent 70%), linear-gradient(135deg, #1b140f, #070605); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.08); background-size: cover; background-position: center; }
.camada--texto { inset: auto 6% 34% 6%; height: auto; padding: 12px 14px; border-radius: 10px; background: rgba(12, 12, 12, 0.86); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); font: 500 clamp(9px, 1vw, 12.5px)/1.6 var(--f-mono); color: #CFCFCF; }
.camada--texto s { color: #6B6B6B; text-decoration-color: var(--acento); text-decoration-thickness: 1.5px; }
.camada--texto em { font-style: normal; color: var(--acento); }
.camada--legenda { inset: auto 10% 13% 10%; height: auto; text-align: center; font: 700 clamp(13px, 2vw, 26px)/1.15 var(--f-sans); color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8); }
.camada--legenda b { color: var(--destaque); }
.camada--card { inset: 9% auto auto 5%; width: 44%; height: auto; padding: clamp(10px, 1.4vw, 18px); border-radius: 14px; }
.camada--card small { display: block; font-size: clamp(8px, 0.8vw, 11px); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ouro); }
.camada--card strong { display: block; margin-top: 6px; font-weight: 500; font-size: clamp(14px, 2vw, 26px); line-height: 1.05; letter-spacing: -0.02em; }
.camada--trilha { inset: auto 5% 3.5% 5%; height: 6%; display: flex; align-items: flex-end; gap: 2px; }
.camada--trilha i { flex: 1; height: var(--h); background: linear-gradient(180deg, var(--acento), #B23A0A); border-radius: 2px; opacity: 0.72; transform-origin: bottom; animation: onda 1.3s ease-in-out infinite alternate; animation-delay: calc(var(--k, 0) * -0.09s); }
.camada--qa { inset: 6% 4% auto auto; width: auto; height: auto; display: grid; gap: 6px; justify-items: end; }
.camada--qa span { font: 500 clamp(9px, 0.95vw, 12px)/1 var(--f-mono); padding: 7px 10px; border-radius: 999px; background: rgba(10, 10, 10, 0.78); color: #E8E8E8; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); white-space: nowrap; }
.camada--qa span::before { content: '✓'; color: #7DD3A0; margin-right: 6px; }
.quadro3d__selo { position: absolute; left: 0; right: 0; bottom: -44px; text-align: center; font: 500 12px/1 var(--f-mono); letter-spacing: 0.12em; color: var(--suave); text-transform: uppercase; opacity: 0; transition: opacity 0.5s var(--ease); }
.montada .quadro3d__selo { opacity: 1; }
.montada .camada--legenda > * { animation: karaoke 4.4s ease-in-out infinite; animation-delay: calc(var(--k, 0) * 0.3s); }
@media (max-width: 900px) { .quadro3d__selo { bottom: -30px; } .cena__dir { margin-top: 40px; } }

/* ---------- Palavras que acendem com a rolagem (Scroll word reveal) — data-palavras ---------- */
.palavras { margin: clamp(56px, 7vw, 80px) auto 0; max-width: 56rem; text-align: center; font-weight: 500; letter-spacing: -0.02em; color: var(--tinta-2); text-wrap: balance; font-size: clamp(1.5rem, 3.6vw, 3rem); line-height: 1.2; }
.palavras.menor { margin-top: 40px; font-size: clamp(1.25rem, 2.5vw, 1.9rem); line-height: 1.3; }
.palavras span { opacity: var(--o, 1); transition: opacity 0.2s linear; }
.palavras span.forte { color: var(--tinta); }

/* ---------- Rede de integrações (Animated Beam Integration) — data-rede (cookbook/08) ---------- */
.rede { position: relative; width: 100%; aspect-ratio: 1; max-height: calc(100svh - 150px); margin: 0 auto; transform: perspective(1600px) rotateX(calc(var(--ty, 0) * 1deg)) rotateY(calc(var(--tx, 0) * 1deg)); transition: transform 0.6s var(--ease); }
.rede::before { content: ''; position: absolute; inset: 12%; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(var(--acento-rgb), 0.14), transparent 30%, rgba(var(--ouro-rgb), 0.12), transparent 62%); filter: blur(22px); animation: girar 20s linear infinite; pointer-events: none; }
.rede svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rede .base { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 1.2; }
.rede .liga { fill: none; stroke: var(--acento); stroke-opacity: 0.85; stroke-width: 1.6; stroke-linecap: round; }
.rede .pulso { fill: none; stroke: var(--destaque); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0.1 8.5; opacity: 0; }
.rede .pulso.ativo { opacity: 0.95; animation: grao 0.6s linear infinite; }
.rede .orbita { fill: none; stroke: rgba(var(--ouro-rgb), 0.2); stroke-dasharray: 2 6; animation: tracejar 30s linear infinite; }
.rede .orbita-2 { fill: none; stroke: rgba(var(--acento-rgb), 0.14); stroke-dasharray: 1 14; animation: tracejar 22s linear infinite reverse; }
.no { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; width: 108px; text-align: center; animation: boiar 5s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -0.45s); }
.no__caixa { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: rgba(20, 20, 20, 0.94); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1); font: 700 14px/1 var(--f-sans); letter-spacing: -0.02em; color: var(--tinta); transition: box-shadow 0.3s; }
.no__caixa img, .no__caixa svg { width: 60%; height: 60%; object-fit: contain; }
.no.ligado .no__caixa { box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.14), 0 0 0 1px rgba(var(--acento-rgb), 0.55), 0 8px 24px -8px rgba(var(--acento-rgb), 0.5); }
.no b { font-size: 12px; font-weight: 600; }
.no small { font-size: 10.5px; color: var(--suave); line-height: 1.3; }
.no b, .no small { background: rgba(0, 0, 0, 0.86); padding: 1px 6px; border-radius: 6px; }
.nucleo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 29%; aspect-ratio: 1; display: grid; place-items: center; }
.nucleo__orbe { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #3b2a1f, #0e0b08 70%); box-shadow: 0 0 0 1px rgba(var(--ouro-rgb), 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 calc(26px + var(--p) * 30px) rgba(var(--acento-rgb), 0.5); font: italic 400 clamp(28px, 5vw, 64px)/1 var(--f-serif); color: var(--destaque); }
.nucleo::after { content: ''; position: absolute; inset: -34%; border-radius: 50%; z-index: -1; background: radial-gradient(circle, rgba(var(--acento-rgb), 0.32), transparent 62%); animation: respirar 3.6s ease-in-out infinite alternate; }
.nucleo__rotulo { position: absolute; left: 50%; top: calc(100% + 16px); transform: translateX(-50%); padding: 5px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.82); text-align: center; white-space: nowrap; }
.nucleo__rotulo b { display: block; font-size: clamp(11px, 1.25vw, 15px); font-weight: 600; }
.nucleo__rotulo small { display: block; margin-top: 3px; font: 500 clamp(9px, 0.85vw, 11px)/1.3 var(--f-mono); color: var(--ouro); }
.numeros { margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 30rem; }
.numeros div { padding: 2px 0 2px 16px; border-left: 1px solid rgba(var(--acento-rgb), 0.5); }
.numeros b { display: block; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.numeros span { display: block; margin-top: 4px; font-size: 13px; color: var(--suave); line-height: 1.4; }
@media (max-width: 900px) {
  .numeros { display: none; }
  .rede { width: min(100%, 52svh); }
  .no { width: 76px; }
  .no__caixa { width: 40px; height: 40px; border-radius: 12px; font-size: 12px; }
  .no small { display: none; }
  .nucleo__rotulo { top: calc(100% + 10px); padding: 3px 8px; }
  .nucleo__rotulo b { font-size: 10.5px; }
  .nucleo__rotulo small { display: none; }
}

/* ---------- Linha do tempo que se preenche — data-linha (cookbook/09) ---------- */
.linha-tempo { position: relative; --l: 0; }
.linha-tempo::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--linha); }
.linha-tempo::after { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: linear-gradient(180deg, var(--acento), var(--ouro)); transform-origin: top; transform: scaleY(var(--l)); }
.etapa { position: relative; width: calc(50% - 44px); margin-bottom: 34px; padding: 4px 6px; --e: 1; transform: translate3d(calc((1 - var(--e)) * var(--de, -60px)), 0, 0) rotate(calc((1 - var(--e)) * var(--ge, -3deg))); opacity: calc(0.15 + var(--e) * 0.85); }
.etapa:nth-child(odd) { margin-right: auto; }
.etapa:nth-child(even) { margin-left: auto; --de: 60px; --ge: 3deg; }
.etapa::after { content: ''; position: absolute; top: 8px; width: 11px; height: 11px; border-radius: 50%; background: var(--fundo); box-shadow: 0 0 0 2px var(--acento); }
.etapa:nth-child(odd)::after { right: -50px; }
.etapa:nth-child(even)::after { left: -50px; }
.etapa header { display: flex; align-items: baseline; gap: 12px; }
.etapa header span { font: 500 12px/1 var(--f-mono); color: var(--acento); }
.etapa h3 { margin: 12px 0 0; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; }
.etapa p { margin: 8px 0 0; font-size: 0.95rem; line-height: 1.6; color: var(--suave); }
@media (max-width: 860px) {
  .linha-tempo::before, .linha-tempo::after { left: 8px; }
  .etapa, .etapa:nth-child(even) { width: auto; margin-left: 30px; margin-right: 0; --de: 40px; }
  .etapa:nth-child(odd)::after, .etapa:nth-child(even)::after { left: -27px; right: auto; }
}

/* ---------- Antes x depois (duelo) — data-entrada no .duelo (cookbook/10) ---------- */
.duelo { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.08fr); gap: 24px; align-items: stretch; --e: 1; }
.lado { border-radius: 24px; padding: clamp(22px, 3vw, 36px); }
.lado--antes { background-color: var(--cartao); box-shadow: 0 0 0 1px var(--linha); transform: translate3d(calc((1 - var(--e)) * -80px), 0, 0) rotate(calc((1 - var(--e)) * -3deg)); opacity: calc(0.2 + var(--e) * 0.8); }
.lado--depois { background: linear-gradient(180deg, rgba(var(--acento-rgb), 0.11), rgba(var(--acento-rgb), 0.02)); box-shadow: 0 0 0 1px rgba(var(--acento-rgb), calc(0.18 + var(--e) * 0.37)), 0 30px 80px -40px rgba(var(--acento-rgb), calc(var(--e) * 0.6)); transform: translate3d(calc((1 - var(--e)) * 80px), 0, 0) rotate(calc((1 - var(--e)) * 3deg)); opacity: calc(0.2 + var(--e) * 0.8); }
.lado__rotulo { margin: 0; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--suave); }
.lado--depois .lado__rotulo { color: var(--acento-claro); }
.lado h3 { margin: 14px 0 0; font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.lado ul { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.lado li { --v: 1; position: relative; padding-left: 32px; font-size: 15.5px; line-height: 1.5; color: var(--tinta-2); }
.lado--antes li { color: var(--suave); }
.lado--antes li::before { content: '×'; position: absolute; left: 4px; top: -2px; font-size: 19px; color: #8A8A8A; }
.lado--antes li span { background-image: linear-gradient(rgba(var(--acento-rgb), 0.85), rgba(var(--acento-rgb), 0.85)); background-repeat: no-repeat; background-position: 0 58%; background-size: calc(var(--v) * 100%) 1.5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lado--depois li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: rgba(var(--acento-rgb), 0.18); color: var(--acento-claro); opacity: calc(0.3 + var(--v) * 0.7); transform: scale(calc(0.4 + var(--v) * 0.6)); }
.duelo__vs { align-self: center; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font: italic 400 21px/1 var(--f-serif); color: var(--ouro); background: var(--fundo); box-shadow: 0 0 0 1px rgba(var(--ouro-rgb), 0.4); opacity: var(--e); }
@media (max-width: 860px) {
  .duelo { grid-template-columns: 1fr; gap: 16px; }
  .duelo__vs { justify-self: center; }
  .lado--antes, .lado--depois { transform: translate3d(0, calc((1 - var(--e)) * 50px), 0); }
}

/* ---------- Botão de chamada e pedido pelo WhatsApp — data-cotar (cookbook/11) ---------- */
.botao-cotar { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; padding: 18px 28px; border: 0; border-radius: 999px; cursor: pointer; font: 600 15.5px/1 var(--f-sans); letter-spacing: 0.01em; color: #170A04; text-decoration: none; background: linear-gradient(135deg, var(--destaque) 0%, var(--particula-1) 45%, var(--acento) 100%); box-shadow: 0 0 0 1px rgba(var(--acento-rgb), 0.5), 0 14px 40px -10px rgba(var(--acento-rgb), 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.65); animation: chamar 2.6s ease-in-out infinite; transition: transform 0.2s var(--ease); }
.botao-cotar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.75) 50%, transparent 70%); transform: translateX(-130%); animation: brilho 3.2s ease-in-out infinite; }
.botao-cotar svg { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.botao-cotar:hover { transform: translateY(-2px) scale(1.03); }
.botao-cotar:hover svg { transform: translateX(4px); }
.botao-cotar:active { transform: scale(0.98); }
.cotacao { width: min(520px, calc(100% - 32px)); max-height: calc(100svh - 32px); border: 0; padding: 0; border-radius: 26px; background: #0E0E0E; color: var(--tinta); box-shadow: 0 0 0 1px rgba(var(--acento-rgb), 0.35), 0 40px 100px -30px rgba(var(--acento-rgb), 0.45), 0 30px 80px rgba(0, 0, 0, 0.8); }
.cotacao::backdrop { background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cotacao[open] { animation: entrar 0.45s var(--ease) both; }
.cotacao form { position: relative; padding: 28px; display: grid; gap: 18px; }
.cotacao h3 { margin: 6px 0 0; font-size: 1.7rem; font-weight: 500; letter-spacing: -0.02em; }
.cotacao__fechar { position: absolute; right: 14px; top: 14px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #1C1C1C; color: #fff; font-size: 20px; cursor: pointer; }
.cotacao fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cotacao legend { padding: 0; margin-bottom: 10px; font-size: 13px; color: var(--suave); }
.cotacao fieldset label { position: relative; cursor: pointer; }
.cotacao fieldset input { position: absolute; opacity: 0; pointer-events: none; }
.cotacao fieldset span { display: inline-block; padding: 10px 14px; border-radius: 999px; font-size: 14px; background: #181818; box-shadow: 0 0 0 1px var(--linha); transition: background-color 0.2s var(--ease), color 0.2s, box-shadow 0.2s; }
.cotacao fieldset input:checked + span { background: rgba(var(--acento-rgb), 0.16); color: var(--destaque); box-shadow: 0 0 0 1px rgba(var(--acento-rgb), 0.65); }
.cotacao fieldset input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.cotacao__campo { display: grid; gap: 8px; font-size: 13px; color: var(--suave); }
.cotacao__campo input { padding: 12px 14px; border: 0; border-radius: 12px; background: #181818; color: var(--tinta); font: 400 15px/1.2 var(--f-sans); box-shadow: 0 0 0 1px var(--linha); }
.cotacao .botao-cotar { justify-content: center; width: 100%; margin-top: 4px; }
.cotacao__nota { margin: 0; font-size: 12.5px; color: #8F8F8F; text-align: center; }

/* ---------- Fechamento e rodapé ---------- */
.fecho { position: relative; overflow: hidden; border-top: 1px solid var(--linha); padding-block: clamp(120px, 14vw, 176px); }
.fecho > video, .fecho__fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.fecho__fundo { background: radial-gradient(50% 60% at 50% 40%, rgba(var(--acento-rgb), 0.28), transparent 70%), radial-gradient(30% 40% at 50% 45%, rgba(var(--ouro-rgb), 0.2), transparent 70%); }
.fecho .veu { position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.5); }
.fecho .dentro { position: relative; z-index: 2; max-width: 44rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.fecho h2 { margin-top: 32px; }
.fecho p { margin: 24px 0 0; max-width: 34rem; font-size: 1.125rem; line-height: 1.6; color: var(--tinta-2); }
.passos-fim { margin: 40px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.passos-fim li { padding: 13px 20px; border-radius: 12px; font-size: 14px; font-weight: 600; }
.passos-fim li span { color: var(--acento); margin-right: 8px; }
.rodape { border-top: 1px solid var(--linha); padding-block: 48px calc(48px + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.rodape__marca { margin: 0; display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--suave); }
.rodape nav { display: flex; gap: 22px; flex-wrap: wrap; }
.rodape a { font-size: 14px; color: var(--suave); text-decoration: none; }
.rodape a:hover { color: var(--tinta); }

/* ---------- Animações ---------- */
@keyframes piscar { 50% { opacity: 0; } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes feixe { to { --feixe: 360deg; } }
@keyframes respirar { from { opacity: 0.45; transform: scale(0.94); } to { opacity: 1; transform: scale(1.06); } }
@keyframes flutuar { from { translate: 0 -6px; } to { translate: 0 6px; } }
@keyframes boiar { from { translate: 0 -4px; } to { translate: 0 4px; } }
@keyframes onda { from { transform: scaleY(0.5); } to { transform: scaleY(1); } }
@keyframes karaoke { 0%, 26%, 100% { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8); } 8%, 16% { text-shadow: 0 0 18px rgba(var(--acento-rgb), 0.95), 0 2px 14px rgba(0, 0, 0, 0.8); } }
@keyframes tracejar { to { stroke-dashoffset: -400; } }
@keyframes esteira { to { transform: translateX(calc(-50% - 6px)); } }
@keyframes entrar { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes faixa-anda { to { transform: translateX(-50%); } }
@keyframes grao { to { stroke-dashoffset: -8.6; } }
@keyframes chamar { 0%, 100% { box-shadow: 0 0 0 1px rgba(var(--acento-rgb), 0.5), 0 14px 40px -10px rgba(var(--acento-rgb), 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 0 0 0 rgba(var(--acento-rgb), 0.55); } 50% { box-shadow: 0 0 0 1px rgba(var(--acento-rgb), 0.5), 0 14px 40px -10px rgba(var(--acento-rgb), 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 0 0 12px rgba(var(--acento-rgb), 0); } }
@keyframes brilho { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }

/* ---------- Movimento reduzido: só quando o visitante pede no botão do menu (decisão de 06/11/2026) ---------- */
html.calmo { scroll-behavior: auto; }
html.calmo [data-sobe], html.calmo.js [data-sobe].esperando { opacity: 1; transform: none; transition: none; }
html.calmo .palavras span { opacity: 1 !important; }
html.calmo .topo > video, html.calmo .topo__fundo, html.calmo .topo .conteudo { transform: none; opacity: 1; }
html.calmo *, html.calmo *::before, html.calmo *::after { animation: none !important; }
html.calmo .particulas { display: none; }