/* Cores Otimiza.pro — sistema dual (DARK default + light por escolha) */

/* === DARK THEME (default) — "piano black" ===
   Decisao CEO 03/09/2026: "altere o tema de todo o site para dark default, use mais
   preto black piano". O escuro deixa de depender do prefers-color-scheme: e o padrao
   do silo. O claro passa a existir SO por escolha explicita ([data-theme="light"]).
   O chao e preto PURO e CONTINUO — as faixas alternadas morreram e o fundo corre por
   baixo das ilhas (ver "ILHAS UNIVERSAIS" adiante). */
:root {
  /* manda no que o NAVEGADOR pinta sozinho: barra de rolagem, popup de <select>,
     preenchimento automatico. Sem isto eles vem claros sobre a pagina preta. */
  color-scheme: dark;

  --primary: #007acc;
  --primary-dark: #004c97;
  --primary-light: #49a6df;
  --secondary: #4d9fdb;
  --secondary-light: #6bb8f0;
  --accent-cyan: #00d4ff;
  --accent-green: #34d399;

  --text: #e8ecf2;
  --text-light: #a8b2c2;
  --text-muted: #7e8899;

  /* preto puro no chao: e ele que aparece na goteira ENTRE as ilhas */
  --bg: #000000;
  --bg-alt: #000000;
  --surface: #0b0b0d;
  --surface-card: rgba(255, 255, 255, 0.045);
  --surface-border: rgba(255, 255, 255, 0.10);
  --surface-hover: rgba(255, 255, 255, 0.07);

  --gray-medium: #2c2c31;
  --gray-light: #161619;

  --nav-bg: rgba(0, 0, 0, 0.82);
  --hero-gradient-1: rgba(0,122,204, 0.12);
  --hero-gradient-2: rgba(77, 159, 219, 0.08);

  --h1-gradient: linear-gradient(135deg, #ffffff 0%, #a8b2c2 100%);
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.7);
  --glow-primary: 0 0 30px rgba(0,122,204, 0.3);
  --glow-blue: 0 0 30px rgba(77, 159, 219, 0.3);

  /* wordmark monocromatico do rodape: inverte para branco no fundo preto */
  --filtro-logo-mono: invert(1);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --max-w: 1200px;
  --radius: 12px;
}

/* === LIGHT THEME — SO por escolha explicita no botao ===
   ⚠️ Nao ha mais espelho de prefers-color-scheme: o sistema do usuario nao decide mais
   o tema deste silo. Sem data-theme salvo, o silo abre ESCURO. A mesma paleta alimenta
   as "ilhas brancas" (.section.is-light) — fonte unica, para nao divergirem. */
[data-theme="light"],
.section.is-light > .container {
  /* vale tambem em elemento nao-raiz: os campos do formulario dentro da ilha
     branca (#contato) herdam a UI nativa CLARA, que e a certa ali. */
  color-scheme: light;

  --secondary: #1e6fb8;
  --secondary-light: #4d9fdb;
  --accent-cyan: #0288d1;
  --accent-green: #10b981;

  --text: #0f172a;
  --text-light: #475569;
  --text-muted: #64748b;

  --bg: #f7f9fc;
  --bg-alt: #f7f9fc;
  --surface: #ffffff;
  --surface-card: #ffffff;
  --surface-border: #e2e8f0;
  --surface-hover: #f1f5f9;

  --gray-medium: #cbd5e1;
  --gray-light: #f1f5f9;

  --filtro-logo-mono: none;

  --nav-bg: rgba(255, 255, 255, 0.92);
  --hero-gradient-1: rgba(0,122,204, 0.08);
  --hero-gradient-2: rgba(30, 111, 184, 0.05);

  --h1-gradient: linear-gradient(135deg, #0f172a 0%, #1e6fb8 100%);
  --shadow-sm: 0 2px 12px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 30px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 60px rgba(15, 23, 42, 0.12);
  --glow-primary: 0 0 30px rgba(0,122,204, 0.25);
  --glow-blue: 0 0 30px rgba(30, 111, 184, 0.2);
}

/* === BASE === */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
  transition: background 0.3s ease, color 0.3s ease;
}
a { color: var(--secondary); }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }

