/* ==========================================================================
   site.css — MegaBloko · camada de marca (Nível 2, tokenizada)
   Arquétipo: Técnico-blueprint · consome tokens-ds.css via ponte tokens.css.
   Zero cor/fonte hardcoded (só grafismo SVG e opacidades derivam de rgba
   já ancoradas nos HEX da marca, documentadas no DS §3.2/§5.3).
   ========================================================================== */

/* ---------- Tipografia base ---------------------------------------------- */
body{ font-family:var(--font-body); color:var(--color-ink); background:var(--color-bg);
  font-size:var(--text-body); line-height:var(--leading-body); }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--color-ink); text-wrap:balance; }
.h-display{ font-size:var(--text-display); font-weight:var(--weight-display);
  line-height:var(--leading-display); letter-spacing:var(--tracking-display); }
.h1{ font-size:var(--text-h1); font-weight:var(--weight-h1); line-height:var(--leading-h1);
  letter-spacing:var(--tracking-h1); }
.h2{ font-size:var(--text-h2); font-weight:var(--weight-h2); line-height:var(--leading-h2);
  letter-spacing:var(--tracking-h2); }
.h3{ font-size:var(--text-h3); font-weight:var(--weight-h3); line-height:var(--leading-h3); }
.lead{ font-size:var(--text-lead); font-weight:var(--weight-lead); line-height:var(--leading-lead);
  color:var(--color-ink-muted); }
.mono{ font-family:var(--font-mono); font-size:var(--text-mono); letter-spacing:var(--tracking-mono);
  line-height:var(--leading-mono); }
.muted{ color:var(--color-ink-muted); }
::selection{ background:var(--color-accent); color:var(--color-on-accent); }

/* ---------- Eyebrow (mono, bullet quadrado âmbar) — override base.css ----- */
.eyebrow{ display:inline-flex; align-items:center; gap:.55em; font-family:var(--font-mono);
  font-size:var(--text-eyebrow); font-weight:var(--weight-mono-strong); text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow); color:var(--color-bg-brand); margin-bottom:var(--space-4); }
.eyebrow::before{ content:""; width:7px; height:7px; background:var(--color-accent);
  border-radius:var(--radius-sm); flex:none; }
.section--dark .eyebrow, .eyebrow--on-dark{ color:var(--color-on-brand); }
/* variante "dois domos" (motivo do encaixe) — dois tiques verticais ladeando */
.eyebrow--ticks{ padding-inline:0; }

/* ---------- Botões — override raio (DS proíbe pill) + primário âmbar ------ */
.btn{ border-radius:var(--radius-md); font-family:var(--font-body); font-weight:var(--weight-body-semibold);
  letter-spacing:.01em; padding:.95em 1.6em; }
.btn--primary{ background:var(--color-accent); color:var(--color-on-accent); }
.btn--primary:hover{ background:var(--color-accent-hover); color:var(--color-on-accent);
  transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn--ghost{ border:1.5px solid var(--color-bg-brand); color:var(--color-bg-brand); background:transparent; }
.btn--ghost:hover{ background:color-mix(in srgb, var(--color-bg-brand) 8%, transparent); }
.btn--on-dark{ border:1.5px solid var(--color-on-brand); color:var(--color-on-brand); background:transparent; }
.btn--on-dark:hover{ background:rgba(255,255,255,.12); }
.btn--lg{ padding:1.1em 2em; font-size:1.03rem; }
.btn svg{ width:1.05em; height:1.05em; }

/* ---------- Container ---------------------------------------------------- */
.container{ width:100%; max-width:var(--container-max); margin-inline:auto; padding-inline:var(--px); }
.section{ padding-block:clamp(56px, 9vw, 112px); position:relative; }
.section--surface{ background:var(--color-surface); }
.section--soft{ background:var(--color-surface-2); }
.section--dark{ background:var(--color-bg-brand); color:var(--color-on-brand); }
.section--dark h1,.section--dark h2,.section--dark h3{ color:var(--color-on-brand); }
.section--dark .lead,.section--dark .muted{ color:var(--color-on-brand-muted); }
.sec-head{ max-width:60ch; margin-bottom:clamp(var(--space-8),4vw,var(--space-16)); }
.sec-head .lead{ margin-top:var(--space-4); }

/* Grafismo blueprint: SEM grade de fundo (quadriculado removido a pedido).
   As seções ficam com fundo chapado; a assinatura vive nos conectores/cotas SVG. */
.blueprint-grid{ position:relative; }
.blueprint-grid::before{ display:none; }
.blueprint-grid > *{ position:relative; z-index:1; }
/* marca d'água do hexágono (referência timbrado.png) */
.hex-watermark{ position:absolute; pointer-events:none; opacity:.06; z-index:0;
  width:min(52%,560px); right:-4%; bottom:-6%; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{ position:sticky; top:0; z-index:50; height:var(--header-h); display:flex; align-items:center;
  background:color-mix(in srgb, var(--color-bg-brand) 94%, transparent); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--color-surface-brand-2);
  transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease; }
/* Páginas com hero: header TRANSPARENTE e SOBREPOSTO (fixed), pra o teal do hero
   ir até o topo da página (senão a faixa atrás do header sticky mostra o off-white do body). */
body:has(.hero) .site-header{ position:fixed; top:0; left:0; right:0;
  background:transparent; backdrop-filter:none; border-bottom-color:transparent; }
/* hero encosta no topo, atrás do header fixo */
body:has(.hero) .hero{ margin-top:0; }
/* O JS marca .is-solid ao rolar para as seções (senão o menu claro some no fundo branco). */
body:has(.hero) .site-header.is-solid{ background:color-mix(in srgb, var(--color-bg-brand) 92%, transparent);
  backdrop-filter:blur(10px); border-bottom-color:var(--color-surface-brand-2); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-8); }
