/* ============================================================
   TK7 Engenharia e Piso — Design System
   Origem: logotipo oficial (asset PNG) + kit Elementor do site atual
   Direção aprovada: GRAFITE dominante + LARANJA CIRÚRGICO
   ------------------------------------------------------------
   Regra de ouro: o laranja é assinatura, não preenchimento.
   Só aparece em CTA, eyebrow, número de destaque e filete.
   Tudo o mais resolve na escala de grafite.
   ============================================================ */

:root {
  /* ---------- MARCA (rastreável ao asset) -------------------- */
  /* #FAA327 — laranja-âmbar amostrado do logotipo (14.032 px, tom
     dominante do símbolo). O kit Elementor do site declara #F58634;
     adotamos o valor do ASSET, para a UI casar com o logotipo. */
  --brand-amber:  #FAA327;
  /* #232165 — navy amostrado do wordmark "TK7 ENGENHARIA".
     O kit Elementor declara #201F67 (2 pontos de diferença). */
  --brand-navy:   #232165;
  /* #665A69 — cinza-violáceo do telhado/detalhe do símbolo.
     Usado apenas como semente da escala de grafite (undertone). */
  --brand-slate:  #665A69;

  /* ---------- ESCALA GRAFITE (concreto, undertone frio) ------
     Semente: neutro puxado ao azul-violáceo da marca, para o cinza
     não ler como "cinza de template". É o cinza de concreto curado. */
  --graphite-950: #0E1013; /* footer, dobras mais profundas */
  --graphite-900: #14171B; /* seções escuras alternadas */
  --graphite-850: #1A1D21; /* FUNDO BASE do site */
  --graphite-800: #22262B; /* cards sobre escuro */
  --graphite-700: #2C3137; /* hover de card, superfície elevada */
  --graphite-600: #3A4047; /* bordas fortes sobre escuro */
  --graphite-500: #4E555E; /* divisórias */
  --graphite-400: #6B737D; /* ícones secundários */
  --graphite-300: #8A9099; /* texto secundário sobre escuro */
  --graphite-200: #B4B9C0; /* texto terciário sobre escuro */
  --graphite-100: #D8DBDF; /* linhas sobre claro */

  /* ---------- CLAROS ---------------------------------------- */
  --white:    #FFFFFF;
  --off-white:#F7F8F9; /* cor de texto sobre escuro */
  --paper:    #F4F5F6; /* seções claras alternadas */
  --paper-2:  #E6E8EA; /* bordas em seção clara */

  /* ---------- LARANJA: estados e variantes ------------------
     --accent      : âmbar do logo. Fundo de botão, filete, número.
     --accent-deep : versão escurecida para TEXTO/ÍCONE sobre claro.
                     O âmbar puro sobre branco dá 1.9:1 e falha em
                     qualquer critério — nunca usar #FAA327 como
                     cor de texto sobre fundo claro. */
  --accent:       var(--brand-amber);
  --accent-deep:  #9C5809; /* 5.0:1 sobre papel · 5.5:1 sobre branco */
  --accent-hover: #E89320;
  --accent-press: #CE8115;
  --accent-dim:   rgba(250, 163, 39, .16); /* halo, filete fraco */
  --accent-line:  rgba(250, 163, 39, .38);
  /* o acento COMO TINTA — troca sozinho no contexto claro.
     Use em texto, ícone e filete; use --accent em preenchimento. */
  --accent-text:  var(--accent);

  /* ---------- PAPÉIS SEMÂNTICOS ---------------------------- */
  --bg:             var(--graphite-850);
  --bg-alt:         var(--graphite-900);
  --bg-deep:        var(--graphite-950);
  --bg-light:       var(--paper);
  --surface:        var(--graphite-800);
  --surface-raised: var(--graphite-700);

  --text:           var(--off-white);
  /* Escada de 3 tons, TODOS acima de 4.5:1 sobre --surface (#22262B),
     que é o fundo mais claro em que texto pequeno aparece.
     graphite-400 (#6B737D) NÃO passa (3.2:1) — é cor de ícone e de
     borda, nunca de texto. */
  --text-muted:     var(--graphite-200); /* #B4B9C0 · 8.4:1 sobre bg */
  --text-dim:       var(--graphite-300); /* #8A9099 · 4.7:1 sobre surface */
  --text-on-light:  var(--graphite-900);
  --muted-on-light: #5A6169;

  --line:           rgba(247, 248, 249, .10);
  --line-strong:    rgba(247, 248, 249, .20);
  --line-light:     var(--paper-2);

  /* estados */
  --focus:   var(--accent);
  --success: #2E8B57;
  --danger:  #C0483C;
  --warning: #C98A16;

  /* ---------- TIPOGRAFIA -----------------------------------
     Display: Archivo 700/800, CAIXA ALTA, tracking negativo.
       Grotesca larga e pesada, do mesmo território geométrico do
       wordmark "TK7 ENGENHARIA" — registro de sinalização
       industrial, sem o ar templatizado de Montserrat/Poppins.
     Texto: Inter 400/500/600 — máxima legibilidade em corpo longo
       e em tabela técnica, neutra o suficiente para não competir
       com a display.
     Mono: IBM Plex Mono 500 — eyebrow, índice de etapa (01/05),
       especificação (fck, mm, m²). É o que dá cara de engenharia. */
  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-text:    'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* escala fluida — display em CAIXA ALTA pede corpo menor
     que caixa mista: a mesma frase ocupa ~15% mais largura */
  --fs-display: clamp(2rem, 4.4vw, 3.5rem);   /* H1 do hero */
  --fs-h2:      clamp(1.45rem, 2.6vw, 2.1rem);
  --fs-h3:      clamp(1.1rem, 1.6vw, 1.35rem);
  --fs-h4:      clamp(1rem, 1.4vw, 1.15rem);
  --fs-lead:    clamp(1.03rem, 1.35vw, 1.2rem);
  --fs-body:    1rem;
  --fs-sm:      .9375rem;
  --fs-xs:      .8125rem;
  --fs-eyebrow: .75rem;
  --fs-metric:  clamp(2.2rem, 5vw, 3.4rem); /* número de destaque */

  --lh-display: 1.04;
  --lh-head:    1.2;
  --lh-body:    1.65;
  --lh-tight:   1.35;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* tracking — caixa alta pesada precisa de tracking NEGATIVO
     no display e POSITIVO no eyebrow/mono */
  --ls-display: -.02em;
  --ls-head:    -.01em;
  --ls-eyebrow: .16em;
  --ls-mono:    .06em;

  /* ---------- ESPAÇAMENTO (escala de 4) -------------------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  --section-y:  clamp(72px, 9vw, 128px);
  --container:  1200px;
  --gutter:     24px;

  /* ---------- FORMA ---------------------------------------
     Piso industrial é geometria reta: placa, junta, malha.
     Raio pequeno e consistente. PROIBIDO pill/999px em botão. */
  --r-xs: 2px;
  --r-sm: 4px;   /* botão, input, tag */
  --r-md: 8px;   /* card, imagem */
  --r-lg: 12px;  /* bloco grande, painel */

  /* ---------- ELEVAÇÃO ------------------------------------
     Sombra é discreta; a hierarquia vem de borda e valor de fundo,
     não de drop-shadow difuso (que envelhece o layout). */
  --sh-sm: 0 1px 2px rgba(0,0,0,.28);
  --sh-md: 0 4px 16px rgba(0,0,0,.30);
  --sh-lg: 0 12px 40px rgba(0,0,0,.38);
  --sh-accent: 0 6px 22px rgba(250,163,39,.22);

  /* ---------- MOVIMENTO ----------------------------------
     Sem inércia, sem smooth-scroll com momentum. Só transição
     curta de estado. Scroll é nativo. */
  --dur-fast: 140ms;
  --dur:      220ms;
  --dur-slow: 380ms;
  --ease:     cubic-bezier(.2, .6, .3, 1);

  /* ---------- TEXTURA ------------------------------------
     Grão fino global, na intensidade em que se percebe mas não
     se enxerga. Amarra a UI ao produto: concreto tem grão. */
  --grain-opacity: .04;

  /* ---------- LAYERS ------------------------------------- */
  --z-base: 1; --z-sticky: 50; --z-header: 100; --z-overlay: 200;
}

