/* =========================================================================
   Noah Tecnologia — Campanha Institucional 2026
   Design tokens + sistema visual. Ver CLAUDE.md para racional completo.
   ========================================================================= */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable-latin.woff2") format("woff2-variations"),
       url("../fonts/inter-variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/intertight-variable-latin.woff2") format("woff2-variations"),
       url("../fonts/intertight-variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Paleta de campanha (irmã da paleta operacional do app) ----
     Derivada da paleta operacional real do site (kit Elementor):
     --e-global-color-accent:#001A35 / --e-global-color-primary:#F4F4F9
     Aqui vira uma escala navy dedicada + acento azul de CTA. */
  --navy-950: #000c10;
  --navy-900: #001a35;
  --navy-800: #0b2a4d;
  --navy-700: #163a63;
  --azul-acento: #467ff7;
  --azul-acento-600: #2f63d1;
  --gelo: #f4f4f9;
  --branco: #ffffff;
  --linha: rgba(244, 244, 249, 0.14);

  /* ---- Dourado da marca ----
     Extraído por amostragem de pixel do logo oficial (assets/img/logo_padrao.png):
     cor dominante #CDB63C. Usado como acento de confiança/institucional — rotulagem
     de seção, provas sociais, selo do CTA — reservando o azul para ações clicáveis. */
  --dourado: #cdb63c;
  --dourado-600: #b49a2e;
  --dourado-wash: rgba(205, 182, 60, 0.14);
  /* Tom mais escuro pra texto dourado sobre fundo claro — o #cdb63c "puro" não
     tem contraste suficiente sobre branco. #9c8523 (mesmo valor do tema claro
     do painel, admin.css) passa em texto grande mas fica em 3.42:1 no rótulo
     pequeno em negrito (precisa 4.5:1) — usado #78661a, medido em 5.33:1.
     Ver CLAUDE.md. */
  --dourado-claro: #78661a;

  /* ---- Tokens estruturais ----
     Raio reduzido pela metade (v6) e reservado só pra botões/pills e elementos
     pequenos (inputs, badges, thumbnails). Blocos grandes (fotos, cards,
     painéis) agora usam cantos retos — ver CLAUDE.md. */
  --raio: 0.625rem;
  --raio-sm: 0.3rem;
  --raio-pill: 999px;
  --fonte-corpo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-titulo: "Inter Tight", "Inter", system-ui, sans-serif;
  --sombra-difusa: 0 40px 80px -20px rgba(0, 12, 16, 0.55);
  --sombra-contato: 0 2px 4px rgba(0, 12, 16, 0.35);
  --dur-micro: 200ms;
  --dur-base: 400ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --container: min(74rem, 92vw);
}

/* =========================== Reset mínimo =========================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  background: var(--navy-950);
  color: var(--gelo);
  font-family: var(--fonte-corpo);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  line-height: 1.12;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
  /* text-wrap:balance distribui as palavras da última linha de forma mais
     uniforme (evita título de 3 palavras quebrando "2 grandes + 1 sozinha
     numa linha esquisita"). Suporte amplo (Chrome/Firefox/Safari desde
     2023-24) e progressive enhancement puro — sem suporte, cai pro quebra de
     linha normal, sem quebrar nada. Ver CLAUDE.md. */
  text-wrap: balance;
}
p {
  margin: 0 0 1em;
  color: rgba(244, 244, 249, 0.78);
  /* text-wrap:pretty evita "órfã" (1 palavra sozinha na última linha de um
     parágrafo) — suporte menor que balance (ainda sem Safari nesta escrita),
     mas também progressive enhancement puro. Ver CLAUDE.md. */
  text-wrap: pretty;
}
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
:focus-visible {
  outline: 2px solid var(--azul-acento);
  outline-offset: 3px;
  border-radius: var(--raio-sm);
}

.container { width: var(--container); margin-inline: auto; }
.secao { padding-block: clamp(4rem, 3rem + 5vw, 8rem); position: relative; }
.rotulo {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dourado);
  margin-bottom: 1rem;
}
.rotulo::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dourado);
  box-shadow: 0 0 0 4px var(--dourado-wash);
}
.titulo-secao {
  font-size: clamp(1.9rem, 1.5rem + 2vw, 3rem);
  max-width: 40ch;
}
.subtitulo-secao {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  max-width: 55ch;
  color: rgba(244, 244, 249, 0.68);
}

/* Skip link acessível */
.pular-conteudo {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--branco);
  color: var(--navy-950);
  padding: 0.75rem 1.25rem;
  border-radius: var(--raio-sm);
  z-index: 200;
}
.pular-conteudo:focus { left: 1rem; top: 1rem; }

/* =========================== Fundo: blobs + dot-grid =========================== */
.fundo-decorativo {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.fundo-decorativo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(244, 244, 249, 0.22) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 10%, transparent 75%);
  opacity: 0.5;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  will-change: transform;
}
.blob--1 { width: 42rem; height: 42rem; top: -14rem; right: -10rem; background: radial-gradient(circle, var(--azul-acento) 0%, transparent 70%); }
.blob--2 { width: 34rem; height: 34rem; top: 40rem; left: -14rem; background: radial-gradient(circle, var(--navy-700) 0%, transparent 70%); }
.blob--3 { width: 30rem; height: 30rem; bottom: -8rem; right: 8rem; background: radial-gradient(circle, var(--azul-acento-600) 0%, transparent 70%); }