/* === NAV === */
.nav {
  position: sticky;
  top: 0;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--surface-border);
  z-index: 50;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.brand {
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
}
/* === LOCKUP DO MEU AGENTE ===
   Decisao CEO 23/09/2026 (manual da marca §3): onde o nome aparece ao lado do simbolo,
   ele e o lockup desenhado, copia exata de Meu Agente/brand/logo-horizontal*.svg, nunca o
   nome digitado. Escuro e o padrao => o -dark (palavra branca) por padrao; o duotom com a
   palavra azul volta no tema claro e dentro das ilhas brancas, a mesma troca do .otimiza-logo.
   32px de altura = 28px de simbolo, o minimo do manual. */
.ma-lockup { display: block; width: auto; height: 32px; }
.ma-lockup--claro { display: none; }
[data-theme="light"] .ma-lockup--claro,
.section.is-light .ma-lockup--claro { display: block; }
[data-theme="light"] .ma-lockup--dark,
.section.is-light .ma-lockup--dark { display: none; }
.nav nav { display: flex; align-items: center; }
.nav nav a {
  margin-left: 24px;
  color: var(--text-light);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}
.nav nav a:hover { color: var(--primary); }
.btn-ghost {
  padding: 8px 16px;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--surface-hover);
  color: var(--text) !important;
  font-size: 14px;
}
.btn-ghost:hover { border-color: var(--primary); color: var(--primary) !important; }

.theme-toggle {
  margin-left: 16px;
  background: var(--surface-hover);
  border: 1px solid var(--surface-border);
  color: var(--text);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.2s;
}
.theme-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
}
/* escuro e o padrao => o icone padrao e o sol (oferece "ir para o claro") */
.theme-toggle .icon-sun { display: inline; }
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: inline; }

