:root{
  --bg:#0B1220;
  --bg2:#0E172A;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.10);
  --text:#EAF2F7;
  --muted: rgba(234,242,247,.72);
  --border: rgba(255,255,255,.12);
  --shadow: 0 18px 60px rgba(0,0,0,.35);

  --primary:#134E6F;
  --secondary:#AFAFAF;
  --black:#000000;

  --radius: 18px;
  --radius2: 26px;
  --max: 1240px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1000px 650px at 15% 10%, rgba(19,78,111,.45), transparent 55%),
              radial-gradient(900px 600px at 85% 20%, rgba(175,175,175,.22), transparent 55%),
              linear-gradient(180deg, var(--bg2), var(--bg));
  color:var(--text);
  line-height:1.55;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:96%;max-width:var(--max);margin:0 auto}
.page{min-height:100vh;display:flex;flex-direction:column}
main{flex:1}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.05rem;border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  color:var(--text);
  box-shadow: none;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  cursor:pointer;
  font-weight:600;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22);}
.btn:active{transform: translateY(0px)}
.btn-primary{
  background: linear-gradient(135deg, rgba(19,78,111,1), rgba(19,78,111,.70));
  border-color: rgba(255,255,255,.18);
}
.btn-primary:hover{background: linear-gradient(135deg, rgba(19,78,111,1), rgba(19,78,111,.55));}
.btn-ghost{background: transparent}
.btn-block{width:100%}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(11,18,32,.55);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.site-header.scrolled{box-shadow: 0 10px 32px rgba(0,0,0,.30);}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 0;
  gap: 1rem;
}
.brand{display:flex;align-items:center;gap:.7rem}
.brand-logo{height:34px;width:auto;filter: drop-shadow(0 10px 20px rgba(0,0,0,.25));}
.nav{display:flex;align-items:center;gap:1.1rem}
.nav a{
  opacity:.88;
  font-weight:600;
  padding:.35rem .3rem;
  border-radius:10px;
}
.nav a:hover{opacity:1; background: rgba(255,255,255,.06);}
.header-actions{display:flex;align-items:center;gap:.6rem}
.burger-btn{display:none}

.burger{display:inline-flex;flex-direction:column;gap:5px}
.burger span{width:20px;height:2px;background: rgba(255,255,255,.85);border-radius:2px}

/* Mobile */
.mobile{display:none;border-top:1px solid rgba(255,255,255,.10); background: rgba(11,18,32,.78); backdrop-filter: blur(14px);}
.mobile.open{display:block}
.mobile-inner{padding:1rem 0;display:grid;gap:.75rem}
.mobile-inner a{padding:.4rem 0;font-weight:600}
.row{display:flex;gap:.6rem;flex-wrap:wrap}

/* Badge & typography */
.badge{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.42rem .85rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  font-weight:700;
  letter-spacing:.02em;
  font-size:.85rem;
  width: fit-content;
}
.dot{width:9px;height:9px;border-radius:999px;background: var(--secondary); box-shadow: 0 0 0 3px rgba(175,175,175,.18);}
.h-title{font-size: clamp(2rem, 4.2vw, 3.1rem); line-height:1.08; margin:.9rem 0 .9rem;}
.h-sub{max-width: 58ch; color:var(--muted); font-size:1.06rem; margin:0 0 1.2rem;}
.h2{font-size: clamp(1.55rem, 2.5vw, 2.1rem); margin:0 0 .45rem; line-height:1.15}
.p{color:var(--muted); margin:0; max-width: 70ch}
.u{background: linear-gradient(90deg, rgba(175,175,175,.95), rgba(255,255,255,.95));
   -webkit-background-clip:text; background-clip:text; color:transparent;}

/* Hero */
.hero{padding: 5.2rem 0 3.2rem; position:relative; overflow:hidden}
.page-hero{padding: 4.2rem 0 2.8rem}
.hero-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap: 1.8rem; align-items:stretch}
.hero-card{
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border-radius: var(--radius2);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}
.hero-card-top{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:2rem}
.pill{display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;padding:.35rem .65rem;background: rgba(175,175,175,.18); border:1px solid rgba(255,255,255,.12);font-weight:700; align-items: center; justify-content: center; text-transform: uppercase; text-align: center}; 
.mini{font-size:.9rem;color:rgba(234,242,247,.65)}
.hero-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.2rem}
.hero-metrics{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:1.35rem}
.metric{display:flex;flex-direction:column;gap:.15rem}
.metric strong{font-size:1.25rem}
.metric span{font-size:.92rem;color:rgba(234,242,247,.66);max-width:22ch}

