/* ---------- Tokens ---------- */
:root {
  --bg: #000000;
  --bg-1: #0a0a0a;
  --bg-2: #121212;
  --bg-3: #1a1a1a;
  --line: #1f1f1f;
  --line-2: #2a2a2a;
  --fg: #ffffff;
  --fg-dim: rgba(255,255,255,0.66);
  /* 0.44 dava 4,25–4,35:1 sobre os fundos escuros do tema — abaixo do mínimo
     4,5:1 da WCAG AA para texto normal. Media 0,15 de diferença, invisível a
     olho nu, mas era exatamente o token dos rodapés, breadcrumbs e resumos de
     FAQ: o texto pequeno, que é justamente onde contraste importa mais.
     0.48 leva os cinco pares para 4,9–5,0:1. Medido no navegador compondo o
     alfa sobre a pilha de fundos, não estimado. */
  --fg-mute: rgba(255,255,255,0.48);
  /* decorativo (linhas, separadores): nunca carrega texto, fora do critério */
  --fg-faint: rgba(255,255,255,0.18);
  /* Fundo de QUALQUER caixa que segure foto de produto. As fotos do FlachMind
     são de estúdio com fundo preto; qualquer tom acima disso desenha um
     retângulo cinza em volta do produto. Fica como token para os cinco
     contêineres (hero, card do catálogo, card da home, galeria e miniatura)
     mudarem juntos se as fotos mudarem de padrão de novo. */
  --bg-foto: #000000;
  --accent: #ff2a2a;          /* used as small detail only */
  --accent-glow: rgba(255,42,42,0.18);

  --font-display: "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --container: 1440px;
  --pad-x: clamp(20px, 4vw, 64px);

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  overflow-x: hidden;
}

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---------- Type ---------- */
.h-display {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.92;
  text-transform: uppercase;
}
.h1 { font-size: clamp(56px, 9vw, 168px); }
.h2 { font-size: clamp(40px, 6vw, 96px); }
.h3 { font-size: clamp(28px, 3.4vw, 56px); }
.h4 { font-size: clamp(20px, 1.8vw, 28px); }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.eyebrow .dot { color: var(--accent); }

.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.lead {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.5;
  color: var(--fg-dim);
  font-weight: 400;
}

/* ---------- Layout ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.section { padding: clamp(80px, 10vw, 160px) 0; position: relative; }
.section-tight { padding: clamp(56px, 7vw, 112px) 0; }

.divider {
  height: 1px;
  background: var(--line);
  width: 100%;
}

.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 24px;
}
.section-head .lead { max-width: 520px; }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--fg);
  color: var(--bg);
}
.btn-primary:hover { background: #f1f1f1; }
.btn-ghost {
  border-color: var(--line-2);
  color: var(--fg);
}
.btn-ghost:hover { border-color: var(--fg); background: rgba(255,255,255,0.04); }
.btn-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 6px;
  transition: border-color .25s, color .25s;
}
.btn-link:hover { border-color: var(--fg); }
.btn-link .arrow { transition: transform .3s ease; }
.btn-link:hover .arrow { transform: translateX(4px); }

.tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--fg-dim);
}
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 18px 0;
  transition: background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
}
.site-header .inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px;
}
.brand {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.02em;
  display: flex; align-items: center; gap: 10px;
}
.brand .mark {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fg); color: var(--bg);
  border-radius: 6px;
  font-weight: 900;
}
.brand-logo { position: relative; padding-bottom: 10px; }
.nav { display: flex; gap: 4px; align-items: center; }
.nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--fg-dim);
  transition: color .2s ease, background .2s ease;
}
.nav a:hover, .nav a.active { color: var(--fg); background: rgba(255,255,255,0.05); }

.header-cta { display: flex; gap: 10px; align-items: center; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  padding-top: 96px;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(800px 600px at 80% 30%, rgba(255,255,255,0.04), transparent 60%),
    radial-gradient(600px 500px at 10% 80%, var(--accent-glow), transparent 70%);
  pointer-events: none;
}
.hero-grid::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 0%, transparent 80%);
  opacity: 0.5;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 48px;
}
.hero-copy { max-width: 720px; }
.hero h1 { margin: 0 0 28px; }
.hero h1 .ln { display: block; }
.hero h1 .ln em {
  font-style: normal;
  background: linear-gradient(120deg, #ffffff 0%, #cccccc 50%, #888888 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero h1 .ln .accent {
  color: var(--accent);
}
.hero-meta-bar {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-top: 34px;
  flex-wrap: wrap;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* product stage (right side of hero) */
.stage {
  position: relative;
  aspect-ratio: 1/1;
  width: 100%;
  max-width: 760px;   /* era 620 */
  margin-left: auto;
  display: flex; align-items: center; justify-content: center;
}
.stage::before {
  content: "";
  position: absolute; inset: 8%;
  border-radius: 50%;
  /* Brilho da marca em vez de branco: dá volume ao produto sobre o preto
     sem clarear o fundo, que foi justamente o que o Daniel pediu para tirar. */
  background: radial-gradient(circle, var(--accent-glow), transparent 62%);
  filter: blur(46px);
}
.stage-product {
  position: relative;
  z-index: 2;
  width: 70%; height: 70%;
  border-radius: 16px;
  background: linear-gradient(160deg, #1f1f1f 0%, #0a0a0a 100%);
  border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.stage-rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed var(--line-2);
  animation: spin 60s linear infinite;
}
.ring.r2 { inset: 8%; animation-duration: 90s; animation-direction: reverse; }
.ring.r3 { inset: 16%; animation-duration: 120s; }
@keyframes spin { to { transform: rotate(360deg); } }

/* benefit pins around hero product */
.pin {
  position: absolute;
  z-index: 3;
  display: flex; align-items: center; gap: 12px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  animation: pinIn .6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes pinIn {
  to { opacity: 1; transform: translateY(0); }
}
.pin .pin-line {
  height: 1px;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
  width: 70px;
  position: relative;
}
.pin.right .pin-line { background: linear-gradient(270deg, var(--accent) 0%, transparent 100%); }
.pin .pin-line::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.pin.right .pin-line::after { right: auto; left: -1px; }
.pin .pin-text {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--fg);
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--line-2);
  padding: 8px 12px;
  border-radius: 999px;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}
.pin .pin-text small {
  display: block;
  font-size: 9px;
  color: var(--fg-mute);
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: 0.1em;
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding: 24px 0;
}
.carousel-dots { display: flex; gap: 8px; }
.carousel-dots button {
  width: 36px; height: 4px; border-radius: 2px;
  background: var(--line-2);
  position: relative; overflow: hidden;
}
.carousel-dots button.active {
  background: var(--line-2);
}
.carousel-dots button.active::after {
  content: ""; position: absolute; inset: 0;
  background: var(--fg);
  animation: fill var(--dur, 6s) linear forwards;
  transform-origin: left;
}
@keyframes fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.carousel-arrows { display: flex; gap: 8px; }
.icon-btn {
  width: 44px; height: 44px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s;
}
.icon-btn:hover { background: rgba(255,255,255,0.06); border-color: var(--fg); }

.product-meta {
  display: flex; align-items: center; gap: 24px;
}
.product-meta .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
}
.product-meta .num span { color: var(--fg-mute); }
.product-meta .name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* marquee strip */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  overflow: hidden;
  white-space: nowrap;
}
.marquee-track {
  display: inline-flex;
  animation: marquee 40s linear infinite;
  padding: 22px 0;
}
.marquee-item {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  display: inline-flex; align-items: center;
  padding: 0 28px;
}
.marquee-item .sep { color: var(--accent); margin-left: 28px; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Categories ---------- */
.cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.cat {
  background: var(--bg-1);
  padding: 40px;
  position: relative;
  min-height: 320px;
  display: flex; flex-direction: column; justify-content: space-between;
  cursor: pointer;
  transition: background .3s ease;
  overflow: hidden;
}
.cat:hover { background: var(--bg-2); }
.cat-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-mute);
  letter-spacing: 0.12em;
}
.cat-img {
  width: 100%;
  aspect-ratio: 16/10;
  background: var(--bg-foto);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  margin: 24px 0;
  transition: transform .6s ease;
}
.cat:hover .cat-img { transform: scale(1.02); }
.cat-name {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(22px, 2vw, 30px);
  letter-spacing: -0.02em;
  display: flex; justify-content: space-between; align-items: center;
}
.cat-name .arr {
  width: 36px; height: 36px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s;
}
.cat:hover .cat-name .arr { background: var(--fg); color: var(--bg); transform: rotate(-45deg); }

