/*
Theme Name: Brindara Mochilas B2B
Theme URI: https://brindarabrindes.com.br/
Author: Brindara Brindes
Description: Landing page B2B de mochilas, malas e bolsas corporativas da Brindara Brindes. Tema de pagina unica, sem dependencia de build, framework ou plugin. Convertido do index.html estatico — mesmo CSS e mesmo JS, byte a byte.
Version: 1.0.4
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: Proprietario
Text Domain: brindara-mochilas
Tags: landing-page, one-page, business
*/

/* =====================================================================
   ATENCAO: daqui para baixo, ate o bloco "INTEGRACAO WORDPRESS" no fim
   do arquivo, o CSS e COPIA EXATA do <style> do index.html.
   Nao edite aqui: edite o index.html e rode o build de novo, senao as
   duas versoes divergem. Ver 82-tema-wordpress.md.
   ===================================================================== */
/* =====================================================================
   BRINDARA BRINDES — Design System
   Brindes corporativos premium (B2B) · "Sua marca, sempre presente."
   Direcao: navy DOMINANTE, dourado como acento pontual (filetes/hovers),
   creme como respiro. Editorial premium, tema unico claro por escolha.
   Fontes carregadas via <link> Google Fonts: Cormorant Garamond, Manrope.
   ===================================================================== */

/* ---------- 1. TOKENS ------------------------------------------------ */
:root {
  /* Paleta institucional */
  --navy:          #12233F;
  --navy-900:      #0E1B31;   /* navy mais fundo, para gradientes/rodape */
  --navy-800:      #14284A;
  --navy-700:      #1B3358;   /* linhas sobre navy, superficies elevadas */
  --gold:          #C6A15B;
  --gold-300:      #D9BC77;   /* dourado claro para hover/realce sobre navy */
  --gold-600:      #A9853F;   /* dourado profundo p/ texto sobre creme (AA) */
  --cream:         #F5EFE3;
  --cream-50:      #FBF7EF;
  --charcoal:      #2B2E36;
  --stone:         #8A8172;   /* neutro quente — labels/legendas */
  --stone-200:     #E4DDCE;   /* neutro quente clarinho — bordas sobre creme */
  --white:         #FFFFFF;

  /* Papeis semanticos (tema claro global) — sao reescritos por secao */
  --bg:            var(--cream-50);
  --surface:       var(--white);
  --fg:            var(--charcoal);
  --muted:         var(--stone);
  --accent:        var(--gold-600);   /* dourado legivel sobre fundos claros */
  --accent-ink:    var(--navy);       /* cor de acao dominante */
  --hairline:      var(--stone-200);
  --hairline-gold: color-mix(in srgb, var(--gold) 55%, transparent);

  /* Tipografia */
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-body:    "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala de tipo (fluida, mobile-first) */
  --fs-eyebrow: 0.78rem;
  --fs-body:    1.0625rem;                              /* 17px */
  --fs-lead:    clamp(1.05rem, 0.98rem + 0.4vw, 1.2rem);
  --fs-h3:      clamp(1.4rem,  1.15rem + 1vw,  1.9rem);
  --fs-h2:      clamp(2rem,    1.4rem + 2.6vw, 3rem);
  --fs-h1:      clamp(2.6rem,  1.7rem + 4.2vw, 4.6rem);
  --fs-display: clamp(3.1rem,  1.9rem + 5.6vw, 6rem);

  /* Ritmo & forma */
  --measure: 65ch;
  --container: 1200px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  /* PADRONIZADO em 03/08/2026 (doc 59). Era clamp(4rem, 3rem + 6vw, 8rem).
     Como o valor e padding-block (topo E base), o vao ENTRE duas secoes e o
     dobro: chegava a 16rem, 256px de nada em 1440px. Agora fecha em 8rem
     (128px), que continua generoso para pagina editorial e para de partir a
     leitura ao meio.
     ATENCAO: este token e a UNICA fonte do respiro entre secoes. Ate hoje ele
     convivia com tres overrides por secao (#clientes, section.mpi e o par
     #clientes/#orcamento) — por isso a pagina nunca teve espacamento uniforme.
     Dois deles foram removidos no doc 59; o do par creme/creme continua, por
     decisao do dono, e e a unica excecao. */
  --section-y: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  --radius: 4px;         /* cantos discretos, quase editorial */
  --radius-lg: 8px;

  /* Sombra (quente, baixa — nunca "flutuante demais") */
  --shadow-sm: 0 1px 2px rgba(18, 35, 63, 0.06);
  --shadow-md: 0 18px 40px -24px rgba(18, 35, 63, 0.35);
  --shadow-lg: 0 34px 70px -30px rgba(14, 27, 49, 0.45);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 480ms;
}

/* ---------- 2. RESET LEVE ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:target { scroll-margin-top: 6rem; }

/* ---------- 3. FOCO VISIVEL ----------------------------------------- */
:where(a, button, summary, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
@media (prefers-color-scheme: dark) { /* placeholder — tema unico por escolha de marca */ }

/* ---------- 4. LAYOUT ----------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 820px; }

/* A .section so gerencia RITMO (padding vertical) e cor de fundo/texto.
   Componentes internos leem os papeis (--fg, --accent, ...) — nunca
   competem com .section por espacamento. */
.section {
  padding-block: var(--section-y);
  background: var(--bg);
  color: var(--fg);
  position: relative;
}
.section--tight { padding-block: clamp(2.5rem, 2rem + 3vw, 4rem); }

/* Variante CREME (respiro) */
.section--cream {
  --bg: var(--cream);
  --surface: var(--white);
  --fg: var(--charcoal);
  --muted: var(--stone);
  --accent: var(--gold-600);
  --hairline: var(--stone-200);
}

/* Variante NAVY (dominante) — inverte papeis, dourado brilha aqui */
.section--navy {
  --bg: var(--navy);
  --surface: var(--navy-800);
  --fg: #EDE7DA;
  --muted: color-mix(in srgb, #EDE7DA 62%, var(--navy));
  --accent: var(--gold-300);
  --accent-ink: var(--gold);
  --hairline: var(--navy-700);
  --hairline-gold: color-mix(in srgb, var(--gold) 60%, transparent);
  background:
    radial-gradient(120% 80% at 85% -10%, rgba(198,161,91,0.10), transparent 55%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-900) 100%);
}

/* ---------- 5. TIPOGRAFIA ------------------------------------------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  margin: 0;
}
/* filete curto que antecede a eyebrow */
.eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.85;
}
.eyebrow--plain::before { display: none; }

.display, .h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-wrap: balance;
  color: var(--fg);
}
.display { font-size: var(--fs-display); line-height: 0.98; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); line-height: 1.04; }
.h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.12; letter-spacing: -0.006em; }

/* palavra em enfase dourada dentro de um titulo */
.display em, .h1 em, .h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--muted);
  max-width: 54ch;
  text-wrap: pretty;
}
.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.1em; }
.measure { max-width: var(--measure); }
.muted { color: var(--muted); }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.center .lead { margin-inline: auto; }

/* ---------- 6. FILETES / HAIRLINES ---------------------------------- */
.hairline {
  border: 0;
  height: 1px;
  background: var(--hairline);
  margin: 0;
}
.rule-gold {
  border: 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg,
      var(--gold) 0%, var(--hairline-gold) 42%, transparent 100%);
}
.rule-gold--center {
  width: 4.5rem; height: 2px; margin-inline: auto;
  background: var(--gold);
  border-radius: 2px;
}

/* ---------- 7. BOTOES ----------------------------------------------- */
.btn {
  --_bg: var(--navy);
  --_fg: var(--cream-50);
  --_bd: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.95em 1.7em;
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--_fg);
  background: var(--_bg);
  border: 1px solid var(--_bd);
  border-radius: var(--radius);
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform 220ms var(--ease),
              box-shadow 220ms var(--ease);
}
.btn:hover  { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
/* CORRIGIDO 31/07/2026 — BUG REAL, nao cosmetico. O `display:inline-flex` acima
   e regra de AUTOR e vence o `[hidden]{display:none}` do user-agent. Resultado:
   o JS do formulario fazia a coisa certa (sendBtn.hidden = true) e o CSS
   mostrava o botao assim mesmo — "Enviar no WhatsApp" continuava em tela ao
   lado de "Abrindo o WhatsApp...".
   REGRA DA CASA, aprendida aqui: toda vez que uma classe ganhar `display` de
   autor E for alternada por `hidden` no JS, escreva o par `[hidden]` junto.
   Hoje isso vale tambem para `.qz__body[hidden]` e `.qz__hint--group[hidden]`. */
.btn[hidden] { display: none; }
.btn__arrow { transition: transform 260ms var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Primario: navy solido -> dourado no hover, texto navy */
.btn--primary { --_bg: var(--navy); --_fg: var(--cream-50); --_bd: var(--navy); }
.btn--primary:hover { --_bg: var(--gold); --_fg: var(--navy); --_bd: var(--gold); }

/* Secundario: contorno */
.btn--secondary {
  --_bg: transparent;
  --_fg: var(--navy);
  --_bd: color-mix(in srgb, var(--navy) 32%, transparent);
}
.btn--secondary:hover { --_bg: transparent; --_fg: var(--gold-600); --_bd: var(--gold); }

/* Sobre navy, inverte o contorno para claro/dourado */
.section--navy .btn--primary { --_bg: var(--gold); --_fg: var(--navy); --_bd: var(--gold); }
.section--navy .btn--primary:hover { --_bg: var(--gold-300); --_fg: var(--navy); --_bd: var(--gold-300); }
.section--navy .btn--secondary {
  --_fg: #EDE7DA;
  --_bd: color-mix(in srgb, var(--gold) 55%, transparent);
}
.section--navy .btn--secondary:hover { --_fg: var(--gold-300); --_bd: var(--gold-300); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

/* link textual com seta */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--accent-ink);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--hairline-gold);
  transition: gap 240ms var(--ease), border-color 240ms var(--ease), color 240ms var(--ease);
}
.link-arrow:hover { gap: 0.85em; color: var(--accent); border-color: var(--gold); }

/* ---------- 8. GRIDS ------------------------------------------------ */
.grid { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--stack-gap, 1.5rem); }
.stack--sm { --stack-gap: 0.9rem; }
.stack--lg { --stack-gap: 2.25rem; }

/* ---------- 9. CARDS (beneficios) ----------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  position: relative;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
/* filete dourado no topo, revelado no hover */
.card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 2px;
  background: var(--gold);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--hairline-gold);
}
.card:hover::before { transform: scaleX(1); }
.section--navy .card { background: var(--surface); border-color: var(--navy-700); }

.card__icon {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  color: var(--accent);
  border: 1px solid var(--hairline-gold);
  border-radius: 50%;
  margin-bottom: 1.15rem;
}
.card__icon svg { width: 1.35rem; height: 1.35rem; }
.card__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 0.5rem;
  color: var(--fg);
}
.card__text { color: var(--muted); font-size: 0.98rem; line-height: 1.6; }

/* ---------- 9-bis. CARD DE ACAO (fecha a grade de 5 aplicacoes) -------
   O <li> e o item do grid; este <a> precisa de height:100% para esticar
   junto com os cards irmaos da mesma linha. Paleta so com tokens: fundo
   dourado translucido igual ao da .urgency-note, borda em --hairline-gold. */
.card--cta {
  display: flex; flex-direction: column; height: 100%;
  text-decoration: none;
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  border-color: var(--hairline-gold);
}
.card--cta:hover { border-color: var(--accent); }
.card--cta .card__title { color: var(--fg); }
.card__cta {
  margin-top: auto;            /* cola a chamada no rodape do card */
  padding-top: 1.15rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--accent);
  font-size: 0.92rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
}
.card--cta:hover .btn__arrow { transform: translateX(3px); }
.card__cta .btn__arrow { transition: transform 220ms var(--ease); }

/* ---------- 9-ter. FICHA TECNICA (#beneficios) -----------------------
   Seis celulas contiguas separadas por um filete dourado, sem caixas
   soltas boiando no fundo. O filete E o gap: o container pinta dourado,
   cada celula pinta por cima, entao 1px de gap vira linha. Resolve 3, 2
   e 1 coluna sozinho, sem nenhuma regra :nth-child.

   POR QUE NAO REAPROVEITA .card: o #aplicacoes ja e section--navy com
   grid--3 de .card + .card__icon. Se o #beneficios virasse navy usando
   as mesmas classes, as duas secoes ficariam o mesmo bloco repetido.

   POR QUE O .reveal FICA NO CONTAINER E NUNCA NAS CELULAS: .reveal usa
   transform:translateY(22px) (l.916). Com overflow:hidden no container,
   uma celula deslocada abriria uma fresta dourada de 22px durante a
   animacao. A malha revela como um objeto so — que e o que ela e. */
.specgrid {
  --spec-line: color-mix(in srgb, var(--gold) 34%, transparent);
  --spec-pad: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--spec-line);
  border: 1px solid var(--spec-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) { .specgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .specgrid { grid-template-columns: repeat(3, 1fr); } }

.spec {
  background: var(--surface);
  padding: var(--spec-pad);
  transition: background var(--dur) var(--ease);
}
.spec:hover { background: var(--navy-700); }

/* FAIXA DE IMAGEM no topo da celula — substituiu o icone SVG em 31/07/2026.
   Sangra ate as bordas da celula com margem negativa igual ao padding, entao
   a foto encosta no filete dourado da malha em vez de flutuar dentro do card.
   Proporcao 7:2 (~104px numa celula de 366px): e faixa, nao miniatura.

   O ::after e o que segura a serie: seis fotos diferentes terminariam em seis
   linhas duras e a malha viraria mosaico. O gradiente dissolve o rodape de cada
   foto no fundo da propria celula, e escurece o topo o suficiente para as seis
   assentarem no mesmo navy. Nada de filete dourado sob a faixa — a malha ja
   carrega o dourado, e barrinha de acento sob foto e clichê. */