/* checklist */
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.checklist li{display:flex;gap:.65rem;align-items:flex-start;color:rgba(234,242,247,.86)}
.check{
  width:18px;height:18px;border-radius:6px;
  background: rgba(19,78,111,.35);
  border:1px solid rgba(255,255,255,.18);
  position:relative; flex:0 0 18px; margin-top:.15rem;
}
.check:after{
  content:""; position:absolute; left:4px; top:4px;
  width:8px; height:5px; border-left:2px solid rgba(255,255,255,.9);
  border-bottom:2px solid rgba(255,255,255,.9);
  transform: rotate(-45deg);
}
.hero-card-actions{display:grid;gap:.65rem;margin-top:3rem}

/* Sections */
.section{padding: 4.4rem 0}
.section-head{display:grid;gap:.5rem;margin-bottom:1.6rem}
.section-head.light .h2, .section-head.light .p{color:#fff}
.grid3{display:grid;grid-template-columns: repeat(3, 1fr); gap: 1rem}
.grid2{display:grid;grid-template-columns: repeat(2, 1fr); gap: 1rem}
.card{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding: 1.05rem 1.05rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
  /* ✅ visível por padrão (evita sumir se JS/WAF bloquear animações) */
  transform: none;
  opacity: 1;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.card:hover{border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.085); transform: translateY(-2px);}

/* Glass blocks in parallax sections */
.glass{
  border:1px solid rgba(255,255,255,.16);
  background: rgba(11,18,32,.55);
  backdrop-filter: blur(12px);
  border-radius: var(--radius2);
  padding: 1.15rem 1.15rem;
  box-shadow: var(--shadow);
  transform: translateY(10px);
  opacity:0;
  transition: transform .6s ease, opacity .6s ease;
}
.glass.in{transform: translateY(0px); opacity:1;}
.tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}
.tags span{
  border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  padding:.3rem .55rem; border-radius: 999px; font-weight:700; font-size:.85rem; color:rgba(234,242,247,.85)
}

/* Parallax */
.hero-parallax, .section-parallax{
  position:relative;
  background-image: linear-gradient(180deg, rgba(11,18,32,.65), rgba(11,18,32,.92)), var(--bg);
  background-size: cover;
  background-position: center;
  ;
}
@media (prefers-reduced-motion: reduce){
  .hero-parallax, .section-parallax{background-attachment: scroll}
}

/* Timeline */
.timeline{display:grid;grid-template-columns: repeat(4, 1fr); gap:.8rem; margin-top: 1.3rem}
.t-step{
  display:flex;gap:.8rem;align-items:flex-start;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(11,18,32,.55);
  border-radius: 18px;
  padding:.9rem .9rem;
  transform: translateY(10px);
  opacity:0;
  transition: transform .6s ease, opacity .6s ease;
}
.t-step.in{transform: translateY(0px); opacity:1;}
.t-step span{
  width:28px;height:28px;border-radius:10px;
  background: rgba(19,78,111,.55);
  border:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-weight:800;
}
.t-step strong{display:block}
.t-step small{color:rgba(234,242,247,.68)}

/* Logo marquee */
.logo-marquee{
  /* Banner mais claro para acomodar logos coloridas */
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
  border-radius: var(--radius2);
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.logo-track{
  display:flex;gap:1.25rem;
  padding: 1rem 1.1rem;
  width:max-content;
  animation: marquee 28s linear infinite;
}
.logo-marquee.pause .logo-track{animation-play-state: paused;}
@keyframes marquee{
  from{transform: translateX(0)}
  to{transform: translateX(-50%)}
}
.logo-item{
  width:140px; height:70px;
  display:flex;align-items:center;justify-content:center;
  border-radius: 16px;
  border:1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.78);
  padding:.6rem;
  overflow:hidden;
  opacity:1;
}
.logo-item.in{opacity:1;}
.logo-item img{max-height:44px; max-width:100%; width:auto; object-fit:contain; filter:none; opacity:1}

