/* ═══════════════════════════════════════════════════════════
   Balanças Loader — Loader-Pro / Loader-EVO
   Sistema: monocromático. A página alterna blocos escuros e
   claros; o contraste é o único "acento". Sem cor decorativa.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* neutros com leve cast de aço — nada de preto/branco puros */
  --ink:      #0d1014;
  --ink-2:    #14181e;
  --card:     #1b2027;
  --card-hi:  #262c35;

  --paper:    #f1f0ed;
  --paper-2:  #e5e3de;
  --paper-3:  #d8d6d0;

  --white:    #fff;
  --g-100:    #eeeff1;
  --g-300:    #b9bec6;
  --g-400:    #929aa4;
  --g-500:    #6d757f;
  --g-700:    #3a424c;
  --g-900:    #1b2028;

  /* único acento: a cor do equipamento. Reservado para ação. */
  --accent:    #ff6b00;
  --accent-hi: #ff8c33;
  --accent-lo: #c24f00;

  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Manrope', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --sect:   clamp(4.5rem, 9vw, 9rem);
  --r:      14px;
  --r-sm:   8px;

  --line-l: rgba(10,11,12,.12);
  --line-d: rgba(255,255,255,.11);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }

/* a topbar é fixa (72px): sem esta folga o topo da seção alvo
   pararia atrás dela ao clicar num link do menu. */
section[id]{ scroll-margin-top:88px }
body{
  margin:0; background:var(--ink); color:var(--g-300);
  font:400 1rem/1.65 var(--body); overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit }
h1,h2,h3{ margin:0 }
p{ margin:0 }
ul,ol,dl,dd{ margin:0; padding:0 }
li{ list-style:none }

.skip{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--white); color:var(--ink); padding:.7rem 1.1rem; font:600 .9rem var(--body);
}
.skip:focus{ left:0 }
:focus-visible{ outline:2px solid var(--white); outline-offset:3px }
.s--light :focus-visible{ outline-color:var(--ink) }

/* ── grade ─────────────────────────────────────────────── */
.wrap{ width:min(1280px,100%); margin-inline:auto; padding-inline:var(--gutter) }
.wrap--narrow{ width:min(900px,100%) }

.s{ padding-block:var(--sect) }
.s--tight{ padding-block:clamp(3.5rem,7vw,6rem) }
.s--dark{ background:var(--ink); color:var(--g-300) }
.s--light{ background:var(--paper); color:var(--g-700) }

.grid-2{ display:grid; gap:clamp(2.2rem,5vw,5rem); grid-template-columns:1fr; align-items:center }
@media (min-width:940px){
  .grid-2{ grid-template-columns:1fr 1fr }
  .grid-2--rev > :first-child{ order:2 }
}

/* ── cabeçalhos de seção ───────────────────────────────── */
.head{ margin-bottom:clamp(2.2rem,4.5vw,3.5rem) }

/* blocos de largura cheia: título centralizado. O eyebrow acompanha,
   senão o traço dele ficaria solto na esquerda sob um título central. */
.head:not(.head--split){ text-align:center }
.head:not(.head--split) .eyebrow{ justify-content:center }
.head:not(.head--split) .h2{ margin-inline:auto }
.head--split{
  display:flex; flex-wrap:wrap; gap:1.5rem 3rem;
  align-items:flex-end; justify-content:space-between;
}
.head--split > div{ flex:1 1 24rem }
.head__note{ flex:1 1 22rem; max-width:38ch; font-size:.98rem; color:var(--g-400) }
.s--light .head__note{ color:var(--g-500) }

/* ── tipografia ────────────────────────────────────────── */
.eyebrow{
  display:flex; align-items:center; gap:.7rem; margin-bottom:1.1rem;
  font:500 .7rem/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent-lo);
}
.eyebrow::before{ content:""; width:24px; height:1px; background:currentColor; flex:none }
.eyebrow--light{ color:var(--accent) }

.h-hero{
  font-family:var(--display);
  /* headline longa: fonte mais estreita permite corpo maior mantendo
     as 3 linhas dentro da coluna, sem quebra automática. */
  font-variation-settings:'wdth' 86,'wght' 700;
  font-size:clamp(1.75rem,3.45vw,2.95rem);
  line-height:1.02; letter-spacing:-.01em; text-transform:uppercase;
  color:var(--white); margin-bottom:1.5rem;
}
.h2{
  font-family:var(--display);
  font-variation-settings:'wdth' 106,'wght' 620;
  font-size:clamp(1.7rem,3vw,2.6rem);
  line-height:1.08; letter-spacing:-.005em;
  color:var(--white);
  /* sem limite de medida: nos blocos de largura cheia o título fecha
     em uma linha. Nas colunas de grade a própria coluna já limita. */
}
.s--light .h2{ color:var(--ink) }
.h2--xl{
  font-size:clamp(2.6rem,6vw,5rem);
  font-variation-settings:'wdth' 116,'wght' 720;
  text-transform:uppercase; line-height:.94; letter-spacing:-.015em;
}
.h2--xl .thin{ font-variation-settings:'wdth' 62,'wght' 300; color:var(--g-500) }