/* === HAMBÚRGUER (mobile only) === */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0 9px;
  background: var(--surface-hover);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  cursor: pointer;
}
.nav-toggle span { display: block; width: 100%; height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* === CTA FIXO MOBILE === */
.mobile-cta {
  display: none;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* === HERO === */
/* === TRILHA (breadcrumb) ===
   Entre o menu e o hero, alinhada ao container. Sem esta regra a trilha colava
   na borda esquerda, com o link sublinhado do navegador. */
.breadcrumb { max-width: var(--max-w); margin: 18px auto 0; padding: 0 24px; font-size: 14px; color: var(--text-muted); }
.breadcrumb a { color: var(--secondary); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.hero {
  padding: 96px 0 80px;
  text-align: center;
  background:
    radial-gradient(ellipse at top, var(--hero-gradient-1) 0%, transparent 60%),
    radial-gradient(ellipse at bottom, var(--hero-gradient-2) 0%, transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--surface-border);
}
.hero h1 {
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  background: var(--h1-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.lead { font-size: 20px; color: var(--text-light); margin: 24px auto 32px; max-width: 640px; }

.btn-primary {
  display: inline-block;
  background: linear-gradient(135deg, #0072b8 0%, #075b8f 100%);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 999px;
  transition: all 0.2s;
  box-shadow: var(--shadow-md), var(--glow-primary);
  letter-spacing: 0.01em;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(0,122,204, 0.5);
}

.badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 56px;
}
.badges li {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-light);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
}

/* === SECTIONS === */
.section { padding: 96px 0; }
/* âncoras (#planos, #financas…) pousam abaixo do header fixo, não escondidas sob ele */
[id] { scroll-margin-top: 84px; }
.section.alt { background: var(--bg-alt); }
.section.dark {
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
}
/* === ILHAS UNIVERSAIS — "piano black" (laca polida) ===
   Decisao CEO 03/09/2026: "integre sessoes por debaixo das ilhas". O acabamento que
   era exclusivo dos blocos .ma-premium vira O SISTEMA: toda secao passa a ser uma ilha
   flutuante, e o preto do body corre CONTINUO por baixo de todas elas. Por isso as
   faixas alternadas (.section.alt / .section.dark) sao zeradas — a ilha e a unidade
   visual, nao a faixa de cor.
   Receita (a mesma medida e aprovada em 30/08, agora generalizada):
   - corpo quase-preto vertical #161619 -> #0b0b0d -> #050506 (nao chega a #000 puro:
     preserva a faixa tonal que da o efeito de superficie polida);
   - brilho especular no topo (radial 50%/-25%, branco .10 -> 0): a luz batendo na laca;
   - fio branco translucido .12 + catchlight de 1px no topo = brilho da quina;
   - sombra ambiente preta + drop-shadow profundo + vinheta interna inferior.
   O azul da casa fica nos CTAs/realces, NUNCA no fundo do painel ("o preto domina"). */
.section.alt,
.section.dark {
  background: transparent;
  border-top: 0;
  border-bottom: 0;
}
/* o padding vertical sai da secao e entra na ilha; o que sobra aqui e a GOTEIRA
   (o preto entre uma ilha e a proxima) — ~52px, o gap amostrado no modelo */
.section { padding: clamp(13px, 1.8vw, 26px) 0; }

.section > .container {
  position: relative;
  border-radius: 24px;
  padding: clamp(40px, 5vw, 64px) clamp(20px, 3.4vw, 48px);
  background:
    radial-gradient(130% 85% at 50% -25%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .028) 32%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, #161619 0%, #0b0b0d 46%, #050506 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow:
    0 0 80px 0 rgba(0, 0, 0, .8),
    0 42px 90px -34px rgba(0, 0, 0, .92),
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 -50px 70px -50px rgba(0, 0, 0, .65);
}

/* === ILHAS BRANCAS (pedido CEO 03/09: "altere algumas sessoes com fundo branco") ===
   Quebram o ritmo do preto e devolvem contraste onde a pagina pede decisao. Os TOKENS
   claros vem do mesmo bloco de [data-theme="light"] la em cima (fonte unica), entao
   todo componente interno (card, borda, texto secundario) acompanha sozinho. */
.section.is-light > .container {
  background: #f5f5f7;
  border: 1px solid rgba(15, 23, 42, .06);
  box-shadow: 0 34px 80px -44px rgba(0, 0, 0, .95);
  color: var(--text);
}

/* === TEMA CLARO: a ilha continua existindo, so troca o acabamento === */
[data-theme="light"] .section > .container {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, .07);
  box-shadow: 0 18px 45px -30px rgba(15, 23, 42, .18);
}
[data-theme="light"] .section.is-light > .container { background: #f5f5f7; }

/* .ma-premium perdeu a funcao de "spotlight" quando TODA secao virou ilha; fica como
   gancho inerte no HTML para nao exigir varredura de classe agora. */
.ma-premium { background: none; border: 0; box-shadow: none; margin: 0; }

.section .container.center, .section.dark .container { text-align: center; }

.section h2 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  line-height: 1.15;
  color: var(--text);
}
.section h3 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 32px;
  margin-bottom: 8px;
  color: var(--text);
}
.section p {
  color: var(--text-light);
  margin-bottom: 16px;
  max-width: 720px;
}

/* === FEATURES GRID === */
.features-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 32px;
}
.features-grid li {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  padding: 18px;
  border-radius: var(--radius);
  font-weight: 500;
  text-align: center;
  color: var(--text);
  transition: all 0.2s;
  box-shadow: var(--shadow-sm);
}
.features-grid li:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.bullets, .steps { margin: 16px 0 16px 24px; }
.bullets li, .steps li { margin-bottom: 8px; color: var(--text-light); }
.bullets li::marker { color: var(--primary); }
.steps li::marker { color: var(--secondary); font-weight: 700; }

.callout {
  background: var(--surface-card);
  border-left: 4px solid var(--primary);
  padding: 16px 20px;
  border-radius: 8px;
  margin-top: 24px;
  font-style: italic;
  color: var(--text-light);
  box-shadow: var(--shadow-sm);
}

/* === CASES === */
.cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.cases > div {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  padding: 28px;
  border-radius: var(--radius);
  transition: all 0.2s;
  box-shadow: var(--shadow-sm);
}
.cases > div:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.cases h3 { margin-top: 0; }

/* === METRICS === */
.metrics {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  margin: 48px 0;
}
.metrics li { text-align: center; }
.metrics strong {
  display: block;
  font-size: 44px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.metrics span { color: var(--text-muted); font-size: 13px; }

/* === QUOTE === */
blockquote {
  max-width: 640px;
  margin: 48px auto 0;
  padding: 32px;
  border-radius: var(--radius);
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
blockquote p { font-size: 18px; font-style: italic; color: var(--text); }
blockquote cite { display: block; margin-top: 16px; font-style: normal; font-weight: 700; color: var(--primary); }

/* === PRICING — 3 OPÇÕES === */
.pricing-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  max-width: 920px;
  margin: 48px auto 0;
  align-items: stretch;
}
.price-card {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  transition: all 0.2s;
  box-shadow: var(--shadow-md);
}
.price-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
}
.price-card.highlight {
  border: 2px solid var(--primary);
  box-shadow: var(--shadow-lg), var(--glow-primary);
  transform: scale(1.02);
}
.price-card .tag.muted {
  background: var(--surface-hover);
  color: var(--text-muted);
}
.price-card h3 {
  margin-top: 16px;
  margin-bottom: 8px;
  font-size: 20px;
  color: var(--text);
}
.price-card .now {
  font-size: 44px;
  font-weight: 800;
  color: var(--primary);
  margin: 8px 0;
  letter-spacing: -0.02em;
}
.price-card .now small {
  font-size: 16px;
  color: var(--text-muted);
  font-weight: 500;
}
.price-card .terms {
  color: var(--text-light);
  font-size: 14px;
  flex-grow: 1;
  margin-bottom: 20px;
}
.price-card .btn-primary {
  display: block;
  text-align: center;
  font-size: 14px;
  padding: 12px 20px;
  margin-bottom: 12px;
}
.price-card .legal {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}
/* grade de planos — hoje o silo publica UM plano (Meu Agente); o --4 fica para reuso */
.pricing-options--4 { max-width: 1160px; }
.pricing-options--1 { max-width: 560px; grid-template-columns: minmax(0, 1fr); }
.plan-feats {
  list-style: none;
  text-align: left;
  padding: 0;
  margin: 12px 0 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plan-feats li {
  position: relative;
  padding-left: 24px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-light);
}
.plan-feats li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}
.plan-feats li.plan-feats__inherit {
  font-weight: 600;
  color: var(--text);
}
.plan-feats li.plan-feats__inherit::before { content: "★"; }