/* ============================================================
   BASE
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth; /* nativo do CSS — sem lib de momentum */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* grão de concreto — overlay global, não intercepta clique */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-overlay);
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-head);
  line-height: var(--lh-head);
  text-wrap: balance; /* anti palavra órfã */
  margin: 0 0 var(--sp-4);
}

h1 {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-black);
}
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semi); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================
   LAYOUT
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--alt   { background: var(--bg-alt); }
.section--deep  { background: var(--bg-deep); }

/* ============================================================
   CONTEXTO CLARO
   ------------------------------------------------------------
   Em vez de sobrescrever componente por componente (foi essa a
   falha da primeira versão: qualquer container claro que não fosse
   .section--light voltava a usar tinta de modo escuro), o contexto
   claro REMAPEIA os tokens semânticos. Todo componente descendente
   passa a ler o valor certo sem precisar de regra própria.
   Aplique .section--light numa <section> ou .on-light em qualquer
   outro container claro.
   ============================================================ */

.section--light,
.on-light {
  --text:        var(--graphite-900);
  --text-muted:  var(--muted-on-light);
  --text-dim:    #646B73;          /* 4.9:1 sobre papel */
  --accent-text: var(--accent-deep); /* 5.0:1 sobre papel */
  --line:        var(--line-light);
  --line-strong: var(--graphite-100);
  --surface:     var(--white);
  --surface-raised: var(--white);

  background: var(--bg-light);
  color: var(--text);
}