.lead{ font-size:clamp(1rem,1.35vw,1.15rem); color:var(--g-300); max-width:46ch }
.p{ margin-bottom:1.1rem; max-width:58ch; color:var(--g-500) }
.p--light{ color:var(--g-400) }
.big{
  font:500 1.25rem var(--body); color:var(--ink); margin-bottom:1.2rem;
}
.big b{ font-weight:800 }

/* ── botões ────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.9rem 1.6rem; border:1px solid transparent; border-radius:100px;
  text-decoration:none; cursor:pointer;
  font:700 .88rem/1 var(--mono); letter-spacing:.05em; text-transform:uppercase;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
/* ação é laranja; todo o resto permanece neutro */
.btn--light{ background:var(--accent); color:#fff }
.btn--light:hover{ background:var(--accent-hi); transform:translateY(-2px) }
.btn--dark{ background:var(--accent); color:#fff }
.btn--dark:hover{ background:var(--accent-hi); transform:translateY(-2px) }
.btn--line{ border-color:var(--line-d); color:var(--white); background:rgba(255,255,255,.04) }
.btn--line:hover{ border-color:var(--white); background:rgba(255,255,255,.1) }
.btn--lg{ padding:1.05rem 2rem; font-size:.96rem }

/* ── botões no mobile ──────────────────────────────────
   Centralizados e com corpo/respiro menores: em 375px o texto
   "Quero falar com um consultor" não cabia e quebrava em duas linhas. */
@media (max-width:640px){
  .s .btn,
  .cmp__foot .btn,
  .evo__plus .btn{
    display:flex; width:fit-content; max-width:100%;
    margin-inline:auto; align-self:center; text-align:center;
  }
  .btn{ font-size:.8rem; padding:.9rem 1.3rem }
  .btn--lg{ font-size:.85rem; padding:1rem 1.5rem }
  .cmp__foot{ justify-content:center; text-align:center }
  .cmp__legend{ justify-content:center }
}

/* ── topo ──────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:60;
  background:rgba(10,11,12,.72); backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line-d);
}
.topbar__in{
  width:min(1280px,100%); margin-inline:auto; padding:.85rem var(--gutter);
  display:flex; align-items:center; gap:1.4rem;
}
.brand img{ height:44px; width:auto }
.nav{ display:none; margin-left:auto; gap:1.7rem }
.nav a{
  position:relative; text-decoration:none; white-space:nowrap;
  font:500 .84rem var(--body); color:var(--g-400); padding-block:.3rem;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--accent); transition:width .25s ease;
}
.nav a:hover{ color:var(--white) }
.nav a:hover::after{ width:100% }
.topbar__cta{ display:none }
@media (min-width:1080px){ .nav{ display:flex } .topbar__cta{ display:inline-flex } }

.burger{
  margin-left:auto; width:44px; height:38px; background:none; cursor:pointer;
  border:1px solid var(--line-d); border-radius:var(--r-sm);
  display:grid; place-content:center; gap:5px;
}
.burger span{ display:block; width:18px; height:1.5px; background:var(--g-300); transition:transform .2s }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.2px) rotate(45deg) }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.2px) rotate(-45deg) }
@media (min-width:1080px){ .burger{ display:none } }

.navmob[hidden]{ display:none }
.navmob{
  display:flex; flex-direction:column; gap:.1rem;
  padding:1rem var(--gutter) 1.6rem;
  background:var(--ink-2); border-bottom:1px solid var(--line-d);
}
.navmob a{ text-decoration:none; padding:.75rem 0; color:var(--g-300); font-weight:500 }
.navmob .btn{ margin-top:.9rem }

/* ══════════════ HERO ══════════════ */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(560px,88vh,860px);
  display:flex; flex-direction:column; justify-content:flex-end;
  /* sobe para trás da topbar (que é sticky e ocupava espaço no fluxo,
     deixando uma faixa preta acima do vídeo) e devolve o espaço como
     padding, para o conteúdo não ficar escondido atrás dela. */
  margin-top:calc(-1 * var(--topbar-h, 72px));
  padding-top:calc(var(--topbar-h, 72px) + clamp(3rem,10vh,7rem));
}
.hero__media{ position:absolute; inset:0; z-index:-1; background:var(--ink) }

/* iframe não aceita object-fit:cover — o enquadramento vem de dimensionar
   o vídeo em 16:9 e deixar o excedente ser cortado pelo overflow. */
.hero__yt{ position:absolute; inset:0; overflow:hidden }
/* O iframe precisa ser SEMPRE 16:9. Se a caixa tiver outra proporção,
   o player encaixa o vídeo dentro dela e preenche o resto com preto —
   era daí que vinha a faixa preta no mobile, dentro do próprio iframe.
   aspect-ratio trava a proporção; os min-* garantem que ele cubra o
   container; e o excedente sai para fora pelo overflow do pai. */
.hero__yt iframe{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  aspect-ratio:16/9;
  width:auto; height:auto;
  min-width:100%; min-height:100%;
  border:0; pointer-events:none;
  filter:grayscale(.28) contrast(1.03) brightness(1.06);
}
/* véu mais aberto: o vídeo aparece. O gradiente da esquerda continua
   mais forte porque é onde a headline branca precisa de contraste,
   e a base segue escura para sustentar a barra de números. */
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(13,16,20,.58) 0%, rgba(13,16,20,.18) 36%, rgba(13,16,20,.88) 100%),
    linear-gradient(90deg, rgba(13,16,20,.7) 0%, rgba(13,16,20,.06) 62%);
}
.hero__grid{
  position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:clamp(60px,7vw,110px) clamp(60px,7vw,110px);
  mask-image:radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 78%);
}
/* No mobile o vídeo preenche o container inteiro, centralizado — o corte
   sobra igual em cima e embaixo. O conteúdo do hero fica centralizado. */