.site-header .logo{ height:34px; width:auto; }
.site-nav{ display:flex; align-items:center; gap:var(--space-8); }
.site-nav a{ font-size:.92rem; color:var(--color-on-brand); font-weight:var(--weight-body-medium);
  letter-spacing:.005em; }
.site-nav a:not(.btn):hover{ color:var(--color-accent); }
.site-nav .btn{ padding:.6em 1.15em; font-size:.9rem; }
[data-menu-toggle] span{ background:var(--color-on-brand); }
@media (max-width:900px){
  /* Off-canvas fica DENTRO da viewport (right:0) e some por visibility/opacity —
     nunca translateX(100%): elemento fixed offscreen não é cortado por overflow-x:clip
     e inflaria o scrollWidth (overflow horizontal). */
  .site-nav{ position:fixed; top:0; right:0; bottom:0; width:min(82vw,340px); max-width:100vw; background:var(--color-bg-brand);
    flex-direction:column; align-items:flex-start; gap:var(--space-2); padding:calc(var(--header-h) + 24px) var(--space-8) var(--space-8);
    visibility:hidden; opacity:0; pointer-events:none; box-shadow:var(--shadow-lg); z-index:60;
    transform:none; /* anula translateX(100%) do [data-menu] (components.css) — evita overflow */
    transition:opacity .28s var(--ease-out), visibility .28s var(--ease-out); }
  .site-nav.is-open{ visibility:visible; opacity:1; pointer-events:auto; transform:none; }
  .site-nav a{ width:100%; padding:var(--space-3) 0; font-size:1.05rem; border-bottom:1px solid var(--color-surface-brand-2); }
  .site-nav .btn{ margin-top:var(--space-4); width:100%; font-size:1rem; }
}

/* ==========================================================================
   HERO — FICHA TÉCNICA DE ENGENHARIA (blueprint recombinado, base hero-05 +
   composição split de hero-08). Fundo teal escuro, grade SVG que desenha, e a
   PRANCHA DO PRODUTO com COTAS/DIMENSÕES reais (1,60 m · 0,80 m · 2.400 kg ·
   fck 25 MPa) em IBM Plex Mono âmbar. NÃO é foto full-bleed com overlay.
   ========================================================================== */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:clip;
  background:var(--color-bg-brand); color:var(--color-on-brand); isolation:isolate;
  padding-block:clamp(var(--space-24),13vh,var(--space-32)) clamp(var(--space-16),9vh,var(--space-24)); }
/* grade blueprint de fundo que desenha (stroke-dashoffset via [data-draw]) */
.hero__bg{ position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; }
/* grade de fundo e hexágono removidos (quadriculado + losango) */
.hero__bg line{ display:none; }
.hero__bg .accent{ display:none; }
.hero__vign{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 92% at 80% 42%, rgba(0,0,0,.30), transparent 62%); }
.hero__grid{ position:relative; z-index:2; width:100%; display:grid;
  grid-template-columns:1.02fr .98fr; gap:clamp(var(--space-8),5vw,var(--space-16)); align-items:center; }
.hero__eyebrow{ color:var(--color-on-brand); }
.hero h1{ color:var(--color-on-brand); max-width:16ch; margin-top:var(--space-4);
  font-size:clamp(2.15rem, 1.6rem + 2.1vw, 3.3rem); font-weight:var(--weight-display);
  line-height:1.05; letter-spacing:var(--tracking-display); }
.hero .lead{ color:var(--color-on-brand-muted); max-width:48ch; margin-top:var(--space-5);
  font-size:clamp(1rem, .96rem + .25vw, 1.1rem); }
.hero__bullets{ list-style:none; padding:0; margin:var(--space-8) 0 0; display:grid; gap:var(--space-3); max-width:52ch; }
.hero__bullets li{ position:relative; padding-left:var(--space-8); color:var(--color-on-brand);
  font-size:1.02rem; line-height:1.5; }
.hero__bullets li::before{ content:""; position:absolute; left:0; top:.5em; width:14px; height:2px;
  background:var(--color-accent); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-8); align-items:center; }
.hero__specs{ display:flex; flex-wrap:wrap; gap:var(--space-4) var(--space-6); margin-top:var(--space-12);
  padding-top:var(--space-6); border-top:1px solid rgba(185,210,209,.28); }

/* Prancha técnica do produto (à direita) — folha de desenho com cotas âmbar */
.hero__plate{ position:relative; border:1px solid rgba(185,210,209,.34); border-radius:var(--radius-md);
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.10));
  padding:clamp(8px,1.4vw,16px); overflow:visible; }
/* bloco 3D interativo: fica sobre a moldura de cotas, gira em 3D (só o bloco, cotas ficam paradas) */
.hero__block-stage{ position:absolute; left:50%; top:44%; width:52%;
  transform:translate(-50%,-50%); perspective:900px; z-index:3; pointer-events:none; }