.spec__band {
  position: relative;
  display: block;
  margin: calc(-1 * var(--spec-pad)) calc(-1 * var(--spec-pad)) 1.3rem;
  aspect-ratio: 7 / 2;
  overflow: hidden;
  background: var(--navy-900);
}
.spec__band img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.spec__band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--navy-900) 34%, transparent) 0%,
    transparent 44%,
    color-mix(in srgb, var(--surface) 92%, transparent) 100%);
}
.spec:hover .spec__band img { opacity: 1; transform: scale(1.04); }

/* Usa o token --fs-h3 em vez do 1.4rem fixo do .card__title: aquele era
   exatamente o PISO do clamp, entao os titulos nunca cresciam no desktop. */
.spec__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.006em;
  text-wrap: balance;
  color: var(--fg);
  margin: 0 0 0.55rem;
}
.spec__text {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.62;
  text-wrap: pretty;
  margin: 0;
}

/* ---------- 9-quater. GRADE DAS LINHAS (5 cards, ultima fila centrada) ----
   O #linhas tem 5 .product-card numa .grid--3, e sobrava um slot vazio no
   canto inferior direito. O buraco NAO era so de 3 colunas: em 2 colunas
   (640-959px) a grade fica 2+2+1 e sobra igual. Por isso `grid-column: span 2`
   num card nao resolve — fecharia a grade de 3 e quebraria a de 2.

   A saida e trocar grid por FLEX com wrap + justify-content:center. A fila
   cheia continua encostando nas duas margens (os cards tem basis exata), e
   so a ULTIMA fila, incompleta, se centraliza. A assimetria vira composicao
   em vez de buraco. Zero conteudo inventado, zero asset novo.

   Escopo proposital em #linhas: a .grid--3 global segue grid, porque o
   #aplicacoes tem 6 cards (doc 30) e nao precisa disto.

   align-items nao e declarado de proposito: o padrao `stretch` mantem os
   cards da mesma fila com a mesma altura, igual ao que o grid ja fazia. */
#linhas .grid {
  --lin-gap: clamp(1.25rem, 2.4vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--lin-gap);
}
#linhas .product-card { flex: 0 1 100%; }
@media (min-width: 640px) {
  #linhas .product-card { flex-basis: calc((100% - var(--lin-gap)) / 2); }
}
@media (min-width: 960px) {
  #linhas .product-card { flex-basis: calc((100% - 2 * var(--lin-gap)) / 3); }
}

/* ---------- 10. CARD DE PRODUTO (linhas) ---------------------------- */
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--hairline-gold);
}
.product-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cream);
}
.product-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}
.product-card:hover .product-card__media img { transform: scale(1.045); }
.product-card__tag {
  position: absolute; top: 1rem; left: 1rem;
  font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--navy);
  background: var(--gold-300);
  padding: 0.4em 0.8em;
  border-radius: 2px;
}
.product-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  flex: 1;
}
.product-card__title {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--fg);
}
.product-card__text { color: var(--muted); font-size: 0.96rem; line-height: 1.55; }
.product-card__skus {
  margin-top: 0.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--stone);
  text-transform: uppercase;
}
.product-card__foot {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
}

/* ---------- 11. MEDIA / FIGURE -------------------------------------- */
.figure {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--cream);
  box-shadow: var(--shadow-md);
}
.figure img { width: 100%; height: 100%; object-fit: cover; }
/* moldura dourada fina, marca registrada da linha */
.figure--framed { padding: 0.55rem; background: var(--navy); }
.figure--framed::after {
  content: "";
  position: absolute; inset: 0.55rem;
  border: 1px solid var(--hairline-gold);
  border-radius: calc(var(--radius-lg) - 3px);
  pointer-events: none;
  z-index: 2;
}
.figure__caption {
  font-size: 0.8rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-top: 0.7rem;
}

/* ---------- 12. HERO ASSIMETRICO ------------------------------------ */
.hero {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .hero { grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 4vw, 4.5rem); }
  .hero__media { justify-self: end; }
}
.hero__content { display: flex; flex-direction: column; gap: 1.5rem; max-width: 40ch; }
.hero__content .lead { margin: 0; }
.hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-width: 520px;
}
.hero__media .figure { position: absolute; inset: 0; }
/* etiqueta de credencial dourada sobreposta */
.hero__badge {
  position: absolute;
  bottom: 1.25rem; left: -0.75rem;
  z-index: 3;
  background: var(--cream-50);
  border: 1px solid var(--hairline-gold);
  border-radius: var(--radius);
  padding: 0.8rem 1.1rem;
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 0.7rem;
  max-width: 15rem;
}

/* ---------- 13. SPLIT (produto-heroi / texto+imagem) ---------------- */
.split {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, 1fr); }
  .split--reverse .split__media { order: -1; }
}
.split__body { display: flex; flex-direction: column; gap: 1.4rem; max-width: 46ch; }

/* ===== #sobre — institucional curto (doc 72) =====
   O .split__body e travado em 46ch, largura de leitura de paragrafo. Aqui a coluna
   abriga DUAS colunas de pilares, entao o teto sai — escopado, os outros splits
   continuam em 46ch. */
#sobre .split__body{ max-width:none; gap:clamp(1rem,1.8vw,1.4rem); }
#sobre .lead{ max-width:46ch; }
.sobre__pilares{
  margin:clamp(.5rem,1.4vw,1rem) 0 0; padding:0; list-style:none;
  display:grid; grid-template-columns:1fr; gap:clamp(1.4rem,3vw,2.4rem);
}
@media (min-width:620px){ .sobre__pilares{ grid-template-columns:repeat(2,1fr); } }
.sobre__pilares > li{ border-top:1px solid var(--hairline-gold); padding-top:clamp(.9rem,1.8vw,1.3rem); }
/* lnum pelo mesmo motivo da ficha do #por-inteiro: Cormorant traz algarismo
   old-style, e "20" sairia todo na altura-x, sem a presenca que o numero pede */
.sobre__num{ display:block; font-family:var(--font-display); font-weight:600; line-height:.85;
  font-size:clamp(2.8rem,5.5vw,4.4rem); color:var(--gold-300); margin-bottom:.5rem;
  font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1; }
.sobre__num span{ font-size:.55em; vertical-align:.28em; margin-left:.02em; }
.sobre__rotulo{ margin:0 0 .45rem; font-weight:600; font-size:1rem; line-height:1.35; color:#EDE7DA; }
.sobre__texto{ margin:0; font-size:.95rem; line-height:1.6;
  color:color-mix(in srgb,#EDE7DA 74%,var(--navy)); }
#sobre .split__media img{ display:block; width:100%; height:auto; border-radius:var(--radius-lg);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.65); }

/* O .split nasceu para "texto + imagem" (#problema, #por-inteiro), onde
   align-items:center esta certo. No #orcamento a dupla e "conteudo + FORMULARIO"
   e o centro faz o quiz flutuar contra a coluna mais alta: o topo da foto e o
   topo do quiz nao compartilhavam linha nenhuma. Aqui as duas colunas comecam
   juntas. Escopado — os outros splits continuam centrados. */
/* O #orcamento nao tem mais .split desde 31/07/2026 (doc 46) — sobrou so o quiz.
   Sem a coluna irma, os seis tiles esticariam pelos 1200px do container, e um
   formulario de 1200px de largura nao se le. Largura maxima + margem automatica. */
/* A foto voltou para o #contato (doc 49), entao o #orcamento nao tem mais
   .split — so o questionario. Sem coluna irma para limitar, os seis tiles
   esticariam pelos 1200px do container: largura maxima + margem automatica.
   O margin-top repoe o respiro que o lede dava antes de sair daqui (doc 47). */
/* 03/08/2026 (doc 51): o margin-top de ate 4rem foi calibrado quando o lede
   ainda estava aqui; com o lede fora (doc 47) somava ~110px de creme vazio entre
   o filete dourado e o topo do questionario — o maior buraco da pagina. Caiu
   para ~2,75rem no maximo. A largura subiu de 46rem para 50rem porque o cartao
   navy tem padding proprio: 46rem menos 2x2,75rem deixava as duas colunas de
   tiles apertadas depois que ganharam subtitulo. */
#orcamento .qz {
  max-width: 50rem;
  margin-inline: auto;
  width: 100%;
  margin-top: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
}

/* Bloco de contato do #contato: um filete separa o par e-mail/telefone do
   cabecalho, para o conjunto parar de ser uma pilha de linhas soltas. Alinhado
   a esquerda de proposito — centrado, os dois icones caiam em x diferentes
   (o e-mail e bem mais longo que o telefone) e o conjunto saia torto. */
.contact-block {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.4rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--hairline);
}

/* Linha de contato com icone. O bloco "Fale direto com um consultor" era o UNICO
   elemento da secao sem icone — a nota de prazo tem, as tres garantias tem — e
   e-mail e telefone ficavam como dois links gemeos empilhados, sem hierarquia.
   Mesma linguagem das .guarantee: svg de 1,15rem em var(--accent). */
.contact-line { display: flex; align-items: center; gap: 0.7em; margin: 0; }
.contact-line svg { width: 1.15rem; height: 1.15rem; flex: none; color: var(--accent); }

/* ---------- 14. CHECKLIST (bullets com check dourado) --------------- */
.checklist { display: flex; flex-direction: column; gap: 0.85rem; }
.checklist li {
  position: relative;
  padding-left: 2.1rem;
  color: var(--fg);
  line-height: 1.5;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.15em;
  width: 1.35rem; height: 1.35rem;
  border-radius: 50%;
  border: 1px solid var(--hairline-gold);
  /* CORRIGIDO 31/07/2026: aqui havia um linear-gradient(45deg,...) rotulado
     "haste do check". Um gradiente de 45 graus atravessa a caixa INTEIRA, entao
     o que aparecia era uma barra diagonal de ponta a ponta do circulo — o
     desenho universal de PROIBIDO. Somado ao check do ::after, o item lia como
     "a mochila NAO tem isso", o oposto da copy. O gradiente era residuo: o
     proprio comentario abaixo dizia que a borda ficou "mais nitida que
     gradiente", mas o gradiente nunca foi removido. */
  background: transparent;
}
/* check desenhado com bordas (mais nitido que gradiente) */
.checklist li::after {
  content: "";
  position: absolute;
  left: 0.48rem; top: 0.38em;
  width: 0.36rem; height: 0.64rem;
  border: solid var(--gold);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
/* .checklist--bare foi removido: existia so para anular o gradiente acima
   (background:transparent), nunca foi usado no markup e virou no-op. */

/* ---------- 15. STATS / PILLS --------------------------------------- */
.stat-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
@media (min-width: 640px) { .stat-row { grid-template-columns: repeat(3, 1fr); } }
.stat { display: flex; flex-direction: column; gap: 0.35rem; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.4rem);
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.stat + .stat { position: relative; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--fg);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border: 1px solid var(--hairline-gold);
  padding: 0.45em 0.95em;
  border-radius: 999px;
}
.pill-row { display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* faixa de logos de clientes (prova social) */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.25rem);
}
.logo-strip span {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
  opacity: 0.85;
  transition: opacity 300ms var(--ease), color 300ms var(--ease);
}
.logo-strip span:hover { opacity: 1; color: var(--accent); }

/* ---------- 16. STEPS (processo numerado — sequencia real) ---------- */
.steps { counter-reset: step; display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps--4 { grid-template-columns: repeat(4, 1fr); } }
.step {
  counter-increment: step;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline-gold);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  order: -1;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* detalhe: régua dourada afilada logo após o número */
.step::after {
  content: ""; order: 0; display: block;
  width: 2.25rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 20%, transparent));
  margin: 0.05rem 0 0.15rem;
}
.step__title {
  order: 1;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.28rem + 0.55vw, 1.6rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.01em;
  color: var(--navy); margin: 0.1rem 0 0.05rem;
}
.step__text { order: 2; color: var(--muted); font-size: 0.96rem; }
.step__img {
  order: -2; display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 12px; border: 1px solid rgba(18,35,63,0.12);
  box-shadow: 0 12px 28px -14px rgba(18,35,63,0.4); margin-bottom: 0.9rem;
}
/* destaque de palavras-chave: tinta navy + keyline dourada (AA-legível; dourado só na linha) */
.hl {
  color: var(--navy); font-weight: 500; font-style: normal;
  background-image: linear-gradient(color-mix(in srgb, var(--accent) 60%, transparent), color-mix(in srgb, var(--accent) 60%, transparent));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px;
  padding-bottom: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- 17. FAQ ------------------------------------------------- */
.faq { max-width: 760px; }
.faq-item {
  border-bottom: 1px solid var(--hairline);
}
.faq-item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--fg);
  transition: color 240ms var(--ease);
}
.faq-item summary:hover { color: var(--accent); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex: none;
  width: 0.7rem; height: 0.7rem;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 300ms var(--ease);
}
.faq-item[open] summary::after { transform: rotate(-135deg) translateY(0); }
.faq-item__body {
  padding: 0 0 1.5rem;
  color: var(--muted);
  max-width: var(--measure);
  line-height: 1.6;
}

/* ---------- 18. FORMULARIO (lead / orcamento) ----------------------- */
.form { display: flex; flex-direction: column; gap: 1.1rem; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 560px) { .form-grid { grid-template-columns: repeat(2, 1fr); } }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  /* 05/08/2026 (doc 81) — era 0.98rem (15,68px). ABAIXO DE 16px O SAFARI DO iOS
     AMPLIA A PAGINA SOZINHO ao focar o campo E NAO VOLTA, e isso acontecia nos
     5 campos do passo 5, o unico formulario de conversao da pagina. 16px e o
     piso do Safari, nao uma recomendacao: e valor exato, nao arredondavel para
     0.99rem. A diferenca visual para 15,68px e imperceptivel.
     NAO baixe este valor. Se precisar de campo visualmente menor, mexa no
     padding, nunca no font-size. */
  font-size: 1rem;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 0.85em 1em;
  transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}