/* ---------- Products grid ---------- */
.products {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
/* Preto, e não --bg-1: o card ficava um tom acima da foto (10,10,10 contra os
   3,3,3 do fundo de estúdio) e desenhava um retângulo visível em volta dela.
   Quem define o card é a borda, não o preenchimento. */
.product {
  grid-column: span 4;
  background: var(--bg-foto);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  display: flex; flex-direction: column; gap: 18px;
  transition: border-color .25s, transform .25s;
  position: relative;
  overflow: hidden;
}
.product.feature { grid-column: span 6; }
.product:hover { border-color: var(--line-2); transform: translateY(-2px); }
.product-img {
  aspect-ratio: 4/3;
  background: var(--bg-foto);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
}
.product-cat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.product-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-transform: uppercase;
}
.product-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.product-foot .price {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-mute);
}

/* ---------- Stats / numbers ---------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat {
  padding: 40px 24px;
  border-right: 1px solid var(--line);
}
.stat:last-child { border-right: none; }
.stat-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 5vw, 80px);
  letter-spacing: -0.04em;
  line-height: 1;
}
.stat-num .accent { color: var(--accent); }
.stat-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-top: 14px;
}

/* ---------- Mission ---------- */
.mvv {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.mvv-card {
  border: 1px solid var(--line);
  background: var(--bg-1);
  padding: 32px;
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 16px;
  min-height: 280px;
}
.mvv-card .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.16em;
}
.mvv-card .ttl {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 24px;
  letter-spacing: -0.01em;
}
.mvv-card p { color: var(--fg-dim); margin: 0; }
.mvv-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.mvv-card li {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  display: flex; align-items: center; gap: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mvv-card li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

/* ---------- Blog ---------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.blog-card { display: flex; flex-direction: column; gap: 16px; cursor: pointer; }
.blog-img {
  aspect-ratio: 4/3;
  background: linear-gradient(160deg, #1c1c1c, #0a0a0a);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  transition: transform .5s ease;
}
.blog-card:hover .blog-img { transform: translateY(-2px); }
.blog-meta {
  display: flex; gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.blog-meta .accent { color: var(--accent); }
.blog-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* ---------- Map / Where ---------- */
.where {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}
.map-card {
  position: relative;
  aspect-ratio: 4/3;
  border: 1px solid var(--line);
  background: var(--bg-1);
  border-radius: var(--radius);
  overflow: hidden;
}
.map-bg {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 40%, rgba(255,255,255,0.05) 0%, transparent 30%),
    radial-gradient(circle at 60% 60%, rgba(255,255,255,0.03) 0%, transparent 25%),
    linear-gradient(160deg, #121212, #050505);
}
.map-pin {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(255,42,42,0.18), 0 0 20px var(--accent);
  transform: translate(-50%, -50%);
  animation: pulse 2s ease-out infinite;
}
.map-pin.alt { background: var(--fg); box-shadow: 0 0 0 4px rgba(255,255,255,0.12); animation: none; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,42,42,0.5), 0 0 20px var(--accent); }
  100% { box-shadow: 0 0 0 24px rgba(255,42,42,0), 0 0 20px var(--accent); }
}
.map-grid::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.5;
}

/* ---------- Support callout ---------- */
.support {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.support-card {
  background: var(--bg-1);
  padding: 48px;
  display: flex; flex-direction: column; gap: 18px;
  min-height: 280px;
}
.support-card h3 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(24px, 2.5vw, 36px);
  letter-spacing: -0.02em;
  margin: 0;
}

/* ---------- Footer ---------- */
.site-footer {
  background: #050505;
  border-top: 1px solid var(--line);
  padding: 80px 0 32px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line);
}
/* h2 e não h5: o rodapé saltava de h3 para h5 e quebrava a hierarquia para
   leitor de tela, que navega por níveis. O nível certo dentro de <footer>
   (landmark) é h2 — a aparência continua a mesma, só o nome da tag mudou. */
.footer-top h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin: 0 0 18px;
}
.footer-top a {
  display: block; color: var(--fg-dim);
  font-size: 14px;
  padding: 6px 0;
  transition: color .2s;
}
.footer-top a:hover { color: var(--fg); }
.footer-cta { display: flex; flex-direction: column; gap: 18px; max-width: 320px; }
.footer-bottom {
  padding-top: 32px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px;
  color: var(--fg-mute);
  flex-wrap: wrap; gap: 16px;
}

.huge-mark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(120px, 22vw, 360px);
  letter-spacing: -0.06em;
  line-height: 0.85;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  user-select: none;
  pointer-events: none;
  position: relative;
  display: inline-block;
}
.huge-mark-wrap {
  position: relative;
  display: inline-block;
}
.huge-mark-bolt {
  position: absolute;
  left: 4%;
  bottom: 8%;
  width: 92%;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 0 24px rgba(255,42,42,0.25));
}

/* ---------- Generic page header ---------- */
.page-hero {
  padding-top: 160px;
  padding-bottom: 80px;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.page-hero h1 { margin: 0; }
.page-hero .crumbs {
  display: flex; gap: 10px; align-items: center;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-mute); letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.page-hero .crumbs .accent { color: var(--accent); }

/* ---------- Filters ---------- */
.filters {
  display: flex; gap: 8px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 24px;
  margin-bottom: 40px;
}
.filter-btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--fg-dim);
  transition: all .2s;
}
.filter-btn:hover { border-color: var(--line-2); color: var(--fg); }
.filter-btn.active { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ---------- FAQ ---------- */
.faq {
  border-top: 1px solid var(--line);
}
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; text-align: left;
  padding: 28px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.faq-q .ic {
  width: 32px; height: 32px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .25s, background .25s, color .25s;
  flex-shrink: 0;
}
.faq-item.open .faq-q .ic { background: var(--fg); color: var(--bg); transform: rotate(45deg); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease;
}
.faq-item.open .faq-a { max-height: 320px; }
.faq-a-inner {
  padding: 0 0 28px;
  color: var(--fg-dim);
  max-width: 760px;
}

/* ---------- Contact ---------- */
.contact {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
}
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.field input, .field textarea, .field select {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-2);
  padding: 12px 0;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  outline: none;
  transition: border-color .2s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--fg); }
.field .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.contact-info { display: flex; flex-direction: column; gap: 24px; }
.contact-block {
  border-top: 1px solid var(--line);
  padding: 20px 0;
}
.contact-block .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.contact-block .val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
}

