/* ==========================================================================
   FORCEFIRE EXTINTORES — Design System v2
   Editorial industrial: preto dominante, cards autorais, aço como complemento,
   vermelho como acento cortante (não brilho genérico).
   ========================================================================== */

:root {
  /* Vermelho da marca */
  --red: #D90429;
  --red-light: #EF233C;
  --red-dark: #A6031F;
  --red-ink: #7A0217;
  --fire-orange: #F97316;

  /* Preto dominante + aço (complemento) */
  --ink: #08080A;          /* preto quase-puro — seções escuras */
  --ink-900: #0B0B0E;      /* cards escuros */
  --ink-800: #131318;      /* superfícies elevadas no escuro */
  --ink-700: #1C1C22;
  --hair-dark: rgba(255,255,255,0.08);  /* hairline sobre preto */

  --navy: #0f172a;         /* aço escuro — mantido como complemento */
  --navy-800: #1e293b;
  --navy-700: #334155;

  --amber: #f59e0b;
  --whats: #0B7A44;        /* verde WhatsApp aprovado em contraste (texto branco) */
  --whats-bright: #12A15A;
  --emerald: #22c55e;

  --white: #ffffff;
  --paper: #F5F6F8;        /* seções claras */
  --paper-2: #ECEEF1;
  --line: #E2E5EA;         /* hairline claro */
  --line-strong: #0A0A0C;  /* traço forte editorial */

  --text: #0A0A0C;
  --text-soft: #3F444C;
  --text-mut: #6B7280;
  --text-inv: #F5F6F8;
  --text-inv-mut: #9AA1AC;

  /* Tipografia */
  --font-head: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* Métricas */
  --container: 1200px;
  --r: 6px;                /* raio editorial contido (não "card de IA") */
  --r-lg: 10px;
  --topbar-h: 40px;
  --header-h: 82px;
  --header-h-scrolled: 66px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0.05, 0.28, 1);   /* in-out natural p/ carrossel */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --slide-dur: 5000ms;

  /* Elevação por contorno + sombra curta e densa (não "template soft") */
  --lift: 0 1px 0 rgba(10,10,12,0.04), 0 12px 28px -14px rgba(8,8,10,0.45);
  --lift-dark: 0 1px 0 rgba(255,255,255,0.04), 0 24px 50px -20px rgba(0,0,0,0.85);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); scrollbar-gutter: stable; }
body {
  font-family: var(--font-body);
  color: var(--text-soft);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.12; color: var(--text); letter-spacing: -0.02em; }
::selection { background: var(--red); color: #fff; }

.container { width: min(100% - 48px, var(--container)); margin-inline: auto; }

:focus-visible { outline: 2px solid var(--red-light); outline-offset: 3px; border-radius: 2px; }
.hero :focus-visible, .footer :focus-visible, .selo :focus-visible,
.lanes :focus-visible, .dif :focus-visible, .topbar :focus-visible { outline-color: #fff; }

/* Skip link */
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 2000;
  transform: translateY(-180%);
  background: var(--red); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 14px;
  padding: 12px 18px; border-radius: var(--r);
  box-shadow: 0 10px 30px rgba(217,4,41,0.4);
  transition: transform 0.3s var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- Barra de progresso ---------- */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 1002;
  background: transparent; pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%; width: 0;
  background: var(--red);
}

/* Rótulo mono reutilizável (kickers, contadores, tags) — assinatura editorial */
.section-kicker, .lane-label, .beneficio-proof, .show-count,
.stats span, .info-list b, .footer-col h4 { font-family: var(--font-mono); }

/* ==========================================================================
   TOP BAR
   ========================================================================== */
.topbar {
  background: var(--ink);
  color: #b6bcc6;
  font-size: 12.5px;
  min-height: var(--topbar-h);
  display: flex; align-items: center;
  position: relative; z-index: 60;
  border-bottom: 1px solid rgba(217,4,41,0.35);
}
.topbar .container { width: calc(100% - 48px); }
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-block: 7px; flex-wrap: wrap;
}
.topbar-right { display: flex; align-items: center; gap: 22px; }
.topbar-item {
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap; transition: color 0.25s ease;
  letter-spacing: 0.01em;
}
.topbar-item svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--red-light); }
.topbar-item:hover { color: #fff; }
.topbar-whats svg { color: #2fd076; }
.topbar-insta svg { color: #e879f9; }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.header {
  position: sticky; top: 0; z-index: 950;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease;
}
.header.is-scrolled {
  background: rgba(255, 255, 255, 0.95);
  border-bottom-color: rgba(10,10,12,0.1);
  box-shadow: 0 10px 30px -18px rgba(8,8,10,0.5);
}
.header-inner {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  transition: height 0.35s var(--ease-out);
}
.header.is-scrolled .header-inner { height: var(--header-h-scrolled); }

/* Marca: lockup oficial completo (símbolo + FORCEFIRE + EXTINTORES E
   SEGURANÇA) numa única arte. Antes era símbolo + wordmark remontado em
   tipografia, que não correspondia à marca real do cliente. */
.brand { display: flex; align-items: center; padding-right: 4px; }
.brand-logo {
  height: 56px; width: auto; display: block;
  transition: height 0.35s var(--ease-out), transform 0.35s var(--ease-spring);
}
.brand-logo:hover { transform: scale(1.04); }
.header.is-scrolled .brand-logo { height: 46px; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav-link {
  position: relative;
  padding: 10px 13px;
  font-size: 14.5px; font-weight: 500; color: var(--text-soft);
  transition: color 0.25s ease;
}
.nav-link::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 6px; height: 2px;
  background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.nav-link:hover { color: var(--text); }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--text); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: 14px; }

/* Hamburger */
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 11px; border-radius: var(--r);
  background: var(--ink);
}
.nav-toggle span {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: #fff;
  transition: transform 0.35s var(--ease-out), opacity 0.25s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   BOTÕES — sólidos, contorno preto opcional, varredura discreta
   ========================================================================== */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 24px; border-radius: var(--r);
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
  line-height: 1; white-space: nowrap;
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
  will-change: transform;
}
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -140%;
  width: 55%; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-20deg);
}
.btn:hover::after { animation: btnSheen 0.85s var(--ease-out); }
@keyframes btnSheen { from { left: -140%; } to { left: 170%; } }

/* Brilho diagonal que varre UMA VEZ a palavra de destaque (em) quando ela
   aparece — mesma ideia do sheen dos botões, mas recortado no próprio texto
   via background-clip:text. Em repouso (antes/depois da animação) o gradiente
   fica 100% "currentColor", então não sobra nenhum traço de corte/faixa —
   só acontece durante o lampejo. Aplicado como classe utilitária nos vários
   `em` do site, cada um mantendo sua própria cor (via currentColor). */
