*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

/* ═══ BRAND TOKENS — extraídos da identidade oficial Nacional EPI ═══ */
:root {
  /* Ciano da logo Nacional Limp — cor primária da marca */
  --cyan:    #20C9E5;
  --cyan-d:  #159FBA;
  --cyan-l:  #5FDCF2;
  --cyan-g:  rgba(32,201,229,.08);
  /* Azul institucional — compartilhado com a Nacional EPI */
  --navy:     #0D588C;
  --navy-l:   #1272B4;
  --navy-d:   #08324E;
  --navy-g:   rgba(13,88,140,.10);
  /* Neutros */
  --ink:      #061B30;
  --ink-2:    #0C2A44;
  --ink-3:    #14395C;
  --fog:      #F4F9FB;
  --mist:     #DDE9F1;
  --slate:    #6B7E92;
  --white:    #FFFFFF;
  /* Tipografia */
  --ff-head:  'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --ff-body:  'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --gold:     #F1A600;
  --gold-d:   #C98A00;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --wrap:     1180px;
}

body {
  font-family: var(--ff-body); background: var(--ink); color: var(--white);
  overflow-x: hidden; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--cyan); border-radius: 2px; }
::selection { background: var(--cyan); color: var(--ink); }

body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ═══ DEVICE DA MARCA — borrifador da logo (assinatura visual) ═══ */
.device {
  position:absolute; pointer-events:none; display:block; z-index:0;
  background:var(--cyan);
  -webkit-mask:url(assets/brand/device-spray.png) center/contain no-repeat;
          mask:url(assets/brand/device-spray.png) center/contain no-repeat;
}

/* ═══ SISTEMA DE FOTO — trata todas as imagens como uma família ═══ */
.ph { position:relative; overflow:hidden; background:var(--ink-2); isolation:isolate; }
.ph > img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.94) contrast(1.03);
  transition:transform .8s var(--ease-out), filter .5s;
}
/* Lavagem de marca: escurece a base e injeta o azul institucional nas sombras */
.ph::after {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,26,38,0) 42%, rgba(11,26,38,.55) 78%, rgba(11,26,38,.9) 100%),
    linear-gradient(0deg, rgba(13,88,140,.14), rgba(13,88,140,.14));
}
.ph--flat::after { background:linear-gradient(0deg, rgba(13,88,140,.10), rgba(13,88,140,.10)); }

