/*
 * Design system "Bailder — clean tech" — rebrand 03/jul.
 * Estilo OpenAI/Anthropic: branco & preto, muito respiro, tipografia refinada.
 * Detalhes (não tudo) em NEON LED colorido. O "B" da wordmark tem LED animado
 * (cores girando no mesmo lugar). Zero hex literal em componente — só var().
 */

/* ---------- Fontes (self-host — Lora fica como serifa opcional de citação) ---------- */
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/lora-700italic-82a35f8d.woff2") format("woff2");
}

/* Inter — face própria (tira o look "fonte de sistema") */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/inter-400-1e94a563.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/inter-500-5949f5fc.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/inter-600-a957bd0d.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/inter-700-cbc762c0.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  /* base clean — bege/cinza QUENTE (Anthropic/OpenAI), levíssimo puxado pro amarelado */
  --white:     #fffefb;   /* superfícies/cards — quase branco (destaca do bege) */
  --paper:     #f1eee5;   /* fundo do site — bege-cinza quente, hair de amarelo */
  --ink:       #191714;   /* texto — quase-preto quente */
  --ink-2:     #26231e;
  --gray-700:  #47423a;   /* texto secundário quente (~9:1 no bege) */
  --gray-500:  #5f5a51;   /* muted — AA (~6:1 no bege) */
  --gray-400:  #736d63;   /* faded — AA (~4.5:1 no bege) */
  --gray-200:  #d7d1c2;   /* bordas quentes (visíveis no fundo) */
  --gray-100:  #e9e5d9;   /* superfícies quentes */

  /* NEON LED (detalhes/acentos — nunca preencher tudo) */
  --neon-cyan:    #00e0ff;
  --neon-blue:    #4d7cff;
  --neon-violet:  #8a45ff;
  --neon-magenta: #c837ff;
  --neon-pink:    #ff2d9b;
  /* degradê de acento = LED RGB COLORIDO (várias cores ao mesmo tempo) — o "tubo de led" */
  --neon-grad: linear-gradient(115deg, var(--neon-cyan), var(--neon-blue) 26%, var(--neon-violet) 50%, var(--neon-magenta) 72%, var(--neon-pink));
  /* B-assinatura (fonte única): preto → metálico → neon (a fita de LED do "B" da marca) */
  --b-grad: linear-gradient(122deg, var(--led-base) 0%, var(--led-base) 30%, #4b4b54 35%, #8f8f9c 39%, #dcdce4 42.5%, var(--neon-cyan) 47%, var(--neon-blue) 54%, var(--neon-violet) 62%, var(--neon-magenta) 72%, var(--neon-pink) 84%, var(--neon-pink) 100%);
  /* tiers (verde/amarelo/vermelho) — tokens em vez de hex solto */
  --tier-verde: #16a34a; --tier-amarelo: #d9a400; --tier-vermelho: #e5484d;
  --accent: #2f7dff;                     /* acento sólido decorativo (azul-led) */
  --accent-text: #175cd3;                /* link/TEXTO — azul legível AA (~6:1 no bege), sem roxo */

  /* semânticas (mantém nomes antigos p/ compat com o markup) */
  --amarelo: var(--accent);              /* legado -> vira acento neon */
  --amarelo-escuro: var(--neon-magenta);
  --amarelo-marca: rgba(45, 130, 255, .16);   /* marca-texto azul-LED (não roxo) */
  --creme: var(--paper);
  --areia: var(--gray-100);
  --sepia: var(--accent);
  --tinta: var(--ink);
  --tinta-suave: var(--gray-700);
  --papel-card: var(--white);
  --verde-musgo: var(--neon-cyan);
  --verde-carimbo: #0f9d78;
  --terracota: #e5484d;
  --sombra-papel: rgba(10, 10, 20, .06);

  --color-bg: var(--paper);
  --color-bg-card: var(--white);
  --color-bg-elevated: var(--gray-100);
  --color-bg-hover: var(--gray-100);
  --color-border: var(--gray-200);
  --color-border-strong: var(--ink);
  --color-text: var(--ink);
  --color-text-muted: var(--gray-500);
  --color-text-faded: var(--gray-400);
  --color-primary: var(--ink);
  --color-accent: var(--accent);
  --color-success: var(--neon-cyan);
  --color-danger: var(--terracota);

  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px;
  --space-xl: 32px; --space-2xl: 48px;
  /* respiro grande FLUIDO: desktop igual (teto), mobile ganha densidade (mata bege morto) */
  --space-3xl: clamp(48px, 9vw, 80px); --space-4xl: clamp(64px, 12vw, 120px);

  /* raios SÓBRIOS e retos (nada de hand-drawn) */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-full: 9999px;

  /* sombras suaves e modernas */
  --shadow-sm: 0 1px 2px rgba(20,15,10,.06), 0 8px 22px rgba(20,15,10,.04);
  --shadow-md: 0 8px 30px rgba(20,15,10,.08);
  --shadow-lg: 0 18px 48px rgba(10,10,20,.10);
  --shadow-neon: 0 0 22px rgba(45,130,255,.38);
  --ring: 0 0 0 3px rgba(45,130,255,.16);   /* anel de foco AZUL (fonte única — adeus roxo legado) */

  /* Easing autoral da marca — entradas com deceleração marcada (assinatura de time de produto) */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --transition-fast: 140ms var(--ease-out); --transition-normal: 240ms var(--ease-out); --transition-slow: 400ms var(--ease-out);
  --container-max: 1120px; --container-narrow: 720px;
  --z-sticky: 100; --z-dropdown: 200; --z-modal: 300; --z-toast: 400;

  --font-titulo: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-corpo:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mao:    ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", "Consolas", monospace; /* SÓ eyebrows/labels/números */
  --font-serif:  "Lora", Georgia, serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg, video { max-width: 100%; }
img { display: block; height: auto; }
input, button, textarea, select { font: inherit; }

/* ---------- Base ---------- */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-corpo);
  font-size: 1.0625rem;
  line-height: 1.65;
  letter-spacing: -0.011em;
  min-height: 100vh;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  /* sticky footer: em páginas curtas o rodapé encosta no fim do conteúdo,
     sem cauda de bege vazio embaixo (o #conteudo cresce pra preencher). */
  display: flex;
  flex-direction: column;
}
#conteudo { flex: 1 0 auto; }