.section--light h1, .on-light h1,
.section--light h2, .on-light h2,
.section--light h3, .on-light h3,
.section--light h4, .on-light h4 { color: var(--graphite-900); }

/* a métrica no claro é grafite, não laranja: número grande em cor
   de acento sobre fundo claro vira mancha e perde a autoridade */
.section--light .metric__value,
.on-light .metric__value { color: var(--graphite-900); }

/* input no claro é branco com borda clara */
.section--light .field input, .on-light .field input,
.section--light .field select, .on-light .field select,
.section--light .field textarea, .on-light .field textarea {
  background: var(--white);
  color: var(--graphite-900);
  border-color: var(--line-light);
}
.section--light .field input:focus, .on-light .field input:focus,
.section--light .field select:focus, .on-light .field select:focus,
.section--light .field textarea:focus, .on-light .field textarea:focus {
  background: var(--white);
  border-color: var(--accent-deep);
}

.section--light .btn--outline,
.on-light .btn--outline { color: var(--graphite-900); border-color: var(--graphite-100); }
.section--light .btn--outline:hover,
.on-light .btn--outline:hover { color: var(--accent-deep); border-color: var(--accent-deep); background: var(--accent-dim); }

.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* ============================================================
   TIPOGRAFIA APLICADA
   ============================================================ */

/* EYEBROW — mono, tracking largo, com filete laranja de 28px.
   É um dos quatro lugares onde o laranja pode aparecer. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--sp-4);
}
.eyebrow::before {
  content: '';
  width: 28px; height: 2px;
  background: var(--accent-text);
  flex: none;
}

/* destaque de uma expressão no H1 — no máximo UM por título */
.hl { color: var(--accent-text); }

.lead {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  max-width: 62ch;
}
.text-muted { color: var(--text-muted); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-dim);
}

.rule {
  height: 1px; border: 0;
  background: var(--line);
  margin-block: var(--sp-10);
}
.rule-accent {
  height: 2px; width: 48px; border: 0;
  background: var(--accent);
  margin: 0 0 var(--sp-6);
}

/* ============================================================
   BOTÕES
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 52px;
  padding: 0 var(--sp-8);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: .01em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

/* PRIMÁRIA — o único bloco de laranja permitido na dobra.
   Texto grafite escuro sobre âmbar: 9,4:1. */