.em-shine {
  background-image: linear-gradient(115deg, currentColor 45%, #fff 50%, currentColor 55%);
  background-size: 300% 100%;
  /* sem repeat: por padrão o fundo tiled repetia o degradê a cada 150 pontos
     de background-position, e a posição de "repouso" que eu tinha escolhido
     caía bem numa dessas repetições — a faixa nunca sumia de vez. Sem repeat,
     0% e 100% são comprovadamente limpos (calibrado visualmente), com a
     faixa de brilho passando pelo meio do trajeto entre os dois. */
  background-repeat: no-repeat;
  background-position: 0% 0; /* repouso limpo, antes da 1ª varredura */
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes emShine {
  0% { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}
/* O brilho só dispara quando a palavra REALMENTE aparece pro usuário — não
   na carga da página. Nos títulos com scroll-reveal (.is-visible, aplicada
   pelo IntersectionObserver), dispara logo depois do texto assentar. No
   hero, dispara só quando o slide correspondente fica ativo, com atraso
   maior pra esperar a linha terminar de subir (lineUp) antes de brilhar. */
.is-visible .em-shine {
  animation: emShine 1.3s var(--ease-out) 1 both;
  animation-delay: 0.55s;
}
.slide.is-active .em-shine {
  animation: emShine 1.3s var(--ease-out) 1 both;
  animation-delay: 1.5s;
}
/* !important de propósito: .slide.is-active .em-shine tem 3 classes de
   especificidade (maior que as 2 de .motion-off .em-shine), então sem isso
   o interruptor de QA perderia a briga e a animação continuaria rodando. */
.motion-off .em-shine { animation: none !important; background-position: 100% 0 !important; }
.btn > * { position: relative; z-index: 1; }
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; transition: transform 0.3s var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn:hover svg:last-child { transform: translateX(4px); }
.btn-lg { padding: 17px 30px; font-size: 16px; }

.btn-primary {
  background: var(--red); color: #fff;
  box-shadow: 0 12px 26px -12px rgba(217,4,41,0.9), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-primary:hover { background: var(--red-dark); box-shadow: 0 16px 30px -12px rgba(217,4,41,0.95); transform: translateY(-2px); }

.btn-danger {
  background: var(--red); color: #fff;
  box-shadow: 0 12px 26px -12px rgba(217,4,41,0.9), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-danger:hover { background: var(--red-dark); transform: translateY(-2px); }

.btn-whats {
  background: var(--whats); color: #fff;
  box-shadow: 0 12px 26px -12px rgba(11,122,68,0.9), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-whats:hover { background: #0a6b3c; box-shadow: 0 16px 30px -12px rgba(11,122,68,0.95); transform: translateY(-2px); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255,255,255,0.5); transform: translateY(-2px); }

.btn-outline {
  background: transparent; color: var(--text);
  border: 1.5px solid var(--line-strong);
}
.btn-outline:hover { background: var(--line-strong); color: #fff; transform: translateY(-2px); }

.btn-light {
  background: #fff; color: var(--red);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.5);
}
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.55); }

/* ==========================================================================
   HERO SLIDER
   ========================================================================== */
.hero {
  position: relative;
  height: max(660px, calc(100svh - var(--topbar-h) - var(--header-h)));
  max-height: 880px;
  overflow: hidden;
  background: var(--ink);
}
.hero-embers { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0.75; }
.hero-slider, .slide { position: absolute; inset: 0; }
.slide {
  opacity: 0; visibility: hidden;
  transform: scale(1.035);
  transition: opacity 1.5s var(--ease-io), transform 1.6s var(--ease-io), visibility 0s linear 1.5s;
  will-change: opacity, transform;
}
.slide.is-active {
  opacity: 1; visibility: visible; transform: scale(1);
  transition: opacity 1.5s var(--ease-io), transform 1.6s var(--ease-io);
  z-index: 2;
}
.slide-bg { position: absolute; inset: 0; overflow: hidden; }
.slide-bg img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.16);
  transition: transform 9s ease-out;
  will-change: transform;
}
.slide.is-active .slide-bg img { transform: scale(1); }
.slide-bg-light { background: #fff; }
.slide-bg-light img { object-position: right center; }

.slide-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(78deg, rgba(6,6,8,0.96) 0%, rgba(6,6,8,0.82) 40%, rgba(6,6,8,0.28) 76%, rgba(6,6,8,0.4) 100%),
    linear-gradient(0deg, rgba(6,6,8,0.6) 0%, transparent 32%);
}
.slide-overlay-red {
  background:
    linear-gradient(78deg, rgba(40,4,10,0.96) 0%, rgba(8,8,10,0.86) 42%, rgba(8,8,10,0.3) 78%, rgba(8,8,10,0.45) 100%),
    linear-gradient(0deg, rgba(8,8,10,0.6) 0%, transparent 30%);
}
.slide-overlay-light {
  background:
    linear-gradient(82deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.9) 42%, rgba(255,255,255,0.2) 78%, rgba(255,255,255,0) 100%),
    linear-gradient(0deg, rgba(245,246,248,0.82) 0%, transparent 26%);
}

.slide-content {
  position: relative; z-index: 4; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding-bottom: 150px; max-width: none;
}
.slide-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-weight: 500; font-size: 12.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #fca5a5; margin-bottom: 22px;
  opacity: 0; transform: translateY(18px);
}
.slide-kicker-dark { color: var(--red-dark); }
.kicker-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red-light);
  box-shadow: 0 0 0 4px rgba(239,35,60,0.22);
  animation: kickerPulse 2s infinite;
}
@keyframes kickerPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(239,35,60,0.28); }
  50% { box-shadow: 0 0 0 7px rgba(239,35,60,0.06); }
}
.slide-title {
  font-size: clamp(34px, 5.3vw, 64px);
  font-weight: 800; color: #fff;
  letter-spacing: -0.035em; margin-bottom: 22px;
}
.slide-title em {
  /* cor-base: usada como fallback (browsers sem background-clip:text) e
     como currentColor no gradiente de brilho do .em-shine — não sobrescrever
     background aqui, é o .em-shine que cuida disso. */
  font-style: normal;
  color: var(--red-light);
  padding-bottom: 0;
}
.slide-title-dark { color: var(--text); }
.slide-title-dark em { color: var(--red); }
/* padding-bottom dá espaço pro overflow:hidden não cortar descendentes
   (g, p, q, ç...) — a linha usa line-height:1.12 (herdado de h1-h4), mais
   apertado que o espaço real que esses caracteres precisam. A margin-bottom
   negativa cancela esse respiro extra, então o espaçamento entre as 3 linhas
   do título continua igual. */
.h-line { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.h-line > span { display: block; transform: translateY(112%); }

.slide-text {
  max-width: 560px;
  font-size: clamp(15.5px, 1.4vw, 18px);
  color: rgba(240, 242, 246, 0.9);
  margin-bottom: 34px;
  opacity: 0; transform: translateY(18px);
}
.slide-text-dark { color: var(--text-soft); }
.slide-ctas { display: flex; gap: 14px; flex-wrap: wrap; opacity: 0; transform: translateY(18px); }

.slide.is-active .h-line > span { animation: lineUp 0.95s var(--ease-out) forwards; }
.slide.is-active .h-line:nth-child(1) > span { animation-delay: 0.15s; }
.slide.is-active .h-line:nth-child(2) > span { animation-delay: 0.28s; }
.slide.is-active .h-line:nth-child(3) > span { animation-delay: 0.41s; }
.slide.is-active .slide-kicker { animation: fadeUp 0.7s var(--ease-out) 0.1s forwards; }
.slide.is-active .slide-text { animation: fadeUp 0.8s var(--ease-out) 0.6s forwards; }
.slide.is-active .slide-ctas { animation: fadeUp 0.8s var(--ease-out) 0.74s forwards; }
@keyframes lineUp { to { transform: translateY(0); } }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* UI do slider */
.hero-ui {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 104px; z-index: 7;
  display: flex; align-items: center;
}
.hero-dots { display: flex; align-items: center; gap: 26px; }
.hero-dot {
  display: flex; flex-direction: column; gap: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-mono);
  transition: color 0.3s ease;
}
.hero-dot i { font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; }
.hero-dot b {
  display: block; width: 64px; height: 2px; border-radius: 0;
  background: rgba(255, 255, 255, 0.22); overflow: hidden;
}
.hero-dot b s { display: block; height: 100%; width: 0; background: var(--red-light); text-decoration: none; }
.hero-dot.is-active { color: #fff; }
.hero-dot.is-active b s { animation: dotFill var(--slide-dur) linear forwards; }
@keyframes dotFill { from { width: 0; } to { width: 100%; } }

.hero.on-light .hero-dot { color: rgba(10,10,12,0.6); }
.hero.on-light .hero-dot.is-active { color: var(--text); }
.hero.on-light .hero-dot b { background: rgba(10,10,12,0.14); }

/* ==========================================================================
   SISTEMA DE ÍCONES — caixa near-black com canto cortado + hairline vermelho.
   Compartilhado por diferenciais, benefícios e serviços = "sistema", não stock.
   ========================================================================== */
.dif-icon, .beneficio-icon, .servico-icon {
  position: relative;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--ink-900);
  color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 74%, 74% 100%, 0 100%); /* canto inferior-direito cortado */
  border-left: 2px solid var(--red);
  transition: transform 0.4s var(--ease-spring), background 0.4s ease;
}
.dif-icon::after, .beneficio-icon::after, .servico-icon::after {
  content: ""; position: absolute; right: 6px; top: 6px;
  width: 5px; height: 5px; background: var(--red); border-radius: 50%;
  opacity: 0.85; transition: transform 0.4s var(--ease-out);
}
.dif-icon svg, .beneficio-icon svg, .servico-icon svg {
  width: 25px; height: 25px; stroke-width: 1.75;
}