/* ═══ NAV ═══ */
nav {
  position:fixed; top:0; left:0; width:100%; z-index:900;
  padding:0 5%; height:74px;
  display:flex; align-items:center; gap:20px;
  background:rgba(11,26,38,.92); backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(32,201,229,.18);
  animation:navIn .7s var(--ease-out) both;
  transition:height .3s var(--ease-out), background .3s;
}
nav.scrolled { height:64px; background:rgba(11,26,38,.98); }
@keyframes navIn { from{transform:translateY(-100%)} to{transform:translateY(0)} }
.nav-brand { display:flex; align-items:center; }
.nav-brand img { height:44px; width:auto; object-fit:contain; display:block; transition:height .3s var(--ease-out); }
nav.scrolled .nav-brand img { height:38px; }
.nav-links { display:flex; gap:26px; align-items:center; margin-left:auto; }
.nav-links a {
  font-family:var(--ff-head); font-size:.74rem; font-weight:600;
  letter-spacing:.6px; text-transform:uppercase; color:rgba(255,255,255,.62);
  transition:color .2s; position:relative; padding:4px 0;
}
.nav-links a::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--cyan); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease-out);
}
.nav-links a:hover { color:var(--white); }
.nav-links a:hover::after { transform:scaleX(1); }
.nav-cta {
  display:inline-flex; align-items:center; gap:8px;
  background:#25D366; color:var(--white);
  font-family:var(--ff-head); font-weight:700; font-size:.76rem; letter-spacing:.8px; text-transform:uppercase;
  padding:11px 18px; border-radius:4px;
  transition:background .2s, transform .15s, box-shadow .2s;
}
.nav-cta:hover { background:#1EB558; transform:translateY(-1px); box-shadow:0 6px 24px rgba(37,211,102,.32); }
.nav-cta svg { width:16px; height:16px; }
.nav-menu-btn { display:none; background:none; border:none; color:var(--white); cursor:pointer; padding:8px; }
.nav-menu-btn svg { width:24px; height:24px; }

/* ═══ HERO ═══
   Layout determinístico: painel de céu da marca em cima (texto sempre com
   espaço limpo) e a fachada da Loja 01 numa faixa ancorada embaixo (a loja
   aparece inteira em QUALQUER proporção de tela). O gradiente do painel
   termina no mesmo azul do céu da foto, então a emenda some. */
:root { --hero-band: clamp(260px, min(34vw, 52vh), 580px); }
#hero {
  position:relative; min-height:100svh; overflow:hidden;
  background:linear-gradient(180deg, var(--ink) 0%, #0A2B47 36%, #10528F 76%, #1571C6 100%);
  display:grid; align-content:center; justify-items:center; text-align:center;
  padding:104px 6% calc(var(--hero-band) + 20px);
}
/* ═══ CARROSSEL DAS LOJAS ═══
   Faixa ancorada no rodapé do hero. A altura acompanha largura E altura da
   janela, ficando sempre perto de 4:1 — a mesma proporção dos arquivos, então
   a fachada aparece praticamente inteira em qualquer tela. */
.hero-car {
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  height:var(--hero-band); overflow:hidden; background:var(--navy-d);
  border-top:2px solid rgba(32,201,229,.6);
}
.hero-car-track {
  display:flex; height:100%; width:100%;
  transition:transform .75s cubic-bezier(.55,.05,.25,1); will-change:transform;
}
.hero-slide { flex:0 0 100%; height:100%; position:relative; overflow:hidden; }
.hero-slide img { width:100%; height:100%; object-fit:cover; object-position:center 50%; display:block; }
.hero-slide::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:52%; z-index:2;
  background:linear-gradient(180deg, transparent 0%, rgba(5,22,38,.32) 34%, rgba(5,22,38,.8) 70%, rgba(4,18,32,.96) 100%);
  pointer-events:none;
}
.hero-car-bar {
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  display:flex; align-items:flex-end; justify-content:space-between; gap:22px;
  padding:0 5% 52px;
}
.car-progress { position:absolute; left:0; bottom:40px; height:2px; width:100%; z-index:6; background:rgba(255,255,255,.16); }
.car-progress i { display:block; height:100%; width:0; background:var(--cyan); }
.hero-car.playing .car-progress i { animation:carbar 6s linear forwards; }
@keyframes carbar { from{width:0} to{width:100%} }
.hero-car-id { text-align:left; min-height:46px; max-width:min(60%,540px); }
.hero-car-id-top { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.hero-car-id b {
  font-family:var(--ff-head); font-size:.66rem; font-weight:800; letter-spacing:.5px;
  color:var(--navy-d); background:var(--cyan); border-radius:3px; padding:4px 7px;
}
.hero-car-id strong {
  font-family:var(--ff-head); font-size:1.05rem; font-weight:700; letter-spacing:-.2px;
  color:var(--white); text-shadow:0 1px 3px rgba(4,20,36,1), 0 2px 14px rgba(4,20,36,.95);
}
.hero-car-id span {
  display:block; font-size:.84rem; font-weight:400; color:rgba(255,255,255,.92);
  text-shadow:0 1px 3px rgba(4,20,36,1), 0 2px 12px rgba(4,20,36,.95);
}
/* contador: deixa explícito que a loja da vez é uma de três */
.hero-car-id-top u {
  text-decoration:none; font-family:var(--ff-head); font-size:.72rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.72);
  padding-left:9px; margin-left:2px; border-left:1px solid rgba(255,255,255,.28);
  text-shadow:0 1px 3px rgba(4,20,36,1);
}
.hero-car-ctl { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.car-btn {
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  background:rgba(6,26,44,.55); border:1px solid rgba(255,255,255,.26); color:var(--white);
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(8px);
  transition:background .2s, border-color .2s, color .2s, transform .15s;
}
.car-btn:hover { background:var(--cyan); border-color:var(--cyan); color:var(--navy-d); transform:translateY(-2px); }
.car-btn svg { width:16px; height:16px; }
.car-btn .ic-pause { display:block; } .car-btn .ic-play { display:none; }
.hero-car.paused .car-btn .ic-pause { display:none; }
.hero-car.paused .car-btn .ic-play { display:block; }
/* ═══ SELETOR DAS TRÊS LOJAS ═══
   Substitui os pontinhos anônimos: as três fachadas ficam visíveis ao mesmo
   tempo, com número e rua. Quem chega vê que são três lojas sem esperar o
   carrossel girar. A miniatura reusa a foto do próprio slide — sem arquivo novo. */
.car-tabs { display:flex; align-items:center; gap:8px; margin:0 4px; }
.car-tab {
  display:flex; align-items:center; gap:9px; cursor:pointer; padding:4px 11px 4px 4px;
  background:rgba(6,26,44,.55); border:1px solid rgba(255,255,255,.22); border-radius:6px;
  backdrop-filter:blur(8px); text-align:left;
  transition:border-color .22s, background .22s, transform .15s;
}
.car-tab:hover { border-color:rgba(32,201,229,.7); transform:translateY(-2px); }
.car-tab[aria-current="true"] { border-color:var(--cyan); background:rgba(32,201,229,.16); }
.car-tab .t-thumb {
  width:54px; height:36px; border-radius:3px; flex-shrink:0;
  background-size:cover; background-position:center;
  filter:saturate(.9) brightness(.86); transition:filter .22s;
}
.car-tab[aria-current="true"] .t-thumb { filter:none; }
.car-tab .t-txt { display:flex; flex-direction:column; line-height:1.15; }
.car-tab .t-txt b {
  font-family:var(--ff-head); font-size:.62rem; font-weight:800; letter-spacing:.1em;
  color:var(--cyan); text-transform:uppercase;
}
.car-tab .t-txt i {
  font-style:normal; font-size:.82rem; font-weight:500; color:var(--white);
  text-shadow:0 1px 3px rgba(4,20,36,.9);
}
/* ═══ SELO DAS TRÊS LOJAS NO TOPO DO HERO ═══ */
.hero-selo {
  display:inline-flex; align-items:center; gap:9px; margin-bottom:18px;
  padding:9px 17px 9px 13px; border-radius:100px;
  background:rgba(32,201,229,.13); border:1px solid rgba(32,201,229,.45);
  font-family:var(--ff-head); font-size:.82rem; font-weight:700; letter-spacing:.02em;
  color:var(--cyan); transition:background .22s, border-color .22s;
}
.hero-selo:hover { background:rgba(32,201,229,.22); border-color:var(--cyan); }
.hero-selo svg { width:16px; height:16px; flex-shrink:0; }
.hero-selo em { font-style:normal; color:rgba(255,255,255,.82); font-weight:500; }
/* Véu em faixas, calibrado na composição da foto: escurece o miolo — onde fica
   o texto e onde a própria placa da loja tem letreiro — e abre embaixo, para a
   fachada branca, as bandeiras e o piso azul aparecerem em cor cheia. */
/* escurece o topo para a nav e assenta o texto sobre o painel */
.hero-scrim {
  position:absolute; left:0; right:0; top:0; height:62%; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(11,26,38,.75) 0%, rgba(11,26,38,.15) 32%, transparent 100%);
}
.hero-grid-bg {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image: linear-gradient(rgba(32,201,229,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(32,201,229,.05) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 64% 52% at 50% 36%, black 0%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 64% 52% at 50% 36%, black 0%, transparent 100%);
}
/* capacete sombreado atrás do texto */
.hero-device {
  left:50%; top:calc(50% - var(--hero-band) / 2); transform:translate(-50%,-50%);
  width:min(70vw,560px); aspect-ratio:768/798; z-index:2;
  opacity:.15;
  filter:drop-shadow(0 6px 26px rgba(4,22,40,.6));
}
.hero-inner { position:relative; z-index:3; max-width:860px; width:100%; }
/* o selo das 3 lojas entra junto com o resto do hero */
.hero-selo { opacity:0; animation:fadeUp .6s .2s var(--ease-out) both; }
.hero-h1 {
  font-family:var(--ff-head); font-weight:800;
  font-size:clamp(2.7rem,6.4vw,5.2rem); line-height:.98; letter-spacing:-2.4px; color:var(--white);
  opacity:0; animation:fadeUp .7s .35s var(--ease-out) both;
  text-shadow:0 4px 30px rgba(8,50,78,.6), 0 1px 3px rgba(0,0,0,.3);
  text-wrap:balance;
}
.hero-h1 em { color:var(--cyan); font-style:normal; }
.hero-body {
  margin:26px auto 0; font-size:1.05rem; line-height:1.8; font-weight:300;
  color:rgba(255,255,255,.8); max-width:600px;
  text-shadow:0 2px 16px rgba(8,50,78,.6);
  opacity:0; animation:fadeUp .7s .5s var(--ease-out) both;
}
.hero-actions {
  margin-top:32px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  opacity:0; animation:fadeUp .7s .65s var(--ease-out) both;
}
/* No hero os botões são mais compactos que no resto do site: a faixa das
   fachadas ficou mais alta e o bloco de texto precisa caber acima dela.
   Altura final ~46px — continua confortável para o dedo. */
.hero-actions .btn-primary { padding:14px 25px; font-size:.81rem; }
.hero-actions .btn-primary svg { width:18px; height:18px; }
.hero-actions .btn-ghost { padding:13px 21px; font-size:.81rem; }
.hero-actions .btn-ghost svg { width:15px; height:15px; }
.btn-primary {
  display:inline-flex; align-items:center; gap:10px;
  background:#25D366; color:var(--white);
  font-family:var(--ff-head); font-weight:700; font-size:.86rem; letter-spacing:.6px; text-transform:uppercase;
  padding:16px 28px; border-radius:4px;
  box-shadow:0 8px 32px rgba(37,211,102,.28);
  transition:transform .2s var(--ease-out), box-shadow .2s;
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 14px 44px rgba(37,211,102,.42); }
.btn-primary svg { width:20px; height:20px; flex-shrink:0; }
.btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(255,255,255,.24); color:rgba(255,255,255,.85);
  font-family:var(--ff-head); font-weight:600; font-size:.86rem; letter-spacing:.6px; text-transform:uppercase;
  padding:15px 24px; border-radius:4px; background:rgba(255,255,255,.03);
  transition:border-color .2s, color .2s, background .2s, transform .2s;
}
.btn-ghost:hover { border-color:var(--cyan); color:var(--cyan); background:rgba(32,201,229,.08); transform:translateY(-2px); }
.btn-ghost svg { width:16px; height:16px; }