@media (max-width:820px){
  .hero__copy{ text-align:center }
  .hero__copy .eyebrow{ justify-content:center }
  .hero__copy .h-hero,
  .hero__copy .lead{ margin-inline:auto }
  .hero__acts{ justify-content:center }
}

.hero__in{
  display:grid; grid-template-columns:1fr; align-items:center;
  gap:clamp(1.5rem,4vw,3.5rem);
  padding-bottom:clamp(2.5rem,6vw,4.5rem);
}
@media (min-width:980px){ .hero__in{ grid-template-columns:1.05fr .95fr } }

.hero__gear{ margin:0 }
.hero__gear img{
  width:100%; max-width:520px; margin-inline:auto; height:auto;
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.7));
}
.hero__acts{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem }

.hero__stats{
  display:grid; grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--line-d);
  background:rgba(10,11,12,.5); backdrop-filter:blur(8px);
}
@media (min-width:820px){ .hero__stats{ grid-template-columns:repeat(4,1fr) } }
.hero__stats li{
  padding:1.4rem clamp(1.25rem,4vw,3.5rem);
  border-right:1px solid var(--line-d); border-bottom:1px solid var(--line-d);
  display:flex; flex-direction:column; gap:.2rem;
}
@media (min-width:820px){ .hero__stats li{ border-bottom:none } }
.hero__stats li:last-child{ border-right:none }
.hero__stats b{
  font-family:var(--display); font-variation-settings:'wdth' 108,'wght' 700;
  font-size:clamp(1.5rem,2.4vw,2rem); line-height:1; color:var(--white);
}
.hero__stats span{ font:400 .74rem var(--mono); color:var(--g-500); letter-spacing:.02em }

/* ══════════════ MÁQUINAS ══════════════ */
.machines{ display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)) }
.machines li{
  background:var(--white); border:1px solid var(--line-l); border-radius:var(--r);
  padding:1.7rem 1rem 1.2rem; text-align:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.machines li:hover{ transform:translateY(-5px); box-shadow:0 18px 34px -22px rgba(10,11,12,.5) }
.machines img{
  height:64px; width:auto; margin:0 auto 1rem; object-fit:contain;
  filter:grayscale(.55); transition:filter .3s ease;
}
.machines li:hover img{ filter:grayscale(0) }
.machines span{
  font:500 .74rem var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--g-700);
}

/* ══════════════ LOADER-EVO — bento ══════════════ */
.evo{ display:grid; gap:.9rem; grid-template-columns:1fr }

/* tablet: as quatro fotos em 2×2, card de diferenciais abaixo */
@media (min-width:560px){
  .evo{ grid-template-columns:1fr 1fr }
  .evo__plus{ grid-column:1 / -1 }
}

/* desktop: 2×2 à esquerda, card ocupando a coluna da direita */
@media (min-width:900px){
  .evo{ grid-template-columns:repeat(3,1fr); grid-auto-rows:minmax(0,auto) }
  .evo__hero{ grid-column:1; grid-row:1 }
  .evo__s1{ grid-column:2; grid-row:1 }
  .evo__s2{ grid-column:1; grid-row:2 }
  .evo__s3{ grid-column:2; grid-row:2 }
  .evo__plus{ grid-column:3; grid-row:1 / 3 }
}
.evo figure{
  position:relative; margin:0; overflow:hidden;
  border:1px solid var(--line-d); border-radius:var(--r); background:var(--card);
}
.evo figure img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.4) contrast(1.04);
  transition:transform .6s cubic-bezier(.2,.7,.3,1), filter .4s ease;
}
.evo figure:hover img{ transform:scale(1.04); filter:grayscale(0) contrast(1.04) }
/* as quatro no mesmo formato: a grade 2×2 só fecha se forem iguais */
.evo__hero img,.evo__s1 img,.evo__s2 img,.evo__s3 img{ aspect-ratio:4/3 }
.evo figcaption{
  position:absolute; left:1rem; bottom:1rem;
  font:500 .68rem var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--white);
  background:rgba(10,11,12,.6); backdrop-filter:blur(6px);
  border:1px solid var(--line-d); border-radius:100px; padding:.35rem .85rem;
}

.evo__plus{
  display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line-d); border-radius:var(--r);
  padding:clamp(1.4rem,2.4vw,2rem);
}
.evo__plus-t{
  font:500 .7rem var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--g-500); margin-bottom:1.2rem;
}
.evo__plus ul{ display:flex; flex-direction:column; margin-bottom:1.6rem }
.evo__plus li{
  display:flex; align-items:center; gap:.8rem;
  padding:.85rem 0; border-top:1px solid var(--line-d);
  color:var(--white); font-size:1rem; font-weight:500;
}
.evo__plus li::before{
  content:""; flex:none; width:6px; height:6px; border-radius:50%;
  background:var(--white); box-shadow:0 0 0 4px rgba(255,255,255,.1);
}
.evo__plus .btn{ margin-top:auto; align-self:flex-start }

