/* =========================================================
   Nagix Geradores — Design System
   Inspirado na estrutura visual de aggreko.com/pt-br
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Big+Shoulders+Display:wght@500;700;800;900&display=swap');

:root{
  --orange:        #f5c542;
  --orange-dark:   #dba52a;
  --font-display:  'Big Shoulders Display', var(--font), sans-serif;
  --brand-blue:      #213f9a;
  --brand-blue-dark: #182e70;
  --brand-teal:      #156581;
  --cream:         #ffffff;
  --cream-2:       #eef1f9;
  --card:          #f7f6f3;
  --card-grad:     linear-gradient(148deg, #fcfcfb 0%, #f7f6f3 55%, #f0efeb 100%);
  --ink:           #101010;
  --ink-soft:      #4a4a46;
  --green-dark:    #1b2312;
  --black:         #0a0a0a;
  --border:        rgba(16,16,16,.12);
  --radius-pill:   999px;
  --radius-card:   4px;
  --font:          'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --header-h:      76px;
  --container:     2000px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: var(--header-h); overflow-x:hidden; overscroll-behavior-x:none; }
/* Sem isso, arrastar o dedo sobre uma <img> no mobile pode disparar o gesto
   nativo de "arrastar imagem" do navegador em vez de rolar a página —
   trava o scroll vertical e parece que só dá pra mover a imagem de lado.
   Fundos via CSS (background-image) não têm esse problema; só <img> real.
   (Não mexe em touch-action aqui: o carrossel horizontal precisa de pan-x
   nas suas próprias imagens — ver .carousel-track mais abaixo.) */
img{ -webkit-user-drag:none; user-drag:none; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4,p{ margin:0; }
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 clamp(16px, 2.4vw, 40px);
}
section{ position:relative; }

/* ---------- Typography ---------- */
h1,h2,h3{ font-weight:400; letter-spacing:-.02em; line-height:1.02; }
.eyebrow{
  display:block;
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:14px;
}
.h-xl{ font-size:clamp(40px,7.2vw,112px); }
.h-lg{ font-size:clamp(32px,5vw,64px); }
.h-md{ font-size:clamp(26px,3.2vw,40px); font-weight:500; }
.h-sm{ font-size:clamp(20px,2.2vw,26px); font-weight:500; }
.lede{ font-size:clamp(16px,1.6vw,19px); color:var(--ink-soft); line-height:1.55; max-width:640px; }
.eyebrow-link{ font-weight:600; color:var(--brand-blue); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 26px;
  border-radius:var(--radius-pill);
  font-size:15px;
  font-weight:600;
  border:1.5px solid transparent;
  white-space:nowrap;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn svg{ width:16px; height:16px; flex-shrink:0; transition:transform .18s ease; }
.btn:hover svg{ transform:translateX(3px); }
.btn:hover{ transform:translateY(-1px); }

/* Efeito "hover pill-fill": mesmo vocabulário do .nav-link e das .tag —
   uma pílula de cor nasce do centro do botão e cresce até preenchê-lo
   (scale + opacity, cubic-bezier de desaceleração), em vez de trocar o
   fundo de forma instantânea. Só nos outline/ghost, que nascem "vazios";
   os sólidos (já preenchidos de cor) mantêm a simples troca de tom. */
.btn-outline-light{ position:relative; z-index:1; border-color:rgba(255,255,255,.55); color:#fff; }
.btn-outline-light::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:#fff; opacity:0; transform:scale(0);
  transition:opacity .2s ease, transform .3s cubic-bezier(0.16,1,0.3,1);
}
.btn-outline-light:hover{ color:var(--ink); }
.btn-outline-light:hover::before{ opacity:1; transform:scale(1); }

.btn-solid-light{ background:#fff; color:var(--ink); }
.btn-solid-light:hover{ background:var(--cream-2); }

.btn-solid-dark{ background:var(--ink); color:#fff; }
.btn-solid-dark:hover{ background:#000; }

.btn-outline-dark{ position:relative; z-index:1; border-color:var(--border); color:var(--ink); }
.btn-outline-dark::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--ink); opacity:0; transform:scale(0);
  transition:opacity .2s ease, transform .3s cubic-bezier(0.16,1,0.3,1);
}
.btn-outline-dark:hover{ color:#fff; border-color:var(--ink); }
.btn-outline-dark:hover::before{ opacity:1; transform:scale(1); }

.btn-solid-orange{ background:var(--orange); color:var(--ink); }
.btn-solid-orange:hover{ background:var(--orange-dark); }

.btn-outline-cream{ position:relative; z-index:1; border-color:rgba(251,250,245,.4); color:var(--cream); }
.btn-outline-cream::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--cream); opacity:0; transform:scale(0);
  transition:opacity .2s ease, transform .3s cubic-bezier(0.16,1,0.3,1);
}
.btn-outline-cream:hover{ color:var(--green-dark); }
.btn-outline-cream:hover::before{ opacity:1; transform:scale(1); }

/* ---------- Header (floating dock) ---------- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  display:flex;
  justify-content:center;
  padding:22px 20px 0;
  background:none;
  pointer-events:none;
  transition:padding .3s ease;
}
.site-header.is-scrolled{ padding-top:14px; }

.header-inner{
  pointer-events:auto;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:8px 12px 8px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-radius:var(--radius-pill);
  /* Era rgba(255,255,255,.68) + backdrop-filter:blur(14px) saturate(180%):
     um efeito de vidro fosco que precisa recompor o que está atrás da
     pílula a cada frame. Em página mais pesada (Contato, com os iframes do
     Google Maps) isso engasgava durante o carregamento e a pílula piscava
     em branco. Fundo praticamente opaco entrega a mesma leitura visual sem
     depender desse recompositing — mesma solução já usada abaixo de 900px. */
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 16px 44px -10px rgba(16,16,16,.22), inset 0 1px 0 rgba(255,255,255,.6);
  transition:padding .3s ease;
}

.logo{
  display:flex;
  align-items:center;
  white-space:nowrap;
  line-height:0;
}
.logo-chip{ display:inline-flex; align-items:center; line-height:0; }
.logo-img{ height:48px; width:auto; display:block; transition:transform .2s ease; }
.logo:hover .logo-img{ transform:translateY(-1px); }

.main-nav{ display:flex; align-items:center; gap:4px; }
/* Pílula de hover: em vez do sublinhado genérico, o link vira uma mini
   pílula ao passar o mouse — o mesmo vocabulário de forma que já rege
   todo o resto do site (header, botões, sub-nav de Serviços: pílula é
   a linguagem de "isto é clicável"). Cresce do centro (não desliza),
   então dois links vizinhos nunca parecem compartilhar uma barra. */