/* Marquee genérico (Nichos/Setores) */
.marquee{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  border-radius: var(--radius2);
  overflow:hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
}
.marquee-track{
  display:flex;
  flex-wrap:nowrap;           /* mantém horizontal */
  align-items:stretch;
  gap: 1.25rem;
  padding: 1rem 1.1rem;
  width:max-content;          /* evita quebrar */
  animation: marquee 32s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state: paused;}

/* Cases cards */
.cases-cards{display:grid;grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.2rem}
.link{display:inline-flex;gap:.4rem;margin-top:.55rem;font-weight:800; color: rgba(234,242,247,.92);}
.link:hover{opacity:1;text-decoration: underline}

/* CTA */
.cta{padding: 2.8rem 0}
.cta-inner{
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(19,78,111,.35), rgba(255,255,255,.06));
  border-radius: var(--radius2);
  padding: 1.3rem 1.3rem;
  display:flex;align-items:center;justify-content:space-between;gap: 1rem;
}
.cta-actions{display:flex;gap:.7rem;flex-wrap:wrap}

/* Lists, small components */
.bullets{margin:.6rem 0 0;padding-left:1.1rem;color:rgba(234,242,247,.86)}
.bullets li{margin:.35rem 0}
.center{text-align:center}
.stack{display:grid;gap:.9rem}
.divider{height:1px;background: rgba(255,255,255,.12)}
.form{display:grid;gap:.9rem;margin-top:1rem}
.form-row{display:grid;grid-template-columns: 1fr 1fr; gap:.85rem}
label{display:grid;gap:.35rem;font-weight:700;font-size:.92rem;color:rgba(234,242,247,.90)}
input,textarea{
  width:100%;
  padding:.85rem .9rem;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(11,18,32,.55);
  color:var(--text);
  outline:none;
}
input:focus, textarea:focus{border-color: rgba(175,175,175,.55); box-shadow: 0 0 0 3px rgba(175,175,175,.14);}
.form-actions{display:flex;gap:.7rem;flex-wrap:wrap}
.mini{font-size:.9rem;color:rgba(234,242,247,.65);margin:0}