.btn--primary {
  background: var(--accent);
  color: var(--graphite-950);
}
.btn--primary:hover { background: var(--accent-hover); color: var(--graphite-950); }
.btn--primary:active { background: var(--accent-press); }

/* SECUNDÁRIA — contorno. Sobre escuro. */
.btn--outline {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn--outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

/* GHOST — link com afordância de botão, para ação terciária */
.btn--ghost {
  background: transparent;
  color: var(--text-muted);
  padding-inline: var(--sp-3);
  min-height: 44px; /* alvo de toque mínimo */
}
.btn--ghost:hover { color: var(--accent); }

.btn--lg { min-height: 58px; padding-inline: var(--sp-10); font-size: var(--fs-body); }
.btn--block { width: 100%; }

/* ============================================================
   CARDS
   ============================================================ */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-8);
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.card:hover { border-color: var(--line-strong); background: var(--surface-raised); }
.card h3 { margin-bottom: var(--sp-3); }
.card p { color: var(--text-muted); font-size: var(--fs-sm); }

/* card com filete laranja no topo — reservado ao card da TK7 na
   comparativa e ao card em destaque. Nunca em toda a grade. */
.card--accent { position: relative; overflow: hidden; }
.card--accent::before {
  content: '';
  position: absolute; inset: 0 0 auto 0;
  height: 4px;
  background: var(--accent);
}

/* card de etapa — o índice mono é o elemento gráfico */
.card--step { display: flex; gap: var(--sp-5); align-items: flex-start; }
.card--step .step-idx {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-mono);
  color: var(--accent-text);
  padding-top: 2px;
  flex: none;
}

/* card de especificação técnica — chave/valor em mono */
.spec {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
}
.spec:last-child { border-bottom: 0; }
.spec dt { color: var(--text-muted); font-size: var(--fs-sm); }
.spec dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text);
  text-align: right;
}

/* ============================================================
   MÉTRICA / NÚMERO DE DESTAQUE
   ------------------------------------------------------------
   REGRA DE USO: tratamento de métrica só para número que
   impressiona sozinho (m² executados, obras entregues, anos).
   NUNCA para "3 dias úteis", "40 km", "5 etapas" — esses são
   frase com check, não métrica.
   ============================================================ */

.metric { display: flex; flex-direction: column; gap: var(--sp-1); }
.metric__value {
  font-family: var(--font-display);
  font-size: var(--fs-metric);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--accent-text);
}
.metric__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ============================================================
   TAG / SELO
   PROIBIDO: nuvem de pills como seção de sub-segmentos.
   Tag serve para rótulo pontual (categoria de obra na galeria).
   ============================================================ */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-muted);
}
.tag--accent {
  border-color: var(--accent-line);
  color: var(--accent);
  background: var(--accent-dim);
}

/* lista com check — substitui métrica para dado que não impressiona */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.checklist li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.checklist li::before {
  content: '';
  width: 16px; height: 16px;
  margin-top: 5px;
  background: var(--accent-text);
  clip-path: polygon(14% 46%, 0 60%, 40% 100%, 100% 22%, 86% 8%, 39% 72%);
}

/* ============================================================
   TABELA COMPARATIVA
   A coluna da TK7 é a única com fundo e filete. A do "mercado"
   fica neutra — o contraste faz o argumento sozinho.
   ============================================================ */

.compare { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.compare th, .compare td {
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.compare thead th {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom-color: var(--line-strong);
}
.compare tbody th {
  font-family: var(--font-text);
  font-weight: var(--fw-medium);
  color: var(--text);
  width: 26%;
}
.compare td { color: var(--text-muted); }
.compare .col-own {
  background: var(--surface);
  color: var(--text);
  border-left: 2px solid var(--accent);
  border-right: 1px solid var(--line);
}
.compare thead .col-own { color: var(--accent); }
.compare__wrap { overflow-x: auto; }

/* ============================================================
   FAQ / ACORDEÃO
   ============================================================ */

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-6) 0;
  background: none;
  border: 0;
  color: inherit;
  font-family: var(--font-text);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  text-align: left;
  cursor: pointer;
}
.faq__q::after {
  content: '';
  flex: none;
  width: 12px; height: 12px;
  border-right: 2px solid var(--accent-text);
  border-bottom: 2px solid var(--accent-text);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); }