.hero-ticker {
  position:absolute; bottom:0; left:0; right:0; height:40px; z-index:4;
  background:var(--cyan); display:flex; align-items:center; overflow:hidden;
}
.hero-ticker-track { display:flex; gap:56px; white-space:nowrap; animation:ticker 34s linear infinite; padding-left:56px; }
.hero-ticker-track span {
  font-family:var(--ff-head); font-size:.7rem; font-weight:700;
  letter-spacing:1.6px; text-transform:uppercase; color:var(--ink);
  display:flex; align-items:center; gap:14px;
}
.hero-ticker-track span::before { content:''; width:5px; height:5px; background:var(--ink); border-radius:50%; opacity:.55; }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ═══ STRIP — azul institucional, cria respiro entre o ticker âmbar e o Sobre claro ═══ */
.strip-cyan {
  background:var(--navy-d); padding:24px 5%; position:relative; z-index:5;
  display:flex; align-items:center; justify-content:center; gap:50px; flex-wrap:wrap;
  border-bottom:1px solid rgba(32,201,229,.22);
}
.strip-item {
  display:flex; align-items:center; gap:12px;
  font-family:var(--ff-head); font-size:.79rem; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:rgba(255,255,255,.92);
}
.strip-item svg { width:20px; height:20px; color:var(--cyan); }
.strip-divider { width:1px; height:26px; background:rgba(255,255,255,.16); }