/* ---------- Sobre - timeline ---------- */
.timeline { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.tl-item {
  display: grid; grid-template-columns: 160px 1fr 1fr; gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.tl-year {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 32px;
  letter-spacing: -0.02em;
}
.tl-year .accent { color: var(--accent); }
.tl-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.tl-desc { color: var(--fg-dim); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .nav { display: none; }
  .hero-inner { grid-template-columns: 1fr; }
  .stage { margin: 0 auto; max-width: 480px; }
  .cats { grid-template-columns: 1fr; }
  .product, .product.feature { grid-column: span 12; }
  .blog-grid { grid-template-columns: 1fr; }
  .where { grid-template-columns: 1fr; }
  .support { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { border-bottom: 1px solid var(--line); }
  .mvv { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; gap: 32px; }
  .tl-item { grid-template-columns: 1fr; gap: 12px; }
  .section-head { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════════════════
   ADIÇÕES DA VERSÃO PHP
   Componentes que não existiam no protótipo React: acessibilidade, menu
   mobile, abas de produto, galeria, banner de cookies e estados de form.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Acessibilidade ─────────────────────────────────────────────────────── */
/* Texto escuro sobre o vermelho, não branco. Branco sobre #ff2a2a dá 3,74:1 —
   reprova o mínimo AA de 4,5:1. Preto sobre o mesmo vermelho dá 5,62:1, então
   a marca fica intacta e o atalho continua legível. Vale notar: este é o único
   lugar do site onde o vermelho é FUNDO de texto; o .btn-primary é branco com
   texto escuro, e passa. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--accent);color:#0a0a0a;
  padding:12px 20px;font-weight:700;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
body.menu-aberto{overflow:hidden}

/* ── Menu mobile ────────────────────────────────────────────────────────── */
.menu-toggle{display:none;background:transparent;border:1px solid var(--line-2);color:var(--fg);
  width:42px;height:42px;border-radius:10px;align-items:center;justify-content:center;cursor:pointer}
.menu-toggle:hover{border-color:var(--accent);color:var(--accent)}
.menu-mobile{display:none;border-top:1px solid var(--line);background:var(--bg-1);padding:16px 24px 28px}
.menu-mobile nav{display:flex;flex-direction:column}
.menu-mobile nav a{display:flex;align-items:center;justify-content:space-between;padding:16px 0;
  border-bottom:1px solid var(--line);color:var(--fg);text-decoration:none;font-size:18px;font-weight:600}
.menu-mobile nav a.active{color:var(--accent)}
.menu-mobile-cta{margin-top:20px}
.menu-mobile-cta .btn{width:100%;justify-content:center}

@media (max-width:900px){
  .site-header .nav,.header-cta{display:none}
  .menu-toggle{display:flex}
  .menu-mobile:not([hidden]){display:block}
}

/* ── Breadcrumbs com link ───────────────────────────────────────────────── */
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--accent)}

/* ── Página de produto: abas ────────────────────────────────────────────── */
.produto-abas{margin-top:56px;border-top:1px solid var(--line)}
.abas-nav{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:32px}
.abas-nav button{background:transparent;border:none;border-bottom:2px solid transparent;color:var(--fg-mute);
  padding:18px 22px;font-family:var(--font-title);font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer;transition:color .2s,border-color .2s}
.abas-nav button:hover{color:var(--fg)}
.abas-nav button[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.aba-painel{padding-bottom:24px}
.aba-vazia{color:var(--fg-mute);font-style:italic}

/* Conteúdo vindo do FlachMind é TEXTO PURO — preserva quebras e indentação */
.texto-puro{white-space:pre-wrap;font-family:var(--font-body);font-size:15px;line-height:1.85;
  color:var(--fg-dim);max-width:78ch;overflow-wrap:anywhere}

/* ── Galeria do produto ─────────────────────────────────────────────────── */
.galeria{display:grid;gap:16px}
.galeria-principal{aspect-ratio:1;background:var(--bg-foto);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;display:flex;align-items:center;justify-content:center}
/* A foto e as miniaturas agora vivem dentro de <button> (a galeria era
   inalcançável por teclado). Zeramos a aparência do botão e movemos a borda
   para ele, que é quem recebe :focus-visible — a moldura de foco tem de
   aparecer no elemento focado, não na imagem dentro dele. */
.galeria-zoom{all:unset;display:flex;width:100%;height:100%;cursor:zoom-in}
.galeria-zoom img{width:100%;height:100%;object-fit:contain}
.galeria-principal img{width:100%;height:100%;object-fit:contain}
.galeria-thumbs{display:flex;gap:10px;flex-wrap:wrap}
.galeria-thumb-btn{display:block;padding:6px;background:var(--bg-foto);cursor:pointer;
  border:1px solid var(--line);border-radius:10px;transition:border-color .2s;line-height:0}
.galeria-thumb-btn img{width:60px;height:60px;object-fit:contain;display:block}
.galeria-thumb-btn:hover,.galeria-thumb-btn.ativo{border-color:var(--accent)}

.lightbox{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.92);display:flex;
  align-items:center;justify-content:center;padding:5vw;cursor:zoom-out}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain}
/* 44px é o alvo mínimo de toque recomendado; abaixo disso erra o dedo */
.lightbox-fechar{position:absolute;top:16px;right:16px;width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;font-size:30px;line-height:1;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28);border-radius:10px;
  color:#fff;cursor:pointer}
.lightbox-fechar:hover{background:rgba(255,255,255,.20);border-color:#fff}

/* ── Vídeo com carregamento sob demanda ─────────────────────────────────── */
.video-lazy{position:relative;aspect-ratio:16/9;background:var(--bg-2);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center}
.video-lazy img{width:100%;height:100%;object-fit:cover;opacity:.65;transition:opacity .3s}
.video-lazy:hover img{opacity:.9}
.video-lazy::after{content:'';position:absolute;width:64px;height:64px;border-radius:50%;
  background:var(--accent);clip-path:polygon(38% 30%,38% 70%,72% 50%);}

/* ── Formulário: estados ────────────────────────────────────────────────── */
.form-status{margin-top:14px;font-size:14px;min-height:20px}
.form-status.sucesso{color:#3ddc84}
.form-status.erro{color:var(--accent)}
.btn.carregando{opacity:.6;pointer-events:none}
.campo-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consentimento{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--fg-mute);line-height:1.6}
.consentimento input{margin-top:3px;accent-color:var(--accent)}
.consentimento a{color:var(--fg-dim)}

/* ── WhatsApp flutuante ─────────────────────────────────────────────────── */
.whats-float{position:fixed;right:20px;bottom:20px;z-index:90;width:56px;height:56px;border-radius:50%;
  background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 28px rgba(0,0,0,.4);transition:transform .2s}
.whats-float:hover{transform:scale(1.08)}

/* ── Banner de cookies ──────────────────────────────────────────────────── */
.cookie-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:95;display:flex;gap:20px;
  align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:14px;padding:18px 22px;
  box-shadow:0 12px 40px rgba(0,0,0,.5)}
.cookie-bar p{margin:0;font-size:13px;color:var(--fg-dim)}
.cookie-bar a{color:var(--accent)}
@media (max-width:640px){
  .cookie-bar{flex-direction:column;align-items:stretch;text-align:center}
  .whats-float{right:14px;bottom:88px}
}

/* ── Estado vazio de listagem ───────────────────────────────────────────── */
.sem-resultado{padding:60px 0;text-align:center;color:var(--fg-mute)}

/* ── Impressão ──────────────────────────────────────────────────────────── */
@media print{
  .site-header,.site-footer,.whats-float,.cookie-bar,.menu-mobile,.abas-nav{display:none!important}
  .aba-painel[hidden]{display:block!important}
  body{background:#fff;color:#000}
}

/* ── Página de produto ──────────────────────────────────────────────────── */
.produto-topo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:start}
.produto-info .produto-linhas{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.produto-linhas .filter-btn{text-decoration:none}
.produto-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:36px}
.produto-selos{list-style:none;margin:0;padding:24px 0 0;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:14px}
.produto-selos li{display:flex;align-items:center;gap:12px;color:var(--fg-dim);font-size:14px}
.produto-selos svg{color:var(--accent);flex:none}

/* Segundo nível do filtro do catálogo */
.filters-sub{margin-top:-8px;padding-bottom:8px}
.filter-btn-sub{font-size:12px;padding:8px 14px}
a.filter-btn{text-decoration:none;display:inline-flex;align-items:center;gap:6px}

@media (max-width:900px){
  .produto-topo{grid-template-columns:1fr;gap:36px}
  .produto-cta .btn{flex:1;justify-content:center}
}

/* ── Correções pós-teste visual ─────────────────────────────────────────── */
/* O atributo hidden precisa vencer o display:flex/grid dos componentes.
   Sem isto o lightbox cobre a página inteira. */
[hidden]{display:none!important}

/* H1 de produto: nome longo com .h2 estourava a tela */
.produto-info h1.h2{font-size:clamp(32px,4.2vw,60px);line-height:.98}

/* Respiro nos separadores do breadcrumb */
.crumbs > *{margin-right:8px}
.texto-puro{line-height:1.7}
.texto-puro + .texto-puro{margin-top:20px}

/* ── Artigo do blog e documentos legais ─────────────────────────────────── */
.artigo{color:var(--fg-dim);font-family:var(--font-body);font-size:17px;line-height:1.8}
.artigo > *:first-child{margin-top:0}
.artigo p{margin:0 0 22px}
.artigo h2,.artigo h3,.artigo h4{font-family:var(--font-title);color:var(--fg);
  letter-spacing:-.02em;line-height:1.25;margin:44px 0 16px}
.artigo h2{font-size:30px}
.artigo h3{font-size:24px}
.artigo h4{font-size:19px}
.artigo strong{color:var(--fg);font-weight:700}
.artigo a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.artigo ul,.artigo ol{margin:0 0 22px;padding-left:22px}
.artigo li{margin-bottom:10px}
.artigo li::marker{color:var(--accent)}
.artigo hr{border:none;border-top:1px solid var(--line);margin:40px 0}
.artigo img{max-width:100%;height:auto;border-radius:var(--radius-sm);margin:12px 0 24px}
.artigo blockquote{margin:0 0 22px;padding:4px 0 4px 22px;border-left:2px solid var(--accent);
  color:var(--fg);font-style:italic}
.artigo table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15px}
.artigo th,.artigo td{border:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top}
.artigo th{background:var(--bg-2);color:var(--fg);font-family:var(--font-title);font-size:13px;
  text-transform:uppercase;letter-spacing:.05em}

/* Documento legal: texto mais denso e sóbrio */
.documento{font-size:15.5px;line-height:1.85}
.documento h2{font-size:24px;margin-top:38px}
.documento h3{font-size:19px;margin-top:30px}

.artigo-fim{margin-top:56px;padding-top:40px;border-top:1px solid var(--line)}

/* ── Lista de manuais (Suporte Técnico) ─────────────────────────────────── */
.manuais-linha{margin-bottom:44px}
.manuais-titulo{font-family:var(--font-title);font-size:13px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-mute);margin:0 0 16px;
  display:flex;align-items:center;gap:10px}