.nav-link{
  font-size:14px;
  font-weight:500;
  color:var(--ink-soft);
  position:relative;
  z-index:1;
  padding:8px 12px;
  border-radius:var(--radius-pill);
  white-space:nowrap;
  transition:color .2s ease;
}
.nav-link::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  border-radius:inherit;
  background:rgba(33,63,154,.09);
  opacity:0; transform:scale(.65);
  transition:opacity .2s ease, transform .3s cubic-bezier(0.16,1,0.3,1);
}
.nav-link:hover{ color:var(--ink); }
.nav-link:hover::before{ opacity:1; transform:scale(1); }
@media (prefers-reduced-motion:reduce){
  .nav-link::before,
  .btn-outline-light::before, .btn-outline-dark::before, .btn-outline-cream::before,
  .pill-cta-ghost::before{
    transition:opacity .12s ease; transform:scale(1);
  }
}

.header-actions{ display:flex; align-items:center; gap:14px; }
.header-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--orange); color:var(--ink);
  padding:11px 18px; border-radius:var(--radius-pill);
  font-size:13.5px; font-weight:600;
  white-space:nowrap;
}
.header-cta:hover{ background:var(--orange-dark); }
.header-cta svg{ width:15px; height:15px; }

.nav-toggle{
  position:relative;
  display:none;
  width:38px; height:38px;
  border:none; background:none;
  color:var(--ink);
}
/* As 3 barras nascem todas no mesmo ponto central (coordenadas inteiras:
   metade de 38px = 19, metade de 20px de largura = 10, metade de 2px de
   altura = 1 — sem fração) e só se deslocam via transform. Antes elas eram
   centralizadas pelo flexbox com gap, que divide o espaço sobrando entre
   as 3 e pode deixar uma barra numa fração de pixel diferente das outras
   — em telas de maior densidade isso rendeirzava uma linha visivelmente
   mais fina/borrada que as demais. */
.nav-toggle span{
  position:absolute; left:50%; top:50%;
  width:20px; height:2px; margin:-1px 0 0 -10px;
  background:currentColor; border-radius:2px;
  transition:transform .3s cubic-bezier(0.16,1,0.3,1), opacity .2s ease;
}
.nav-toggle span:nth-child(1){ transform:translateY(-7px); }
.nav-toggle span:nth-child(3){ transform:translateY(7px); }

/* Hambúrguer vira "X" ao abrir o menu — usa o aria-expanded que o JS já
   seta (nenhuma classe nova precisa entrar no botão). A barra do meio some
   e as outras duas giram 45°/-45° voltando pro centro (translateY(0) desfaz
   o deslocamento de cima, já que o ponto de partida agora é sempre o centro). */
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(0) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; transform:scaleX(0); }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(0) rotate(-45deg); }
@media (prefers-reduced-motion:reduce){
  .nav-toggle span{ transition:opacity .12s ease; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  background-size:cover;
  background-position:center;
  padding:calc(var(--header-h) + 40px) 0 90px;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,8,.6) 0%, rgba(10,10,8,.32) 40%, rgba(10,10,8,.68) 100%);
}
/* Grão fotográfico sutil sobre todo o hero — quebra a "perfeição" digital lisa
   sem custar performance (SVG turbulence, não é imagem). */
.hero::after{
  content:"";
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-inner{ position:relative; z-index:2; max-width:1100px; margin:0 auto; }
.hero-media, .hero-figure{ display:none; }

/* ---------- Hero (home) — foto do equipamento desfocada ao fundo, texto à esquerda ---------- */
.hero-light{
  color:#fff;
  text-align:left;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:calc(var(--header-h) + 56px) 0 90px;
  overflow:hidden;
}
.hero-light::after{ opacity:.06; }
/* Camada com a própria foto do gerador, ampliada e desfocada — o inset
   negativo empurra a borda do blur para fora da área visível, assim o
   overflow:hidden do .hero-light corta o halo transparente que o filter
   deixaria nas bordas em vez de mostrá-lo. */
.hero-light-bg{
  position:absolute; inset:-40px; z-index:0; pointer-events:none;
  background-image:url("../img/HERO.jfif");
  background-size:cover;
  background-position:center;
  filter:blur(4px) saturate(1.05);
  transform:scale(1.04);
}
/* Véu escuro por cima da foto — mais forte à esquerda (onde o texto fica)
   e mais aberto à direita, para a imagem ainda respirar sem derrubar o
   contraste do título/CTAs. Substitui o ::before genérico do .hero. */
.hero-light::before{
  display:block; content:"";
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(8,8,6,.88) 0%, rgba(8,8,6,.74) 34%, rgba(8,8,6,.42) 60%, rgba(8,8,6,.22) 82%, rgba(8,8,6,.46) 100%),
    linear-gradient(180deg, rgba(8,8,6,.2) 0%, transparent 26%, transparent 74%, rgba(8,8,6,.4) 100%);
}
.hero-light .hero-inner{ position:relative; z-index:2; width:100%; max-width:780px; margin:0; }
@media (min-width:900px){
  .hero-light .hero-inner{ max-width:960px; }
}
@media (min-width:1300px){
  .hero-light .hero-inner{ max-width:1080px; }
}

.hero-headline-v3{ margin:0; line-height:1.1; }
/* Contraste tipográfico intencional: a linha de contexto fica leve (peso 500),
   a frase de destaque puxa todo o peso visual (peso 900) — o olho vai direto
   nela, em vez das duas linhas competirem no mesmo peso. */
.hero-headline-v3 .line-lead{
  display:block;
  font-family:var(--font-display); font-weight:500;
  text-transform:uppercase; letter-spacing:-.005em;
  font-size:clamp(44px,9vw,72px);
  color:#fff;
}
.hero-headline-v3 .line-accent{
  display:block; position:relative;
  font-family:var(--font-display); font-weight:900;
  text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(44px,9vw,72px);
  color:var(--orange);
  margin-top:.22em;
}
/* Reflexo sutil: a palavra fica sempre na cor sólida (nunca perde contraste
   com o fundo); um brilho fraco só clareia de leve por cima, como um metal
   girando e pegando luz — nunca "lava" a letra até ela desaparecer.
   Usa ::after com conteúdo gerado (attr()) em vez de duplicar o texto no
   HTML — evita qualquer duplicação real do nó de texto/seleção/espaçamento. */
