/* Tukai · casa mãe v3 (tukai.com.br). Site master: cada site novo da casa melhora um ponto daqui.
   Cada dobra é .creme ou .grafite. Entre cores diferentes entra uma .ponte (degradê com a luz do Kai passando).
   O Kai vive na página: núcleo no herói, luz ambiente no fundo escuro e o narrador no canto. Movimento em casa.js. */
html.casa {
  --creme: #f4efe6; --grafite: #26252c; --laranja: #ff6a1a; --laranja-claro: #ffa36b; --mola: cubic-bezier(.16, 1, .3, 1);
  --accent: #ff6a1a; --on-accent: #1b1a20;
  color-scheme: light; overflow-x: clip;
}
html.casa body { background: var(--creme); overflow-x: clip; }
.creme { --fundo: var(--creme); --texto: #26252c; --mudo: #6e6a74; --linha: #e2d8c8; --cartao: #fbf8f2; --destaque: #b9480c; }
.grafite { --fundo: var(--grafite); --texto: #f1ece3; --mudo: #b3aeb8; --linha: rgba(241, 236, 227, .14); --cartao: rgba(241, 236, 227, .05); --destaque: #ffa36b; }
.creme, .grafite { background: var(--fundo); color: var(--texto); --fg: var(--texto); --muted: var(--mudo); --line: var(--linha); --surface: var(--cartao); --accent-ink: var(--destaque); }

.dobra { position: relative; padding-block: clamp(110px, 16vh, 180px); }
.dobra.cheia { min-height: 100svh; display: grid; align-content: center; }
.centro { text-align: center; }
.centro > * { margin-inline: auto; }
.dobra h2 { font-size: clamp(36px, 6vw, 76px); line-height: 1; max-width: 16ch; letter-spacing: -.035em; }
.dobra h2.gigante { font-size: clamp(48px, 9vw, 132px); line-height: .94; max-width: 13ch; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 700 12px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--destaque); margin: 0 0 22px; }
.kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--laranja); box-shadow: 0 0 12px var(--laranja); animation: pulsa 2.4s ease-in-out infinite; }
.lead { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.55; color: var(--mudo); max-width: 34em; margin: 26px 0 0; }
.centro .lead { margin-inline: auto; }
@keyframes pulsa { 50% { box-shadow: 0 0 2px var(--laranja); opacity: .6; } }

/* ---------- pontes: troca suave entre creme e grafite ---------- */
.ponte { height: 46vh; position: relative; overflow: hidden; pointer-events: none; }
.ponte.cg { background: linear-gradient(var(--creme), #cfc4b6 30%, #5a4f4a 62%, var(--grafite)); }
.ponte.gc { background: linear-gradient(var(--grafite), #5a4f4a 38%, #cfc4b6 70%, var(--creme)); }
.ponte::after { content: ""; position: absolute; left: 50%; top: 50%; width: 70vmax; height: 30vh; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 106, 26, .35), transparent); opacity: var(--pv, .4); transform: translateX(calc((var(--pv, .5) - .5) * 40vw)); }

/* ---------- topo ---------- */
.topo-fixo { position: fixed; inset: 0 0 auto; z-index: 60; transition: background-color .5s, box-shadow .5s, color .5s; color: #26252c; }
html[data-topo="grafite"] .topo-fixo { color: #f1ece3; }
.topo-fixo.rolou { background: color-mix(in srgb, var(--creme) 78%, transparent); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 1px 0 rgba(38, 37, 44, .08); }
html[data-topo="grafite"] .topo-fixo.rolou { background: color-mix(in srgb, var(--grafite) 78%, transparent); box-shadow: 0 1px 0 rgba(241, 236, 227, .08); }
.topo-fixo .topo { padding-block: 16px; flex-wrap: nowrap; }
.topo-fixo .marca, .topo-fixo .menu a:not(.botao) { color: inherit; }
.topo .menu { align-items: center; }
.topo .menu a:not(.botao) { position: relative; }
.topo .menu a:not(.botao)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--laranja); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--mola); }
.topo .menu a:not(.botao):hover::after { transform: scaleX(1); transform-origin: left; }
.topo .botao { padding: 11px 16px; font-size: 14px; border-radius: 10px; color: var(--on-accent); }
.barra-leitura { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--laranja); box-shadow: 0 0 10px var(--laranja); transform-origin: 0 50%; transform: scaleX(var(--lido, 0)); }
@media (max-width: 760px) { .topo .menu a:not(.botao) { display: none; } }

/* ---------- botões: brilho que passa e ímã ---------- */
.botao { position: relative; overflow: hidden; transition: transform .35s var(--mola), box-shadow .35s; will-change: transform; }
.botao::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--mola); }
.botao:hover::after { transform: translateX(120%); }
.botao:not(.sec):hover { box-shadow: 0 14px 34px -12px rgba(255, 106, 26, .7); }
.botao.sec { border-color: var(--linha); color: var(--texto); }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.centro .ctas { justify-content: center; }
.seta { display: inline-block; transition: transform .35s var(--mola); }
a:hover .seta { transform: translateX(5px); }

/* ---------- títulos que montam palavra por palavra (entram e saem) ---------- */
[data-letras] .pl { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .02em .1em; margin: -.06em -.02em -.1em; }
[data-letras] .pl > span { display: inline-block; transition: transform 1s var(--mola), opacity .6s; transition-delay: calc(var(--i) * 55ms); }
html.casa-js [data-letras]:not(.on) .pl > span { transform: translateY(110%) rotate(6deg); opacity: 0; }
[data-letras] .quente { color: var(--destaque); }

/* ---------- encaixe: entra de baixo e sai por cima conforme a rolagem ---------- */
html.casa-js [data-enc] { opacity: calc(.08 + var(--e, 1) * .92); transform: translateY(calc((1 - var(--e, 1)) * var(--enc-d, 60px))) scale(calc(.965 + var(--e, 1) * .035)); }

/* ---------- palavra que troca ---------- */
.gira { position: relative; display: inline-grid; vertical-align: bottom; color: var(--destaque); transition: width .6s var(--mola); white-space: nowrap; }
.gira > span { grid-area: 1 / 1; transition: transform .7s var(--mola), opacity .5s; }
.gira > span.sai { transform: translateY(-80%) rotateX(70deg); opacity: 0; }
.gira > span.entra { transform: translateY(80%) rotateX(-70deg); opacity: 0; }
.gira::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .1em; border-radius: .1em; background: var(--laranja); opacity: .35; transform-origin: left; animation: risca 2.6s var(--mola) infinite; }
@keyframes risca { 0% { transform: scaleX(0); } 30%, 80% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }

/* ---------- dicas (passa o mouse ou toca) ---------- */
.dica { all: unset; position: relative; cursor: help; border-bottom: 2px dotted currentColor; text-decoration: none; display: inline; }
.dica::after { content: "?"; display: inline-grid; place-items: center; width: 1.05em; height: 1.05em; margin-left: .12em; border-radius: 50%; font: 800 .5em/1 var(--font-body); vertical-align: super; background: var(--laranja); color: var(--on-accent); }
.dica .balao, .chip .balao { position: absolute; left: 50%; bottom: calc(100% + 14px); z-index: 30; width: max-content; max-width: min(300px, 80vw); padding: 14px 16px; border-radius: 14px; background: #1c1b21; color: #f1ece3; font: 500 15px/1.45 var(--font-body); letter-spacing: 0; text-align: left; text-transform: none; white-space: normal;
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 106, 26, .35); pointer-events: none; opacity: 0; transform: translate(-50%, 8px) scale(.96); transition: opacity .25s, transform .35s var(--mola); }
.dica .balao b, .chip .balao b { display: block; font: 800 13px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: #ffa36b; margin-bottom: 6px; }
.dica .balao::after { content: ""; position: absolute; left: 50%; top: 100%; translate: -50% 0; border: 8px solid transparent; border-top-color: #1c1b21; }
.dica:hover .balao, .dica:focus-visible .balao, .dica.aberta .balao { opacity: 1; transform: translate(-50%, 0) scale(1); }
.dica.esq .balao { left: 0; transform: translate(0, 8px) scale(.96); }
.dica.esq:hover .balao, .dica.esq.aberta .balao, .dica.esq:focus-visible .balao { transform: none; }
.dica.esq .balao::after { left: 24px; }

/* ---------- palavras gigantes de fundo (parallax) ---------- */
.fundo-palavra { position: absolute; z-index: 0; pointer-events: none; user-select: none; font: 800 clamp(120px, 22vw, 340px)/.8 var(--font-display); letter-spacing: -.06em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px var(--linha); opacity: .9; transform: translate3d(var(--px, 0), var(--py, 0), 0); }
.dobra > .wrap, .dobra > .gruda { position: relative; z-index: 1; }

/* ---------- o Kai: luz ambiente, narrador ---------- */
.luz-ambiente { position: fixed; z-index: 45; left: 0; top: 0; width: 46vmax; height: 46vmax; margin: -23vmax 0 0 -23vmax; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 106, 26, .26), rgba(255, 106, 26, .08) 40%, transparent 68%); transform: translate3d(var(--lx, 70vw), var(--ly, 40vh), 0); animation: respira 5s ease-in-out infinite; }
@keyframes respira { 50% { opacity: .55; } }
.narrador { position: fixed; z-index: 55; left: max(16px, env(safe-area-inset-left)); bottom: 40vh; display: flex; align-items: flex-end; gap: 12px; pointer-events: none; }
.narrador .bola { pointer-events: auto; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  background: radial-gradient(circle at 35% 30%, #ffd2b0, #ff6a1a 45%, #c2410c 100%); box-shadow: 0 0 0 4px rgba(255, 106, 26, .18), 0 0 30px rgba(255, 106, 26, .7); animation: bate 2.6s ease-in-out infinite; }
.narrador .bola:hover { transform: scale(1.08); }
@keyframes bate { 0%, 100% { box-shadow: 0 0 0 4px rgba(255, 106, 26, .18), 0 0 26px rgba(255, 106, 26, .6); } 50% { box-shadow: 0 0 0 10px rgba(255, 106, 26, .06), 0 0 46px rgba(255, 106, 26, .95); } }
.narrador .fala { pointer-events: auto; max-width: min(200px, calc(100vw - 100px)); padding: 12px 16px; border-radius: 16px 16px 16px 4px; background: #1c1b21; color: #f1ece3; font: 600 14px/1.45 var(--font-body);
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 106, 26, .3); opacity: 0; transform: translateY(10px) scale(.95); transform-origin: 0 100%; transition: opacity .3s, transform .45s var(--mola); }
.narrador .fala b { color: #ffa36b; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; display: block; margin-bottom: 3px; }
.narrador.falando .fala { opacity: 1; transform: none; }
.narrador.calado .fala { display: none; }
.narrador { transition: opacity .5s, translate .6s var(--mola); }
.narrador.escondido { opacity: 0; translate: -24px 0; }
.narrador.escondido * { pointer-events: none; }
.narrador .cursor { display: inline-block; width: 2px; height: 1em; background: #ffa36b; vertical-align: -2px; margin-left: 2px; animation: pisca .8s steps(1) infinite; }
@keyframes pisca { 50% { opacity: 0; } }

/* ---------- 1. herói com o núcleo do Kai ---------- */
.heroi { min-height: 100svh; padding-block: 120px 80px; display: grid; align-items: center; }
.heroi .grade { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; }
.heroi h1 { font-size: clamp(46px, 7.4vw, 104px); line-height: .96; font-weight: 800; letter-spacing: -.045em; margin: 22px 0 0; }
.heroi h1 em { font-style: normal; color: var(--destaque); }
.heroi .gira-linha { font: 700 clamp(22px, 2.6vw, 34px)/1.25 var(--font-display); letter-spacing: -.02em; margin: 28px 0 0; min-height: 1.25em; }
/* casa mãe: herói escuro, só a frase, na tela toda */
.heroi.manifesto { position: relative; overflow: hidden; padding-block: 110px 90px; }
.heroi.manifesto::before { content: ""; position: absolute; left: -10vw; bottom: -30vh; width: 80vw; height: 80vh; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 106, 26, .22), transparent); }
.heroi.manifesto .wrap { position: relative; width: 100%; max-width: 1320px; }
.heroi.manifesto h1 { font-size: clamp(54px, 11.2vw, 190px); line-height: .9; letter-spacing: -.055em; margin: 0; max-width: 11ch; text-wrap: balance; }
.heroi.manifesto .gira-linha { font-size: clamp(20px, 2.4vw, 32px); margin-top: clamp(28px, 4vw, 48px); color: var(--mudo); }
.heroi.manifesto .ctas { margin-top: clamp(26px, 3.4vw, 40px); }
.orbita { position: relative; aspect-ratio: 1; width: min(100%, 520px); margin-inline: auto; perspective: 900px; }
.orbita .palco { position: absolute; inset: 0; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .8s var(--mola); }
.orbita .anel { position: absolute; inset: var(--in); border-radius: 50%; border: 1.5px dashed rgba(38, 37, 44, .18); animation: gira var(--vel) linear infinite; }
.orbita .anel.contra { animation-direction: reverse; }
.orbita:hover .anel, .orbita:focus-within .anel { animation-play-state: paused; }
/* o anel e o chip sob o mouse vêm para a frente: o balão não pode ficar atrás do Kai nem dos outros chips */
/* o anel é um círculo do tamanho da órbita: ele não pode pegar o mouse, senão cobre os chips do anel de dentro */
.orbita .anel { z-index: 1; pointer-events: none; }
.orbita .chip { pointer-events: auto; }
.orbita .nucleo { z-index: 2; }
.orbita .anel:hover, .orbita .anel:focus-within, .orbita .anel:has(.chip.aberta) { z-index: 5; }
.orbita .sat:hover, .orbita .sat:focus-within, .orbita .sat:has(.chip.aberta) { z-index: 5; }
.orbita .chip .balao { z-index: 10; }
.orbita .anel .sat { position: absolute; left: calc(50% + 50% * cos(var(--a))); top: calc(50% + 50% * sin(var(--a))); translate: -50% -50%; }
.orbita .chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 7px; border-radius: 999px; background: #fbf8f2; color: #26252c; font: 700 13px/1 var(--font-display); white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgba(38, 37, 44, .5), 0 0 0 1px rgba(38, 37, 44, .08); animation: gira var(--vel) linear infinite reverse; cursor: help; }
.orbita .anel.contra .chip { animation-direction: normal; }
.orbita:hover .chip, .orbita:focus-within .chip { animation-play-state: paused; }
.orbita .chip i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); display: grid; place-items: center; font-style: normal; font-size: 11px; color: #1b1a20; }
.orbita .chip .balao { bottom: auto; top: calc(100% + 12px); }
.orbita .chip .balao::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #1c1b21; }
.orbita .chip:hover .balao, .orbita .chip:focus-visible .balao, .orbita .chip.aberta .balao { opacity: 1; transform: translate(-50%, 0) scale(1); }
@keyframes gira { to { transform: rotate(360deg); } }
.nucleo { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffe1c8 0%, #ff8a3d 28%, #ff6a1a 52%, #b8400c 100%);
  box-shadow: 0 0 0 14px rgba(255, 106, 26, .1), 0 0 80px 10px rgba(255, 106, 26, .55), inset -12px -16px 30px rgba(120, 30, 0, .35); animation: nucleo 3.2s ease-in-out infinite; }