.manuais-titulo span{color:var(--accent);font-size:11px}
.manuais-titulo::after{content:'';flex:1;height:1px;background:var(--line)}
.manuais-lista{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}
.manuais-lista a{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 18px;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius-sm);
  color:var(--fg-dim);text-decoration:none;font-size:14px;transition:border-color .2s,color .2s}
.manuais-lista a:hover{border-color:var(--accent);color:var(--fg)}
.manuais-lista .ic{color:var(--accent);flex:none}

@media (max-width:640px){
  .artigo{font-size:16px}
  .manuais-lista{grid-template-columns:1fr}
}

/* Perguntas do FAQ em caixa mista: o modelo previa rótulos curtos, mas as
   perguntas reais têm até 100 caracteres — em CAIXA ALTA fica ilegível. */
.faq-q{text-transform:none;font-size:17px;line-height:1.45;letter-spacing:-.01em}
.faq-q > span:first-child{padding-right:20px}

/* Acordeão do FAQ.
   O modelo animava max-height com valor fixo (320px), que truncava as
   respostas longas do catálogo real. Tentei medir a altura em JS e animar
   por grid; ambas se mostraram frágeis. Aqui o painel simplesmente aparece
   (hidden ↔ visível) com um fade — sem cálculo de layout, sem truncar,
   e o `hidden` mantém o estado correto para leitores de tela. */
.faq-a{max-height:none;overflow:visible}
.faq-a:not([hidden]){animation:faq-abre .28s ease}
@keyframes faq-abre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.faq-a:not([hidden]){animation:none}}

/* ── Hero com slides reais ──────────────────────────────────────────────── */
.hero-inner{position:relative;display:grid}
/* O crossfade travava no meio: o hero ficava praticamente em branco, com o
   fantasma de um produto a opacidade quase zero, enquanto o contador já
   mostrava outro. Causa: `opacity` tinha transição e `visibility` não. Ao
   entrar, o slide saía de visibility:hidden e recebia opacity:1 no MESMO
   quadro — e o navegador não inicia transição de opacidade num elemento que
   acabou de se tornar visível, então ele ficava preso no valor inicial.
   Correção padrão: `visibility` também entra na transição, com duração zero.
   Ao ENTRAR, muda na hora (delay 0), e a opacidade anima por cima.
   Ao SAIR, espera a opacidade terminar (delay .5s) antes de sumir. */
.hero-slide{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:48px;align-items:center;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s ease, visibility 0s linear .5s}
.hero-slide.ativo{opacity:1;visibility:visible;pointer-events:auto;position:relative;
  transition:opacity .5s ease, visibility 0s linear 0s}
.hero-slide.ativo .hero-copy > *{animation:sobe .6s cubic-bezier(.2,.7,.2,1) backwards}
.hero-slide.ativo .hero-copy > *:nth-child(2){animation-delay:.06s}
.hero-slide.ativo .hero-copy > *:nth-child(3){animation-delay:.12s}
.hero-slide.ativo .hero-copy > *:nth-child(4){animation-delay:.18s}
.hero-slide.ativo .hero-copy > *:nth-child(5){animation-delay:.24s}
@keyframes sobe{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-titulo{margin:0;line-height:.92;letter-spacing:-.03em}
.hero-titulo .ln{display:block}
/* Família em corpo menor, código em destaque — sem estourar a coluna */
/* `word-break:break-word` partia a palavra no meio: "APF‑600A" virava
   "APF / ‑60 / 0A" em três linhas. A 104px o código pede ~516px e a coluna
   tinha 542px — no limite, e o entreletras estourou.
   Agora: nunca quebra dentro da palavra (só em espaço e hífen), e o corpo cai
   para 72px, onde o código mais longo do catálogo ("F100-12/24 SR") cabe com
   folga na coluna. */
.hero-titulo .ln-familia{font-size:clamp(18px,2vw,30px);color:var(--fg-dim);font-weight:700;
  letter-spacing:.02em;line-height:1.15}
.hero-titulo .ln-codigo{font-size:clamp(34px,4.2vw,72px);
  word-break:normal;overflow-wrap:normal;hyphens:none}
.stage-product img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))}
.carousel-dots button.ativo{background:var(--accent);width:26px}
@media (max-width:900px){
  .hero-slide{grid-template-columns:1fr;gap:28px}
  .hero-slide .stage{order:-1;max-height:none}
}
@media (prefers-reduced-motion:reduce){
  .hero-slide,.hero-slide.ativo .hero-copy > *{transition:none;animation:none}
}

/* ── Sobre ──────────────────────────────────────────────────────────────── */
.sobre-texto{max-width:760px;margin-top:8px}
.timeline-fotos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.tl-card{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;display:flex;flex-direction:column;gap:10px;transition:border-color .25s}
.tl-card:hover{border-color:var(--line-2)}
.tl-foto{aspect-ratio:4/3;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-2);
  border:1px solid var(--line);margin-bottom:6px}
.tl-foto img{width:100%;height:100%;object-fit:cover}

/* ── Mapa ───────────────────────────────────────────────────────────────── */
.mapa-embed{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  filter:grayscale(1) invert(.92) contrast(.9)}

/* ── Formulário: campos obrigatórios ────────────────────────────────────── */
.contact-form input:invalid:not(:placeholder-shown),
.contact-form textarea:invalid:not(:placeholder-shown){border-color:var(--accent)}

/* ── Palco do hero: produto real ────────────────────────────────────────── */
/* Aqui havia uma base BRANCA (gradiente radial claro). O motivo era real na
   época: as fotos vindas do WordPress eram produto escuro sobre fundo branco
   recortado, e sobre o card preto o produto sumia.
   As fotos novas do FlachMind invertem a premissa — são de estúdio, com fundo
   preto e iluminação própria. A base clara virou uma moldura cinza em volta de
   cada produto. Preto puro faz a foto encostar no fundo do site sem costura. */
