/* ============================================================================
   enviquo — base.css (fundação)
   Reset, tipografia, container, botões, cards, utilitários compartilhados e
   sistema de reveal (.rv). Consome APENAS variáveis de tokens.css.

   CONTRATO PARA BUILDERS DE SEÇÃO:
   - Use .container para largura; .section para o respiro vertical padrão.
   - Reveal: coloque .rv no elemento (ou wrapper) e data-rv-delay="80" (ms)
     para stagger. site.js adiciona .rv-in ao entrar no viewport.
     Não coloque .rv direto em .btn (conflito de transform com :active).
   - FAQ: <details class="..."><summary>…</summary>
     <div class="faq-body"><div><p>conteúdo</p></div></div></details>
     A animação (grid-template-rows) é da fundação e só existe sob html.js;
     sem JS (e sob movimento reduzido) o toggle nativo do <details> mostra e
     esconde o corpo. ATENÇÃO: o filho direto de
     .faq-body é só invólucro de clip e NÃO pode ter padding vertical (padding
     ali impede o colapso do 0fr; verificado no Chrome). Espace o conteúdo
     interno (o <p> do exemplo), nunca o invólucro.
   - Countup: <span data-count="42.8">42,8</span> (valor final no HTML como
     fallback; ponto decimal no atributo; site.js formata em pt-BR).
   - Foco em fundo escuro: sobrescreva outline-color para #fff na sua seção.
   ========================================================================== */

/* ——— reset moderno ——— */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* ——— ESCALA FLUIDA (padrão do Anderson, 27/07) ———
     A raiz cresce com a tela: 16px até 1280 (nada muda em laptop/celular),
     18px em 1920, 20px em 2560+. Como spacing, tipografia e container são
     em rem, a página inteira cresce na MESMA proporção — tela grande vê um
     site maior, não um site esticado com linha quilométrica.
     `1rem` aqui resolve contra o padrão do navegador (16px), então o zoom e
     a preferência de fonte do usuário continuam valendo. */
  font-size: clamp(1.0625rem, 0.8125rem + 0.3125vw, 1.3125rem);
  /* o viewport NÃO rola: a rolagem inteira vive no body. É o padrão à prova
     do elástico lateral do macOS — Safari ignora overscroll-behavior no root
     scroller, então a saída é não existir root scroller. O clip anterior não
     segurou no trackpad do Anderson (27/07). */
  height: 100%;
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  html, body { scroll-behavior: smooth; }
}

body {
  /* o body é o scroller real: vertical livre, eixo x inexistente */
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  font-family: var(--font-brand);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: var(--gray-900);
  background: var(--enviquo-paper);
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg { display: block; max-width: 100%; }

img { height: auto; }

input,
button,
textarea,
select { font: inherit; color: inherit; }

p,
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul[class],
ol[class] { list-style: none; padding: 0; }

a { color: inherit; }

a,
button,
summary,
input,
label { touch-action: manipulation; }

button,
summary { -webkit-tap-highlight-color: transparent; }

summary { cursor: pointer; }

::selection { background: var(--enviquo-ink); color: var(--enviquo-paper); }

/* ——— foco visível (anel Signal sobre claro; seções escuras trocam p/ #fff) ——— */
:focus-visible {
  outline: 2px solid var(--enviquo-signal);
  outline-offset: 2px;
}

/* ——— âncoras não somem sob a nav sticky ——— */
:target,
[id] { scroll-margin-top: 90px; }

/* ——— tipografia ——— */
h1, h2, h3, h4 {
  font-family: var(--font-brand);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* h1 é display: tracking -4% (brief §2 apple-design; manual permite -3% a -4%) */
h1 { font-size: clamp(2.25rem, 1.5rem + 3.75vw, 4rem); line-height: 1.08; letter-spacing: -0.04em; }
h2 { font-size: clamp(1.75rem, 1.3rem + 2.25vw, 2.75rem); line-height: 1.12; }
h3 { font-size: clamp(1.375rem, 1.15rem + 1.1vw, 1.75rem); line-height: 1.2; }
h4 { font-size: 1.125rem; line-height: 1.3; }

h5, h6 { font-weight: 600; letter-spacing: -0.01em; }

p { max-width: 74ch; } /* lei do manual: corpo nunca passa de 74ch */

strong { font-weight: 600; }

/* rótulo técnico: Geist Mono, caixa alta, tracking largo */
.eyebrow-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--gray-600);
}

/* números que contam sobem em coluna estável */
[data-count] { font-variant-numeric: tabular-nums; }

/* ——— layout ——— */
.container {
  /* fluido de verdade: ocupa 94vw (margem de ~3% de cada lado) e só para de
     crescer em 108rem — que também escala com a raiz (1944px em 1920,
     2160px em 2560). Antes era min(1200px, 92vw): em 1920 desperdiçava 37,5%
     da tela em margem, em 2560 mais de 53%. */
  width: min(94vw, 108rem);
  margin-inline: auto;
}

.section { padding-block: var(--space-section); }

/* escala de espaçamento 4/8 (use nas seções; nada de valores mágicos) */
:root {
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-24: 6rem;    /* 96 */
}

/* ——— skip link ——— */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  transform: translateY(-160%);
  padding: 0.75rem 1.25rem;
  background: var(--enviquo-ink);
  color: var(--enviquo-paper);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 12px 0;
  transition: transform 150ms ease;
}