/* === PRICING legacy single card === */
.price {
  background: var(--surface);
  border: 2px solid var(--primary);
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  max-width: 480px;
  margin: 48px auto;
  box-shadow: var(--shadow-lg), var(--glow-primary);
}
.tag {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.from { margin-top: 16px; color: var(--text-muted); text-decoration: line-through; }
.now {
  font-size: 56px;
  font-weight: 800;
  color: var(--primary);
  margin: 8px 0;
  letter-spacing: -0.02em;
}
.now small { font-size: 18px; color: var(--text-light); font-weight: 500; }
.terms { font-size: 13px; color: var(--text-light); }
.trust {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 24px;
  font-size: 13px;
  color: var(--text-light);
}

/* === FAQ === */
details {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  padding: 18px 22px;
  margin-bottom: 12px;
  transition: border-color 0.2s;
  box-shadow: var(--shadow-sm);
}
details:hover { border-color: var(--gray-medium); }
details[open] { border-color: var(--primary); }
details summary {
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
  list-style: none;
  position: relative;
  padding-right: 28px;
}
details summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
  font-size: 22px;
  font-weight: 300;
  transition: transform 0.2s;
}
details[open] summary::after { content: "−"; }
details[open] summary { margin-bottom: 12px; }
details p { color: var(--text-light); }

/* === LEAD FORM === */
.lead-form {
  max-width: 560px;
  margin: 32px 0 0;
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-md);
}
.lead-form .field { margin-bottom: 16px; }
.lead-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.lead-form input,
.lead-form select,
.lead-form textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  transition: all 0.2s;
}
.lead-form input::placeholder,
.lead-form textarea::placeholder { color: var(--text-muted); }
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,122,204, 0.15);
}
.lead-form textarea { resize: vertical; min-height: 80px; }
.lead-form button { width: 100%; border: none; cursor: pointer; font-size: 16px; margin-top: 8px; }
.lead-form .legal {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 16px;
  text-align: center;
}
.lead-form .legal a { color: var(--secondary); text-decoration: none; }