/* ═══ SECTION SYSTEM ═══ */
.wrap { max-width:var(--wrap); margin:0 auto; position:relative; z-index:1; }
.sec-label {
  display:inline-flex; align-items:center; gap:10px;
  font-size:.68rem; font-weight:500; letter-spacing:2.8px; text-transform:uppercase; color:var(--cyan); margin-bottom:16px;
}
.sec-label::before { content:''; width:26px; height:1px; background:var(--cyan); }
.sec-label--dark { color:var(--cyan-d); }
.sec-label--dark::before { background:var(--cyan-d); }
.sec-title {
  font-family:var(--ff-head); font-weight:800;
  font-size:clamp(2rem,4.2vw,3.3rem); line-height:1.02; letter-spacing:-1.6px;
  text-wrap:balance;
}
.sec-intro { font-size:.97rem; line-height:1.8; color:#5D6B77; font-weight:300; }

/* ═══ SOBRE ═══ */
#sobre { background:var(--fog); padding:120px 5%; position:relative; overflow:hidden; color:var(--ink); }
#sobre .device { left:-9%; bottom:-18%; width:min(46vw,520px); aspect-ratio:768/798; opacity:.13; }
.sobre-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:80px; align-items:start; }
.sobre-left .sec-title { color:var(--navy-d); }
.sobre-body { margin-top:24px; }
.sobre-body p { font-size:.98rem; line-height:1.85; color:#4A5762; margin-bottom:15px; font-weight:300; }
.sobre-body p strong { font-weight:600; color:var(--navy); }
.sobre-feat { margin-top:32px; display:flex; flex-direction:column; }
.feat-item {
  display:flex; align-items:flex-start; gap:16px;
  padding:18px 0; border-bottom:1px solid var(--mist);
  opacity:0; transform:translateX(-18px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.feat-item.vis { opacity:1; transform:translateX(0); }
.feat-item:last-child { border-bottom:none; }
.feat-icon {
  width:40px; height:40px; flex-shrink:0;
  background:var(--navy); border-radius:7px;
  display:flex; align-items:center; justify-content:center;
}
.feat-icon svg { width:20px; height:20px; color:var(--cyan); }
.feat-text h4 { font-family:var(--ff-head); font-size:.98rem; font-weight:700; color:var(--navy-d); letter-spacing:-.2px; }
.feat-text p { font-size:.85rem; color:#7A868F; margin-top:3px; line-height:1.6; font-weight:300; }

/* Colagem de fotos reais da loja */
.sobre-right { opacity:0; transform:translateY(28px); transition:opacity .8s .15s var(--ease-out), transform .8s .15s var(--ease-out); }
.sobre-right.vis { opacity:1; transform:translateY(0); }
.num-stack { display:grid; grid-template-columns:1fr 1fr; gap:3px; }
.num-block { padding:24px 26px; position:relative; overflow:hidden; }
.num-block:nth-child(1) { background:var(--navy-d); border-radius:10px 0 0 0; }
.num-block:nth-child(2) { background:var(--cyan); border-radius:0 10px 0 0; }
.num-block:nth-child(3) { background:var(--navy); border-radius:0 0 0 10px; }
.num-block:nth-child(4) { background:var(--ink); border-radius:0 0 10px 0; }
.num-block-val { font-family:var(--ff-head); font-size:2.5rem; font-weight:800; line-height:1; letter-spacing:-1.5px; }
.num-block:nth-child(1) .num-block-val { color:var(--cyan); }
.num-block:nth-child(2) .num-block-val { color:var(--navy-d); }
.num-block:nth-child(3) .num-block-val,.num-block:nth-child(4) .num-block-val { color:var(--white); }
.num-block-lbl { font-size:.68rem; letter-spacing:1.6px; text-transform:uppercase; margin-top:6px; }
.num-block:nth-child(2) .num-block-lbl { color:rgba(8,50,78,.68); }
.num-block:nth-child(1) .num-block-lbl,.num-block:nth-child(3) .num-block-lbl,.num-block:nth-child(4) .num-block-lbl { color:rgba(255,255,255,.5); }


/* ═══ SOBRE — bloco institucional ═══ */
/* As três fachadas juntas: a 01 em destaque e as outras duas embaixo. O texto
   ao lado fala em "3 lojas físicas" — aqui a pessoa vê as três. O bloco todo
   usa o mesmo gap de 3px da lista de endereços e dos números logo abaixo. */
.sobre-lojas { display:grid; grid-template-columns:1fr 1fr; gap:3px; margin-bottom:3px; }
.sl-item {
  position:relative; overflow:hidden; background:var(--navy-d);
  box-shadow:0 18px 50px rgba(8,50,78,.16);
}
.sl-item--big { grid-column:1 / -1; aspect-ratio:16/10; border-radius:12px 12px 0 0; }
/* 16/9 nos dois cards menores: as fotos são 3/2, então o card mais largo abre a
   folga vertical que permite descer o enquadramento e cortar o topo — sobreloja
   na 02, céu na 03 — deixando a fachada e a frente em evidência. */
.sobre-lojas .sl-item:nth-child(2) { aspect-ratio:16/9; border-radius:0 0 0 12px; }
.sobre-lojas .sl-item:nth-child(3) { aspect-ratio:16/9; border-radius:0 0 12px 0; }
.sl-item img {
  width:100%; height:100%; object-fit:cover; object-position:center 60%;
  transform:scale(1.02); transition:transform 12s linear;
}
/* Loja 01: a foto é mais larga que o card, então o corte é só nas laterais —
   puxar o quadro para a direita pega a extensão da parede e as janelas */
.sl-item--big img { object-position:68% center; }
.sobre-lojas .sl-item:nth-child(2) img { object-position:center 96%; }
.sobre-lojas .sl-item:nth-child(3) img { object-position:center 92%; }
.sobre-right.vis .sl-item--big img { transform:scale(1.11); }
.sl-item::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 52%, rgba(8,50,78,.86) 100%);
}
.sl-item figcaption {
  position:absolute; left:16px; right:12px; bottom:13px; z-index:2;
  display:flex; align-items:center; gap:8px;
  font-family:var(--ff-head); font-size:.64rem; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; color:var(--white);
  text-shadow:0 1px 4px rgba(4,20,36,.8);
}
.sl-item figcaption::before { content:''; width:14px; height:2px; background:var(--cyan); flex-shrink:0; }
.sl-item--big figcaption { left:20px; bottom:16px; font-size:.7rem; letter-spacing:1.2px; }
.sl-item--big figcaption::before { width:18px; }
.lojas-list { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin-bottom:12px; }
.lojas-list li {
  background:var(--white); border:1px solid var(--mist); padding:16px 16px 14px;
  display:flex; flex-direction:column; gap:9px; align-items:flex-start;
}
.lojas-list li:first-child { border-radius:10px 0 0 10px; }
.lojas-list li:last-child { border-radius:0 10px 10px 0; }
.lojas-num {
  font-family:var(--ff-head); font-size:.66rem; font-weight:800; letter-spacing:.9px;
  text-transform:uppercase; white-space:nowrap;
  color:var(--cyan-d); background:rgba(32,201,229,.12); border-radius:4px;
  padding:4px 9px; flex-shrink:0;
}
.lojas-list strong { display:block; font-family:var(--ff-head); font-size:.78rem; font-weight:700; color:var(--navy-d); line-height:1.25; }
.lojas-list em { display:block; font-style:normal; font-size:.7rem; color:#8A959E; margin-top:3px; line-height:1.35; }
@media(max-width:900px){ .lojas-list { grid-template-columns:1fr; }
  .lojas-list li:first-child { border-radius:10px 10px 0 0; }
  .lojas-list li:last-child { border-radius:0 0 10px 10px; } }

/* ═══ LINHAS DE EPIs ═══ */
#linhas { background:var(--ink); padding:0 0 120px; position:relative; }
.linhas-banner { position:relative; height:clamp(300px,42vw,440px); overflow:hidden; }
.linhas-banner img { width:100%; height:100%; object-fit:cover; object-position:center 35%; filter:saturate(.9) contrast(1.05); }
.linhas-banner::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(11,26,38,.95) 0%, rgba(11,26,38,.7) 42%, rgba(11,26,38,.25) 70%, rgba(11,26,38,.55) 100%),
             linear-gradient(0deg, var(--ink) 2%, transparent 40%);
}
.linhas-banner-txt {
  position:absolute; inset:0; z-index:2; display:flex; align-items:center;
  padding:0 5%;
}
.linhas-banner-txt .wrap { width:100%; }
.linhas-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:54px; padding:0 5%; }
.linhas-grid .wrap { display:contents; }
.linha-card {
  position:relative; display:block; border-radius:10px; overflow:hidden;
  aspect-ratio:4/5; background:var(--ink-2);
  opacity:0; transform:translateY(24px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.linha-card.vis { opacity:1; transform:translateY(0); }
.linha-card .ph { position:absolute; inset:0; }
.linha-card .ph::after {
  background:linear-gradient(180deg, rgba(11,26,38,.12) 0%, rgba(11,26,38,.42) 40%, rgba(11,26,38,.88) 66%, rgba(11,26,38,.97) 100%),
             linear-gradient(0deg, rgba(13,88,140,.18), rgba(13,88,140,.18));
  transition:background .4s;
}
.linha-card:hover .ph > img { transform:scale(1.07); }
.linha-card:hover .ph::after {
  background:linear-gradient(180deg, rgba(11,26,38,.1) 0%, rgba(8,50,78,.45) 40%, rgba(8,50,78,.9) 66%, rgba(8,50,78,.98) 100%),
             linear-gradient(0deg, rgba(13,88,140,.28), rgba(13,88,140,.28));
}
.linha-body { position:absolute; left:0; right:0; bottom:0; z-index:3; padding:22px 20px; }
.linha-num { font-family:var(--ff-head); font-size:.64rem; font-weight:600; letter-spacing:2px; color:var(--cyan); display:block; margin-bottom:8px; }
.linha-card h3 {
  font-family:var(--ff-head); font-size:1.06rem; font-weight:700; color:var(--white);
  line-height:1.2; letter-spacing:-.3px;
}
.linha-card p { font-size:.78rem; color:rgba(255,255,255,.6); margin-top:6px; line-height:1.5; font-weight:300; }
.linha-arrow {
  margin-top:14px; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--ff-head); font-size:.68rem; font-weight:700; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--cyan);
  opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s var(--ease-out);
}
.linha-card:hover .linha-arrow, .linha-card:focus-visible .linha-arrow { opacity:1; transform:translateY(0); }
.linha-arrow svg { width:13px; height:13px; }
.linha-card::before {
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px; z-index:4;
  background:var(--cyan); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease-out);
}
.linha-card:hover::before, .linha-card:focus-visible::before { transform:scaleX(1); }


.linhas-cta {
  margin:44px auto 0; padding:0 5%; display:flex; gap:12px;
  justify-content:center; flex-wrap:wrap;
}
.btn-cyan-solid {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--cyan); color:var(--navy-d);
  font-family:var(--ff-head); font-weight:700; font-size:.86rem;
  letter-spacing:.6px; text-transform:uppercase; padding:16px 28px; border-radius:4px;
  box-shadow:0 8px 30px rgba(32,201,229,.22);
  transition:transform .2s var(--ease-out), box-shadow .2s, background .2s;
}
.btn-cyan-solid:hover { background:var(--cyan-l); transform:translateY(-3px); box-shadow:0 14px 42px rgba(32,201,229,.34); }
.btn-cyan-solid svg { width:18px; height:18px; }