/* ==========================================================================
   DIFERENCIAIS — cards pretos que invadem o hero (numerados, assimétricos)
   ========================================================================== */
.difs { background: var(--paper); padding-bottom: 30px; }
.difs-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin-top: -66px; position: relative; z-index: 6;
  background: var(--hair-dark);
  border: 1px solid var(--hair-dark);
  counter-reset: dif;
  overflow: hidden;
}

/* Barra vermelha que desliza suavemente sobre o card ativo */
.difs-bar {
  position: absolute; top: 0; left: 0;
  height: 3.5px;
  background: var(--red-light);
  box-shadow: 0 0 14px var(--red-light);
  z-index: 10;
  transition: left 0.45s cubic-bezier(0.25, 1, 0.5, 1), width 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}

.dif {
  counter-increment: dif;
  position: relative;
  background: var(--ink-900);
  padding: 30px 26px 28px;
  overflow: hidden;
  transition: background 0.4s ease, transform 0.4s var(--ease-out), box-shadow 0.4s ease;
}
.dif::before {
  content: counter(dif, decimal-leading-zero);
  position: absolute; right: 16px; top: 12px;
  font-family: var(--font-mono); font-weight: 600; font-size: 46px;
  color: rgba(255,255,255,0.05); line-height: 1;
  transition: color 0.4s ease;
}

/* Estado Ativo e Hover nos Diferenciais */
.dif:hover, .dif.is-active {
  background: #121218;
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -10px rgba(217,4,41,0.35);
}
.dif:hover::before, .dif.is-active::before { color: rgba(239,35,60,0.2); }
.dif:hover .dif-icon, .dif.is-active .dif-icon {
  background: var(--red);
  transform: translateY(-2px) scale(1.06);
}
.dif .dif-icon { margin-bottom: 20px; transition: transform 0.35s var(--ease-spring), background 0.35s ease; }
.dif h3 { color: #fff; font-size: 16.5px; margin-bottom: 9px; }
.dif p { color: var(--text-inv-mut); font-size: 13.5px; line-height: 1.55; }
.dif::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--red); transition: width 0.5s var(--ease-out);
}
.dif:hover::after, .dif.is-active::after { width: 100%; }

/* Micro-animações dos ícones nos diferenciais (A cada 3s / no hover) */
/* 01. Raio (Atendimento ágil) -> Piscada / Flash */
.dif[data-dif="0"].is-active .dif-icon,
.dif[data-dif="0"]:hover .dif-icon {
  background: #D90429 !important;
  box-shadow: 0 0 20px rgba(255, 235, 59, 0.6) !important;
}
.dif[data-dif="0"].is-active .dif-icon svg,
.dif[data-dif="0"]:hover .dif-icon svg {
  animation: lightningFlash 0.6s ease-in-out infinite alternate;
}
@keyframes lightningFlash {
  0% { opacity: 1; filter: drop-shadow(0 0 4px #ffff00); transform: scale(1); }
  50% { opacity: 0.25; filter: drop-shadow(0 0 16px #ffffff); transform: scale(1.22) rotate(-8deg); }
  100% { opacity: 1; filter: drop-shadow(0 0 20px #ff2e4d); transform: scale(1.1) rotate(8deg); }
}

/* 02. Caminhão (Retirada & entrega) -> Tremidinha / Movimento de andar */
.dif[data-dif="1"].is-active .dif-icon,
.dif[data-dif="1"]:hover .dif-icon {
  background: #D90429 !important;
}
.dif[data-dif="1"].is-active .dif-icon svg,
.dif[data-dif="1"]:hover .dif-icon svg {
  animation: truckDrive 0.4s ease-in-out infinite;
}
@keyframes truckDrive {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(3px, -2px) rotate(2deg); }
  50% { transform: translate(-2px, 1.5px) rotate(-1.5deg); }
  75% { transform: translate(3.5px, -1px) rotate(2.5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* 03. Escudo (Equipe qualificada) -> Brilho Metallic Aura */
.dif[data-dif="2"].is-active .dif-icon,
.dif[data-dif="2"]:hover .dif-icon {
  background: #D90429 !important;
  animation: shieldGlow 1.2s ease-in-out infinite alternate;
}
.dif[data-dif="2"].is-active .dif-icon svg,
.dif[data-dif="2"]:hover .dif-icon svg {
  filter: drop-shadow(0 0 10px #ffffff) drop-shadow(0 0 20px #ffffff);
}
@keyframes shieldGlow {
  0% { box-shadow: 0 0 4px rgba(255,255,255,0.3); }
  100% { box-shadow: 0 0 30px rgba(255,255,255,0.9), 0 0 15px rgba(239,35,60,0.9); }
}

/* 04. Sininho (Pós-venda & alertas) -> Chacoalhada / Ring */
.dif[data-dif="3"].is-active .dif-icon,
.dif[data-dif="3"]:hover .dif-icon {
  background: #D90429 !important;
}
.dif[data-dif="3"].is-active .dif-icon svg,
.dif[data-dif="3"]:hover .dif-icon svg {
  animation: bellRing 0.5s ease-in-out infinite;
  transform-origin: top center;
}
@keyframes bellRing {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(22deg); }
  40% { transform: rotate(-18deg); }
  60% { transform: rotate(12deg); }
  80% { transform: rotate(-8deg); }
  100% { transform: rotate(0deg); }
}

/* ==========================================================================
   MARQUEE DUPLO DE SERVIÇOS — sobre preto
   ========================================================================== */
.lanes { background: var(--ink); padding: 66px 0 60px; position: relative; overflow: hidden; }
.lanes-head p {
  text-align: center;
  font-family: var(--font-mono); font-weight: 500; font-size: 12.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-inv-mut); margin-bottom: 36px;
}
.lane { position: relative; }
.lane + .lane { margin-top: 10px; }
.lane-label {
  width: min(100% - 48px, var(--container)); margin-inline: auto;
  display: flex; align-items: center; gap: 12px;
  font-weight: 500; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #fca5a5;
}
.lane-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(217,4,41,0.5), transparent); }
.lane-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.lane-track { display: flex; width: max-content; padding-block: 14px; animation: laneScroll 46s linear infinite; }
.lane-track-rtl { animation-duration: 56s; animation-direction: reverse; }
@keyframes laneScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.lane:hover .lane-track { animation-play-state: paused; }
.lane-group { display: flex; gap: 16px; padding-right: 16px; }
.lane-card {
  position: relative;
  width: 256px; height: 150px; flex: 0 0 auto;
  border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--hair-dark);
  background: #000;
  transition: transform 0.45s var(--ease-out), border-color 0.45s ease;
}
.lane-card:hover { transform: translateY(-5px) scale(1.02); border-color: rgba(239,35,60,0.6); }
.lane-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; transition: transform 0.6s var(--ease-out), opacity 0.4s ease; }
.lane-card:hover img { transform: scale(1.06); opacity: 1; }
.lane-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.25) 46%, transparent 72%); }
.lane-card figcaption {
  position: absolute; left: 14px; right: 12px; bottom: 12px; z-index: 1;
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-head); font-weight: 700; font-size: 14px; color: #fff; line-height: 1.25;
}
.lane-card figcaption::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; background: var(--red-light); }

/* ==========================================================================
   SEÇÕES — base
   ========================================================================== */