h1, h2, h3, h4 {
  font-family: var(--font-titulo);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  overflow-wrap: break-word;
}
/* salto dramático título > seção (nunca cruzam: h1 min 3rem > h2 max 2.35rem) */
h1 { font-size: clamp(3rem, 7vw, 5.4rem); font-weight: 700; line-height: 1.0; letter-spacing: -0.04em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.35rem); font-weight: 600; letter-spacing: -0.025em; }
h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; }

a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--amarelo-marca); }

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 1000;
  background: var(--white); color: var(--ink);
  padding: 8px 16px; border: 1px solid var(--gray-200); border-radius: 8px;
  text-decoration: none; transition: top .15s ease;
}
.skip-link:focus { top: 8px; }

/* ---------- Barra de progresso de leitura (topo, LED) ---------- */
.leitura { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: var(--z-dropdown); pointer-events: none; }
.leitura::after {
  content: ""; display: block; height: 100%;
  background: var(--neon-grad);
  transform: scaleX(var(--read, 0)); transform-origin: left;
}

/* ---------- Containers ---------- */
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-lg); }
.container--narrow { max-width: var(--container-narrow); }

/* ---------- Utilitários NEON (os "detalhes") ---------- */

/* Texto com degradê neon (estático) */
.neon-text {
  background: var(--neon-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Texto com LED ANIMADO — cores girando no MESMO lugar */
.neon-led {
  background: linear-gradient(120deg, var(--neon-cyan), var(--neon-blue), var(--neon-violet), var(--neon-magenta), var(--neon-pink), var(--neon-cyan));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: led-cycle 6s linear infinite;
}
@keyframes led-cycle { to { background-position: 300% 50%; } }

/* Linha divisória fininha em neon (detalhe entre dobras) */
.neon-line { height: 2px; border: 0; background: var(--neon-grad); opacity: .9; border-radius: 2px; }
.neon-line--soft { height: 1px; background: var(--neon-grad); opacity: .5; }

/* Pontinho de LED (acento) */
.neon-dot { display: inline-block; width: .5em; height: .5em; border-radius: 50%; background: var(--neon-grad); vertical-align: middle; box-shadow: 0 0 9px rgba(45,130,255,.5); }

/* LED numa PALAVRA inteira do título (a "peça" acesa entre as palavras pretas) — colorida e
   LEGÍVEL, cores fluindo. Use num <span class="led-piece"> numa palavra semanticamente forte. */
.led-piece {
  background: linear-gradient(120deg, var(--neon-cyan), var(--neon-blue), var(--neon-violet), var(--neon-magenta), var(--neon-pink), var(--neon-cyan));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: led-cycle 6s linear infinite;
}

/* O "B" da marca como GLIFO reutilizável (máscara PNG sobre a fita de LED) — pode entrar em
   títulos de seção, cards, footer. Dimensione via font-size ou width/height em em. */
.b-mark {
  display: inline-block; width: 1em; height: 1em; vertical-align: -.14em; flex: none;
  background: linear-gradient(122deg,
    var(--led-base) 0%, var(--led-base) 30%,
    #4b4b54 35%, #8f8f9c 39%, #dcdce4 42.5%,
    var(--neon-cyan) 47%, var(--neon-blue) 54%, var(--neon-violet) 62%, var(--neon-magenta) 72%, var(--neon-pink) 84%,
    var(--neon-pink) 100%);
  -webkit-mask: url("/assets/b-logo-e8147234.png") center / contain no-repeat;
          mask: url("/assets/b-logo-e8147234.png") center / contain no-repeat;
  animation: b-hue 6s linear infinite;
}

/* Link do menu (nova aba "Serviços") */
/* Sweep de sublinhado (assinatura big-tech): cresce da esquerda no hover */
.navbar__link, .footer a {
  text-decoration: none;
  background: linear-gradient(var(--accent-text), var(--accent-text)) no-repeat left bottom / 0% 1.5px;
  transition: background-size var(--transition-normal), color var(--transition-fast);
}
.navbar__link { color: var(--gray-700); font-size: .95rem; font-weight: 500; white-space: nowrap; }
.navbar__link:hover, .footer a:hover { color: var(--ink); text-decoration: none; background-size: 100% 1.5px; }

/* Eyebrow/label techy em mono */
.eyebrow {
  display: inline-block; font-family: var(--font-mao);
  font-size: .8125rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gray-500);
}
/* eyebrow com acento: texto SÓLIDO legível + um tracinho neon depois (cor vira pontuação, não o glifo) */
.eyebrow--neon { color: var(--accent-text); -webkit-text-fill-color: currentColor; background: none; }
.eyebrow--neon::after { content: ""; display: inline-block; vertical-align: middle; width: 1.8em; height: 2px; margin-left: .6em; border-radius: 2px; background: var(--neon-grad); }

/* Grifo — marca-texto centrado na altura-x, acompanha quebra de linha (sem vazar baseline) */
.grifo {
  background: linear-gradient(transparent 14%, var(--amarelo-marca) 14% 86%, transparent 86%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 .06em;
}

/* Textura de papel legada -> neutralizada */
.mancha { display: none; }
.borda-mao { border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.sublinhado-amarelo { text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 1px; }
.rasgo { display: block; width: 100%; height: 1px; }
.hp { position: absolute; left: -9999px; }

/* ---------- Botões ---------- */

/* CTA primário — preto sólido, limpo, com brilho neon sutil no hover */
.btn-sticker {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ink); color: var(--white);
  border: 1px solid var(--ink); border-radius: var(--radius-full);
  padding: 13px 26px; min-height: 46px;
  font-family: var(--font-corpo); font-weight: 600; font-size: 1rem; letter-spacing: -.01em;
  line-height: 1.25; text-align: center; text-wrap: balance; text-decoration: none; cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-normal), background var(--transition-fast);
}
.btn-sticker:hover { transform: translateY(-1px); box-shadow: var(--shadow-neon); text-decoration: none; }
.btn-sticker:active { transform: translateY(0) scale(.972); }
.btn-sticker[disabled] { opacity: .68; cursor: progress; }  /* estado "Enviando…" (data-turbo-submits-with) */
.btn-sticker--sm { padding: 9px 18px; min-height: 40px; font-size: .9375rem; white-space: nowrap; text-wrap: nowrap; }

/* Nav no mobile: some o link "Serviços" (acessível pela seção da home + rodapé) pra o CTA
   não quebrar em 2 linhas e o wordmark caber inteiro. */
@media (max-width: 600px) {
  .navbar__acoes { gap: 10px; }
  .navbar__link { font-size: .88rem; }
  .navbar__link--servicos { display: none; }   /* Serviços some no mobile (fica na home + rodapé) pro CTA não clipar */
  .navbar__idioma { padding: 4px; font-size: .88rem; }
  .btn-sticker--sm { padding: 8px 13px; font-size: .82rem; min-height: 36px; }

  /* alvos de toque ≥44px no mobile (chip/btn/pílulas) — sem inchar o desktop */
  .chip-sticker, .btn-ghost { min-height: 44px; }
  .radio-pill span, .chip-toggle span, .slot-pill span { padding-top: 12px; padding-bottom: 12px; }
}

/* Botão fantasma (secundário) com borda neon no hover */
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--gray-200); border-radius: var(--radius-full);
  padding: 12px 22px; font-weight: 600; text-decoration: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-normal);
}
.btn-ghost:hover { border-color: transparent; box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-neon); text-decoration: none; }
.btn-ghost:active { transform: scale(.972); transition-duration: 60ms; }
.btn-ghost--sm { padding: 8px 16px; font-size: .9375rem; }

