/* ==========================================================================
   Voxtrin Cloud — jornada.css
   Jornada "Fundar a sua empresa" (/cadastro), tela de entrar (/entrar) e peças que o painel reaproveita
   (cartões vivos .jr-pick/.vv-*, planos .jr-plan, .jr-eyebrow, campos com ícone .jr-input-ic, canvas .vv-flies).
   Usa as variáveis do style.css. --accent = cor de destaque escolhida na jornada (padrão: vermelho Voxtrin).

   Desempenho (medido com Playwright): nada de backdrop-filter; por quadro só mudam transform e opacity;
   sombras e brilhos são estáticos (ou num pseudo-elemento que só muda de opacidade); will-change só no que anima;
   contain: paint nos cartões; animações param fora da tela (.vv-off) e com a aba escondida (.vv-paused).
   ========================================================================== */

:root { --accent: #e5484d; --accent-ink: #fff; --accent-soft: color-mix(in srgb, var(--accent) 22%, transparent); --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); }

/* ---------- Pausa ---------- */
/* Só o que está dentro para (a entrada do próprio bloco sempre termina, mesmo fora da tela). */
.vv-paused *, .vv-paused *::before, .vv-paused *::after,
.vv-off *, .vv-off *::before, .vv-off *::after { animation-play-state: paused !important; }

/* ---------- Peças comuns ---------- */
.ic { width: 20px; height: 20px; flex-shrink: 0; }
.brand-tag { font-family: var(--font-pixel); font-size: .68rem; letter-spacing: .1em; color: var(--cyan); padding: 2px 6px; border: 1px solid rgba(94, 225, 255, .35); border-radius: 6px; line-height: 1.4; }
.jr-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font-family: var(--font-pixel); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 70%, #fff); }
.jr-eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: vv-blink 1.6s steps(2) infinite; }
@keyframes vv-blink { 50% { opacity: .35; } }
.jr-legal { margin: 24px 0 0; text-align: center; font-size: .8rem; color: #8a90a2; }
.jr-legal a { color: inherit; }

.jr-input-ic { position: relative; display: flex; align-items: center; }
.jr-input-ic > .ic { position: absolute; left: 14px; width: 18px; height: 18px; color: #8a90a2; pointer-events: none; transition: color .2s, transform .3s var(--spring); }
.jr-input-ic input { padding-left: 44px !important; }
.jr-input-ic:focus-within > .ic { color: color-mix(in srgb, var(--accent) 80%, #fff); transform: scale(1.15); }
.jr-pass input { padding-right: 52px !important; }
.jr-eye { position: absolute; right: 6px; width: 40px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.jr-eye:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.jr-eye .ic { width: 19px; height: 19px; }
.jr-eye .ic-hide, .jr-eye[aria-pressed="true"] .ic-show { display: none; }
.jr-eye[aria-pressed="true"] .ic-hide { display: block; }

.field input:focus, .field select:focus, .input-group:focus-within {
  border-color: color-mix(in srgb, var(--accent) 85%, transparent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4) inset, 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.field-error[hidden] { display: none; }
.field-error { display: flex; gap: 6px; align-items: center; margin: 0; animation: vv-shake .4s var(--ease); }
.field-error::before { content: "!"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--err); color: #1a0508; font-size: .7rem; font-weight: 900; flex-shrink: 0; }
@keyframes vv-shake { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }

/* Canvas de vagalumes (vivo.js) e de faíscas */
.vv-flies { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; image-rendering: pixelated; }
.vv-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 90; pointer-events: none; image-rendering: pixelated; }
html:not(.js) .vv-flies { display: none; }

/* "Aperto" com mola em botões e cartões */
.vv-press { animation: vv-press .32s var(--spring); }
@keyframes vv-press { 0% { transform: scale(1); } 35% { transform: scale(.95); } 100% { transform: scale(1); } }

/* ---------- Ilustração de cartão: gradiente + ícone (reserva) e a imagem por cima ---------- */
.vv-art { --h: 350; position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3;
  background:
    radial-gradient(70% 60% at 50% 35%, hsl(var(--h) 80% 55% / .45), transparent 70%),
    linear-gradient(160deg, hsl(var(--h) 45% 24%), hsl(calc(var(--h) + 40) 40% 11%)); }
.vv-art::before { content: ""; position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px); background-size: 12px 12px; }
.vv-art::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(transparent, rgba(10, 12, 19, .55)); pointer-events: none; }
.vv-art-fb { position: absolute; inset: 0; display: grid; place-items: center; color: hsl(var(--h) 95% 82%); }
.vv-art-fb .ic { width: 38%; height: auto; max-width: 64px; stroke-width: 1.5; filter: drop-shadow(0 0 12px hsl(var(--h) 90% 60% / .7)); }
.vv-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.vv-art:not(.is-fallback) .vv-art-fb { visibility: hidden; }

/* ---------- Cartão vivo (escolhas da jornada e planos) ---------- */
/* label.jr-pick > input + .vv-tilt (gira com o mouse) > .vv-art + texto + .vv-check + .vv-sheen > .vv-glare */
.jr-pick { position: relative; display: block; isolation: isolate; cursor: pointer; border-radius: 16px; -webkit-tap-highlight-color: transparent; }
.jr-pick > input { position: absolute; opacity: 0; pointer-events: none; }
.jr-pick::after { /* brilho de fora: só muda de opacidade */
  content: ""; position: absolute; inset: 4px; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity .35s;
  box-shadow: 0 14px 38px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 0 1px var(--accent); }
.vv-tilt { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: inherit; overflow: hidden; contain: paint;
  background: linear-gradient(170deg, #1f2233, #12141e); border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 10px 24px rgba(0, 0, 0, .32);
  transition: transform .55s var(--spring), border-color .25s; transform: translateZ(0); }
.vv-tilt::before { /* borda em gradiente que acende */
  content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 90%, #fff), transparent 40%, transparent 60%, var(--cyan));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@media (hover: hover) {
  .jr-pick:hover .vv-tilt { transform: translateY(-4px); border-color: rgba(255, 255, 255, .18); }
  .jr-pick:hover .vv-tilt::before { opacity: .55; }
  .jr-pick:hover .vv-art img { transform: scale(1.07); }
}
.jr-pick.is-tilting .vv-tilt { transition: transform .1s linear, border-color .25s; will-change: transform; }
.jr-pick:has(input:checked)::after { opacity: 1; }
.jr-pick:has(input:checked) .vv-tilt { border-color: transparent; background: linear-gradient(170deg, color-mix(in srgb, var(--accent) 16%, #1f2233), #12141e 70%); }
.jr-pick:has(input:checked) .vv-tilt::before { opacity: 1; }
.jr-pick:has(input:checked) .vv-art img, .jr-pick:has(input:checked) .vv-art-fb .ic { animation: vv-float 3.2s ease-in-out infinite; }
.jr-pick:has(input:focus-visible) { outline: 3px solid #fff; outline-offset: 3px; }
@keyframes vv-float { 0%, 100% { transform: scale(1.08) translateY(0); } 50% { transform: scale(1.08) translateY(-4px); } }
.jr-pick.is-pop .vv-tilt { animation: vv-pop .55s var(--spring); }
@keyframes vv-pop { 0% { transform: scale(1); } 30% { transform: scale(.94); } 65% { transform: scale(1.04); } 100% { transform: scale(1); } }

.vv-sheen { position: absolute; inset: 0; z-index: 3; overflow: hidden; border-radius: inherit; pointer-events: none; }
.vv-glare { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; opacity: 0; transition: opacity .35s; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 22%, transparent 40%); }
.is-tilting .vv-glare { opacity: 1; will-change: transform; }

.vv-check { position: absolute; z-index: 5; top: 10px; right: 10px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(11, 13, 20, .7); border: 1.5px solid rgba(255, 255, 255, .35); transition: transform .45s var(--spring); }
.vv-check::before { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .4s var(--spring); }
.vv-check svg { position: relative; width: 16px; height: 16px; fill: none; stroke: var(--accent-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .35s var(--ease) .12s; }
.jr-pick:has(input:checked) .vv-check { transform: scale(1.08); border-color: transparent; }
.jr-pick:has(input:checked) .vv-check::before { transform: scale(1); }
.jr-pick:has(input:checked) .vv-check svg { stroke-dashoffset: 0; }

.jr-choice-txt { position: relative; z-index: 2; display: grid; gap: 2px; min-width: 0; padding: 12px 14px 14px; }
.jr-choice-txt b { font-size: 1rem; line-height: 1.25; }
.jr-choice-txt small { color: var(--muted); font-size: .8rem; line-height: 1.35; }
.jr-pick:has(input:checked) .jr-choice-txt b { color: #fff; }

.jr-pick-team .vv-art { aspect-ratio: 1 / 1; }
.jr-pick-team .jr-choice-txt b { font-size: 1.08rem; }
.jr-pick-sm { border-radius: 14px; }
.jr-pick-sm .vv-art { aspect-ratio: 1 / 1; }
.jr-pick-sm .jr-choice-txt { padding: 8px 8px 10px; text-align: center; }
.jr-pick-sm .jr-choice-txt b { font-size: .84rem; }
.jr-pick-sm .vv-check { width: 22px; height: 22px; top: 6px; right: 6px; }
.jr-pick-sm .vv-check svg { width: 12px; height: 12px; }
.jr-pick-room .vv-art { aspect-ratio: 16 / 10; }
.jr-agent .vv-art { aspect-ratio: 16 / 10; }
.has-error .vv-tilt { border-color: color-mix(in srgb, var(--err) 60%, transparent); }

/* Entrada em cascata quando o passo aparece */
.js .jr-step.is-active .jr-grid > *, .js .jr-step.is-active .jr-plans > *, .js .jr-step.is-active .jr-promises > li { animation: vv-rise .55s var(--ease) both; }
.js .jr-step.is-active .jr-grid > :nth-child(2), .js .jr-step.is-active .jr-plans > :nth-child(2), .js .jr-step.is-active .jr-promises > li:nth-child(2) { animation-delay: .06s; }
.js .jr-step.is-active .jr-grid > :nth-child(3), .js .jr-step.is-active .jr-plans > :nth-child(3), .js .jr-step.is-active .jr-promises > li:nth-child(3) { animation-delay: .12s; }
.js .jr-step.is-active .jr-grid > :nth-child(4) { animation-delay: .18s; }
.js .jr-step.is-active .jr-grid > :nth-child(5) { animation-delay: .24s; }
@keyframes vv-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Cartões de plano (jornada e painel) ---------- */
.jr-plans { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jr-plan { cursor: pointer; }
.jr-plan .vv-tilt { padding: 0; }
.jr-plan-art { aspect-ratio: 16 / 10; }
.jr-plan-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; flex: 1; }
.jr-plan-badge { position: absolute; z-index: 6; top: 10px; left: 10px; white-space: nowrap; padding: 4px 9px; border-radius: 999px; font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }
.jr-plan-badge::before { content: "★ "; }
.jr-plan-badge[hidden] { display: none; }
.jr-plan.is-recommended .vv-tilt { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.jr-plan-name { font-family: var(--font-pixel); font-size: .95rem; letter-spacing: .06em; color: #fff; }
.jr-plan-price { display: flex; align-items: baseline; gap: 4px; }
.jr-plan-price b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.jr-plan-price small { color: var(--muted); }
.jr-plan-trial { font-size: .78rem; font-weight: 700; color: var(--ok); }
.jr-plan-specs { display: grid; gap: 6px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.jr-plan-specs span { display: flex; align-items: flex-start; gap: 7px; font-size: .78rem; line-height: 1.35; color: var(--text-2); }
.jr-plan-specs .ic { width: 15px; height: 15px; color: color-mix(in srgb, var(--accent) 70%, #fff); }
.jr-plan .btn { margin-top: auto; }
/* Animações que o painel também usa */
@keyframes vv-ring { 0% { opacity: .8; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes vv-shine { 0%, 55% { transform: translateX(-120%); } 80%, 100% { transform: translateX(120%); } }
@keyframes vv-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes vv-bump { 40% { transform: scale(1.45); color: var(--accent); } }
@keyframes vv-sway { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(1deg); } }
.btn.is-loading { pointer-events: none; }
.btn.is-loading .ic { display: none; }
.btn.is-loading::after { content: ""; position: static; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; background: none; transform: none; animation: vx-spin .8s linear infinite; }

/* ==========================================================================
   Jornada "Fundar a sua empresa"
   Esquerda: a MAQUETE (maquete.ts), o prédio que sobe a cada resposta, com câmera, HUD da obra e o mestre de obras
   falando. Direita: o formulário em 7 passos. Na troca de passo, o conteúdo sai e entra em cascata e a câmera da
   maquete viaja até a parte que o passo constrói. Tudo por transform/opacity; o desenho é SVG em camadas próprias,
   nunca redesenhado durante uma animação. Classes no palco: .bN = a obra já chegou ao passo N; .sN = passo atual.
   ========================================================================== */
.jr-page { background: var(--bg); min-height: 100vh; }
.jr { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(580px, .94fr); min-height: 100vh; overflow-x: clip; }

/* ---------- Palco ---------- */
.mq { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; isolation: isolate; contain: strict; container-type: size; background: #120c26; }
/* O "mundo": cobre o palco como uma imagem cover (3:2); a câmera é o transform dele (jornada.js). 1 pixel da arte = --P. */
.mq-world { position: absolute; left: 50%; top: 50%; width: max(100cqw, 150cqh); height: max(100cqh, 66.6667cqw); container-type: size;
  --P: calc(100cqw / 384); --g: 80.2%;
  transform: translate(-50%, -50%); transition: transform 1.25s cubic-bezier(.45, .05, .2, 1); will-change: transform;
  background: linear-gradient(180deg, #0d0a22 0%, #22184a 38%, #55285e 64%, #b8507a 77%, #f08a6a 79.6%, #2a2131 80.2%, #1d1724 90%, #141019 100%); }
.mq-sky, .mq-sky img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mq-sky img { object-fit: cover; }
.mq.no-sky .mq-sky { display: none; }
.mq-night { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.8s var(--ease);
  background: linear-gradient(180deg, rgba(5, 6, 26, .7) 0%, rgba(10, 10, 46, .45) 55%, rgba(5, 6, 20, .3) 80%, rgba(5, 6, 20, .5) 100%); }
.mq.s6 .mq-night, .mq.is-final .mq-night { opacity: 1; }
.mq-halo { position: absolute; left: calc(50% - 110 * var(--P)); top: calc(var(--g) - 190 * var(--P)); width: calc(220 * var(--P)); height: calc(210 * var(--P)); pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease);
  background: radial-gradient(50% 55% at 50% 62%, color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, #ffb547 10%, transparent) 55%, transparent 72%); }
.mq.b4 .mq-halo { opacity: .7; }
.mq.s6 .mq-halo, .mq.is-final .mq-halo { opacity: 1; }
.mq-world svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.mq .ac { fill: var(--accent); }
.mq .ac2 { fill: color-mix(in srgb, var(--accent) 55%, #1a1030); }

/* Placa do terreno (passo 1) */
.mq-lot { position: absolute; left: calc(50% - 24 * var(--P)); top: calc(var(--g) - 30 * var(--P)); width: calc(48 * var(--P)); transition: transform .7s var(--ease), opacity .4s; }
.mq-lot::before, .mq-lot::after { content: ""; position: absolute; z-index: -1; top: 60%; width: calc(1.6 * var(--P)); height: calc(16 * var(--P)); background: #6b4a2e; box-shadow: inset calc(-.6 * var(--P)) 0 #4a3220; }
.mq-lot::before { left: 18%; } .mq-lot::after { right: 18%; }
.mq-lot-in { position: relative; display: grid; gap: calc(.6 * var(--P)); padding: calc(2 * var(--P)) calc(2.4 * var(--P)); text-align: center; background: #f3efe6; border: calc(.8 * var(--P)) solid #1b1730; box-shadow: 0 calc(1.2 * var(--P)) 0 #1b1730; font-family: var(--font-pixel); color: #1b1730; }
.mq-lot small { font-size: calc(2.3 * var(--P)); letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; }
.mq-lot b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(3.4 * var(--P)); font-weight: 400; line-height: 1.1; color: color-mix(in srgb, var(--accent) 70%, #1b1730); }
.mq.b1 .mq-lot { transform: translateY(calc(34 * var(--P))); opacity: 0; }

/* Guindaste (até a planta ficar pronta) */
.mq-crane { position: absolute; left: calc(50% + 22 * var(--P)); top: calc(var(--g) - 200 * var(--P)); width: calc(70 * var(--P)); height: calc(200 * var(--P)); transition: transform 1.6s var(--ease), opacity 1s; }
.mq.b4 .mq-crane { transform: translateX(calc(150 * var(--P))); opacity: 0; }
.mq-hook { position: absolute; left: calc(9 * var(--P)); top: calc(17 * var(--P)); width: calc(8 * var(--P)); height: calc(90 * var(--P)); overflow: hidden; }
.mq-hook > i, .mq-hook > svg { animation: mq-hook 6s ease-in-out infinite; }
.mq-hook > i { position: absolute; left: calc(3.5 * var(--P)); top: calc(-60 * var(--P)); width: calc(1 * var(--P)); height: calc(100 * var(--P)); background: #9aa3bd; }
.mq-world .mq-hook > svg { top: calc(40 * var(--P)); bottom: auto; height: calc(10 * var(--P)); }
@keyframes mq-hook { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(26 * var(--P))); } }
.mq-crane-led { position: absolute; left: calc(58 * var(--P)); top: calc(5 * var(--P)); width: calc(2 * var(--P)); height: calc(2 * var(--P)); background: #ff4d55; box-shadow: 0 0 calc(3 * var(--P)) #ff4d55; animation: vv-blink 1.4s steps(2) infinite; }
.mq.b4 .mq-hook > i, .mq.b4 .mq-hook > svg, .mq.b4 .mq-crane-led { animation: none; }

/* O prédio: o canteiro corta na linha do chão (o térreo sobe da terra) */
.mq-site { position: absolute; left: calc(50% - 72 * var(--P)); top: calc(var(--g) - 232 * var(--P)); width: calc(144 * var(--P)); height: calc(232 * var(--P)); overflow: hidden; }
.mq-bld { position: absolute; left: calc(30 * var(--P)); bottom: 0; width: calc(84 * var(--P)); height: 100%; }
.mq-lobby { position: absolute; z-index: 2; left: 0; bottom: 0; width: 100%; height: calc(36 * var(--P)); transform: translateY(102%); transition: transform 1.1s var(--spring); }
.mq.b1 .mq-lobby { transform: none; }
.mq-lit { opacity: 0; transition: opacity .7s var(--ease); }
.mq.b1 .mq-lobby .mq-lit { opacity: .9; transition-delay: .9s; }
.mq.s6 .mq-lobby .mq-lit, .mq.is-final .mq-lobby .mq-lit { opacity: 1; }

/* Letreiro */
.mq-sign { position: absolute; left: 14.29%; width: 71.42%; top: 16.7%; height: 22.2%; display: grid; place-items: center; overflow: hidden; }
.mq-sign-txt { max-width: 96%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-pixel); font-size: calc(var(--fs, 4.6) * var(--P)); line-height: 1.1; text-transform: uppercase; letter-spacing: .04em; color: #fff; opacity: .2;
  text-shadow: 0 0 calc(.5 * var(--P)) #fff, 0 0 calc(1.6 * var(--P)) var(--accent), 0 0 calc(3.4 * var(--P)) var(--accent); transition: opacity .5s; }
.mq.b1 .mq-sign-txt { opacity: 1; transition-delay: .8s; }
.mq.s1 .mq-sign-txt { animation: jr-neon 6s infinite 2s; }
.mq-sign.flicker .mq-sign-txt { animation: jr-flicker .45s steps(2) 1; transition-delay: 0s; }
@keyframes jr-neon { 0%, 92%, 94%, 97%, 100% { opacity: 1; } 93% { opacity: .5; } 96% { opacity: .75; } }
@keyframes jr-flicker { 0% { opacity: .2; } 50% { opacity: 1; } 100% { opacity: .6; } }

/* Fita da inauguração na porta */
.mq-ribbon { position: absolute; left: 33.3%; width: 33.3%; top: 66%; height: calc(2.6 * var(--P)); opacity: 0; transform: scaleX(.1); transition: transform .6s var(--spring), opacity .3s; }
.mq.s6 .mq-ribbon, .mq.is-final .mq-ribbon { opacity: 1; transform: none; }
.mq-ribbon i { position: absolute; top: 0; height: 100%; width: 51%; background: linear-gradient(180deg, #ff6b74, #c81d30); box-shadow: 0 calc(.5 * var(--P)) 0 #7e0f1d; transition: transform .9s var(--ease), opacity .9s; }
.mq-rib-l { left: 0; transform-origin: 0 50%; } .mq-rib-r { right: 0; transform-origin: 100% 50%; }
.mq-bow { position: absolute; left: 50%; top: 50%; width: calc(6 * var(--P)); height: calc(5 * var(--P)); margin: calc(-2.5 * var(--P)) 0 0 calc(-3 * var(--P)); background: radial-gradient(circle at 50% 50%, #ffd27a 0 18%, transparent 19%), conic-gradient(from 45deg, #ff6b74 0 25%, transparent 0 50%, #ff6b74 0 75%, transparent 0); transition: transform .8s var(--ease), opacity .6s; }
.mq-ribbon.is-cut .mq-rib-l { transform: translateY(calc(6 * var(--P))) rotate(72deg); opacity: 0; }
.mq-ribbon.is-cut .mq-rib-r { transform: translateY(calc(6 * var(--P))) rotate(-72deg); opacity: 0; }
.mq-ribbon.is-cut .mq-bow { transform: translateY(calc(10 * var(--P))) scale(.4); opacity: 0; }

/* Andares: em obra (concreto + andaime) até a planta; depois tijolo, janelas acesas e a placa da sala */
.mq-fl { position: absolute; z-index: 1; left: 0; bottom: calc(36 * var(--P)); width: 100%; height: calc(24 * var(--P)); transform-origin: 50% 100%; opacity: 0;
  transform: translateY(calc(var(--i) * -24 * var(--P))) scaleY(.02); transition: transform .8s var(--spring), opacity .35s; transition-delay: var(--d, 0s); }
.mq.b2 .mq-fl.on { opacity: 1; transform: translateY(calc(var(--i) * -24 * var(--P))); }
.mq-fl .mq-raw { transition: opacity .6s; }
.mq-fl .mq-fin, .mq-fl .mq-props { opacity: 0; transition: opacity .7s var(--ease); }
.mq.b4 .mq-fl .mq-fin, .mq.b4 .mq-fl .mq-props { opacity: 1; transition-delay: calc(var(--i) * .16s); }
.mq.b4 .mq-fl .mq-raw { opacity: 0; transition-delay: calc(var(--i) * .16s + .35s); }
.mq.b4 .mq-fl.on .mq-lit { opacity: 1; transition-delay: calc(var(--i) * .16s + .55s); }
.mq-scaf { transition: transform .8s var(--ease), opacity .5s; }
.mq.b4 .mq-scaf { opacity: 0; transform: translateY(45%); }
.mq-blade { position: absolute; left: calc(100% + .6 * var(--P)); top: calc(4 * var(--P)); opacity: 0; transform: scaleX(.2); transform-origin: 0 50%; transition: transform .6s var(--spring), opacity .3s; }
.mq-blade::before { content: ""; position: absolute; left: calc(-1 * var(--P)); top: 50%; width: calc(1.4 * var(--P)); height: calc(1 * var(--P)); background: #9aa3bd; }
.mq.b4 .mq-fl.on .mq-blade { opacity: 1; transform: none; transition-delay: calc(var(--i) * .16s + .8s); }
.mq-blade-in { display: flex; align-items: center; gap: calc(1 * var(--P)); padding: calc(1 * var(--P)) calc(1.8 * var(--P)) calc(1 * var(--P)) calc(1.2 * var(--P)); background: #120e1d; border: calc(.6 * var(--P)) solid var(--accent); font-family: var(--font-pixel); font-size: calc(2.6 * var(--P)); line-height: 1; color: #fff; white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; }
.mq-world .mq-blade-in .ic { position: static; width: calc(3.2 * var(--P)); height: calc(3.2 * var(--P)); color: color-mix(in srgb, var(--accent) 70%, #fff); }
.mq-blade-in b { font-weight: 400; }

/* Telhado, bandeira e o enfeite da área */
.mq-roof { position: absolute; z-index: 1; left: 0; bottom: calc(36 * var(--P)); width: 100%; height: calc(22 * var(--P)); opacity: 0;
  transform: translateY(calc(var(--n) * -24 * var(--P) + 24 * var(--P))); transition: transform .8s var(--spring), opacity .4s; transition-delay: var(--rd, 0s); }
.mq.b2 .mq-roof { opacity: 1; transform: translateY(calc(var(--n) * -24 * var(--P))); }
.mq-pole { position: absolute; left: calc(50 * var(--P)); bottom: calc(4 * var(--P)); width: calc(1 * var(--P)); height: calc(20 * var(--P)); background: #c9d1e6; }
.mq-flag { position: absolute; left: 100%; top: 0; width: calc(10 * var(--P)); height: calc(6 * var(--P)); background: linear-gradient(180deg, var(--accent) 50%, color-mix(in srgb, var(--accent) 70%, #000) 50%); transform-origin: 0 50%; animation: mq-flag 1.6s steps(3) infinite; }
@keyframes mq-flag { 0%, 100% { transform: skewY(0) scaleX(1); } 33% { transform: skewY(8deg) scaleX(.9); } 66% { transform: skewY(-6deg) scaleX(.95); } }
.mq-prop { position: absolute; right: calc(6 * var(--P)); bottom: calc(4 * var(--P)); width: calc(var(--w) * var(--P)); height: calc(var(--h) * var(--P)); transform: scale(0); transform-origin: 50% 100%; transition: transform .6s var(--spring); }
.mq[data-area="software"] [data-prop="software"], .mq[data-area="agencia"] [data-prop="agencia"], .mq[data-area="consultoria"] [data-prop="consultoria"],
.mq[data-area="educacao"] [data-prop="educacao"], .mq[data-area="outro"] [data-prop="outro"] { transform: none; transition-delay: .15s; }

/* Pintura da casa: uma faixa na cor nova sobe pelo prédio */
.mq-paint { position: absolute; z-index: 3; left: -4%; right: -4%; bottom: 0; height: 40%; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 55%, transparent) 45%, rgba(255, 255, 255, .45) 50%, color-mix(in srgb, var(--accent) 55%, transparent) 55%, transparent); }
.mq-paint.go { animation: mq-paint .9s var(--ease) 1; }
@keyframes mq-paint { 0% { opacity: 0; transform: translateY(20%); } 15% { opacity: .9; } 85% { opacity: .7; } 100% { opacity: 0; transform: translateY(-160%); } }

/* O time na calçada */
.mq-crowd { position: absolute; z-index: 2; left: 50%; top: var(--g); width: 0; height: 0; }
.mq-av { position: absolute; left: calc(-5 * var(--P)); bottom: calc(-4 * var(--P) - var(--row, 0) * 2.5 * var(--P)); width: calc(10 * var(--P)); height: calc(14 * var(--P)); z-index: calc(10 + var(--row, 0));
  transform: translateX(calc(var(--x) * var(--P))) scale(var(--sc, 1)); transform-origin: 50% 100%; transition: transform 1.5s cubic-bezier(.3, .6, .35, 1), opacity .4s; }
.mq-av.is-out { transform: translateX(calc(var(--from) * var(--P))); opacity: 0; }
.mq-av::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: calc(-.8 * var(--P)); height: calc(1.6 * var(--P)); border-radius: 50%; background: rgba(0, 0, 0, .45); }
.mq-av.walk > svg { animation: mq-walk .34s steps(2) infinite; }
@keyframes mq-walk { 50% { transform: translateY(calc(-1 * var(--P))); } }
.mq-av.hop > svg, .mq.is-final .mq-av > svg { animation: mq-hop .44s var(--ease) 4; }
@keyframes mq-hop { 50% { transform: translateY(calc(-4 * var(--P))); } }
.mq-tag { position: absolute; left: 50%; bottom: calc(100% + 1.2 * var(--P)); transform: translateX(-50%) scale(.6); transform-origin: 50% 100%; padding: calc(.6 * var(--P)) calc(1.2 * var(--P)); font-family: var(--font-pixel); font-size: calc(2.4 * var(--P)); line-height: 1.1; white-space: nowrap; color: var(--accent-ink); background: var(--accent); box-shadow: 0 calc(.6 * var(--P)) 0 color-mix(in srgb, var(--accent) 55%, #000); opacity: 0; transition: transform .45s var(--spring), opacity .3s; }
.mq.b3 .mq-av.is-you .mq-tag { opacity: 1; transform: translateX(-50%); }
.mq-key-float { position: absolute; left: 50%; bottom: calc(100% + 5.6 * var(--P)); width: calc(5 * var(--P)); height: calc(5 * var(--P)); margin-left: calc(-2.5 * var(--P)); color: #ffd27a; opacity: 0; transform: translateY(calc(3 * var(--P))) rotate(-30deg); transition: transform .6s var(--spring), opacity .3s; }
.mq-key-float svg { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.mq.s3 .mq-av.is-you .mq-key-float { opacity: 1; transform: none; animation: mq-bob 2s ease-in-out infinite .6s; }
@keyframes mq-bob { 50% { transform: translateY(calc(-1.2 * var(--P))) rotate(6deg); } }

/* Agentes: descem voando e ficam na calçada */
.mq-bot { position: absolute; z-index: 3; left: calc(50% + var(--bx) * var(--P) - 8 * var(--P)); top: calc(var(--g) - 18 * var(--P)); width: calc(16 * var(--P)); height: calc(20 * var(--P)); opacity: 0;
  transform: translate(calc(var(--fx) * var(--P)), calc(-190 * var(--P))) rotate(var(--fr)); transition: transform 1.4s cubic-bezier(.2, .85, .25, 1.12), opacity .5s; transition-delay: calc(var(--i) * .25s); }
.mq-bot[data-bot="claude"] { --bx: -58; --fx: -60; --fr: -18deg; }
.mq-bot[data-bot="codex"] { --bx: 58; --fx: 70; --fr: 16deg; }
.mq.b5 .mq-bot.on { opacity: 1; transform: none; }
.mq-bot-in { position: absolute; inset: 0; }
.mq.b5 .mq-bot.on .mq-bot-in { animation: mq-hover 2.6s steps(4) infinite 1.6s; }
@keyframes mq-hover { 50% { transform: translateY(calc(-1.6 * var(--P))); } }
.mq-jet { position: absolute; left: 30%; right: 30%; top: 96%; height: calc(6 * var(--P)); background: linear-gradient(180deg, #fff3c4, #ffb547 40%, #ff5f3a 70%, transparent); opacity: 0; transform-origin: 50% 0; transition: opacity .3s; }
.mq-bot.fly .mq-jet { opacity: 1; animation: mq-jet .12s steps(2) infinite; }
@keyframes mq-jet { 50% { transform: scaleY(.6); } }
.mq-bot-hi { position: absolute; bottom: calc(100% + 2 * var(--P)); left: 50%; padding: calc(1.2 * var(--P)) calc(1.8 * var(--P)); font-family: var(--font-pixel); font-size: calc(2.5 * var(--P)); line-height: 1.2; white-space: nowrap; color: #11131c; background: #fff; box-shadow: 0 calc(.8 * var(--P)) 0 #a9b0c6; opacity: 0; transform: translate(-50%, calc(2 * var(--P))) scale(.7); transform-origin: 50% 100%; transition: transform .45s var(--spring), opacity .3s; }
.mq-bot-hi::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: calc(-1 * var(--P)); border: calc(1 * var(--P)) solid transparent; border-top-color: #fff; }
.mq.s5 .mq-bot.on .mq-bot-hi { opacity: 1; transform: translate(-50%, 0); transition-delay: calc(1.3s + var(--i) * .3s); }
.mq-bot[data-bot="claude"] .mq-bot-hi { left: 20%; } .mq-bot[data-bot="codex"] .mq-bot-hi { left: 80%; }

/* A chave do plano (passo 7) */
.mq-key { position: absolute; z-index: 4; left: calc(50% + 50 * var(--P)); top: calc(var(--g) - (64 + var(--n, 3) * 24) * var(--P)); opacity: 0; transform: perspective(600px) rotateY(80deg) scale(.7); transition: transform .8s var(--spring), opacity .35s; }
.mq.s6 .mq-key { opacity: 1; transform: perspective(600px) rotateY(-10deg) rotate(3deg); transition-delay: .5s; }
.mq-key-in { display: flex; align-items: center; gap: calc(2 * var(--P)); padding: calc(2 * var(--P)) calc(3 * var(--P)) calc(2 * var(--P)) calc(2 * var(--P)); background: linear-gradient(160deg, #262a3d, #12141e); border: calc(.7 * var(--P)) solid var(--accent); box-shadow: 0 calc(1 * var(--P)) 0 color-mix(in srgb, var(--accent) 50%, #000), 0 calc(4 * var(--P)) calc(10 * var(--P)) rgba(0, 0, 0, .5); }
.mq .mq-key-ic { position: static; flex-shrink: 0; width: calc(8 * var(--P)); height: calc(8 * var(--P)); fill: none; stroke: #ffd27a; stroke-width: 2.4; stroke-linecap: round; }
.mq-key-in > span { display: grid; gap: calc(.4 * var(--P)); }
.mq-key small { font-family: var(--font-pixel); font-size: calc(2.2 * var(--P)); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mq-key b { font-size: calc(3.6 * var(--P)); color: #fff; white-space: nowrap; }
.mq-key.pop .mq-key-in { animation: vv-pop .55s var(--spring); }

/* HUD da obra e o mestre de obras (no palco, fora da câmera) */
.mq-hud { position: absolute; z-index: 6; top: 20px; left: 20px; right: 20px; display: flex; flex-wrap: wrap; gap: 8px; pointer-events: none; }
.mq-hud-obra, .mq-hud-stats { contain: layout paint; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(11, 13, 20, .86); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.mq-hud-obra > span { font-family: var(--font-pixel); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mq-hud-obra > b { min-width: 4ch; font-family: var(--font-pixel); font-size: 1rem; font-weight: 400; color: #fff; font-variant-numeric: tabular-nums; }
.mq-hud-bar { position: relative; width: 74px; height: 8px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .3); }
.mq-hud-bar > i { position: absolute; inset: 0; transform-origin: 0 50%; background: repeating-linear-gradient(90deg, var(--accent) 0 6px, color-mix(in srgb, var(--accent) 70%, #000) 6px 8px); transition: transform 1s var(--ease); }
.mq-hud-stats { list-style: none; margin: 0; gap: 14px; }
.mq-hud-stats li { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); }
.mq-hud-stats .ic { width: 16px; height: 16px; color: color-mix(in srgb, var(--accent) 70%, #fff); }
.mq-hud-stats b { display: inline-block; font-family: var(--font-pixel); font-size: .9rem; font-weight: 400; color: #fff; font-variant-numeric: tabular-nums; }
.mq-hud-stats li.is-bump b { animation: vv-bump .5s var(--spring); }

.mq-say { position: absolute; z-index: 6; left: 24px; right: 24px; bottom: 24px; max-width: 640px; margin: 0 auto; display: flex; contain: layout paint; gap: 14px; align-items: flex-start; padding: 14px 18px 14px 14px;
  background: rgba(9, 10, 18, .93); border: 2px solid color-mix(in srgb, var(--accent) 55%, #fff); border-radius: 6px; box-shadow: 0 0 0 3px #05060a, 0 18px 40px rgba(0, 0, 0, .55); }
.mq-say.is-new { animation: mq-say .5s var(--spring); }
@keyframes mq-say { 0% { transform: translateY(8px) scale(.98); } 100% { transform: none; } }
.mq-say-face { position: relative; flex-shrink: 0; width: 54px; height: 54px; overflow: hidden; border-radius: 4px; background: linear-gradient(180deg, #2a2148, #171330); border: 1px solid rgba(255, 255, 255, .14); }
.mq-foreman-svg { position: absolute; left: 7px; top: 6px; width: 40px; height: 48px; }
.mq-say.is-typing .mq-foreman-svg { animation: mq-talk .18s steps(2) infinite; }
@keyframes mq-talk { 50% { transform: translateY(1px); } }
.mq-say-body { display: grid; gap: 4px; min-width: 0; }
.mq-say-ch { font-family: var(--font-pixel); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.mq-say-txt { min-height: 2.8em; font-size: 1.02rem; font-weight: 600; line-height: 1.4; color: #fff; }
.mq-say.is-typing .mq-say-txt::after { content: ""; display: inline-block; width: .5em; height: 1em; margin-left: 2px; vertical-align: -2px; background: color-mix(in srgb, var(--accent) 70%, #fff); animation: vv-blink .6s steps(2) infinite; }

/* ---------- Lado do formulário ---------- */
.jr-main { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px clamp(24px, 4vw, 56px) 24px;
  background: radial-gradient(70% 40% at 80% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%), radial-gradient(60% 40% at 0% 100%, rgba(107, 79, 216, .1), transparent 70%), var(--bg); }
.jr-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 700px; margin: 0 auto 18px; }
.jr-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.jr-brand img { height: 28px; width: auto; }
.jr-head-link { margin: 0; font-size: .9rem; color: var(--muted); }
.jr-head-link a { font-weight: 700; color: #fff; }

/* Progresso: um tijolo por passo (feito = na cor da casa, atual = em obra, o resto = vazio) */
.jr-prog { width: 100%; max-width: 700px; margin: 0 auto 16px; }
.jr-prog-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 8px; font-size: .8rem; color: var(--muted); }
.jr-prog-now b { font-family: var(--font-pixel); font-size: .72rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.jr-prog-count b { color: #fff; font-variant-numeric: tabular-nums; }
.jr-prog-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.jr-prog-b { display: block; width: 100%; margin: 0; padding: 4px 0 0; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; }
.jr-prog-b:disabled { cursor: default; }
.jr-prog-b:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.jr-prog-brick { position: relative; display: block; height: 12px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .05); transition: transform .4s var(--spring); }
.jr-prog-brick::after { content: ""; position: absolute; inset: 0; transform: translateY(-130%); transition: transform .55s var(--spring);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 85%, #fff), color-mix(in srgb, var(--accent) 72%, #000)); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .35); }
.jr-prog li.is-done .jr-prog-brick::after { transform: none; }
.jr-prog li.is-current .jr-prog-brick { box-shadow: 0 0 0 1.5px var(--accent), 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent); }
.jr-prog li.is-current .jr-prog-brick::after { transform: none; opacity: .9; background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--accent) 80%, #fff) 0 5px, #1a1424 5px 10px); }
.jr-prog-name { display: block; margin-top: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; color: #8a90a2; transition: color .3s; }
.jr-prog li.is-done .jr-prog-name { color: var(--text-2); }
.jr-prog li.is-current .jr-prog-name { color: #fff; font-weight: 700; }
@media (hover: hover) { .jr-prog-b:not(:disabled):hover .jr-prog-brick { transform: translateY(-2px); } .jr-prog-b:not(:disabled):hover .jr-prog-name { color: #fff; } }

/* Cartão do formulário: altura mínima da tela, a navegação sempre no mesmo lugar */
.jr-card { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 700px; min-height: calc(100vh - 170px); margin: 0 auto; padding: clamp(24px, 3vw, 34px) clamp(22px, 3vw, 36px) 0; border-radius: 24px;
  background: linear-gradient(165deg, rgba(31, 34, 51, .93), rgba(14, 16, 25, .95)); border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset, 0 24px 60px rgba(0, 0, 0, .5), 0 0 100px color-mix(in srgb, var(--accent) 10%, transparent); }
.jr-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 55%, transparent), transparent 35%, transparent 70%, rgba(94, 225, 255, .25)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.jr-card > .alert { margin-bottom: 18px; }

.jr-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; margin-bottom: 26px; }
.jr-step-head { display: flex; align-items: center; gap: 16px; }
.jr-step-num { flex-shrink: 0; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 14px; font-family: var(--font-pixel); font-size: 1.35rem; color: var(--accent-ink);
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 92%, #fff), color-mix(in srgb, var(--accent) 60%, #000)); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 26px color-mix(in srgb, var(--accent) 38%, transparent); }
.jr-step-hgroup { min-width: 0; }
.jr-step-hgroup .jr-eyebrow { margin: 0 0 6px; }
.jr-title { margin: 0; font-size: clamp(1.55rem, 2.3vw, 2.05rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
.jr-title:focus { outline: none; }
.jr-lead { margin: -4px 0 2px; max-width: 60ch; font-size: 1rem; line-height: 1.55; color: var(--text-2); }

/* Troca de passo encadeada: o que sai vai junto, o que entra chega em cascata */
.js .jr-step { display: none; }
.js .jr-step.is-active, .js .jr-step.is-leaving { display: grid; }
.js .jr-step.is-active > * { animation: jr-in .6s var(--ease) both; }
.js .jr-step.is-active > :nth-child(2) { animation-delay: .07s; }
.js .jr-step.is-active > :nth-child(3) { animation-delay: .14s; }
.js .jr-step.is-active > :nth-child(4) { animation-delay: .21s; }
.js .jr-step.is-active > :nth-child(5) { animation-delay: .28s; }
.js .jr-step.is-active > :nth-child(n+6) { animation-delay: .34s; }
.js .jr-step.is-active .jr-step-num { animation: jr-num .7s var(--spring) both .05s; }
.js .jr-step.is-leaving > * { animation: jr-out .2s ease-in both; }
.js .jr-step.is-leaving > :nth-child(2) { animation-delay: .03s; }
.js .jr-step.is-leaving > :nth-child(n+3) { animation-delay: .06s; }
.js .jr-card[data-dir="back"] .jr-step.is-active > * { animation-name: jr-in-back; }
.js .jr-card[data-dir="back"] .jr-step.is-leaving > * { animation-name: jr-out-back; }
.js .jr-card.is-first .jr-step.is-active > * { animation-name: jr-up; }
@keyframes jr-in { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes jr-in-back { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
@keyframes jr-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes jr-out { to { opacity: 0; transform: translateX(-26px); } }
@keyframes jr-out-back { to { opacity: 0; transform: translateX(26px); } }
@keyframes jr-num { 0% { opacity: 0; transform: perspective(300px) rotateX(-90deg) scale(.7); } 100% { opacity: 1; transform: none; } }
html:not(.js) .jr-step + .jr-step { padding-top: 32px; border-top: 1px solid var(--line); }
/* Os cartões de dentro também chegam um a um */
.js .jr-step.is-active .jr-grid > *, .js .jr-step.is-active .jr-plans > *, .js .jr-step.is-active .jr-promises > li, .js .jr-step.is-active .jr-chips > * { animation: vv-rise .55s var(--ease) both .2s; }
.js .jr-step.is-active .jr-grid > :nth-child(2), .js .jr-step.is-active .jr-plans > :nth-child(2), .js .jr-step.is-active .jr-promises > li:nth-child(2), .js .jr-step.is-active .jr-chips > :nth-child(2) { animation-delay: .27s; }
.js .jr-step.is-active .jr-grid > :nth-child(3), .js .jr-step.is-active .jr-plans > :nth-child(3), .js .jr-step.is-active .jr-promises > li:nth-child(3), .js .jr-step.is-active .jr-chips > :nth-child(3) { animation-delay: .34s; }
.js .jr-step.is-active .jr-grid > :nth-child(4), .js .jr-step.is-active .jr-chips > :nth-child(4) { animation-delay: .41s; }
.js .jr-step.is-active .jr-grid > :nth-child(5), .js .jr-step.is-active .jr-chips > :nth-child(5) { animation-delay: .48s; }
.js .jr-step.is-active .jr-grid > :nth-child(6) { animation-delay: .55s; }

/* Passo 1: promessas */
.jr-promises { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.jr-promises li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-content: start; padding: 18px 16px; overflow: hidden; border-radius: 16px; background: linear-gradient(170deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); border: 1px solid var(--line); transition: transform .4s var(--spring), border-color .25s; }
@media (hover: hover) { .jr-promises li:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } }
.jr-promise-ic { position: relative; width: 44px; height: 44px; margin-bottom: 6px; display: grid; place-items: center; overflow: hidden; border-radius: 13px; color: var(--accent-ink); background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #000)); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); }
.jr-promise-ic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); animation: vv-shine 4s ease-in-out infinite; }
.jr-promises li:nth-child(2) .jr-promise-ic::after { animation-delay: .5s; } .jr-promises li:nth-child(3) .jr-promise-ic::after { animation-delay: 1s; }
.jr-promises b { font-size: .98rem; line-height: 1.3; }
.jr-promises small { font-size: .84rem; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.jr-promises i { font-style: normal; color: var(--text-2); }
.jr-time { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .86rem; color: var(--muted); }
.jr-time .ic { width: 16px; height: 16px; flex-shrink: 0; }

/* Passo 2: nome grande, endereço e o "navegador" com o endereço */
.jr-field-xl input { min-height: 60px; padding: 14px 18px; font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }
.jr-slug .input-prefix { padding-right: 6px; border-right: 0; background: transparent; }
.jr-slug input { padding-left: 2px; font-family: var(--font-mono); }
.jr-slug-status { display: flex; align-items: center; gap: 8px; margin: 0; min-height: 1.4em; font-size: .85rem; color: var(--muted); }
.jr-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: #4a5068; }
.jr-slug-status[data-state="checking"] .jr-dot { background: var(--warn); animation: vv-blink .8s infinite; }
.jr-slug-status[data-state="ok"] { color: var(--ok); }
.jr-slug-status[data-state="ok"] .jr-dot { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.jr-slug-status[data-state="bad"] { color: var(--err); }
.jr-slug-status[data-state="bad"] .jr-dot { background: var(--err); }
.jr-urlcard { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #07080d; border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); transition: border-color .3s; }
.jr-urlcard-dots { display: flex; gap: 5px; } .jr-urlcard-dots i { width: 9px; height: 9px; border-radius: 50%; background: #3a3f52; }
.jr-urlcard-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: #12141e; font-family: var(--font-mono); font-size: .88rem; color: var(--muted); }
.jr-urlcard-url .ic { width: 14px; height: 14px; color: var(--ok); }
.jr-urlcard-url > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jr-urlcard-url b { display: inline-block; color: #fff; font-weight: 600; }
.jr-urlcard-url b.pop { animation: jr-pop .35s var(--spring); }
@keyframes jr-pop { 0% { transform: scale(1.15); } 100% { transform: none; } }
.jr-urlcard-badge > span { display: none; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.jr-urlcard-badge .ic { width: 13px; height: 13px; stroke-width: 3; }
.jr-urlcard-badge .is-ok { color: #04210f; background: var(--ok); }
.jr-urlcard-badge .is-bad { color: #2a0508; background: var(--err); }
.jr-urlcard-badge .is-wait { color: #2a1700; background: var(--warn); }
.jr-urlcard[data-state="ok"] { border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.jr-urlcard[data-state="bad"] { border-color: color-mix(in srgb, var(--err) 50%, transparent); }
.jr-urlcard[data-state="ok"] .is-ok, .jr-urlcard[data-state="bad"] .is-bad, .jr-urlcard[data-state="checking"] .is-wait { display: inline-flex; animation: jr-tag .4s var(--spring) both; }
@keyframes jr-tag { from { opacity: 0; transform: translateY(6px) scale(.8); } to { opacity: 1; transform: none; } }

/* Grades e escolhas */
.jr-fieldset { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.jr-fieldset legend { display: flex; align-items: center; gap: 8px; padding: 0; margin-bottom: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #a3a9ba; }
.jr-fieldset legend small { font-weight: 500; letter-spacing: 0; text-transform: none; color: #8a90a2; }
.jr-legend-count { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .02em; text-transform: none; color: #fff; background: color-mix(in srgb, var(--accent) 26%, rgba(255, 255, 255, .04)); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.jr-legend-count.pop { animation: jr-pop .4s var(--spring); }
.jr-grid { display: grid; gap: 12px; }
.jr-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jr-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jr-grid-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.jr-choice:has(input:focus-visible), .jr-swatch:has(input:focus-visible) { outline: 3px solid #fff; outline-offset: 3px; }
.jr-pick-team .vv-art { aspect-ratio: 4 / 3; }
.jr-pick-team .jr-choice-txt b { font-size: 1.06rem; }
.jr-pick-room .vv-tilt { flex-direction: row; align-items: stretch; min-height: 82px; }
.jr-pick-room .vv-art { flex-shrink: 0; width: 32%; aspect-ratio: auto; }
.jr-pick-room .jr-choice-txt { align-content: center; padding: 10px 40px 10px 12px; }
.jr-pick-room .jr-choice-txt small { font-size: .76rem; }
.jr-room-more { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; font-size: .84rem; line-height: 1.35; color: var(--muted); border: 1.5px dashed rgba(255, 255, 255, .16); }
.jr-room-more .ic { width: 20px; height: 20px; flex-shrink: 0; color: color-mix(in srgb, var(--accent) 70%, #fff); }
.jr-agent .vv-art { aspect-ratio: 16 / 10; }
.has-error .vv-tilt { border-color: color-mix(in srgb, var(--err) 60%, transparent); }

/* Área: fichas com ícone */
.jr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.jr-chip { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.jr-chip input { position: absolute; opacity: 0; pointer-events: none; }
.jr-chip > span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 16px 9px 12px; border-radius: 999px; font-size: .92rem; color: var(--text-2); background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); transition: transform .4s var(--spring), border-color .2s, background-color .2s, color .2s; }
.jr-chip > span .ic { width: 18px; height: 18px; color: #8a90a2; transition: color .2s; }
.jr-chip > span b { font-weight: 600; }
@media (hover: hover) { .jr-chip:hover > span { transform: translateY(-2px); border-color: rgba(255, 255, 255, .3); color: #fff; } }
.jr-chip input:checked + span { color: #fff; background: color-mix(in srgb, var(--accent) 22%, #141724); border-color: var(--accent); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 25%, transparent); }
.jr-chip input:checked + span .ic { color: color-mix(in srgb, var(--accent) 60%, #fff); }
.jr-chip input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }
.jr-chip.is-pop > span { animation: vv-pop .5s var(--spring); }

/* Fundador */
.jr-fields-2 { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jr-user { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin: 2px 0 0; padding: 8px 12px; border-radius: 10px; font-size: .86rem; color: var(--text-2); background: rgba(94, 225, 255, .06); border: 1px solid rgba(94, 225, 255, .2); animation: vv-rise .4s var(--ease) both; }
.jr-user[hidden] { display: none; }
.jr-user .ic { width: 16px; height: 16px; color: var(--cyan); }
.jr-user b { font-family: var(--font-mono); color: #fff; }
.jr-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 2px; }
.jr-meter i { position: relative; height: 5px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .08); }
.jr-meter i::after { content: ""; position: absolute; inset: 0; background: var(--mc, var(--ok)); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.jr-meter[data-meter="1"] { --mc: var(--err); } .jr-meter[data-meter="2"] { --mc: var(--warn); } .jr-meter[data-meter="3"] { --mc: #9be35a; } .jr-meter[data-meter="4"] { --mc: var(--ok); }
.jr-meter[data-meter="1"] i:nth-child(-n+1)::after, .jr-meter[data-meter="2"] i:nth-child(-n+2)::after, .jr-meter[data-meter="3"] i:nth-child(-n+3)::after, .jr-meter[data-meter="4"] i::after { transform: none; }

/* Cor da casa */
.jr-swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.jr-swatch { position: relative; cursor: pointer; border-radius: 50%; }
.jr-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.jr-swatch > span { display: block; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 60%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 60%, #000)); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--line-2); transition: transform .45s var(--spring); }
@media (hover: hover) { .jr-swatch:hover > span { transform: scale(1.1) rotate(-8deg); } }
.jr-swatch input:checked + span { transform: scale(1.14); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--c), 0 0 22px var(--c); }

.jr-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 12px; font-size: .88rem; color: var(--text-2); background: rgba(61, 220, 132, .06); border: 1px solid rgba(61, 220, 132, .2); }
.jr-note .ic { width: 18px; height: 18px; margin-top: 1px; color: var(--ok); }

/* Inauguração: planos, ficha e termos */
.jr-step .jr-plan-art { aspect-ratio: 16 / 8; }
.jr-ficha { position: relative; padding: 14px 16px 16px; border-radius: 16px; border: 1px dashed rgba(94, 225, 255, .35);
  background: linear-gradient(rgba(94, 225, 255, .045) 1px, transparent 1px) 0 0 / 100% 20px, linear-gradient(90deg, rgba(94, 225, 255, .045) 1px, transparent 1px) 0 0 / 20px 100%, rgba(10, 22, 34, .55); }
.jr-ficha-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-family: var(--font-pixel); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.jr-ficha-title .ic { width: 16px; height: 16px; }
.jr-ficha dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.jr-ficha dl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 6px; min-width: 0; padding: 8px 6px 8px 12px; border-radius: 10px; background: rgba(11, 13, 20, .6); border: 1px solid rgba(94, 225, 255, .14); }
.js .jr-step.is-active .jr-ficha dl > div { animation: vv-rise .45s var(--ease) both .3s; }
.js .jr-step.is-active .jr-ficha dl > div:nth-child(2) { animation-delay: .35s; } .js .jr-step.is-active .jr-ficha dl > div:nth-child(3) { animation-delay: .4s; } .js .jr-step.is-active .jr-ficha dl > div:nth-child(4) { animation-delay: .45s; } .js .jr-step.is-active .jr-ficha dl > div:nth-child(5) { animation-delay: .5s; } .js .jr-step.is-active .jr-ficha dl > div:nth-child(6) { animation-delay: .55s; }
.jr-ficha dt { grid-column: 1; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.jr-ficha dd { grid-column: 1; margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 600; color: #fff; }
.jr-edit { grid-column: 2; grid-row: 1 / 3; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; transition: color .2s, background-color .2s; }
.jr-edit .ic { width: 16px; height: 16px; }
.jr-edit:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.jr-edit:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
html:not(.js) .jr-edit { display: none; }
.jr-terms { padding: 12px 14px; border-radius: 12px; font-size: .92rem; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); transition: border-color .25s, background-color .25s; }
.jr-terms:has(input:checked) { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: rgba(61, 220, 132, .05); }
.jr-terms input { accent-color: var(--accent); }
.jr-terms.has-error { color: var(--err); border-color: color-mix(in srgb, var(--err) 50%, transparent); }
.jr-secure { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .84rem; color: var(--muted); }
.jr-secure .ic { width: 16px; height: 16px; color: var(--ok); }

/* Navegação: presa embaixo do cartão (no computador fica sempre à vista) */
.jr-nav { position: sticky; z-index: 5; bottom: 0; display: flex; align-items: center; gap: 12px; margin: auto calc(-1 * clamp(22px, 3vw, 36px)) 0; padding: 18px clamp(22px, 3vw, 36px) 22px; border-radius: 0 0 24px 24px;
  background: linear-gradient(180deg, rgba(16, 18, 28, .92), rgba(13, 15, 23, .99)); border-top: 1px solid var(--line); }
.jr-nav .btn .ic { width: 18px; height: 18px; }
.jr-next, .jr-submit { position: relative; min-width: 230px; margin-left: auto; overflow: hidden; }
.jr-next::after, .jr-submit::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .3) 48%, transparent 66%); transform: translateX(-120%); animation: vv-shine 5s ease-in-out infinite 1.5s; }
.jr-next .ic, .jr-submit .ic { transition: transform .3s var(--spring); }
.jr-next:hover .ic { transform: translateX(4px); }
.jr-submit:hover .ic { transform: rotate(-12deg) scale(1.15); }
.jr-kbd { font-size: .78rem; color: #8a90a2; }
.jr-kbd kbd { font-size: .72rem; }
.jr-back[hidden], .jr-next[hidden], .jr-submit[hidden], .jr-kbd[hidden] { display: none; }
html:not(.js) .jr-back, html:not(.js) .jr-next, html:not(.js) .jr-kbd, html:not(.js) .jr-prog { display: none; }
.jr-submit { --btn-fg: var(--accent-ink); color: var(--accent-ink); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), color-mix(in srgb, var(--accent) 82%, #000)); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 -2px 0 rgba(0, 0, 0, .2) inset, 0 4px 0 color-mix(in srgb, var(--accent) 45%, #000), 0 8px 24px color-mix(in srgb, var(--accent) 40%, transparent); }
.jr-submit:hover { color: var(--accent-ink); }

/* Voo de uma escolha até a maquete */
.jr-fly { position: fixed; z-index: 80; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; pointer-events: none; background: var(--accent); box-shadow: 0 0 0 2px #fff, 0 0 14px var(--accent); will-change: transform, opacity; }

/* Inauguração (antes de ir ao pagamento) */
.jr-final { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(6, 7, 12, .74); opacity: 0; transition: opacity .35s; }
.jr-final[hidden] { display: none; }
.jr-final.is-in { opacity: 1; }
.jr-final-card { position: relative; width: min(460px, 100%); padding: 46px 28px 30px; overflow: hidden; border-radius: 24px; text-align: center; background: linear-gradient(165deg, #22253a, #0e1019); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 120px color-mix(in srgb, var(--accent) 25%, transparent); transform: translateY(24px) scale(.94); transition: transform .6s var(--spring); }
.jr-final.is-in .jr-final-card { transform: none; }
.jr-final-ribbon { position: absolute; left: 0; right: 0; top: 18px; height: 12px; }
.jr-final-ribbon i { position: absolute; top: 0; width: 51%; height: 100%; background: linear-gradient(180deg, #ff6b74, #c81d30); box-shadow: 0 3px 0 #7e0f1d; transition: transform .9s var(--ease), opacity .9s; }
.jr-final-rib-l { left: 0; transform-origin: 0 50%; } .jr-final-rib-r { right: 0; transform-origin: 100% 50%; }
.jr-final-ribbon b { position: absolute; left: 50%; top: 50%; width: 30px; height: 24px; margin: -12px 0 0 -15px; background: radial-gradient(circle at 50% 50%, #ffd27a 0 18%, transparent 19%), conic-gradient(from 45deg, #ff6b74 0 25%, transparent 0 50%, #ff6b74 0 75%, transparent 0); transition: transform .8s var(--ease), opacity .6s; }
.jr-final.is-cut .jr-final-rib-l { transform: translateY(40px) rotate(64deg); opacity: 0; }
.jr-final.is-cut .jr-final-rib-r { transform: translateY(40px) rotate(-64deg); opacity: 0; }
.jr-final.is-cut .jr-final-ribbon b { transform: translateY(60px) scale(.4); opacity: 0; }
.jr-final .jr-eyebrow { justify-content: center; margin-top: 8px; }
.jr-final-name { margin: 6px 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-pixel); font-size: clamp(1.2rem, 5vw, 1.7rem); text-transform: uppercase; color: #fff; text-shadow: 0 0 2px #fff, 0 0 10px var(--accent), 0 0 24px var(--accent); }
.jr-final-title { margin: 0 0 6px; font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; opacity: 0; transform: scale(.7); transition: transform .5s var(--spring) .45s, opacity .3s .45s; }
.jr-final.is-cut .jr-final-title { opacity: 1; transform: none; }
.jr-final-sub { margin: 0 0 18px; color: var(--text-2); }
.jr-final-bar { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .08); }
.jr-final-bar i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }
.jr-final.is-cut .jr-final-bar i { transform: scaleX(1); transition: transform 1.3s cubic-bezier(.4, 0, .2, 1) .2s; }

/* Responsivo (computador) */
@media (max-width: 1280px) { .jr { grid-template-columns: minmax(0, 1fr) minmax(560px, 1fr); } .mq-hud-stats small { display: none; } }
@media (max-width: 1100px) and (min-width: 961px) { .jr-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jr-pick-team .vv-art { aspect-ratio: 16 / 9; } .jr-promises { grid-template-columns: minmax(0, 1fr); } }
@media (max-height: 820px) and (min-width: 961px) { .jr-pick-team .vv-art { aspect-ratio: 16 / 10; } .jr-step { gap: 16px; } .mq-say-txt { font-size: .95rem; } }
/* ==========================================================================
   Entrar
   ========================================================================== */
.lg-page { background: var(--bg); min-height: 100vh; }
.lg { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(460px, .85fr); min-height: 100vh; }
.lg-scene { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; isolation: isolate; contain: paint;
  background: radial-gradient(60% 50% at 40% 40%, rgba(226, 44, 63, .35), transparent 70%), radial-gradient(50% 50% at 70% 75%, rgba(107, 79, 216, .4), transparent 70%), linear-gradient(160deg, #170f2a, #0b0d14 60%); }
.lg-art { position: absolute; inset: -3%; z-index: 0; transition: transform .9s var(--ease); }
.lg-zoom { position: absolute; inset: 0; overflow: hidden; }
.lg-zoom img { width: 100%; height: 100%; object-fit: cover; }
.lg-art.no-img img { display: none; }
@keyframes lg-zoom { from { transform: scale(1); } to { transform: scale(1.07); } }
.lg-fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
html:not(.js) .lg-fx { display: none; }
.lg-star { position: absolute; width: 2px; height: 2px; background: #fff; box-shadow: 0 0 4px #fff, 0 0 8px rgba(160, 200, 255, .8); opacity: .2; animation: lg-twinkle var(--t) ease-in-out var(--d) infinite; }
.lg-star.is-big { width: 3px; height: 3px; }
.lg-star.is-big::before, .lg-star.is-big::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(255, 255, 255, .7); }
.lg-star.is-big::before { width: 11px; height: 1px; transform: translate(-50%, -50%); }
.lg-star.is-big::after { width: 1px; height: 11px; transform: translate(-50%, -50%); }
@keyframes lg-twinkle { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.2); } }
.lg-win { position: absolute; background: #ffd58a; box-shadow: 0 0 6px #ffb547, 0 0 14px rgba(255, 181, 71, .5); opacity: 0; animation: lg-win var(--t) steps(1) var(--d) infinite; }
@keyframes lg-win { 0% { opacity: 0; } 18% { opacity: .95; } 70% { opacity: .95; } 74% { opacity: .3; } 76% { opacity: .95; } 92% { opacity: 0; } 100% { opacity: 0; } }
.lg-meteor { position: absolute; left: 8%; top: 6%; width: 90px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff); opacity: 0; transform: rotate(20deg); animation: lg-meteor 11s ease-in 3s infinite; }
@keyframes lg-meteor { 0%, 88% { opacity: 0; transform: rotate(20deg) translateX(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: rotate(20deg) translateX(320px); } }
.lg-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(40% 30% at 60% 40%, rgba(255, 200, 120, .12), transparent 70%), linear-gradient(180deg, rgba(11, 13, 20, .2), transparent 30%, transparent 45%, rgba(11, 13, 20, .96) 92%), linear-gradient(90deg, transparent 70%, rgba(11, 13, 20, .85)); }
.lg-quote { position: absolute; z-index: 4; left: clamp(28px, 5vw, 72px); right: 28px; bottom: clamp(32px, 8vh, 80px); max-width: 620px; }
.lg-live { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 5px 12px; border-radius: 999px; font-family: var(--font-pixel); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(11, 13, 20, .82); border: 1px solid rgba(255, 255, 255, .15); }
.lg-live i, .pn-pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.lg-live i::after, .pn-pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--ok); animation: vv-ring 1.8s var(--ease) infinite; }
.lg-lines { display: grid; }
.lg-lines-item { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.lg-lines-item.is-active { opacity: 1; transform: none; }
.lg-line { margin: 0 0 10px; font-size: clamp(1.8rem, 3.4vw, 3rem); font-weight: 800; line-height: 1.08; letter-spacing: -.025em; color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, .7); }
.lg-sub { margin: 0; font-size: 1.05rem; color: var(--text-2); text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }

.lg-main { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px clamp(20px, 4vw, 56px);
  background: radial-gradient(70% 45% at 70% 10%, rgba(226, 44, 63, .14), transparent 70%), radial-gradient(60% 40% at 20% 100%, rgba(107, 79, 216, .12), transparent 70%), var(--bg); }
.lg-card { position: relative; isolation: isolate; width: 100%; max-width: 430px; padding: 36px 32px 28px; border-radius: 24px; overflow: hidden;
  background: linear-gradient(165deg, rgba(31, 34, 51, .9), rgba(14, 16, 25, .93)); border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset, 0 24px 60px rgba(0, 0, 0, .5), 0 0 100px rgba(226, 44, 63, .12); animation: lg-rise .7s var(--ease) both; }
.lg-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(150deg, rgba(229, 72, 77, .6), transparent 35%, transparent 70%, rgba(94, 225, 255, .3)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.lg-card-glow { position: absolute; z-index: -1; left: 50%; top: -60%; width: 140%; aspect-ratio: 1; margin-left: -70%; border-radius: 50%; opacity: .55; pointer-events: none;
  background: conic-gradient(from 0deg, transparent, rgba(229, 72, 77, .35) 12%, transparent 28%, rgba(94, 225, 255, .25) 50%, transparent 66%, rgba(139, 108, 255, .3) 82%, transparent); }
.lg-card > :not(.lg-card-glow) { animation: lg-rise .6s var(--ease) both; }
.lg-card > :nth-child(3) { animation-delay: .08s; } .lg-card > :nth-child(4) { animation-delay: .14s; } .lg-card > :nth-child(5), .lg-card > :nth-child(6) { animation-delay: .2s; } .lg-card > :nth-child(7) { animation-delay: .26s; } .lg-card > :nth-child(8) { animation-delay: .32s; } .lg-card > :nth-child(9) { animation-delay: .38s; }
@keyframes lg-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.lg-logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 26px; text-decoration: none; }
.lg-logo img { height: 34px; width: auto; }
.lg-title { margin: 0 0 6px; font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; text-align: center; }
.lg-sub2 { margin: 0 0 24px; text-align: center; color: var(--muted); font-size: .95rem; }
.lg-form { gap: 16px; }
.lg-card .alert { margin-bottom: 16px; animation: vv-shake .45s var(--ease); }
.lg-label-row { display: flex; justify-content: space-between; align-items: baseline; }
.lg-label-row label { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #a3a9ba; }
.lg-forgot { border: 0; background: none; padding: 0; font: inherit; font-size: .84rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.lg-forgot:hover { color: #fff; text-decoration: underline; }
.lg-forgot-box { margin: 4px 0 0; padding: 10px 12px; border-radius: 10px; font-size: .86rem; color: var(--text-2); background: rgba(94, 225, 255, .06); border: 1px solid rgba(94, 225, 255, .2); animation: vv-rise .35s var(--ease) both; }
.lg-forgot-box[hidden] { display: none; }
.lg-submit { position: relative; overflow: hidden; margin-top: 6px; }
.lg-submit::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .3) 48%, transparent 66%); transform: translateX(-120%); animation: vv-shine 5s ease-in-out infinite 1.2s; pointer-events: none; }
.lg-submit .ic { transition: transform .3s var(--spring); }
.lg-submit:hover .ic { transform: translateX(4px); }
.lg-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 14px; font-size: .82rem; color: #8a90a2; }
.lg-divider::before, .lg-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.lg-found { gap: 10px; }
.lg-found-ic { flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: rgba(229, 72, 77, .14); transition: transform .4s var(--spring); }
.lg-found:hover .lg-found-ic { transform: rotate(-8deg) scale(1.1); }
.lg-found .ic { width: 18px; height: 18px; color: var(--red-2); }
.lg-found small { margin-left: auto; padding: 2px 8px; border-radius: 999px; font-size: .72rem; color: var(--ok); background: rgba(61, 220, 132, .1); border: 1px solid rgba(61, 220, 132, .3); }
.lg-perks { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px; margin: 18px 0 0; padding: 0; }
.lg-perks li { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); }
.lg-perks .ic { width: 15px; height: 15px; color: var(--cyan); }
@media (max-width: 960px) {
  .lg { display: block; }
  .lg-scene { position: relative; height: 34vh; min-height: 230px; max-height: 360px; }
  .lg-glow { background: linear-gradient(180deg, rgba(11, 13, 20, .1), transparent 25%, rgba(11, 13, 20, .97)); }
  .lg-quote { bottom: 18px; left: 20px; }
  .lg-line { font-size: 1.4rem; }
  .lg-sub { display: none; }
  .lg-live { margin-bottom: 10px; }
  .lg-main { padding: 0 16px 32px; }
  .lg-card { margin-top: 8px; padding: 28px 20px 24px; }
}

/* ==========================================================================
   Cenários de fundo (ui.ts → backdrop()): imagem com movimento lento, luzes e sombra para o contraste.
   A imagem é fundo CSS da própria camada (medido: um <img> numa camada separada, ou um drift/parallax contínuo,
   tirava 5 a 25 FPS do desktop ao rolar). Por quadro só mudam opacity (luzes em passos lentos) e, só na troca de
   cenário, opacity/transform da camada que entra. .vx-bg-sticky: o cenário fica parado na tela enquanto o bloco rola
   (sticky dentro do bloco, sem background-attachment: fixed, que é caro no celular).
   ========================================================================== */
.vx-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: clip; }
.vx-bg-in { position: absolute; inset: 0; overflow: hidden; }
.vx-bg-sticky .vx-bg-in { position: sticky; top: 0; inset: auto; height: 100vh; }
.vx-bg-img, .vx-bg-fade { position: absolute; inset: 0; background: var(--bg-d) center / cover no-repeat; }
@media (max-width: 760px) { .vx-bg-img, .vx-bg-fade { background-image: var(--bg-m); } }
/* Troca de cenário: a camada nova aparece e "assenta" por cima; no fim vira o fundo e a camada some (custo só na troca) */
.vx-bg-fade { opacity: 0; transform: scale(1.05); transition: opacity 1s var(--ease), transform 1.8s var(--ease); will-change: opacity, transform; }
.vx-bg-fade.is-in { opacity: 1; transform: none; }
.vx-bg-lamps { position: absolute; inset: 0; }
.vx-lamp { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; opacity: .2;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 60%, transparent), color-mix(in srgb, var(--c) 18%, transparent) 55%, transparent); animation: vx-lamp var(--t) steps(8) var(--d) infinite; contain: strict; }
@keyframes vx-lamp { 50% { opacity: .75; } }
.vx-bg-shade { position: absolute; inset: 0; }

/* Jornada (desktop): cenário atrás da coluna do formulário */
:where(.jr-main > :not(.vx-bg)) { position: relative; z-index: 1; }
.jr-bg .vx-bg-shade { background: radial-gradient(80% 50% at 80% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), linear-gradient(180deg, rgba(11, 13, 20, .5), rgba(11, 13, 20, .28) 35%, rgba(11, 13, 20, .5) 75%, rgba(11, 13, 20, .82)); }
@media (min-width: 961px) { .jr-bg .vx-bg-lamps { display: none; } }
/* Entrar (desktop): cenário atrás do cartão */
.lg-main { position: relative; }
:where(.lg-main > :not(.vx-bg)) { position: relative; z-index: 1; }
.lg-bg .vx-bg-shade { background: radial-gradient(60% 45% at 50% 50%, rgba(11, 13, 20, .55), transparent 80%), linear-gradient(180deg, rgba(11, 13, 20, .45), rgba(11, 13, 20, .2) 40%, rgba(11, 13, 20, .7)); }

/* ==========================================================================
   Celular e tablet em pé (≤ 960 px)
   ========================================================================== */
@media (max-width: 960px) {
  /* Cenário de tela inteira (retrato) atrás de tudo */
  .jr-bg, .lg-bg { position: fixed; inset: 0; }
  .jr-bg .vx-bg-shade { background: linear-gradient(180deg, rgba(11, 13, 20, .6), rgba(11, 13, 20, .3) 30%, rgba(11, 13, 20, .5) 70%, rgba(11, 13, 20, .82)); }

  /* Jornada: a maquete vira um palco no topo; a câmera chega mais perto do prédio */
  .jr-page { background: #0b0d14; }
  html:has(.jr-page) { scroll-padding: 64px 0 96px; }
  .jr { display: block; padding-top: 60px; }
  .mq { position: relative; z-index: 2; height: clamp(280px, 46vh, 400px); height: clamp(280px, 46svh, 400px); margin: 0 12px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 14px 34px rgba(0, 0, 0, .5); }
  .mq-hud { top: 10px; left: 10px; right: 10px; gap: 6px; }
  .mq-hud-obra, .mq-hud-stats { gap: 8px; padding: 5px 9px; border-radius: 10px; }
  .mq-hud-obra > b { font-size: .8rem; }
  .mq-hud-bar { width: 40px; height: 6px; }
  .mq-hud-stats { gap: 10px; }
  .mq-hud-stats small { display: none; }
  .mq-hud-stats .ic { width: 14px; height: 14px; }
  .mq-hud-stats b { font-size: .74rem; }
  .mq-say { left: 8px; right: 8px; bottom: 8px; gap: 9px; align-items: center; padding: 7px 10px 7px 7px; border-width: 1.5px; box-shadow: 0 0 0 2px #05060a, 0 10px 24px rgba(0, 0, 0, .5); }
  .mq-say-face { width: 34px; height: 34px; }
  .mq-foreman-svg { left: 4px; top: 3px; width: 25px; height: 31px; }
  .mq-say-ch { display: none; }
  .mq-say-txt { min-height: 2.5em; font-size: .82rem; line-height: 1.25; }
  .mq-blade, .mq-bot-hi, .mq-key, .mq-tag, .mq-key-float { display: none; }

  .jr-head { position: absolute; z-index: 10; top: 12px; left: 14px; right: 14px; width: auto; max-width: none; margin: 0; }
  .jr-head-q { display: none; }
  .jr-head-link { padding: 6px 12px; border-radius: 999px; background: rgba(11, 13, 20, .82); border: 1px solid rgba(255, 255, 255, .14); }
  .jr-head-link a { display: inline-block; padding: 10px 2px; margin: -10px 0; }
  .jr-main { position: static; padding: 0 12px calc(98px + env(safe-area-inset-bottom)); background: none; }
  /* Progresso: preso no topo ao rolar */
  .jr-prog { position: sticky; top: 0; z-index: 25; width: auto; max-width: none; margin: 10px -12px 12px; padding: 8px 16px; background: rgba(11, 13, 20, .97); border-bottom: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
  .jr-prog-top { margin-bottom: 4px; }
  .jr-prog-name { display: none; }
  .jr-prog-brick { height: 10px; }
  .jr-prog-b { padding: 6px 0; }
  .jr-card { z-index: 3; min-height: 0; padding: 20px 16px 0; border-radius: 20px; background: linear-gradient(165deg, rgba(26, 29, 44, .9), rgba(12, 14, 22, .94)); }
  .jr-step { gap: 18px; margin-bottom: 10px; }
  .js .jr-card > .jr-step.is-active { margin-bottom: 10px; }
  .jr-step-head { gap: 12px; }
  .jr-step-num { width: 46px; height: 46px; border-radius: 12px; font-size: 1.05rem; }
  .jr-title { font-size: 1.42rem; }
  .jr-lead { font-size: .95rem; }
  .jr-promises { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .jr-promises li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 12px 14px; }
  .jr-promise-ic { grid-row: 1 / 3; margin: 0; align-self: center; }
  /* Botões fixos embaixo, alvos grandes */
  .jr-nav { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-radius: 0; background: rgba(11, 13, 20, .97); border-top: 1px solid var(--line-2); }
  html:not(.js) .jr-nav { position: static; padding: 20px 0 0; background: none; border: 0; }
  .jr-nav .btn { min-height: 52px; }
  .jr-next, .jr-submit { flex: 1; min-width: 0; }
  .jr-back { min-width: 52px; justify-content: center; }
  .jr-kbd { display: none; }
  .jr-eye { width: 44px; height: 44px; right: 2px; }
  .jr-swatches { gap: 14px; }
  .jr-legal a, .pn-foot a { display: inline-block; padding: 8px 2px; }
  .jr-fly { display: none; }
  .jr-final { padding: 16px; }

  /* Entrar: cenário de tela inteira e o cartão por cima */
  .lg { display: block; min-height: 100vh; min-height: 100svh; }
  .lg-scene { display: none; }
  .lg-main { min-height: 100vh; min-height: 100svh; justify-content: center; padding: calc(20px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom)); background: #0b0d14; }
  .lg-card { margin: 0; padding: 26px 20px 22px; background: linear-gradient(165deg, rgba(31, 34, 51, .84), rgba(14, 16, 25, .9)); }
  .lg-found { gap: 8px; padding-inline: 14px; }
  .lg-logo { margin-bottom: 18px; }
  .lg-submit, .lg-found { min-height: 54px; font-size: 1.05rem; }
  .lg-forgot { padding: 10px 4px; margin: -10px 0; }
  .lg-bg .vx-bg-shade { background: linear-gradient(180deg, rgba(11, 13, 20, .3), rgba(11, 13, 20, .15) 35%, rgba(11, 13, 20, .6)); }
}
@media (max-width: 640px) {
  .jr-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-pick-team .vv-art { aspect-ratio: 16 / 10; }
  .jr-grid-rooms { grid-template-columns: minmax(0, 1fr); }
  .jr-pick-room .vv-tilt { min-height: 74px; }
  .jr-pick-room .vv-art { width: 28%; }
  .jr-plans { grid-template-columns: minmax(0, 1fr); }
  .jr-plan .vv-tilt { flex-direction: row; }
  .jr-plan-art, .jr-step .jr-plan-art { width: 30%; flex-shrink: 0; aspect-ratio: auto; }
  .jr-plan-badge { left: 6px; right: auto; top: auto; bottom: 8px; padding: 3px 7px; font-size: .58rem; }
  .jr-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .jr-agent .vv-tilt { flex-direction: row; align-items: stretch; }
  .jr-agent .vv-art { width: 30%; min-height: 84px; flex-shrink: 0; aspect-ratio: auto; }
  .jr-agent .jr-choice-txt { align-content: center; padding: 12px 40px 12px 14px; }
  .jr-fields-2 { grid-template-columns: minmax(0, 1fr); }
  .jr-ficha dl { grid-template-columns: minmax(0, 1fr); }
  .jr-grid { gap: 10px; }
  .jr-choice-txt { padding: 10px 11px 12px; }
  .jr-choice-txt small { font-size: .76rem; }
}
@media (max-width: 560px) {
  .jr-head-link { font-size: .82rem; }
  .jr-slug .input-prefix, .jr-slug .input-suffix { display: none; }
  .jr-slug input { padding-left: 14px; }
  .jr-urlcard { padding: 10px; }
  .jr-urlcard-dots { display: none; }
  .jr-urlcard-url { font-size: .8rem; }
  .jr-back span { display: none; }
  .jr-back { padding-inline: 14px; }
  .jr-chip > span { padding: 8px 13px 8px 10px; font-size: .88rem; }
}
/* Toque: sem inclinação; resposta ao apertar */
@media (hover: none) {
  .jr-pick:active .vv-tilt { transform: scale(.97); transition-duration: .08s; }
  .jr-promises li:active { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
  .jr-swatch:active > span { transform: scale(.92); }
  .vv-glare { display: none; }
}

/* Movimento reduzido: tudo parado (o conteúdo é o mesmo) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .vv-flies, .lg-meteor, .lg-card-glow { display: none; }
  .jr-img, .jr-img.is-active, .jr-slide { transform: none; }
  .lg-win { opacity: .8; }
  .vx-bg-fade { transform: none; }
  .vx-lamp { animation: none; }
  .vx-lamp { opacity: .45; }
}
/* Aparelho fraco (vivo.js → .vv-lite) ou tela pequena: menos luzes no cenário */
.vv-lite .vx-lamp:nth-child(n+3) { display: none; }
@media (max-width: 760px) { .vx-lamp:nth-child(n+5) { display: none; } }
/* Movimento reduzido na maquete: o prédio aparece pronto para cada passo, sem câmera nem voo */
@media (prefers-reduced-motion: reduce) {
  .mq-world { transition: none; }
  .mq-flag, .mq-hook > i, .mq-hook > svg, .mq-crane-led, .mq-bot-in, .mq-av > svg { animation: none !important; }
  .jr-fly, .mq-paint { display: none; }
}