/* ══════════════ painel (assinatura) ══════════════ */
.panel{
  background:var(--ink); border:1px solid rgba(255,255,255,.14); border-radius:var(--r);
  padding:1.6rem clamp(1.2rem,3vw,1.9rem) 1.5rem;
  box-shadow:0 34px 70px -30px rgba(10,11,12,.7);
}
.panel__head{
  display:flex; justify-content:space-between; align-items:center; gap:.8rem;
  padding-bottom:1.1rem; border-bottom:1px solid var(--line-d);
}
.panel__brand{ font:700 .74rem var(--mono); letter-spacing:.3em; color:var(--g-500) }
.panel__mat{
  font:500 .68rem var(--mono); letter-spacing:.06em; color:var(--white);
  border:1px solid var(--line-d); border-radius:100px; padding:.22rem .7rem;
}
.panel__live{
  display:inline-flex; align-items:center; gap:.45rem;
  font:500 .66rem var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--g-400);
}
.panel__live i{
  width:6px; height:6px; border-radius:50%; background:var(--white);
  animation:blip 1.7s ease-in-out infinite;
}
@keyframes blip{ 0%,100%{opacity:1} 50%{opacity:.2} }

.panel__meta{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding-top:.95rem;
}
.panel__who{
  font:500 .9rem var(--mono); color:var(--g-300); letter-spacing:.02em;
}

.panel__now{ padding-block:1.1rem 1.3rem }
.panel__lbl{
  font:500 .68rem var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--g-500);
}
.readout{
  display:flex; align-items:baseline; gap:.55rem; margin-top:.4rem;
  font-family:var(--display); font-variation-settings:'wdth' 100,'wght' 600;
  font-variant-numeric:tabular-nums;
  font-size:clamp(3rem,7.5vw,4.6rem); line-height:1; color:var(--accent);
  text-shadow:0 0 30px rgba(255,107,0,.35);
}
.readout em{
  font-family:var(--mono); font-style:normal; font-size:1rem; font-weight:500;
  color:var(--g-500); letter-spacing:.08em;
}

.panel__total{ padding-top:1.2rem; border-top:1px solid var(--line-d) }
.panel__row{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding-block:.18rem }
.panel__val{ font:500 .84rem var(--mono); color:var(--g-500); font-variant-numeric:tabular-nums }
.panel__val b{ color:var(--white); font-weight:700; font-size:1.05rem }

.gauge{
  position:relative; height:6px; margin-top:.9rem;
  background:rgba(255,255,255,.09); border-radius:100px; overflow:hidden;
}
.gauge__fill{
  height:100%; width:0%; background:var(--accent); border-radius:100px;
  transition:width .5s cubic-bezier(.2,.7,.3,1), background .3s;
}
.gauge__fill.is-done{ background:var(--white) }
.gauge__fill.is-over{
  background:repeating-linear-gradient(45deg,var(--accent) 0 6px,var(--g-700) 6px 12px);
}
.panel__state{
  margin-top:.8rem; font:500 .72rem var(--mono); letter-spacing:.04em;
  color:var(--g-500); min-height:1.1em;
}
.panel__state.is-good{ color:var(--white) }
.panel__state.is-over{ color:var(--white) }

.ticket{ margin-top:1.4rem; padding-top:1.1rem; border-top:1px dashed rgba(255,255,255,.22) }
.ticket__t{
  font:500 .64rem var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--g-500); margin-bottom:.6rem;
}
.ticket ul{ display:flex; flex-direction:column; gap:.3rem; min-height:5.2rem }
.ticket li{
  display:flex; justify-content:space-between; gap:1rem;
  font:400 .74rem var(--mono); color:var(--g-300);
  font-variant-numeric:tabular-nums; animation:print .3s ease both;
}
.ticket li span:first-child{ color:var(--g-500) }
.ticket li.is-final{
  color:var(--white); font-weight:700;
  border-top:1px solid rgba(255,255,255,.2); padding-top:.4rem; margin-top:.15rem;
}
@keyframes print{ from{opacity:0; transform:translateY(-5px)} to{opacity:1; transform:none} }

/* ══════════════ comparativo Pro × EVO ══════════════ */
.s--dark2{ background:var(--ink-2); color:var(--g-300) }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.cmp{ overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--g-700) transparent }
.cmp__t{
  width:100%; border-collapse:collapse; text-align:left;
  min-width:min(100%,420px);
}
.cmp__t thead th{
  padding:0 0 1.1rem; vertical-align:bottom;
  border-bottom:1px solid rgba(255,255,255,.28);
}
.cmp__t thead th:not(:first-child),
.cmp__t td{ width:clamp(74px,13vw,132px); text-align:center }

.cmp__model{
  display:block;
  font-family:var(--display); font-variation-settings:'wdth' 116,'wght' 720;
  font-size:clamp(1.4rem,3.2vw,2.4rem); line-height:1;
  text-transform:uppercase; letter-spacing:-.01em; color:var(--g-500);
}
.cmp__model--evo{ color:var(--accent) }