.link-recado { color: var(--gray-500); font-size: .9375rem; text-decoration: underline; text-underline-offset: 3px; }
.link-recado:hover { color: var(--ink); }

.link-seta {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  color: var(--ink); font-weight: 600; text-decoration: none;
}
.link-seta:hover { color: var(--accent); }
.link-seta svg { flex-shrink: 0; }

/* ---------- Cards (limpos) ---------- */
.card-papel {
  position: relative; background: var(--white);
  border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-xl);
  transition: box-shadow var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal);
}
.card-papel--fita::before { display: none; }
.card-polaroid { transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal); transform: none !important; }
.card-polaroid:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-md); border-color: transparent; }
.card-polaroid__imagem { aspect-ratio: 16/10; border: 1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; background: var(--gray-100); }

/* Chip — pílula clean com acento neon */
.chip-sticker {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-full);
  color: var(--gray-700); font-size: .875rem; font-weight: 500; line-height: 1.4;
  padding: 6px 14px; text-decoration: none; transform: none !important;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.chip-sticker:hover { border-color: var(--accent); color: var(--ink); }

/* Carimbo de status -> badge clean com pontinho neon */
.carimbo {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mao); font-weight: 600; font-size: .8125rem;
  letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--gray-200); border-radius: var(--radius-full);
  transform: none; padding: 3px 10px; color: var(--gray-700);
}
.carimbo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--neon-cyan); box-shadow: 0 0 8px var(--neon-cyan); }
.carimbo--no-ar { color: var(--verde-carimbo); }
.carimbo--validacao { color: var(--gray-500); }