.section { padding: 108px 0; position: relative; }
.section-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 500; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--red); margin-bottom: 16px;
}
.section-kicker::before { content: ""; width: 34px; height: 2px; background: var(--red); transform-origin: left; transition: width 0.6s var(--ease-out) 0.15s; }
.section-kicker.reveal::before { width: 0; }
.section-kicker.reveal.is-visible::before { width: 34px; }
.section-title {
  font-size: clamp(28px, 3.7vw, 46px);
  font-weight: 800; letter-spacing: -0.035em;
  max-width: 760px; margin-bottom: 18px; text-wrap: balance;
  color: var(--text);
}
.section-title em { font-style: normal; color: var(--red); }
.d-br { display: none; }
@media (min-width: 721px) { .d-br { display: inline; } }
.section-lead { max-width: 640px; color: var(--text-soft); font-size: 17px; margin-bottom: 20px; }

/* Motion Design: Scroll Reveal */
.reveal {
  opacity: 0;
  transform: translateY(32px) scale(0.98);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.reveal-scale { transform: scale(0.92); opacity: 0; }
.reveal-l { transform: translateX(-48px); opacity: 0; }
.reveal-r { transform: translateX(48px); opacity: 0; }
.reveal-scale.is-visible, .reveal-l.is-visible, .reveal-r.is-visible { transform: none; opacity: 1; }

/* Palavra a palavra com float natural */
.split { opacity: 1 !important; transform: none !important; }
.split .rw {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em) scale(0.96);
  transition: opacity 0.6s var(--ease-out), transform 0.75s var(--ease-out);
  transition-delay: calc(var(--wi, 0) * 0.045s);
  will-change: opacity, transform;
}
.split .rw > em { display: inline-block; }
.split.is-visible .rw { opacity: 1; transform: none; }

/* Glow discreto que segue o mouse (vermelho, hairline) */
.glow-card { position: relative; overflow: hidden; }
.glow-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 50%), rgba(217,4,41,0.09), transparent 62%);
  opacity: 0; transition: opacity 0.4s ease; pointer-events: none;
}
.glow-card:hover::before { opacity: 1; }
.glow-card > * { position: relative; z-index: 1; }

/* ==========================================================================
   A EMPRESA
   ========================================================================== */
.empresa { background: #fff; }
.empresa-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; margin-bottom: 76px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 40px; border-top: 1px solid var(--line); }
.stats li { padding: 20px 16px 0 0; }
.stats li + li { padding-left: 18px; border-left: 1px solid var(--line); }
.stats b {
  display: block; font-family: var(--font-head); font-weight: 800;
  font-size: clamp(26px, 2.7vw, 38px); color: var(--text); line-height: 1;
  letter-spacing: -0.03em;
}
.stats b::after { content: ""; display: block; width: 22px; height: 3px; background: var(--red); margin-top: 12px; }
.stats span { display: block; font-size: 12px; color: var(--text-mut); margin-top: 10px; letter-spacing: 0.02em; }

.empresa-photo { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--lift); position: relative; }
.empresa-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 52%, rgba(6,6,8,0.9) 100%); z-index: 1; }
.empresa-photo img { height: 470px; width: 100%; object-fit: cover; object-position: 12% center; transition: transform 1.2s var(--ease-out); }
.empresa-photo:hover img { transform: scale(1.05); }
.empresa-photo figcaption { position: absolute; left: 24px; bottom: 22px; z-index: 2; color: #fff; }
.empresa-photo figcaption b { display: block; font-family: var(--font-head); font-size: 18px; }
.empresa-photo figcaption span { font-size: 13px; color: #c4c9d2; }

/* Benefícios — cards claros editoriais: aresta preta, número, divisor fino */
.beneficios-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: benef; }
.beneficio {
  counter-increment: benef;
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--line-strong);
  border-radius: 0 0 var(--r) var(--r);
  padding: 28px 24px 26px;
  display: flex; flex-direction: column;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s ease, border-top-color 0.45s ease;
}
.beneficio:hover { transform: translateY(-6px); box-shadow: var(--lift); border-top-color: var(--red); }
.beneficio::before {
  content: counter(benef, decimal-leading-zero) " / 04";
  position: absolute; right: 22px; top: 24px;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-mut); letter-spacing: 0.05em;
}
.beneficio-icon { color: #fff; margin-bottom: 22px; }
.beneficio:hover .beneficio-icon { background: var(--red); }
.beneficio h3 { font-size: 17px; margin-bottom: 10px; }
.beneficio p { font-size: 14px; color: var(--text-soft); flex: 1; }
.beneficio-proof {
  display: inline-flex; align-self: flex-start; align-items: center;
  font-size: 11px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--text); background: var(--paper-2);
  border-left: 2px solid var(--red);
  padding: 6px 11px; margin-top: 18px;
}

/* ==========================================================================
   SERVIÇOS
   ========================================================================== */
.servicos { background: var(--paper); }
.servicos::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(10,10,12,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(10,10,12,0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  pointer-events: none;
}
.servicos > .container { position: relative; }

.avcb-card {
  position: relative;
  background: var(--ink);
  border-radius: var(--r-lg);
  padding: 48px; margin: 44px 0 56px;
  box-shadow: var(--lift-dark);
  overflow: hidden;
  border-left: 4px solid var(--red);
}
.avcb-card::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(600px circle at 90% 0%, #000, transparent 70%);
  mask-image: radial-gradient(600px circle at 90% 0%, #000, transparent 70%);
}
.avcb-card > .avcb-badge, .avcb-card > .avcb-grid { position: relative; z-index: 1; }
.avcb-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--amber);
  font-family: var(--font-mono); font-weight: 600; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0 0 16px; margin-bottom: 8px;
}
.avcb-badge::before { content: ""; width: 24px; height: 2px; background: var(--amber); }
.avcb-copy h3 { color: #fff; font-size: clamp(24px, 2.7vw, 34px); font-weight: 800; margin-bottom: 14px; max-width: 620px; text-wrap: balance; }
.avcb-copy h3 em { font-style: normal; color: var(--red-light); }
.avcb-copy > p { color: #c4c9d2; max-width: 640px; margin-bottom: 30px; }
.avcb-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 34px; max-width: 760px; }
.avcb-tipo {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hair-dark);
  border-top: 2px solid var(--red);
  border-radius: 0 0 var(--r) var(--r);
  padding: 24px;
  transition: transform 0.4s var(--ease-out), background 0.4s ease;
}
.avcb-tipo:hover { transform: translateY(-4px); background: rgba(255,255,255,0.05); }
.avcb-tipo b { font-family: var(--font-head); font-size: 26px; color: #fff; letter-spacing: -0.02em; }
.avcb-tipo span { display: inline-block; font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--amber); margin: 4px 0 12px; }
.avcb-tipo p { font-size: 14px; color: #c4c9d2; }
.avcb-tipo.glow-card::before { background: radial-gradient(380px circle at var(--mx,50%) var(--my,50%), rgba(239,35,60,0.13), transparent 65%); }

/* Grid de serviços — editorial: número mono, ícone à esquerda, régua vermelha no hover */
.servicos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: serv; }
.servico {
  counter-increment: serv;
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 30px 26px 32px;
  overflow: hidden;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s ease, border-color 0.45s ease;
}
.servico:hover { transform: translateY(-6px); box-shadow: var(--lift); border-color: var(--line-strong); }
.servico::before {
  content: counter(serv, decimal-leading-zero);
  position: absolute; right: 24px; top: 26px;
  font-family: var(--font-mono); font-size: 13px; color: var(--text-mut); letter-spacing: 0.05em;
}
.servico-icon { margin-bottom: 22px; }
.servico:hover .servico-icon { background: var(--red); }
.servico:hover .servico-icon::after { transform: scale(0); }
.servico h3 { font-size: 17.5px; margin-bottom: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.servico p { font-size: 14px; color: var(--text-soft); }
.servico::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--red); transition: width 0.5s var(--ease-out); }
.servico:hover::after { width: 100%; }

/* ==========================================================================
   PRODUTOS (carrossel executivo)
   ========================================================================== */