.cmp__t tbody th{
  padding:.95rem 1rem .95rem 0;
  font:500 .95rem/1.4 var(--body); color:var(--g-300);
  border-bottom:1px solid var(--line-d);
}
.cmp__t tbody td{
  padding:.95rem 0; border-bottom:1px solid var(--line-d); vertical-align:middle;
}
/* a coluna da EVO fica levemente elevada, sem cor */
.cmp__t thead th:last-child,
.cmp__t tbody td:last-child{ background:rgba(255,107,0,.06) }
.cmp__t tbody td:last-child .dot{
  background:var(--accent); box-shadow:0 0 0 4px rgba(255,107,0,.15);
}
.cmp__t tbody tr:hover th{ color:var(--white) }
.cmp__t tbody tr:hover td{ background:rgba(255,255,255,.06) }

.dot{
  display:inline-block; width:11px; height:11px; border-radius:50%;
  background:var(--white); box-shadow:0 0 0 4px rgba(255,255,255,.09);
}
.dot--no{
  background:transparent; border:1.5px solid var(--g-700); box-shadow:none;
}

.cmp__foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem;
  margin-top:2rem;
}
.cmp__legend{
  display:inline-flex; align-items:center; gap:.55rem;
  font:500 .72rem var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--g-500);
}
.cmp__legend .dot{ margin-left:.6rem }
.cmp__legend .dot:first-child{ margin-left:0 }
.cmp__note{ flex:1 1 18rem; font-size:.85rem; color:var(--g-500) }
.cmp__foot .btn{ margin-left:auto }

/* ══════════════ vídeo incorporado ══════════════ */
.video{ margin-top:clamp(3rem,6vw,5rem) }
.video__t{
  font-family:var(--display); font-variation-settings:'wdth' 100,'wght' 640;
  font-size:clamp(1.3rem,2.9vw,2.4rem); line-height:1.12; letter-spacing:-.015em;
  color:var(--ink); margin:0 auto 1.4rem; text-align:center;
  white-space:nowrap;   /* título em uma linha só */
}
/* em tela estreita a linha única não cabe: deixa quebrar em vez de vazar */
@media (max-width:560px){ .video__t{ white-space:normal } }

.video__frame{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  max-width:820px; margin-inline:auto;
  border-radius:var(--r); background:var(--ink);
  border:1px solid var(--line-l);
  box-shadow:0 30px 60px -34px rgba(13,16,20,.55);
}
.video__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

/* ══════════════ trilho de fotos ══════════════ */
.rail{
  display:flex; gap:.9rem; overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x mandatory; padding-bottom:.8rem;
  scrollbar-width:thin; scrollbar-color:var(--g-700) transparent;
}
.rail li{ flex:0 0 clamp(250px,30vw,400px); scroll-snap-align:start }
.rail img{
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r);
  filter:grayscale(.5); transition:filter .4s ease;
}
.rail img:hover{ filter:grayscale(0) }
/* especificidade maior que .head--split > div, senão os controles herdam
   flex:1 1 24rem e param no meio da linha em vez de irem para a direita. */
.head--split > .rail__ctrl{ flex:0 0 auto; margin-left:auto }
.rail__ctrl{ display:flex; gap:.5rem }
.rail__nav{
  width:44px; height:44px; cursor:pointer; border-radius:50%;
  background:transparent; color:var(--white); border:1px solid var(--line-d);
  font:400 1rem var(--mono); display:grid; place-content:center;
  transition:background .2s ease, color .2s ease;
}
.rail__nav:hover{ background:var(--white); color:var(--ink) }

/* cada foto vira botão (o JS embrulha a imagem) para abrir a ampliação */
.rail__open{
  display:block; width:100%; padding:0; border:0; background:none;
  cursor:zoom-in; border-radius:var(--r); overflow:hidden;
}

/* ══════════════ ampliação da foto ══════════════ */
.lb[hidden]{ display:none }
.lb{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  padding:clamp(3.5rem,7vw,5rem) clamp(1rem,4vw,5.5rem);
  background:rgba(8,10,12,.95); backdrop-filter:blur(8px);
}
.lb__img{
  max-width:100%; max-height:100%;
  width:auto; height:auto; object-fit:contain;
  border-radius:var(--r-sm); box-shadow:0 40px 90px -30px #000;
}
.lb__btn{
  position:absolute; display:grid; place-content:center; cursor:pointer;
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.1); color:var(--white);
  border:1px solid rgba(255,255,255,.2);
  font:400 1.15rem var(--mono); line-height:1;
  transition:background .2s ease, color .2s ease;
}
.lb__btn:hover{ background:var(--white); color:var(--ink) }
.lb__prev{ left:clamp(.5rem,2vw,2rem); top:50%; margin-top:-24px }
.lb__next{ right:clamp(.5rem,2vw,2rem); top:50%; margin-top:-24px }
.lb__close{ top:clamp(.75rem,2vw,1.5rem); right:clamp(.75rem,2vw,1.5rem) }
.lb__count{
  position:absolute; bottom:clamp(.9rem,2.5vw,1.75rem); left:50%; transform:translateX(-50%);
  font:500 .75rem var(--mono); letter-spacing:.16em; color:var(--g-400);
}
@media (max-width:560px){
  .lb__btn{ width:42px; height:42px }
  .lb__prev{ margin-top:0; top:auto; bottom:clamp(.9rem,2.5vw,1.75rem); left:1rem }
  .lb__next{ margin-top:0; top:auto; bottom:clamp(.9rem,2.5vw,1.75rem); right:1rem }
}