/* === FOOTER (clone da home — site/src/components/Footer.astro @ origin/master) ===
   ⚠️ ESPELHO do componente Astro. As regras abaixo sao as do Footer.astro sem
   o escopo `data-astro-cid-*`; a PONTE de tokens em `.footer` traduz os nomes
   do site (--dark-bg, --tinta, --borda…) para os desta LP. Mudou la, muda aqui.
   Vale so para o index; as demais paginas do silo ainda usam `.footer-grid`. */
.footer.footer--site {
  background: var(--dark-bg);
  color: var(--text-light);
  padding: 3rem 0 1.5rem;
  border-top: 1px solid var(--surface-border);
}
.footer.footer--site ul li { margin-bottom: 0; }

.footer {
  --dark-bg: var(--bg);
  --tinta: var(--text);
  --tinta-3: var(--text-muted);
  --borda: var(--surface-border);
  --marca-no-fundo: var(--primary);
  --primary-color: var(--primary);
  --small-size: 0.875rem;
}

/* selos */
.selos {
  padding: 2.25rem 1.5rem 0;
  text-align: center;
}
.selos__t {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: 1rem;
}
.selos__lista {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--borda);
}
.selos__lista li { margin-bottom: 0; }
.selos__lista a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--borda);
  color: var(--tinta);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: border-color 0.2s;
}
.selos__lista a:hover {
  border-color: var(--marca-no-fundo);
}
.selos__lista img {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  object-fit: contain;
}
/* wordmark: largura natural, e inverte com o tema */
.selos__lista img.selo__mono {
  width: auto;
  height: 14px;
  border-radius: 0;
  filter: var(--filtro-logo-mono);
}

.footer__in {
  display: grid;
  gap: 2rem;
  /* A 1a celula (marca + provas) e mais larga que as 4 colunas de link. */
  grid-template-columns: 1.5fr repeat(4, minmax(150px, 1fr));
}
@media (max-width: 1000px) {
  .footer__in {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}
.footer__col-t {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}
.footer__col li + li { margin-top: 0.4rem; }
.footer__col a { font-size: var(--small-size); }
.footer__in a {
  color: var(--text-light);
  text-decoration: none;
}
.footer__in a:hover,
.footer__base a:hover {
  color: var(--primary-color);
}
.footer__in ul { list-style: none; }
.footer__provas {
  font-size: var(--small-size);
  color: var(--text-muted);
  margin-top: 0.5rem;
}
.footer__cta {
  display: inline-block;
  font-weight: 700;
  color: var(--primary-color) !important;
}
/* portas do self-service — no celular o "Entrar" sai da barra do topo por
   falta de espaco; sem esta linha ele nao existiria no telefone. */
.footer__portas {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--surface-border);
  font-size: var(--small-size);
  font-weight: 600;
}
.footer__portas a { color: var(--text-light); text-decoration: none; }
.footer__portas a:hover { color: var(--primary-color); }
.footer__base {
  text-align: center;
  font-size: var(--small-size);
  color: var(--text-muted);
  margin-top: 2rem;
}
/* linha do silo — nao existe no Footer.astro; ver comentario no index.html */
.footer__silo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.35rem 0.9rem;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.footer__silo span {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.68rem;
}
.footer.footer--site .footer__silo a {
  color: var(--text-muted);
  text-decoration: none;
}
.footer.footer--site .footer__silo a:hover {
  color: var(--primary-color);
}

/* === FOOTER (legado — paginas irmas do silo: sobre, oferta, afiliacao…) === */
.footer {
  background: var(--bg-alt);
  color: var(--text);
  padding: 64px 0 32px;
  border-top: 1px solid var(--surface-border);
}
.footer .brand { color: var(--text); font-size: 20px; }
.footer p, .footer a { color: var(--text-light); }
.footer h4 {
  color: var(--text);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
  font-weight: 700;
}
.footer a { text-decoration: none; }
.footer a:hover { color: var(--primary); }
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 8px; }
.footer .tags { font-size: 13px; margin-top: 16px; color: var(--text-muted); }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer .copy {
  border-top: 1px solid var(--surface-border);
  padding-top: 24px;
  font-size: 13px;
}
.footer .copy p { color: var(--text-muted); }
/* Assinatura canonica Otimiza.pro no rodape do silo (Anderson 04/09). */
.footer .copy-logo { display: inline-block; margin: 0 0 14px; }
.footer .copy-logo .otimiza-logo { height: 28px; margin: 0; }