/* ── O produto passa a ser o maior elemento do banner ──────────────────────
   Antes ele encolhia em quatro etapas encadeadas: a coluna pegava 45% da
   largura, o .stage limitava a 620px, o .stage-product ocupava 82% disso e a
   imagem ainda tinha 8% de recuo interno. Sobravam 427px de produto — menores
   que o título ao lado, num banner cujo propósito é vender o produto.
   Agora a foto ocupa o palco inteiro e sangra no preto: as fotos novas já vêm
   com fundo de estúdio preto e luz própria, então caixa, borda e cantos
   arredondados só serviam para desenhar uma moldura em volta. */
.stage-product{width:100%;height:100%;background:transparent;
  border:0;border-radius:0;box-shadow:none;overflow:visible}
.stage-product img{padding:0;filter:none;object-fit:contain}

/* Coluna de texto com mais respiro, para os CTAs não empilharem */
/* Coluna do PRODUTO maior que a do texto. Era 1.15/.95 a favor do texto. */
/* O .hero-inner é só o EMPILHADOR dos slides: uma única coluna, com todos os
   slides em grid-area 1/1 para se sobreporem no crossfade.
   Ele tinha duas colunas, e como cada slide fica preso em 1/1, o slide inteiro
   cabia dentro da PRIMEIRA coluna e subdividia só ela. De 1312px úteis, o
   banner usava 567px — 43%. Era esta a razão real do produto sair pequeno, e
   nenhuma mudança de proporção dentro do slide resolveria. */
.hero-inner{grid-template-columns:1fr}
.hero-slide{grid-template-columns:1fr 1.25fr}
.hero-cta{margin-top:28px}
.hero-meta-bar{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}

@media (max-width:1100px){
  .hero-slide{grid-template-columns:1fr .9fr;gap:32px}
}
@media (max-width:900px){
  .hero-inner,.hero-slide{grid-template-columns:1fr}
  .stage-product{width:100%;height:100%}
}

/* <picture> não deve criar caixa própria: o <img> precisa dimensionar
   direto contra o contêiner (.product-img, .galeria-principal, .stage-product).
   Sem isto, width/height 100% passam a valer 100% de um inline vazio. */
picture{display:contents}

/* ── Canais de contato (Onde Encontrar) ─────────────────────────────────── */
.canais{display:flex;flex-direction:column;gap:12px}
.canal{display:flex;align-items:center;gap:16px;padding:18px 20px;text-decoration:none;
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .2s,transform .2s}
.canal:hover{border-color:var(--line-2);transform:translateY(-2px)}
.canal-destaque{border-color:rgba(37,211,102,.35)}
.canal-destaque:hover{border-color:#25d366}
.canal-destaque .canal-ic{background:rgba(37,211,102,.12);color:#25d366}
.canal-ic{width:46px;height:46px;border-radius:12px;flex:none;display:flex;align-items:center;
  justify-content:center;background:var(--bg-3);color:var(--accent)}
.canal-txt{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.canal-txt strong{font-family:var(--font-title);font-size:15px;color:var(--fg)}
.canal-txt span{font-size:13px;color:var(--fg-mute)}
.canal-arr{color:var(--fg-mute);flex:none}
.canal:hover .canal-arr{color:var(--accent)}

/* ── Ficha estruturada ───────────────────────────────────────────────────────
   Substitui o `white-space: pre-wrap` que despejava 40 linhas de texto cinza
   no painel da aba. Cada forma de conteúdo (dado técnico, característica,
   explicação) ganha um tratamento visual distinto — a hierarquia é o que
   permite varrer a página em vez de ler tudo. */
.ficha { display: flex; flex-direction: column; gap: 26px; }

/* código do modelo */
.ficha-codigo {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  margin: 0; padding: 7px 14px;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: .06em; color: var(--fg);
}
.ficha-codigo svg { color: var(--accent); }

/* título de seção */
.ficha-secao {
  margin: 6px 0 -6px; padding-left: 14px;
  font-family: var(--font-display); font-size: 13px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg);
  border-left: 3px solid var(--accent);
}

/* grade de especificações */
.ficha-specs {
  display: grid; gap: 10px; margin: 0;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}
.ficha-specs .spec {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 15px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 12px;
  transition: border-color .18s, background .18s;
}
.ficha-specs .spec:hover { border-color: var(--line-2); background: var(--bg-3); }
.spec-ic {
  flex: 0 0 30px; height: 30px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,42,42,0.09); border-radius: 8px; color: var(--accent);
}
.spec-txt { min-width: 0; }
.ficha-specs dt {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--fg-mute); font-family: var(--font-display); font-weight: 700;
  margin-bottom: 3px;
}
.ficha-specs dd {
  margin: 0; font-family: var(--font-mono, var(--font-display));
  font-size: 14px; font-weight: 600; color: var(--fg); line-height: 1.45;
  overflow-wrap: anywhere;
}

/* características */
.ficha-feats {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 9px 26px;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}
.ficha-feats li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14.5px; line-height: 1.55; color: var(--fg-dim);
}
.ficha-feats svg { flex: 0 0 auto; margin-top: 3px; color: var(--accent); }

/* bloco com rótulo + itens numerados (ex.: estados de um LED) */
.ficha-rotulada {
  padding: 15px 18px; background: var(--bg-2);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
}
.ficha-rotulada .rot {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  letter-spacing: .04em; color: var(--fg);
}
.ficha-rotulada .rot svg { color: var(--accent); }
.ficha-rotulada ol { margin: 0; padding-left: 20px; }
.ficha-rotulada li { font-size: 14px; line-height: 1.6; color: var(--fg-dim); margin-bottom: 5px; }
.ficha-rotulada li::marker { color: var(--accent); font-weight: 700; }

/* explicação corrida */
.ficha-p {
  margin: 0; max-width: 68ch;
  font-size: 15px; line-height: 1.72; color: var(--fg-dim);
}

@media (max-width: 720px) {
  .ficha { gap: 20px; }
  .ficha-specs { grid-template-columns: 1fr; }
  .ficha-feats { grid-template-columns: 1fr; }
}

/* Valor longo = frase, não dado. Ocupa a linha inteira e usa fonte de texto:
   em mono, dentro do cartão estreito, virava um bloco ilegível. */
.ficha-specs .spec-longo { grid-column: 1 / -1; }
.ficha-specs .spec-longo dd {
  font-family: var(--font-body); font-weight: 400; font-size: 14.5px;
  color: var(--fg-dim); line-height: 1.6;
}

/* ── Produto no canto, sangrando para fora do container ─────────────────────
   O Daniel pediu "maior e no canto". Em vez de só esticar a coluna — o que
   roubava largura do texto e foi o que quebrou o título — o palco passa a
   avançar sobre o respiro lateral direito até a borda da janela. Ganha
   tamanho sem tirar espaço de leitura. O .hero já tem overflow:hidden, então
   não cria barra de rolagem horizontal. */
.hero-slide .stage {
  max-width: 900px;
  margin-right: calc(var(--pad-x) * -1);
  margin-left: auto;
}
@media (max-width: 900px) {
  /* No celular a coluna é única: sangrar dos dois lados dá presença sem
     empurrar o texto. */
  .hero-slide .stage {
    margin-right: calc(var(--pad-x) * -1);
    margin-left: calc(var(--pad-x) * -1);
    max-width: none;
  }
}

/* ── Correções vindas do QA de layout (bin/qa-layout.py) ────────────────────
   O QA de imagens passava 15/15 enquanto estes defeitos existiam, porque
   nenhum critério olhava geometria renderizada. */

/* L5 · A barra de cookies é fixa no rodapé e cobria controles em 40+ rotas:
   miniaturas da galeria, abas do produto, filtros do catálogo e o primeiro
   campo do formulário. Enquanto não se aceitava, não dava para clicar neles.
   Reservar o espaço dela empurra o conteúdo para cima em vez de tapá-lo. */