/* ══════════════ cards / ganhos ══════════════ */
.cards{ display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)) }
.card{
  background:var(--white); border:1px solid var(--line-l); border-radius:var(--r);
  padding:2rem 1.7rem 1.9rem; transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform:translateY(-5px); box-shadow:0 22px 40px -26px rgba(10,11,12,.5) }
/* Medido: estes PNGs já são de traço preto (luminância ~0-5).
   NÃO inverter — em fundo claro eles funcionam como estão. */
.card__ico{
  width:40px; height:40px; object-fit:contain; margin-bottom:1.3rem;
  filter:grayscale(1) opacity(.8);
}
.card h3{
  font-family:var(--display); font-variation-settings:'wdth' 100,'wght' 620;
  font-size:1.18rem; line-height:1.18; color:var(--ink); margin-bottom:.65rem;
}
.card p{ font-size:.94rem; color:var(--g-500) }

.gains{
  display:grid; gap:0; margin-top:3rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  border-top:1px solid var(--line-l);
}
.gains article{ padding:1.7rem 1.3rem 1.5rem 0; border-bottom:1px solid var(--line-l) }
@media (min-width:768px){
  .gains article{ border-bottom:none; border-right:1px solid var(--line-l); padding-inline:1.6rem }
  .gains article:first-child{ padding-left:0 }
  .gains article:last-child{ border-right:none }
}
.gains h3{ font:700 .98rem var(--body); color:var(--ink); margin-bottom:.5rem; line-height:1.3 }
.gains p{ font-size:.9rem; color:var(--g-500) }

/* ══════════════ checks / benefícios ══════════════ */
.checks{ display:flex; flex-direction:column; margin:1.5rem 0 1.9rem }
.checks li{
  position:relative; padding:.7rem 0 .7rem 1.8rem;
  border-top:1px solid var(--line-d); color:var(--g-300); font-size:.95rem;
}
.checks li::before{
  content:""; position:absolute; left:0; top:1.15em;
  width:5px; height:5px; border-radius:50%; background:var(--white);
}

.incl{ display:grid; gap:0 2.5rem; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) }
.incl li{
  display:flex; gap:1.1rem; align-items:flex-start;
  padding:1.35rem 0; border-top:1px solid var(--line-l);
}
/* Medido: estes são de traço branco (luminância 255), feitos para fundo
   escuro. Em seção clara precisam ser invertidos, senão somem no papel. */
.incl img{
  width:34px; height:34px; object-fit:contain; flex:none;
  filter:grayscale(1) invert(1) opacity(.8);
}
.incl p{ font-size:.95rem; color:var(--g-500) }
.incl b{ color:var(--ink); font-weight:700 }

/* ══════════════ mapa ══════════════ */
.mapa{ display:grid; gap:clamp(2rem,4vw,3.5rem); grid-template-columns:1fr; align-items:center }
@media (min-width:940px){ .mapa{ grid-template-columns:1fr .85fr } }

.mapa__fig{
  background:
    radial-gradient(70% 60% at 50% 45%, rgba(255,255,255,.06), transparent 70%),
    var(--ink-2);
  border:1px solid var(--line-d); border-radius:var(--r);
  padding:clamp(1rem,3vw,2rem);
}
.mapa__fig svg{ width:100%; height:auto; display:block }
.mapa__br{
  fill:rgba(255,255,255,.05);
  stroke:rgba(255,255,255,.28); stroke-width:1.5; stroke-linejoin:round;
}
.pin{ cursor:default }
/* transform-box:fill-box é obrigatório aqui: sem ele o transform-origin:center
   de um elemento SVG toma o viewBox inteiro como referência e o halo,
   ao escalar, sai de cima do pino e vaga pelo mapa. */
.pin__halo{
  fill:rgba(255,255,255,.1);
  transform-box:fill-box; transform-origin:center;
  transition:fill .25s ease;
}

/* capitais: onde a rede atende. O halo vem de um stroke largo e translúcido —
   mesma leitura dos pinos das bases, sem precisar de outro elemento.
   Raio externo ~6,6px contra os 15px das bases: a hierarquia se mantém. */
.uf{
  fill:var(--g-400); opacity:.85;
  stroke:rgba(255,255,255,.1); stroke-width:8;
  transition:fill .25s ease, stroke .25s ease, opacity .25s ease;
}
.uf:hover{ fill:var(--white); stroke:rgba(255,255,255,.24); opacity:1 }
.pin__dot{ fill:var(--g-400); transition:fill .25s ease, r .25s ease }
.pin--hq .pin__dot{ fill:var(--accent) }
.pin--hq .pin__halo{ fill:rgba(255,107,0,.28); animation:pulse 2.8s ease-out infinite }
@keyframes pulse{
  0%{ transform:scale(.7); opacity:.9 }
  70%{ transform:scale(1.5); opacity:0 }
  100%{ transform:scale(1.5); opacity:0 }
}
.pin.is-active .pin__dot{ fill:var(--accent) }
.pin.is-active .pin__halo{ fill:rgba(255,107,0,.3) }

.mapa__claim{
  font-family:var(--display); font-variation-settings:'wdth' 106,'wght' 680;
  font-size:clamp(1.5rem,2.6vw,2.2rem); line-height:1.05; color:var(--white);
  margin-bottom:.6rem;
}
.mapa__claim em{ font-style:normal; color:var(--accent) }
.mapa__sub{ color:var(--g-400); font-size:.95rem; margin-bottom:2rem; max-width:36ch }

