:root{
  --bg:#0b0d10; --panel:#0e1319; --muted:#8ea0b5; --text:#e7edf5;
  --brand:#00aeef; --brand2:#1975ff; --accent:#ffd166;
  --container:1140px; --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.25);
  /* spacing scale */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:28px; --s-8:32px;
  --s-9:40px; --s-10:48px; --s-11:56px; --s-12:64px; --s-13:72px; --s-14:84px; --s-15:96px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;text-rendering:optimizeLegibility;line-height:1.6}
html{scroll-behavior:smooth}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--s-5)}


/* Loader */
.loader{position: fixed; inset:0;place-items:center;background:rgba(11,13,16,0.98);z-index:100;transition:opacity .35s ease; display: flex; align-content: center; justify-content: center;}
.loader-content{height: 25vh; place-items:center;display: grid;inset:0}
.loader.hide{opacity:0;pointer-events:none}
.loader .logo{width:96px;animation:float 2.2s ease-in-out infinite;}
.loader svg{fill: var(--brand);}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* Nav */
.nav{position:fixed;top:0;left:0;width:100%;z-index:50;background:rgba(11,13,16,.58);backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding: var(--s-4) 0}
.brand{display:flex;align-items:center;gap:var(--s-3);font-weight:800;font-family: Helvetica, Arial, sans-serif; font-size: 1.5rem;}
.logo{width:28px;height:28px}
.links{display:flex;gap:var(--s-4);align-items:center}
.links a{position:relative;padding: var(--s-3) var(--s-5);border-radius:10px;transition:background .2s, transform .15s}
.links a:hover{background:rgba(255,255,255,.08);transform:translateY(-1px)}
.links a.cta{padding: var(--s-3) var(--s-6);background:linear-gradient(135deg,var(--brand),var(--brand2));border-radius:12px;font-weight:700;box-shadow:var(--shadow)}
.progress{height:3px;background:rgba(255,255,255,.06)}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--brand2));transition:width .2s}

/* Hamburger */
.hamburger{display:none;background:none;border:0;width:42px;height:42px;position:relative;margin-left: var(--s-3)}
.hamburger span{position:absolute;left:9px;right:9px;height:2px;background:#fff;transition:transform .3s, top .3s, opacity .3s}
.hamburger span:nth-child(1){top:11px}
.hamburger span:nth-child(2){top:19px}
.hamburger span:nth-child(3){top:27px}
.hamburger.active span:nth-child(1){top:19px;transform:rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){top:19px;transform:rotate(-45deg)}

/* Mobile menu */

.mobile-menu{
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; font-size: 20px; z-index: 40;
  /* nada de filter aqui! */
}

/* camada de vidro que borra APENAS o que está atrás */
.mobile-menu::before{
  content: "";
  position: absolute; inset: 0; z-index: 0;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); /* iOS */
  background: rgba(10, 12, 16, 0.815); /* precisa de translucidez pra ativar o backdrop */
  border: 1px solid rgba(255,255,255,.06); /* opcional, look “frosted” */
}

/* coloca os links acima da camada de blur */
.mobile-menu > *{ position: relative; z-index: 1; }

/* botões/links do menu */
.mobile-menu a{
  padding: 16px 22px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  width: min(360px, 90vw);
  text-align: center;
  transition: transform .15s, background .2s;
}
.mobile-menu a:hover{ transform: translateY(-2px); background: rgba(255,255,255,.16); }

.hidden{display:none}