.hero-headline-v3 .line-accent::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .hero-headline-v3 .line-accent::after{
    content:attr(data-shine-text);
    background-image:linear-gradient(100deg,
      transparent 42%, rgba(255,244,222,.32) 49%, rgba(255,244,222,.32) 51%, transparent 58%);
    background-size:220% 100%;
    background-repeat:no-repeat;
    background-position:160% 0;
    -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
    mix-blend-mode:screen;
    animation:hero-shine 7s linear infinite;
  }
}
@keyframes hero-shine{
  0%{ background-position:160% 0; }
  100%{ background-position:-160% 0; }
}
@media (min-width:900px){
  .hero-headline-v3 .line-lead, .hero-headline-v3 .line-accent{ font-size:clamp(52px,6.6vw,108px); }
}
@media (min-width:1300px){
  .hero-headline-v3 .line-lead, .hero-headline-v3 .line-accent{ font-size:clamp(64px,7vw,124px); }
}

.hero-light p.hero-sub{
  margin:26px 0 0; color:rgba(255,255,255,.86);
  font-size:clamp(17px,4vw,20px); line-height:1.6; max-width:520px;
}
@media (min-width:900px){
  .hero-light p.hero-sub{ max-width:620px; font-size:clamp(18px,1.6vw,21px); }
}
.hero-light .hero-actions{ margin-top:36px; justify-content:flex-start; }

/* Botão "ghost" precisa de contorno e texto claros sobre a foto escura —
   nas demais seções (fundo claro) o .pill-cta-ghost padrão continua escuro. */
.hero-light .pill-cta-ghost{ color:#fff; border-color:rgba(255,255,255,.38); }
.hero-light .pill-cta-ghost::before{ background:rgba(255,255,255,.14); }
.hero-light .pill-cta-ghost:hover{ border-color:rgba(255,255,255,.6); }

/* Botões em pílula com selo circular de ícone */
.pill-cta{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:11px;
  padding:9px 28px 9px 9px; border-radius:var(--radius-pill);
  font-size:15.5px; font-weight:600; text-decoration:none; color:var(--ink);
  border:1px solid transparent;
  transition:transform .25s cubic-bezier(0.16,1,0.3,1), box-shadow .25s ease, background .2s, border-color .2s;
}
/* Levantada sutil no hover, no lugar do antigo efeito "magnético" (seguir o
   cursor): em movimento de mouse rápido, o botão perseguia o cursor com
   atraso e chegava a invadir o botão vizinho — instável e "tremendo".
   Um lift simples é o padrão de botão premium sem esse risco. */
.pill-cta:hover{ transform:translateY(-3px); box-shadow:0 14px 28px -10px rgba(16,16,16,.4); }
@media (min-width:900px){
  .pill-cta{ padding:10px 30px 10px 10px; font-size:16.5px; gap:12px; }
}
.pill-cta-icon{
  width:37px; height:37px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:var(--ink);
}
@media (min-width:900px){
  .pill-cta-icon{ width:40px; height:40px; }
  .pill-cta-icon svg{ width:17px; height:17px; }
}
.pill-cta-icon svg{ width:16px; height:16px; }
.pill-cta-icon-dark{ background:var(--ink); color:var(--orange); }
.pill-cta-solid{ background:var(--orange); }
.pill-cta-solid:hover{ background:var(--orange-dark); }
.pill-cta-ghost{ background:transparent; border-color:var(--border); }
.pill-cta-ghost::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:rgba(16,16,16,.05); opacity:0; transform:scale(0);
  transition:opacity .2s ease, transform .3s cubic-bezier(0.16,1,0.3,1);
}
.pill-cta-ghost:hover::before{ opacity:1; transform:scale(1); }

.hero h1{ font-size:clamp(56px,9.5vw,148px); }
.hero .sup{ font-size:.4em; vertical-align:super; }
.hero h1 .hl{ color:var(--orange); font-weight:700; }
.hero p{ margin:24px auto 0; font-size:clamp(17px,1.8vw,21px); max-width:640px; line-height:1.55; color:rgba(255,255,255,.92); }
.hero-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:34px; }

.page-hero{
  min-height:620px;
  padding:calc(var(--header-h) + 60px) 0 60px;
  align-items:flex-start;
}
.page-hero h1{ font-size:clamp(44px,7.5vw,96px); }
.page-hero .breadcrumb{ text-align:center; }
.page-hero .hero-inner{ padding-top:64px; width:100%; }

/* ---------- Logo strip (clientes) ---------- */
.logo-strip{
  padding:76px 0;
  background:
    radial-gradient(60% 140% at 50% 0%, rgba(33,63,154,.12), transparent 70%),
    var(--cream-2);
  border-bottom:1px solid var(--border);
  overflow:hidden;
}
.clients-head{ text-align:center; margin-bottom:40px; }

.logo-marquee{
  position:relative;
}
.logo-track{
  display:flex; align-items:center; justify-content:center;
  padding:14px 4px 28px;
}
/* Duas cópias da fileira lado a lado (ver HTML). No desktop só a primeira
   aparece (a segunda é só para o letreiro do mobile, ver media query). */
.logo-set{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:52px;
}
.logo-set[aria-hidden="true"]{ display:none; }