.hero__block{ display:block; width:100%; height:auto; transform-style:preserve-3d; will-change:transform;
  filter:drop-shadow(0 20px 26px rgba(0,0,0,.38)); }
@media (prefers-reduced-motion: reduce){ .hero__block{ transform:none !important; } }
.hero__plate::before,.hero__plate::after{ content:""; position:absolute; width:15px; height:15px;
  border:2px solid var(--color-accent); pointer-events:none; }
.hero__plate::before{ top:7px; left:7px; border-right:0; border-bottom:0; }
.hero__plate::after{ bottom:7px; right:7px; border-left:0; border-top:0; }
.hero__plate svg{ width:100%; height:auto; display:block; aspect-ratio:5/4; }
.hero__plate .cota{ stroke:var(--color-accent); stroke-width:1.4; fill:none; }
.hero__plate .cota-thin{ stroke:var(--color-accent); stroke-width:1; fill:none; opacity:.85; }
.hero__plate .cota-txt{ fill:var(--color-accent); font-family:var(--font-mono); font-weight:600;
  font-size:17px; letter-spacing:.02em; }
.hero__plate .cota-sub{ fill:var(--color-on-brand-muted); font-family:var(--font-mono);
  font-size:11px; letter-spacing:.12em; }
.hero__plate .plate-frame{ fill:rgba(246,244,240,.045); stroke:rgba(185,210,209,.22); stroke-width:1; }
.hero__specs .spec{ display:flex; flex-direction:column; gap:2px; }
.hero__specs .spec b{ font-family:var(--font-mono); font-weight:var(--weight-mono-strong);
  font-size:1.05rem; color:var(--color-on-brand); letter-spacing:var(--tracking-mono); }
.hero__specs .spec span{ font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow); color:var(--color-on-brand-muted); }

/* Selo técnico (badges mono) */
.badges{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
.badge{ font-family:var(--font-mono); font-size:var(--text-mono); font-weight:var(--weight-mono-strong);
  text-transform:uppercase; letter-spacing:var(--tracking-mono); padding:.5em .8em; border-radius:var(--radius-sm);
  border:1px solid var(--color-concrete-dark); color:var(--color-ink); background:var(--color-surface-2);
  display:inline-flex; align-items:center; gap:.5em; }
.badge::before{ content:""; width:6px; height:6px; background:var(--color-accent); border-radius:var(--radius-sm); }
.section--dark .badge{ color:var(--color-on-brand); background:var(--color-surface-brand-1);
  border-color:var(--color-surface-brand-2); }

/* ==========================================================================
   INCÔMODO — editorial 2 colunas + foto real (relatability reskin)
   ========================================================================== */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(var(--space-8),5vw,var(--space-24)); align-items:center; }
.split--rev{ grid-template-columns:.95fr 1.05fr; }
.split__media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--color-concrete); }
.split__media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.split__media .tag-corner{ position:absolute; left:0; bottom:0; font-family:var(--font-mono);
  font-size:.68rem; text-transform:uppercase; letter-spacing:var(--tracking-eyebrow);
  background:var(--color-bg-brand); color:var(--color-on-brand); padding:.5em .8em; }
.prose > * + *{ margin-top:var(--space-4); }
.prose p{ color:var(--color-ink-muted); font-size:1.05rem; line-height:1.7; }
.prose strong{ color:var(--color-ink); font-weight:var(--weight-body-semibold); }
.rule-accent{ width:44px; height:var(--accent-rule-width); background:var(--color-accent); margin-bottom:var(--space-6); }

/* pain list (hairline, marcador técnico — não é card de ícone) */
.painlist{ list-style:none; padding:0; margin:var(--space-6) 0 0; display:grid; gap:0; }
.painlist li{ display:flex; gap:var(--space-4); padding:var(--space-4) 0; border-top:1px solid var(--color-concrete);
  align-items:baseline; }
.painlist li:last-child{ border-bottom:1px solid var(--color-concrete); }
.painlist .k{ font-family:var(--font-mono); font-size:.72rem; color:var(--color-accent-hover);
  letter-spacing:var(--tracking-mono); flex:none; width:2.2em; }
.painlist .v{ color:var(--color-ink-muted); line-height:1.55; }

/* ==========================================================================
   ANATOMIA DO SISTEMA — ASSINATURA (Uni/Mega/Trava encaixam, SVG desenha)
   ========================================================================== */
.anatomy{ position:relative; }
.anatomy__stage{ position:relative; display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(var(--space-4),3vw,var(--space-12)); align-items:stretch; }
.anatomy__lines{ position:absolute; inset:0; z-index:0; pointer-events:none; width:100%; height:100%; }
.anatomy__lines path,.anatomy__lines line,.anatomy__lines polyline{ fill:none; stroke:var(--color-accent);
  stroke-width:1.5; }
.piece{ position:relative; z-index:1; background:var(--color-surface); border:1px solid var(--color-concrete);
  border-radius:var(--radius-lg); padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-4);
  transition:border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); }
.piece:hover{ border-color:var(--color-accent); transform:translateY(-3px); }
.piece__fig{ background:var(--color-surface); border-radius:var(--radius-md); aspect-ratio:1/1;
  display:grid; place-items:center; overflow:hidden; }