.faq__a { padding-bottom: var(--sp-6); color: var(--text-muted); max-width: 72ch; }

/* ============================================================
   FORMULÁRIO
   ============================================================ */

.field { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.field label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-muted);
}
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--graphite-900);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field textarea { min-height: 104px; padding-top: var(--sp-3); resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-dim); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  background: var(--graphite-950);
  outline: none;
}
.field--error input { border-color: var(--danger); }
.field__hint { font-size: var(--fs-xs); color: var(--text-dim); }
.field__error { font-size: var(--fs-xs); color: var(--danger); }

/* ============================================================
   HERO — full-bleed, fullscreen, foto de obra atrás do texto
   Não usar painel lateral com foto recortada.
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: var(--sp-24) var(--sp-16);
  overflow: hidden;
  background: var(--graphite-950);
}
.hero__media {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* véu duplo: escurece o rodapé para o texto e mantém a foto legível */
.hero__media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(14,16,19,.94) 0%, rgba(14,16,19,.72) 42%, rgba(14,16,19,.34) 100%),
    linear-gradient(to right, rgba(14,16,19,.55) 0%, rgba(14,16,19,0) 65%);
}
.hero__inner { position: relative; z-index: 1; width: 100%; }
.hero h1 { max-width: 20ch; }
.hero .lead { max-width: 56ch; margin-top: var(--sp-5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-8); }

/* barra de credibilidade abaixo do hero */
.credbar {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}
.credbar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.credbar__item {
  padding: var(--sp-6) var(--sp-5);
  border-left: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.credbar__item:first-child { border-left: 0; }
@media (max-width: 900px) {
  .credbar__grid { grid-template-columns: repeat(2, 1fr); }
  .credbar__item:nth-child(3) { border-left: 0; }
  .credbar__item:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ============================================================
   GALERIA / ANTES-DEPOIS
   ============================================================ */

.shot { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.shot img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.shot__cap {
  position: absolute; inset: auto 0 0 0;
  padding: var(--sp-8) var(--sp-5) var(--sp-4);
  background: linear-gradient(to top, rgba(14,16,19,.92), rgba(14,16,19,0));
  font-size: var(--fs-sm);
  color: var(--off-white);
}
.shot__cap .mono { display: block; color: var(--graphite-200); margin-bottom: 2px; }

.ba { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1); border-radius: var(--r-md); overflow: hidden; }
.ba figure { margin: 0; position: relative; }
.ba img { aspect-ratio: 1 / 1; object-fit: cover; }
.ba figcaption {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  background: rgba(14,16,19,.82);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--off-white);
}

/* ============================================================
   HEADER
   ============================================================ */

.header {
  position: sticky; top: 0;
  z-index: var(--z-header);
  background: rgba(20, 23, 27, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6);
  min-height: 76px;
}
.header__logo img { height: 44px; width: auto; }
.header__nav { display: flex; align-items: center; gap: var(--sp-6); }
.header__nav a {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}
.header__nav a:hover, .header__nav a[aria-current='page'] { color: var(--text); }
@media (max-width: 900px) { .header__nav { display: none; } }

/* CTA fixa no mobile — WhatsApp sempre alcançável */
.stickybar {
  position: fixed; inset: auto 0 0 0;
  z-index: var(--z-sticky);
  display: none;
  padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: rgba(14,16,19,.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
@media (max-width: 900px) { .stickybar { display: block; } }

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  background: var(--bg-deep);
  border-top: 3px solid var(--accent); /* único filete laranja do rodapé */
  padding-block: var(--sp-16) var(--sp-8);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.footer h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--sp-4);
}
.footer a { color: var(--text-muted); }
.footer a:hover { color: var(--accent); }
.footer__bottom {
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

/* ============================================================
   UTILITÁRIOS
   ============================================================ */

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-8); }
.max-60 { max-width: 60ch; }
.center { text-align: center; margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}