/* =========================== Navbar (v4 — barra minimal, sem pílula) ===========================
   A v3 (pílula flutuante com glow) foi considerada "estranha" pro conceito
   institucional — trocada por uma barra full-width sóbria: vidro fosco, fio
   inferior com degradê sutil da marca, links com sublinhado animado em vez de
   pill de hover. Cantos retos (0), consistente com a limpeza de raio da seção
   14 — a navbar não é mais uma exceção "pill grande". Ver CLAUDE.md. */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-block: 1.1rem;
  background: rgba(0, 12, 16, 0.72);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--linha);
  transition: padding var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.navbar::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(205, 182, 60, 0.55) 35%, rgba(70, 127, 247, 0.45) 65%, transparent);
}
.navbar--comprimida { padding-block: 0.65rem; background: rgba(0, 12, 16, 0.92); }
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.marca { display: flex; align-items: center; transition: transform var(--dur-micro) var(--ease); }
.marca:hover { transform: translateY(-1px); }
.marca__logo { height: 38px; width: auto; display: block; }

/* ---- Logo oficial vendorizada (assets/img/logo_*.png) — ver CLAUDE.md ---- */
.rodape__logo { height: 24px; width: auto; margin-bottom: 2rem; }
.cta-final__selo { height: 32px; width: auto; margin: 0 auto 1.5rem; opacity: 0.92; }

.nav__links { display: flex; align-items: center; gap: 0.5rem; }
.nav__links a {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0.75rem;
  font-size: 0.89rem;
  font-weight: 500;
  color: rgba(244, 244, 249, 0.65);
  transition: color var(--dur-micro) ease;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.15rem;
  height: 2px;
  background: linear-gradient(90deg, var(--dourado), var(--azul-acento));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-micro) var(--ease);
}
.nav__links a:hover { color: var(--branco); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__links a.nav__links-cta-mobile { display: none; }
.nav__links-eyebrow { display: none; }

.nav__cta { display: flex; gap: 1.25rem; align-items: center; }
.nav__cta .botao--fantasma {
  background: none;
  border-color: transparent;
  padding: 0.5rem 0;
  font-size: 0.89rem;
  color: rgba(244, 244, 249, 0.65);
}
.nav__cta .botao--fantasma:hover { background: none; color: var(--branco); }
.botao--sm { padding: 0.6rem 1.15rem; font-size: 0.86rem; }
.botao--bloco { width: 100%; }

/* ---- Botão hamburguer (3 linhas -> X) ---- */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--raio-sm);
  background: rgba(244, 244, 249, 0.08);
  border: 1px solid var(--linha);
  cursor: pointer;
  flex: none;
}
.menu-toggle__linha {
  display: block;
  width: 1.1rem;
  height: 2px;
  margin-inline: auto;
  background: var(--gelo);
  border-radius: 2px;
  transition: transform var(--dur-micro) var(--ease), opacity var(--dur-micro) var(--ease);
}
.menu-toggle--ativo .menu-toggle__linha:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle--ativo .menu-toggle__linha:nth-child(2) { opacity: 0; }
.menu-toggle--ativo .menu-toggle__linha:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

body.bloquear-scroll { overflow: hidden; }

/* =========================== Botões (glow/shine sweep) =========================== */
.botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--raio-pill);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
}
.botao:active { transform: translateY(1px) scale(0.99); }
.botao--primario {
  background: linear-gradient(135deg, var(--azul-acento), var(--azul-acento-600));
  color: var(--branco);
  box-shadow: 0 12px 24px -8px rgba(70, 127, 247, 0.55), var(--sombra-contato);
}
.botao--primario:hover { box-shadow: 0 18px 34px -8px rgba(70, 127, 247, 0.7), var(--sombra-contato); transform: translateY(-2px); }
.botao--primario::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
  transform: translateX(-120%) skewX(-20deg);
  transition: transform 700ms ease;
}
.botao--primario:hover::before { transform: translateX(120%) skewX(-20deg); }
.botao--fantasma {
  background: rgba(244, 244, 249, 0.06);
  color: var(--gelo);
  border-color: var(--linha);
}
.botao--fantasma:hover { background: rgba(244, 244, 249, 0.12); border-color: rgba(244, 244, 249, 0.3); }
@media (prefers-reduced-motion: reduce) {
  .botao--primario::before { display: none; }
}

/* =========================== Hero full-bleed + parallax =========================== */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 6rem;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-950) 100%);
}
.hero__bg-img {
  position: absolute;
  inset: 0;
  background: url("../img/BG_-BLK.webp") center / cover no-repeat;
  opacity: 0.35;
  mix-blend-mode: luminosity;
  will-change: transform;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 70% 60% at 50% 20%, rgba(70, 127, 247, 0.18), transparent 70%),
              linear-gradient(180deg, rgba(0, 12, 16, 0) 40%, var(--navy-950) 100%);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 4vw, 5rem);
  align-items: center;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--raio-pill);
  background: var(--dourado-wash);
  border: 1px solid rgba(205, 182, 60, 0.4);
  color: #e8d98a;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.hero__eyebrow img { width: 14px; height: 14px; display: block; }