.logo-card{
  display:inline-flex; align-items:center; gap:14px;
  padding:14px 24px 14px 14px;
  background:rgba(255,255,255,.38);
  border:1px solid rgba(255,255,255,.5);
  border-radius:18px;
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 1px 3px rgba(16,16,16,.04), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease, border-color .3s ease;
}
.logo-card:hover{
  transform:translateY(-5px);
  background:rgba(255,255,255,.62);
  box-shadow:0 20px 36px -14px rgba(16,16,16,.18), inset 0 1px 0 rgba(255,255,255,.5);
  border-color:rgba(33,63,154,.35);
}
.logo-badge{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:14px; font-weight:700; letter-spacing:-.02em;
  background:linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
  box-shadow:0 6px 14px -4px rgba(33,63,154,.45);
}
.logo-badge.alt-dark{
  background:linear-gradient(135deg,#333330,var(--ink));
  box-shadow:0 6px 14px -4px rgba(16,16,16,.35);
}
.logo-badge.alt-green{
  background:linear-gradient(135deg,#1c7a9c,var(--brand-teal));
  box-shadow:0 6px 14px -4px rgba(21,101,129,.45);
}
.logo-card-text{ display:flex; flex-direction:column; line-height:1.25; white-space:nowrap; }
.logo-card-text .name{ font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.logo-card-text .sector{ font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); margin-top:3px; }

/* Cliente real (logo próprio, sem card/moldura em volta — só a logo, a
   cores originais, um pouco maior que o tamanho antigo). */
.logo-card.brand{
  height:64px;
  padding:0; justify-content:center;
  background:none; border:none; border-radius:0;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:none;
}
.logo-card.brand:hover{ transform:none; background:none; box-shadow:none; border-color:transparent; }
.brand-logo{
  max-height:48px; max-width:160px;
  width:auto; height:auto; display:block;
}
.brand-chip-dark{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ink); padding:14px 22px; border-radius:10px;
}
.brand-chip-dark .brand-logo{ max-height:28px; max-width:120px; }

@media (max-width:760px){
  .logo-strip{ padding:56px 0; }
  .logo-card{ padding:11px 18px 11px 11px; border-radius:14px; }
  .logo-badge{ width:36px; height:36px; font-size:12px; }
  .logo-card-text .name{ font-size:14px; }

  /* Letreiro: a trilha vira uma fila só (sem quebra de linha) com as duas
     cópias lado a lado, e desliza -50% (a largura de uma cópia) em loop —
     como a segunda cópia é idêntica, o reinício não deixa costura visível. */
  .logo-marquee{
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .logo-track{
    justify-content:flex-start;
    width:max-content;
    padding:14px 0 28px;
    animation:logo-marquee 28s linear infinite;
  }
  /* Sem gap na trilha entre as duas cópias — cada cópia carrega sua própria
     margem à direita, assim as duas ficam com largura idêntica e o
     translateX(-50%) do keyframe cai exatamente onde a 2ª cópia começa,
     sem salto na costura do loop. */
  .logo-set{
    flex-wrap:nowrap;
    gap:36px;
    margin-right:36px;
  }
  .logo-set[aria-hidden="true"]{ display:flex; }
  @keyframes logo-marquee{
    to{ transform:translateX(-50%); }
  }
}
@media (max-width:760px) and (prefers-reduced-motion: reduce){
  /* Sem animação: volta a ser uma fileira estática (quebra linha, centralizada)
     e a cópia duplicada — que só existe para o loop do letreiro — some. */
  .logo-marquee{ -webkit-mask-image:none; mask-image:none; }
  .logo-track{ animation:none; width:auto; justify-content:center; }
  .logo-set{ flex-wrap:wrap; margin-right:0; }
  .logo-set[aria-hidden="true"]{ display:none; }
}

/* ---------- Section paddings ---------- */
.section{ padding:100px 0; }
.section-tight{ padding:70px 0; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;
  margin-bottom:48px;
}
.rule{ border:none; border-top:1px solid var(--border); margin-bottom:40px; }

/* ---------- Páginas de texto (Termos, Privacidade) ---------- */
.legal-content{ max-width:760px; margin:0 auto; }
.legal-updated{ font-size:13px; color:var(--ink-soft); margin-bottom:44px; }
.legal-content h2{ font-size:24px; font-weight:600; letter-spacing:-.01em; color:var(--ink); margin:48px 0 14px; }
.legal-content h2:first-of-type{ margin-top:0; }
.legal-content h3{ font-size:17px; font-weight:600; color:var(--ink); margin:26px 0 10px; }
.legal-content p{ font-size:15.5px; line-height:1.75; color:var(--ink-soft); margin-bottom:16px; }
.legal-content ul, .legal-content ol{ margin:0 0 16px; padding-left:22px; }
.legal-content ul{ list-style:disc; }
.legal-content ol{ list-style:decimal; }
.legal-content li{ font-size:15.5px; line-height:1.75; color:var(--ink-soft); margin-bottom:8px; }
.legal-content li::marker{ color:var(--ink-soft); }
.legal-content strong{ color:var(--ink); font-weight:600; }
.legal-content a{ color:var(--brand-blue); text-decoration:underline; text-underline-offset:2px; }

/* ---------- Stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:64px; }
.stat-num{ font-size:clamp(40px,5vw,64px); font-weight:400; letter-spacing:-.02em; }
.stat-label{
  margin-top:8px; font-size:12px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft);
}

/* ---------- 3-card feature row ---------- */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
.feature-card{ background:var(--card-grad); border:1px solid var(--border); border-radius:var(--radius-card); padding:36px 32px; min-height:260px; display:flex; flex-direction:column; }
.feature-card h3{ font-size:22px; font-weight:500; margin-bottom:16px; }
.feature-card p{ color:var(--ink-soft); line-height:1.6; font-size:15px; }

/* ---------- Sector / solution / service cards ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:8px; }
.card-grid-2col{ grid-template-columns:repeat(2,1fr); gap:20px; }
.media-card{ display:block; }
.thumb{
  aspect-ratio:4/3; border-radius:var(--radius-card); overflow:hidden; background:var(--card);
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; touch-action:pan-y; }
/* Foto de produto (fundo próprio, sem "sangria") — mostra inteira em vez de
   cortar equipamento nas bordas ao preencher o quadro 4:3. O quadro em si
   troca o azul padrão por um neutro claro, senão a "moldura" azul brigava
   com o fundo branco/laranja da própria foto do produto. */
.thumb:has(img.fit-contain){ background:var(--cream); }
.thumb img.fit-contain{ object-fit:contain; padding:28px; box-sizing:border-box; }
.media-card:hover .thumb img.fit-contain{ transform:scale(1.03); }
.media-card:hover .thumb img{ transform:scale(1.05); }
.media-card .eyebrow{ margin-top:20px; margin-bottom:6px; }
.media-card h3{ font-size:20px; font-weight:500; margin-top:14px; margin-bottom:8px; }
.media-card p{ color:var(--ink-soft); font-size:14.5px; line-height:1.55; }

/* ---------- Horizontal carousel (sectors) ---------- */
.carousel-wrap{ position:relative; }
.carousel-track{
  display:flex; gap:24px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  padding-bottom:8px; scrollbar-width:none; touch-action:pan-x pan-y;
  -webkit-overflow-scrolling:touch;
}
.carousel-track *{ -webkit-user-drag:none; user-select:none; -webkit-touch-callout:none; }
.carousel-track img{ pointer-events:none; }
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-track .media-card{ min-width:280px; flex:0 0 280px; scroll-snap-align:start; }
.carousel-controls{ display:flex; align-items:center; gap:18px; margin-top:32px; }
.progress-bar{ flex:1; height:1px; background:var(--border); position:relative; }
.progress-bar-fill{ position:absolute; left:0; top:0; height:1px; background:var(--ink); width:20%; transition:width .2s ease; }
.carousel-btn{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; background:transparent; flex-shrink:0;
  transition:background .2s ease, color .2s ease;
}
.carousel-btn:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.carousel-btn svg{ width:16px; height:16px; }

/* ---------- Dark / accent banners ---------- */
.banner-dark{ background:var(--green-dark); color:var(--cream); padding:90px 0; }
.banner-dark h2{ color:#fff; max-width:640px; }
.banner-dark p{ margin-top:18px; color:rgba(251,250,245,.75); max-width:560px; }
.banner-dark .btn{ margin-top:32px; }

.banner-cta{
  background:linear-gradient(115deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);
  padding:90px 0; color:#fff;
}
.banner-cta h2{ max-width:620px; color:#fff; }
.banner-cta p{ margin-top:18px; max-width:560px; color:rgba(255,255,255,.82); }
.banner-cta .btn{ margin-top:32px; }

/* ---------- Footer ---------- */
.site-footer{ background:#fff; color:var(--ink); padding:76px 0 0; border-top:1px solid var(--border); }
.footer-top{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px; padding-bottom:56px;
}
.footer-brand .logo-img{ height:52px; }
.footer-brand p{ margin-top:18px; color:var(--ink-soft); font-size:14px; max-width:260px; line-height:1.6; }
.footer-col h3{ font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); margin-bottom:18px; font-weight:600; }
.footer-col li{ margin-bottom:12px; }
.footer-col a{ font-size:15px; color:var(--ink); }
.footer-col a:hover{ color:var(--brand-teal); }
.footer-social{ display:flex; gap:12px; margin-top:18px; }
.footer-social a{
  width:38px; height:38px; border:1px solid var(--border); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--ink);
}
.footer-social a:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.footer-social svg{ width:16px; height:16px; }
.footer-tagline{ margin-top:18px; font-size:14px; color:var(--ink-soft); }
.footer-bottom{
  border-top:1px solid var(--border);
  padding:26px 0;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
}
/* Selo "Empresa do Grupo Nagix" — indica que a Nagix Geradores pertence
   ao Grupo Nagix, sem competir com a marca principal (logo do rodapé
   continua sendo a da Nagix Geradores). */
.group-badge{ display:flex; align-items:center; gap:9px; }
.group-badge-icon{ height:22px; width:auto; display:block; flex-shrink:0; }
.group-badge span{ font-size:13px; color:var(--ink-soft); white-space:nowrap; }
.footer-bottom-links{ display:flex; gap:24px; flex-wrap:wrap; }
.footer-bottom-links a{ font-size:13px; color:var(--ink-soft); }
.footer-bottom-links a:hover{ color:var(--ink); }
.back-to-top{
  width:44px; height:44px; border-radius:50%; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; border:none;
  position:fixed; right:28px; bottom:28px; z-index:60; opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.back-to-top.show{ opacity:1; pointer-events:auto; }
.back-to-top svg{ width:18px; height:18px; }

/* ---------- Botão flutuante do WhatsApp ---------- */
.whatsapp-float{
  width:52px; height:52px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  position:fixed; left:24px; bottom:24px; z-index:60;
  opacity:0; pointer-events:none; transform:translateY(12px);
  box-shadow:0 10px 24px -6px rgba(37,211,102,.55), 0 2px 10px rgba(16,16,16,.18);
  transition:opacity .25s ease, transform .25s ease, box-shadow .2s ease;
}
.whatsapp-float.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.whatsapp-float:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 14px 30px -6px rgba(37,211,102,.6), 0 4px 12px rgba(16,16,16,.2);
}
.whatsapp-float svg{ width:28px; height:28px; position:relative; z-index:1; }
/* Anel pulsando por trás — chama o olho sem travar a UI, some com scroll-reduce */
.whatsapp-float::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:#25D366; opacity:.55; z-index:0;
  animation:whatsapp-pulse 2.4s ease-out infinite;
}
@keyframes whatsapp-pulse{
  0%{ transform:scale(1); opacity:.5; }
  100%{ transform:scale(1.7); opacity:0; }
}
@media (max-width:600px){
  .whatsapp-float{ width:48px; height:48px; left:16px; bottom:16px; }
  .whatsapp-float svg{ width:25px; height:25px; }
}
@media (prefers-reduced-motion:reduce){
  .whatsapp-float::before{ animation:none; display:none; }
  .whatsapp-float{ transition:none; }
}

/* ---------- Aviso de cookies (LGPD) ----------
   Fica escondido (translateY) até o JS decidir mostrar — evita "pulo"
   de layout na primeira pintura da página. Só chama gtag/GA depois que
   o visitante aceita; recusar não carrega nada do Google. */
.cookie-consent{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:500;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 28px;
  background:var(--cream); border:1px solid var(--border); border-radius:16px;
  padding:22px 26px; box-shadow:0 24px 48px -16px rgba(16,16,16,.28);
  transform:translateY(calc(100% + 32px)); transition:transform .5s cubic-bezier(0.16,1,0.3,1);
  max-width:920px; margin:0 auto;
}
.cookie-consent.show{ transform:translateY(0); }
.cookie-consent p{ margin:0; font-size:14px; line-height:1.6; color:var(--ink-soft); max-width:600px; }
.cookie-consent a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.cookie-consent-actions{ display:flex; gap:12px; flex-shrink:0; }
.cookie-consent-actions .btn-solid-dark:hover{ background:var(--orange); color:var(--ink); }
@media (max-width:640px){
  .cookie-consent{ left:12px; right:12px; bottom:12px; padding:20px; }
  .cookie-consent-actions{ width:100%; }
  .cookie-consent-actions .btn{ flex:1; justify-content:center; }
}

/* ---------- Forms (contato.html) ---------- */
.form-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start; }

.form-section{ margin-bottom:32px; }
.form-section .eyebrow{ margin-bottom:18px; }

.field{ margin-bottom:20px; }
.field:last-child{ margin-bottom:0; }
.field label{ display:block; font-size:13px; font-weight:600; margin-bottom:8px; color:var(--ink-soft); }
.field input, .field select, .field textarea{
  width:100%; padding:13px 16px; border:1.5px solid rgba(16,16,16,.14); border-radius:var(--radius-card);
  font-family:inherit; font-size:15px; background:#fff; color:var(--ink);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-soft); opacity:.75; }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:rgba(16,16,16,.28); }
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px #fff inset;
  box-shadow:0 0 0 1000px #fff inset;
  transition:background-color 9999s ease-in-out 0s;
}
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--brand-blue);
  box-shadow:0 0 0 3px rgba(33,63,154,.12);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.contact-info-card{ background:var(--card-grad); border:1px solid var(--border); border-radius:var(--radius-card); padding:36px; }