/* Hero */
.hero-wrap{margin-top:64px;position:relative}
.hero-bg{position:absolute;inset:0;background:radial-gradient(60% 40% at 70% 20%, #00aeef29, transparent), radial-gradient(60% 50% at 20% 80%, #1975ff1f, transparent);filter:blur(40px);z-index:0}

.hero{ position: relative; min-height: 580px; z-index: 1;} /* já tinha; só garantindo */
.hero-media{
  position: absolute;         /* <- muda para absolute */
  left: 50%;
  transform: translateX(-50%);/* agora funciona como esperado */
  top: 0;

  width: min(calc(var(--container) + 200px), calc(100vw - 24px));
  min-height: 575px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  margin-top: 2rem;
}
.hero-media video,.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:fadeIn .5s ease}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.42) 80%)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.hero-content{position:absolute;inset:auto 0 var(--s-5) 0;display:grid;place-items:center;text-align:center;padding:0 var(--s-4)}
.hero h1{font-size:clamp(28px,5vw,48px);line-height:1.15;margin:0 0 var(--s-2);font-weight:800}
.hero p{opacity:.9;margin:0 0 var(--s-4)}
.hero-actions{display:flex;gap:var(--s-3);justify-content:center;flex-wrap:wrap}
.hero-ui{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;margin: 0 -2rem;pointer-events:none}
.hero-arrow{pointer-events:auto;display:grid;place-items:center;transition:transform .15s, fill .4s;margin:0 var(--s-2); background: none; border: 0;fill: var(--brand);}
.hero-arrow svg{height:36px}
.hero-arrow:hover{transform:translateY(-2px); fill: var(--text); transition: transform .15s,fill .4s;}
.hero-dots{pointer-events:auto;display:grid;gap:var(--s-2);align-items:center;position:absolute;right:-2.5%;top:50%;transform:translateY(-50%)}
.hero-dots button{width:15px;height:15px;border-radius:50%;border:0;background:rgba(255,255,255,.35);transition:transform .2s, background .2s; transform: scale(0.8);}
.hero-dots button.active{background:#fff;transform:scale(1)}
.hero .btn {color: var(--text); font-size: medium;}

/* Buttons */
.btn{display:inline-block;padding: var(--s-3) var(--s-4);border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#001b0c;font-weight:800;box-shadow:var(--shadow);transition:transform .15s; border:0}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;border:1px solid rgba(255, 255, 255, 0.623);color:#eaf6ff}

/* Sections */
.section{padding-top: var(--s-14)}
.section h2{font-size:clamp(24px,3.5vw,36px);margin:0 0 var(--s-2);font-weight:800;letter-spacing:.2px}
.muted{opacity:.8}

/* === Slider de logos === */
#clientes .logo-viewport{
  margin-top: 2rem;
  position: relative;
  overflow: hidden;
  --gap: 28;  /* px */
  --peek: 60; /* px */
  padding-inline: calc(var(--peek) * 1px);
  user-select: none;
  touch-action: pan-y;
}
#clientes .logo-viewport::before,
#clientes .logo-viewport::after{
  content:""; position:absolute; top:0; bottom:0; width:72px; pointer-events:none; z-index:2;
  background: linear-gradient(to right, rgba(11,13,16,1), rgba(11,13,16,0));
}
#clientes .logo-viewport::after{ right:0; transform: scaleX(-1); }
#clientes .logo-viewport::before{ left:0; }

#clientes .logo-track{
  display:flex;
  gap: calc(var(--gap) * 1px);
  will-change: transform;
  transform: translate3d(0,0,0);
  padding-block: 10px;
}
#clientes .logo-item{
  flex: 0 0 auto;
  height: 200px;
  background: none;
  display:grid; place-items:center;
  transition: transform .18s ease;
}
#clientes .logo-item:hover{
  transform: translateY(-4px);
}
#clientes .logo-item img{
  max-width: 80%; max-height: 70%;
  object-fit: contain;
  border-radius: 10px;
}
@media (max-width: 768px){
  #clientes .logo-viewport{ --gap: 20; --peek: 24; }
  #clientes .logo-item{ height: 150px; }
}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap: var(--s-5);margin-top: var(--s-4)}
.card{background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.18)}
.card .media{aspect-ratio:16/9;background:#0a0f14;overflow:hidden}
.card .media img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .35s ease}
.card:hover .media img{transform:scale(1.06)}
.card .body{padding: var(--s-5)}
.card h3{margin:0 0 var(--s-2)}

/* About */
.about{display:grid;grid-template-columns:1.1fr .9fr;gap: var(--s-6);align-items:center}
.about-img{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);transform:translateZ(0)}
.bullets{display:grid;gap: var(--s-2);padding-left:18px;margin-top: var(--s-2)}

/* FAQ */
.faq{display:grid;gap: var(--s-3);margin-top: var(--s-3)}
.faq details{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding: var(--s-4)}

/* Contact CTA */
.contact-cta{position:relative;overflow:hidden;border-radius:20px;padding:var(--s-8) 0;margin-top: 4rem}
.contact-cta .contact-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.68)}
.contact-cta .contact-inner{position:relative;z-index:1;display:grid;place-items:center;padding: var(--s-12) var(--s-5);text-align:center;gap: var(--s-2)}
.contact-cta .lead{font-size:clamp(18px, 2.6vw, 22px);opacity:.95;margin-bottom: var(--s-2)}
.mini-link{margin-top: var(--s-2);opacity:.9}
.btn.big { font-size: large;}