/* ═══ MVV — bloco azul institucional (espelha a apresentação) ═══ */
#mvv { background:var(--navy); padding:120px 5%; position:relative; overflow:hidden; }
#mvv .device { right:-12%; top:-22%; width:min(64vw,760px); aspect-ratio:768/798; opacity:.22; }
#mvv .device--2 { left:-16%; bottom:-30%; width:min(50vw,560px); opacity:.13; right:auto; top:auto; }
.mvv-header { margin-bottom:56px; }
.mvv-header .sec-title { color:var(--white); }
.mvv-header .sec-label { color:var(--cyan-l); }
.mvv-header .sec-label::before { background:var(--cyan-l); }
.mvv-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.mvv-card {
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:38px 32px; position:relative; overflow:hidden;
  backdrop-filter:blur(6px);
  opacity:0; transform:translateY(32px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out), background .3s, border-color .3s;
}
.mvv-card:hover { background:rgba(255,255,255,.12); border-color:rgba(32,201,229,.45); }
.mvv-card.vis { opacity:1; transform:translateY(0); }
.mvv-card:nth-child(2) { transition-delay:.1s; }
.mvv-card:nth-child(3) { transition-delay:.2s; }
.mvv-card::after { content:''; position:absolute; left:32px; top:0; width:38px; height:3px; background:var(--cyan); }
.mvv-num { font-family:var(--ff-head); font-size:.66rem; font-weight:600; letter-spacing:2.6px; color:rgba(255,255,255,.45); margin-bottom:20px; display:block; }
.mvv-card-icon { margin-bottom:18px; }
.mvv-card-icon svg { width:34px; height:34px; color:var(--cyan); }
.mvv-card h3 { font-family:var(--ff-head); font-size:1.5rem; font-weight:800; letter-spacing:-.8px; color:var(--white); margin-bottom:14px; }
.mvv-card p { font-size:.9rem; line-height:1.75; color:rgba(255,255,255,.78); font-weight:300; }

/* ═══ VANTAGENS ═══ */
#vantagens { background:var(--fog); padding:120px 5%; position:relative; overflow:hidden; color:var(--ink); }
#vantagens .device { right:-8%; top:-14%; width:min(40vw,470px); aspect-ratio:768/798; opacity:.09; }
.vantagens-header { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:end; margin-bottom:56px; }
.vantagens-header .sec-title { color:var(--navy-d); }
.vantagens-body { display:grid; grid-template-columns:1fr 340px; gap:40px; align-items:start; }
.vantagens-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2px; border-radius:12px; overflow:hidden; box-shadow:0 2px 0 var(--mist); }
.vant-card {
  background:var(--white); padding:38px 34px; position:relative; overflow:hidden;
  opacity:0; transform:translateY(20px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out), box-shadow .3s;
}
.vant-card:hover { box-shadow:0 20px 60px rgba(8,50,78,.12); z-index:1; }
.vant-card.vis { opacity:1; transform:translateY(0); }
.vant-card:nth-child(2){transition-delay:.08s}.vant-card:nth-child(3){transition-delay:.16s}.vant-card:nth-child(4){transition-delay:.24s}
.vant-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--cyan); transform:scaleY(0); transform-origin:bottom;
  transition:transform .35s var(--ease-out);
}
.vant-card:hover::before { transform:scaleY(1); }
.vant-icon {
  width:48px; height:48px;
  background:linear-gradient(135deg,var(--navy-d),var(--navy));
  border-radius:9px; display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.vant-icon svg { width:24px; height:24px; color:var(--cyan); }
.vant-card h4 { font-family:var(--ff-head); font-size:1.14rem; font-weight:700; letter-spacing:-.4px; color:var(--navy-d); margin-bottom:9px; }
.vant-card p { font-size:.86rem; line-height:1.7; color:#6B7883; font-weight:300; }
.vant-aside { position:relative; }
.vant-aside .ph {
  border-radius:12px; aspect-ratio:3/2; background:var(--mist);
  border:1px solid rgba(8,50,78,.1);
}
.vant-aside .ph > img { object-fit:contain; padding:6%; mix-blend-mode:multiply; }
.vant-aside .ph::after { background:none; }
.vant-quote {
  background:var(--navy-d); border-radius:12px; padding:30px 28px; margin-top:10px;
  position:relative; overflow:hidden;
}
.vant-quote::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--cyan); }
.vant-quote p { font-size:.94rem; line-height:1.7; color:rgba(255,255,255,.85); font-style:italic; font-weight:300; }
.vant-quote cite {
  display:block; margin-top:14px; font-style:normal; font-family:var(--ff-head);
  font-size:.7rem; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--cyan);
}

/* ═══ ESTRUTURA / GALERIA ═══ */
#estrutura { background:var(--ink); padding:120px 5%; position:relative; overflow:hidden; }
.estrutura-header { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:end; margin-bottom:48px; }
.estrutura-header .sec-title { color:var(--white); }
.estrutura-header .sec-intro { color:rgba(255,255,255,.6); }
.gal-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:180px; gap:10px; }
.gal-item {
  position:relative; border-radius:10px; overflow:hidden; cursor:zoom-in; border:none; padding:0;
  background:var(--ink-2); display:block; width:100%; height:100%;
  opacity:0; transform:scale(.96);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.gal-item.vis { opacity:1; transform:scale(1); }
.gal-item:nth-child(1) { grid-column:span 2; grid-row:span 2; }
.gal-item:nth-child(6) { grid-column:span 2; }
.gal-item .ph { position:absolute; inset:0; }
.gal-item:hover .ph > img { transform:scale(1.06); }
.gal-cap {
  position:absolute; left:0; right:0; bottom:0; z-index:3; padding:16px 18px; text-align:left;
  font-family:var(--ff-head); font-size:.76rem; font-weight:700; letter-spacing:.3px; color:var(--white);
  display:flex; align-items:center; gap:9px;
}
.gal-cap::before { content:''; width:14px; height:2px; background:var(--cyan); flex-shrink:0; }
.gal-item::after {
  content:''; position:absolute; inset:0; z-index:2; border-radius:10px;
  border:1.5px solid transparent; transition:border-color .3s;
}
.gal-item:hover::after, .gal-item:focus-visible::after { border-color:var(--cyan); }

/* Card-slideshow das 3 fachadas */
.gal-slides .ph > img {
  position:absolute; inset:0;
  opacity:0; transition:opacity .9s var(--ease-out), transform .8s var(--ease-out);
}
.gal-slides .ph > img.on { opacity:1; }
.gs-dots {
  position:absolute; right:18px; bottom:19px; z-index:3;
  display:flex; align-items:center; gap:6px; pointer-events:none;
}
.gs-dots i {
  width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.4);
  transition:background .35s, width .35s; display:block;
}
.gs-dots i.on { background:var(--cyan); width:20px; border-radius:4px; }
@media (prefers-reduced-motion: reduce) {
  .gal-slides .ph > img { transition:none; }
}