body:has(#cookie-bar:not([hidden])) { padding-bottom: 92px; }
@supports not (selector(:has(*))) {
  /* navegador sem :has — a barra deixa de ser fixa e vira bloco no fim */
  #cookie-bar { position: static; }
}

/* L6 · Alvos de toque abaixo de 24px.
   Os pontinhos do carrossel tinham 4px de altura: acertar exigia mira. Os
   links legais do rodapé e as migalhas tinham 18–22px. A área clicável cresce
   sem mudar o desenho, via padding e caixa transparente. */
.carousel-dots button {
  height: 24px; padding: 10px 0; background-clip: content-box;
  display: inline-flex; align-items: center;
}
.footer-legal a, .crumbs a, .footer-bottom a {
  display: inline-flex; align-items: center; min-height: 24px;
}
.cookie-bar a { min-height: 24px; display: inline-flex; align-items: center; }

/* ── Logo oficial ───────────────────────────────────────────────────────────
   A marca era a palavra "FLACH" desenhada com a fonte Inter mais uma imagem de
   raio posicionada por cima com `position:absolute`. Agora é o arquivo oficial
   inteiro. Some o risco de a logo mudar de forma quando a fonte não carrega, e
   some o alinhamento manual do raio, que dependia de valores fixos em px. */
.brand-logo { padding-bottom: 0; }
.brand-img { height: 44px; width: auto; object-fit: contain; display: block; }
.footer-cta .brand-img { height: 52px; }
@media (max-width: 900px) {
  .brand-img { height: 36px; }
  .footer-cta .brand-img { height: 44px; }
}
/* o raio isolado, quando usado como elemento decorativo */
.raio-marca { height: 10px; width: auto; object-fit: contain; }

/* ── Mapa do Brasil ─────────────────────────────────────────────────────────
   O contorno usa os tokens do site: preenchimento quase preto sobre o card,
   divisa de estado no mesmo cinza das linhas, e o vermelho da marca reservado
   para os pinos — que é o dado, não a moldura. */
.mapa-br {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: 6%;
  overflow: visible;
}
.mapa-br-estados path {
  fill: var(--bg-3);
  stroke: var(--line-2);
  stroke-width: 1.2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill .25s ease;
}
/* o contorno do país inteiro ganha um realce sutil sem virar borda dura */
.map-card:hover .mapa-br-estados path { fill: #1d1d1d; }

/* O pino fica ACIMA do mapa; o mapa é decorativo e não recebe clique. */
.mapa-br { pointer-events: none; }
.map-pin { z-index: 3; }
.map-fabrica {
  position: absolute; z-index: 4;
  transform: translate(-50%, -140%);
  white-space: nowrap;
}
.map-fabrica .tag {
  background: rgba(0,0,0,.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-color: var(--line-2);
}
@media (max-width: 900px) {
  .map-fabrica .tag { font-size: 10px; padding: 5px 8px; }
  .mapa-br { padding: 3%; }
}

/* Pinos desenhados dentro do SVG, em coordenadas do mapa */
.map-pin-svg {
  fill: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent));
  animation: pulsa-pino 2.4s ease-in-out infinite;
  transform-box: fill-box; transform-origin: center;
}
.map-pin-sede { fill: #fff; filter: drop-shadow(0 0 8px rgba(255,255,255,.7)); }
@keyframes pulsa-pino { 0%,100% { opacity: .55; transform: scale(.82) } 50% { opacity: 1; transform: scale(1.1) } }
@media (prefers-reduced-motion: reduce) { .map-pin-svg { animation: none; opacity: .9 } }

/* Com 76 pontos o brilho de cada um precisa ser menor, senão o mapa vira uma
   mancha vermelha só. A sede continua branca e maior para se destacar deles. */
.map-pin-svg { filter: drop-shadow(0 0 3px var(--accent)); }
.map-pin-sede { r: 10; filter: drop-shadow(0 0 9px rgba(255,255,255,.85)); }

/* Os ícones sociais do rodapé apareciam encostados no canto superior esquerdo
   da bolinha. Medido: as setas do carrossel computavam display:flex e ficavam
   centradas (desloc 0,0); os sociais computavam display:BLOCK — a centralização
   nunca era aplicada — e o SVG caía em -14,-6 do centro.
   Regra com seletor de elemento + classe para vencer o que estava
   sobrescrevendo, e o SVG em block para não pousar na linha de base do texto,
   que é a segunda fonte clássica desse desalinhamento. */
a.icon-btn, button.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.icon-btn > svg { display: block; flex: 0 0 auto; }

/* Cartões de destaque: mesma altura e mesma escala de foto.
   A caixa da imagem já tinha aspect-ratio 4/3, mas o cartão `feature` ocupava
   o dobro de colunas, então a MESMA proporção resultava numa foto muito maior.
   Sem a variante, os três dividem a linha igualmente. O padding em % faz o
   produto ocupar a mesma fração da caixa em qualquer largura. */
.products .product { grid-column: span 4; }
.products .product-img { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; }
.products .product-img img { width: 100%; height: 100%; object-fit: contain; padding: 7%; }
/* o conteúdo de texto empurra o rodapé do cartão para baixo, alinhando os
   botões "Ver produto" na mesma linha mesmo com nomes de tamanhos diferentes */
.products .product > *:last-child { margin-top: auto; }
@media (max-width: 1100px) { .products .product { grid-column: span 6; } }
@media (max-width: 700px)  { .products .product { grid-column: span 12; } }

/* ── Busca do catálogo ──────────────────────────────────────────────────── */
.busca { position: relative; margin: 0 0 28px; max-width: 620px; }
.busca-campo {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 999px;
  padding: 0 18px; transition: border-color .2s;
}
.busca-campo:focus-within { border-color: var(--accent); }
.busca-campo > svg { color: var(--fg-mute); flex: 0 0 auto; }
.busca-campo input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: var(--fg); font: inherit; font-size: 15px; padding: 15px 0;
}
.busca-campo input::placeholder { color: var(--fg-mute); }
.busca-campo input::-webkit-search-cancel-button { display: none; }
.busca-limpar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; color: var(--fg-mute);
  flex: 0 0 auto;
}
.busca-limpar:hover { background: rgba(255,255,255,.08); color: var(--fg); }