.contact-cta .contact-inner { position: relative; z-index: 2; min-height: 260px; }

/* o wrapper do fundo cobre toda a área da seção */
.contact-bg { position: absolute; inset: 0; z-index: 0; }

/* o mapa ocupa tudo, com leve escala e blur para evitar bordas serrilhadas */
.contact-bg .map-wrap {
  position: absolute;
  inset: -2%;                  /* cresce um pouco pra esconder as bordas do blur */
  transform: scale(1.04);
  filter: blur(1px) saturate(0.9) brightness(0.7);
}

/* tamanho real do container do Leaflet */
#map { width: 100%; height: 100%; }

/* não “roubar” cliques do CTA acima */
.contact-bg .map-wrap,
.contact-bg .map-wrap .leaflet-container { pointer-events: none; }

/* opcional: se quiser um leve gradiente por cima do mapa */
.contact-bg::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.35) 85%);
  z-index: 1;
}

/* Footer */
.footer{padding: var(--s-8) 0;opacity:.78;text-align:center;border-top:1px solid rgba(255,255,255,.06);margin-top: var(--s-12)}

.footer a {fill: var(--text);transition: fill .25s ease; margin: .5rem; display: inline;}
.footer a:hover {fill: var(--brand);  transition: fill .25s ease;}

/* Back to top */
.back-to-top{position:fixed;right:18px;bottom:18px;padding: var(--s-3) var(--s-4);border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);backdrop-filter:blur(6px);display:block;opacity: 0; transform:translateY(100px); transition: opacity 0.5s, transform 0.25s ease-in-out;}
.back-to-top.show{ transform:translateY(0px); transition: opacity 0.5s, transform 0.25s ease-in-out; opacity: 1 ;}
.back-to-top:hover{transform:translateY(-2px)}

/* Wizard */
.wizard{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:70}
.wizard.hidden{display:none}
.wizard-panel{width:100%;height:100%;background:var(--panel);padding: var(--s-6);position:relative;overflow:hidden}
.wizard-close{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.08);border:0;border-radius:10px;width:38px;height:38px;color:#fff;font-size:22px;cursor:pointer}
.wizard-indicator{position:absolute;left:50%;transform:translateX(-50%);top:16px;display:flex;gap:var(--s-2);padding:0;margin:0;list-style:none}
.wizard-indicator li{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2)}
.wizard-indicator li.active{background:#fff}
.wizard-steps{height:100%;display:grid;place-items:center}
.wizard-steps .step{display:none;animation:wFade .25s ease}
.wizard-steps .step.active{display:block}
@keyframes wFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.step input,.step textarea{width:min(640px,86vw);padding: var(--s-4);border-radius:12px;border:1px solid rgba(255,255,255,.16);background:#0c1218;color:var(--text);margin-top: var(--s-2)}
.step-actions{margin-top: var(--s-3);display:flex;gap:var(--s-3);justify-content:space-between}
.pill-select{display:flex;flex-wrap:wrap;gap:var(--s-3);margin: var(--s-3) 0}
.pill{color: var(--text); padding: var(--s-3) var(--s-4);border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);cursor:pointer}
.pill.active{background:linear-gradient(135deg,var(--brand),var(--brand2));border-color:transparent}

/* Responsive */
@media (max-width: 900px){
  .btn-hero {padding: var(--s-4) var(--s-5);}
  .hero-arrow{margin: 0 var(--s-6);}
  .links{display:none}
  .hamburger{display:block}
  .about{grid-template-columns:1fr}
}

@media (max-width: 1366px){
  .container{width:90vw}
  .hero-dots{display: flex; top: -14rem; position: relative; align-items: flex-start;}

}


body.stop-scroll { overflow: hidden; }

/* ===== Reveal base ===== */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: none;
}

/* Direções extras via data-anim */
.reveal[data-anim="up"]      { transform: translateY(18px); }
.reveal[data-anim="down"]    { transform: translateY(-18px); }
.reveal[data-anim="left"]    { transform: translateX(24px); }
.reveal[data-anim="right"]   { transform: translateX(-24px); }
.reveal[data-anim="scale"]   { transform: scale(.96); }
.reveal[data-anim="fade"]    { transform: none; }

/* Suporte a “stagger” (atraso em cascata) */
[data-reveal-group] .reveal{
  transition-delay: var(--reveal-delay, 0ms);
}

/* Acessibilidade: se o usuário pede menos animação */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}