/* Anotação -> prosa curta em SANS (mono era ilegível em frase corrida) */
.anotacao { display: inline-block; font-family: var(--font-corpo); font-size: .9375rem; line-height: 1.5; color: var(--gray-500); transform: none; }
.anotacao--tinta { color: var(--gray-700); }

.numero-rabiscado { font-family: var(--font-mao); font-weight: 700; color: var(--ink); font-size: clamp(2rem, 5vw, 3rem); line-height: 1; }

.checklist-mao { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.checklist-mao li { padding-left: 30px; position: relative; }
.checklist-mao li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 8px;
  border-left: 2px solid var(--neon-cyan); border-bottom: 2px solid var(--neon-cyan);
  transform: rotate(-45deg);
}

/* ---------- Form ---------- */
.field { margin-bottom: var(--space-md); }
.field label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: var(--space-xs); }
.field input, .field textarea, .field select {
  width: 100%; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md);
  padding: 11px 14px; font-size: 16px; color: var(--ink);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); outline: none; box-shadow: var(--ring); }
.field--erro input, .field--erro textarea { border-color: var(--terracota); }
.field__error { display: block; color: var(--terracota); font-size: .875rem; margin-top: var(--space-xs); }
.field__hint { display: block; color: var(--color-text-muted); font-size: .875rem; margin-top: var(--space-xs); }