.mapa__t{
  font:500 .7rem var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--g-500); margin-bottom:1rem;
}
.mapa__list ul{ display:flex; flex-direction:column }
.mapa__list li{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.8rem 0; border-top:1px solid var(--line-d);
  transition:padding-left .25s ease, border-color .25s ease;
}
.mapa__list li.is-active{ padding-left:.7rem; border-color:rgba(255,255,255,.4) }
.mapa__list b{ font:600 1rem var(--body); color:var(--white) }
/* a UF acompanha o nome, em peso menor para não competir com ele */
.mapa__list b i{
  font:500 .8rem var(--mono); font-style:normal;
  letter-spacing:.06em; color:var(--g-500);
}
.mapa__list span{ font:500 .72rem var(--mono); letter-spacing:.1em; color:var(--g-500) }
/* a fábrica é o único ponto laranja no mapa; o rótulo acompanha */
.mapa__list li[data-city="rio-preto"] span{ color:var(--accent) }
.mapa__n{
  margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line-d);
  font:500 .8rem var(--mono); color:var(--g-400);
}
.mapa__list .btn{ margin-top:1.6rem }

/* ══════════════ passos ══════════════ */
/* o bloco inteiro é estreitado e centralizado: antes as divisórias iam
   até 1171px enquanto o texto parava em ~700px, deixando um vão à direita. */
.steps{
  display:grid; grid-template-columns:1fr;
  /* 780 = ~700px de texto + 38px do número + 40px do gap.
     Preserva a medida original do parágrafo, que garante 2 linhas em todos. */
  max-width:780px; margin-inline:auto;
  border-top:1px solid var(--line-l);
}
.steps li{
  display:flex; gap:clamp(1rem,3vw,2.5rem); align-items:flex-start;
  padding:1.6rem 0; border-bottom:1px solid var(--line-l);
  transition:padding-left .3s ease;
}
.steps li:hover{ padding-left:.8rem }
.steps__n{
  font:700 .8rem var(--mono); letter-spacing:.1em; color:var(--g-400);
  flex:none; width:2.4rem; padding-top:.35rem;
}
/* a medida agora vem do container, não do parágrafo */
.steps p{ color:var(--g-700); max-width:none; font-size:1.02rem }
.steps li:last-child p{ color:var(--ink); font-weight:500 }

/* ══════════════ ficha técnica ══════════════ */
.spec{ display:grid; gap:0; grid-template-columns:1fr; border-top:1px solid var(--line-d) }
@media (min-width:760px){ .spec{ grid-template-columns:1fr 1fr; column-gap:3.5rem } }
.spec > div{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:.3rem 1.5rem; padding:1.05rem 0; border-bottom:1px solid var(--line-d);
}
.spec dt{
  font:500 .74rem var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--g-500);
}
.spec dd{
  font-family:var(--display); font-variation-settings:'wdth' 100,'wght' 550;
  font-size:1.05rem; color:var(--white); font-variant-numeric:tabular-nums;
}

/* ══════════════ figuras ══════════════ */
/* figure tem margem padrão do navegador (16px 40px) — some com ela,
   senão a imagem encolhe 80px dentro da própria coluna. */
.shot{ margin:0 }

/* No R&R Sync a tela é o argumento, então a coluna da imagem ganha peso.
   Atenção: em .grid-2--rev a figura é renderizada primeiro e cai na
   coluna 1 — o peso maior vai na primeira faixa, não na segunda. */
@media (min-width:940px){
  #sync .grid-2{ grid-template-columns:1.14fr .86fr }
  /* Empresa: a figura é o primeiro filho e cai na coluna 1.
     Coluna mais larga aproxima a altura do vídeo 16:9 da do texto ao lado. */
  #empresa .grid-2{ grid-template-columns:1.15fr .85fr }
}
/* screenshot do produto: sem dessaturar, senão o laranja do logo R&R Sync
   e os ícones da tabela viram cinza. */
#sync .shot img,#sync .shot:hover img{ width:100%; max-width:none; filter:none }
#empresa .shot .video__frame{ max-width:none }

.shot img{ border-radius:var(--r); filter:grayscale(.35); transition:filter .4s ease }
.s--dark .shot img{ filter:grayscale(.35) brightness(1.04) }
.shot:hover img,.s--dark .shot:hover img{ filter:grayscale(0) }

/* ══════════════ faq ══════════════ */
.faq{ margin:0 0 2.4rem; border-top:1px solid var(--line-d) }
.faq details{ border-bottom:1px solid var(--line-d) }
.faq summary{
  cursor:pointer; list-style:none; padding:1.35rem 2.5rem 1.35rem 0; position:relative;
  font:600 1.02rem var(--body); color:var(--white);
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:""; position:absolute; right:.4rem; top:50%;
  width:11px; height:11px; margin-top:-6px;
  border-right:1.5px solid var(--g-400); border-bottom:1.5px solid var(--g-400);
  transform:rotate(45deg); transition:transform .25s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); border-color:var(--white) }
.faq summary:hover{ color:var(--g-300) }
.faq details p{ padding:0 2.5rem 1.5rem 0; color:var(--g-400); font-size:.96rem; max-width:70ch }