.hero__titulo {
  font-size: clamp(2.4rem, 1.9rem + 2.6vw, 4.2rem);
  color: var(--branco);
}
.hero__titulo .destaque {
  background: linear-gradient(100deg, var(--dourado) 20%, #ecdd94 60%, var(--dourado) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: brilho-texto 6s linear infinite;
}
@keyframes brilho-texto { to { background-position: 200% center; } }
@media (prefers-reduced-motion: reduce) { .hero__titulo .destaque { animation: none; } }
.hero__lead { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem); max-width: 46ch; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.hero__prova {
  margin-top: 2.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.hero__prova .item { display: flex; flex-direction: column; }
.hero__prova .num { font-family: var(--fonte-titulo); font-size: 1.6rem; font-weight: 800; color: var(--dourado); }
.hero__prova .rot { font-size: 0.8rem; color: rgba(244, 244, 249, 0.6); }

/* ---- Cartão de foto institucional (substitui o mockup de produto) ---- */
.hero__mockup { position: relative; }
.hero__cartao-foto {
  position: relative;
  margin-inline: auto;
  width: min(28rem, 100%);
  overflow: hidden;
  background: var(--navy-800);
  box-shadow: var(--sombra-difusa);
}
/* `object-fit: cover` cortava a foto pra preencher o card 4/5 (reportado:
   notebook/mão cortados nas bordas). Trocado pra `contain` com fundo
   --navy-800 no cartão — a imagem inteira aparece, sem corte, e o "sobra" vira
   faixa sólida que já combina com a paleta em vez de aparecer como bug. Ver
   CLAUDE.md. */
.hero__cartao-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; object-position: center; }
.hero__flutuante {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  width: 11rem;
  padding: 0.9rem 1rem;
  background: rgba(11, 42, 77, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(205, 182, 60, 0.35);
  box-shadow: var(--sombra-difusa);
  animation: flutuar 5s ease-in-out infinite;
}
@keyframes flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .hero__flutuante { animation: none; } }
.hero__flutuante .rot { font-size: 0.72rem; color: rgba(244,244,249,0.6); }
.hero__flutuante .num { font-family: var(--fonte-titulo); font-size: 1.3rem; font-weight: 800; color: var(--dourado); }

/* =========================== Dot-grid tipografia gigante (máscara orgânica) =========================== */
.tipo-gigante {
  position: relative;
  text-align: center;
  padding-block: clamp(3rem, 6vw, 6rem);
  overflow: hidden;
}
.tipo-gigante__texto {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: clamp(3.5rem, 3rem + 9vw, 11rem);
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1px rgba(205, 182, 60, 0.35);
  letter-spacing: -0.02em;
  margin: 0;
  user-select: none;
}
.tipo-gigante__imagem {
  position: absolute;
  inset: 8% 18%;
  background: url("../img/homem-laptop-site.png") center / cover no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 55% 60% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 55% 60% at 50% 50%, #000 55%, transparent 100%);
  opacity: 0.9;
  will-change: transform;
}

/* =========================== Split layout (texto + imagem alternado) =========================== */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split--inv .split__media { order: 2; }
.split--inv .split__texto { order: 1; }
.split__media { position: relative; }
/* Retângulo limpo, mesma proporção 4:5 do cartão de foto do hero — ver
   CLAUDE.md. (O corte em paralelogramo da v14 e o tratamento P&B da
   mesma revisão já tinham sido revertidos — v24 — este passo remove também o
   corte diagonal: ficava inconsistente com o retângulo do hero e "cortava"
   as fotos de um jeito que não combinava com o conteúdo ao lado.) */
.split__figura {
  overflow: hidden;
  background: var(--branco);
  box-shadow: var(--sombra-difusa);
  will-change: transform;
}
/* `cover` cortava as pernas/pés (reportado, mesmo bug do hero — ver CLAUDE.md
   §5b) — trocado pra `contain` com fundo `--branco` (a seção é clara aqui),
   a foto inteira aparece, sobra vira faixa sólida em vez de corte. */
.split__figura img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; object-position: center; }
.checklist { display: grid; gap: 0.9rem; margin: 1.5rem 0 2rem; }
.checklist li { display: flex; align-items: flex-start; gap: 0.75rem; color: rgba(244, 244, 249, 0.85); font-size: 0.98rem; }
.icone-conceito {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--dourado-wash);
  display: grid;
  place-items: center;
}
.icone-conceito svg { width: 0.95rem; height: 0.95rem; stroke: var(--dourado); }