.section--navy .field input,
.section--navy .field select,
.section--navy .field textarea {
  background: color-mix(in srgb, var(--navy-800) 70%, black 4%);
  border-color: var(--navy-700);
  color: #EDE7DA;
}
.form__note {
  font-size: 0.85rem;
  color: var(--muted);
  display: inline-flex; align-items: center; gap: 0.5em;
}
.form__note::before { content: ""; width: 0.9rem; height: 1px; background: var(--gold); }

/* ---------- 19. HEADER / NAV ---------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--cream-50) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.site-header[data-scrolled="true"] {
  border-bottom-color: var(--hairline-gold);
  box-shadow: var(--shadow-sm);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.5rem;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.14em;
  color: var(--navy);
  text-transform: uppercase;
}
.nav { display: none; align-items: center; gap: 2rem; }
@media (min-width: 900px) { .nav { display: flex; } }
.nav__link {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--charcoal);
  position: relative;
  padding-block: 0.4rem;
}
.nav__link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--ease);
}
.nav__link:hover { color: var(--navy); }
.nav__link:hover::after { transform: scaleX(1); }
.header-cta { display: none; }
@media (min-width: 900px) { .header-cta { display: inline-flex; } }
/* botao hamburguer (mobile) */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: transparent;
  border: 1px solid var(--hairline-gold);
  border-radius: var(--radius);
  padding: 0.55rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
}
@media (min-width: 900px) { .nav-toggle { display: none; } }

/* ---------- 20. FOOTER ---------------------------------------------- */
.site-footer {
  --bg: var(--navy-900);
  --fg: #E7E1D4;
  --muted: color-mix(in srgb, #E7E1D4 55%, var(--navy-900));
  --accent: var(--gold-300);
  --hairline: var(--navy-700);
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(198,161,91,0.08), transparent 55%),
    var(--navy-900);
  color: var(--fg);
  padding-block: clamp(3.5rem, 3rem + 4vw, 5.5rem) 2.5rem;
}
/* 05/08/2026 (doc 81): reserva a faixa do botao flutuante. Abaixo de 899px ele e
   um circulo de 3.4rem (54,4px) a `bottom:clamp(1rem,3vw,2rem)` — 16px em 320px
   — logo ocupa os 70,4px de baixo da tela, e o padding de 2.5rem (40px) do
   rodape nao dava conta: ele cobria 50,4x30,1px da 1a linha do
   "BRINDARA BRINDES © 2026" em 320px, e sobrepunha em TODAS as larguras
   testadas (37 a 50px de largura por 30 a 39px de altura).
   5.75rem = 92px, que deixa ~21px de folga abaixo do botao.
   Se o botao mudar de tamanho ou de `bottom`, refaca esta conta. */
@media (max-width: 899px){
  .site-footer{ padding-block: clamp(3.5rem, 3rem + 4vw, 5.5rem) 5.75rem; }
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.footer__sign {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.15rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--fg);
  max-width: 18ch;
}
.footer__sign em { font-style: italic; color: var(--accent); }
.footer__col h4 {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 1.1rem;
}
.footer__col a,
.footer__col p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.9;
  display: block;
  transition: color 240ms var(--ease);
}
.footer__col a:hover { color: var(--fg); }
.footer__contact strong { color: var(--fg); font-weight: 600; }
.footer__bottom {
  margin-top: clamp(2.5rem, 4vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--muted);
}
.footer__brand {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
}

/* ---------- 21. MOVIMENTO (reveal on-scroll) ------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
/* atrasos escalonados opcionais */
.reveal[data-delay="1"] { transition-delay: 90ms; }
.reveal[data-delay="2"] { transition-delay: 180ms; }
.reveal[data-delay="3"] { transition-delay: 270ms; }
/* ACRESCENTADO 19/08/2026 — BUG REAL, nao cosmetico. O "Como funciona" tem
   QUATRO passos e o quarto <li> ja usava data-delay="4", mas a escada parava no
   3: sem regra o atributo nao casava com nada e o passo 4 entrava com 0ms, ou
   seja, JUNTO com o passo 1. A revelacao subia 1-2-3 e o 4 piscava no comeco.
   Se um dia entrar um data-delay="5", a regra dele tem de vir junto. */
.reveal[data-delay="4"] { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .btn:hover, .card:hover, .product-card:hover { transform: none; }
}

/* ---------- 22. UTILITARIOS ----------------------------------------- */
.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;
}
.skip-link {
  position: absolute; left: 1rem; top: -3rem;
  z-index: 100;
  background: var(--navy); color: var(--cream-50);
  padding: 0.6rem 1rem; border-radius: var(--radius);
  transition: top 200ms var(--ease);
}
.skip-link:focus { top: 1rem; }
.flow > * + * { margin-top: var(--flow, 1.5rem); }
.eyebrow + .h1, .eyebrow + .h2, .eyebrow + .display { margin-top: 0.9rem; }

/* --- Menu mobile (complemento) --- */
@media (max-width: 899px){
  .site-header[data-nav-open="true"] .nav{
    display:flex; position:fixed; left:0; right:0; top:var(--header-h,64px);
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--cream-50,#FBF7EF); border-top:1px solid var(--hairline,#E4DDCE);
    box-shadow:0 24px 40px -24px rgba(18,35,63,.40); padding:.25rem var(--gutter,1.5rem) 1.4rem; z-index:60;
  }
  .site-header[data-nav-open="true"] .nav__link{ padding:.95rem .25rem; border-bottom:1px solid var(--hairline,#E4DDCE); }
  .site-header[data-nav-open="true"] .header-cta{ display:inline-flex; margin-top:1rem; }
}

/* ===== MODULO HERO (referencia) ===== */
/* =====================================================================
   MODULO v4 — HEADER OVERLAY + HERO FULL-BLEED + FAIXA DE CONFIANCA
   Namespaced (.hero-x, .trust, .topbar-*). Reutiliza tokens do :root e
   o sistema .btn (vars --_bg/--_fg/--_bd). ANEXADO apos o CSS existente,
   entao os overrides de .site-header / .header-cta / menu mobile vencem
   por cascata, sem !important. Hooks de JS preservados:
   .site-header[data-scrolled], .nav-toggle, .nav__link, .header-cta,
   .reveal, --header-h (setado via JS no :root a partir do offsetHeight).
   ===================================================================== */

/* ---------- HEADER · Estado A (topo do hero, transparente) ---------- */
.site-header {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background-color 300ms var(--ease),
              box-shadow 300ms var(--ease),
              border-color 300ms var(--ease);
}
.site-header__inner {
  min-height: 5rem;
  /* o lockup e um bloco de 3 andares: o padding garante respiro mesmo
     quando ele passa da min-height, e a barra cresce sozinha */
  padding-block: 0.85rem;
  gap: clamp(1.25rem, 3.5vw, 3.5rem);
}

/* ---------- HEADER · Estado B (rolado -> navy translucido) ---------- */
/* v5: navy translucido + blur no lugar do gradiente opaco — a foto do hero
   continua aparecendo por tras da barra, como na referencia aprovada.
   Como agora e uma COR (nao background-image), a transition da l.968 pega. */
.site-header[data-scrolled="true"] {
  background: color-mix(in srgb, var(--navy-900) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  border-bottom-color: transparent;
}

/* ---------- HEADER · Lockup oficial da marca (imagem unica) ----------- */
/* O lockup inteiro — laco, B, BRINDARA e BRINDES entre filetes — vem do PNG
   com alfa. Nao ha mais texto a estilizar aqui: o letter-spacing herdado de
   .brand nao afeta imagem, entao o alinhamento do laco sobre o B e o do
   arquivo aprovado, nao uma reconstrucao. */
.site-header .brand {
  margin-right: auto;
  align-items: center;
  letter-spacing: normal;
}
/* proporcao nativa 566x445 (1.272:1). Altura controla; largura acompanha.
   O arquivo tem 6,3x a altura maxima de exibicao (70px) e 3% de sangria
   transparente nos 4 lados, entao nenhum arredondamento de escala rapa as
   pontas dos filetes do BRINDES nem o apice do laco. */
.brand__mark {
  width: auto;
  height: clamp(2.6rem, 4.5vw, 4.4rem);
  flex: none;
}

/* ---------- HEADER · Navegacao (clara sobre o hero) ----------------- */
/* gap medido na referencia: ~34px entre os links (o max anterior dava 41.6px) */
.site-header .nav { gap: clamp(1.4rem, 2.2vw, 2.1rem); }
.site-header .nav__link {
  font-size: clamp(0.78rem, 1.05vw, 0.84rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  color: color-mix(in srgb, var(--cream) 90%, transparent);
}
.site-header .nav__link:hover { color: var(--cream); }
.site-header .nav__link::after { background: var(--gold); }

/* ---------- HEADER · Telefone dourado (texto puro, sem icone) ------- */
/* mesmo corpo e mesmo peso do nav; so a cor separa os dois */
.topbar-phone {
  display: inline-flex;
  align-items: center;
  font-size: clamp(0.78rem, 1.05vw, 0.84rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--gold-300);
  white-space: nowrap;
  transition: color 240ms var(--ease);
}
.topbar-phone:hover { color: var(--cream); }

/* ---------- HEADER · CTA dourado solido ----------------------------- */
/* A paleta vem do .btn--gold-solid (l.~1190) via --_bg/--_fg/--_bd: aqui so
   geometria e tipografia. NAO redeclarar background/color/border — foi isso
   que antes anulava o sistema .btn e deixava o botao vazado. */
.header-cta {
  /* 30/07/2026: reduzido a pedido do dono. A referencia antiga era 313x70px e
     pesava demais ao lado do telefone; agora fecha em ~282x60px (-10% de largura,
     -15% de altura). Os termos em vw tambem cairam, para o botao encolher junto
     nas larguras intermediarias e nao so no teto. */
  padding: clamp(0.8em, 1.6vw, 1.5em) clamp(1.1em, 2.6vw, 2.5em);
  font-size: clamp(0.74rem, 0.95vw, 0.90rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* ---------- HEADER · Toggle mobile (borda ouro / texto creme) ------- */
/* backing translucido garante contraste do toggle sobre a foto no topo */
.site-header .nav-toggle {
  border-color: var(--gold);
  color: var(--cream);
  background: color-mix(in srgb, var(--navy-900) 34%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.site-header .nav-toggle svg { width: 1.05rem; height: 1.05rem; }

/* =====================================================================
   HERO — full-bleed, texto a esquerda, mochila respira a direita
   ===================================================================== */
.hero-x {
  position: relative;
  isolation: isolate;
  min-height: min(92vh, 900px);
  /* puxa o hero para tras do header sticky transparente (--header-h via JS) */
  margin-top: calc(-1 * var(--header-h, 5rem));
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  background: var(--navy-900);
  --accent: var(--gold-300); /* .eyebrow usa --accent -> ouro claro AA sobre navy */
}

/* Imagem de fundo (decorativa) */
.hero-x__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 68% center; /* valoriza a mochila a direita */
  pointer-events: none;
}
/* O <video> e o <img> ocupam a MESMA caixa (ambos .hero-x__bg, ambos absolute
   inset:0). O still fica atras e so aparece quando o video nao toca. (doc 63) */
.hero-x__bg--still{ z-index:-3; }
/* 05/08/2026 (doc 81): abaixo de 900px o video sai e o poster assume. Mesmo par
   que o bloco prefers-reduced-motion logo abaixo ja usava — aqui o motivo e
   peso (3,3 MB) somado ao fato de o scrim cobrir 53-92% da cena no mobile.
   O download em si e barrado pelo media= no <source> (l.2853); este bloco cuida
   do VISUAL. Os dois sao necessarios: sem o media= o arquivo baixa mesmo
   escondido; sem este bloco o <video> ficaria por cima do poster, vazio. */
@media (max-width:899px){
  video.hero-x__bg{ display:none; }
  .hero-x__bg--still{ z-index:-2; }
}
/* Quem pediu menos movimento nao recebe video: ele e decorativo. */
@media (prefers-reduced-motion:reduce){
  video.hero-x__bg{ display:none; }
  .hero-x__bg--still{ z-index:-2; }
}

/* Scrim: 1) direcional navy (texto esquerda)  2) topo (nav/CTA/tel)
          3) vinheta inferior (faixa de confianca). 1a listada = topo. */
.hero-x__scrim {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(100deg,
      var(--navy-900) 0%,
      color-mix(in srgb, var(--navy-900) 84%, transparent) 40%,
      color-mix(in srgb, var(--navy) 42%, transparent) 62%,
      transparent 80%),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--navy-900) 58%, transparent) 0%,
      transparent 16%),
    linear-gradient(to top,
      color-mix(in srgb, var(--navy-900) 90%, transparent) 0%,
      transparent 32%);
}

/* Linha 1 — conteudo (respeita o .container), centrado verticalmente */
.hero-x__inner {
  grid-row: 1;
  display: flex;
  align-items: center;
  width: 100%;
  padding-top: calc(var(--header-h, 5rem) + clamp(1.5rem, 4vw, 3rem));
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.hero-x__content {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  max-width: 34rem; /* ~colunas 1–7; paragrafo nunca alem de ~52ch */
}

/* Eyebrow (reaproveita .eyebrow + filete dourado via currentColor) */
.hero-x .eyebrow {
  font-size: clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
  line-height: 1.4;
}

/* H1 heroi serifado */
.hero-x__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5.25rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--cream);
  text-wrap: balance;
}
.hero-x__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--gold-300); /* unico dourado do bloco de titulo */
}

/* Subtitulo (creme mais firme p/ contraste na borda do scrim) */
.hero-x__sub {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(1rem, 0.96rem + 0.5vw, 1.2rem);
  font-weight: 400;
  line-height: 1.6;
  color: color-mix(in srgb, var(--cream) 82%, var(--navy));
  text-wrap: pretty;
}
.hero-x__sub strong { color: var(--cream); font-weight: 600; }

/* Botoes */
.hero-x__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.2rem;
}
.hero-x__actions .btn {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1em 1.75em;
}
.hero-x__actions .btn svg { width: 1.1rem; height: 1.1rem; flex: none; }