/* ---------- Flash ---------- */
.flash {
  position: fixed; top: var(--space-md); left: 50%; transform: translateX(-50%); z-index: var(--z-toast);
  display: flex; align-items: center; gap: var(--space-sm); max-width: min(92vw, 480px);
  background: var(--white); border: 1px solid var(--gray-200); border-left: 3px solid var(--neon-cyan);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-sm) var(--space-md);
  animation: flash-some 6s var(--ease-out) forwards;
}
.flash--alert { border-left-color: var(--terracota); }
.flash__fechar { background: none; border: none; cursor: pointer; color: var(--color-text-muted); font-size: 1.25rem; line-height: 1; min-width: 44px; min-height: 44px; }
/* entra deslizando de cima + fade, segura, e sai — não pipoca de estalo */
@keyframes flash-some {
  0%   { opacity: 0; transform: translate(-50%, -8px); }
  7%   { opacity: 1; transform: translate(-50%, 0); }
  85%  { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

/* ---------- Janela da oficina (o único bloco escuro — vira o "preview" dark com LED) ---------- */
.janela-oficina {
  position: relative; max-width: 480px; background: #0b0b12;
  border: 1px solid #1e1e2a; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); transform: none;
}
.janela-oficina::before, .janela-oficina::after { display: none; }
.janela-oficina__conteudo {
  aspect-ratio: 16/10; border-radius: calc(var(--radius-lg) - 6px);
  background-image:
    linear-gradient(90deg, rgba(0,224,255,.10) 0 30%, transparent 30%),
    repeating-linear-gradient(180deg, rgba(45,130,255,.10) 0 2px, transparent 2px 16px);
}

/* ---------- WORDMARK — o "B" com LED animado (a estrela) ---------- */
/* Colapso "assinatura" (skill bailder-motion): ao rolar, "Bailder" recolhe e o B CURSIVO
   (SVG) se DESENHA com a ponta-LED varrendo. Tudo é função pura de --p (0..1) que o
   navbar_controller seta continuamente no scroll → mexe junto com o dedo. */
:root { --led-base: #17161a; }
.wordmark {
  position: relative; display: inline-flex; align-items: center; gap: .02em;
  font-family: var(--font-titulo); font-weight: 700; font-size: 1.4rem; letter-spacing: -.03em;
  line-height: 1; color: var(--ink); text-decoration: none; white-space: nowrap;
  /* PADRÃO (páginas SEM hero gigante, ex /servicos): wordmark sempre visível, colapsa
     Bailder→B conforme rola. --p vem do <html> (controller). */
  --pa: clamp(0, calc(var(--p, 0) / 0.8), 1);
  --set: clamp(0, calc((var(--p, 0) - 0.45) / 0.55), 1);
}
.wordmark:hover { text-decoration: none; }
/* o B da marca responde ao ponteiro — micro-scale (multiplica o scale do scroll, não quebra) */
.wordmark:hover .wm-b { --wm-hover: 1.06; }
.wordmark:active .wm-b { --wm-hover: .98; }
/* HOME (tem hero gigante): a wordmark começa INVISÍVEL (o gigante é a estrela), APARECE
   conforme o gigante encolhe e faz dock (~0.34→0.55) e só DEPOIS colapsa Bailder→B (~0.62→1).
   Sem JS, ou em páginas sem hero, fica sempre visível. */
.has-navbar-js.is-home-hero .wordmark { opacity: clamp(0, calc((var(--p, 0) - 0.34) / 0.2), 1); }
.is-home-hero .wordmark {
  --pa: clamp(0, calc((var(--p, 0) - 0.62) / 0.28), 1);
  --set: clamp(0, calc((var(--p, 0) - 0.74) / 0.26), 1);
}

/* O "B" É o cursivo (PNG usado como MÁSCARA sobre o degradê LED), SEMPRE presente.
   Só o traço do B mostra o LED (faixa colorida no led-base preto); ao colapsar, o B cresce. */
.wm-b {
  display: inline-block; flex: none; width: 1.16em; height: 1.16em; vertical-align: -.28em;
  /* fita de LED FIXA: preto → METÁLICO (prata/specular) → cores (do meio do traço pro fim).
     A faixa NÃO se move — o B está sempre lá, completo. SÓ AS CORES mudam (hue cicla). */
  background: linear-gradient(122deg,
    var(--led-base) 0%, var(--led-base) 30%,
    #4b4b54 35%, #8f8f9c 39%, #dcdce4 42.5%,                     /* metálico entrando (a partir do meio) */
    var(--neon-cyan) 47%, var(--neon-blue) 54%, var(--neon-violet) 62%, var(--neon-magenta) 72%, var(--neon-pink) 84%,  /* LED — região fixa até a ponta */
    var(--neon-pink) 100%);
  background-repeat: no-repeat;
  -webkit-mask: url("/assets/b-logo-e8147234.png") center / contain no-repeat;
          mask: url("/assets/b-logo-e8147234.png") center / contain no-repeat;
  transform: scale(calc((1 + var(--set) * .26) * var(--wm-hover, 1))); transform-origin: left center;
  will-change: transform; transition: transform var(--transition-fast);
  animation: b-hue 6s linear infinite;   /* SÓ as cores mexem (hue-rotate no lugar); B sempre presente */
}
/* as cores da faixa ciclam pelo espectro; preto/metálico (dessaturados) quase não mudam */
@keyframes b-hue {
  0%   { filter: drop-shadow(0 0 5px rgba(0,200,255,.4)); }
  100% { filter: drop-shadow(0 0 5px rgba(0,200,255,.4)) hue-rotate(360deg); }
}

/* "ailder" (Inter) — recua e some no scroll; o B permanece (efeito Anthropic, sem swap) */
.wordmark__tail {
  display: inline-block; overflow: hidden; white-space: nowrap; will-change: max-width, opacity, transform;
  opacity: calc(1 - var(--pa)); transform: translateX(calc(var(--pa) * -12px));
  filter: blur(calc(var(--pa) * 2px)); max-width: calc((1 - var(--pa)) * 5em);
}

/* ---------- Navbar (sticky, translúcida, clean) ---------- */
.navbar {
  position: sticky; top: 0; z-index: var(--z-sticky); /* --p vem do <html> (controller) */
  padding: 16px 0; background: rgba(241,238,229,.55);
  backdrop-filter: saturate(150%) blur(10px); -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: padding .3s ease, background .3s ease, border-color .3s ease;
}
/* rolou pra baixo → compacta e a wordmark colapsa pro "B" */
.navbar.is-collapsed {
  padding: 8px 0; background: rgba(241,238,229,.85); border-bottom-color: var(--gray-200);
  box-shadow: 0 6px 24px rgba(20,15,10,.06);
}
/* (a wordmark colapsa via --p, setado pelo navbar_controller; ver bloco WORDMARK acima) */
.navbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.navbar__acoes { display: flex; align-items: center; gap: var(--space-md); }
.navbar__idioma { color: var(--gray-500); font-weight: 500; font-size: .9375rem; text-decoration: none; padding: var(--space-sm); }
.navbar__idioma:hover { color: var(--ink); text-decoration: none; }
.navbar__voltar { color: var(--gray-500); font-size: .9375rem; text-decoration: none; }
.navbar__voltar:hover { color: var(--ink); }

/* ---------- Rodapé (clean, com linha neon fina no topo) ---------- */
.footer { background: var(--white); border-top: 1px solid var(--gray-200); padding: var(--space-3xl) 0 var(--space-2xl); position: relative; }

/* R3-4 motion 2a ordem: navbar/rodapé cravados na view-transition (snapshot próprio, não
   cross-fadeiam com o conteúdo na troca de página) + press tátil nos chips/pílulas */
.navbar { view-transition-name: navbar; }
.footer { view-transition-name: rodape; }
.chip-sticker:active { transform: scale(.972) !important; }
.no-ar-agora__item:active, .sementes__chip:active,
.radio-pill span:active, .chip-toggle span:active, .slot-pill span:active { transform: scale(.972); }
.footer::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--neon-grad); opacity: .8; }
.footer__inner { display: grid; gap: var(--space-lg); }
.footer__tagline { color: var(--color-text-muted); }
.footer__meta-prova { font-family: var(--font-corpo); font-size: .9375rem; color: var(--gray-500); }
.footer__ancoras { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
.footer__ancoras a { color: var(--gray-700); text-decoration: none; display: inline-block; padding: var(--space-xs) 0; }
.footer__ancoras a:hover { color: var(--ink); }
.footer__lgpd { font-size: .875rem; color: var(--color-text-muted); }
.footer__lgpd a { color: var(--accent); }

/* ---------- Movimento — kill-switch ---------- */
/* Transições de página (Turbo 8 / View Transitions API) — cross-fade sóbrio com leve
   deriva pra cima. Só anima quando o usuário permite movimento; senão, swap instantâneo. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out 160ms ease both; }
  ::view-transition-new(root) { animation: vt-in 300ms cubic-bezier(.22,.61,.36,1) both; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in  { from { opacity: 0; transform: translateY(8px); } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .neon-led, .wm-b { animation: none !important; }
  html { scroll-behavior: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}