/* === COMPARE TABLE === */
.compare-wrap { overflow-x: auto; margin: 28px 0 12px; }
.compare-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 14px;
}
.compare-table th,
.compare-table td {
  padding: 12px 14px;
  text-align: center;
  border-bottom: 1px solid var(--surface-border);
}
.compare-table thead th {
  font-weight: 700;
  font-size: 13px;
  border-bottom: 2px solid var(--surface-border);
}
.compare-table th[scope="row"] {
  text-align: left;
  font-weight: 600;
}
.compare-table small { opacity: 0.65; font-weight: 400; }
.compare-table__highlight {
  background: rgba(0,122,204, 0.09);
  font-weight: 700;
}
.compare-table thead th.compare-table__highlight {
  border-bottom-color: #007acc;
}
.compare-note {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 8px;
}

/* === USE SCENARIOS === */
.use-scenarios { margin-top: 40px; }
.scenarios-label {
  text-align: center;
  font-size: 13px;
  font-style: italic;
  opacity: 0.7;
  margin-bottom: 24px;
}

/* === SCREENSHOTS === */
figure.screenshot {
  margin: 32px auto 8px;
  max-width: 880px;
  text-align: center;
}
figure.screenshot img {
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 18px;
  box-shadow: 0 10px 40px rgba(5, 11, 31, 0.18);
  background: var(--surface-bg, #fff);
}
figure.screenshot figcaption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}
/* WhatsApp mockup é "phone" — limita largura pra parecer celular */
.section.alt#financas figure.screenshot { max-width: 380px; }

/* === VÍDEO EMBED (YouTube) === */
.video-embed {
  position: relative;
  width: 100%;
  max-width: 330px;
  aspect-ratio: 9 / 16;
  margin: 8px auto 20px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  background: #000;
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }

/* === LOGO OTIMIZA (seção "Uma empresa") === */
.otimiza-logo { display: block; width: auto; height: 60px; margin: 0 0 24px; }
/* escuro e o padrao => lockup BRANCO por padrao; o colorido volta no tema claro
   e dentro das ilhas brancas, onde o fundo e claro de novo. */
.otimiza-logo--color { display: none; }
.otimiza-logo--white { display: block; }
[data-theme="light"] .otimiza-logo--color,
.section.is-light .otimiza-logo--color { display: block; }
[data-theme="light"] .otimiza-logo--white,
.section.is-light .otimiza-logo--white { display: none; }

