/* ==========================================================================
   Vetorial360 Engenharia — Componentes
   Depende de tokens.css. Só usa var(--...), nenhum hex solto.
   Regras de aceite deste projeto embutidas aqui: zero WhatsApp, cookie banner
   à esquerda, sem pílulas coloridas, sem grade uniforme de cards (ver notas).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--brand);
  margin: 0;
  font-weight: var(--weight-semibold);
  /* Evita palavra órfã (uma só palavra na última linha): balance equilibra o
     comprimento das linhas do título em vez de deixar a última quase vazia. */
  text-wrap: balance;
}

/* ---------- Container / grid ---------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--narrow {
  max-width: calc(var(--measure) + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.section {
  padding-block: var(--space-section);
}
.section--sm { padding-block: var(--space-section-sm); }
.section.on-dark {
  background: var(--surface-inverse);
  color: var(--text-inverse);
}
.section.on-dark h1, .section.on-dark h2, .section.on-dark h3, .section.on-dark h4 {
  color: var(--text-inverse);
}
.section.alt { background: var(--surface-alt); }

/* ---------- Eyebrow / kicker (NUNCA pill — só texto + régua) ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--brand);
}
.section.on-dark .eyebrow { color: var(--text-inverse); }
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 3px;
  border-radius: var(--radius-xs);
  background: var(--accent);
  flex-shrink: 0;
}

/* ---------- Títulos de seção ---------- */
.section-title { font-size: var(--text-h2); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); margin-top: var(--space-4); }
.section-lede  { font-family: var(--font-body); font-size: var(--text-xl); font-weight: var(--weight-regular); color: var(--text-muted); line-height: var(--leading-relaxed); max-width: var(--measure); margin-top: var(--space-4); }
.section.on-dark .section-lede { color: var(--text-inverse-muted); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-base);     /* 16px — ver nota de contraste em .btn--primary */
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  border: var(--border-width-hairline) solid transparent;
  cursor: pointer;
  touch-action: manipulation;
  text-decoration: none;
  transition: transform var(--duration-base) var(--ease-standard),
              background var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Primário — o CTA de assinatura. Texto SEMPRE navy-900 sobre o dourado sólido.
   Com o gradiente removido (17/08/2026), o pior contraste do botão deixou de ser
   os 4,34:1 da ponta laranja e passou a ser 7,02:1 uniformes. Isso libera o piso
   de texto pequeno da WCAG (4,5:1) com folga, e é por isso que o botão pôde
   encolher de 19-21px/700 para 16px/700 sem reprovar nada. */
.btn--primary {
  background: var(--accent);
  color: var(--ink-on-accent);
  box-shadow: var(--shadow-sm);
  font-weight: var(--weight-bold);
}
.btn--primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-lg); }

/* Secundário — outline navy sobre claro / outline branco sobre escuro */
.btn--secondary {
  background: transparent;
  border-color: var(--brand);
  color: var(--brand);
}
.btn--secondary:hover { background: var(--navy-50); }
.section.on-dark .btn--secondary { border-color: var(--border-inverse-strong); color: var(--text-inverse); }
.section.on-dark .btn--secondary:hover { background: rgba(255,255,255,.08); }

/* Ghost — link de texto, sublinhado animado (nunca cor de acento como texto pequeno) */
.btn--ghost {
  background: none;
  border: none;
  padding: var(--space-2) 0;
  color: var(--brand);
  position: relative;
}
.btn--ghost::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--brand);
  transition: right var(--duration-base) var(--ease-out);
}
.btn--ghost:hover::after { right: 0; }
/* Sobre escuro só o texto e o sublinhado mudam de cor — o fundo do botão continua
   transparente. Agrupar os dois seletores pintava o botão inteiro de branco (texto
   branco sobre fundo branco, contraste 1:1). */
.section.on-dark .btn--ghost { color: var(--text-inverse); background: none; }
.section.on-dark .btn--ghost::after { background: var(--text-inverse); }