/* ══════════════ orçamento: formulário e modal ══════════════ */
@media (min-width:940px){
  /* a coluna de texto acompanha o centro do formulário, não o topo */
  .grid-2--quote{ grid-template-columns:.85fr 1.15fr; align-items:center }
}

.direct{ display:flex; flex-direction:column; margin-top:2rem }
.direct a{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.3rem .9rem;
  padding:.85rem 0; min-width:0; text-decoration:none;
  border-top:1px solid var(--line-l);
  font:500 1rem var(--mono); color:var(--ink);
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
.direct a:hover{ color:var(--accent-lo) }
.direct span{
  font:500 .7rem var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--g-500); flex:none; width:6.5rem;
}
@media (max-width:560px){ .direct span{ width:100% } }

.form{
  background:#fff; border:1px solid var(--line-l); border-radius:var(--r);
  padding:clamp(1.3rem,3vw,2rem);
  box-shadow:0 24px 50px -34px rgba(13,16,20,.45);
}
.form__grid{ display:grid; gap:1rem; grid-template-columns:repeat(2,1fr) }
@media (max-width:540px){ .form__grid{ grid-template-columns:1fr } }

.fld{ display:flex; flex-direction:column; gap:.4rem; min-width:0 }
.fld--full{ grid-column:1 / -1 }
.fld span{
  font:500 .7rem var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--g-500);
}
.fld i,.form__note i{ font-style:normal; color:var(--accent); font-weight:700 }
.fld input,.fld select{
  font:400 .98rem var(--body); color:var(--ink); width:100%;
  padding:.75rem .85rem; background:var(--paper);
  border:1px solid var(--line-l); border-radius:var(--r-sm);
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.fld input:focus,.fld select:focus{
  background:#fff; border-color:var(--accent); outline:none;
  box-shadow:0 0 0 3px rgba(255,107,0,.16);
}
/* só marca erro depois que a pessoa mexeu no campo */
.fld input:user-invalid,.fld select:user-invalid{ border-color:#d33; background:#fff6f5 }

.btn--block{ width:100%; margin-top:1.4rem }
.form__note{ margin-top:.9rem; font-size:.82rem; color:var(--g-500); text-align:center }

/* ── modal ── */
.modal{
  border:none; padding:0; background:transparent;
  width:min(680px,calc(100% - 2rem)); max-height:90dvh;
  color:var(--ink); overflow:visible;
}
.modal::backdrop{ background:rgba(8,10,13,.72); backdrop-filter:blur(6px) }
.modal__box{
  position:relative; background:var(--paper);
  border:1px solid var(--line-l); border-radius:var(--r);
  padding:clamp(1.5rem,4vw,2.5rem);
  max-height:90dvh; overflow-y:auto;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
}
.modal__box .h2{ color:var(--ink); max-width:none }
.modal__box .p{ color:var(--g-500); margin-bottom:1.6rem }
.modal__box .eyebrow{ color:var(--accent-lo) }
/* dentro do modal o formulário não precisa de card próprio */
.modal__box .form{ background:transparent; border:none; padding:0; box-shadow:none }
.modal__x{
  position:absolute; top:.9rem; right:.9rem; z-index:2;
  width:38px; height:38px; cursor:pointer; border-radius:50%;
  background:transparent; border:1px solid var(--line-l); color:var(--g-500);
  font:400 1.4rem/1 var(--body); display:grid; place-content:center;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.modal__x:hover{ background:var(--ink); border-color:var(--ink); color:#fff }

/* ══════════════ rodapé ══════════════ */
.foot{ background:var(--ink); border-top:1px solid var(--line-d); padding-top:clamp(3rem,6vw,5rem) }
.foot__in{
  display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  padding-bottom:2.8rem;
}
.foot__brand img{ height:58px; width:auto; margin-bottom:1.1rem }
.foot__brand p{ font:400 .8rem var(--mono); color:var(--g-500); line-height:1.8 }
.foot__col h3{
  font:500 .68rem var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); margin-bottom:.9rem;
}
.foot__col p{ font-size:.9rem; color:var(--g-400); line-height:1.9 }
.foot__col a{ text-decoration:none }
.foot__col a:hover{ color:var(--white) }

.foot__word{
  font-family:var(--display); font-variation-settings:'wdth' 118,'wght' 750;
  font-size:clamp(3rem,15vw,11rem); line-height:.82; letter-spacing:-.02em;
  text-align:center; color:transparent;
  -webkit-text-stroke:1px rgba(255,107,0,.22);
  user-select:none; margin-bottom:-.06em; overflow:hidden;
}
.foot__legal{
  border-top:1px solid var(--line-d); padding-block:1.5rem;
  font:400 .76rem var(--mono); color:var(--g-500);
}

/* ══════════════ whatsapp ══════════════ */
.wa{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:70;
  width:52px; height:52px; border-radius:50%;
  background:#25d366; color:#fff;   /* verde do próprio WhatsApp */
  display:grid; place-content:center;
  box-shadow:0 12px 28px -10px rgba(0,0,0,.75);
  transition:transform .2s ease;
}
.wa:hover{ transform:scale(1.08) }

/* ══════════════ revelação ══════════════ */
.reveal{ opacity:0; transform:translateY(20px) }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}

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