.piece__fig img{ width:82%; height:82%; object-fit:contain; }
.piece__idx{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; color:var(--color-accent-hover); }
.piece h3{ font-size:var(--text-h3); }
.piece__role{ color:var(--color-ink-muted); font-size:.98rem; line-height:1.55; }
.piece__spec{ font-family:var(--font-mono); font-size:.72rem; color:var(--color-ink);
  letter-spacing:var(--tracking-mono); border-top:1px solid var(--color-concrete); padding-top:var(--space-3);
  margin-top:auto; }
.anatomy__note{ margin-top:var(--space-8); font-family:var(--font-mono); font-size:.75rem;
  text-transform:uppercase; letter-spacing:var(--tracking-eyebrow); color:var(--color-ink-muted);
  display:flex; align-items:center; gap:var(--space-3); }
.anatomy__note::before{ content:""; width:28px; height:1px; background:var(--color-concrete-dark); }

/* ==========================================================================
   APLICAÇÕES / SETORES — PAINÉIS DE IMAGEM EXPANSÍVEIS com FOTO REAL
   (base sub-segmentos-04). Faixa de painéis verticais; o painel em hover/foco
   expande e revela a legenda. PROIBIDO icon-grid. Ganchos: data-reveal.
   ========================================================================== */
.spx__rail{ display:flex; gap:14px; margin-top:clamp(var(--space-8),4vw,var(--space-12));
  height:clamp(380px,54vh,540px); }
.spx__panel{ position:relative; flex:1 1 0; min-width:0; border-radius:var(--radius-md); overflow:hidden;
  isolation:isolate; cursor:pointer; border:1px solid var(--color-concrete);
  transition:flex-grow .5s var(--ease-out); box-shadow:var(--shadow-sm); }
.spx__panel:hover,.spx__panel:focus-within,.spx__panel:focus-visible{ flex-grow:2.7; outline:none; }
.spx__panel:focus-visible{ box-shadow:0 0 0 3px var(--color-accent); }
.spx__panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  transition:transform .6s var(--ease-out); }
.spx__panel:hover img,.spx__panel:focus-within img,.spx__panel:focus-visible img{ transform:scale(1.05); }
.spx__panel::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(14,82,84,0) 30%, rgba(14,82,84,.90) 100%); }
.spx__cap{ position:absolute; left:0; right:0; bottom:0; padding:clamp(16px,2vw,24px); color:var(--color-on-brand); }
.spx__idx{ font-family:var(--font-mono); font-size:.72rem; font-weight:var(--weight-mono-strong);
  letter-spacing:var(--tracking-eyebrow); color:var(--color-accent); }
.spx__cap h3{ color:var(--color-on-brand); margin:6px 0 0; font-size:var(--text-h3);
  font-weight:var(--weight-h3); white-space:nowrap; }
.spx__cap p{ font-size:.95rem; line-height:1.5; color:var(--color-on-brand); max-width:36ch;
  opacity:0; max-height:0; overflow:hidden; margin-top:0;
  transition:opacity .4s var(--ease-out), max-height .4s var(--ease-out), margin-top .4s var(--ease-out); }
.spx__panel:hover .spx__cap p,.spx__panel:focus-within .spx__cap p,.spx__panel:focus-visible .spx__cap p{
  opacity:1; max-height:140px; margin-top:8px; }

/* ==========================================================================
   COMPARATIVO — EXATAMENTE 2 CARDS (canônica comparativo-01, mercado negativado)
   Card do mercado: tracejado, apagado, line-through. Card da marca: sólido,
   filete âmbar 3px no topo, ✓. NUNCA 3 cards, NUNCA tabelinha.
   ========================================================================== */
.cmp2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(var(--space-6),3vw,var(--space-8));
  align-items:center; }
.cmp2__card{ border-radius:var(--radius-lg); padding:clamp(var(--space-6),3vw,var(--space-8));
  display:flex; flex-direction:column; gap:var(--space-4); }
.cmp2__label{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow); }
.cmp2__card h3{ font-size:var(--text-h3); }
.cmp2__list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--space-3); }
.cmp2__list li{ display:flex; gap:.6em; font-size:.98rem; line-height:1.5; }
.cmp2__list li .mk{ flex:none; font-family:var(--font-mono); font-weight:var(--weight-mono-strong); }
/* card do mercado — apagado, tracejado, riscado */
.cmp2__mkt{ border:1.5px dashed var(--color-concrete-dark); background:var(--color-surface); opacity:.9; }
.cmp2__mkt .cmp2__label{ color:var(--color-ink-muted); }
.cmp2__mkt h3{ color:var(--color-ink-muted); }
.cmp2__mkt .cmp2__list li{ color:var(--color-n500,var(--color-ink-muted)); text-decoration:line-through;
  text-decoration-color:var(--color-concrete-dark); }
.cmp2__mkt .cmp2__list li .mk{ color:var(--color-danger); text-decoration:none; }
/* card da marca — sólido teal, filete âmbar 3px no topo, ✓ */
.cmp2__us{ position:relative; border:1px solid var(--color-bg-brand); background:var(--color-bg-brand);
  color:var(--color-on-brand); box-shadow:var(--shadow-lg); }
.cmp2__us::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--color-accent);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.cmp2__us .cmp2__label{ color:var(--color-accent); }
.cmp2__us h3{ color:var(--color-on-brand); }
.cmp2__us .cmp2__list li{ color:var(--color-on-brand); }
.cmp2__us .cmp2__list li .mk{ color:var(--color-accent); }
.cmp2__verdict{ margin-top:var(--space-2); font-family:var(--font-mono); font-size:.78rem;
  letter-spacing:var(--tracking-mono); }