.busca-lista {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 8px);
  max-height: 60vh; overflow-y: auto;
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6); padding: 6px;
}
.busca-grupo {
  font-family: var(--font-display); font-size: 10px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-mute);
  padding: 10px 12px 6px;
}
.busca-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 8px 12px; border-radius: 10px; text-align: left;
  color: var(--fg); cursor: pointer;
}
.busca-item:hover, .busca-item.marcado { background: rgba(255,255,255,.07); }
.busca-foto {
  width: 44px; height: 44px; flex: 0 0 44px; object-fit: contain;
  background: var(--bg-foto); border: 1px solid var(--line); border-radius: 8px; padding: 3px;
}
.busca-ic {
  width: 44px; height: 44px; flex: 0 0 44px; display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; color: var(--accent);
}
.busca-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.busca-txt strong {
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.busca-txt small { font-size: 12px; color: var(--fg-mute); }
.busca-item mark { background: rgba(255,42,42,.24); color: #fff; border-radius: 3px; }
.busca-vazio { padding: 18px 14px; color: var(--fg-dim); font-size: 14px; line-height: 1.6; }
.busca-vazio small { color: var(--fg-mute); }
.busca-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: -1px; }
@media (max-width: 700px) { .busca { max-width: none; } .busca-txt strong { white-space: normal; } }

/* ── Formulário de contato: alinhamento ─────────────────────────────────────
   Dentro de `.field .row` os dois filhos são <div> comuns. O `.field` é
   flex-column, mas isso não desce para os netos — então rótulo e campo caíam
   na MESMA linha ("E-MAIL * email@empresa.com") e a linha de dois campos não
   batia com os de largura inteira. */
.contact-form .field .row > div { display: flex; flex-direction: column; gap: 8px; }
.contact-form .field, .contact-form .field .row > div { align-items: stretch; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; }

/* Ícone vermelho em cada informação de contato */
.contact-block .lbl { display: flex; align-items: center; gap: 8px; }
.contact-block .lbl > svg { color: var(--accent); flex: 0 0 auto; }

/* Ícones da ficha maiores: a 15px dentro de uma caixa de 30 eles liam como
   enfeite. 20px numa caixa de 38 dá para reconhecer o desenho de relance, que
   é o motivo de existirem. */
.spec-ic { flex: 0 0 38px; height: 38px; border-radius: 10px; }
.ficha-feats svg { margin-top: 2px; }
.contact-block .lbl > svg { width: 15px; height: 15px; }
@media (max-width: 720px) { .spec-ic { flex: 0 0 34px; height: 34px; } }

/* Mais um passo de tamanho: 24px numa caixa de 44. O ícone é o que faz a ficha
   ser varrível de relance — abaixo disso ele vira enfeite. */
.spec-ic { flex: 0 0 44px; height: 44px; border-radius: 11px; }
@media (max-width: 720px) { .spec-ic { flex: 0 0 40px; height: 40px; } }

/* A grade e o brilho do hero são DECORAÇÃO: ficam por cima em position:absolute
   e engoliam o clique das setas do carrossel — o botão existia, estava visível
   e habilitado, e o clique morria na camada de enfeite. Decoração nunca deve
   receber ponteiro. */
.hero-grid, .hero-bg, .hero-grid::before, .stage-rings, .ring { pointer-events: none; }
.hero-inner, .hero-slide, .product-meta { position: relative; z-index: 2; }

/* ── Barra do carrossel: controles ancorados ────────────────────────────────
   As setas mudavam de lugar a cada troca de slide (887 → 872 → 884 px). Não era
   o slide: a altura do hero e a linha da barra ficavam constantes. Era o NOME
   do produto no meio da barra — "FLACH APF-600A", "FLACH IF600" e
   "FLACH TBF2000" têm larguras diferentes e empurravam tudo à direita.
   O nome ganha largura reservada e os controles são ancorados à direita, então
   nada depende mais do comprimento do texto. */
.product-meta { display: flex; align-items: center; gap: 20px; }
.product-meta .name {
  min-width: 210px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-meta .carousel-dots { margin-left: auto; }
.product-meta .carousel-nav,
.product-meta .carousel-dots + * { flex: 0 0 auto; }
@media (max-width: 720px) {
  .product-meta { flex-wrap: wrap; gap: 12px; }
  .product-meta .name { min-width: 0; flex: 1 1 100%; }
  .product-meta .carousel-dots { margin-left: 0; }
}

/* Sobrava 1–2px de deslocamento: os dígitos do contador ("01", "02", "03") não
   têm a mesma largura em Inter por padrão. `tabular-nums` iguala todos, que é
   exatamente para o que essa variante existe. */
.product-meta .num, .product-meta .num + span { font-variant-numeric: tabular-nums; }
.product-meta { font-variant-numeric: tabular-nums; }

/* ── Modelo 3D do F06-SD ─────────────────────────────────────────────────
   O canvas é camada visual. A foto de estúdio fica embaixo dele e some com
   um crossfade quando a cena termina de montar — sem WebGL, ela simplesmente
   continua lá, e `.sem-3d` esconde os controles que não teriam função. */
/* Bloco embutido na página do produto: o respiro é dele, não de `.section`. */
.visor3d{border-top:1px solid var(--line);margin:72px 0 0;padding:56px 0 8px}
.visor3d-cab{max-width:640px;margin-bottom:40px}
.visor3d-cab .lead{margin-top:20px}
.visor3d-grade{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);
  gap:48px;align-items:start}

.visor3d-palco{min-width:0}
.visor3d-canvas{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--radius-lg);
  background:var(--bg-foto);border:1px solid var(--line);overflow:hidden;
  cursor:grab;touch-action:pan-y}
.visor3d-canvas:active{cursor:grabbing}
.visor3d-canvas canvas{position:absolute;inset:0;z-index:1}
/* O canvas do WebGL é anexado por JS e vira o ÚLTIMO filho do palco:
   sem uma ordem de camadas explícita ele cobre cotas, marcadores e a
   legenda do tour — que ficavam invisíveis justamente onde havia
   produto para explicar. */
.visor3d-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:6%;transition:opacity .45s ease}
.pronto .visor3d-foto{opacity:0}
.sem-3d .visor3d-canvas{cursor:default}
/* (a troca .visor3d-so3d/.visor3d-sem3d, no fim do arquivo, cobre estes) */
/* ── Estado de carregamento ────────────────────────────────────────────
   A foto de estúdio NÃO aparece enquanto o 3D desce. Ela é a resposta para
   quem não tem WebGL; durante a espera ela dava a impressão de ser o
   resultado final, e quem não esperasse ia embora achando que não havia
   modelo nenhum. No lugar dela, o que está acontecendo de verdade. */
.visor3d-carregando{position:absolute;inset:0;z-index:5;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;margin:0;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 50%, rgba(255,42,42,.06), transparent 70%)}
.carregando .visor3d-carregando{display:flex}
.pronto .visor3d-carregando,.sem-3d .visor3d-carregando{display:none}
.visor3d-carregando span:last-child{font-family:var(--font-display);font-weight:700;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-mute)}
.visor3d-spin{width:34px;height:34px;border-radius:50%;
  border:2px solid rgba(255,255,255,.13);border-top-color:var(--accent);
  animation:visor3d-girar .8s linear infinite}
@keyframes visor3d-girar{to{transform:rotate(360deg)}}

/* Enquanto carrega, a foto sai de cena nos dois palcos (seção e banner).
   Sem transição de propósito: `carregando` já vem do servidor, então a foto
   nunca chega a ser pintada. Deixar o fade aqui fazia a foto aparecer e sumir
   por cima do spinner — que é exatamente o que não se queria. */
.carregando .visor3d-foto,.stage-3d.carregando img{opacity:0;transition:none}
.visor3d-dica{display:flex;gap:8px;align-items:center;margin:16px 0 0;
  font-size:13px;color:var(--fg-mute)}
.visor3d-dica svg{flex:0 0 auto;opacity:.7}

/* cotas: só aparecem no modo medidas */
.visor3d-cotas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  opacity:0;transition:opacity .3s ease;z-index:2}
.com-cotas .visor3d-cotas{opacity:1}
.cota-l,.cota-t{stroke:var(--accent);stroke-width:1.5}
.cota-x{stroke:rgba(255,255,255,.28);stroke-width:1;stroke-dasharray:3 3}
.cota-cap{fill:rgba(0,0,0,.82);stroke:rgba(255,42,42,.45)}
.cota-txt{fill:#fff;font:600 12px/1 var(--font-display);letter-spacing:.02em;
  font-variant-numeric:tabular-nums}

/* pontos de detalhe */
.visor3d-pontos{position:absolute;inset:0;pointer-events:none;z-index:3;/*camadas-visor*/}
.p3d{position:absolute;left:0;top:0;margin:-14px 0 0 -14px;width:28px;height:28px;
  border-radius:50%;pointer-events:auto;background:rgba(10,10,10,.72);
  border:1px solid var(--accent);color:#fff;display:grid;place-items:center;
  backdrop-filter:blur(3px);transition:opacity .25s ease,transform .1s linear}
.p3d.oculto{opacity:0;pointer-events:none}
.p3d-n{font:700 12px/1 var(--font-display);font-variant-numeric:tabular-nums}
.p3d:hover,.p3d:focus-visible{background:var(--accent)}
.p3d-bal{position:absolute;left:50%;bottom:calc(100% + 12px);width:246px;
  transform:translateX(-50%);padding:12px 14px;border-radius:var(--radius);
  background:#0b0b0b;border:1px solid var(--line-2);text-align:left;
  opacity:0;visibility:hidden;transition:opacity .18s ease,visibility 0s linear .18s;
  box-shadow:0 18px 40px rgba(0,0,0,.6);z-index:3}