/* ---------- Hero full-bleed (100dvh, imagem de fundo + overlay) ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  color: var(--text-inverse);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* overlay navy — garante 100% legibilidade do texto sobre qualquer foto.
     Duas camadas: uma HORIZONTAL que escurece a coluna esquerda (onde o
     conteúdo é alinhado), para o texto não perder contraste quando a foto
     tem uma área clara à direita (ex.: o corpo do scanner); e uma VERTICAL
     mais densa embaixo, onde ficam o CTA e a faixa de números. */
  background:
    linear-gradient(90deg,
      rgba(14,23,40,.78) 0%,
      rgba(14,23,40,.48) 42%,
      rgba(14,23,40,.12) 72%,
      rgba(14,23,40,0)   100%),
    linear-gradient(180deg,
      rgba(14,23,40,.35) 0%,
      rgba(14,23,40,.55) 55%,
      rgba(14,23,40,.86) 100%);
}
.hero__content {
  position: relative;
  z-index: 2;
  padding-block: var(--space-20) var(--space-16);
  max-width: calc(var(--measure) + 4ch);
}
.hero__title {
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tightest);
  font-weight: var(--weight-bold);   /* hero em BOLD — o título mais chamativo da página */
  color: var(--text-inverse);
}
.hero__lede {
  font-size: var(--text-xl);
  color: var(--text-inverse-muted);
  margin-top: var(--space-6);         /* mais respiro título -> subhead */
  max-width: 52ch;
}
.hero__actions { margin-top: var(--space-10); display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }

/* ---------- Número de autoridade (stat) — duas variantes obrigatórias ----------
   on-dark: preenchimento em gradiente (passa contraste em texto grande sobre navy)
   on-light: número sólido navy + tique curto em gradiente (gradiente falha
   como texto sobre branco na ponta dourada — 2.09:1 — nunca usar direto) */
.stat { display: flex; flex-direction: column; gap: var(--space-2); }
.stat__number {
  font-family: var(--font-display);
  font-size: var(--text-stat);
  font-weight: var(--weight-bold);
  font-variant-numeric: var(--numeral-variant);
  line-height: var(--leading-tight);
  color: var(--brand); /* padrão: sólido navy (variante on-light) */
}
.stat__number::before {
  content: "";
  display: block;
  width: 32px; height: 4px;
  border-radius: var(--radius-xs);
  background: var(--accent);
  margin-bottom: var(--space-3);
}
.section.on-dark .stat__number {
  color: var(--accent);
}
.stat__label { font-size: var(--text-sm); color: var(--text-muted); max-width: 24ch; }
.section.on-dark .stat__label { color: var(--text-inverse-muted); }

/* ---------- Card (diferencial/serviço) ----------
   ATENÇÃO (uso, não CSS): nunca repita este card em grade uniforme 3col×N
   idêntica — isso é o padrão que lê como "cara de IA". Varie por seção:
   1 card grande + 2 pequenos, ou lista alternada texto/imagem, ou 2 colunas
   assimétricas. O componente serve a todas as variações de layout. */
.card {
  background: var(--white);
  border: var(--border-width-hairline) solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--navy-50);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand);
  margin-bottom: var(--space-5);
}
.card__title { font-size: var(--text-h4); color: var(--brand); }
.card__text { color: var(--text-muted); margin-top: var(--space-3); }

/* ---------- Tag de segmento (setor: varejo, bancos, indústria...) ----------
   Texto + canto cortado (eco da geometria facetada do símbolo) — NUNCA pill
   colorida. Sempre navy sobre claro/borda, nunca preenchida a cor de acento. */
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--brand);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width-hairline) solid var(--border-strong);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.section.on-dark .tag { color: var(--text-inverse); border-color: var(--border-inverse-strong); }

/* ---------- Tabela comparativa (Vetorial360 × método tradicional) ----------
   Ícone de check sempre navy sólido (nunca gradiente/dourado puro — falha
   contraste 3:1 sobre célula branca, ver doc §2). */