.cmp2__mkt .cmp2__verdict{ color:var(--color-danger); }
.cmp2__us .cmp2__verdict{ color:var(--color-accent); }
/* linha de "o que fica de fora" abaixo */
.compare-foot{ margin-top:var(--space-8); font-family:var(--font-mono); font-size:.82rem;
  color:var(--color-ink-muted); letter-spacing:var(--tracking-mono); display:flex; gap:var(--space-3);
  align-items:flex-start; max-width:70ch; }
.compare-foot::before{ content:"//"; color:var(--color-accent-hover); flex:none; }
.section--dark .compare-foot{ color:var(--color-on-brand-muted); }

/* ==========================================================================
   PROVA TÉCNICA / SPECS — faixa teal, mono, contador, barra
   ========================================================================== */
.specs{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(var(--space-8),5vw,var(--space-24)); align-items:center; }
.specstat{ display:grid; gap:var(--space-6); }
.specstat__big{ font-family:var(--font-mono); font-weight:var(--weight-mono-strong);
  font-size:clamp(3rem,7vw,5rem); line-height:1; color:var(--color-on-brand); letter-spacing:-.01em; }
.specstat__big small{ font-size:.32em; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;
  display:block; margin-top:var(--space-3); color:var(--color-on-brand-muted); font-weight:var(--weight-mono); }
.specbar{ height:6px; background:var(--color-surface-brand-1); border-radius:var(--radius-sm); overflow:hidden; }
.specbar > i{ display:block; height:100%; width:0; background:var(--color-accent);
  transition:width 1.1s var(--ease-out); }
.specbar.is-in > i{ width:88%; }
.specfig{ border:1px solid var(--color-surface-brand-2); border-radius:var(--radius-lg); overflow:hidden;
  background:var(--color-surface-brand-1); }
.specfig img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.specrow{ display:flex; flex-wrap:wrap; gap:var(--space-4) var(--space-8); margin-top:var(--space-6);
  padding-top:var(--space-6); border-top:1px solid var(--color-surface-brand-2); }
.specrow .item{ font-family:var(--font-mono); font-size:.8rem; letter-spacing:var(--tracking-mono);
  color:var(--color-on-brand-muted); }
.specrow .item b{ color:var(--color-on-brand); display:block; font-size:1rem; }

/* ==========================================================================
   PROVA / NÚMEROS — QUADRO 2×2 (base numeros-05) em bloco escuro.
   Só a célula-herói (900 blocos/mês) vira número gigante; as outras são
   dado técnico + rótulo curto. Ganchos: data-reveal / data-count / data-suffix.
   ========================================================================== */
.nq{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:clamp(var(--space-8),4vw,var(--space-12));
  background:var(--color-surface-brand-2); border:1px solid var(--color-surface-brand-2);
  border-radius:var(--radius-md); overflow:hidden; }
.nq__cell{ background:var(--color-bg-brand); padding:clamp(28px,4vw,52px); min-height:180px;
  display:flex; flex-direction:column; justify-content:center; }
.nq__cell--hero{ background:var(--color-surface-brand-1); position:relative; }
.nq__cell--hero::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--color-accent); }
.nq__n{ font-family:var(--font-display); font-weight:var(--weight-display); line-height:1;
  font-size:clamp(2rem,3.4vw,3rem); letter-spacing:-.02em; color:var(--color-on-brand); }
.nq__cell--hero .nq__n{ font-size:clamp(3.4rem,7vw,5.2rem); color:var(--color-accent); }
.nq__lab{ margin-top:var(--space-3); color:var(--color-on-brand-muted); font-size:.98rem; max-width:26ch; }
.nq__mono{ font-family:var(--font-mono); font-weight:var(--weight-mono-strong); }
@media (max-width:640px){ .nq{ grid-template-columns:1fr; } }

/* ==========================================================================
   PORTFÓLIO — MOSAICO BENTO 12 COLUNAS (base portfolio-06) + lightbox.
   Grid assimétrico par (6 tiles); overlay com setor + título; abre a galeria.
   ========================================================================== */
.fb{ display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:clamp(150px,18vw,215px);
  gap:clamp(12px,1.5vw,20px); margin-top:clamp(var(--space-8),4vw,var(--space-12)); }
.fb__tile{ position:relative; }
/* tiling perfeito 12/6/1 col, sem órfão: A grande à esquerda, dois B empilham
   à direita, três C na base */
.fb__tile--a{ grid-column:span 6; grid-row:span 2; }
.fb__tile--b{ grid-column:span 6; grid-row:span 1; }
.fb__tile--c{ grid-column:span 4; grid-row:span 1; }
.fb__trigger{ position:relative; display:block; width:100%; height:100%; padding:0; cursor:pointer;
  border-radius:var(--radius-lg); overflow:hidden; background:var(--color-surface);
  border:1px solid var(--color-concrete); }
.fb__trigger:focus-visible{ outline:3px solid var(--color-accent); outline-offset:3px; }
.fb__img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease-out); }
.fb__trigger:hover .fb__img{ transform:scale(1.06); }
.fb__cap{ position:absolute; left:0; right:0; bottom:0; padding:36px 16px 14px; text-align:left;
  display:flex; flex-direction:column; gap:2px; color:var(--color-on-brand);
  background:linear-gradient(to top, rgba(14,82,84,.9), transparent); }