.p3d-bal b{display:block;font:700 12px/1.3 var(--font-display);letter-spacing:.04em;
  text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.p3d-bal span{display:block;font-size:13px;line-height:1.45;color:var(--fg-dim)}
.p3d:hover .p3d-bal,.p3d:focus-visible .p3d-bal{opacity:1;visibility:visible;
  transition:opacity .18s ease,visibility 0s linear 0s}
/* ── Detalhes numerados: só a pedido ──────────────────────────────────────
   Antes ficavam ligados o tempo todo — seis bolinhas em cima do produto sem
   nada explicando o que eram, e o texto só no hover, que no celular não
   existe. Agora entram pelo botão "Ver detalhes" e o clique abre o balão. */
.visor3d:not(.com-pontos) .p3d{opacity:0;pointer-events:none}
.p3d.aberto{background:var(--accent)}
.p3d.aberto .p3d-bal{opacity:1;visibility:visible;
  transition:opacity .18s ease,visibility 0s linear 0s}
/* balão preso na beirada: sem isto ele some sob o recorte do palco */
.p3d.borda-esq .p3d-bal{left:-6px;transform:none}
.p3d.borda-dir .p3d-bal{left:auto;right:-6px;transform:none}
.p3d.borda-topo .p3d-bal{bottom:auto;top:calc(100% + 12px)}
.visor3d-ajuda{margin:-4px 0 14px;font-size:12px;line-height:1.5;color:var(--fg-mute)}
.visor3d:not(.com-pontos) .visor3d-ajuda{display:none}

/* ── Tour guiado ──────────────────────────────────────────────────────────
   A legenda mora DENTRO do palco: ela fala do que está na tela naquele
   segundo, e na coluna lateral o olho teria de ir e voltar a cada parada.
   Encostada embaixo, sobre um degradê, para não tapar o produto. */
.tour3d{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:56px 20px 16px;
  display:flex;align-items:flex-end;gap:20px;pointer-events:none;
  background:linear-gradient(to top,rgba(6,6,7,.94) 46%,rgba(6,6,7,.72) 72%,transparent);
  animation:tour3d-entra .34s ease both}
.tour3d[hidden]{display:none}
@keyframes tour3d-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tour3d-barra{position:absolute;left:0;right:0;top:0;height:2px;
  background:rgba(255,255,255,.10);overflow:hidden}
.tour3d-barra i{display:block;height:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:left center;transition:transform .12s linear}
.tour3d-txt{flex:1 1 auto;min-width:0}
.tour3d-passo{margin:0 0 6px;font:700 10px/1 var(--font-display);letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);font-variant-numeric:tabular-nums}
.tour3d-tit{margin:0 0 6px;font:700 17px/1.25 var(--font-display);letter-spacing:.01em;
  color:var(--fg)}
.tour3d-corpo{margin:0;max-width:56ch;font-size:13.5px;line-height:1.55;color:var(--fg-dim)}
.tour3d-ctrl{flex:0 0 auto;display:flex;align-items:center;gap:8px;pointer-events:auto}
.tour3d-bt{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:38px;height:38px;padding:0 10px;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(12,12,13,.72);color:var(--fg-dim);
  font-size:12.5px;cursor:pointer;transition:.18s ease;backdrop-filter:blur(4px)}
.tour3d-bt:hover,.tour3d-bt:focus-visible{border-color:var(--fg-faint);color:var(--fg)}
.tour3d-bt-txt{padding:0 14px}
.tour3d-sair{border-color:rgba(255,42,42,.42);color:var(--fg)}
.tour3d-sair:hover{background:var(--accent);border-color:var(--accent)}
/* os outros botões saem de serviço enquanto a explicação corre */
.visor3d-cotabt.desativado{opacity:.4;pointer-events:none}
/* durante a explicação o modelo é do tour: o convite a arrastar sai de cena */
.em-tour .visor3d-dica{opacity:.35}

@media (max-width:820px){
  .tour3d{flex-direction:column;align-items:stretch;gap:12px;padding:52px 14px 14px}
  .tour3d-ctrl{justify-content:space-between}
  .tour3d-tit{font-size:15px}
  .tour3d-corpo{font-size:12.5px;max-height:5.6em;overflow:auto}
}
@media (prefers-reduced-motion:reduce){
  .tour3d{animation:none}
  .tour3d-barra i{transition:none}
}


/* coluna lateral */
.visor3d-lado{position:sticky;top:110px}
.visor3d-estados{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.visor3d-bt{padding:9px 14px;min-height:36px;border-radius:999px;font-size:13px;
  border:1px solid var(--line-2);color:var(--fg-dim);transition:.18s ease}
.visor3d-bt:hover{border-color:var(--fg-faint);color:var(--fg)}
/* Branco sobre o vermelho da marca dá 3,74:1 — reprova o AA a 13px. O
   catálogo já resolve isso com pílula branca e texto preto (.filter-btn.active);
   seguir o mesmo padrão fecha o contraste em 21:1 e mantém a linguagem. */
.visor3d-bt.ativo{background:var(--fg);border-color:var(--fg);color:var(--bg);font-weight:600}
.visor3d-diz{margin:18px 0 0;min-height:3.2em;font-size:14px;line-height:1.55;
  color:var(--fg-dim)}
.visor3d-hr{border:0;border-top:1px solid var(--line);margin:28px 0}
.visor3d-cotabt{width:100%;justify-content:center}
.visor3d-med{margin:24px 0 0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.visor3d-med > div{display:flex;justify-content:space-between;gap:16px;
  padding:11px 14px;background:var(--bg-1)}
.visor3d-med dt{font-size:13px;color:var(--fg-mute)}
.visor3d-med dd{margin:0;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.visor3d-nota{margin:16px 0 0;font-size:12px;line-height:1.5;color:var(--fg-mute)}
.visor3d-nota strong{color:var(--fg-dim)}

/* palco do banner: a cena ocupa o quadro inteiro, sem moldura */
.stage-3d .visor3d-canvas{position:absolute;inset:0;aspect-ratio:auto;border:0;
  border-radius:0;background:transparent;cursor:grab}
.stage-3d .visor3d-canvas:active{cursor:grabbing}

@media (max-width:1000px){
  .visor3d-grade{grid-template-columns:1fr;gap:32px}
  .visor3d-lado{position:static}
}
@media (max-width:600px){
  .visor3d-canvas{aspect-ratio:1/1}
  .p3d-bal{width:min(246px,68vw)}
}
@media (prefers-reduced-motion:reduce){
  .visor3d-foto,.visor3d-cotas,.p3d,.p3d-bal{transition:none}
  /* anel parado: quem pediu menos movimento não precisa de coisa girando na
     tela para entender que está carregando — o rótulo já diz. */
  .visor3d-spin{animation:none;border-top-color:var(--accent);opacity:.8}
}
/* No banner o <img> é o LCP e fica embaixo da cena; some quando o 3D monta.
   A regra .visor3d-foto não pegava aqui porque a foto do hero é
   `.stage-product img`, sem aquela classe. */
.stage-3d img{transition:opacity .45s ease}
.stage-3d.pronto img{opacity:0}
/* troca de texto conforme haja ou não WebGL */
.visor3d-sem3d{display:none}
.sem-3d .visor3d-sem3d{display:block}
.sem-3d .visor3d-so3d{display:none}
/* fim do crossfade: a foto sai da composição (ver aoCarregar em f06-visor.js) */
.foto-fora .visor3d-foto,.stage-3d.foto-fora img{visibility:hidden}

/* Botão de WhatsApp que mostra o número no lugar de "Orçamento": dígito com
   largura fixa para o botão não mudar de tamanho entre um número e outro. */
.btn-whats{font-variant-numeric:tabular-nums;letter-spacing:.01em}