/* =========================== Grid de soluções (auto-fit fluido) =========================== */
.grade-solucoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.cartao {
  position: relative;
  padding: clamp(1.5rem, 2vw, 2rem);
  background: linear-gradient(180deg, rgba(244, 244, 249, 0.05), rgba(244, 244, 249, 0.02));
  border: 1px solid var(--linha);
  box-shadow: var(--sombra-contato);
  transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.cartao:hover {
  transform: translateY(-6px);
  border-color: rgba(70, 127, 247, 0.4);
  box-shadow: var(--sombra-difusa);
}
.cartao__icone {
  width: 3rem;
  height: 3rem;
  border-radius: var(--raio-sm);
  background: rgba(70, 127, 247, 0.15);
  display: grid;
  place-items: center;
  margin-bottom: 1.25rem;
}
.cartao__icone svg { width: 1.5rem; height: 1.5rem; stroke: var(--azul-acento); }
.cartao h3 { font-size: 1.15rem; color: var(--branco); }
.cartao p { font-size: 0.92rem; margin-bottom: 0; }

/* =========================== Grade de produtos (/produtos.php) ===========================
   Ver CLAUDE.md. Cada card resume 1 produto: logo/wordmark + arte
   conceitual (ícone SVG num selo circular, sem foto/download novo — mesma
   convenção de ícone desenhado à mão já usada em .cartao__icone), resumo
   comercial curto, checklist de diferenciais e um CTA. */
.grade-produtos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1.5rem;
}
.produto-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.75rem, 2vw, 2.25rem);
  background: linear-gradient(180deg, rgba(244, 244, 249, 0.05), rgba(244, 244, 249, 0.02));
  border: 1px solid var(--linha);
  box-shadow: var(--sombra-contato);
  transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.produto-card:hover { transform: translateY(-6px); box-shadow: var(--sombra-difusa); }
.produto-card--dourado:hover { border-color: rgba(205, 182, 60, 0.45); }
.produto-card--azul:hover { border-color: rgba(70, 127, 247, 0.45); }

.produto-card__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
/* Chip branco fixo por trás da logo — garante contraste pra qualquer cor de
   marca (logo navy, roxo, azul...) independente do fundo do card ser claro ou
   escuro. Caixa com largura E altura explícitas (mesma lição da seção 20 —
   sem isso, max-height sozinho no <img> é ambíguo e a logo pode vazar). */