.fb__over{ font-family:var(--font-mono); font-size:.66rem; font-weight:var(--weight-mono-strong);
  text-transform:uppercase; letter-spacing:var(--tracking-eyebrow); color:var(--color-accent); }
.fb__title{ font-family:var(--font-display); font-weight:var(--weight-h3); font-size:1.1rem; }
@media (max-width:900px){
  .fb{ grid-template-columns:repeat(6,1fr); grid-auto-rows:clamp(140px,24vw,180px); }
  .fb__tile--a{ grid-column:span 3; grid-row:span 2; }
  .fb__tile--b{ grid-column:span 3; grid-row:span 1; }
  .fb__tile--c{ grid-column:span 2; grid-row:span 1; }
}
@media (max-width:560px){
  .fb{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .fb__tile--a,.fb__tile--b,.fb__tile--c{ grid-column:span 1; grid-row:auto; }
  .fb__img{ aspect-ratio:3/2; height:auto; }
}

/* ==========================================================================
   PROCESSO / CTA-INTERMEDIÁRIO — split com render + botão
   ========================================================================== */
.midcta{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(var(--space-8),5vw,var(--space-24)); align-items:center; }
.midcta__media{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--color-concrete);
  background:var(--color-surface); }
.midcta__media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.midcta__list{ list-style:none; padding:0; margin:var(--space-6) 0; display:grid; gap:var(--space-3); }
.midcta__list li{ position:relative; padding-left:var(--space-8); color:var(--color-ink-muted); line-height:1.55; }
.midcta__list li::before{ content:""; position:absolute; left:0; top:.55em; width:14px; height:2px;
  background:var(--color-accent); }

/* ==========================================================================
   FAQ — accordion tokenizado
   ========================================================================== */
.faq{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(var(--space-8),5vw,var(--space-24)); align-items:start; }
.faq__aside{ position:sticky; top:calc(var(--header-h) + 24px); }
.faq__list{ border-top:1px solid var(--color-concrete); }
.faq__item{ border-bottom:1px solid var(--color-concrete); }
.faq__q{ width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-6); padding:var(--space-6) 0; font-family:var(--font-display); font-weight:var(--weight-h4);
  font-size:1.1rem; color:var(--color-ink); }
.faq__q .pm{ position:relative; flex:none; width:20px; height:20px; }
.faq__q .pm::before,.faq__q .pm::after{ content:""; position:absolute; background:var(--color-accent);
  left:50%; top:50%; transition:transform var(--duration-base) var(--ease-out); }
.faq__q .pm::before{ width:16px; height:2px; transform:translate(-50%,-50%); }
.faq__q .pm::after{ width:2px; height:16px; transform:translate(-50%,-50%); }
.faq__q[aria-expanded="true"] .pm::after{ transform:translate(-50%,-50%) scaleY(0); }
.faq__a{ color:var(--color-ink-muted); line-height:1.7; }
.faq__a p{ padding:0 0 var(--space-6); max-width:64ch; }

/* ==========================================================================
   CTA FINAL — passo a passo "Como funciona" (3 etapas, linha que desenha)
   ========================================================================== */
.finalcta{ background:var(--color-bg-brand); color:var(--color-on-brand); }
.finalcta__head{ max-width:60ch; margin-bottom:clamp(var(--space-12),6vw,var(--space-24)); }
.finalcta__head h2{ color:var(--color-on-brand); }
.finalcta__head .lead{ color:var(--color-on-brand-muted); margin-top:var(--space-4); }
.steps{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-8);
  margin-bottom:clamp(var(--space-12),6vw,var(--space-16)); }
.steps__line{ position:absolute; left:0; right:0; top:19px; height:2px; background:var(--color-surface-brand-2);
  z-index:0; transform-origin:left; }
.steps__line > i{ display:block; height:100%; width:0; background:var(--color-accent);
  transition:width 1.1s var(--ease-out); }
.steps.is-in .steps__line > i{ width:100%; }
.step{ position:relative; z-index:1; display:flex; flex-direction:column; gap:var(--space-3); }
.step__n{ width:40px; height:40px; border-radius:var(--radius-full); display:grid; place-items:center;
  font-family:var(--font-mono); font-weight:var(--weight-mono-strong); background:var(--color-bg-brand);
  border:2px solid var(--color-accent); color:var(--color-on-brand); }
.step h3{ color:var(--color-on-brand); font-size:var(--text-h4); }
.step p{ color:var(--color-on-brand-muted); font-size:.95rem; line-height:1.55; }
.finalcta__act{ display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:center; }
.finalcta__act .note{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow); color:var(--color-on-brand-muted); }

/* ==========================================================================
   COMO FUNCIONA (Variação B) — stepper horizontal claro, linha que preenche
   ========================================================================== */
.flow{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-8); }
.flow__line{ position:absolute; left:0; right:0; top:19px; height:2px; background:var(--color-concrete); z-index:0; }
.flow__line > i{ display:block; height:100%; width:0; background:var(--color-accent);
  transition:width 1.1s var(--ease-out); }