/* === RESPONSIVE === */
@media (max-width: 768px) {
  /* Navs simples (comparativo/privacidade/termos/404) — sem hambúrguer, mantém esconder links */
  .nav:not(.nav--collapsible) nav a { margin-left: 12px; font-size: 13px; }
  .nav:not(.nav--collapsible) nav a:not(.btn-ghost):not(:last-child) { display: none; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero { padding: 64px 0 48px; }
  .section { padding: 64px 0; }
  .price { padding: 28px 20px; }
  .now { font-size: 44px; }
  .theme-toggle { margin-left: 8px; }
  figure.screenshot { margin: 24px auto 4px; }
  .section.alt#financas figure.screenshot { max-width: 100%; }

  /* CTA fixo no rodapé (mobile) */
  .mobile-cta {
    display: block;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 60;
    text-align: center;
    padding: 14px 16px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    box-shadow: var(--shadow-lg), var(--glow-primary);
  }
  body.has-mobile-cta { padding-bottom: 78px; }
  /* A linha do silo e o ultimo elemento da pagina: os 78px acima limpam a barra
     fixa (bottom 12 + ~54), mas nao o #scroll-top (fixed, bottom 80, 50x50), que
     cobria o fim de "Privacidade do Meu Agente" e o tornava nao-clicavel ali. */
  .footer.footer--site .footer__silo { padding-bottom: 62px; }
}

/* Nav colapsavel (LP): o hamburguer abre um painel com todos os links.
   O menu aberto (8 links, Login, Assinar e o tema) so cabe a partir de 1080px:
   com o corte em 768px, de 769 a 1048px ele empurrava a pagina para o lado
   (146px de rolagem horizontal em 769, 149px em 900). Por isso o corte e 1079px.
   O painel e OPACO: ele mora dentro do header, que ja tem backdrop-filter, e um
   backdrop-filter aninhado nao alcanca a pagina; com o --nav-bg translucido o texto
   do hero aparecia por tras dos links. A altura tem teto para a tela deitada. */
@media (max-width: 1079px) {
  .nav--collapsible .nav-toggle { display: flex; }
  .nav--collapsible nav {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--surface);
    border-bottom: 1px solid var(--surface-border);
    padding: 8px 24px 16px;
    box-shadow: var(--shadow-md);
    max-height: calc(100vh - 120px);
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    display: none;
  }
  .nav--collapsible nav.open { display: flex; }
  .nav--collapsible nav a { margin-left: 0; font-size: 15px; padding: 12px 0; border-bottom: 1px solid var(--surface-border); }
  .nav--collapsible nav a.btn-ghost { margin: 10px 0 0; text-align: center; border-bottom: none; }
  .nav--collapsible nav .theme-toggle { margin: 10px 0 0; align-self: flex-start; }
}
/* De 900px para cima o header e a pilula flutuante: o painel desce solto, com a
   mesma borda arredondada, e o Assinar (que so existe a partir de 900px) vira botao. */
@media (min-width: 900px) and (max-width: 1079px) {
  .nav--collapsible nav { top: calc(100% + 8px); border: 1px solid var(--surface-border); border-radius: 16px; max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); }
  .nav--collapsible nav a.ma-navcta { margin: 10px 0 0; padding: 12px 18px; justify-content: center; border-bottom: none; }
}

/* ===== HEADER CANONICO DO SILO (Anderson 04/09/2026) =========================
   Saiu do inline do index.html para ca: o header e o MESMO nas 17 paginas, entao
   a regra tem que ser uma so. .nav / .nav-toggle / .theme-toggle / .nav--collapsible
   ja moravam aqui; faltavam .ico, .ma-bar e .ma-navcta. */
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: -.14em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-moon .ico, .icon-sun .ico { width: 18px; height: 18px; }

/* faixa de oferta (topo) */
.ma-bar { background: linear-gradient(90deg,#2d81b6 0%,#1c6490 100%); color: #fff; text-align: center; padding: 11px 16px; font-size: 14px; font-weight: 600; line-height: 1.45; }
.ma-bar a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ma-bar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ma-bar code { background: rgba(255,255,255,.18); border: 1px dashed rgba(255,255,255,.65); border-radius: 6px; padding: 2px 9px; font-family: var(--font); font-weight: 800; letter-spacing: .1em; font-size: 13px; }

/* CTA do nav: so no desktop (no mobile o sticky da LP ja cobre) */
.ma-navcta { display: none; }
/* Texto branco no botao: o .nav nav a (cor dos links) vencia o .btn-primary, e
   a regra que corrigia isso morava so no inline do index; nas outras 21 paginas
   o Assinar saia cinza sobre azul. */
.nav nav a.btn-primary, .nav nav a.btn-primary:hover { color: #fff; }
@media (min-width: 900px) { .ma-navcta { display: inline-flex; padding: 9px 18px; font-size: 14px; } }

/* Barra flutuante de vidro (so desktop; no mobile o menu colapsavel e o CTA sticky
   ja resolvem — a pilula quebraria o abridor). Veio do inline do index.html em
   04/09/2026, quando o header passou a ser o mesmo em todo o silo. */
@media (min-width: 900px) {
  .nav { position: sticky; top: 14px; width: min(1160px, calc(100% - 40px)); margin: 14px auto 0;
    border: 1px solid var(--surface-border); border-radius: 20px;
    background: var(--nav-bg); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 18px 40px -20px rgba(15,23,42,.28); }
  .nav-inner { height: 58px; }
}