.produto-card__logo-area {
  width: 8.5rem;
  height: 2.75rem;
  flex: none;
  padding: 0.5rem 0.85rem;
  background: var(--branco);
  border: 1px solid rgba(0, 26, 53, 0.08);
  border-radius: var(--raio-sm);
  box-shadow: 0 2px 8px rgba(0, 26, 53, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.produto-card__logo-area img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.produto-card__wordmark { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.35rem; color: var(--branco); letter-spacing: -0.01em; }

.produto-card__arte { flex: none; width: 3.25rem; height: 3.25rem; border-radius: var(--raio-pill); display: grid; place-items: center; }
.produto-card--dourado .produto-card__arte { background: var(--dourado-wash); }
.produto-card--dourado .produto-card__arte svg { stroke: var(--dourado); }
.produto-card--azul .produto-card__arte { background: rgba(70, 127, 247, 0.15); }
.produto-card--azul .produto-card__arte svg { stroke: var(--azul-acento); }
.produto-card__arte svg { width: 1.75rem; height: 1.75rem; }

.produto-card__eyebrow { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(244, 244, 249, 0.5); margin-top: 0.4rem; }
.produto-card h2 { font-size: 1.2rem; color: var(--branco); margin: 0; }
.produto-card > p { font-size: 0.92rem; margin: 0; }

.produto-card__lista { display: grid; gap: 0.5rem; margin: 0.25rem 0 0.25rem; }
.produto-card__lista li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.84rem; color: rgba(244, 244, 249, 0.75); }
.produto-card__lista svg { flex: none; width: 0.95rem; height: 0.95rem; margin-top: 0.15rem; }
.produto-card--dourado .produto-card__lista svg { stroke: var(--dourado); }
.produto-card--azul .produto-card__lista svg { stroke: var(--azul-acento); }

/* ---- Intro de /produtos.php: selo Noah grande, composição centralizada ----
   Único bloco centrado da página (o resto segue o padrão alinhado à esquerda
   do site) — reforça a marca antes da grade de produtos. Ver CLAUDE.md. */
.produtos-hero { text-align: center; padding-bottom: clamp(2rem, 4vw, 3rem); }
.produtos-hero__miolo { display: flex; flex-direction: column; align-items: center; }
.produtos-hero .titulo-secao, .produtos-hero .subtitulo-secao { max-width: 42ch; margin-inline: auto; }
.produtos-hero__selo { position: relative; margin-bottom: 1.5rem; }
.produtos-hero__selo::before {
  content: "";
  position: absolute;
  inset: -60% -80%;
  z-index: -1;
  background: radial-gradient(circle, rgba(205, 182, 60, 0.32), transparent 65%);
  filter: blur(46px);
}
.produtos-hero__selo img { height: clamp(3.25rem, 2.4rem + 3.5vw, 5rem); width: auto; filter: drop-shadow(0 14px 32px rgba(0, 0, 0, 0.45)); }

/* ---- Cabeçalho da seção de parceiros (/produtos.php, #parceiros). Ver CLAUDE.md. ----
   Segue o padrão alinhado-à-esquerda do resto do site (não o bloco centralizado do hero):
   texto (rótulo + título + subtítulo) numa coluna, logo da ZOE Sistemas ancorada à direita,
   alinhada verticalmente ao centro do bloco de texto — não ao H2 isolado, o que quebrava o
   alinhamento sempre que o título ocupava duas linhas. Empilha e centraliza em telas estreitas. */
.parceiros-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 5vw, 4rem);
  flex-wrap: wrap;
}
.parceiros-cabecalho__texto { flex: 1 1 32rem; max-width: 46rem; }
.parceiros-cabecalho .parceiro-selo {
  flex: none;
  display: inline-flex;
  opacity: 0.9;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.parceiros-cabecalho .parceiro-selo:hover { opacity: 1; transform: translateY(-2px); }
.parceiros-cabecalho .parceiro-selo img { height: clamp(3.5rem, 2.6rem + 3vw, 4.5rem); width: auto; display: block; }
@media (max-width: 700px) {
  .parceiros-cabecalho { flex-direction: column-reverse; text-align: center; }
  .parceiros-cabecalho__texto { max-width: none; }
}

/* ---- Grade de produtos em seção clara: reescreve tudo que .produto-card usa ---- */
.secao--clara .produto-card {
  background: var(--branco);
  border-color: rgba(0, 26, 53, 0.1);
  box-shadow: 0 10px 30px -18px rgba(0, 26, 53, 0.22);
}
.secao--clara .produto-card:hover { box-shadow: 0 18px 38px -16px rgba(0, 26, 53, 0.28); }
.secao--clara .produto-card--dourado:hover { border-color: rgba(205, 182, 60, 0.55); }
.secao--clara .produto-card--azul:hover { border-color: rgba(70, 127, 247, 0.5); }
.secao--clara .produto-card__wordmark { color: var(--navy-900); }
.secao--clara .produto-card__eyebrow { color: rgba(0, 26, 53, 0.55); }
.secao--clara .produto-card h2 { color: var(--navy-900); }
.secao--clara .produto-card > p { color: rgba(0, 26, 53, 0.68); }
.secao--clara .produto-card__lista li { color: rgba(0, 26, 53, 0.72); }
.secao--clara .produto-card--dourado .produto-card__lista svg,
.secao--clara .produto-card--dourado .produto-card__arte svg { stroke: var(--dourado-claro); }
.secao--clara .produto-card--azul .produto-card__lista svg,
.secao--clara .produto-card--azul .produto-card__arte svg { stroke: var(--azul-acento-600); }
.secao--clara .produto-card .botao--fantasma {
  background: rgba(0, 26, 53, 0.04);
  border-color: rgba(0, 26, 53, 0.14);
  color: var(--navy-900);
}
.secao--clara .produto-card .botao--fantasma:hover { background: rgba(0, 26, 53, 0.08); }

.produto-card__cta { margin-top: auto; align-self: flex-start; }

/* =========================== Marquee de parceiros ===========================
   Histórico: carrossel (scroll-snap+rAF, travava — §37) → grade com <details>
   (espichava a linha — §38) → grade com popover ancorado (empilhava,
   §39/§40) → grade com <dialog> único (funcionava, mas o cartão flutuante
   por cima da grade ainda incomodou visualmente — §41/§42) → marquee só-logo
   com tooltip nativo (§42). Versão atual (v34, ver CLAUDE.md): nome
   saiu de cima da logo (marquee mais limpo); clique na logo abre o mini
   modal único (`.parceiro-dialog`, mais abaixo) com nome + descrição. */
.parceiros-marquee {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Máscara de desvanecimento nas bordas — item "nasce"/"morre" suave em vez
     de cortar seco no limite do container. Puramente decorativo: navegador
     sem suporte a mask-image só mostra o corte reto, sem quebrar nada. */
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.parceiros-marquee__linha { overflow: hidden; }
.parceiros-marquee__trilha {
  display: flex;
  width: max-content;
  gap: 0.85rem;
  animation: parceiros-marquee-rolagem 42s linear infinite;
}
.parceiros-marquee__linha--reversa .parceiros-marquee__trilha {
  animation-direction: reverse;
  animation-duration: 50s;
}
@keyframes parceiros-marquee-rolagem {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* Pausa no hover/foco — dá tempo de mirar o clique num item específico sem
   perseguir o item rolando; funciona em qualquer ponto do teclado (Tab entra
   num item e :focus-within já pausa a esteira inteira). */
.parceiros-marquee__linha:hover .parceiros-marquee__trilha,
.parceiros-marquee__linha:focus-within .parceiros-marquee__trilha {
  animation-play-state: paused;
}
.parceiro-item {
  all: unset;
  box-sizing: border-box;
  flex: none;
  cursor: pointer;
  width: 9.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.15rem 1rem;
  border: 1px solid var(--linha);
  background: rgba(244, 244, 249, 0.045);
  transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.parceiro-item:hover, .parceiro-item:focus-visible {
  border-color: rgba(205, 182, 60, 0.4);
  transform: translateY(-2px);
}
.parceiro-item:focus-visible { outline: 2px solid var(--azul-acento); outline-offset: 3px; }
.parceiro-item__logo {
  width: 100%;
  max-width: 8rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.parceiro-item__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* prefers-reduced-motion: sem animação contínua nenhuma (mesmo racional das
   seções 37/38/40) — vira lista estática com scroll horizontal manual, ainda
   100% navegável, só sem o movimento automático. */
@media (prefers-reduced-motion: reduce) {
  .parceiros-marquee__trilha { animation: none; }
  .parceiros-marquee__linha { overflow-x: auto; }
  .parceiro-item { transition: none; }
}
.secao--clara .parceiro-item { background: var(--branco); border-color: rgba(0, 26, 53, 0.1); }
.secao--clara .parceiro-item:hover, .secao--clara .parceiro-item:focus-visible { border-color: rgba(205, 182, 60, 0.55); }

/* =========================== Mini modal de parceiro ===========================
   <dialog> nativo único (reaproveitado pros 20 clientes via JS — ver
   CLAUDE.md pro racional "1 elemento só, impossível empilhar").
   Visual pedido nesta revisão: SEM borda (só sombra funda faz a separação do
   fundo — mais "moderno", menos "caixa com contorno"), cantos bem
   arredondados, largura responsiva por clamp() (nunca cola nas bordas da
   tela no mobile, nunca fica gigante no desktop), entrada em fade+scale.
   Ver CLAUDE.md. */
/* BUG real (ver CLAUDE.md): `display: flex` direto em `.parceiro-dialog`
   (sem gate de `[open]`) sobrescrevia a regra padrão do navegador
   `dialog:not([open]) { display: none; }` — como seletor de classe tem mais
   especificidade que `dialog:not([open])`, o modal ficava sempre visível NO
   FLUXO da página (vazio, sem dado nenhum, sem backdrop) mesmo sem
   `showModal()` ter sido chamado. `display` só entra em `[open]` agora —
   fechado, o navegador volta a esconder sozinho, do jeito nativo. */
/* BUG real (ver CLAUDE.md): centralização nativa de <dialog> (UA stylesheet
   `dialog:modal { position: fixed; inset: 0; margin: auto; }`) se mostrou
   frágil em mobile/WebKit — o modal nascia colado num canto em vez de
   centralizado. Em vez de depender do comportamento implícito do
   navegador, a centralização abaixo é explícita e própria (fixed + 50%/50%
   + translate(-50%,-50%)), garantida independente de engine/versão. O
   `transform` de centralização precisa entrar direto no keyframe de
   entrada (não dá pra "somar" com um `transform` declarado fora da
   animação — a propriedade animada substitui o valor estático inteiro,
   não combina os dois). */
.parceiro-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  margin: 0;
  border: none;
  border-radius: var(--raio-lg, 1.25rem);
  background: var(--navy-800);
  color: var(--branco);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  width: clamp(16rem, 90vw, 24rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  gap: 0.65rem;
  text-align: center;
  box-shadow: 0 30px 70px -20px rgba(0, 8, 18, 0.55);
}
.parceiro-dialog[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%);
  animation: parceiro-dialog-entrada 220ms var(--ease);
}
.parceiro-dialog::backdrop {
  background: rgba(0, 10, 22, 0.55);
  backdrop-filter: blur(4px);
}
@keyframes parceiro-dialog-entrada {
  from { opacity: 0; transform: translate(-50%, -50%) translateY(10px) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); }
}
.parceiro-dialog__forma { align-self: flex-end; margin: -0.35rem -0.35rem -0.35rem 0; }
.parceiro-dialog__fechar {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: none;
  background: rgba(244, 244, 249, 0.08);
  color: rgba(244, 244, 249, 0.7);
  cursor: pointer;
  border-radius: var(--raio-pill);
  transition: background var(--dur-micro) ease, color var(--dur-micro) ease;
}
.parceiro-dialog__fechar:hover { background: rgba(244, 244, 249, 0.16); color: var(--branco); }
/* BUG real (ver CLAUDE.md): logo direto sobre o fundo navy do modal
   só funciona pra logo clara/branca — a maioria dos 20 clientes tem logo com
   texto/ícone em cor escura (ex.: ALPHA, print do usuário) ou colorida sobre
   fundo transparente, pensada pra ficar sobre fundo BRANCO (é como aparece
   no site do próprio cliente) — em cima de navy escuro, viram quase
   invisíveis. Mesmo racional já usado no resto da página pra logo de
   cliente (marquee, seção 42; grade antiga, seção 20): dar um chip BRANCO
   fixo atrás da logo garante contraste não importa a cor/paleta de cada
   logo individual — chip é sempre a mesma superfície neutra que funciona
   pra logo escura, clara ou colorida ao mesmo tempo. */
.parceiro-dialog__logo {
  width: 100%;
  max-width: 11rem;
  height: 4.5rem;
  padding: 0.75rem 1rem;
  background: var(--branco);
  border-radius: var(--raio-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.parceiro-dialog__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.parceiro-dialog__nome {
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--branco);
}
@media (prefers-reduced-motion: reduce) {
  .parceiro-dialog[open] { animation: none; }
}
.parceiro-card__selo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--raio-pill);
  background: var(--dourado-wash);
  border: 1px solid rgba(205, 182, 60, 0.3);
  color: var(--dourado);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.parceiro-card__selo svg { flex: none; }
/* BUG real (ver CLAUDE.md): `#parceiro-dialog-desc` é um <p>, e a
   regra genérica `.secao--clara p { color: rgba(0, 26, 53, 0.68); }` (texto
   navy escuro, pra parágrafo em seção de fundo claro) tem mais
   especificidade (classe + tag) que `.parceiro-card__desc` sozinha (só
   classe) — como o modal é descendente de `#clientes.secao--clara` no DOM,
   a regra clara vencia mesmo o modal tendo fundo navy escuro (`--navy-800`):
   texto quase preto sobre fundo quase preto, ilegível. `.parceiro-dialog
   .parceiro-card__desc` abaixo tem 2 classes (mais específica que classe+tag)
   e garante que o texto do modal SEMPRE fica claro, não importa a seção. */
.parceiro-card__desc {
  font-size: 0.87rem;
  line-height: 1.6;
  color: rgba(244, 244, 249, 0.7);
  margin: 0;
}
.parceiro-dialog .parceiro-card__desc { color: rgba(244, 244, 249, 0.7); }

/* =========================== Pills de estatística no hero-like =========================== */
.pills { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: var(--raio-pill);
  background: rgba(244, 244, 249, 0.06);
  border: 1px solid var(--linha);
  font-size: 0.85rem;
}
.pill svg { width: 1rem; height: 1rem; stroke: var(--azul-acento); }

/* =========================== Depoimentos (fictícios, disclosure explícito) =========================== */
.aviso-depoimentos {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--raio-sm);
  background: rgba(243, 156, 18, 0.1);
  border: 1px dashed rgba(243, 156, 18, 0.4);
  color: #f3c98a;
  font-size: 0.8rem;
  margin-bottom: 2rem;
}
.grade-depoimentos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1.5rem;
}
.depoimento {
  padding: 1.75rem;
  background: rgba(244, 244, 249, 0.04);
  border: 1px solid var(--linha);
}
.depoimento p { font-style: italic; color: rgba(244, 244, 249, 0.85); }
.depoimento__autor { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.25rem; }
.depoimento__avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--navy-700);
  border: 1px solid rgba(205, 182, 60, 0.4);
  display: grid;
  place-items: center;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  color: var(--dourado);
  font-size: 0.85rem;
}
.depoimento__nome { font-weight: 600; color: var(--branco); font-size: 0.9rem; }
.depoimento__cargo { font-size: 0.78rem; color: rgba(244, 244, 249, 0.55); }
.depoimento__selo { font-size: 0.7rem; color: #f3c98a; }

/* =========================== CTA final =========================== */
.cta-final {
  position: relative;
  padding: clamp(2.5rem, 4vw, 5rem);
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy-900), var(--navy-800));
  border: 1px solid rgba(205, 182, 60, 0.22);
  text-align: center;
  isolation: isolate;
}
.cta-final::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  background: radial-gradient(circle at 30% 20%, rgba(205, 182, 60, 0.3), transparent 55%),
              radial-gradient(circle at 80% 80%, rgba(70, 127, 247, 0.18), transparent 50%);
  filter: blur(30px);
}
.cta-final h2 { color: var(--branco); font-size: clamp(1.8rem, 1.5rem + 1.6vw, 2.6rem); }
.cta-final .acoes { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.75rem; }