/* Lightbox */
.lb {
  position:fixed; inset:0; z-index:1000; background:rgba(6,14,20,.96);
  display:none; align-items:center; justify-content:center; padding:4vh 5vw;
  backdrop-filter:blur(8px);
}
.lb[open], .lb.on { display:flex; }
.lb img { max-width:100%; max-height:86vh; border-radius:8px; box-shadow:0 30px 90px rgba(0,0,0,.6); }
.lb-cap {
  position:absolute; bottom:3vh; left:0; right:0; text-align:center;
  font-family:var(--ff-head); font-size:.8rem; font-weight:600; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--cyan);
}
.lb-close, .lb-nav {
  position:absolute; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  color:var(--white); width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s, border-color .2s;
}
.lb-close:hover, .lb-nav:hover { background:var(--cyan); border-color:var(--cyan); color:var(--ink); }
.lb-close { top:3vh; right:4vw; }
.lb-nav svg, .lb-close svg { width:20px; height:20px; }
.lb-prev { left:2vw; top:50%; transform:translateY(-50%); }
.lb-next { right:2vw; top:50%; transform:translateY(-50%); }

/* ═══ COBERTURA NACIONAL ═══ */
#cobertura { background:var(--navy-d); padding:110px 5%; position:relative; overflow:hidden; }
.cob-map {
  position:absolute; right:2%; top:50%; transform:translateY(-50%);
  width:min(46vw,520px); opacity:.5; pointer-events:none;
}
.cob-inner { position:relative; z-index:2; max-width:var(--wrap); margin:0 auto; }
.cob-inner .sec-title { color:var(--white); max-width:620px; }
.cob-inner .sec-title em { color:var(--cyan); font-style:normal; }
.cob-sub { margin-top:20px; font-size:1rem; line-height:1.8; color:rgba(255,255,255,.66); max-width:520px; font-weight:300; }
.cob-stats { display:flex; gap:52px; margin-top:48px; flex-wrap:wrap; }
.cob-stat-val { font-family:var(--ff-head); font-size:2.6rem; font-weight:800; color:var(--cyan); line-height:1; letter-spacing:-1.5px; }
.cob-stat-lbl { font-size:.72rem; letter-spacing:1.8px; text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:8px; }

/* ═══ FORNECEDORES ═══ */
#fornecedores { background:var(--fog); padding:110px 5%; position:relative; overflow:hidden; color:var(--ink); }
#fornecedores .device { right:-10%; bottom:-26%; width:min(46vw,540px); aspect-ratio:768/798; opacity:.1; }
.forn-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; flex-wrap:wrap; gap:24px; }
.forn-header .sec-title { color:var(--navy-d); }
.forn-count { font-family:var(--ff-head); font-size:3.2rem; font-weight:800; color:var(--cyan-d); line-height:1; letter-spacing:-2px; text-align:right; }
.forn-count span { display:block; font-size:.66rem; font-weight:500; letter-spacing:1.8px; text-transform:uppercase; color:#8A959E; margin-top:6px; letter-spacing:1.8px; }
.marcas-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:10px; }
.marca {
  background:var(--white); border-radius:10px; aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center; padding:20px;
  box-shadow:0 1px 3px rgba(8,50,78,.06);
  opacity:0; transform:translateY(16px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), box-shadow .3s;
}
.marca.vis { opacity:1; transform:translateY(0); }
.marca:hover { box-shadow:0 14px 40px rgba(8,50,78,.13); }
.marca img {
  max-width:100%; max-height:56px; width:auto; object-fit:contain;
  /* logos já vêm em cinza na identidade — só reforçamos o contraste, sem apagar */
  filter:grayscale(1) contrast(1.25) brightness(.86); transition:filter .3s;
}
.marca:hover img { filter:grayscale(0) contrast(1) brightness(1); }

/* ═══ CLIENTES ═══ */
#clientes { background:var(--ink); padding:110px 5%; }
.clientes-header { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; margin-bottom:52px; }
.clientes-header .sec-title { color:var(--white); }
.clientes-quote {
  font-size:1.02rem; line-height:1.8; color:rgba(255,255,255,.62); font-weight:300;
  font-style:italic; border-left:2px solid var(--cyan); padding-left:24px;
}
.clientes-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; border-radius:10px; overflow:hidden; }
.cli-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  padding:26px 30px; display:flex; align-items:center; gap:15px;
  opacity:0; transform:translateY(16px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), background .2s;
}
.cli-card:hover { background:rgba(13,88,140,.22); }
.cli-card.vis { opacity:1; transform:translateY(0); }
.cli-card:nth-child(2){transition-delay:.06s}.cli-card:nth-child(3){transition-delay:.12s}
.cli-card:nth-child(4){transition-delay:.18s}.cli-card:nth-child(5){transition-delay:.24s}.cli-card:nth-child(6){transition-delay:.3s}
.cli-dot { width:6px; height:6px; border-radius:50%; background:var(--cyan); flex-shrink:0; }
.cli-name { font-family:var(--ff-head); font-size:.98rem; font-weight:700; letter-spacing:-.2px; color:var(--white); }
.kadesh-row {
  display:flex; align-items:center; gap:30px;
  background:var(--cyan); padding:24px 36px; border-radius:10px; margin-top:36px;
  opacity:0; transform:translateY(18px); transition:all .7s .25s var(--ease-out);
  box-shadow:0 14px 44px rgba(32,201,229,.18);
}
.kadesh-row.vis { opacity:1; transform:translateY(0); }
.kadesh-logo { height:46px; width:auto; flex-shrink:0; }
.kadesh-text { border-left:1px solid rgba(8,50,78,.2); padding-left:30px; }
.kadesh-text strong { display:block; font-family:var(--ff-head); font-size:1.06rem; font-weight:800; letter-spacing:-.4px; color:var(--navy-d); line-height:1.2; }
.kadesh-text span { display:block; font-size:.84rem; color:rgba(8,50,78,.72); margin-top:4px; }

/* ═══ ENDEREÇOS ═══ */
#enderecos { background:var(--navy-d); padding:110px 5%; position:relative; overflow:hidden; }
#enderecos .device { left:-12%; top:-20%; width:min(44vw,500px); aspect-ratio:768/798; opacity:.11; }
.end-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.end-card {
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:12px; padding:36px; transition:all .4s var(--ease-out);
  position:relative; display:flex; flex-direction:column;
}
.end-card:hover { transform:translateY(-6px); border-color:var(--cyan); background:rgba(255,255,255,.09); }
.end-card-icon { width:46px; height:46px; background:var(--cyan-g); border:1px solid rgba(32,201,229,.24); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:22px; color:var(--cyan); }
.end-card-icon svg { width:22px; height:22px; }
.end-card h3 { font-family:var(--ff-head); font-size:1.24rem; font-weight:700; letter-spacing:-.5px; color:var(--white); margin-bottom:12px; }
.end-card p { font-size:.9rem; color:rgba(255,255,255,.62); line-height:1.65; margin-bottom:18px; font-weight:300; }
.end-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--cyan); color:var(--navy-d); font-family:var(--ff-head);
  font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.8px;
  padding:6px 12px; border-radius:100px; width:fit-content; margin-top:auto;
}
.end-map-link {
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  font-family:var(--ff-head); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:1px;
  color:var(--cyan); transition:color .2s, gap .2s;
}
.end-map-link:hover { color:var(--white); gap:12px; }
.end-map-link svg { width:14px; height:14px; }