.produtos { background: #fff; }
.produtos-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.show-nav { display: flex; gap: 10px; padding-bottom: 22px; }
.show-arrow {
  width: 48px; height: 48px; border-radius: var(--r);
  display: grid; place-items: center;
  border: 1.5px solid var(--line-strong); color: var(--text); background: #fff;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s var(--ease-spring), opacity 0.3s ease;
}
.show-arrow:hover { background: var(--line-strong); color: #fff; transform: translateY(-2px); }
.show-arrow:disabled { opacity: 0.3; pointer-events: none; }
.show-arrow svg { width: 20px; height: 20px; }

.showroom {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 40px) / 3); gap: 20px;
  margin-top: 34px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; padding: 4px 4px 14px; outline-offset: 4px;
}
.showroom::-webkit-scrollbar { display: none; }
.show-card {
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s ease, border-color 0.45s ease;
}
.show-card:hover { transform: translateY(-6px); box-shadow: var(--lift); border-color: var(--line-strong); }
.show-media {
  position: relative; aspect-ratio: 4 / 3;
  background: var(--paper);
  display: grid; place-items: center; overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.show-media img {
  max-width: 78%; max-height: 78%; width: auto; height: auto; object-fit: contain;
  filter: drop-shadow(0 16px 22px rgba(8,8,10,0.18));
  transition: transform 0.6s var(--ease-out);
}
.show-card:hover .show-media img { transform: scale(1.06) translateY(-4px); }
.show-count {
  position: absolute; top: 0; left: 0; z-index: 1;
  font-weight: 600; font-size: 11px; letter-spacing: 0.04em;
  color: #fff; background: var(--line-strong);
  padding: 6px 12px;
}
.show-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.show-body h3 { font-size: 19px; margin-bottom: 10px; }
.show-body h3 em { font-style: normal; color: var(--red); }
.show-body p { font-size: 14px; color: var(--text-soft); flex: 1; }
.produto-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--text);
  padding-top: 16px; border-top: 1px solid var(--line);
}
.produto-link svg { width: 16px; height: 16px; color: var(--red); transition: transform 0.3s var(--ease-out); }
.produto-link:hover { color: var(--red); }
.produto-link:hover svg { transform: translateX(5px); }

.produtos-note { text-align: center; margin-top: 32px; font-size: 15px; color: var(--text-soft); }
.produtos-note a { color: var(--text); font-weight: 700; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }
.produtos-note a:hover { color: var(--red); }

/* ==========================================================================
   SELO DE QUALIDADE — palco de chamas sobre preto
   ========================================================================== */