/* CTA primario — dourado solido, texto navy (usa vars do .btn).
   box-shadow no MODIFICADOR (0,1,0) para o .btn:hover (0,2,0) vencer no hover. */
.btn--gold-solid {
  --_bg: var(--gold);
  --_fg: var(--navy);
  --_bd: var(--gold);
  box-shadow: 0 8px 24px -14px rgba(14, 27, 49, 0.75);
}
.btn--gold-solid:hover {
  --_bg: var(--gold-300);
  --_fg: var(--navy);
  --_bd: var(--gold-300);
}

/* CTA secundario — escuro translucido com contorno claro (WhatsApp) */
.btn--ghost-light {
  --_bg: color-mix(in srgb, var(--navy-900) 45%, transparent);
  --_fg: var(--cream);
  --_bd: color-mix(in srgb, var(--cream) 40%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.btn--ghost-light:hover {
  --_bg: color-mix(in srgb, var(--navy-900) 55%, transparent);
  --_fg: var(--cream);
  --_bd: var(--gold);
}

/* Microcopy */
.hero-x__micro {
  margin: -0.45rem 0 0;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.5;
  color: color-mix(in srgb, var(--cream) 62%, var(--navy));
}

/* =====================================================================
   FAIXA DE CONFIANCA — linha 2 do grid, full-width
   ===================================================================== */
.trust {
  grid-row: 2;
  border-top: 1px solid var(--hairline-gold);
  background: color-mix(in srgb, var(--navy-900) 55%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.trust__inner {
  display: grid;
  /* Colunas por CONTEUDO, nao 4x1fr: com 1fr toda coluna herda a largura do item
     mais largo ("NO PRAZO COMBINADO, EM TODO O BRASIL"), o que exigia ~1336px so
     de conteudo e forcava o 2x2 ja em 1399px. Com auto + space-between o mesmo
     texto cabe em ~1085px, e a faixa segura UMA LINHA ate ~1200px de viewport. */
  grid-template-columns: repeat(4, auto);
  /* Cluster CENTRADO com folga igual entre os selos (era space-between, que
     grudava o 1o e o 4o nas bordas do container). */
  justify-content: center;
  column-gap: clamp(0.5rem, 1.6vw, 1.75rem);
}
/* A1: 4 numa linha só em telas largas; 2x2 abaixo (cada item em 1 linha)
   ATENCAO (doc 79, 05/08/2026): este bloco esta INERTE desde que a esteira
   passou a valer em toda a faixa <=1149px — o .trust__inner nunca mais e grade
   aqui. Ficou no arquivo porque as tres regras de :nth-child abaixo AINDA
   participam da cascata e ja derrotaram as regras da esteira uma vez (o item 3
   sem filete e com borda no topo). Por isso o bloco da esteira usa
   `.trust__inner .trust__set .trust__item`. Candidato a remocao na limpeza de
   CSS morto (fila nos docs 36/37) — remover exige reconferir a esteira. */
@media (max-width: 1149px) {
  .trust__inner { grid-template-columns: repeat(2, 1fr); column-gap: 0; }
  .trust__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .trust__item:nth-child(even) { padding-right: 0; }
  .trust__item:nth-child(n+3) { border-top: 1px solid color-mix(in srgb, var(--cream) 14%, transparent); }
}
/* A2 (REVOGADO em 30/07/2026): havia aqui um padding-right de ate 13rem para
   "reservar o canto do FAB do WhatsApp". Era caro demais pelo que entregava —
   208px de largura roubados entre 1200 e 1400px, que empurravam o cluster para
   a esquerda (o desalinhamento reclamado) e forcavam o 2x2 cedo demais.
   O que a medicao em Chrome headless mostrou (pior caso 1250x900): o FAB
   encosta na faixa, mas so na BORDA INFERIOR VAZIA dela — ~15px de sobreposicao
   vertical contra a base da barra, com ~8px de folga abaixo da linha de base do
   texto. Nenhum caractere fica coberto em nenhuma largura testada
   (1150/1250/1400/1440/1600/1920 x 700/900/1080). Em viewports altos o FAB fica
   inteiramente abaixo da faixa, e ao rolar a faixa sobe e se afasta.
   Se um dia o FAB crescer ou a faixa ganhar mais um andar, revisar isto. */
/* A1 (REVOGADO em 05/08/2026, docs 76 e 79): abaixo de 560px havia 1 coluna, e
   os 4 selos viravam 4 andares — ~184px de altura logo abaixo do CTA do hero.
   Hoje TODA a faixa <=1149px e uma ESTEIRA de uma linha so; ver o bloco
   "ESTEIRA" adiante, que fica DEPOIS das regras base do .trust__item de
   proposito (as regras de :first-child/:last-child da base tem a mesma
   especificidade e ganhariam por ordem de origem se o bloco viesse aqui). */
.trust__item {
  display: flex;
  align-items: center;
  gap: clamp(0.42rem, 0.7vw, 0.55rem);
  padding-block: 1.05rem;
  padding-inline: clamp(0.45rem, 0.9vw, 1.3rem);
  border-left: 1px solid color-mix(in srgb, var(--cream) 14%, transparent);
  color: var(--cream);
  /* Com a reserva do FAB revogada sobraram ~208px, entao a rampa pode ser bem
     mais suave: 11,2px em 1150px de viewport -> 12,16px de teto. */
  font-size: clamp(0.70rem, 0.44rem + 0.34vw, 0.76rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;               /* A1: cada item em UMA linha */
}
.trust__item:first-child { border-left: 0; padding-left: 0; }
.trust__item:last-child { padding-right: 0; }
.trust__icon { flex: none; color: var(--gold-300); display: inline-flex; }
.trust__icon svg {
  width: clamp(17px, 1.35vw, 22px); height: clamp(17px, 1.35vw, 22px);
  stroke: currentColor; stroke-width: 1.6; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.trust__hi { color: var(--gold-300); } /* destaque so por cor, mesmo peso */

/* =====================================================================
   ESTEIRA DA FAIXA DE CONFIANCA (<=1149px) — doc 76, ampliada no doc 79
   Mesma mecanica da faixa de logos do #clientes (l.1628-1665).
   ---------------------------------------------------------------------
   O CORTE E 1149px, nao 560px: 1149 e exatamente onde os 4 selos param de
   caber numa linha (e o mesmo limite do bloco da l.1481, que criava o 2x2).
   Ampliado em 05/08/2026 por decisao do dono, que viu o 2x2 no iPad mini
   (744px). Com isso o layout 2x2 SAIU DE CIRCULACAO: ou os 4 numa linha
   (>=1150px), ou a esteira. Um so modo intermediario a menos para manter.
   ACIMA de 1149px nada disto vale: o .trust__set volta a display:contents,
   os 4 itens voltam a ser filhos diretos da grade e o desktop nao muda.
   ===================================================================== */
.trust__set { display: contents; }
.trust__set--clone { display: none; }   /* o clone so existe na esteira */

@media (max-width: 1149px) {
  /* ===== TRAVA DA GRADE DO HERO — nao remova =====
     O .hero-x e display:grid com UMA coluna automatica (l.1310), e a .trust e
     um item dessa grade. Uma coluna automatica se dimensiona pelo conteudo,
     entao a trilha de 1968px puxava a COLUNA INTEIRA para 1968px: o
     .hero-x__content ia para x=404 e o H1, o lede e os dois CTAs sumiam da
     tela em 320px. O overflow:hidden do proprio .hero-x escondia o estrago —
     a pagina nao rolava na horizontal, o hero e que ficava vazio.
     minmax(0,1fr) prende a coluna na largura do container e da minimo zero,
     entao nenhum filho consegue mais inflar a grade. */
  .hero-x { grid-template-columns: minmax(0, 1fr); }
  .trust { min-width: 0; }

  /* A janela recorta e esmaece as pontas. A mascara vai AQUI e nao no .trust:
     o .trust carrega o fundo navy e o filete dourado do topo, que esmaecidos
     nas bordas fariam a faixa parecer mais estreita que a tela. */
  .trust__viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  }

  /* O .trust__inner deixa de ser grade e vira a TRILHA. Precisa largar as tres
     regras que herda de .container (max-width, margin auto e o gutter) — com
     qualquer uma delas a trilha nao consegue ficar maior que a tela. */
  .trust__inner {
    /* VELOCIDADE — remedido no doc 79: um conjunto tem 1021,9px em <=744px
       (1027,2px em 1149px, porque o icone cresce com o vw), entao 26s dao
       ~39,3 px/s. A esteira das logos usa a MESMA duracao de volta (26s), mas o
       conjunto dela tem 1992px, entao ela corre a 76,6 px/s — quase o dobro.
       A diferenca e proposital: logo se reconhece de relance, frase precisa ser
       lida. A 76 px/s um selo atravessa a tela rapido demais para terminar a
       leitura. Para acelerar, baixe SO este numero.
       (O doc 76 media 984,1px / 37,9 px/s — era o valor COM o defeito de
       especificidade que comia o respiro dos itens 2 e 3.) */
    --trust-duration: 26s;
    display: flex;
    width: max-content;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    column-gap: 0;
    will-change: transform;
    animation: trust-marquee var(--trust-duration) linear infinite;
  }
  .trust__set,
  .trust__set--clone { display: flex; }

  /* Ritmo uniforme: TODO item com o mesmo filete a esquerda e o mesmo respiro,
     inclusive o primeiro e o ultimo. Se o primeiro ficasse sem filete (como no
     desktop), a emenda entre os dois conjuntos apareceria a cada volta.

     O ENCADEAMENTO `.trust__inner .trust__set .trust__item` (0,3,0) E
     OBRIGATORIO — nao simplifique para `.trust__item`.
     O bloco da l.1481 (que montava o 2x2) declara, com (0,2,0):
       .trust__item:nth-child(odd){ border-left:0; padding-left:0 }
       .trust__item:nth-child(even){ padding-right:0 }
       .trust__item:nth-child(n+3){ border-top:1px solid ... }
     e continua valendo em toda esta faixa. O doc 76 usou `.trust__item`
     (0,1,0) e PERDEU: medido em 320px, o item 3 de cada conjunto ficava sem
     filete a esquerda, sem respiro a esquerda E com um filete de 1px em cima,
     e o item 2 sem respiro a direita. O ritmo da esteira estava irregular sem
     que a largura dos conjuntos denunciasse (os dois batiam em 984,14px, so
     que ambos errados do mesmo jeito). Corrigido no doc 79. */
  .trust__inner .trust__set .trust__item {
    border-top: 0;
    border-left: 1px solid color-mix(in srgb, var(--cream) 14%, transparent);
    padding-inline: 1.15rem;
    padding-block: 0.95rem;
  }
}

/* -50% == exatamente UM conjunto, porque os dois sao identicos e nao ha gap
   entre eles no .trust__inner. Sentido esquerda -> direita, igual ao
   @keyframes clients-marquee. */
@keyframes trust-marquee {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Pausa no ponteiro — atras de (hover:hover) DE PROPOSITO. No toque o :hover
   gruda depois do tap (a mesma armadilha que matou os .mpi-card, doc 75) e a
   esteira congelaria de vez, sem jeito de destravar. */
@media (max-width: 1149px) and (hover: hover) {
  .trust__viewport:hover .trust__inner { animation-play-state: paused; }
}

/* Menos movimento: vira faixa de rolagem manual, sem clone e sem mascara —
   mesmo tratamento que a faixa de logos recebe na l.1747. */
@media (max-width: 1149px) and (prefers-reduced-motion: reduce) {
  .trust__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .trust__inner { width: auto; animation: none; }
  .trust__set--clone { display: none; }
}

/* =====================================================================
   BREAKPOINTS
   ===================================================================== */

/* --- <=899px: texto sobre a foto inteira; scrim reforcado; faixa 2x2 - */
@media (max-width: 899px) {
  .hero-x__bg { object-position: 75% center; }
  .hero-x__scrim {
    background-image:
      linear-gradient(100deg,
        var(--navy-900) 0%,
        color-mix(in srgb, var(--navy-900) 82%, transparent) 42%,
        color-mix(in srgb, var(--navy) 56%, transparent) 80%,
        color-mix(in srgb, var(--navy-900) 40%, transparent) 100%),
      linear-gradient(to bottom,
        color-mix(in srgb, var(--navy-900) 60%, transparent) 0%,
        transparent 22%),
      linear-gradient(to top,
        color-mix(in srgb, var(--navy-900) 92%, transparent) 0%,
        transparent 50%);
  }
  /* (faixa de confiança: colunas tratadas nos blocos 1399/560 acima) */

  /* Header transparente: so brand + telefone + toggle. CTA fica no hero. */
  .site-header[data-nav-open="true"] .header-cta { display: none; }
  /* Dropdown mobile tem fundo creme -> links escuros para contraste AA */
  .site-header[data-nav-open="true"] .nav__link { color: var(--navy); }
  .site-header[data-nav-open="true"] .nav__link:hover { color: var(--gold-600); }
  /* dentro do dropdown claro o toggle nao precisa do backing escuro */
  .site-header[data-nav-open="true"] .nav-toggle { background: transparent; }
}

/* --- <=599px: CTAs empilhados full-width; microcopy centralizado ----- */
@media (max-width: 599px) {
  .hero-x__actions { flex-direction: column; align-items: stretch; }
  .hero-x__actions .btn { width: 100%; }
  .hero-x__micro { text-align: center; }
  /* v5: o telefone perdeu o icone (a referencia e texto puro). Esconder so o
     <span> deixaria um link VAZIO no DOM — entao some o link inteiro. Abaixo
     de 600px o contato fica no hero, no rodape e no botao flutuante do WhatsApp. */
  .topbar-phone { display: none; }
}

/* --- >=1024px: half-grid pleno, H1 no auge (clamp ja cobre) ---------- */
@media (min-width: 1024px) {
  .hero-x__content { max-width: 34rem; }
}

/* --- Movimento reduzido: ja coberto pelo bloco global; reforco local - */
@media (prefers-reduced-motion: reduce) {
  .hero-x__bg { will-change: auto; }
  .header-cta:hover, .btn--gold-solid:hover, .btn--ghost-light:hover { transform: none; }
}

/* ===== NOSSOS CLIENTES (marquee) ===== */
/* ===========================================================
   NOSSOS CLIENTES  ·  .clients  (namespaced, append-only)
   Refino: marquee contínuo L→R sem salto, pausa hover/foco,
   fade nas bordas, fallback reduced-motion, eyebrow com
   traços simétricos, CTA dourado central.
   =========================================================== */

.clients__head{
  max-width:56ch;
  margin-inline:auto;
}

/* Eyebrow com traços dos DOIS lados (::before já existe; adiciona o par) */
.clients__head .eyebrow::after{
  content:"";
  display:inline-block;
  width:clamp(1.5rem,4vw,2.6rem);
  height:1px;
  margin-left:.85rem;
  vertical-align:middle;
  background:linear-gradient(90deg,var(--gold) 0,transparent 100%);
}

/* Frase serifada, itálica, navy — "desde 2007" em negrito */
.clients__lede{
  margin:1.1rem auto 0;
  max-width:44ch;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  color:var(--navy);
  font-size:clamp(1.35rem,1rem + 1.8vw,2.15rem);
  line-height:1.28;
  letter-spacing:.005em;
  text-wrap:balance;
}
.clients__lede strong{
  font-weight:700;
  font-style:italic;
  color:var(--navy);
}

/* ---- Marquee viewport (fade mask nas bordas) -------------- */
.clients__marquee{
  --marquee-duration:36s;
  margin-top:clamp(2rem,4vw,3.25rem);
  overflow:hidden;
  border-radius:var(--radius);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%);
}
/* Foco visível sem borda dura (acessibilidade de teclado) */
.clients__marquee:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:4px;
}

/* ---- Track: dois conjuntos idênticos, translateX loop ----- */
.clients__track{
  --client-gap:clamp(1rem,2vw,1.75rem);
  list-style:none;
  margin:0;
  padding:.5rem 0;                 /* respiro p/ lift + sombra do hover */
  display:flex;
  width:max-content;
  will-change:transform;
  animation:clients-marquee var(--marquee-duration) linear infinite;
}
/* Movimento ESQUERDA -> DIREITA (cards viajam para a direita).
   -50% == exatamente 1 conjunto, pois TODO card tem margin-right
   igual (14 cards + 14 margens); por isso o loop não salta. */
@keyframes clients-marquee{
  from{transform:translateX(-50%);}
  to  {transform:translateX(0);}
}
/* Pausa no hover / foco dentro do carrossel */
.clients__marquee:hover .clients__track,
.clients__marquee:focus-within .clients__track{
  animation-play-state:paused;
}

/* ---- Card do cliente -------------------------------------- */
.client-card{
  flex:0 0 auto;
  margin-right:var(--client-gap);
  min-width:clamp(150px,18vw,200px);
  min-height:clamp(104px,12vw,132px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:1.25rem 1.5rem;
  background:#fff;
  border:1px solid var(--stone-200);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.client-card:hover{
  transform:translateY(-4px);
  border-color:var(--gold-300);
  box-shadow:var(--shadow-md);
}
.client-card__name{
  font-family:var(--font-body);
  font-weight:600;
  font-size:clamp(1rem,.9rem + .35vw,1.18rem);
  color:var(--navy);
  letter-spacing:.02em;
  line-height:1.15;
  text-align:center;
  white-space:nowrap;
}
/* Selo "DESDE 2007" (âncora — apenas EMS) */
.client-card__seal{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-600);
  padding:.2rem .55rem;
  border:1px solid var(--gold-300);
  border-radius:999px;
  line-height:1;
  white-space:nowrap;
}

/* ---- CTA dourado, central --------------------------------- */
.clients__cta{
  margin-top:clamp(2.25rem,4vw,3.25rem);
}
.clients__cta .btn{
  --_bg:var(--gold);
  --_fg:var(--navy);
  --_bd:var(--gold);
  text-transform:uppercase;
  letter-spacing:.08em;
  box-shadow:0 6px 18px -9px rgba(198,161,91,.6);
  transition:transform .3s ease,box-shadow .3s ease,
             background-color .3s ease,color .3s ease,border-color .3s ease;
}
.clients__cta .btn:hover,
.clients__cta .btn:focus-visible{
  --_bg:var(--gold-300);
  --_fg:var(--navy);
  --_bd:var(--gold-300);
  transform:translateY(-2px);
  box-shadow:0 12px 26px -10px rgba(198,161,91,.72);
}

/* ---- Responsivo: marquee um pouco mais ágil no mobile ------ */
@media (max-width:640px){
  .clients__marquee{--marquee-duration:26s;}
}

/* ===========================================================
   Reduced motion: sem animação, scroll manual, sem duplicados
   =========================================================== */
@media (prefers-reduced-motion:reduce){
  .clients__marquee{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    -webkit-mask-image:none;
            mask-image:none;
  }
  .clients__track{
    width:auto;
    animation:none;
    padding-inline:clamp(.5rem,3vw,1.25rem);
  }
  .client-card:hover{
    transform:none;                /* sem movimento p/ quem pediu menos movimento */
  }
  .client-card[aria-hidden="true"],
  .client-card.is-dup{
    display:none;
  }
}

/* logos de cliente (SVG) */
.client-card__logo{display:flex;align-items:center;justify-content:center;width:100%;height:clamp(30px,4.2vw,40px);}
.client-card__logo svg{height:100%;width:auto;max-width:92%;display:block;}

/* logo oficial (img) + fallback SVG */
.client-card__img{display:none;max-height:100%;max-width:92%;width:auto;height:auto;object-fit:contain;}
.client-card__logo.has-img svg{display:none;}
.client-card__logo.has-img .client-card__img{display:block;}

/* chip navy p/ logos oficiais brancos (inbrands, eps) */
.client-card__logo--chip.has-img{background:var(--navy,#12233F);border-radius:8px;padding:7px 14px;height:44px;box-sizing:border-box;}
.client-card__logo--chip.has-img .client-card__img{max-height:100%;max-width:100%;}

/* ===== ADIÇÕES WORKFLOW (append-only, tokens existentes) ================ */

/* --- Urgência + garantias no bloco de orçamento (M15/M16) --- */
/* O 3o valor do margin era 0: a .split (figura + quiz) vem logo em seguida sem
   margem propria, entao as garantias encostavam na imagem (medido: 22px). */
.quote-reassure{ max-width:62ch; margin:clamp(1.5rem,3vw,2.5rem) auto clamp(2.75rem,5vw,4.5rem); text-align:center; }
.urgency-note{
  /* CORRIGIDO 31/07/2026: o inline-flex transformava CADA trecho de texto e o
     <strong> em flex items independentes, entao "15 dias de antecedencia"
     quebrava sozinho no meio da frase e a nota virava 3 colunas desalinhadas.
     A frase agora mora inteira em .urgency-note__text, um unico flex item, e
     volta a quebrar como texto normal. Nao remover esse span. */
  /* flex (nao inline-flex): o box passa a ocupar a largura do .quote-reassure e
     encosta nas mesmas bordas da .guarantee-row logo abaixo — sem o efeito de
     caixa-dentro-de-caixa que o inline-flex criava. */
  display:flex; align-items:flex-start; gap:0.6em; justify-content:center;
  font-size:0.95rem; line-height:1.5; color:var(--fg);
  background:color-mix(in srgb, var(--gold) 12%, transparent);
  border:1px solid var(--hairline-gold);
  border-radius:var(--radius);
  padding:0.9rem 1.35rem;
}
.urgency-note svg{ width:1.15rem; height:1.15rem; flex:none; color:var(--accent); margin-top:0.2em; }
.urgency-note__text{ text-wrap:balance; }   /* equilibra as 2 linhas, sem orfa */
.urgency-note strong{ color:var(--accent); font-weight:700; white-space:nowrap; }
/* 31/07/2026: era text-align:left dentro de colunas iguais. Como as 3 legendas
   tem larguras diferentes, os vaos VISUAIS saiam desiguais (medidos: 77px e
   96px, 25% de diferenca) e a linha ainda brigava com o bloco centralizado
   acima. As colunas SEMPRE foram iguais (1fr) — o que o olho lia como vao
   irregular era o fim ragged de cada legenda, que deixa sobra branca diferente
   depois de cada uma.
   Duas tentativas que NAO resolvem, registradas para ninguem repetir:
   (a) text-align:center — a caixa de texto fica da largura da linha mais longa
       e a linha curta se centraliza dentro dela, DESCOLANDO o icone da legenda;
   (b) justify-content:center no .guarantee — sem efeito: a caixa de texto e um
       flex item anonimo que ja ocupa a coluna inteira, entao nao ha folga para
       distribuir. Medido antes e depois: vaos identicos, 77px e 96px.
   O que resolve e tornar o ritmo EXPLICITO com filetes verticais nas divisas
   das colunas — mesmo recurso da .trust do hero. Os filetes ficam a distancias
   exatamente iguais, entao a sobra branca depois de cada legenda para de ser
   lida como espacamento. */
.guarantee-row{ display:grid; gap:0.85rem 1.5rem; margin-top:clamp(1.5rem,2.4vw,2rem); text-align:left; }
@media (min-width:640px){
  .guarantee-row{ grid-template-columns:repeat(3,1fr); column-gap:0; }
  /* CORRIGIDO 31/07/2026: era color-mix(var(--cream) 14%, transparent) — creme a
     14% sobre creme e INVISIVEL. Com a secao virando clara, os tres filetes
     sumiriam e voltaria o bug dos vaos irregulares que este bloco resolveu.
     var(--hairline) e o papel semantico: --stone-200 no creme, --navy-700 no navy. */
  .guarantee{ padding-inline:clamp(1rem,2.2vw,1.9rem); border-left:1px solid var(--hairline); }
  .guarantee:first-child{ border-left:0; padding-left:0; }
  .guarantee:last-child{ padding-right:0; }
}
.guarantee{ display:flex; align-items:flex-start; gap:0.6em; font-size:0.9rem; line-height:1.4; color:var(--fg); }
.guarantee svg{ width:1.2rem; height:1.2rem; flex:none; color:var(--accent); margin-top:0.1em; }
/* mata a orfa "PJ" sozinha na 2a linha e iguala o corte das 3 colunas.
   Herda para a caixa anonima que embrulha o texto ao lado do svg. */
.guarantee{ text-wrap:balance; }
/* o lede desta secao fechava com uma 3a linha curta e solta */
#orcamento .lead{ text-wrap:balance; }

/* --- Botão flutuante de WhatsApp (M4) --- */
.wa-float{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem);
  z-index:60; display:inline-flex; align-items:center; gap:0.55rem;
  height:3.5rem; padding-inline:1.1rem; border-radius:999px;
  background:var(--gold); color:var(--navy);
  font-family:var(--font-body); font-size:0.86rem; font-weight:600; letter-spacing:0.02em;
  box-shadow:0 12px 28px -12px rgba(14,27,49,0.55);
  transition:transform 220ms var(--ease), box-shadow 220ms var(--ease), background-color 220ms var(--ease);
}
.wa-float svg{ width:1.5rem; height:1.5rem; flex:none; }
.wa-float:hover,.wa-float:focus-visible{ transform:translateY(-2px); background:var(--gold-300); box-shadow:0 16px 34px -12px rgba(14,27,49,0.6); }
@media (max-width:899px){
  .wa-float{ height:3.4rem; width:3.4rem; padding:0; justify-content:center; gap:0; }
  .wa-float__label{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .wa-float:hover,.wa-float:focus-visible{ transform:none; } }

/* --- Formulario de orçamento (M18) --- */
/* AUDITORIA 03/08/2026 (doc 51): o form era um bloco solto sobre o creme e
   ganhou moldura — .qz--panel, o cartao navy, e o que segura todo o resto
   deste bloco.
   19/08/2026 — TRES PERGUNTAS NUMA TELA (decisao do dono). Sairam daqui por
   perda de elemento no markup: .qz__head e .qz__head-top, .qz__bar,
   .qz__bar-fill e .qz__frac (o cabecalho de passo), .qz__trail e a media query
   de 640px que a fazia quebrar linha, .qz__step[hidden], .qz__tile--wide,
   .qz__tiles--tight, .qz__sub, .qz__tile-d, .qz__nav[hidden],
   .qz__nav .qz__back, .qz__rec*, .qz__opt* (painel e vitrine de SKU) e
   .qz--panel .btn--secondary — o "Voltar" era o unico secundario do painel.
   O .qz__step virou .qz__group: o <fieldset> nao e mais um passo, mas o reset
   dele continua sendo carga. */
.qz{ display:flex; flex-direction:column; gap:1.4rem; position:relative; }

/* MOLDURA NAVY. O default dos tiles (--surface a 70% + --hairline) sempre foi
   desenhado para navy — sobre creme ele precisava do remendo de sombra do doc
   36 §2.2. Trazendo o painel para o navy, o componente volta ao fundo para o
   qual foi projetado e o contraste resolve sozinho. Os tokens semanticos sao
   reescritos aqui do mesmo jeito que .section--navy faz no nivel da secao — o
   #orcamento continua creme, quem e navy e o cartao. */
.qz--panel{
  --surface: var(--navy-800);
  --fg: #EDE7DA;
  --muted: color-mix(in srgb, #EDE7DA 66%, var(--navy));
  --accent: var(--gold-300);
  --accent-ink: var(--gold);
  --hairline: var(--navy-700);
  --hairline-gold: color-mix(in srgb, var(--gold) 60%, transparent);
  color: var(--fg);
  background:
    radial-gradient(120% 90% at 88% -12%, rgba(198,161,91,0.16), transparent 58%),
    linear-gradient(165deg, var(--navy-800) 0%, var(--navy) 52%, var(--navy-900) 100%);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.5rem, 1rem + 3vw, 2.75rem);
}
/* Corpo do formulario: tudo o que pede acao. No envio o JS esconde este bloco
   inteiro de uma vez e fica so o #qzDone. Ele REPETE o flex/gap do .qz porque
   passou a ser um filho unico — sem isso os blocos internos perderiam o vao de
   1,4rem que tinham quando eram filhos diretos do form.
   O par [hidden] e OBRIGATORIO: `display:flex` e regra de AUTOR e venceria o
   `[hidden]{display:none}` do user-agent — a mesma armadilha ja documentada no
   .btn (l.284) e no antigo .qz__step. Sem ele o formulario continuaria em tela
   por cima do "Abrindo o WhatsApp...". */
.qz__body{ display:flex; flex-direction:column; gap:1.4rem; }
.qz__body[hidden]{ display:none; }
/* Reset do <fieldset> do grupo de quantidade (era .qz__step). Sem o
   min-inline-size:0 o UA impoe min-width:min-content e o cartao se recusa a
   encolher em 320px; sem border/margin/padding zerados voltam a moldura e o
   respiro nativos do navegador. */
.qz__group{ border:0; margin:0; padding:0; min-inline-size:0; }
/* O margin-bottom fica na PERGUNTA, nao na linha de apoio: quando a linha de
   apoio existe, o margin negativo dela puxa as duas para perto sem mudar o
   total antes dos tiles. */
.qz__q{ font-family:var(--font-display); font-size:clamp(1.45rem,1.15rem + 1.15vw,1.95rem); font-weight:600; line-height:1.18; color:var(--fg); padding:0; margin:0 0 1.15rem; text-wrap:balance; }
/* Linha de apoio da pergunta — tira do usuario a duvida que trava a resposta
   ("meu volume e pequeno demais?", "e se eu nao souber?"). */
.qz__help{ font-size:0.86rem; line-height:1.45; color:var(--muted); margin:-0.8rem 0 1.15rem; }
.qz__tiles{ display:grid; grid-template-columns:1fr 1fr; gap:0.7rem; }
.qz__tile{
  position:relative; text-align:left; font:inherit; color:var(--fg);
  background:color-mix(in srgb,var(--surface) 70%, transparent);
  border:1px solid var(--hairline); border-radius:var(--radius); cursor:pointer;
  padding:0.95rem 2.6rem 1rem 1.05rem;
  transition:border-color 200ms var(--ease), background-color 200ms var(--ease), transform 160ms var(--ease);
}
.qz__tile-t{ display:block; font-size:0.95rem; font-weight:600; line-height:1.3; }
/* Marcador de selecao. Com a tela unica ele ficou ainda mais importante: nao ha
   mais avanco de passo, entao a marca (mais o aria-pressed que o JS liga) e o
   UNICO retorno de que a resposta entrou. */
.qz__tile::after{
  content:""; position:absolute; top:0.95rem; right:0.95rem;
  width:1.15rem; height:1.15rem; border-radius:50%;
  border:1px solid color-mix(in srgb,var(--fg) 34%, transparent);
  background:transparent no-repeat center / 0.66rem 0.66rem;
  transition:background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.qz__tile.is-sel::after{
  border-color:var(--gold);
  background-color:var(--gold);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312233F' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E");
}
.qz__tile:hover{ border-color:var(--gold); transform:translateY(-2px); }
.qz__tile.is-sel{ border-color:var(--gold); background:color-mix(in srgb,var(--gold) 16%, transparent); }
@media (prefers-reduced-motion:reduce){ .qz__tile:hover{ transform:none; } }
.qz__nav{ display:flex; gap:0.8rem; align-items:center; }
/* Com UM botao so, o flex:1 faz o "Enviar no WhatsApp" ocupar a largura inteira
   do cartao em qualquer viewport, inclusive no desktop de 50rem. E mudanca
   visual real e e deliberada: ele e a acao final da pagina e nao divide mais a
   linha com o "Voltar". */
.qz__nav .btn{ flex:1; }
/* 19/08/2026: a auditoria dos "DOIS BOTOES NA MESMA LINHA" (docs 77 e 78)
   descrevia um problema que deixou de existir junto com o "Voltar" — nao ha
   mais dois itens flex disputando os 226,8px uteis de um cartao em 320px, nem
   quebra a evitar. Sairam com ela o flex-wrap, a base de 15rem do primario e as
   duas regras que tiravam a moldura do secundario abaixo de 559px.
   O min-width:0 FICA como rede: se um dia o rotulo do botao crescer, o texto
   quebra DENTRO dele em vez de vazar a borda dourada do cartao. */
@media (max-width: 559px){
  .qz__nav .qz__send{ min-width:0; }
}

/* Abaixo de 400px nem sem a moldura o rotulo inteiro cabe (precisaria de
   288,6px contra os 226,8px de 320px), entao " no WhatsApp" sai da VISTA e
   fica no nome acessivel. De 400px para cima — iPhone 12-14, 15 Pro, Pixel,
   XR/11, Pro Max — o rotulo inteiro cabe e nada e escondido. */
@media (max-width: 399px){
  .qz__send-mais{
    position:absolute; width:1px; height:1px;
    padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
}
/* A nota fecha o cartao — filete no topo para ela parar de boiar solta. */
.qz .qz__note{
  margin:0; padding-top:1.15rem;
  border-top:1px solid color-mix(in srgb,var(--fg) 14%, transparent);
  display:flex; align-items:center; gap:0.55em;
}
/* O `.qz__opt` do rotulo "(opcional)" saiu com o campo E-mail. Com ele morreu
   uma COLISAO DE NOME viva: a vitrine de SKU criava os cartoes com a mesma
   classe, mesma especificidade e mais adiante no arquivo — o "(opcional)"
   renderizava como cartao, com borda, fundo e padding proprios. Nao reaproveite
   este nome em rotulo nenhum.
   CORRIGIDO 31/07/2026: o hint era var(--gold-300), o dourado CLARO de usar
   sobre navy. Estes hints sao as mensagens de validacao do formulario —
   precisam ser legiveis. var(--accent) resolve sozinho: --gold-300 no navy,
   --gold-600 (o dourado AA) no creme. */
.qz__hint{ font-size:0.8rem; color:var(--accent); }
/* A dica da quantidade NAO mora dentro de um .field (que e flex com gap): e
   filha direta do <fieldset>, logo abaixo da grade de tiles, e .qz__tiles nao
   tem margem nenhuma. Dai o display:block com margem propria — e, por causa
   dele, o par [hidden] obrigatorio: mesma armadilha do .btn e do .qz__body. */
.qz__hint--group{ display:block; margin-top:0.7rem; }
.qz__hint--group[hidden]{ display:none; }
/* margin-top ZERADO em 19/08/2026: o consentimento era o ultimo item DENTRO do
   fieldset do passo 5 e precisava se descolar dos campos. Agora e filho direto
   do .qz__body, que ja da 1,4rem de gap — os 0,5rem viravam 1,9rem. */
.qz__lgpd{ display:flex; gap:0.6rem; align-items:flex-start; font-size:0.82rem; line-height:1.4; color:var(--muted); margin-top:0; cursor:pointer; }
.qz__lgpd input{ margin-top:0.15rem; accent-color:var(--gold); flex:none; }
.qz__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* O painel de recomendacao (.qz__rec, .qz__rec-spec) e a VITRINE DE OPCOES
   (.qz__opts, .qz__opt e os seis filhos -fig/-tag/-nome/-cod/-motivo/-aviso,
   mais as duas media queries de 640px e de reduced-motion) sairam em
   19/08/2026 junto com o motor de SKU do brindara.js: sem as perguntas de
   ocasiao, publico e rotina nao ha peca a indicar, e sem cartao nao ha foto —
   e por isso que imagens/produtos-ref ficou orfa. */
.qz__done{ text-align:center; padding:1rem 0; }
.qz__done-title{ font-family:var(--font-display); font-size:1.5rem; color:var(--fg); margin:0 0 0.4rem; }
.qz__done a{ justify-content:center; }
/* Com subtitulo os tiles ficam altos: duas colunas dentro de um cartao de 46rem
   so cabem confortavelmente acima de ~560px. Era 420px. */
@media (max-width:560px){ .qz__tiles{ grid-template-columns:1fr; } }
/* Os seis tiles do quiz sobre CREME (31/07/2026). O default e desenhado para
   navy: fundo --surface a 70% + borda --hairline. Sobre creme isso vira branco
   quase transparente com borda --stone-200: medido, 1,1:1 de fundo e 1,18:1 de
   borda contra o creme, quando a WCAG 1.4.11 pede 3:1 para limite de componente.
   Os tiles sao o mecanismo de conversao da pagina — nao podem quase sumir.
   Nenhuma cor sozinha chega a 3:1 sem sair da paleta, entao quem separa e a
   SOMBRA, mesma conclusao da auditoria do #beneficios (doc 36 §2.2): fundo
   branco cheio + shadow-sm + borda dourada.
   03/08/2026 (doc 51): escopado com :not(.qz--panel .qz__tile) porque o quiz do
   #orcamento passou a morar num cartao navy — la o default original vale de
   novo. A regra continua valendo para qualquer .qz futuro sobre creme puro. */
.section--cream .qz__tile:not(.qz--panel .qz__tile){
  background:var(--surface);
  border-color:var(--hairline-gold);
  box-shadow:var(--shadow-sm);
}
.section--cream .qz__tile:not(.qz--panel .qz__tile):hover{ border-color:var(--gold-600); box-shadow:var(--shadow-md); }
.section--cream .qz__tile:not(.qz--panel .qz__tile).is-sel{ border-color:var(--gold-600); background:color-mix(in srgb,var(--gold) 14%, var(--surface)); }

/* Tiles DENTRO do cartao navy. Medido sobre --navy-800: a borda a 48% de creme
   da 3,06:1 contra o preenchimento do tile e 3,90:1 contra o painel — os dois
   limites que a WCAG 1.4.11 cobra. O dourado fica reservado a hover e selecao,
   que e a linguagem do resto da pagina. */
.qz--panel .qz__tile{
  background:color-mix(in srgb,#FFFFFF 8%, transparent);
  border-color:color-mix(in srgb,#EDE7DA 48%, transparent);
  box-shadow:none;
}
.qz--panel .qz__tile:hover{ border-color:var(--gold-300); background:color-mix(in srgb,#FFFFFF 13%, transparent); }
.qz--panel .qz__tile.is-sel{ border-color:var(--gold-300); background:color-mix(in srgb,var(--gold) 22%, transparent); }
/* Os campos herdam o mesmo tratamento que .section--navy da a eles; como a
   secao aqui e creme, a regra precisa ser repetida no escopo do painel. Sem ela
   o input volta a --surface e sai branco-sobre-creme dentro do cartao navy. */
.qz--panel .field input,
.qz--panel .field select,
.qz--panel .field textarea{
  background:color-mix(in srgb, var(--navy-800) 70%, black 4%);
  border-color:color-mix(in srgb,#EDE7DA 40%, transparent);
  color:#EDE7DA;
}
.qz--panel .field label{ color:color-mix(in srgb,var(--fg) 80%, transparent); }
.qz--panel .qz__lgpd input{ accent-color:var(--gold-300); }

/* CORRIGIDO 19/08/2026 — NAVY SOBRE NAVY, 1,0:1. O .btn--primary nasce
   `--_bg: var(--navy)` (#12233F) e o painel e um gradiente de #14284A a #0E1B31:
   medido, a superficie do botao dava 1,0:1 contra o meio do gradiente e 1,05:1
   contra a base, e a borda tambem e --navy, entao nao separava nada. So o texto
   creme aparecia — o CTA lia como texto solto, nao como botao (WCAG 1.4.11).
   A correcao ja existia no arquivo, em `.section--navy .btn--primary` (l.302),
   mas o #orcamento e `section--cream`: quem e navy aqui e o CARTAO, e o seletor
   da secao nao o alcanca. Esta regra e a mesma inversao, no escopo do painel.
   Medido: dourado #C6A15B sobre o painel = 6,86:1 de superficie; navy sobre o
   dourado = 6,48:1 de texto. */
.qz--panel .btn--primary       { --_bg: var(--gold);     --_fg: var(--navy); --_bd: var(--gold); }
.qz--panel .btn--primary:hover { --_bg: var(--gold-300); --_fg: var(--navy); --_bd: var(--gold-300); }

/* CORRIGIDO 19/08/2026 — FOCO QUASE INVISIVEL DENTRO DO CARTAO. A regra global
   de foco (l.120) usa :where(), que ZERA a especificidade, entao o
   `.field input:focus{ outline:none }` da l.974 vence e apaga o anel dourado.
   Sobre creme o que restava (borda dourada + box-shadow a 22%) ainda funcionava;
   sobre o navy do painel, nao: medi 1,42:1 no anel e 1,97:1 na troca de borda,
   quando a WCAG 2.4.11 pede 3:1 na area do indicador.
   :focus-visible, e nao :focus — nao devolve o anel a quem clica com o mouse.
   Medido: --gold-300 (#D9BC77) sobre o painel = 8,53:1. */
.qz--panel .field input:focus-visible{
  outline: 2px solid var(--gold-300);
  outline-offset: 2px;
}

/* Estado de erro dos campos (19/08/2026). As dicas sao douradas — a mesma cor
   de realce do resto da pagina — entao nada no campo dizia "aqui esta o erro".
   A borda rosada e o unico sinal VISUAL de campo invalido; quem anuncia e o
   #qzErro (role=alert) mais o aria-invalid que o JS liga.
   Escopado ao painel de proposito: sobre o creme este mesmo rosa daria 1,94:1
   de borda, abaixo dos 3:1 da WCAG 1.4.11 — e o unico formulario da pagina
   mora dentro do .qz--panel. Se um dia nascer um .field sobre creme, a variante
   clara precisa ser medida antes de escrita. */
.qz--panel .field input[aria-invalid="true"]{ border-color:#F0B3B3; }

/* Resumo de erro. E a UNICA coisa que o leitor de tela ouve quando o envio e
   barrado: as dicas dos campos ja fazem parte da descricao deles (pela AccName
   1.2 o no referenciado por aria-describedby entra mesmo escondido), entao
   revela-las nao anuncia nada.
   Sem `display` de autor de proposito: assim o `[hidden]{display:none}` do
   user-agent basta e nao ha o par de regra a escrever — ao contrario do .btn
   (l.285) e do .qz__body (l.2059). NAO acrescente display aqui sem escrever o
   par [hidden] junto.
   Medido: #F0B3B3 sobre o painel = 9,32:1. */
.qz__erro{ margin:0; font-size:0.85rem; line-height:1.45; color:#F0B3B3; }
/* O #qzLgpdHint e filho direto do .qz__body, que ja da 1,4rem de gap — o
   margin-top de 0,7rem do .qz__hint--group viraria 2,1rem so nesta dica. */
#qzLgpdHint{ margin-top:0; }
/* .qz--panel .btn--secondary saiu em 19/08/2026: o "Voltar" era o unico
   .btn--secondary dentro do painel, e nao ha mais nenhum. */
/* ===== #clientes — Muro de marcas em CARDS BRANCOS (organizado, uniforme) ===== */
/* Menos respiro entre a faixa de confiança (header) e "Nossos Clientes" */
/* O padding-top proprio do #clientes (era clamp 2.75rem -> 5.25rem) FOI
   REMOVIDO no doc 59: com o --section-y padronizado em 4rem, ele so servia
   para deixar esta secao diferente de todas as outras. */
/* JUNCAO #clientes -> #orcamento (doc 58). Os dois sao creme — e a colisao 1
   registrada no CLAUDE.md. Sem troca de fundo nada marca onde uma acaba e a
   outra comeca, entao os dois padding-block de ate 8rem simplesmente se somam:
   ate 16rem (256px) de creme vazio, o maior vao da pagina depois que o CTA saiu
   daqui. Onde o limite e invisivel, um respiro so basta — nao dois.
   Escopado ao par: as outras secoes seguem com o --section-y cheio. */
#clientes{ padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
#orcamento{ padding-top: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.clients__marquee{ background:transparent; }
.clients .client-card{
  background:#fff;
  border:1px solid color-mix(in srgb, var(--stone-200) 82%, var(--navy));
  border-radius:var(--radius-lg);
  box-shadow:0 2px 12px -5px rgba(18,35,63,.16);
  min-width:clamp(150px,17vw,196px);
  min-height:clamp(92px,10vw,112px);
  gap:.45rem;
  padding:clamp(1rem,2vw,1.4rem);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.clients .client-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px -14px rgba(18,35,63,.4); border-color:var(--gold-300); }

/* Logo transparente centrado no card branco, altura óptica uniforme */
.clients .client-card__logo{ width:100%; height:clamp(38px,4.4vw,50px); display:flex; align-items:center; justify-content:center; }
.clients .client-card__img{ display:block; max-height:100%; max-width:82%; width:auto; height:auto; object-fit:contain; }
/* Fallback de nome (doc 60). Fica escondido por padrao e so aparece quando o
   arquivo do logo NAO existe — o script no fim do arquivo faz a troca. Serve
   para os clientes novos, cujos SVGs oficiais ainda nao foram entregues: o card
   mostra o nome em vez de um icone de imagem quebrada, e vira logo sozinho
   assim que o arquivo entrar em imagens/logos/. */
.client-card__name{
  display:none; font-family:var(--font-body); font-size:0.92rem; font-weight:700;
  letter-spacing:0.02em; color:var(--navy); text-align:center; line-height:1.2;
}
.client-card__logo.is-textual .client-card__img{ display:none; }
.client-card__logo.is-textual .client-card__name{ display:block; }
.clients .client-card--wide  .client-card__img{ max-width:90%; }
.clients .client-card--stack .client-card__logo{ height:clamp(46px,5.4vw,60px); }
.clients .client-card--stack .client-card__img{ max-width:60%; }

/* EMS: selo "Desde 2007" abaixo do logo (âncora de confiança) */
.clients .client-card--solid .client-card__seal{
  border:0; border-radius:0; border-top:0;
  margin:0; padding:.3rem 0 0;
  color:var(--gold-600); letter-spacing:.14em;
}

@media (prefers-reduced-motion:reduce){
  .clients .client-card{ transition:none; }
  .clients .client-card:hover{ transform:none; }
}


/* =========================================================================
   BLOCO: #clientes -> PAINEL NAVY "A marca por tras dos kits"
   Glassmorphism premium, beneficio-led. Append-only. Sem !important. Sem libs.
   Cole este bloco no fim do bloco de estilos, DEPOIS das regras do sistema (tokens,
   .eyebrow, .rule-gold, .container, .reveal, .section--navy).
   ========================================================================= */

/* Fallbacks locais caso os tokens globais nao estejam no escopo */
.brand-panel{
  --_navy:#12233F; --_navy-900:#0E1B31; --_navy-800:#14284A; --_navy-700:#1B3358;
  --_gold:#C6A15B; --_gold-300:#D9BC77; --_gold-600:#A9853F;
  --_cream:#F5EFE3; --_ink:#EDE7DA; --_accent:#D9BC77;
  --_r:4px; --_rlg:8px; --_ease:cubic-bezier(0.22,0.61,0.36,1);
  --_fdisplay:"Cormorant Garamond",Georgia,serif;
  --_fbody:"Manrope",system-ui,sans-serif;

  --_glass-bg:rgba(255,255,255,.065);
  --_glass-bg-hi:rgba(255,255,255,.10);
  --_glass-brd:rgba(255,255,255,.16);
  --_glass-brd-hi:rgba(255,255,255,.30);
}

/* ---- Painel: navy gradiente + glow dourado radial (barato, sem filter) --- */
.brand-panel{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-block:clamp(3.5rem,7vw,6rem);
  color:var(--_ink);
  font-family:var(--_fbody);
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(214,161,91,.20), transparent 55%),
    linear-gradient(155deg, var(--_navy-900) 0%, var(--_navy) 48%, var(--_navy-800) 100%);
}

/* ---- Blobs desfocados ATRAS dos cards (profundidade p/ o blur pegar) ----- */
.brand-panel__blob{
  position:absolute;
  z-index:-1;
  border-radius:50%;
  filter:blur(70px);
  opacity:.5;
  pointer-events:none;
}
.brand-panel__blob--gold{
  width:34rem;height:34rem;
  top:-8rem;right:-6rem;
  background:radial-gradient(circle, var(--_gold) 0%, rgba(198,161,91,0) 70%);
}
.brand-panel__blob--navy{
  width:30rem;height:30rem;
  bottom:-10rem;left:-8rem;
  background:radial-gradient(circle, var(--_navy-700) 0%, rgba(27,51,88,0) 70%);
  opacity:.65;
}

/* ---- Cabecalho ---------------------------------------------------------- */
.brand-panel__head{
  text-align:center;
  max-width:46rem;
  margin-inline:auto;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.brand-panel .eyebrow{ color:var(--_accent); }
.brand-panel .rule-gold{ margin-inline:auto; }
.brand-panel__title{
  font-family:var(--_fdisplay);
  font-weight:500;
  font-size:clamp(1.9rem,3.6vw,2.9rem);
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--_ink);
  margin:.4em 0 0;
  text-wrap:balance;
}
.brand-panel__intro{
  margin:clamp(.9rem,2vw,1.2rem) auto 0;
  max-width:40rem;
  font-size:clamp(1rem,1.6vw,1.08rem);
  line-height:1.6;
  color:rgba(237,231,218,.85); /* cream translucido — AA >7:1 sobre navy */
  text-wrap:pretty;
}

/* ---- Grid de glass cards: 2x2 desktop -> 1 col mobile ------------------- */
.brand-panel__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(.9rem,1.8vw,1.25rem);
  list-style:none;
  margin:0;
  padding:0;
}
@media (min-width:48rem){
  .brand-panel__grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---- GLASS CARD --------------------------------------------------------- */
.glass-card{
  position:relative;
  display:flex;
  gap:1rem;
  padding:clamp(1.25rem,2.4vw,1.6rem);
  border-radius:var(--_rlg);
  background:var(--_glass-bg);
  border:1px solid var(--_glass-brd);
  box-shadow:
    0 10px 30px -12px rgba(6,14,28,.55),
    inset 0 1px 0 rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  transition:transform .5s var(--_ease),
             border-color .5s var(--_ease),
             background .5s var(--_ease);
}
/* Luz no topo da borda (gradiente sutil sobre a borda base) */
.glass-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(160deg, var(--_glass-brd-hi), transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  pointer-events:none;
}
.glass-card:hover{
  transform:translateY(-4px);
  background:var(--_glass-bg-hi);
  border-color:var(--_glass-brd-hi);
}

/* Icone dourado stroke */
.glass-card .card__icon{
  flex:0 0 auto;
  width:2.75rem;height:2.75rem;
  display:grid;place-items:center;
  border-radius:50%;
  color:var(--_gold-300);
  background:rgba(214,161,91,.12);
  border:1px solid rgba(217,188,119,.35);
}
.glass-card .card__icon svg{ width:1.4rem;height:1.4rem; display:block; }
.glass-card .card__icon svg *{
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.glass-card__body{ min-width:0; }
.glass-card__title{
  font-family:var(--_fbody);
  font-weight:600;
  font-size:1.02rem;
  line-height:1.25;
  color:var(--_ink);
  margin:.15rem 0 .4rem;
}
.glass-card__desc{
  font-size:.9rem;
  line-height:1.5;
  color:rgba(237,231,218,.82); /* cream translucido — AA sobre navy, nunca cinza */
  margin:0;
}

/* ---- FAIXA NUMERICA (3 stat tiles, organizada embaixo) ----------------- */
.brand-stats{
  margin-top:clamp(1.5rem,3.2vw,2.25rem);
  display:grid;
  grid-template-columns:1fr;             /* mobile: empilhado, sem orfao */
  gap:1px;                               /* hairline via background do container */
  background:var(--_navy-700);
  border:1px solid var(--_navy-700);
  border-radius:var(--_rlg);
  overflow:hidden;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
@media (min-width:48rem){
  .brand-stats{ grid-template-columns:repeat(3,1fr); } /* 3 numeros lado a lado */
}
.stat-tile{
  padding:clamp(1.1rem,2.2vw,1.5rem) 1.1rem;
  background:rgba(20,40,74,.55);         /* navy-800 translucido */
  text-align:center;
}
.stat-tile__value{
  font-family:var(--_fdisplay);
  font-weight:600;
  font-size:clamp(2rem,4vw,2.7rem);
  line-height:1;
  color:var(--_gold-300);
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:.15em;
}
.stat-tile__unit{
  font-family:var(--_fbody);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--_gold-300);
  text-transform:none;
}
.stat-tile__label{
  margin:.55rem 0 0;
  font-size:.78rem;
  line-height:1.4;
  color:rgba(237,231,218,.78);
}

/* ---- Foco visivel (AA) -------------------------------------------------- */
.brand-panel a:focus-visible,
.brand-panel .glass-card:focus-within{
  outline:2px solid var(--_gold-300);
  outline-offset:3px;
  border-radius:var(--_rlg);
}

/* ---- @supports fallback: sem backdrop-filter => solido translucido ------ */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass-card{ background:rgba(20,40,74,.92); }        /* navy-800 solido */
  .brand-stats{ background:var(--_navy-700); }
  .stat-tile{ background:var(--_navy-800); }
}

/* ---- prefers-contrast: reforca bordas e texto -------------------------- */
@media (prefers-contrast:more){
  .glass-card{
    background:rgba(20,40,74,.94);
    border-color:rgba(255,255,255,.4);
  }
  .glass-card__desc,.stat-tile__label,.brand-panel__intro{ color:var(--_cream); }
}

/* ---- prefers-reduced-motion: sem transform/transicao ------------------- */
@media (prefers-reduced-motion:reduce){
  .glass-card{ transition:none; }
  .glass-card:hover{ transform:none; }
  .brand-panel .reveal{ transition:none; transform:none; opacity:1; }
}

/* ---- Mobile: reduz custo de blur nos blobs ----------------------------- */
@media (max-width:30rem){
  .brand-panel__blob{ filter:blur(48px); opacity:.4; }
}
/* Ajuste local: painel arredondado dentro da seção #clientes (creme) */
.brand-panel{ border-radius:14px; margin-top:clamp(2.5rem,5vw,4rem); }
.brand-panel__head .rule-gold--center{ margin-block:1rem 0; }
/* ===== A MOCHILA, POR INTEIRO (feature interativa: 360 + troca de cor) ===== */
.mpi{ position:relative; overflow:hidden; }
.mpi .h2 em{ color:var(--gold-300); font-style:italic; }
.mpi__head{ max-width:68rem; margin-inline:auto; }
.mpi__head .lead{ color:color-mix(in srgb, #EDE7DA 80%, var(--navy)); margin-top:1rem; }
/* ── compactação do cabeçalho (#por-inteiro), escopado só nesta seção ── */
/* O padding-top proprio do #por-inteiro (era clamp 3.5rem -> 6rem) FOI
   REMOVIDO no doc 59 pelo mesmo motivo: era o maior override da pagina e
   fazia esta secao respirar 50% mais que as vizinhas. Segue o --section-y. */
.mpi__head .eyebrow + .h2{ margin-top:.55rem; }
.mpi .rule-gold--center{ margin:.8rem auto 0; }
.mpi .mpi__head .lead{ margin-top:.55rem; font-size:clamp(1.05rem, .98rem + .4vw, 1.2rem); line-height:1.45; max-width:48ch; margin-inline:auto; }
.mpi .mpi__stage{ margin-top:clamp(1.75rem, 3vw, 2.75rem); }
/* título da seção em UMA linha no desktop (tamanho fluido pra caber sem overflow) */
@media (min-width:820px){
  .mpi #mpi-title{ white-space:nowrap; font-size:min(3rem, 3.9vw); line-height:1.05; }
}

.mpi__stage{
  margin-top:clamp(2.5rem,5vw,4rem);
  display:grid; gap:clamp(1.25rem,2.5vw,1.75rem); align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:960px){
  .mpi__stage{ grid-template-columns:minmax(0,0.82fr) minmax(340px,1.5fr) minmax(0,0.82fr); gap:clamp(2rem,3vw,3.25rem); }
}
.mpi__col{ display:flex; flex-direction:column; gap:clamp(1.6rem,2.8vw,2.6rem); justify-content:center; margin:0; padding:0; list-style:none; }

.mpi__product{ position:relative; perspective:1400px; display:flex; flex-direction:column; align-items:center; justify-content:center; order:-1; }
@media (min-width:960px){ .mpi__product{ order:0; } }
.mpi__stack{
  position:relative; width:100%; max-width:min(560px,100%); margin-inline:auto; aspect-ratio:1/1;
  transform-style:preserve-3d; will-change:transform;
  animation:mpi-turn 11s ease-in-out infinite;
}
@keyframes mpi-turn{ 0%,100%{ transform:rotateY(-12deg); } 50%{ transform:rotateY(12deg); } }
.mpi__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  opacity:0; transition:opacity .45s var(--ease); filter:drop-shadow(0 28px 38px rgba(0,0,0,.5));
}
.mpi__img.is-active{ opacity:1; }
.mpi__glow{ position:absolute; left:50%; bottom:10%; transform:translateX(-50%); width:70%; height:34%; z-index:0;
  background:radial-gradient(60% 60% at 50% 100%, rgba(214,161,91,.22), transparent 70%); filter:blur(12px); pointer-events:none; }
.mpi__hint{ margin-top:1rem; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:color-mix(in srgb, #EDE7DA 55%, var(--navy)); text-align:center; }

.mpi-card{
  position:relative; display:flex; gap:clamp(.7rem,1.2vw,.9rem); align-items:center; overflow:hidden;
  padding:clamp(.6rem,1vw,.8rem) clamp(.85rem,1.2vw,1.05rem);
  background:color-mix(in srgb, var(--navy-800) 82%, transparent);
  border:1px solid var(--navy-700); border-radius:var(--radius-lg);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.mpi-card:hover{ border-color:var(--hairline-gold); transform:translateY(-2px); }
/* corpo de texto à direita, centralizado verticalmente */
.mpi-card > div{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; padding:0; }
.mpi-card__icon{ flex:none; width:2.5rem; height:2.5rem; display:grid; place-items:center; border-radius:50%;
  color:var(--gold-300); background:color-mix(in srgb, var(--gold) 12%, transparent); border:1px solid var(--hairline-gold); }
.mpi-card__icon svg{ width:1.25rem; height:1.25rem; }
.mpi-card__title{ font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--gold-300); margin:0 0 .2rem; line-height:1.22; }
.mpi-card__desc{ font-size:.8rem; line-height:1.4; color:color-mix(in srgb, #EDE7DA 82%, var(--navy)); margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* ===== hotspots interativos: passar o mouse/focar num card congela o quadro da feature e mostra a seta cravada nela ===== */
.mpi-card{ cursor:pointer; }
.mpi-card:hover, .mpi-card:focus-visible, .mpi-card.is-active{ border-color:var(--hairline-gold); }
.mpi-card:focus-visible{ outline:2px solid var(--gold-300); outline-offset:2px; }
.mpi-card.is-active{ box-shadow:0 0 0 1px var(--hairline-gold), 0 18px 40px -24px rgba(0,0,0,.7); }
/* 05/08/2026 (doc 75): par CSS do achado P0 dos cards. Em aparelho de toque o
   :hover GRUDA depois do tap — a moldura dourada da regra acima ficava acesa num
   card que o JS ja desativou, e dois cards apareciam "ligados" ao mesmo tempo.
   Onde nao ha hover, o estado visual passa a depender so de .is-active. */
@media (hover:none){
  .mpi-card:hover{ border-color:var(--navy-700); }
  .mpi-card.is-active{ border-color:var(--hairline-gold); }
}

/* 04/08/2026 (doc 66): a camada de close-up (.mpi__cu / .show-cu) foi removida.
   Ela existia para os cards de USB e bolso lateral, e as imagens que ela carregava
   mostravam detalhes que o MC115P real nao tem. */
/* overlay SVG da seta/alvo */
.mpi__ann{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none;
  opacity:0; transition:opacity .3s var(--ease); overflow:visible; }
.mpi__stack.show-ann .mpi__ann{ opacity:1; }
.mpi__ann-line{ stroke:var(--gold-300); stroke-width:.6; stroke-dasharray:2 1.6; opacity:.85;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.mpi__ann-halo{ fill:none; stroke:var(--gold-300); stroke-width:.7; opacity:.9;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6)); animation:mpiPulse 1.8s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.mpi__ann-dot{ fill:var(--gold-300); filter:drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
@keyframes mpiPulse{ 0%,100%{ opacity:.9; } 50%{ opacity:.35; } }
@media (prefers-reduced-motion:reduce){ .mpi__ann-halo{ animation:none; } }

/* 04/08/2026: o seletor de cores (.mpi__colors / .mpi__swatches / .mpi-sw) foi
   removido — o MC115P so existe em preto no site do fornecedor. Ver doc 65. */

/* Ficha do MC115P: nome, referencia e os tres numeros, todos da pagina do
   fornecedor — ver docs 66 e 68. Nao acrescente linha aqui sem fonte na ficha.
   A hierarquia (nome em display, codigo em dourado espacado) copia de proposito
   a do proprio site do fornecedor, que poe o titulo e o "MC115P" logo abaixo. */
.mpi__ficha{
  margin:clamp(2.25rem,3.5vw,3rem) auto 0; width:100%;
  /* MESMA largura do .mpi__stack (o painel do video logo acima). Ficou 600 contra
     560 ate 04/08/2026: as bordas desalinhavam 20px de cada lado e lia como erro.
     Se mexer num, mexa no outro. Ver doc 70. */
  max-width:min(560px,100%);
  /* mesma superficie dos .mpi-card, para os tres blocos da secao serem da mesma familia */
  background:color-mix(in srgb, var(--navy-800) 82%, transparent);
  border:1px solid var(--navy-700); border-radius:var(--radius-lg);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 18px 40px -24px rgba(0,0,0,.55);
  padding:clamp(.95rem,1.6vw,1.2rem) clamp(1.1rem,2vw,1.5rem);
}
/* O nome e ETIQUETA, nao titulo: uma linha so, corpo pequeno, sem competir com os
   numeros. A versao anterior usava display 1,7rem em duas linhas e esticava o card
   uns 45px sem necessidade — ver doc 69. Os herois do bloco sao os tres numeros. */
.mpi__ficha-id{ margin:0; display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:center; gap:.35rem .7rem; text-align:center; }
.mpi__ficha-nome{ font-size:.82rem; line-height:1.4;
  color:color-mix(in srgb,#EDE7DA 72%,var(--navy)); }
.mpi__ficha-ref{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-300); padding-left:.7rem; border-left:1px solid var(--hairline-gold); }
.mpi__ficha hr{ border:0; border-top:1px solid var(--hairline-gold); width:100%;
  margin:clamp(.7rem,1.2vw,.9rem) 0 0; }
/* TERCOS EXATOS. Antes cada celula tinha largura intrinseca com gap fixo, entao os
   dois filetes caiam em pontos arbitrarios (a de dimensoes e muito mais larga que as
   outras duas) e a fila lia torta. flex:1 1 0 crava os filetes em 1/3 e 2/3, e o
   respiro passa a ser padding DENTRO da celula, que nao desloca o filete. Doc 70. */
.mpi__specs{
  margin:clamp(.7rem,1.2vw,.9rem) 0 0; width:100%;
  display:flex; align-items:stretch; justify-content:center;
  gap:0; list-style:none; padding:0;
}
.mpi__specs li{ flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.2rem; text-align:center; padding:0 clamp(.4rem,1vw,.75rem); }
.mpi__specs li + li{ border-left:1px solid var(--hairline-gold); }
/* Cormorant vem com algarismos OLD-STYLE: o 9 e o 3 descem abaixo da linha de base e
   o numero "pula" — errado para leitura de ficha tecnica, onde a fila tem que assentar.
   lnum forca os algarismos de caixa alta. */
.mpi__specs b{ font-family:var(--font-display); font-weight:600; line-height:1;
  font-size:clamp(1.1rem,1.8vw,1.4rem); color:var(--gold-300);
  font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1; }
.mpi__specs span{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:color-mix(in srgb,#EDE7DA 62%,var(--navy)); }
@media (max-width:640px){
  .mpi__ficha{ max-width:420px; }
  /* os tres tercos SAO mantidos no mobile — empilhar em 3 linhas encompridava o card,
     que e justamente o que o dono pediu para evitar. Em vez disso a fonte cede: a
     celula mais larga ("46 x 32 x 13 cm") cabe em 1/3 de 420px com folga a 1rem. */
  .mpi__specs li{ padding:0 .35rem; }
  .mpi__specs b{ font-size:1rem; }
  .mpi__specs span{ font-size:.6rem; letter-spacing:.06em; }
  /* quando o nome quebra para a linha de cima, o filete vertical da referencia
     fica solto no meio do nada — vira separador so quando cabem lado a lado */
  .mpi__ficha-ref{ border-left:0; padding-left:0; }
}

@media (prefers-reduced-motion:reduce){
  .mpi__stack{ animation:none; transform:none; }
  .mpi-card:hover{ transform:none; }
}
/* model-viewer (360 real) sobre o stack; fallback = imagens coloridas */
.mpi__mv{ position:absolute; inset:0; width:100%; height:100%; opacity:0;
  transition:opacity .5s var(--ease); --poster-color:transparent; background:transparent; }
.mpi__mv.is-ready{ opacity:1; }
.mpi__stack.mv-on{ animation:none; transform:none; }
.mpi__stack.mv-on .mpi__img{ opacity:0; }
/* thumbnails de close-up nos callouts. 04/08/2026 (doc 67): uma imagem fixa por card,
   256x256 JPG, geradas a partir da foto real do MC115P. Nao trocam mais de cor. */
.mpi-card__thumb{ position:relative; flex:none; width:clamp(2.9rem,3.4vw,3.4rem); height:clamp(2.9rem,3.4vw,3.4rem);
  align-self:center; overflow:hidden; border-radius:50%; border:1px solid var(--hairline-gold); background:var(--navy-900); }
.mpi-thumb-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s var(--ease); }
.mpi-thumb-img.is-active{ opacity:1; }
/* figura do interior semiaberto (mostra as funcionalidades) */
.mpi__interior{ margin:clamp(2.5rem,5vw,4rem) auto 0; max-width:860px; text-align:center; }
.mpi__interior img{ width:100%; height:auto; filter:drop-shadow(0 30px 52px rgba(0,0,0,.55)); }
.mpi__interior figcaption{ margin-top:.4rem; font-size:1rem; line-height:1.55; color:color-mix(in srgb,#EDE7DA 82%,var(--navy)); max-width:54ch; margin-inline:auto; }
.mpi__interior figcaption .eyebrow{ display:block; color:var(--gold-300); margin-bottom:.5rem; justify-content:center; }
/* ===== centro: painel do vídeo 360 (fundo navy + profundidade) ===== */
.mpi__product{ perspective:none; }
.mpi__stack{ animation:none; transform:none; aspect-ratio:1/1; border-radius:clamp(14px,2.4vw,22px); isolation:isolate; background:transparent; }
.mpi__stack::before{ content:""; position:absolute; inset:-12% -12% -8%; z-index:-1; border-radius:inherit; pointer-events:none;
  background:radial-gradient(58% 54% at 50% 42%, color-mix(in srgb, var(--gold-300) 24%, transparent) 0%, color-mix(in srgb, var(--gold-300) 9%, transparent) 40%, transparent 72%); filter:blur(30px); opacity:.9; }
.mpi__video{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; opacity:1; border-radius:inherit;
  background:var(--navy-900); box-shadow:0 26px 60px -26px rgba(0,0,0,.6), 0 1px 0 0 color-mix(in srgb, var(--gold-300) 14%, transparent); transition:opacity .3s var(--ease); }
.mpi__stack::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 46%, transparent 60%, color-mix(in srgb, var(--navy-900) 55%, transparent) 100%); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gold-300) 8%, transparent); }
@media (prefers-reduced-motion:reduce){ .mpi__stack::before{ filter:blur(22px); opacity:.7; } }
@media (max-width:640px){ .mpi__stack{ border-radius:16px; } .mpi__stack::before{ inset:-8%; filter:blur(20px); } }

/* =====================================================================
   INTEGRACAO WORDPRESS — o unico CSS que nao vem do index.html
   ===================================================================== */

/* A barra de administracao do WP e position:fixed no topo e empurra o <html>
   com margin-top. O .site-header e position:sticky com top:0, entao sem isto
   ele grudaria DEBAIXO da barra. So afeta usuario logado. */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* body_class() do WP adiciona classes ao <body>; nenhuma tem estilo aqui, mas
   garantimos que nada herde margem/padding de tema pai ou plugin. */
body { margin: 0; }