.end-card { padding:0; overflow:hidden; }
.end-card:hover { transform:translateY(-6px); }
.end-photo { position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--navy-d); }
.end-photo img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s var(--ease-out);
}
.end-card:hover .end-photo img { transform:scale(1.06); }
.end-photo::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(8,50,78,.62) 100%);
}
.end-photo-num {
  position:absolute; left:16px; top:16px; z-index:2;
  font-family:var(--ff-head); font-size:.72rem; font-weight:800; letter-spacing:.5px;
  color:var(--navy-d); background:var(--cyan); border-radius:4px; padding:5px 9px;
  box-shadow:0 4px 14px rgba(4,20,36,.35);
}
.end-body { padding:26px 28px 30px; display:flex; flex-direction:column; flex:1; }
.end-body h3 { font-family:var(--ff-head); font-size:1.2rem; font-weight:700; letter-spacing:-.4px; color:var(--white); margin-bottom:10px; }
.end-body p { font-size:.88rem; color:rgba(255,255,255,.62); line-height:1.65; margin-bottom:16px; font-weight:300; }
.end-body .end-map-link { margin-top:auto; }

/* ═══ CTA ═══ */
#cta { padding:130px 5%; position:relative; overflow:hidden; background:var(--ink); }
.cta-media { position:absolute; inset:0; z-index:0; }
.cta-media img { width:100%; height:100%; object-fit:cover; object-position:center; }
.cta-media::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(11,26,38,.5) 0%, rgba(11,26,38,.9) 42%, rgba(11,26,38,.97) 100%),
             linear-gradient(0deg, rgba(8,50,78,.35), rgba(8,50,78,.35));
}
.cta-inner { position:relative; z-index:2; max-width:var(--wrap); margin:0 auto; }
.cta-box { max-width:600px; margin-left:auto; }
.cta-h2 {
  font-family:var(--ff-head); font-weight:800;
  font-size:clamp(2.3rem,4.6vw,3.7rem); line-height:1; letter-spacing:-2px;
  color:var(--white); margin:16px 0 16px; text-wrap:balance;
}
.cta-h2 em { color:var(--cyan); font-style:normal; display:block; }
.cta-sub { font-size:.98rem; color:rgba(255,255,255,.66); line-height:1.75; margin-bottom:36px; font-weight:300; }
.cta-wpp {
  display:inline-flex; align-items:center; gap:13px;
  background:#25D366; color:var(--white);
  font-family:var(--ff-head); font-weight:700; font-size:.96rem; letter-spacing:.8px; text-transform:uppercase;
  padding:19px 40px; border-radius:4px;
  box-shadow:0 12px 44px rgba(37,211,102,.28);
  transition:transform .2s var(--ease-out), box-shadow .2s;
}
.cta-wpp:hover { transform:translateY(-4px); box-shadow:0 20px 60px rgba(37,211,102,.42); }
.cta-wpp svg { width:23px; height:23px; flex-shrink:0; }
.cta-note { margin-top:18px; font-size:.76rem; color:rgba(255,255,255,.36); letter-spacing:.6px; }

/* ═══ FOOTER ═══ */
footer { background:var(--ink); padding:60px 5% 34px; border-top:1px solid rgba(255,255,255,.07); }
.footer-inner {
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:auto 1fr auto; gap:56px; align-items:start;
  padding-bottom:38px; border-bottom:1px solid rgba(255,255,255,.07);
}
.footer-brand img { height:52px; width:auto; object-fit:contain; margin-bottom:16px; }
.footer-info { font-size:.83rem; color:var(--slate); line-height:1.85; }
.footer-info a { color:var(--slate); transition:color .2s; }
.footer-info a:hover { color:var(--cyan); }
.footer-links { display:flex; flex-direction:column; gap:11px; padding-top:4px; }
.footer-links a { font-family:var(--ff-head); font-size:.76rem; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:rgba(255,255,255,.44); transition:color .2s; }
.footer-links a:hover { color:var(--cyan); }
.footer-social { display:flex; flex-direction:column; gap:10px; }
.social-pill {
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid rgba(255,255,255,.12); border-radius:4px; padding:10px 18px;
  font-family:var(--ff-head); font-size:.73rem; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:rgba(255,255,255,.52);
  transition:border-color .2s, color .2s, background .2s;
}
.social-pill svg { width:14px; height:14px; }
.social-pill:hover { border-color:var(--cyan); color:var(--cyan); background:rgba(32,201,229,.07); }
.footer-copy { max-width:var(--wrap); margin:26px auto 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:.74rem; color:rgba(255,255,255,.24); }

/* ═══ FLOAT WPP ═══ */
.float-wpp {
  position:fixed; bottom:26px; right:26px; z-index:800;
  width:56px; height:56px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 28px rgba(37,211,102,.42);
  transition:transform .2s, box-shadow .2s;
  animation:popIn .6s 1.6s var(--ease-out) both;
}
.float-wpp:hover { transform:scale(1.08); box-shadow:0 10px 40px rgba(37,211,102,.55); }
.float-wpp svg { width:28px; height:28px; color:var(--white); }
@keyframes popIn { from{opacity:0;transform:scale(.4)} to{opacity:1;transform:scale(1)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:translateY(0)} }

.skip-link {
  position:absolute; top:-60px; left:0; background:var(--cyan); color:var(--ink);
  padding:10px 18px; z-index:1000; transition:top .3s;
  font-family:var(--ff-head); font-weight:700; text-transform:uppercase; font-size:.78rem; letter-spacing:.8px;
}
.skip-link:focus { top:0; outline:2px solid var(--white); }
:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }

/* ═══ RESPONSIVE ═══ */
@media (min-width:1024px) and (max-height:1000px){
  #hero { padding-top:88px; }
  .hero-h1 { font-size:clamp(2.3rem,4.2vw,3.5rem); }
  .hero-body { margin-top:14px; font-size:.96rem; line-height:1.68; }
  .hero-actions { margin-top:24px; }
  .hero-selo { margin-bottom:15px; }
}
/* notebooks baixos: comprime o texto para a faixa não perder altura */
@media (min-width:1024px) and (max-height:790px){
  :root { --hero-band: clamp(220px, min(32vw, 46vh), 580px); }
  #hero { padding-top:80px; }
  .hero-h1 { font-size:clamp(2rem,3.5vw,2.9rem); letter-spacing:-1.4px; }
  .hero-body { margin-top:12px; font-size:.9rem; line-height:1.6; max-width:540px; }
  .hero-actions { margin-top:20px; }
  .hero-selo { margin-bottom:12px; font-size:.76rem; padding:7px 15px 7px 11px; }
  .hero-selo svg { width:14px; height:14px; }
  .hero-actions .btn-primary { padding:12px 22px; font-size:.78rem; }
  .hero-actions .btn-ghost { padding:11px 19px; font-size:.78rem; }
}
@media(max-width:1100px){
  .marcas-grid { grid-template-columns:repeat(5,1fr); }
  .linhas-grid { grid-template-columns:repeat(3,1fr); }
  .vantagens-body { grid-template-columns:1fr; }
  .vant-aside { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .vant-quote { margin-top:0; }
}
@media(max-width:1023px){
  .nav-links {
    position:fixed; top:64px; left:0; right:0;
    background:rgba(11,26,38,.99); padding:16px 20px 24px;
    flex-direction:column; gap:0; align-items:stretch;
    transform:translateY(-110%); opacity:0; visibility:hidden;
    transition:transform .35s var(--ease-out), opacity .3s; z-index:899;
    border-bottom:1px solid rgba(32,201,229,.2);
  }
  .nav-links.active { transform:translateY(0); opacity:1; visibility:visible; }
  .nav-links a { display:block; padding:15px 4px; color:var(--white); font-size:.88rem; border-bottom:1px solid rgba(255,255,255,.08); }
  .nav-links a::after { display:none; }
  .nav-menu-btn { display:block; order:3; }
  nav { height:64px; }
  #hero { padding:96px 6% calc(var(--hero-band) + 16px); }
  .hero-device { width:min(92vw,440px); opacity:.14; }
  .hero-body { font-size:.96rem; }
  .hero-actions { margin-top:30px; gap:10px; }
  /* as três miniaturas não cabem na mesma linha da legenda: cada uma na sua */
  .hero-car-bar { padding:0 5% 44px; flex-direction:column; align-items:flex-start; gap:10px; }
  /* barra em duas linhas pede véu mais alto: o endereço cai sobre a fachada clara */
  .hero-slide::after {
    height:72%;
    background:linear-gradient(180deg, transparent 0%, rgba(5,22,38,.42) 26%, rgba(5,22,38,.86) 60%, rgba(4,18,32,.97) 100%);
  }
  .hero-car-id strong { font-size:.92rem; }
  .hero-car-id span { font-size:.76rem; }
  .hero-car-ctl { align-self:flex-start; margin-top:0; }
  .hero-car-id { max-width:100%; min-height:0; }
  .car-btn { width:34px; height:34px; }
  /* tablet e mobile: as três lojas continuam visíveis, sem o nome da rua */
  .car-tab { padding:4px; gap:0; }
  .car-tab .t-txt { display:none; }
  .car-tab .t-thumb { width:46px; height:31px; }
  .gal-grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
  .gal-item:nth-child(1) { grid-column:span 2; grid-row:span 2; }
  .gal-item:nth-child(6) { grid-column:span 1; }
}
@media(max-width:900px){
  .sobre-grid,.vantagens-header,.clientes-header,.estrutura-header { grid-template-columns:1fr; gap:40px; }
  .mvv-grid,.vantagens-grid,.clientes-grid,.end-grid { grid-template-columns:1fr; }
  .linhas-grid { grid-template-columns:repeat(2,1fr); }
  .marcas-grid { grid-template-columns:repeat(4,1fr); }
  .footer-inner { grid-template-columns:1fr; gap:34px; }
  .strip-divider { display:none; }
  .cob-map { opacity:.2; right:-14%; }
  .cta-box { margin-left:0; }
}
@media(max-width:768px){ .nav-cta { display:none; } }
@media(max-width:600px){
  /* a faixa cresce um pouco: agora carrega legenda + as três miniaturas */
  :root { --hero-band: clamp(262px, min(72vw, 44vh), 380px); }
  .hero-actions .btn-primary { padding:13px 22px; font-size:.78rem; }
  .hero-actions .btn-ghost { padding:12px 20px; font-size:.78rem; }
  nav { padding:0 4%; }
  .nav-brand img { height:36px; }
  .hero-h1 { font-size:2.5rem; letter-spacing:-1.4px; }
  /* nas fachadas menores só o rótulo cabe em uma linha — o endereço completo
     está nos cartões logo abaixo */
  .sl-item:not(.sl-item--big) .sl-rua { display:none; }
  .hero-selo { font-size:.74rem; padding:7px 14px 7px 11px; gap:7px; margin-bottom:14px; }
  .hero-selo svg { width:14px; height:14px; }
  .car-tabs { gap:6px; margin:0; }
  .car-tab .t-thumb { width:38px; height:26px; }
  .sec-title { font-size:1.85rem; letter-spacing:-1px; }
  .strip-cyan { gap:18px; padding:18px 4%; }
  .strip-item { font-size:.72rem; }
  #sobre,#mvv,#vantagens,#estrutura,#cobertura,#fornecedores,#clientes,#enderecos,#cta { padding:76px 5%; }
  #linhas { padding-bottom:76px; }
  .linhas-grid { gap:10px; padding:0 5%; margin-top:36px; }
  /* no mobile o texto do banner cobre a foto inteira — reforça o scrim */
  .linhas-banner::after {
    background:linear-gradient(90deg, rgba(11,26,38,.96) 0%, rgba(11,26,38,.88) 55%, rgba(11,26,38,.7) 100%),
               linear-gradient(0deg, var(--ink) 3%, transparent 45%);
  }
  .num-block { padding:20px 20px; }
  .num-block-val { font-size:2rem; }
  .mvv-card,.vant-card,.end-card { padding:30px 24px; }
  .cli-card { padding:20px 24px; }
  .marcas-grid { grid-template-columns:repeat(3,1fr); }
  .cta-wpp { padding:16px 28px; font-size:.88rem; }
  .float-wpp { width:50px; height:50px; bottom:18px; right:18px; }
  .footer-inner { text-align:center; justify-items:center; }
  .footer-links,.footer-social { align-items:center; }
  .footer-copy { flex-direction:column; text-align:center; gap:8px; }
  .kadesh-row { flex-direction:column; text-align:center; gap:18px; padding:30px 22px; }
  .kadesh-text { border-left:none; border-top:1px solid rgba(8,50,78,.15); padding-left:0; padding-top:18px; }
  .vant-aside { grid-template-columns:1fr; }
  .cob-stats { gap:32px; }
  .lb-prev { left:1vw; } .lb-next { right:1vw; }
}
@media(max-width:400px){
  .hero-h1 { font-size:2.1rem; }
  .linhas-grid { grid-template-columns:1fr; }
  .marcas-grid { grid-template-columns:repeat(2,1fr); }
  .strip-item svg { width:16px; height:16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .feat-item,.mvv-card,.vant-card,.cli-card,.kadesh-row,.sobre-right,.linha-card,.gal-item,.marca { opacity:1 !important; transform:none !important; }
}

/* ═══ MARCAS EM TEXTO — a Limp não possui os logotipos dos fornecedores ═══ */
.marca-nome {
  font-family:var(--ff-head); font-weight:700; font-size:1.06rem; letter-spacing:-.3px;
  color:var(--navy); text-align:center; line-height:1.15;
  transition:color .3s;
}
.marca:hover .marca-nome { color:var(--cyan-d); }
@media(max-width:760px){ .marca-nome { font-size:.92rem; } }