.nucleo span { position: absolute; inset: 0; display: grid; place-items: center; font: 800 clamp(22px, 3vw, 34px)/1 var(--font-display); color: #1b1a20; letter-spacing: -.03em; }
@keyframes nucleo { 50% { box-shadow: 0 0 0 26px rgba(255, 106, 26, .05), 0 0 120px 24px rgba(255, 106, 26, .7), inset -12px -16px 30px rgba(120, 30, 0, .35); scale: 1.04; } }
.rolar { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; font: 700 11px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mudo); display: grid; justify-items: center; gap: 10px; }
.rolar::after { content: ""; width: 2px; height: 38px; background: linear-gradient(var(--laranja), transparent); animation: desce 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes desce { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- faixa que corre ---------- */
.faixa { background: var(--grafite); color: #f1ece3; padding: 20px 0; overflow: hidden; rotate: -2deg; margin: 0 -20px; position: relative; z-index: 3; box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .5); }
.faixa .trilho { display: flex; width: max-content; animation: corre 34s linear infinite; font: 800 clamp(22px, 3.4vw, 36px)/1 var(--font-display); letter-spacing: -.02em; white-space: nowrap; }
.faixa .trilho span { display: inline-flex; align-items: center; gap: 34px; padding-right: 34px; transition: color .3s; }
.faixa .trilho span:hover { color: var(--laranja-claro); }
.faixa .trilho span::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--laranja); box-shadow: 0 0 14px var(--laranja); }
.faixa:hover .trilho { animation-play-state: paused; }
@keyframes corre { to { transform: translateX(-50%); } }
.faixa-espaco { background: var(--creme); padding-block: 40px; }

/* ---------- definição + mini cartões ---------- */
.mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 64px; }
.mini article { border-radius: 20px; padding: 26px; background: var(--cartao); border: 1px solid var(--linha); transition: transform .5s var(--mola), border-color .4s; }
.mini article:hover { border-color: rgba(255, 106, 26, .5); }
.mini .av { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font: 800 20px/1 var(--font-display); color: #1b1a20; background: var(--c); margin-bottom: 18px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 20%, transparent); }
.mini h3 { font-size: 24px; margin-bottom: 6px; }
.mini p { margin: 0; color: var(--mudo); font-size: 15px; }

/* ---------- dobras fixas ---------- */
[data-gruda] { padding-block: 0; }
[data-gruda] > .gruda { position: sticky; top: 0; height: 100svh; overflow: hidden; grid-template-columns: minmax(0, 1fr); }
[data-gruda] > .gruda > .wrap { width: 100%; }

/* ---------- logo que se abre ---------- */
.abre { height: 300vh; }
.abre .gruda { display: grid; place-items: center; }
.abre .kick { position: absolute; top: 18vh; left: 0; right: 0; text-align: center; font: 700 12px/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mudo); opacity: calc(1 - var(--p, 0) * 2.4); }
.abre .wm { position: relative; font: 800 clamp(96px, 24vw, 340px)/.9 var(--font-display); letter-spacing: -.055em; color: var(--grafite); display: flex; }
.abre .wm .l { display: inline-block; --k: clamp(0, calc((var(--p, 0) - var(--i) * .06) / .16), 1);
  opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 55%)) rotate(calc((1 - var(--k)) * -14deg)) scale(calc(.8 + var(--k) * .2)); transform-origin: 50% 100%; }
.abre .wm .l.i { position: relative; }
.abre .pt { position: absolute; right: .02em; top: .02em; width: .19em; height: .19em; border-radius: 50%; background: var(--laranja);
  --g: clamp(0, calc((var(--p, 0) - .36) / .12), 1);
  box-shadow: 0 0 calc(var(--g) * .5em) calc(var(--g) * .12em) rgba(255, 106, 26, .9), 0 0 calc(var(--g) * 1.6em) calc(var(--g) * .5em) rgba(255, 106, 26, .35); }
.abre .cortina { position: absolute; inset: 0; background: var(--grafite); color: #f1ece3; display: grid; place-items: center; text-align: center; padding: 0 24px;
  --c: clamp(0, calc((var(--p, 0) - .5) / .32), 1); clip-path: circle(calc(var(--c) * 150vmax) at var(--cx, 70%) var(--cy, 45%)); }
.abre .cortina::before { content: ""; position: absolute; left: var(--cx, 70%); top: var(--cy, 45%); width: 60vmax; height: 60vmax; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 106, 26, .28), transparent 62%); opacity: calc(var(--c) * 1.4 - .2); }
.abre .cortina p { position: relative; margin: 0; font: 800 clamp(32px, 5.6vw, 80px)/1.08 var(--font-display); letter-spacing: -.035em; }
.abre .cortina .linha { display: block; }
.abre .cortina em { font-style: normal; }
/* a frase inteira já está lá, apagada; cada palavra acende na sua vez (sobe de leve, sem girar, então a linha não entorta) */
.abre .cortina .pw { display: inline-block; position: relative; --t: clamp(0, calc((var(--p, 0) - .64 - var(--j) * .02) / .07), 1);
  opacity: calc(.13 + var(--t) * .87); transform: translateY(calc((1 - var(--t)) * .14em)); filter: blur(calc((1 - var(--t)) * 3px)); }