/* Footer */
.site-footer{
  border-top:1px solid rgba(255,255,255,.10);
  background: rgba(11,18,32,.72);
  backdrop-filter: blur(16px);
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 1.2rem;
  padding: 2.2rem 0 1.4rem;
}
.footer-logo{height:32px;width:auto;margin-bottom:.65rem}
.footer-text{color:rgba(234,242,247,.75);margin:0 0 .8rem}
.footer-note{
  color:rgba(234,242,247,.62);
  border-left:3px solid rgba(175,175,175,.40);
  padding-left:.75rem;
  margin-top:.7rem;
}
.footer-col h4{margin:.2rem 0 .6rem;font-size:1rem}
.footer-col a{display:block;padding:.25rem 0;color:rgba(234,242,247,.72);font-weight:600}
.footer-col a:hover{color:#fff;text-decoration: underline}
.footer-bottom{
  padding: 1rem 0 1.4rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  color:rgba(234,242,247,.65);
  border-top:1px solid rgba(255,255,255,.10);
}
.footer-mini{color:rgba(234,242,247,.55)}

/* WhatsApp floating */
.whatsapp-float{
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
}
.whatsapp-float a{
  display:flex;align-items:center;gap:.6rem;
  padding:.78rem 1rem;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(11,18,32,.72);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  font-weight:800;
}
.wa-dot{width:10px;height:10px;border-radius:999px;background: #25D366; box-shadow: 0 0 0 4px rgba(37,211,102,.16);}
.wa-text{letter-spacing:.01em}

/* Responsive */
@media (max-width: 980px){
  .nav{display:none}
  .burger-btn{display:inline-flex}
  .hero-grid{grid-template-columns: 1fr; }
  .grid3{grid-template-columns: 1fr}
  .grid2{grid-template-columns: 1fr}
  .cases-cards{grid-template-columns: 1fr}
  .timeline{grid-template-columns: 1fr}
  .cta-inner{flex-direction:column;align-items:flex-start}
  .form-row{grid-template-columns: 1fr}
  .footer-grid{grid-template-columns: 1fr; padding-top: 1.8rem}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .logo-item{width: 120px}
}

/* Niches marquee */
.niche-marquee .marquee-track{gap:14px}
.niche-item{
  width:280px; min-height:80px;
  flex: 0 0 auto; /* mantém os cards alinhados na horizontal */
  padding:.9rem 1rem;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(11,18,32,.38);
  overflow:hidden;
  backdrop-filter: blur(6px);
}
.niche-title{font-weight:750; letter-spacing:.2px}
.niche-sub{margin-top:.25rem; color:var(--muted); font-size:.92rem; line-height:1.35}
.niche-logo{
  width:150px; height:64px;
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto .55rem;
  padding:.35rem .5rem;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  overflow:hidden;
}
.niche-logo img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}
.niche-apoio{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin-top:.65rem;
}
.apoio-pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.35rem .55rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  color: var(--text);
  text-decoration:none;
  font-size:.82rem;
}
.apoio-pill:hover{transform: translateY(-1px)}
.apoio-logo{
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px;
  overflow:hidden;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.apoio-logo img{max-width:100%; max-height:100%; object-fit:contain; display:block}
.apoio-text{opacity:.9}

/* =========================
   OVERRIDES (hotfix)
   - Header white + nav blue
   - Niches: only logo box white
   - Cases carousel: keep running (pause on hover only)
   - Apoio logos: white mini-box
   ========================= */

/* Header branco */
.site-header{
  background:#ffffff !important;
  border-bottom:1px solid #e5e7eb !important;
  backdrop-filter: none !important;
}
.site-header.scrolled{box-shadow: 0 10px 32px rgba(0,0,0,.10) !important;}
.nav a{
  color: var(--primary) !important;
  opacity: 1 !important;
}
.nav a:hover{
  background:#f1f5f9 !important;
}
.burger span{background: var(--primary) !important;}

/* Nichos: somente a caixa da logo branca */
.niche-logo{
  background:#ffffff !important;
  border:1px solid rgba(0,0,0,.10) !important;
}
.niche-logo img{
  filter:none !important;
  opacity:1 !important;
}

/* Apoios: mini box branco */
.apoio-logo{
  background:#ffffff !important;
  border:1px solid rgba(0,0,0,.10) !important;
}

/* Carrossel de cases: sempre rodando (pausa só no hover) */
.logo-track{animation-play-state: running !important;}
.logo-marquee:hover .logo-track{animation-play-state: paused !important;}
.logo-marquee.pause .logo-track{animation-play-state: running !important;}

/* =========================
   Carousel controls + viewport (auto-scroll via JS)
   ========================= */

.carousel{position:relative}
.carousel-viewport{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel-viewport::-webkit-scrollbar{display:none}

/* Tracks animados por CSS desligados (o JS faz o infinito) */
[data-carousel] [data-track]{
  animation: none !important;
  transform: none !important;
}

.carousel-btn{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:38px; height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(11,18,32,.65);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:2;
  backdrop-filter: blur(8px);
}
.carousel-btn:hover{background: rgba(11,18,32,.85)}
.carousel-btn.prev{left:10px}
.carousel-btn.next{right:10px}

@media (max-width: 820px){
  .carousel-btn{display:none}
}

.section-head .h2{color:var(--text)}
.section-head .p{color:rgba(234,242,247,.72)}


/* Parceiros e Fornecedores (Produtos): centraliza textos nos cards */
.partners-marquee .niche-title,
.partners-marquee .niche-sub{
  text-align: center;
}


/* Parallax (desktop) */
@media (min-width: 900px){
  .hero-parallax, .section-parallax{
    background-attachment: fixed;
  }
}
@media (max-width: 899px){
  .hero-parallax, .section-parallax{
    background-attachment: scroll;
  }
}


/* Brand box (logos com tamanho travado) */
.brand-box{
  width: 100%;
  height: 78px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 16px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.10);
  padding: .6rem 1rem;
}
.brand-box img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}