.selo { background: var(--ink); padding: 108px 0; position: relative; overflow: hidden; }
.selo::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(115deg, #000 26%, transparent 72%);
  mask-image: linear-gradient(115deg, #000 26%, transparent 72%);
  pointer-events: none;
}
.selo-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.selo-kicker { color: #fca5a5; }
.selo-title { color: #fff; }
.selo-title em { color: var(--red-light); }
.selo-lead { color: #c4c9d2; }
.selo-list { display: flex; flex-direction: column; gap: 0; margin-top: 10px; border-top: 1px solid var(--hair-dark); }
.selo-list li {
  position: relative; padding: 18px 18px 18px 40px;
  border-bottom: 1px solid var(--hair-dark);
  transition: background 0.35s ease, padding-left 0.35s ease;
}
.selo-list li:hover { background: rgba(255,255,255,0.03); padding-left: 46px; }
.selo-list li::before { content: ""; position: absolute; left: 14px; top: 23px; width: 12px; height: 12px; background: var(--red); }
.selo-list b { display: block; color: #fff; font-family: var(--font-head); font-size: 15.5px; }
.selo-list span { font-size: 13.5px; color: var(--text-inv-mut); }

.selo-stage { position: relative; min-height: 470px; display: flex; align-items: center; justify-content: center; }
.stage-floor { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: 78%; height: 46px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(217,4,41,0.35), rgba(6,6,8,0) 70%); filter: blur(6px); }
/* As chamas são desenhadas num palco de 300px; escalamos o conjunto a partir
   da base para acompanhar o extintor ampliado, sem remexer cada chama. */
/* Brasa atrás do produto: com a foto recortada, as chamas aparecem POR TRÁS
   dos extintores — então ficam discretas (glow), não uma névoa por cima. */
.stage-flames { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%) scale(1.35); transform-origin: bottom center; width: 300px; height: 320px; filter: blur(26px); opacity: 0.42; }
.flame { position: absolute; bottom: 0; border-radius: 50% 50% 22% 22% / 62% 62% 30% 30%; mix-blend-mode: screen; transform-origin: bottom center; }
.flame.f1 { left: 10px; width: 88px; height: 190px; background: linear-gradient(0deg, var(--red) 5%, var(--fire-orange) 55%, transparent 95%); animation: flameDance 2.3s ease-in-out infinite alternate; }
.flame.f2 { left: 84px; width: 120px; height: 260px; background: linear-gradient(0deg, var(--red-dark) 0%, var(--red-light) 45%, #fbbf24 80%, transparent 97%); animation: flameDance 1.9s ease-in-out 0.3s infinite alternate; }
.flame.f3 { left: 186px; width: 92px; height: 210px; background: linear-gradient(0deg, var(--red) 5%, var(--fire-orange) 60%, transparent 95%); animation: flameDance 2.6s ease-in-out 0.6s infinite alternate; }
.flame.f4 { left: 120px; width: 60px; height: 150px; background: linear-gradient(0deg, #fbbf24 10%, #fde68a 60%, transparent 95%); animation: flameDance 1.6s ease-in-out 0.15s infinite alternate; }
@keyframes flameDance { from { transform: scaleY(1) scaleX(1) skewX(0deg); } 33% { transform: scaleY(1.12) scaleX(0.94) skewX(2.5deg); } 66% { transform: scaleY(0.92) scaleX(1.05) skewX(-2deg); } to { transform: scaleY(1.08) scaleX(0.97) skewX(1.5deg); } }
/* Contêiner da foto: define o tamanho e flutua — o selo, ancorado nele,
   acompanha o movimento como se estivesse colado na imagem. */
.stage-photo { position: relative; z-index: 4; width: min(660px, 100%); margin-bottom: 34px; animation: stageFloat 5s ease-in-out infinite alternate; }
/* A foto tem fundo recortado (PNG/WebP com alfa): nada de moldura, borda ou
   cartão branco — a sombra segue o contorno real do produto (drop-shadow),
   e não uma caixa retangular, para o produto assentar no preto da seção. */
.stage-ext {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.8)) drop-shadow(0 2px 10px rgba(217,4,41,0.22));
  /* A foto original é cortada na base; sobre o preto isso vira uma linha reta
     dura. A máscara dissolve o rodapé da imagem no fundo da seção. */
  -webkit-mask-image: linear-gradient(180deg, #000 86%, rgba(0,0,0,0.45) 95%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 86%, rgba(0,0,0,0.45) 95%, transparent 100%);
}
@keyframes stageFloat { from { transform: translateY(0); } to { transform: translateY(-10px); } }
.stage-mist { position: absolute; inset: auto 0 0 0; height: 120px; z-index: 3; pointer-events: none; opacity: 0.4; }
.stage-mist span { position: absolute; bottom: 0; width: 190px; height: 74px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(240,242,246,0.28), transparent 70%); filter: blur(18px); }
.stage-mist span:nth-child(1) { left: 6%; animation: mistDrift 7s ease-in-out infinite alternate; }
.stage-mist span:nth-child(2) { left: 34%; bottom: -12px; width: 240px; animation: mistDrift 9s ease-in-out 1s infinite alternate-reverse; }
.stage-mist span:nth-child(3) { right: 4%; animation: mistDrift 8s ease-in-out 0.5s infinite alternate; }
@keyframes mistDrift { from { transform: translateX(-16px); opacity: 0.55; } to { transform: translateX(22px); opacity: 0.95; } }
/* Selo carimbado na quina inferior esquerda da FOTO (transbordando um pouco
   para fora, como um lacre aplicado sobre a imagem). */
.stage-seal { position: absolute; z-index: 5; left: 0; bottom: 0; transform: translate(-30%, 30%); width: 124px; height: 124px; display: grid; place-items: center; }
.seal-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#e2e8f0, #64748b, #f8fafc, #94a3b8, #e2e8f0, #475569, #f1f5f9, #e2e8f0); box-shadow: 0 14px 34px rgba(0,0,0,0.55), inset 0 2px 6px rgba(255,255,255,0.6); animation: spinSlow 26s linear infinite; }
@keyframes spinSlow { to { transform: rotate(360deg); } }
.seal-core { position: relative; z-index: 1; width: 88px; height: 88px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 32% 28%, var(--ink-800), #050506); border: 1.5px dashed rgba(245,158,11,0.55); color: #fbbf24; font-family: var(--font-head); font-weight: 800; font-size: 21px; letter-spacing: -0.01em; line-height: 1; text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
.seal-core i { font-style: normal; font-weight: 700; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: #fde68a; margin-top: 4px; font-family: var(--font-mono); }

/* ==========================================================================
   CTA BAND — vermelho sólido, grão, tipografia grande
   ========================================================================== */
.cta-band { background: var(--red); padding: 76px 0; position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(0,0,0,0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.16) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(115deg, #000 18%, transparent 62%);
  mask-image: linear-gradient(115deg, #000 18%, transparent 62%);
}
.cta-band::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--ink); }
.cta-band-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-band h2 { color: #fff; font-size: clamp(26px, 3.2vw, 40px); font-weight: 800; margin-bottom: 8px; letter-spacing: -0.035em; }
.cta-band p { color: rgba(255,255,255,0.92); font-size: 16.5px; max-width: 540px; }

/* ==========================================================================
   FAQ / DICAS
   ========================================================================== */
.faq { background: var(--paper); }
.faq-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; }
.faq-head { position: sticky; top: 120px; }
.faq-head .btn { margin-top: 8px; }
.accordion { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line-strong); }
.faq-item {
  background: transparent;
  border-bottom: 1px solid var(--line);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.faq-item[open] { border-bottom-color: var(--line-strong); }
.faq-item summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 6px; cursor: pointer;
  font-family: var(--font-head); font-weight: 700; font-size: 16.5px; color: var(--text);
  transition: color 0.3s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--red); }
.faq-icon { position: relative; flex: 0 0 auto; width: 28px; height: 28px; transition: transform 0.45s var(--ease-out); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 2px; background: var(--text); transform: translate(-50%, -50%); transition: transform 0.45s var(--ease-out), background 0.35s ease; }
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-icon { transform: rotate(135deg); }
.faq-item[open] .faq-icon::before, .faq-item[open] .faq-icon::after { background: var(--red); }
.faq-body { overflow: hidden; }
.faq-body p { padding: 0 6px 24px; color: var(--text-soft); font-size: 15px; max-width: 640px; }

/* ==========================================================================
   BANNER INSTAGRAM
   ========================================================================== */
.insta-band { background: linear-gradient(115deg, #833ab4 0%, #c13584 32%, #e1306c 55%, var(--fire-orange) 100%); padding: 60px 0; position: relative; overflow: hidden; }
.insta-band::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(0,0,0,0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.14) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: linear-gradient(245deg, #000 18%, transparent 62%); mask-image: linear-gradient(245deg, #000 18%, transparent 62%); }
.insta-inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.insta-icon { flex: 0 0 auto; width: 64px; height: 64px; display: grid; place-items: center; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.4); border-radius: var(--r-lg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; }
.insta-icon svg { width: 30px; height: 30px; }
.insta-copy { flex: 1; min-width: 260px; }
.insta-band h2 { color: #fff; font-size: clamp(22px, 2.6vw, 32px); font-weight: 800; margin-bottom: 6px; letter-spacing: -0.03em; }
.insta-band h2 em { font-style: normal; color: #fde68a; }
.insta-band p { color: rgba(255,255,255,0.92); font-size: 15.5px; max-width: 560px; }
.insta-band .btn-light { color: #c13584; }

/* ==========================================================================
   CONTATO
   ========================================================================== */
.contato { background: #fff; }
.contato-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 30px; margin-top: 40px; align-items: start; }
.form { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--line-strong); border-radius: 0 0 var(--r) var(--r); box-shadow: var(--lift); padding: 34px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-soft); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 15px; color: var(--text);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r);
  padding: 13px 16px; transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; width: 100%;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--line-strong); background: #fff; box-shadow: 0 0 0 3px rgba(10,10,12,0.08); }
.field.has-error input, .field.has-error select { border-color: var(--red); box-shadow: 0 0 0 3px rgba(217,4,41,0.12); }
.form-submit { width: 100%; margin-top: 6px; }
.form-hint { font-size: 12.5px; color: var(--text-mut); text-align: center; margin-top: 14px; }
.form-error { font-size: 13.5px; font-weight: 600; color: var(--red); text-align: center; margin: 2px 0 12px; }
.form-error[hidden] { display: none; }

.contato-info { display: flex; flex-direction: column; gap: 22px; }
.info-card { background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 30px; box-shadow: var(--lift-dark); }
.info-card h3 { color: #fff; font-size: 18px; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--hair-dark); }
.info-list { display: flex; flex-direction: column; gap: 4px; }
.info-list li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--hair-dark); }
.info-list li:last-child { border-bottom: 0; }
.info-icon { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; background: var(--ink-800); color: #fff; clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%); border-left: 2px solid var(--red); }
.info-icon svg { width: 18px; height: 18px; }
.info-icon-green { border-left-color: var(--whats-bright); color: #34d399; }
.info-icon-insta { border-left-color: #e1306c; color: #f472b6; }
.info-list b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-inv-mut); }
.info-list a, .info-list span { font-size: 15px; color: #fff; font-weight: 500; }
.info-list a:hover { color: #fca5a5; }
/* Ação secundária dentro de um contato — o fixo também atende no WhatsApp.
   Menor e em verde, para não competir com o número em si. */
.info-list .info-alt {
  /* flex (nível de bloco) + fit-content: cai numa linha própria abaixo do
     número, sem esticar a área clicável até o fim do card. */
  display: flex; width: fit-content; align-items: center; gap: 6px;
  margin-top: 5px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.02em; color: #34d399;
}
.info-list .info-alt svg { width: 13px; height: 13px; flex: 0 0 auto; }
.info-list .info-alt:hover { color: #6ee7b7; }
.cnpj { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hair-dark); font-size: 13px; color: var(--text-inv-mut); line-height: 1.5; }

.map-band { position: relative; margin-top: 26px; height: 340px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--lift); transition: box-shadow 0.4s ease, border-color 0.4s ease; }
.map-band:hover { border-color: var(--line-strong); }
.map-band-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(1.15) contrast(1.03); transition: filter 0.5s ease; }
.map-band:hover .map-band-embed { filter: saturate(1.3) contrast(1.05); }
.map-band-link { position: absolute; left: 20px; bottom: 20px; z-index: 1; display: flex; align-items: center; gap: 14px; max-width: calc(100% - 40px); background: rgba(255,255,255,0.94); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); border: 1px solid rgba(255,255,255,0.6); border-radius: var(--r); padding: 14px 18px; box-shadow: var(--lift); transition: transform 0.35s var(--ease-spring), box-shadow 0.35s ease; }
.map-band-link:hover { transform: translateY(-3px); }
.map-card-icon { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; background: var(--ink); color: #fff; clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%); border-left: 2px solid var(--red); }
.map-card-icon svg { width: 21px; height: 21px; }
.map-band-link b { display: block; font-family: var(--font-head); font-size: 15px; color: var(--text); }
.map-band-link span { font-size: 13px; color: var(--text-mut); }
.map-card-arrow { width: 18px; height: 18px; margin-left: 6px; flex: 0 0 auto; color: var(--text-mut); transition: transform 0.3s var(--ease-out), color 0.3s ease; }
.map-band-link:hover .map-card-arrow { color: var(--red); transform: translate(3px, -3px); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--ink); color: #b6bcc6; border-top: 3px solid var(--red); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 0.8fr 0.9fr 1fr; gap: 48px; padding: 76px 0 56px; }
.footer-logo { display: inline-flex; align-items: center; background: #fff; border-radius: var(--r); padding: 12px 18px; margin-bottom: 20px; }
.footer-logo img { height: 46px; width: auto; display: block; }
.footer-brand p { font-size: 14.5px; max-width: 300px; }
.footer-social { display: flex; gap: 10px; margin-top: 22px; }
.footer-social a { width: 42px; height: 42px; display: grid; place-items: center; background: var(--ink-800); border: 1px solid var(--hair-dark); color: #e2e8f0; clip-path: polygon(0 0, 100% 0, 100% 74%, 74% 100%, 0 100%); transition: background 0.3s ease, transform 0.3s var(--ease-spring), color 0.3s ease; }
.footer-social a:hover { background: var(--red); color: #fff; transform: translateY(-3px); }
.footer-social svg { width: 18px; height: 18px; }
.footer-col h4 { color: #fff; font-size: 12px; margin-bottom: 18px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; }
/* flex (nível de bloco) + fit-content: um link por linha, como uma lista de
   navegação deve ser. Com inline-flex eles fluíam na mesma linha e quebravam
   em pontos aleatórios ("Home A Empresa Serviços" grudados); o fit-content
   mantém a área clicável só sobre o texto e preserva o translateX do hover. */
.footer-col a { display: flex; width: fit-content; font-size: 14.5px; padding: 5px 0; color: #9aa1ac; transition: color 0.25s ease, transform 0.25s var(--ease-out); }
.footer-col a:hover { color: #fca5a5; transform: translateX(4px); }
.footer-col p { font-size: 14px; color: #9aa1ac; margin-top: 10px; }
.footer-bottom { border-top: 1px solid var(--hair-dark); padding: 22px 0; font-size: 12.5px; color: #7c828d; text-align: center; }

/* ==========================================================================
   WHATSAPP FLUTUANTE — premium (contorno, sombra dupla, sem cara de plugin)
   ========================================================================== */
.whats-float {
  position: fixed; right: 30px; bottom: 30px; z-index: 900;
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--whats-bright), #0b7a44);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 24px -6px rgba(11,122,68,0.7), 0 2px 6px rgba(0,0,0,0.3);
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s ease;
}
.whats-float svg { width: 32px; height: 32px; }
.whats-float:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 16px 34px -8px rgba(11,122,68,0.8), 0 3px 8px rgba(0,0,0,0.35); }
.whats-float:active { transform: scale(1.02); }
.whats-pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--whats-bright); animation: whatsPulse 2.4s var(--ease-out) infinite; z-index: -1; }
@keyframes whatsPulse { 0% { transform: scale(1); opacity: 0.7; } 70% { transform: scale(1.65); opacity: 0; } 100% { transform: scale(1.65); opacity: 0; } }

/* Menu mobile aberto: esconde flutuante + barra de progresso (ficariam sobre o overlay) */
body.menu-open .whats-float,
body.menu-open .scroll-progress { visibility: hidden !important; }

/* ==========================================================================
   NAV MOBILE (overlay)
   ========================================================================== */
@media (max-width: 1080px) {
  .nav {
    position: fixed; inset: 0; z-index: 940;
    flex-direction: column; justify-content: center; align-items: center; gap: 6px;
    background: rgba(8, 8, 10, 0.98);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.45s ease, visibility 0s linear 0.45s;
  }
  .nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.45s ease; }
  .nav-link { color: #e2e8f0; font-size: 24px; font-family: var(--font-head); font-weight: 700; padding: 12px 22px; opacity: 0; transform: translateY(24px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), color 0.25s ease; }
  .nav.is-open .nav-link { opacity: 1; transform: translateY(0); }
  .nav.is-open .nav-link:nth-child(1) { transition-delay: 0.08s; }
  .nav.is-open .nav-link:nth-child(2) { transition-delay: 0.13s; }
  .nav.is-open .nav-link:nth-child(3) { transition-delay: 0.18s; }
  .nav.is-open .nav-link:nth-child(4) { transition-delay: 0.23s; }
  .nav.is-open .nav-link:nth-child(5) { transition-delay: 0.28s; }
  .nav.is-open .nav-link:nth-child(6) { transition-delay: 0.33s; }
  .nav.is-open .nav-link:nth-child(7) { transition-delay: 0.38s; }
  .nav-link::after { display: none; }
  .nav-link:hover, .nav-link.is-active { color: #fca5a5; }
  .nav-toggle { display: flex; position: relative; z-index: 960; }

  /* CTA dentro do menu mobile */
  .nav-cta {
    margin-top: 18px; padding: 14px 36px; font-size: 16px; font-weight: 700;
    border-radius: var(--r); letter-spacing: 0.02em;
    opacity: 0; transform: translateY(24px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), background 0.25s ease;
  }
  .nav.is-open .nav-cta { opacity: 1; transform: translateY(0); transition-delay: 0.44s; }
}
/* Esconde o CTA do menu no desktop */
.nav-cta { display: none; }
@media (max-width: 1080px) { .nav-cta { display: inline-flex; } }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 1024px) {
  .difs-grid { grid-template-columns: repeat(2, 1fr); }
  .empresa-grid { grid-template-columns: 1fr; gap: 44px; }
  .empresa-photo img { height: 380px; }
  .beneficios-grid { grid-template-columns: repeat(2, 1fr); }
  .servicos-grid { grid-template-columns: repeat(2, 1fr); }
  .showroom { grid-auto-columns: calc((100% - 20px) / 2); }
  .selo-grid { grid-template-columns: 1fr; gap: 48px; }
  .faq-grid { grid-template-columns: 1fr; gap: 40px; }
  .faq-head { position: static; }
  .contato-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 36px; }
}
@media (max-width: 768px) {
  :root { --header-h: 72px; --header-h-scrolled: 62px; }
  .section { padding: 64px 0; }
  .container { width: min(100% - 36px, var(--container)); }

  /* Topbar */
  .topbar { font-size: 11.5px; }
  .topbar-inner { justify-content: center; gap: 6px 18px; padding-block: 7px; }
  .topbar-right { gap: 14px; }
  .topbar-item { gap: 5px; }
  .topbar-item svg { width: 13px; height: 13px; }
  .topbar-insta { display: none; }

  /* Header / Brand */
  .brand-logo { height: 42px; }
  .header.is-scrolled .brand-logo { height: 36px; }
  .header-cta { display: none; }

  /* Hero */
  .hero { height: max(560px, calc(100svh - 112px)); }
  .slide-content { padding-bottom: 120px; }
  .slide-text { font-size: 15px; max-width: 90%; }
  .slide-ctas { gap: 10px; }
  .slide-ctas .btn { padding: 13px 20px; font-size: 14px; }
  .hero-ui { bottom: 72px; }
  .hero-dot b { width: 40px; }
  .hero-dots { gap: 18px; }

  /* Diferenciais */
  .difs-grid { margin-top: -48px; }
  .dif { padding: 24px 20px; }
  .dif::before { font-size: 36px; }
  .dif h3 { font-size: 15px; }
  .dif p { font-size: 13px; }

  /* Lanes / Marquee */
  .lanes { padding: 48px 0 42px; }
  .lane-card { width: 200px; height: 120px; }
  .lane-group { gap: 12px; padding-right: 12px; }

  /* Empresa */
  .empresa-photo img { height: 300px; }
  .empresa-photo figcaption b { font-size: 16px; }
  .empresa-photo figcaption span { font-size: 12px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats li, .stats li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 2px; }
  .stats { border-top: 0; }
  .beneficio { padding: 24px 20px 22px; }
  .beneficio h3 { font-size: 16px; }
  .beneficio p { font-size: 13.5px; }

  /* Serviços / Licenciamento */
  .avcb-card { padding: 28px 20px; }
  .avcb-tipos { grid-template-columns: 1fr; }
  .servico h3 { font-size: 15.5px; }

  /* Produtos */
  .produtos-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .show-nav { padding-bottom: 0; }
  .showroom { grid-auto-columns: 82%; }
  .show-arrow { width: 42px; height: 42px; }
  .show-arrow svg { width: 16px; height: 16px; }

  /* Selo */
  .selo { padding: 64px 0; }
  .selo-stage { min-height: 440px; }
  .stage-flames { width: 240px; height: 260px; transform: translateX(-50%) scale(1.35); }
  .stage-seal { width: 96px; height: 96px; transform: translate(-24%, 24%); }
  .seal-core { width: 70px; height: 70px; font-size: 17px; }
  .seal-core i { font-size: 9px; }
  .selo-list li { padding: 16px 16px 16px 36px; }
  .selo-list b { font-size: 14.5px; }
  .selo-list span { font-size: 13px; }

  /* CTA Band */
  .cta-band { padding: 48px 0; }
  .cta-band-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .cta-band p { font-size: 15px; }

  /* FAQ */
  .faq-item summary { padding: 18px 4px; font-size: 15.5px; gap: 14px; }
  .faq-body p { font-size: 14px; padding: 0 4px 20px; }
  .faq-icon { width: 24px; height: 24px; }

  /* Instagram Band */
  .insta-band { padding: 42px 0; }
  .insta-inner { gap: 16px; }
  .insta-icon { width: 52px; height: 52px; }
  .insta-icon svg { width: 24px; height: 24px; }
  .insta-band p { font-size: 14px; }

  /* Contato */
  .form { padding: 24px 18px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .field input, .field select, .field textarea { font-size: 16px; padding: 14px 16px; }
  .info-card { padding: 24px 20px; }
  .info-card h3 { font-size: 17px; margin-bottom: 18px; padding-bottom: 14px; }
  .info-list li { padding: 10px 0; gap: 12px; }
  .info-icon { width: 38px; height: 38px; }
  .info-icon svg { width: 16px; height: 16px; }
  .info-list a, .info-list span { font-size: 14px; }
  .map-band { height: 260px; margin-top: 20px; }
  .map-band-link { left: 14px; bottom: 14px; right: 14px; max-width: none; padding: 12px 14px; gap: 12px; }
  .map-band-link span { display: none; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; padding: 52px 0 40px; }
  .footer-logo { padding: 10px 14px; }
  .footer-logo img { height: 38px; }
  .footer-brand p { font-size: 13.5px; }
  .footer-col a { font-size: 13.5px; }

  /* WhatsApp float */
  .whats-float { right: 18px; bottom: 18px; width: 54px; height: 54px; }
  .whats-float svg { width: 28px; height: 28px; }
}

/* ---------- SMALL MOBILE (≤560px) ---------- */
@media (max-width: 560px) {
  .section { padding: 52px 0; }
  .container { width: min(100% - 28px, var(--container)); }
  /* Fonte um pouco menor que o cálculo "natural" (7vw) dava: com títulos
     longos (ex.: "Da recarga do extintor ao licenciamento da edificação."),
     o tamanho anterior forçava quebra em 3 linhas desiguais abaixo de ~420px
     (text-wrap:balance só equilibra a contagem de linhas que já existe, não
     reduz o número de linhas). Um pouco menor dá espaço pra cair em 2 linhas. */
  .section-title { font-size: clamp(22px, 6.2vw, 32px); }
  .section-lead { font-size: 14.5px; }

  /* Topbar */
  .topbar-inner { flex-direction: column; align-items: center; gap: 3px; }
  .topbar-right { justify-content: center; flex-wrap: wrap; gap: 10px; }
  /* O nowrap global evita quebrar um número no meio ("(16) 3663-|5520"), mas
     na frase de localização ele empurrava a página e criava rolagem lateral
     em telas estreitas (bug antigo: 43px de estouro em 320px). Aqui a frase
     pode quebrar; os itens curtos (telefones) seguem sem quebra. */
  .topbar-item { white-space: normal; text-align: center; }
  .topbar-right .topbar-item { white-space: nowrap; }

  /* Hero */
  .hero { height: max(520px, calc(100svh - 100px)); }
  .slide-title { font-size: clamp(26px, 8vw, 36px); }
  .slide-text { font-size: 14px; }
  .slide-content { padding-bottom: 100px; }
  .slide-kicker { font-size: 11px; }
  .slide-ctas .btn { padding: 12px 18px; font-size: 13.5px; width: 100%; justify-content: center; }
  .hero-ui { bottom: 56px; }

  /* Diferenciais */
  .difs-grid { grid-template-columns: 1fr; margin-top: -36px; }
  .dif::before { font-size: 30px; }

  /* Empresa */
  .empresa-grid { gap: 32px; }
  .empresa-photo img { height: 240px; }
  .empresa-photo figcaption { left: 16px; bottom: 16px; }
  .empresa-photo figcaption b { font-size: 14px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats b { font-size: clamp(22px, 6vw, 30px); }
  .beneficios-grid { grid-template-columns: 1fr; gap: 14px; }
  .beneficio { padding: 22px 18px 20px; }

  /* Serviços */
  .servicos-grid { grid-template-columns: 1fr; }
  .avcb-card { padding: 24px 16px; }

  /* Produtos */
  .showroom { grid-auto-columns: 90%; }
  .show-arrow { width: 38px; height: 38px; }

  /* Selo */
  .selo { padding: 52px 0; }
  .selo-stage { min-height: 380px; }
  .stage-flames { width: 200px; height: 220px; transform: translateX(-50%) scale(1.25); }
  .stage-photo { width: 100%; }
  .stage-seal { width: 78px; height: 78px; transform: translate(-20%, 20%); }
  .seal-core { width: 62px; height: 62px; font-size: 15px; }
  .seal-core i { font-size: 8px; }
  .selo-list li { padding: 14px 14px 14px 32px; }
  .selo-list li::before { left: 10px; top: 19px; width: 10px; height: 10px; }
  .selo-list b { font-size: 14px; }
  .selo-list span { font-size: 12.5px; }

  /* CTA Band */
  .cta-band { padding: 40px 0; }
  .cta-band h2 { font-size: clamp(22px, 6vw, 30px); }
  .cta-band p { font-size: 14px; }

  /* FAQ */
  .faq-item summary { padding: 16px 2px; font-size: 14.5px; }
  .faq-body p { font-size: 13.5px; padding: 0 2px 18px; }

  /* Instagram Band */
  .insta-band { padding: 36px 0; }
  .insta-inner { flex-direction: column; text-align: center; align-items: center; }
  .insta-copy { min-width: 0; }
  .insta-band .btn { align-self: center; }

  /* Contato */
  .form { padding: 20px 16px; }
  .info-card { padding: 22px 16px; }
  .cnpj { font-size: 12px; }
  .map-band { height: 220px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 28px; padding: 44px 0 36px; }
  .footer-bottom { padding: 18px 0; font-size: 11.5px; }

  /* Lanes */
  .lanes { padding: 40px 0 36px; }
  .lane-card { width: 180px; height: 108px; }
  .lane-group { gap: 10px; padding-right: 10px; }
}

/* ==========================================================================
   ACESSIBILIDADE / MOTION
   ========================================================================== */
/* prefers-reduced-motion do SO: por decisão do cliente ("usar e abusar do
   motion"), os reveals/títulos/slider — gentis, disparados por scroll/clique —
   continuam. Desligamos apenas o que é pesado/contínuo e pode incomodar:
   o canvas de brasas. O desligamento total fica no modo de QA (?motion=0). */
@media (prefers-reduced-motion: reduce) {
  .hero-embers { display: none; }
}
.motion-off *, .motion-off *::before, .motion-off *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
.motion-off { scroll-behavior: auto; }
.motion-off .reveal, .motion-off .reveal-scale, .motion-off .reveal-l, .motion-off .reveal-r { opacity: 1; transform: none; }
.motion-off .split .rw { opacity: 1; transform: none; }
.motion-off .section-kicker.reveal::before { width: 34px; }
.motion-off .h-line > span { transform: none; }
.motion-off .slide-kicker, .motion-off .slide-text, .motion-off .slide-ctas { opacity: 1; transform: none; }
.motion-off .hero-embers { display: none; }
.motion-off .lane-track { animation: none; }
.motion-off .showroom { scroll-behavior: auto; }