.abre .cortina .pw.q { color: #ffa36b; text-shadow: 0 0 calc(var(--t) * 34px) rgba(255, 106, 26, calc(var(--t) * .55)); }
.abre .cortina .pw.fim::after { content: ""; position: absolute; left: 0; right: .12em; bottom: .02em; height: .08em; border-radius: .05em; background: var(--laranja); box-shadow: 0 0 14px var(--laranja);
  transform-origin: left; transform: scaleX(clamp(0, calc((var(--p, 0) - .95) / .05), 1)); }

/* ---------- Ninho agora ---------- */
.agora .grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.painel { background: #1c1b21; color: #f1ece3; border-radius: 22px; padding: 22px; font-family: var(--font-mono); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(241, 236, 227, .08); }
.painel .cab { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-bottom: 14px; gap: 10px; }
.painel ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.painel li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border-radius: 9px; background: rgba(255, 255, 255, .04); font-size: 13px; transition: background-color .3s, transform .4s var(--mola); }
.painel li:hover { background: rgba(255, 106, 26, .12); transform: translateX(6px); }
.painel li b { font-family: var(--font-display); font-size: 14px; }
.painel .n { width: 34px; height: 28px; border-radius: 6px; }
.painel .dots { display: flex; gap: 3px; }
.painel .dots i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .35); }
.painel .dots i.on { background: #3fd68f; border-color: #3fd68f; animation: vivo 2s ease-in-out infinite; animation-delay: calc(var(--d, 0) * 200ms); }
@keyframes vivo { 50% { box-shadow: 0 0 8px #3fd68f; } }
.painel .rodape { margin-top: 14px; font-size: 12px; opacity: .75; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.painel .rodape a { color: #ffa36b; }
.numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.numero { border: 1px solid var(--linha); border-radius: 18px; padding: 20px; background: var(--cartao); }
.numero b { display: block; font: 800 clamp(40px, 4.6vw, 62px)/1 var(--font-display); letter-spacing: -.04em; color: var(--destaque); font-variant-numeric: tabular-nums; }
.numero span { display: block; margin-top: 8px; font-size: 13px; color: var(--mudo); line-height: 1.35; }

/* ---------- tese ---------- */
.tese { height: 380vh; }
.tese .gruda { display: grid; align-content: center; }
.tese .kicker { position: absolute; top: 16vh; }
.tese .frases { position: relative; min-height: 4.4em; font: 800 clamp(36px, 6vw, 84px)/1.03 var(--font-display); letter-spacing: -.035em; }
.tese .frase { position: absolute; inset: 0 auto auto 0; max-width: 16ch; margin: 0; pointer-events: none; }
.tese .w { display: inline-block; opacity: 0; transform: translateY(.5em) rotate(4deg); filter: blur(6px); transition: opacity .5s, transform .8s var(--mola), filter .6s, color .4s; }
.tese .w.on { opacity: 1; transform: none; filter: none; }
.tese .frase.saiu .w { opacity: 0; transform: translateY(-.5em) rotate(-3deg); filter: blur(6px); transition-delay: 0ms !important; }
.tese .w.quente { position: relative; }
.tese .w.quente.on { color: #ffa36b; }
.tese .w.quente::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .08em; background: var(--laranja); border-radius: .05em; transform: scaleX(0); transform-origin: left; transition: transform .7s var(--mola) .25s; }
.tese .w.quente.on::after { transform: scaleX(1); }
.tese .contador { position: absolute; bottom: 14vh; display: flex; gap: 8px; }
.tese .contador i { width: 40px; height: 4px; border-radius: 4px; background: var(--linha); overflow: hidden; position: relative; }
.tese .contador i::after { content: ""; position: absolute; inset: 0; background: var(--laranja); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
.tese .rodape-tese { position: absolute; bottom: 13vh; right: max(20px, calc((100vw - 1120px) / 2 + 20px)); max-width: 24em; margin: 0; color: var(--mudo); font-size: 15px; text-align: right; }

/* ---------- casas: o prédio andar por andar ---------- */
.casas-fixa { height: 440vh; }
.casas-fixa .gruda { display: grid; align-items: center; }
.casas-fixa .grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 64px; align-items: center; }
.detalhes { position: relative; min-height: 440px; }
.detalhe { position: absolute; inset: 0 0 auto; opacity: 0; transform: translateY(40px); transition: opacity .5s, transform .8s var(--mola); pointer-events: none; }
.detalhe.on { opacity: 1; transform: none; pointer-events: auto; }
.detalhe.antes { transform: translateY(-40px); }
.detalhe .andar-n { font: 700 12px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mudo); }
.detalhe h3 { font-size: clamp(40px, 5vw, 68px); line-height: 1; letter-spacing: -.035em; margin: 14px 0 18px; }
.detalhe p { color: var(--mudo); font-size: 18px; margin: 0 0 20px; max-width: 30em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.chips li { padding: 8px 14px; border-radius: 999px; background: var(--cartao); border: 1px solid var(--linha); font: 700 14px/1 var(--font-display); transition: transform .4s var(--mola), background-color .3s; }
.chips li:hover { transform: translateY(-3px); background: rgba(255, 106, 26, .14); }
.predio { display: grid; gap: 10px; perspective: 900px; }
.andar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 22px 24px; border-radius: 16px; border: 2px solid var(--linha); background: var(--cartao); font: 800 22px/1 var(--font-display);
  transition: transform .7s var(--mola), border-color .4s, background-color .4s, color .4s, box-shadow .5s, opacity .5s; opacity: .45; transform: translateX(0) scale(.97); }
.andar small { font: 700 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mudo); }
.andar.on { opacity: 1; border-color: var(--laranja); background: var(--grafite); color: #f1ece3; transform: translateX(-18px) scale(1.02); box-shadow: 0 24px 50px -24px rgba(255, 106, 26, .6); }
.andar.on small { color: #ffa36b; }
.andar.feito { opacity: .8; }
.chao { height: 10px; margin: 6px -14px 0; border-radius: 0 0 14px 14px; background: repeating-linear-gradient(90deg, var(--texto) 0 14px, transparent 14px 22px); opacity: .2; }
.kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 22px; max-width: 520px; }
.kanban div { border-radius: 10px; background: var(--cartao); border: 1px solid var(--linha); padding: 8px; min-height: 92px; font: 700 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mudo); position: relative; }
.kanban .cartao-k { z-index: 3; position: absolute; left: 8px; right: 8px; top: 30px; height: 46px; border-radius: 8px; background: var(--grafite); color: #f1ece3; font: 700 11px/1.2 var(--font-display); letter-spacing: 0; text-transform: none; padding: 7px; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5); }
.kanban .move { animation: anda 7s var(--mola) infinite; }
.kanban .move i { display: block; font-style: normal; font-size: 9px; font-family: var(--font-mono); color: #ffa36b; margin-top: 4px; }
@keyframes anda { 0%, 18% { transform: translateX(0); } 25%, 43% { transform: translateX(calc(100% + 16px + 8px)); } 50%, 68% { transform: translateX(calc(200% + 32px + 16px)); } 75%, 100% { transform: translateX(calc(300% + 48px + 24px)); } }

/* ---------- combinado ---------- */
.combinado blockquote { margin: 0; font: 800 clamp(40px, 7vw, 100px)/.98 var(--font-display); letter-spacing: -.045em; max-width: 14ch; }
.combinado blockquote .quente { color: var(--destaque); }
.combinado p { font-size: clamp(18px, 2vw, 24px); color: var(--mudo); max-width: 26em; margin: 32px 0 0; }

/* ---------- como: a conversa no Telegram ---------- */
.conversa { height: 420vh; }
.conversa .gruda { display: grid; align-items: center; }
.conversa .grade { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.etapas { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: e; }
.etapas li { counter-increment: e; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border-radius: 14px; opacity: .4; transition: opacity .4s, background-color .4s, transform .6s var(--mola); }
.etapas li::before { content: counter(e); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--linha); font: 800 17px/1 var(--font-display); transition: all .4s; }
.etapas li b { display: block; font: 800 20px/1.1 var(--font-display); }
.etapas li span { color: var(--mudo); font-size: 14px; }
.etapas li.on { opacity: 1; background: var(--cartao); transform: translateX(8px); }
.etapas li.on::before { background: var(--laranja); border-color: var(--laranja); color: var(--on-accent); box-shadow: 0 0 22px rgba(255, 106, 26, .6); }
.etapas li.feito { opacity: .75; }
.etapas li.feito::before { background: transparent; border-color: var(--laranja); color: var(--laranja-claro); }
.celular { width: min(100%, 420px); margin-inline: auto; border-radius: 34px; padding: 12px; background: #111014; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(241, 236, 227, .1); }
.celular .tela-tg { border-radius: 24px; background: #17161b; overflow: hidden; }
.celular .cab-tg { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #1f1e24; font: 700 14px/1.2 var(--font-display); }
.celular .cab-tg .bola-mini { width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd2b0, #ff6a1a 50%, #c2410c); box-shadow: 0 0 14px rgba(255, 106, 26, .6); }
.celular .cab-tg small { display: block; font: 500 11px/1.2 var(--font-body); color: #3fd68f; }
.msgs { padding: 16px; display: grid; gap: 10px; align-content: end; min-height: 430px; }
.msg { max-width: 86%; padding: 10px 13px; border-radius: 14px; font: 500 14px/1.4 var(--font-body); color: #f1ece3; background: #26252c; opacity: 0; transform: translateY(16px) scale(.96); transform-origin: 0 100%; transition: opacity .35s, transform .5s var(--mola); }
.msg.eu { justify-self: end; background: #2f5d46; border-bottom-right-radius: 4px; transform-origin: 100% 100%; font-family: var(--font-mono); font-size: 13px; }
.msg.kai { border-bottom-left-radius: 4px; }
.msg.vera { border-bottom-left-radius: 4px; box-shadow: inset 3px 0 0 #c75ad6; }
.msg b { display: block; font: 700 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 5px; color: #ffa36b; }
.msg.vera b { color: #e3a5ee; }
.msg.on { opacity: 1; transform: none; }
.msg .selo-v { display: inline-block; padding: 2px 7px; border-radius: 5px; font: 800 11px/1.4 var(--font-mono); }
.msg .selo-v.volta { background: rgba(255, 106, 26, .2); color: #ffa36b; }
.msg .selo-v.lib { background: rgba(63, 214, 143, .18); color: #3fd68f; }
.digitando { justify-self: start; display: none; gap: 4px; padding: 12px 14px; border-radius: 14px; background: #26252c; }
.digitando.on { display: flex; }
.digitando i { width: 6px; height: 6px; border-radius: 50%; background: #b3aeb8; animation: pula 1s ease-in-out infinite; }
.digitando i:nth-child(2) { animation-delay: .15s; } .digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pula { 50% { transform: translateY(-4px); opacity: .5; } }
.exemplo { font: 700 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mudo); text-align: center; margin-top: 14px; }

/* ---------- Vera ---------- */
.vera .grade { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: center; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.checks > div { padding: 18px 20px; border-radius: 16px; border: 1px solid var(--linha); background: var(--cartao); font: 800 19px/1.2 var(--font-display); transition: transform .5s var(--mola), border-color .3s; }
.checks > div:hover { transform: translateY(-4px); border-color: rgba(255, 106, 26, .5); }
.checks > div span { display: block; margin-top: 6px; font: 500 14px/1.45 var(--font-body); color: var(--mudo); }
.carimbos { position: relative; height: 340px; }
.carimbo { position: absolute; padding: 18px 30px; border: 5px solid currentColor; border-radius: 14px; font: 800 clamp(34px, 4.6vw, 60px)/1 var(--font-mono); letter-spacing: .06em; mix-blend-mode: normal; opacity: 0; transform: scale(2.2) rotate(var(--r)); transition: opacity .2s, transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.carimbo.lib { color: #3fd68f; left: 4%; top: 12%; --r: -8deg; }
.carimbo.volta { color: #ff8a3d; right: 6%; bottom: 10%; --r: 7deg; transition-delay: .45s; }
.vera.on .carimbo { opacity: .95; transform: scale(1) rotate(var(--r)); }

/* ---------- portfólio ---------- */
.porto { padding-block: 0; }
.porto .gruda { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 36px; }
.porto .cab-porto { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.porto .cab-porto .lead { margin: 0; max-width: 26em; }
.porto .trilha { display: flex; gap: 24px; padding: 6px max(20px, calc((100vw - 1120px) / 2 + 20px)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.porto .trilha::-webkit-scrollbar { display: none; }
html.casa-js .porto.horizontal { height: var(--altura, 300vh); }
html.casa-js .porto.horizontal .trilha { overflow: visible; transform: translateX(calc(var(--p, 0) * var(--dist, 0px) * -1)); will-change: transform; }
.obra { flex: 0 0 min(440px, 84vw); scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; border-radius: 22px; background: var(--cartao); border: 1px solid var(--linha); color: inherit; text-decoration: none; overflow: hidden;
  transition: transform .6s var(--mola), box-shadow .5s, border-color .4s; transform: perspective(900px) rotateY(var(--ty, 0deg)) rotateX(var(--tx, 0deg)); }
.obra:hover { box-shadow: 0 40px 70px -36px rgba(38, 37, 44, .55); border-color: rgba(255, 106, 26, .55); }
.obra .tela { aspect-ratio: 16 / 10; position: relative; overflow: hidden; background: #ddd; }
.obra .tela .barra-nav { position: absolute; inset: 0 0 auto; z-index: 2; height: 24px; display: flex; align-items: center; gap: 5px; padding: 0 10px; background: rgba(28, 27, 33, .82); backdrop-filter: blur(6px); }
.obra .tela .barra-nav i { width: 7px; height: 7px; border-radius: 50%; background: #5d5a63; }
.obra .tela .barra-nav i:first-child { background: #ff6a1a; }
.obra .tela .barra-nav span { margin-left: 8px; font: 500 10px/1 var(--font-mono); color: #b3aeb8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obra .rolo { position: absolute; left: 0; right: 0; top: 24px; display: grid; transition: transform 5.5s cubic-bezier(.45, .05, .35, 1); }
.obra .rolo img { display: block; width: 100%; height: auto; }
.obra:hover .rolo, .obra:focus-visible .rolo { transform: translateY(calc(-100% + var(--janela, 250px) - 24px)); transition-duration: 6.5s; }
.obra .tela::after { content: "Passe o mouse para rolar"; position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: 6px 10px; border-radius: 999px; background: rgba(28, 27, 33, .82); color: #f1ece3; font: 700 11px/1 var(--font-mono); letter-spacing: .04em; transition: opacity .3s; }
.obra:hover .tela::after { opacity: 0; }
@media (hover: none) { .obra .tela::after { content: "Toque para abrir"; } }
.obra .info { padding: 18px 20px 22px; display: grid; gap: 8px; align-content: start; }
.obra .info .linha-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.obra .tipo { font: 700 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mudo); }
.obra h3 { font-size: 22px; line-height: 1.15; }
.obra p { margin: 0; color: var(--mudo); font-size: 14px; line-height: 1.5; }
.obra .ir { font: 700 14px/1 var(--font-display); color: var(--destaque); margin-top: 6px; }
.obra.final { background: transparent; border: 2px dashed var(--linha); place-content: center; text-align: center; padding: 28px; grid-template-rows: none; }
.obra.final h3 { font-size: 28px; }
.porto .progresso { height: 3px; background: var(--linha); border-radius: 3px; overflow: hidden; margin-inline: max(20px, calc((100vw - 1120px) / 2 + 20px)); }
.porto .progresso i { display: block; height: 100%; background: var(--laranja); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* ---------- wiki ---------- */
.tres-wiki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 64px; }
.tres-wiki article { border-radius: 20px; padding: 26px; background: var(--cartao); border: 1px solid var(--linha); transition: transform .5s var(--mola), border-color .3s; }
.tres-wiki article:hover { transform: translateY(-6px); border-color: rgba(255, 106, 26, .5); }
.tres-wiki .ic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(255, 106, 26, .14); color: var(--destaque); font: 800 18px/1 var(--font-mono); margin-bottom: 18px; }
.tres-wiki h3 { font-size: 22px; margin-bottom: 8px; }
.tres-wiki p { margin: 0; color: var(--mudo); font-size: 15px; }
.tabela-wrap { margin-top: 64px; border: 1px solid var(--linha); border-radius: 20px; overflow: hidden; overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.tabela caption { text-align: left; padding: 20px 22px 8px; font: 700 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mudo); }
.tabela th, .tabela td { text-align: left; padding: 14px 22px; border-top: 1px solid var(--linha); transition: background-color .25s; }
.tabela tbody tr:hover td { background: rgba(255, 106, 26, .07); }
.tabela thead th { font: 700 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mudo); border-top: 0; }
.tabela td:first-child { font-family: var(--font-display); font-weight: 700; }
.tabela .cor { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; background: var(--cor); box-shadow: 0 0 10px var(--cor); }
.tabela td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tabela tr.nova td { background: rgba(255, 106, 26, .1); }
.endereco { margin-top: 26px; font: 500 15px/1.5 var(--font-mono); color: var(--mudo); }
.endereco b { color: var(--destaque); }

/* ---------- linha do tempo do Bruno ---------- */
.tempo { position: relative; list-style: none; margin: 72px 0 0; padding: 0 0 0 48px; display: grid; gap: 34px; max-width: 760px; }
.tempo::before, .tempo::after { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--linha); }
.tempo::after { background: var(--laranja); box-shadow: 0 0 12px var(--laranja); transform-origin: top; transform: scaleY(var(--t, 0)); }
.tempo li { position: relative; opacity: .35; transform: translateX(-10px); transition: opacity .5s, transform .7s var(--mola); }
.tempo li::before { content: ""; position: absolute; left: -44px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--fundo); border: 2px solid var(--linha); transition: all .4s; }
.tempo li.on { opacity: 1; transform: none; }
.tempo li.on::before { background: var(--laranja); border-color: var(--laranja); box-shadow: 0 0 16px var(--laranja); }
.tempo .quando { font: 700 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--destaque); }
.tempo b { display: block; margin-top: 8px; font: 800 clamp(24px, 3vw, 34px)/1.1 var(--font-display); letter-spacing: -.02em; }
.tempo span.txt { display: block; margin-top: 6px; color: var(--mudo); }

/* ---------- equipe ---------- */
.equipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 64px; }
.membro { position: relative; padding: 20px; border-radius: 18px; background: var(--cartao); border: 1px solid var(--linha); overflow: hidden; transition: transform .5s var(--mola), border-color .3s;
  transform: perspective(700px) rotateY(var(--ty, 0deg)) rotateX(var(--tx, 0deg)); }
.membro:hover { border-color: var(--c); }
.membro::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: var(--c); opacity: .12; transition: transform .6s var(--mola), opacity .4s; }
.membro:hover::after { transform: scale(2.6); opacity: .16; }
.membro .av { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #1b1a20; font: 800 18px/1 var(--font-display); margin-bottom: 14px; }
.membro b { position: relative; z-index: 1; display: block; font: 800 19px/1.2 var(--font-display); }
.membro span { position: relative; z-index: 1; display: block; margin-top: 4px; color: var(--mudo); font-size: 13px; }
.membro.mais { display: grid; place-content: center; text-align: center; border-style: dashed; }
.membro.mais b { font-size: 32px; color: var(--destaque); }

/* ---------- final ---------- */
.final .caixa { border-radius: 30px; padding: clamp(40px, 8vw, 110px) clamp(24px, 5vw, 60px); background: #1c1b21; border: 1px solid var(--linha); text-align: center; --luz-bola: 560px; --luz-forca: .38; }
.final h2 { margin: 0 auto; max-width: 15ch; }
.final .lead { margin: 22px auto 0; }
.final .botao.sec { color: #f1ece3; border-color: rgba(241, 236, 227, .25); }
html.casa footer { background: var(--grafite); color: #b3aeb8; border-top: 1px solid rgba(241, 236, 227, .1); --fg: #f1ece3; --muted: #b3aeb8; --line: rgba(241, 236, 227, .12); --accent-ink: #ffa36b; padding-bottom: 110px; }

/* ---------- celular ---------- */
@media (max-width: 899px) {
  .heroi .grade, .agora .grade, .vera .grade, .conversa .grade, .casas-fixa .grade { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .heroi { padding-block: 100px 70px; }
  .heroi.manifesto h1 { font-size: clamp(50px, 15vw, 110px); }
  /* celular: o Kai fica no canto de cima, logo abaixo do botão da wiki, e libera a tela */
  .narrador { left: auto; right: max(16px, env(safe-area-inset-right)); bottom: auto; top: calc(70px + env(safe-area-inset-top, 0px)); flex-direction: row-reverse; align-items: flex-start; gap: 8px; }
  .narrador .bola { width: 34px; height: 34px; flex-basis: 34px; }
  .narrador .fala { max-width: min(190px, calc(100vw - 80px)); padding: 9px 12px; font-size: 12.5px; border-radius: 14px 4px 14px 14px; transform-origin: 100% 0; transform: translateY(-8px) scale(.95); }
  .narrador .fala b { font-size: 10px; margin-bottom: 2px; }
  .narrador.escondido { translate: 24px 0; }
  .orbita { width: min(76vw, 320px); margin-block: 30px; }
  .orbita .chip { font-size: 11px; padding: 5px 9px 5px 5px; }
  .orbita .chip i { width: 18px; height: 18px; font-size: 9px; }
  .rolar { display: none; }
  .mini, .tres-wiki, .checks { grid-template-columns: minmax(0, 1fr); }
  .equipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numeros { gap: 8px; }
  .numero { padding: 14px 12px; }
  .tese .rodape-tese { left: 20px; right: 20px; text-align: left; bottom: 7vh; }
  .tese .contador { bottom: 19vh; }
  /* casas e conversa viram blocos em sequência no celular */
  .casas-fixa, .conversa { height: auto; }
  .casas-fixa > .gruda, .conversa > .gruda { position: static; height: auto; overflow: visible; padding-block: 110px; }
  .predio-col { display: none; }
  .detalhes { min-height: 0; display: grid; gap: 64px; }
  .detalhe { position: static; opacity: 1; transform: none; pointer-events: auto; }
  .msg { opacity: 1; transform: none; }
  .etapas li { opacity: 1; }
  .msgs { min-height: 0; }
  .carimbos { height: 220px; }
  .ponte { height: 30vh; }
}

/* ---------- movimento reduzido: para só o que se mexe sozinho; o que segue a rolagem continua ---------- */
@media (prefers-reduced-motion: reduce) {
  .faixa .trilho, .rolar::after, .orbita .anel, .orbita .chip, .kanban .move, .luz-ambiente, .gira::after, .kicker::before { animation: none !important; }
  .nucleo, .narrador .bola, .painel .dots i.on { animation-duration: 6s; }
}
/* sem JS: tudo aparece parado e legível */
html.casa:not(.casa-js) [data-gruda] { height: auto !important; }
html.casa:not(.casa-js) [data-gruda] > .gruda { position: static; height: auto; overflow: visible; padding-block: 100px; }
html.casa:not(.casa-js) .abre .wm .l { --k: 1; }
html.casa:not(.casa-js) .abre .cortina { position: static; clip-path: none; padding: 80px 24px; }
html.casa:not(.casa-js) .abre .cortina .linha { --p: 1; }
html.casa:not(.casa-js) .tese .frases { display: grid; gap: 28px; min-height: 0; }
html.casa:not(.casa-js) .tese .frase { position: static; }
html.casa:not(.casa-js) .tese .kicker, html.casa:not(.casa-js) .tese .rodape-tese { position: static; }
html.casa:not(.casa-js) .tese .contador { display: none; }
html.casa:not(.casa-js) .detalhes { min-height: 0; display: grid; gap: 48px; }
html.casa:not(.casa-js) .detalhe, html.casa:not(.casa-js) .msg, html.casa:not(.casa-js) .tempo li { position: static; opacity: 1; transform: none; }
html.casa:not(.casa-js) .narrador { display: none; }

/* =====================================================================
   v4 (19/10/2026): cada casa no seu endereço. Escola, Studio e Seller usam o mesmo kit da casa mãe.
   ===================================================================== */
.topo-fixo .marca small { color: inherit; opacity: .7; }

/* ---------- três portas (casa mãe): escolha pelo tempo que você tem ---------- */
.portas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 64px; }
.porta { position: relative; display: grid; align-content: start; gap: 12px; padding: 30px 28px 28px; border-radius: 24px; background: var(--cartao); border: 1px solid var(--linha); color: inherit; text-decoration: none; overflow: hidden;
  transition: transform .6s var(--mola), border-color .4s, box-shadow .5s; transform: perspective(900px) rotateY(var(--ty, 0deg)) rotateX(var(--tx, 0deg)); }
.porta:hover { border-color: rgba(255, 106, 26, .6); box-shadow: 0 40px 70px -40px rgba(255, 106, 26, .55); }
.porta .se { font: 700 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--destaque); }
.porta h3 { font-size: clamp(30px, 3vw, 40px); line-height: 1; letter-spacing: -.035em; }
.porta p { margin: 0; color: var(--mudo); font-size: 16px; }
.porta .end { margin-top: 10px; font: 700 15px/1 var(--font-display); color: var(--destaque); }
.porta .num { position: absolute; right: 18px; top: 8px; font: 800 120px/1 var(--font-display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px var(--linha); transition: transform .8s var(--mola); pointer-events: none; }
.porta:hover .num { transform: translateY(-8px) rotate(-6deg); -webkit-text-stroke-color: rgba(255, 106, 26, .5); }

/* ---------- para quem: lista de pessoas ---------- */
.quem-lista { display: flex; flex-wrap: wrap; gap: 10px; margin: 40px 0 0; padding: 0; list-style: none; }
.centro .quem-lista { justify-content: center; }
.quem-lista li { padding: 12px 20px; border-radius: 999px; border: 1px solid var(--linha); background: var(--cartao); font: 800 clamp(18px, 2vw, 24px)/1 var(--font-display); transition: transform .4s var(--mola), background-color .3s; }
.quem-lista li:hover { transform: translateY(-4px) rotate(-1deg); background: rgba(255, 106, 26, .14); }
.quem-lista li.quente { background: var(--laranja); border-color: var(--laranja); color: var(--on-accent); }

/* ---------- serviços (Studio) ---------- */
.servicos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 64px; }
.servicos article { padding: 24px 20px; border-radius: 20px; background: var(--cartao); border: 1px solid var(--linha); transition: transform .5s var(--mola), border-color .3s; }
.servicos article:hover { transform: translateY(-6px); border-color: rgba(255, 106, 26, .5); }
.servicos .ic { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 106, 26, .14); color: var(--destaque); font: 800 16px/1 var(--font-mono); margin-bottom: 16px; }
.servicos h3 { font-size: 21px; margin-bottom: 6px; }
.servicos p { margin: 0; color: var(--mudo); font-size: 14px; line-height: 1.5; }

/* ---------- planos (Studio) ---------- */
.planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 64px; align-items: stretch; }
.plano { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 14px; padding: 30px 26px 26px; border-radius: 26px; background: var(--cartao); border: 1px solid var(--linha); --luz-raio: 420px; }
.plano .nome { font: 700 12px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--destaque); }
.plano .valor { font: 800 clamp(44px, 4.6vw, 62px)/1 var(--font-display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.plano .valor small { font: 600 15px/1.3 var(--font-body); letter-spacing: 0; color: var(--mudo); display: block; margin-top: 8px; }
.plano .pra { margin: 0; color: var(--mudo); font-size: 15px; }
.plano ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; align-content: start; }
.plano li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.45; }
.plano li::before { content: ""; position: absolute; left: 0; top: .3em; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--laranja); box-sizing: border-box; }
.plano li::after { content: ""; position: absolute; left: 5px; top: calc(.3em + 5px); width: 6px; height: 6px; border-radius: 50%; background: var(--laranja); }
.plano .botao { justify-content: center; text-align: center; margin-top: 10px; }
.plano.destaque { background: #1c1b21; color: #f1ece3; border-color: var(--laranja); box-shadow: 0 50px 90px -50px rgba(255, 106, 26, .8); transform: translateY(-14px);
  --mudo: #b3aeb8; --destaque: #ffa36b; --linha: rgba(241, 236, 227, .14); --texto: #f1ece3; }
.plano.destaque .fita { position: absolute; top: -13px; left: 26px; padding: 6px 12px; border-radius: 999px; background: var(--laranja); color: var(--on-accent); font: 800 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.planos-nota { margin: 34px 0 0; color: var(--mudo); font-size: 15px; max-width: 46em; }
.planos-nota b { color: var(--texto); }

/* ---------- ciclo (Seller) ---------- */
.ciclo { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; position: relative; }
.ciclo::before { content: ""; position: absolute; left: 4%; right: 4%; top: 34px; height: 2px; background: repeating-linear-gradient(90deg, var(--laranja) 0 10px, transparent 10px 18px); opacity: .5; }
.ciclo li { position: relative; display: grid; justify-items: start; align-content: start; gap: 8px; padding: 0 4px; }
.ciclo .bola { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: var(--c); border: 6px solid var(--fundo); box-shadow: 0 0 0 2px var(--linha); font: 800 22px/1 var(--font-display); color: #1b1a20; position: relative; z-index: 1; transition: transform .5s var(--mola); }
.ciclo li:hover .bola { transform: scale(1.1) rotate(-6deg); }
.ciclo .etapa { font: 700 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mudo); margin-top: 6px; }
.ciclo b { font: 800 20px/1.1 var(--font-display); }
.ciclo p { margin: 0; color: var(--mudo); font-size: 14px; line-height: 1.45; }
.status { display: inline-block; padding: 4px 9px; border-radius: 999px; font: 800 10px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--linha); color: var(--mudo); }
.status.ativo { background: rgba(63, 214, 143, .16); border-color: rgba(63, 214, 143, .5); color: #3fd68f; }

/* ---------- passos simples (Seller e Escola) ---------- */
.passos { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: p; }
.passos li { counter-increment: p; padding: 26px; border-radius: 20px; background: var(--cartao); border: 1px solid var(--linha); }
.passos li::before { content: "0" counter(p); display: block; font: 800 15px/1 var(--font-mono); color: var(--destaque); margin-bottom: 16px; }
.passos b { display: block; font: 800 22px/1.15 var(--font-display); margin-bottom: 8px; }
.passos span { color: var(--mudo); font-size: 15px; }

/* ---------- turma (Escola): cartão do curso pago ---------- */
.turma-c { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); border-radius: 26px; overflow: hidden; border: 1px solid var(--linha); margin-top: 56px; }
.turma-c .info { padding: 34px; background: var(--cartao); }
.turma-c .info h3 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.05; margin: 14px 0 12px; }
.turma-c .info p { color: var(--mudo); margin: 0 0 20px; }
.turma-c dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0 0 26px; font-size: 15px; }
.turma-c dt { font-weight: 800; }
.turma-c dd { margin: 0; color: var(--mudo); }
.turma-c .preco { background: #1c1b21; color: #f1ece3; padding: 34px; display: grid; align-content: center; gap: 10px; }
.turma-c .preco small { font: 700 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.turma-c .preco b { font: 800 60px/1 var(--font-display); color: var(--laranja); letter-spacing: -.04em; }
.turma-c .preco span { opacity: .8; font-size: 15px; }
.pill-q { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(255, 106, 26, .16); color: var(--destaque); font: 800 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }

/* ---------- formulário de interesse (Seller) ---------- */
.form-casa { display: grid; gap: 14px; max-width: 520px; margin: 36px auto 0; text-align: left; }
.form-casa label { display: grid; gap: 6px; font: 700 14px/1.2 var(--font-display); }
.form-casa .opc { font-weight: 500; color: var(--mudo); }
.form-casa input[type="text"], .form-casa input[type="email"], .form-casa input[type="tel"] { font: 500 16px/1.4 var(--font-body); padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(241, 236, 227, .2); background: rgba(241, 236, 227, .06); color: #f1ece3; }
.form-casa input:focus { border-color: var(--laranja); outline: none; }
.form-casa .consent { grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font: 500 13px/1.45 var(--font-body); color: var(--mudo); }
.form-casa .consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--laranja); }
.form-casa .isca { position: absolute; left: -9999px; }
.form-casa .botao { justify-content: center; border: 0; cursor: pointer; font: inherit; font-weight: 800; }
.form-casa .msg-form { margin: 0; min-height: 1.4em; font-size: 14px; color: #ffa36b; }
.form-ok h3 { font-size: 28px; margin-bottom: 8px; }

/* ---------- rodapé com as quatro casas ---------- */
html.casa footer .colunas { grid-template-columns: repeat(4, minmax(0, max-content)); gap: 24px 64px; }

@media (max-width: 899px) {
  .portas, .planos, .passos, .turma-c { grid-template-columns: minmax(0, 1fr); }
  .plano.destaque { transform: none; margin-top: 10px; }
  .servicos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ciclo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; }
  .ciclo::before { display: none; }
  .turma-c .info, .turma-c .preco { padding: 24px; }
  html.casa footer .colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) { .servicos { grid-template-columns: minmax(0, 1fr); } html.casa footer .colunas { grid-template-columns: minmax(0, 1fr); } }