.compare { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.compare th, .compare td {
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-width-hairline) solid var(--border);
  text-align: left;
}
.compare thead th {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--text-inverse);
  background: var(--brand);
}
.compare thead th:first-child { border-top-left-radius: var(--radius-sm); }
.compare thead th:last-child  { border-top-right-radius: var(--radius-sm); }
.compare td.is-check { color: var(--brand); font-weight: var(--weight-semibold); }
.compare td.is-cross { color: var(--text-muted); }
.compare tbody tr:nth-child(even) { background: var(--surface-alt); }

/* ---------- Rodapé — NUNCA telefone (é número de celular, risco WhatsApp),
   NUNCA link wa.me/api.whatsapp.com/tel:. Só e-mail comercial + endereço. ---------- */
.footer {
  background: var(--surface-inverse-deep);
  color: var(--text-inverse-muted);
  padding-block: var(--space-16) var(--space-10);
}
.footer a { color: var(--text-inverse); }
.footer__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-6);
  font-size: var(--text-sm);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border-width-hairline) solid var(--border-inverse);
}

/* ---------- Banner de cookies — SEMPRE canto inferior ESQUERDO.
   O canto inferior direito é reservado ao botão do Merlin (fora deste DS).
   Barra BAIXA de uma linha (texto à esquerda, botões à direita), não cartão
   vertical: um cartão de 219px de altura cobria 99% do CTA do hero em
   viewport baixo (medido 1280×720). Layout em grid 2 colunas: título+texto
   na coluna 1 (2 linhas), ações na coluna 2, centralizadas no bloco inteiro
   — sem precisar de wrapper novo no HTML (a copy não muda). ---------- */
.cookie-banner {
  position: fixed;
  left: var(--space-6);
  bottom: var(--space-6);
  right: auto;                 /* trava: o canto inferior direito e do Merlin */
  z-index: var(--z-cookie-banner);
  /* Card compacto claro, ancorado a esquerda. Largura fixa modesta — le como
     aviso discreto, nao como barra que atravessa a tela. */
  width: min(384px, calc(100vw - var(--space-6) * 2));
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--surface);
  color: var(--text);
  border: var(--border-width-hairline) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 48px -16px rgba(14, 23, 40, .32),
              0 4px 12px -6px rgba(14, 23, 40, .16);
  padding: var(--space-6);
}
.cookie-banner__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--brand);
}
.cookie-banner p:not(.cookie-banner__title) {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-muted);
}
.cookie-banner a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-1);
}
.cookie-banner .btn {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-5);
  white-space: nowrap;
}
/* Aceitar em NAVY (nao no dourado): o dourado e reservado ao CTA de conversao,
   pra o aviso de cookie nao competir com o botao que de fato converte. */
.cookie-banner .btn--primary {
  background: var(--brand);
  color: var(--ink-inverse);
  box-shadow: none;
}
.cookie-banner .btn--primary:hover { background: var(--brand-strong); }
.cookie-banner .btn--secondary {
  border-color: var(--border-strong);
  color: var(--text);
}
.cookie-banner .btn--secondary:hover { background: var(--surface-alt); }

@media (max-width: 599px) {
  .cookie-banner {
    left: var(--space-4);
    bottom: var(--space-4);
    width: min(384px, calc(100vw - var(--space-4) - var(--space-8)));
    padding: var(--space-5);
  }
}
}

/* ---------- Foco visível global ---------- */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}

/* ---------- Divisor técnico (motivo genuíno da marca — ver design-system.md §1) ----------
   Traço fino + notch de 45°, extraído da geometria do símbolo (cortes retos).
   Uso pontual: separador de seção, nunca fundo de página. */
.tech-divider {
  display: flex; align-items: center; gap: var(--space-3);
  color: var(--brand);
}
.tech-divider::before {
  content: "";
  width: 14px; height: 14px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% 60%, 60% 100%, 0 100%);
  flex-shrink: 0;
}
.tech-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-strong);
}

/* ==========================================================================
   Botão flutuante do Merlin — cor da identidade (navy da marca).
   O ícone servido é opaco (logo verde), então a cor da marca aparece como
   aro; aplicamos mesmo assim para alinhar ao máximo com a identidade.
   ========================================================================== */
.merlin-button { background: var(--brand) !important; }