.skip-link:focus { transform: none; }

/* ——— botões ——— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.6875rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 100ms ease-out,
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

.btn:active { transform: scale(0.97); }

.btn:focus-visible {
  outline: 2px solid var(--enviquo-signal);
  outline-offset: 2px;
}

.btn svg { flex: none; }

/* ação principal: o ÚNICO vermelho do viewport */
.btn-signal {
  background: var(--enviquo-signal);
  color: var(--enviquo-paper);
}

.btn-signal:hover { background: var(--signal-600); }

/* botão escuro (nav, apoios) */
.btn-ink {
  background: var(--enviquo-ink);
  color: var(--enviquo-paper);
}

.btn-ink:hover { background: var(--gray-700); }

/* fantasma para fundo escuro */
.btn-ghost-light {
  background: transparent;
  color: var(--enviquo-paper);
  border-color: rgba(255, 255, 255, 0.44);
}

.btn-ghost-light:hover {
  border-color: var(--enviquo-paper);
  background: rgba(255, 255, 255, 0.08);
}

/* botões que vivem em fundo escuro: anel de foco branco */
.btn-signal:focus-visible,
.btn-ghost-light:focus-visible { outline-color: var(--enviquo-paper); }

/* ——— chip (etiqueta flutuante dos composites) ——— */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: var(--enviquo-paper);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--gray-900);
  white-space: nowrap;
}

.chip svg { flex: none; }

/* ——— cards ——— */
.card {
  background: var(--enviquo-paper);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

/* chanfro 60°: o "corte do o", canto superior direito, UM por card destaque.
   clip-path corta o box-shadow externo; por isso o card chanfrado abre mão da
   sombra própria. Se a peça pedir sombra, embrulhe num wrapper .chanfro-sombra
   (drop-shadow segue o recorte; filter fica no wrapper, não no card). */
.card-chanfro {
  --chanfro-x: 26px; /* avanço horizontal; queda vertical = x · tan(60°) */
  clip-path: polygon(
    0 0,
    calc(100% - var(--chanfro-x)) 0,
    100% calc(var(--chanfro-x) * 1.732),
    100% 100%,
    0 100%
  );
  box-shadow: none;
}

.chanfro-sombra {
  filter:
    drop-shadow(0 1px 2px rgba(10, 10, 10, 0.05))
    drop-shadow(0 8px 24px rgba(10, 10, 10, 0.07));
}

/* ——— círculo numerado das seções (molde SendPulse) ——— */
.num-circulo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 56px;
  block-size: 56px;
  border: 2px solid var(--gray-900);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--gray-900);
}

/* ——— cabeça de seção: círculo + H2 central + sub ——— */
.sec-head {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  max-width: 54rem;
  margin-inline: auto;
  text-align: center;
}

.sec-head .sec-sub {
  font-size: 1.125rem;
  color: var(--gray-600);
  max-width: 44rem;
  margin-inline: auto;
}

/* ——— FAQ: animação estrutural do accordion (aparência é da seção) ———
   O estado colapsado 0fr existe SÓ sob html.js: sem JS ninguém adiciona
   .is-open, e um 0fr incondicional deixaria o corpo invisível mesmo com o
   <details> aberto. Sem JS o toggle nativo mostra e esconde. */
html.js .faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms var(--ease-out-expo);
}

/* filho direto = invólucro de clip; padding vertical aqui quebra o colapso */
html.js .faq-body > * {
  min-height: 0;
  overflow: hidden;
  padding-block: 0;
}

html.js details.is-open .faq-body { grid-template-rows: 1fr; }

/* ——— reveal (.rv) — entra com translateY + fade; stagger via --rv-delay ———
   O estado escondido só existe com JS ativo (html.js), então sem JS nada some. */
html.js .rv {
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  transition:
    opacity 950ms var(--ease-out-expo),
    transform 850ms var(--ease-out-expo);
  transition-delay: var(--rv-delay, 0ms);
}

html.js .rv-in {
  opacity: 1;
  transform: none;
}

/* ——— movimento reduzido: sem deslocamento, só fade curto ——— */
@media (prefers-reduced-motion: reduce) {
  html.js .rv {
    transform: none;
    transition: opacity 180ms ease;
    transition-delay: 0ms;
  }

  .btn,
  .skip-link { transition: none; }

  .btn:active { transform: none; }

  html.js .faq-body { transition: none; }

  /* sob movimento reduzido o site.js NÃO intercepta o clique: o toggle
     nativo do <details> manda, então [open] precisa expandir o grid */
  html.js details[open] .faq-body { grid-template-rows: 1fr; }
}

/* ——— destaque de título (pedido do Anderson, 27/07): palavra-chave do funil
   e ponto final em Signal, ecoando a pontuação do slogan (os pontos são
   degraus). Sobre fundo CLARO usa o vermelho de texto do manual (#E62208,
   4,57:1 — norma de interface); .hl-vivo é a variante para fundo ESCURO
   (Signal puro #FF2A0D, 5,27:1 sobre Ink). Uso comedido: 1 destaque por
   título, só nos títulos-chave — se tudo grita, nada é sinal. ——— */
.hl { color: var(--signal-600); }
.hl-vivo { color: var(--enviquo-signal); }