.flow.is-in .flow__line > i{ width:100%; }
.fstep{ position:relative; z-index:1; display:flex; flex-direction:column; gap:var(--space-3); }
.fstep__n{ width:40px; height:40px; border-radius:var(--radius-full); display:grid; place-items:center;
  font-family:var(--font-mono); font-weight:var(--weight-mono-strong); background:var(--color-bg);
  border:2px solid var(--color-accent); color:var(--color-bg-brand); }
.fstep h3{ font-size:var(--text-h4); }
.fstep p{ color:var(--color-ink-muted); font-size:.96rem; line-height:1.55; }

/* ==========================================================================
   DIFERENCIAIS (Variação B) — lista numerada editorial (não é card de ícone)
   ========================================================================== */
.difflist{ border-top:1px solid var(--color-concrete); }
.diffrow{ display:grid; grid-template-columns:auto 1fr; gap:var(--space-6) var(--space-8);
  align-items:baseline; padding:var(--space-6) 0; border-bottom:1px solid var(--color-concrete);
  transition:padding-left var(--duration-base) var(--ease-out); }
.diffrow:hover{ padding-left:var(--space-4); }
.diffrow__n{ font-family:var(--font-mono); font-size:.8rem; letter-spacing:var(--tracking-eyebrow);
  color:var(--color-accent-hover); padding-top:.4em; }
.diffrow h3{ font-size:var(--text-h3); margin-bottom:var(--space-2); }
.diffrow p{ color:var(--color-ink-muted); line-height:1.6; max-width:56ch; }
@media (max-width:560px){ .diffrow{ grid-template-columns:1fr; gap:var(--space-2); } }

/* ==========================================================================
   REGIÃO / LOGÍSTICA — split texto + raio SVG (só na Variação B)
   ========================================================================== */
.region{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(var(--space-8),5vw,var(--space-24)); align-items:center; }
.region__map{ position:relative; aspect-ratio:1/1; display:grid; place-items:center;
  border:1px solid var(--color-concrete); border-radius:var(--radius-lg); background:var(--color-surface-2);
  overflow:hidden; }
.region__map svg{ width:100%; height:100%; }
.region__facts{ list-style:none; padding:0; margin:var(--space-6) 0 0; display:grid; gap:0; }
.region__facts li{ display:flex; justify-content:space-between; gap:var(--space-6); padding:var(--space-4) 0;
  border-top:1px solid var(--color-concrete); font-family:var(--font-mono); font-size:.85rem;
  letter-spacing:var(--tracking-mono); }
.region__facts li:last-child{ border-bottom:1px solid var(--color-concrete); }
.region__facts .lbl{ color:var(--color-ink-muted); }
.region__facts .val{ color:var(--color-ink); font-weight:var(--weight-mono-strong); }

/* ==========================================================================
   FOOTER (LP: nome, e-mail, endereço — SEM WhatsApp/telefone)
   ========================================================================== */
.site-footer{ background:var(--color-ink); color:var(--color-on-brand); padding-block:var(--space-16) var(--space-8); }
.site-footer .container{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--space-12); }
.site-footer .logo{ height:34px; width:auto; margin-bottom:var(--space-4); }
.site-footer p,.site-footer a{ color:var(--color-on-brand-muted); font-size:.9rem; line-height:1.7; }
.site-footer a:hover{ color:var(--color-accent); }
.footcol h4{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow); color:var(--color-on-brand); margin-bottom:var(--space-4); }
.footcol ul{ list-style:none; padding:0; display:grid; gap:var(--space-2); }
.site-footer__base{ margin-top:var(--space-12); padding-top:var(--space-6);
  border-top:1px solid rgba(255,255,255,.12); display:flex; flex-wrap:wrap; gap:var(--space-4) var(--space-8);
  justify-content:space-between; }
.site-footer__base p{ font-size:.8rem; }

/* Banner de cookies — override raio dos botões (DS proíbe pill) */
[data-cookie]{ border-radius:var(--radius-lg); font-family:var(--font-body); }
[data-cookie] button{ border-radius:var(--radius-md); font-family:var(--font-body); }
[data-cookie-accept]{ background:var(--color-accent); color:var(--color-on-accent); }
[data-cookie-reject]{ border:1px solid var(--color-concrete-dark); color:var(--color-ink); }
[data-cookie] .ck-title{ font-weight:var(--weight-body-semibold); color:var(--color-ink); margin-bottom:6px; }

/* ==========================================================================
   GRAFISMO QUE DESENHA (assinatura) — hero blueprint + conectores da anatomia
   Usa pathLength="1" nas geometrias; anima stroke-dashoffset. Gancho: .is-in
   (motion.js adiciona a [data-timeline]; reduced-motion mostra estado final).
   ========================================================================== */