.contact-info-card h3{ font-size:20px; font-weight:500; margin-bottom:20px; }
.contact-info-row{ display:flex; gap:14px; margin-bottom:20px; align-items:flex-start; }
.contact-info-row svg{ width:20px; height:20px; flex-shrink:0; color:var(--brand-blue); margin-top:2px; }
.contact-info-row div p{ margin:0; }
.contact-info-row .label{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:4px; }

.map-stack{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.map-label{ display:block; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:8px; }
.map-frame{ border-radius:var(--radius-card); overflow:hidden; aspect-ratio:16/10; border:1px solid var(--border); background:var(--card); }
.map-frame iframe{ width:100%; height:100%; border:0; display:block; background:var(--card); }

.form-note{ font-size:13px; color:var(--ink-soft); margin-top:10px; }
.form-success{ display:none; background:#eaf5ea; border:1px solid #bfe3bf; color:#1e5c1e; padding:16px 18px; border-radius:8px; margin-top:18px; font-size:14px; }
.form-success.show{ display:block; }
.form-error{ display:none; background:#fdecec; border:1px solid #f3b8b8; color:#8a1f1f; padding:16px 18px; border-radius:8px; margin-top:18px; font-size:14px; line-height:1.5; }
.form-error.show{ display:block; }
.form-error a{ color:inherit; text-decoration:underline; font-weight:600; }
#contact-form .btn[disabled]{ opacity:.6; cursor:not-allowed; }
#contact-form .btn[disabled]:hover{ transform:none; }

/* ---------- Paralelismo gerador x concessionária ----------
   Duas colunas editoriais lado a lado (mesmo padrão de eyebrow + h3 + texto +
   lista + tags usado em solucoes.html), separadas por um fio vertical —
   sem diagrama, sem interação; o conteúdo todo fica visível de uma vez. */
.parallel-columns{ display:grid; grid-template-columns:1fr 1fr; gap:64px; margin-top:48px; align-items:start; }
.parallel-column h3{ font-size:22px; font-weight:500; margin:6px 0 14px; }
.parallel-column > p{ color:var(--ink-soft); line-height:1.65; font-size:15px; margin-bottom:24px; }
.parallel-column + .parallel-column{ padding-left:64px; border-left:1px solid var(--border); }
@media (max-width:900px){
  .parallel-columns{ grid-template-columns:1fr; gap:40px; }
  .parallel-column + .parallel-column{ padding-left:0; border-left:none; padding-top:40px; border-top:1px solid var(--border); }
}

/* ---------- Misc ---------- */
.tag-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.tag{ font-size:13px; font-weight:600; padding:8px 16px; border:1px solid var(--border); border-radius:var(--radius-pill); color:var(--ink-soft); }

.check-list{ display:flex; flex-direction:column; gap:10px; }
.check-list li{ display:flex; align-items:flex-start; gap:10px; font-size:15px; color:var(--ink-soft); line-height:1.5; }
/* Ícone de check em vez de bolinha genérica — a lista se chama "check-list",
   o marcador deveria parecer um item conferido, não um bullet decorativo.
   Mask em vez de background-image: herda a cor via background-color, então
   muda de tom junto com o resto do texto sem precisar de um segundo asset. */
.check-list li::before{
  content:"";
  width:15px; height:15px; margin-top:3px; flex-shrink:0;
  background-color:var(--brand-blue);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.two-col img{ border-radius:var(--radius-card); width:100%; aspect-ratio:4/3; object-fit:cover; }
/* Ilustração/diagrama (fundo branco, sem "respiro" pra cortar) — mostra
   inteira em vez de preencher o quadro cortando as bordas. */
.two-col img.fit-contain{ object-fit:contain; background:var(--cream); }
.two-col .product-shot{ display:flex; align-items:center; justify-content:center; height:100%; }
.two-col .product-shot img{ width:auto; max-width:70%; max-height:380px; aspect-ratio:auto; object-fit:contain; border-radius:0; }
.breadcrumb{ font-size:13px; color:rgba(255,255,255,.75); margin-bottom:18px; }
.breadcrumb a:hover{ color:#fff; }

.value-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px; }
.value-card{
  position:relative; overflow:hidden;
  padding:28px 24px; border:1px solid var(--border); border-radius:var(--radius-card);
  opacity:0; transform:translateY(26px);
  transition:opacity .7s cubic-bezier(0.16,1,0.3,1), transform .7s cubic-bezier(0.16,1,0.3,1),
             border-color .3s ease, box-shadow .3s ease;
  transition-delay:var(--reveal-delay, 0ms);
}
.value-card.is-visible{ opacity:1; transform:translateY(0); }
.value-card:hover{ border-color:var(--brand-blue); box-shadow:0 18px 36px -22px rgba(33,63,154,.35); }
/* Numeral fantasma no fundo: só o contorno, sem preenchimento — peso editorial sem competir com o texto. */
.value-card .num{
  position:absolute; top:2px; right:16px; font-size:60px; font-weight:700; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px var(--border); margin-bottom:0;
  pointer-events:none; user-select:none;
}
.value-card:hover .num{ -webkit-text-stroke-color:rgba(33,63,154,.3); transition:-webkit-text-stroke-color .3s ease; }
.value-icon{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; color:var(--brand-blue); }
.value-icon svg{ width:28px; height:28px; }
/* Ícone "se desenha": path normalizado (pathLength=1) anima o traçado de 0 a 100% no scroll. */
.value-icon svg path{
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1s cubic-bezier(0.16,1,0.3,1);
  transition-delay:calc(var(--reveal-delay, 0ms) + 150ms);
}
.value-card.is-visible .value-icon svg path{ stroke-dashoffset:0; }
.value-card h3{ position:relative; font-size:18px; font-weight:500; margin-bottom:10px; }
.value-card p{ position:relative; font-size:14px; color:var(--ink-soft); line-height:1.55; }
@media (prefers-reduced-motion:reduce){
  .value-card{ opacity:1; transform:none; transition:border-color .3s ease, box-shadow .3s ease; }
  .value-icon svg path{ stroke-dashoffset:0; transition:none; }
}

/* Variante de 3 colunas (processo Projetar/Implementar/Otimizar) — mesmo
   cartão com número fantasma e ícone que se desenha, só muda a contagem. */
.value-grid-3{ grid-template-columns:repeat(3,1fr); }
.process-flow{ position:relative; }
/* Setas de conexão entre os cards: elementos irmãos posicionados por
   porcentagem (não filhos do card) — .value-card tem overflow:hidden,
   então qualquer coisa ancorada nela e projetada pra fora seria cortada. */
.flow-arrow{ display:none; }
@media (min-width:900px){
  .process-flow .value-grid-3{ gap:34px; }
  .flow-arrow{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:50%; z-index:2;
    width:24px; height:24px; transform:translate(-50%,-50%);
    background-color:var(--cream);
    border:1px solid var(--border); border-radius:50%;
    color:var(--ink-soft);
  }
  .flow-arrow svg{ width:13px; height:13px; }
  /* Centro real do "vão" entre colunas de 1fr com gap fixo não é exatamente
     33.333%/66.666% — o gap desloca o meio de cada coluna em g/2, o que
     desloca o centro do vão em g/6 pra dentro. Compensa isso com calc()
     em vez de aproximar por porcentagem pura (senão desalinha visivelmente
     conforme a largura do container muda). g aqui precisa bater com o
     gap acima (34px): correção = 34/6 ≈ 5.667px. */
  .flow-arrow-1{ left:calc(33.3333% - 5.667px); }
  .flow-arrow-2{ left:calc(66.6667% + 5.667px); }
}

.accordion-item{ border-top:1px solid var(--border); }
.accordion-item:last-child{ border-bottom:1px solid var(--border); }
.accordion-trigger{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  background:none; border:none; padding:26px 0; text-align:left; font-size:19px; font-weight:500; color:var(--ink);
}
.accordion-trigger svg{ width:18px; height:18px; flex-shrink:0; transition:transform .25s ease; }
.accordion-item.open .accordion-trigger svg{ transform:rotate(45deg); }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.accordion-panel-inner{ padding-bottom:26px; color:var(--ink-soft); font-size:15px; line-height:1.6; max-width:720px; }

.service-detail-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:8px; }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .stats{ grid-template-columns:repeat(2,1fr); row-gap:36px; }
  .feature-grid, .card-grid, .service-detail-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; row-gap:40px; }
  .two-col{ grid-template-columns:1fr; gap:32px; }
  .form-grid{ grid-template-columns:1fr; gap:40px; }
  .value-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  /* Abaixo de ~900px o menu horizontal (logo + 5 links + telefone) não cabe
     numa linha só e passa a se sobrepor — por isso o hambúrguer entra antes,
     cobrindo também tablets (ex.: iPad em pé, 768px). */
  /* O backdrop-filter do header-inner faz o navegador usar aquela caixinha
     (a "pílula" do cabeçalho) como referência para o menu fixo, em vez da
     tela inteira — por isso o menu aparecia espremido/cortado. Desativando
     o blur aqui, o menu volta a se posicionar em relação à janela toda. */
  .header-inner{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(255,255,255,.94); }
  .main-nav{
    /* "left:0; right:0" fazia o menu ocupar a tela inteira em qualquer
       aparelho — num celular estreito passava batido, mas em telas maiores
       dentro dessa faixa (tablets, celulares grandes, até 900px) ficava
       esparramado: os links grudados à esquerda com um vão enorme vazio à
       direita. Um cartão com largura própria, ancorado do lado do botão
       que o abre, fica proporcional em qualquer largura. */
    position:fixed; top:86px; right:14px; left:auto;
    width:min(320px, calc(100vw - 28px));
    height:auto; max-height:calc(100vh - 86px - 24px);
    background:var(--cream); flex-direction:column; align-items:flex-start;
    padding:20px 24px 28px; gap:2px; transform:translateX(120%);
    transition:transform .3s ease; overflow-y:auto;
    border-radius:20px;
    box-shadow:0 20px 48px -8px rgba(16,16,16,.28);
    z-index:99;
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav .nav-link{ width:100%; padding:14px 0; font-size:18px; border-bottom:1px solid var(--border); border-radius:0; }
  .main-nav .nav-link:last-child{ border-bottom:none; }
  .main-nav .nav-link::before{ content:none; }
  .main-nav .nav-link:active{ color:var(--brand-blue); }
  .nav-toggle{ display:flex; }
  .header-cta span{ display:none; }
}
@media (max-width:760px){
  .container{ padding:0 20px; }
  /* CTAs em pílula com texto longo (ex.: "Nosso compromisso com a
     sustentabilidade") ultrapassavam a largura da tela — o texto não
     quebrava (white-space:nowrap) e o botão vazava pra fora do container,
     parecendo descentralizado. Deixa quebrar em 2 linhas se precisar. */
  .btn{ white-space:normal; max-width:100%; }
  .site-header{ padding:14px 14px 0; }
  .header-inner{ padding:6px 8px 6px 8px; }
  .logo-chip{ padding:4px 10px; }
  .logo-img{ height:36px; }
  .feature-grid, .card-grid, .service-detail-grid, .value-grid{ grid-template-columns:1fr; }
  /* Com a carta ocupando a tela toda, umas pílulas cabem lado a lado e
     outras não, dependendo só do tamanho do texto de cada tag — mesmo
     grupo de cartas ficava com uns em 1 linha e outros em 2+, um
     misturado com o outro. Empilhada, toda carta fica igual. */
  .tag-row{ flex-direction:column; align-items:flex-start; }
  .value-card .num{ font-size:46px; }
  .stats{ grid-template-columns:1fr 1fr; }
  .section{ padding:64px 0; }
  .form-row{ grid-template-columns:1fr; }
  /* .field:last-child zera a margem do 2º campo de cada .form-row (ex.:
     "Empresa", "Telefone") pensando no layout lado a lado do desktop — no
     mobile a linha empilha em coluna única e esse campo vira o de cima,
     ficando colado no rótulo do campo seguinte. Restaura o espaçamento. */
  .form-row .field:last-child{ margin-bottom:20px; }
  /* Campo com font-size < 16px faz o Safari/Chrome iOS dar zoom automático
     ao focar — o input "cresce" e o texto digitado fica cortado/grudado
     na borda da caixa. 16px evita esse zoom no toque. */
  .field input, .field select, .field textarea{ font-size:16px; }
  .footer-top{ grid-template-columns:1fr; }
  .map-stack{ grid-template-columns:1fr; gap:16px; }
  .carousel-track .media-card{ min-width:240px; flex-basis:240px; }
  /* No touch já dá pra arrastar os cards lateralmente — as setas ficam
     redundantes no mobile, então somem e sobra só a barra de progresso. */
  .carousel-controls .carousel-btn{ display:none; }
  /* Selo "Empresa do Grupo Nagix" empilha por último e centralizado no
     rodapé mobile — copyright e links legais continuam à esquerda, como
     o resto do rodapé; só o selo fica centralizado, sozinho, por baixo. */
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  /* Os 3 links quebravam "2 + 1" com espaçamento desigual entre as linhas
     (gap horizontal e vertical do wrap não batiam com o ritmo do resto do
     rodapé). Empilhados, cada um numa linha, com um gap só e consistente. */
  .footer-bottom-links{ flex-direction:column; align-items:flex-start; gap:10px; }
  .group-badge{ order:3; align-self:center; }
}

/* ---------- Motion: entrada do título do hero ---------- */
.hero-line{ display:block; overflow:hidden; padding-bottom:0.22em; margin-bottom:-0.22em; }
.hero-line > span{
  display:inline-block;
  transform:translateY(112%);
  transition:transform .8s cubic-bezier(0.16,1,0.3,1);
}
.hero.is-ready .hero-line > span{ transform:translateY(0); }

.hero p{ transition:opacity .7s cubic-bezier(0.16,1,0.3,1) .5s, transform .7s cubic-bezier(0.16,1,0.3,1) .5s; }
.hero-actions{ transition:opacity .7s cubic-bezier(0.16,1,0.3,1) .64s, transform .7s cubic-bezier(0.16,1,0.3,1) .64s; }
.hero p, .hero-actions{ opacity:0; transform:translateY(16px); }
.hero.is-ready p, .hero.is-ready .hero-actions{ opacity:1; transform:translateY(0); }

/* ---------- Motion: reveal de texto ao rolar ---------- */
.reveal-up{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s cubic-bezier(0.16,1,0.3,1), transform .7s cubic-bezier(0.16,1,0.3,1);
  transition-delay:var(--reveal-delay,0ms);
}
.reveal-up.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- Motion: pilha fixa no scroll (mobile) ----------
   No mobile, main.js envolve cada carta de um grupo (fora do carrossel)
   numa "stage" sticky (fixa na tela) onde TODAS as cartas ocupam a MESMA
   célula do grid — mesma posição, mesmo tamanho, sempre. main.js escreve o
   transform de cada carta direto (translateY em px), recalculado a cada
   evento de scroll: a posição É a posição do scroll, sem transição de
   tempo fixo tocando sozinha — para de rolar, para; volta o scroll, desfaz.
   Só a carta que está a caminho se move; as demais ficam paradas (a de
   baixo assentada, as de cima ainda estacionadas fora da área visível). */
.card-stack{
  display:block;
  position:relative;
  height:calc(var(--stack-count, 1) * 100vh);
  touch-action:pan-y;
}
.stack-stage{
  position:sticky;
  top:calc(var(--header-h) + 16px);
  display:grid;
  touch-action:pan-y;
  /* overflow:hidden (em vez de clip) aqui, combinado com position:sticky,
     tinha um bug real do Chrome: depois de rolar bem fundo na pilha, ele
     perdia a conta de onde as cartas (grid-area:1/1, sobrepostas) deviam
     ficar — todas colapsavam ~550px pra cima, mostrando a última carta
     (fora do lugar) por cima de tudo. clip corta visualmente igual, mas
     não cria o "scrollport" que causava a conta errada. */
  overflow:clip;
  background:var(--cream);
  padding:14px 0 28px;
}
.stack-card-slot{
  grid-area:1 / 1;
  align-self:stretch;
  transform:translateY(var(--park-y, 100vh));
  pointer-events:none;
  background:var(--cream);
  touch-action:pan-y;
}
.stack-card-slot.is-active{ pointer-events:auto; }
/* Cartas com textos de tamanhos diferentes (ex.: número de tags) têm alturas
   naturais diferentes. A track do grid já usa a mais alta como referência
   (align-self:stretch acima); aqui a carta em si preenche esse mesmo espaço,
   pra toda carta ocupar exatamente a mesma caixa e cobrir 100% a anterior —
   sem sobrar pedaço da carta de baixo aparecendo na virada da animação. */
.stack-card-slot > *{ height:100%; }

/* ---------- Motion: cartas saindo de trás uma da outra (desktop / carrossel) ----------
   Cada carta entra deslocada (baixo + lado + leve rotação) na direção
   oposta à carta anterior, como se estivesse empilhada atrás dela, e se
   assenta no lugar ao entrar na tela. Os valores de --stack-* são
   calculados por carta em main.js (posição no grupo + viewport). */
.reveal-card{
  --stack-x: 0px;
  --stack-y: 30px;
  --stack-rotate: 0deg;
  opacity:0;
  transform:translate(var(--stack-x), var(--stack-y)) scale(.95) rotate(var(--stack-rotate));
  transform-origin:50% 100%;
  transition:opacity .8s cubic-bezier(0.16,1,0.3,1), transform .8s cubic-bezier(0.16,1,0.3,1);
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity, transform;
}
.reveal-card.is-visible{
  opacity:1;
  transform:translate(0,0) scale(1) rotate(0deg);
  will-change:auto;
}
/* Carrossel horizontal: o overflow-y:hidden da trilha já mascara a entrada
   por baixo, então a carta ganha menos deslocamento vertical e o efeito
   fica mais "leque" (horizontal) do que "baralho" (vertical). */
.carousel-track .reveal-card{ --stack-y: 20px; }

/* ---------- Motion: empilhamento amarrado ao scroll (parallax) ----------
   Onde o navegador suporta scroll-driven animations, a carta deixa de
   depender do IntersectionObserver (que só dispara uma vez ao cruzar a
   tela) e passa a animar em função direta da posição de scroll: entra
   vindo de trás (pequena, deslocada, apagada), ocupa o centro no seu
   trecho de leitura, e sai encolhendo e tombando pro lado oposto, como se
   fosse pra trás da próxima carta — tudo no compositor, sem listener de
   scroll em JS. Sem suporte (ex. Firefox), cai de volta no reveal simples
   por IntersectionObserver acima. */
@supports (animation-timeline: view()){
  .reveal-card{
    opacity:1;
    transform:none;
    transition:none;
    animation:stack-scrub linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
  }
}
@keyframes stack-scrub{
  0%{
    opacity:0;
    transform:translate(var(--stack-x), var(--stack-y)) scale(.88) rotate(var(--stack-rotate));
  }
  40%, 60%{
    opacity:1;
    transform:translate(0,0) scale(1) rotate(0deg);
  }
  100%{
    opacity:.3;
    transform:translate(calc(var(--stack-x) * -1), calc(var(--stack-y) * -0.6)) scale(.88) rotate(calc(var(--stack-rotate) * -1));
  }
}

@media (prefers-reduced-motion: reduce){
  .hero-line > span{ transition:none; transform:none; }
  .hero p, .hero-actions{ transition:none; opacity:1; transform:none; }
  .hero-showcase, .hero-telemetry{ transition:none; opacity:1; transform:none; }
  .hero-headline-v3 .line-accent::after{ animation:none; content:none; }
  .reveal-up{ transition:none; opacity:1; transform:none; }
  .reveal-card{ transition:none; opacity:1; transform:none; animation:none; }
}