/* =========================== Formulário de contato (#contato) =========================== */
.aviso-contato {
  padding: 0.85rem 1.1rem;
  border-radius: var(--raio-sm);
  margin-bottom: 1.25rem;
  font-size: 0.88rem;
  border: 1px solid transparent;
}
.aviso-contato--sucesso { background: rgba(61, 214, 140, 0.12); border-color: rgba(61, 214, 140, 0.4); color: #9df0c4; }
.aviso-contato--erro { background: rgba(229, 72, 77, 0.12); border-color: rgba(229, 72, 77, 0.4); color: #f4a3a6; }
.formulario-contato {
  display: grid;
  gap: 1.1rem;
  padding: clamp(1.5rem, 2vw, 2rem);
  background: rgba(244, 244, 249, 0.04);
  border: 1px solid var(--linha);
}
.formulario-contato__linha { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.formulario-contato__mel { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.campo-contato { display: grid; gap: 0.4rem; }
.campo-contato label { font-size: 0.82rem; font-weight: 600; color: rgba(244, 244, 249, 0.75); }
.campo-contato input, .campo-contato textarea {
  background: rgba(244, 244, 249, 0.05);
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  color: var(--gelo);
  padding: 0.75rem 0.9rem;
  font: inherit;
  width: 100%;
  transition: border-color var(--dur-micro) ease;
}
.campo-contato input:focus, .campo-contato textarea:focus { outline: none; border-color: var(--azul-acento); }

/* =========================== Seções claras (contraste de ritmo) ===========================
   Toda a página era a mesma faixa navy do início ao fim — sem variação de
   fundo entre seções. `.secao--clara` é um modificador reaproveitável: fundo
   claro opaco (cobre os blobs decorativos de fundo automaticamente, sem
   precisar de z-index — conteúdo em fluxo normal já pinta por cima de um
   elemento fixed com z-index negativo) + reescrita de cor de texto/ícone pros
   componentes que efetivamente aparecem dentro das seções em que é usado
   (`#clientes` e o split "Parceria de longo prazo"). Ver CLAUDE.md
   pro racional completo, inclusive por que o carrossel de clientes foi o
   gatilho: fundo claro garante contraste pra logo de cliente de qualquer cor
   — um logo escuro (ex.: azul-marinho) fica ilegível num cartão escuro, mas
   sempre legível sobre branco, e um logo colorido/claro também funciona bem
   sobre branco — branco é a única cor de fundo "universal" pra logo wall. */
.secao--clara {
  background: linear-gradient(180deg, #f8f8fb 0%, #eef0f7 100%);
  color: var(--navy-900);
}
.secao--clara .rotulo { color: var(--dourado-claro); }
.secao--clara .rotulo::before { background: var(--dourado-claro); box-shadow: 0 0 0 4px rgba(120, 102, 26, 0.16); }
.secao--clara .titulo-secao { color: var(--navy-900); }
.secao--clara .subtitulo-secao { color: rgba(0, 26, 53, 0.62); }
.secao--clara p { color: rgba(0, 26, 53, 0.68); }

.secao--clara .pill {
  background: rgba(0, 26, 53, 0.04);
  border-color: rgba(0, 26, 53, 0.14);
  color: var(--navy-900);
}
.secao--clara .pill svg { stroke: var(--azul-acento-600); }

/* =========================== Rodapé =========================== */
.rodape { border-top: 1px solid var(--linha); padding-block: 3rem 2rem; font-size: 0.85rem; color: rgba(244, 244, 249, 0.55); }
.rodape__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 2rem; margin-bottom: 2rem; }
.rodape__col h4 { color: var(--branco); font-size: 0.9rem; margin-bottom: 0.9rem; }
.rodape__col ul { display: grid; gap: 0.55rem; }
.rodape__col a:hover { color: var(--branco); }
.rodape__social { display: flex; gap: 0.75rem; }
.rodape__social a {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(244, 244, 249, 0.06);
  border: 1px solid var(--linha);
  color: rgba(244, 244, 249, 0.7);
  transition: color var(--dur-micro) ease, border-color var(--dur-micro) ease, transform var(--dur-micro) var(--ease);
}
.rodape__social a:hover { color: var(--dourado); border-color: rgba(205, 182, 60, 0.45); transform: translateY(-2px); }
.rodape__social svg { width: 1.1rem; height: 1.1rem; }
.rodape__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--linha); }

/* =========================== Scroll reveal =========================== */
.revelar { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.revelar.em-vista { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; transition: none; }
}

/* =========================== Menu mobile (drawer lateral) — ver CLAUDE.md =========================== */
@media (max-width: 900px) {
  .nav__cta { display: none; }
  .menu-toggle { display: flex; }

  /* Camada de fundo: tela cheia, escurece o site atrás, clique fora fecha (ver main.js) */
  .nav__links {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    justify-content: flex-end;
    background: rgba(0, 8, 12, 0.55);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-base) var(--ease), visibility var(--dur-base);
  }
  .nav__links--aberto { opacity: 1; visibility: visible; }

  /* Painel sólido, entra deslizando da direita */
  .nav__links-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.35rem;
    width: min(82vw, 360px);
    height: 100%;
    padding: 6.5rem 2rem 2.5rem;
    background:
      radial-gradient(120% 90% at 100% 0%, rgba(205, 182, 60, 0.14), transparent 55%),
      linear-gradient(180deg, #060d13 0%, #0a141c 100%);
    border-left: 1px solid rgba(205, 182, 60, 0.28);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45);
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease);
  }
  .nav__links--aberto .nav__links-inner { transform: translateX(0); }

  .nav__links-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dourado);
    margin-bottom: 1rem;
  }

  .nav__links-inner a {
    position: relative;
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    font-size: 1.28rem;
    font-weight: 600;
    padding: 0.7rem 0;
    opacity: 0;
    transform: translateX(14px);
    transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), color var(--dur-micro) ease;
  }
  .nav__links--aberto .nav__links-inner a { opacity: 1; transform: translateX(0); }
  .nav__links-inner a::before {
    counter-increment: item-menu;
    content: counter(item-menu, decimal-leading-zero);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--dourado);
    opacity: 0.75;
  }
  .nav__links-inner { counter-reset: item-menu; }
  .nav__links-inner a:nth-child(2) { transition-delay: 60ms; }
  .nav__links-inner a:nth-child(3) { transition-delay: 110ms; }
  .nav__links-inner a:nth-child(4) { transition-delay: 160ms; }
  .nav__links-inner a:nth-child(5) { transition-delay: 210ms; }
  .nav__links-inner a:nth-child(6) { transition-delay: 260ms; }
  .nav__links-inner a::after { left: 1.9rem; right: 0; }
  .nav__links-inner a.nav__links-cta-mobile::before { content: none; }

  .nav__links a.nav__links-cta-mobile {
    display: inline-flex;
    margin-top: 1.75rem;
    opacity: 0;
    transform: translateX(14px);
    transition-delay: 310ms;
  }
  .nav__links--aberto a.nav__links-cta-mobile { opacity: 1; transform: translateX(0); }
}

/* =========================== Responsivo =========================== */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__mockup { order: -1; margin-bottom: 1rem; }
  .split, .split--inv .split__media, .split--inv .split__texto { grid-template-columns: 1fr; order: initial; }
  .split { grid-template-columns: 1fr; }
  .formulario-contato__linha { grid-template-columns: 1fr; }
}