.hero__bg [data-draw],
.hero__plate [data-draw],
.anatomy__lines [data-draw]{ stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset var(--duration-hero-draw) var(--ease-out); }
.hero.is-in .hero__bg [data-draw],
.hero.is-in .hero__plate [data-draw],
.anatomy__stage.is-in .anatomy__lines [data-draw]{ stroke-dashoffset:0; }
/* fail-safe sem JS: cotas/grade aparecem desenhadas (a .hero nunca ganha .is-in sem observer) */
html:not(.js) .hero__bg [data-draw],
html:not(.js) .hero__plate [data-draw],
html:not(.js) .anatomy__lines [data-draw]{ stroke-dashoffset:0 !important; }
.hero.is-in .hero__plate [data-draw]{ transition-delay:.35s; }
.anatomy__stage.is-in .anatomy__lines [data-draw]{ transition-duration:900ms; }
@media (prefers-reduced-motion: reduce){
  .hero__bg [data-draw],.hero__plate [data-draw],.anatomy__lines [data-draw]{
    stroke-dashoffset:0 !important; transition:none !important; }
  .specbar > i{ width:88% !important; transition:none !important; }
  .steps__line > i{ width:100% !important; transition:none !important; }
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width:1024px){
  .anatomy__stage{ grid-template-columns:repeat(3,1fr); } /* mantém 3 no tablet largo */
}
@media (max-width:960px){
  .hero{ min-height:auto; }
  .hero__grid{ grid-template-columns:1fr; gap:clamp(var(--space-8),6vw,var(--space-12)); }
  .hero__plate{ order:-1; max-width:520px; }
}
@media (max-width:900px){
  .split,.split--rev,.specs,.midcta,.faq,.region{ grid-template-columns:1fr; }
  .split--rev .split__media{ order:-1; }
  .faq__aside{ position:static; }
  .cmp2{ grid-template-columns:1fr; }
  .cmp2__mkt{ order:2; }
  .anatomy__stage{ grid-template-columns:1fr; }
  .anatomy__lines{ display:none; } /* conectores SVG só no layout horizontal */
  .spx__rail{ flex-direction:column; height:auto; gap:14px; }
  .spx__panel{ flex:none; height:220px; }
  .spx__panel:hover,.spx__panel:focus-within,.spx__panel:focus-visible{ flex-grow:0; }
  .spx__cap p{ opacity:1; max-height:160px; margin-top:8px; }
  .steps,.flow{ grid-template-columns:1fr; gap:var(--space-6); }
  .steps__line,.flow__line{ display:none; }
  .site-footer .container{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .hero__specs{ gap:var(--space-4) var(--space-4); }
  .site-footer .container{ grid-template-columns:1fr; gap:var(--space-8); }
  .hero__cta .btn{ width:100%; }
}

/* ==========================================================================
   Cursor circular do portfólio (pf15) — segue o mouse com leve atraso e
   ANIMA a transição entre o cursor normal e o de "arrastar" (scale/opacity).
   ========================================================================== */
.pf-cursor{ position:fixed; top:0; left:0; z-index:90; pointer-events:none; will-change:transform; }
.pf-cursor__ring{ width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%;
  background:color-mix(in srgb, var(--color-bg-brand) 76%, transparent); backdrop-filter:blur(1.5px);
  border:1.5px solid rgba(255,255,255,.88); color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.35);
  transition:opacity .28s ease, transform .36s cubic-bezier(.2,.9,.25,1); }
.pf-cursor__ring.is-visible{ opacity:1; transform:scale(1); }
.pf-cursor__ring.is-grabbing{ transform:scale(.8); background:color-mix(in srgb, var(--color-accent) 88%, transparent); border-color:rgba(255,255,255,.6); }
.pf-cursor__ring svg{ width:24px; height:15px; }
@media (hover:none),(pointer:coarse){ .pf-cursor{ display:none !important; } }
@media (prefers-reduced-motion: reduce){ .pf-cursor__ring{ transition:opacity .2s ease; } }

/* Ícone de expansão (abre lightbox) no canto sup. direito de cada obra do portfólio */
#portfolio15 .pf15__expand{ position:absolute; top:12px; right:12px; z-index:3; width:38px; height:38px;
  display:grid; place-items:center; border:0; border-radius:50%; cursor:pointer; color:#fff;
  background:color-mix(in srgb, var(--color-bg-brand) 58%, transparent); backdrop-filter:blur(2px);
  opacity:.82; transition:opacity .2s ease, background .2s ease, transform .2s ease; }
#portfolio15 .pf15__card:hover .pf15__expand, #portfolio15 .pf15__expand:focus-visible{ opacity:1; }
#portfolio15 .pf15__expand:hover{ background:var(--color-accent); color:var(--color-bg-brand); transform:scale(1.08); }
#portfolio15 .pf15__expand:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; }
#portfolio15 .pf15__expand svg{ width:18px; height:18px; }

/* Botão flutuante do Merlin com a cor de ação da marca (âmbar).
   Obs: o ícone servido é um logo verde OPACO do WhatsApp — a cor da marca aparece
   só como aro (~21% da área). Trocar o ícone é no painel do gomerlin. */
.merlin-button{ background:var(--color-accent) !important; }

/* ==========================================================================
   Faixa de CTA inline (conversão em momentos de alta intenção pela página).
   Sóbria, on-brand: eyebrow mono + headline display + botão âmbar, filete de
   assinatura no topo. Fundo teal (section--dark) pra destacar do conteúdo claro.
   ========================================================================== */
.cta-band{ background:var(--color-bg-brand); color:var(--color-on-brand); text-align:center;
  padding-block:clamp(44px,6vw,72px); border-top:2px solid var(--color-accent); position:relative; }
.cta-band__in{ display:flex; flex-direction:column; align-items:center; gap:clamp(16px,2vw,22px); }
.cta-band .eyebrow{ color:var(--color-on-brand); margin:0; }
.cta-band__h{ font-family:var(--font-display); font-weight:800; line-height:1.1; letter-spacing:-.01em;
  font-size:clamp(1.5rem,3.2vw,2.3rem); color:var(--color-on-brand); max-width:22ch; margin:0; text-wrap:balance; }