/* ====== GLOBAL ====== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:#15409e; font-family:'Plus Jakarta Sans',system-ui,sans-serif; overflow-x:hidden}
img{max-width:100%}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* zona azul contínua (como funciona + totens + clientes) — sem emendas */
.blue-zone{background:linear-gradient(180deg, #1f57da 0%, #1a4ec8 26%, #1648be 55%, #1240a8 100%)}

/* ========================================================= NAVBAR ========================================================= */
#navbar {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 1100px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  background: rgba(40, 43, 52, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transition: background 0.4s ease, box-shadow 0.4s ease, top 0.4s ease;
}
/*
#navbar.scrolled {
  background: rgba(30, 33, 42, 0.25);
}*/

.nav-logo {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.01em;
}
.nav-logo img {
  width: 38px;
  height: 38px;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(59, 120, 255, 0.35));
}
.nav-toggle {
  display: none;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  z-index: 10001;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 5px auto;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 0.3s;
  position: relative;
  padding-bottom: 2px;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #7fc7ff;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.nav-links a:hover,
.nav-links a.active {
  color: #fff;
}
.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}
@media (max-width: 620px) {
  #navbar {
    top: 12px;
    width: calc(100% - 24px);
    padding: 0.6rem 1rem;
    border-radius: 999px;
  }
  .nav-toggle { display: block; }

  /* Painel lateral deslizando da esquerda para a direita */
  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: min(78vw, 320px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
    padding: 6rem 1.8rem 2rem;
    background: rgba(30, 33, 42, 0.92);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 6px 0 30px rgba(0, 0, 0, 0.35);
    transform: translateX(-105%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10000;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { font-size: 16px; padding: 0.5rem 0; }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 9998;
  }
  .nav-backdrop.open { opacity: 1; pointer-events: auto; }
}

/* ========================================================= HERO ========================================================= */
.hero{ --blue:#1b4fd7; --blue-deep:#1450c8; --ink:#16233c; --body:#54627c; --line:#e4eaf6;
  position:relative; width:100%; padding:110px 24px 62px;
  background: linear-gradient(rgb(20 64 158 / 0%), rgb(33 88 216)), url(../../images/bg-index.jpg) center center / cover no-repeat #aac8d0;}
.hero *{box-sizing:border-box;margin:0;padding:0}
.hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:62px;
  background-image:linear-gradient(135deg, rgba(255,255,255,.10) 0 2px, transparent 2px 16px);
  background-size:22px 22px; opacity:.4; pointer-events:none}
.hero-panel{position:relative; overflow:hidden; border-radius:30px; min-height:600px; max-width:1320px; margin:0 auto;
  background:#eef3fb url("../../images/banner-hero.jpg") -70% center / auto 100% no-repeat;
  box-shadow:0 50px 90px -40px rgba(6,24,80,.6);}
.hero-wash{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.55) 24%, rgba(255,255,255,.12) 42%, rgba(255,255,255,0) 56%)}
.hero-logo{position:absolute; top:26px; right:34px; z-index:5; width:88px; height:88px; border-radius:50%;
  display:grid; place-items:center; text-align:center;
  background:radial-gradient(circle at 50% 32%, #2b313c, #0b0d11);
  box-shadow:0 12px 26px -10px rgba(10,20,50,.55), inset 0 1px 0 rgba(255,255,255,.14);
  opacity:0; animation:fadeUp .8s .15s forwards cubic-bezier(.2,.7,.2,1)}
.hero-logo .hl-text{font-family:'Sora',sans-serif; font-weight:800; font-size:13px; color:#fff; line-height:1; letter-spacing:.03em}
.hero-logo .hl-text small{display:block; font-weight:600; font-size:7px; letter-spacing:.24em; color:#8fbcff; margin-top:4px}
.hero-inner{position:relative; z-index:2; max-width:1240px; margin:0 auto;
  display:grid; grid-template-columns:1.02fr 1fr; gap:24px; align-items:center; padding:56px 40px 80px; min-height:600px}
.hero-eyebrow{display:inline-flex; align-items:center; gap:14px; font-size:13px; letter-spacing:.34em; font-weight:600;
  text-transform:uppercase; color:var(--blue); margin-bottom:24px; opacity:0; animation:fadeUp .8s .1s forwards cubic-bezier(.2,.7,.2,1)}
.hero-eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--blue); box-shadow:0 0 0 4px rgba(27,79,215,.15)}
.hero-eyebrow .bar{width:120px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--blue),rgba(27,79,215,0))}
.hero h1{font-family:'Sora',sans-serif; font-weight:700; color:var(--ink); font-size:clamp(34px,4.6vw,58px);
  line-height:1.08; letter-spacing:-.015em; opacity:0; animation:fadeUp .85s .22s forwards cubic-bezier(.2,.7,.2,1)}
.hero h1 .hl{color:var(--blue)}
.hero-lead{margin-top:26px; max-width:520px; font-size:clamp(15px,1.4vw,17.5px); line-height:1.62; color:var(--body);
  opacity:0; animation:fadeUp .85s .42s forwards cubic-bezier(.2,.7,.2,1)}
.hero-lead b{color:var(--blue); font-weight:700}
.hero-cta{margin-bottom:28px; margin-top: 18px; align-self:flex-start}
.hero-cta:hover{transform:translateY(-2px); box-shadow:0 18px 32px -10px rgba(27,79,215,.8), inset 0 1px 0 rgba(255,255,255,.3); filter:brightness(1.05)}
.hero-cta:hover svg{transform:translateX(4px)}
.hero-cta:hover::after{left:160%}
.hero-feats{display:flex; flex-wrap:wrap; gap:16px; margin-top:36px}
.feat{position:relative; /* display:flex; */; align-items:center; gap:14px; padding:16px 20px; border-radius:16px;
  background:rgba(80,140,255,.14); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.45); box-shadow:0 8px 28px -10px rgba(20,60,160,.28), inset 0 1px 0 rgba(255,255,255,.6);
  overflow:hidden; isolation:isolate; opacity:0; transform:translateY(18px); transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s, background .4s}
.feat:nth-child(1){animation:fadeUp .7s .6s forwards cubic-bezier(.2,.7,.2,1)}
.feat:nth-child(2){animation:fadeUp .7s .72s forwards cubic-bezier(.2,.7,.2,1)}
.feat:nth-child(3){animation:fadeUp .7s .84s forwards cubic-bezier(.2,.7,.2,1)}
.feat::before{content:""; position:absolute; inset:0; border-radius:16px; padding:1px;
  background:linear-gradient(130deg, rgba(27,79,215,.6), rgba(110,170,255,.15) 45%, rgba(27,79,215,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .4s; z-index:1}
.feat::after{content:""; position:absolute; top:0; left:18px; right:18px; height:2px;
  background:linear-gradient(90deg,transparent,var(--blue),transparent); opacity:0; transition:opacity .4s}
.feat:hover{transform:translateY(-6px); background:rgba(80,140,255,.24); box-shadow:0 20px 40px -14px rgba(27,79,215,.38), 0 0 0 1px rgba(255,255,255,.55)}
.feat:hover::before{opacity:1} .feat:hover::after{opacity:.9}
.feat-ic{flex:0 0 auto; width:42px; height:42px; border-radius:11px; display:grid; place-items:center; color:var(--blue);
  background:rgba(27,79,215,.14); box-shadow:inset 0 0 0 1px rgba(27,79,215,.22)}
.feat-ic svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.feat-tx{font-size:15px; line-height:1.25; color:var(--ink); font-weight:600}
.feat-tx small{display:block; font-weight:500; color:var(--body); font-size:14px}
.hero-devices{position:relative; height:100%; min-height:520px}
.device{position:absolute; opacity:0; will-change:transform}
.device-float{animation:float 6s ease-in-out infinite}
.device svg, .device img{display:block; width:100%; height:auto; filter:drop-shadow(0 22px 26px rgba(40,70,140,.22))}
.device.d-totem{width:55%; left:-28%; bottom:-10%; z-index:3; animation:deviceIn 1s .5s forwards cubic-bezier(.2,.75,.2,1)}
.device.d-totem .device-float{animation-delay:1.5s}
.device.d-booth{width:45%; left:18%; bottom:7%; z-index:2; animation:deviceIn 1s .72s forwards cubic-bezier(.2,.75,.2,1)}
.device.d-booth .device-float{animation-delay:1.7s; animation-duration:6.6s}
.device.d-kiosk{width:52%; left:51%; bottom:-8%; z-index:4; animation:deviceIn 1s .9s forwards cubic-bezier(.2,.75,.2,1)}
.device.d-kiosk .device-float{animation-delay:1.9s; animation-duration:5.6s}
.hero-scroll{position:absolute; left:48%; bottom:20px; transform:translate(-50%,50%); z-index:6; width:74px; height:74px;
  border:none; border-radius:50%; cursor:pointer; background:radial-gradient(circle at 50% 35%, #2f6bf0, var(--blue-deep));
  box-shadow:0 14px 30px -8px rgba(10,40,120,.6), inset 0 2px 0 rgba(255,255,255,.25); display:grid; place-items:center; color:#fff;
  opacity:0; animation:fadeUp .7s 1.1s forwards}
.hero-scroll svg{width:26px;height:26px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round; animation:bob 1.8s ease-in-out infinite}
.hero-scroll::before,.hero-scroll::after{content:""; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(110,160,255,.7); animation:ripple 2.4s ease-out infinite}
.hero-scroll::after{animation-delay:1.2s}
.hero-scroll:hover{filter:brightness(1.08)}
@keyframes fadeUp{to{opacity:1;transform:none}}
@keyframes deviceIn{from{opacity:0;transform:translateX(70px) scale(.92)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@keyframes ripple{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.3);opacity:0}}
@media (max-width:920px){
  .hero{padding:92px 24px 54px}
  .hero-panel{background-position:48% center; border-radius:24px}
  .hero-inner{grid-template-columns:1fr; gap:10px; padding:44px 26px 40px}
  .hero-wash{background:linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.55) 44%, rgba(255,255,255,.1) 72%, transparent 100%)}
  .hero-devices{min-height:225px; margin-top:8px}
  .device.d-totem{width:30%; left:8%} .device.d-booth{width:28%; left:34%;bottom:-2%} .device.d-kiosk{width:33%; left:55%; bottom:-2%}
  .hero-logo{width:70px;height:70px;top:18px;right:20px}
}
@media (max-width:560px){
  .hero{padding:84px 14px 40px}
  /* box mais curto: reordena texto → totens → cards (sem mexer no HTML) */
  .hero-inner{display:flex; flex-direction:column; align-items:stretch; min-height:0; padding:38px 18px 26px}
  .hero-copy{display:contents}   /* eyebrow, h1, lead e feats viram itens flex de .hero-inner */
  .hero h1{font-size:28px; line-height:1.1}          /* KNOB: tamanho da chamada */
  .hero-eyebrow{margin-bottom:14px}
  .hero-lead{margin-top:-10px; font-size:14px}        /* KNOB: lead */
  /* totens subidos e ATRÁS dos cards */
  .hero-devices{order:1; position:relative; z-index:1; min-height:150px; margin-top:115px}   /* KNOB: altura dos totens */
  .device.d-totem{width:36%; left:2%; bottom:0} .device.d-booth{width:36%; left:33%; bottom:5%} .device.d-kiosk{width:36%; left:62%; bottom:0}
  /* cards por baixo dos totens, sobrepondo um pouco e por cima (z-index) */
  .hero-feats{order:2; position:relative; z-index:5; margin-top:-61px; gap:8px; flex-wrap:nowrap}   /* KNOB margin-top: sobreposição */
  .feat{flex:1; min-width:0; padding:10px 8px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px}
  .feat-ic{width:32px; height:32px; border-radius:8px; flex-shrink:0}
  .feat-ic svg{width:18px; height:18px}
  .feat-tx{font-size:12px}
  .feat-tx small{font-size:11px}
  .hero-scroll{left:41%; transform:translate(-50%,50%); bottom:0}
  .br-mobile-hide{display:none}
}

/* ========================================================= NOSSO SERVIÇO ========================================================= */
.proc-section{ --cyan:#7fc7ff; --cyan-bright:#cfe8ff; --cyan-soft:#a9d6ff; --ink:#fff; --muted:rgba(206,226,255,.74);
  position:relative; isolation:isolate; overflow:hidden; width:100%; padding:92px 28px 104px; color:#fff; background:transparent;}
.proc-section *{box-sizing:border-box;margin:0;padding:0}
.proc-section::after{content:""; position:absolute; left:50%; top:42%; z-index:-2; width:1200px; height:560px; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(150,205,255,.30), rgba(150,205,255,0) 72%); pointer-events:none}
.proc-bg{position:absolute; inset:0; z-index:-2; width:100%; height:100%; pointer-events:none}
.proc-bg .circuit{opacity:.28} .proc-bg .waves path{fill:none}
.proc-grain{position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.proc-wrap{position:relative; max-width:1260px; margin:0 auto; z-index:1}
.proc-head{text-align:center; max-width:760px; margin:0 auto 60px; opacity:0; transform:translateY(18px); animation:procIn .8s .05s forwards cubic-bezier(.2,.7,.2,1)}
.proc-eyebrow{display:inline-flex; align-items:center; gap:12px; font-size:12.5px; letter-spacing:.34em; font-weight:600; text-transform:uppercase; color:var(--cyan-soft); margin-bottom:18px}
.proc-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan); box-shadow:0 0 0 4px rgba(127,199,255,.22)}
.proc-eyebrow .bar{width:46px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--cyan),transparent)}
.proc-head h2{font-family:'Sora',sans-serif; font-weight:700; line-height:1.12; font-size:clamp(27px,3.6vw,44px); letter-spacing:-.01em}
.proc-head h2 b{color:var(--cyan)}
.proc-head p{margin-top:16px; font-size:clamp(15px,1.3vw,16.5px); line-height:1.6; color:var(--muted)}
.proc-track{display:flex; align-items:stretch; justify-content:center; gap:0}
.proc-step{flex:1 1 0; max-width:272px; opacity:0; transform:translateY(26px); animation:procIn .85s forwards cubic-bezier(.2,.7,.2,1)}
.proc-step:nth-of-type(1){animation-delay:.16s} .proc-step:nth-of-type(3){animation-delay:.30s}
.proc-step:nth-of-type(5){animation-delay:.44s} .proc-step:nth-of-type(7){animation-delay:.58s}
.proc-card{position:relative; height:100%; min-height:430px; padding:0 24px; display:flex; flex-direction:column; align-items:center; text-align:center; border-radius:26px;
  background:linear-gradient(180deg, rgba(125,178,255,.18), rgba(40,96,210,.10) 55%, rgba(20,60,160,.14)); border:1px solid rgba(150,200,255,.30);
  box-shadow:0 30px 60px -26px rgba(3,16,60,.9), 0 0 50px -16px rgba(120,185,255,.30), inset 0 1px 0 rgba(255,255,255,.18); overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .45s;}
.proc-card{background-image:linear-gradient(180deg, rgba(125,178,255,.18), rgba(40,96,210,.10) 55%, rgba(20,60,160,.14)), radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.3px);
  background-size:auto, 22px 22px; background-position:center, center;}
.proc-card .edge{position:absolute; left:50%; transform:translateX(-50%); width:56%; height:3px; border-radius:4px;
  background:linear-gradient(90deg, transparent, var(--cyan-bright) 50%, transparent); box-shadow:0 0 16px 3px rgba(150,210,255,.75); opacity:.85; transition:opacity .45s, box-shadow .45s; pointer-events:none}
.proc-card .edge-top{top:-1px} .proc-card .edge-bottom{bottom:-1px}
.proc-card .shine{content:""; position:absolute; top:0; left:-120%; width:55%; height:100%;
  background:linear-gradient(105deg, transparent 20%, rgba(180,225,255,.45) 50%, rgba(255,255,255,.18) 60%, transparent 80%); transform:skewX(-18deg); transition:left .85s ease; pointer-events:none}
.proc-step:hover .proc-card{transform:translateY(-10px); border-color:rgba(140,210,255,.85);
  box-shadow:0 44px 80px -28px rgba(2,12,52,.95), 0 0 70px -8px rgba(100,185,255,.65), inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 40px -10px rgba(100,180,255,.12)}
.proc-step:hover .proc-card .edge{opacity:1; box-shadow:0 0 24px 5px rgba(170,220,255,.9)}
.proc-step:hover .proc-card .edge-top{box-shadow:0 0 32px 6px rgba(160,220,255,.95); opacity:1}
.proc-step:hover .proc-card .shine{left:150%}
.proc-card .sp-top{flex:1.15 1 0; min-height:34px} .proc-card .sp-bot{flex:1 1 0; min-height:30px}
.proc-icon{position:relative; width:96px; height:96px; border-radius:50%; display:grid; place-items:center; border:1.5px solid rgba(180,220,255,.55);
  background:radial-gradient(closest-side, rgba(120,180,255,.18), rgba(120,180,255,0) 80%); box-shadow:inset 0 0 18px rgba(150,205,255,.25), 0 0 22px -6px rgba(130,195,255,.5); transition:transform .45s, box-shadow .45s, border-color .45s}
.proc-icon::before{content:""; position:absolute; inset:-9px; border-radius:50%; border:1px solid rgba(160,210,255,.18)}
.proc-icon svg{width:46px; height:46px; stroke:#eef6ff; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round}
.proc-step:hover .proc-icon{transform:scale(1.06); border-color:rgba(200,230,255,.85); box-shadow:inset 0 0 22px rgba(160,210,255,.4), 0 0 30px -2px rgba(150,205,255,.8)}
.proc-num{display:flex; align-items:center; gap:12px; margin:26px 0 14px; font-family:'Sora',sans-serif; font-weight:600; font-size:19px; letter-spacing:.06em; color:rgba(190,220,255,.85)}
.proc-num i{width:20px; height:1.5px; border-radius:2px; background:rgba(150,200,255,.45)}
.proc-card h3{font-family:'Sora',sans-serif; font-weight:700; font-size:21px; line-height:1.22; letter-spacing:-.01em; color:#fff}
.proc-conn{flex:0 0 52px; align-self:center; height:80px; position:relative; display:flex; align-items:center; justify-content:center; opacity:0; animation:procIn .8s forwards}
.proc-conn:nth-of-type(2){animation-delay:.36s} .proc-conn:nth-of-type(4){animation-delay:.5s} .proc-conn:nth-of-type(6){animation-delay:.64s}
.proc-conn .knob{position:absolute; left:0; width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px 2px rgba(127,199,255,.8)}
.proc-conn .rail{position:absolute; left:6px; right:16px; height:2px; background:linear-gradient(90deg, rgba(170,215,255,.7), rgba(170,215,255,.25))}
.proc-conn .pulse{position:absolute; top:50%; left:0; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:#eaf5ff; box-shadow:0 0 12px 2px rgba(180,220,255,.95); animation:flow 2.6s linear infinite}
.proc-conn:nth-of-type(4) .pulse{animation-delay:.9s} .proc-conn:nth-of-type(6) .pulse{animation-delay:1.8s}
.proc-conn .chev{position:relative; z-index:2; color:var(--cyan-soft); filter:drop-shadow(0 0 6px rgba(150,205,255,.7))}
.proc-conn .chev svg{width:16px; height:22px; display:block; stroke:currentColor; stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round}
@keyframes flow{0%{left:2px;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 22px);opacity:0}}
@keyframes procIn{to{opacity:1;transform:none}}
@media (max-width:1080px){
  .proc-section{padding:72px 22px 86px} .proc-track{flex-direction:column; align-items:center}
  .proc-step{max-width:460px; width:100%} .proc-card{min-height:0; padding:38px 26px 34px}
  .proc-card .sp-top,.proc-card .sp-bot{flex:0; min-height:0; display:none} .proc-card .edge{width:48%}
  .proc-conn{flex:0 0 auto; width:auto; height:48px; transform:rotate(90deg)}
}
@media (max-width:560px){
  .proc-section{padding:52px 14px 64px}
  .proc-track{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  .proc-conn{display:none}
  .proc-step{max-width:none; width:auto}
  .proc-card{padding:22px 14px 20px}
  .proc-icon{width:72px; height:72px}
  .proc-icon svg{width:36px; height:36px}
  .proc-num{font-size:16px; margin:16px 0 10px}
  .proc-card h3{font-size:17px}
}

/* ========================================================= TOTENS / PRODUTOS (card branco sobre o azul) ========================================================= */
.prod{ --blue:#1b4fd7; --blue-deep:#1450c8; --ink:#16233c; --body:#54627c; --line:#e4eaf6;
  position:relative; width:100%; padding:30px 24px 40px; background:transparent;}
.prod *{box-sizing:border-box;margin:0;padding:0}
.prod-panel{position:relative; isolation:isolate; overflow:hidden; max-width:1320px; margin:0 auto; border-radius:30px;
  padding:74px 40px 84px; background:radial-gradient(120% 80% at 50% -8%, #ffffff 0%, #eef2f9 52%, #e5eaf3 100%);
  box-shadow:0px 0px 30px 4px rgba(6, 24, 80, .6)}
.prod-bg{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.prod-bg .circuit{opacity:.4}
.prod-bg .bands{position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0 18%, rgba(255,255,255,.5) 18% 19%, transparent 19% 25%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent); mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent); opacity:.4}
.prod-bg .dots{position:absolute; inset:0; background-image:radial-gradient(rgba(120,160,235,.18) 1px, transparent 1.3px); background-size:30px 30px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 40%,#000,transparent 80%); mask-image:radial-gradient(120% 80% at 50% 40%,#000,transparent 80%); opacity:.5}
.prod-wrap{position:relative; z-index:1; max-width:1180px; margin:0 auto}
.prod-head{text-align:center; max-width:720px; margin:0 auto 54px; opacity:0; transform:translateY(16px); animation:pIn .8s .05s forwards cubic-bezier(.2,.7,.2,1)}
.prod-eyebrow{display:inline-flex; align-items:center; gap:12px; font-size:12.5px; letter-spacing:.34em; font-weight:600; text-transform:uppercase; color:var(--blue); margin-bottom:16px}
.prod-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--blue); box-shadow:0 0 0 4px rgba(27,79,215,.15)}
.prod-eyebrow .bar{width:46px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--blue),transparent)}
.prod-head h2{font-family:'Sora',sans-serif; font-weight:700; line-height:1.12; font-size:clamp(26px,3.4vw,42px); letter-spacing:-.01em; color:var(--ink)}
.prod-head h2 b{color:var(--blue)}
.prod-head p{margin-top:14px; font-size:clamp(14.5px,1.3vw,16.5px); line-height:1.6; color:var(--body)}
.prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
.product{opacity:0; transform:translateY(26px); animation:pIn .8s forwards cubic-bezier(.2,.7,.2,1)}
.product:nth-child(1){animation-delay:.16s} .product:nth-child(2){animation-delay:.28s}
.product:nth-child(3){animation-delay:.40s} .product:nth-child(4){animation-delay:.52s}
.card{position:relative; height:100%; padding:22px 22px 26px; border-radius:24px; display:flex; flex-direction:column; align-items:center; text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.34)); border:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(8px) saturate(130%); -webkit-backdrop-filter:blur(8px) saturate(130%);
  box-shadow:0 26px 50px -28px rgba(30,70,150,.55), 0 0 30px -10px rgba(150,195,255,.45), inset 0 1px 0 rgba(255,255,255,.9); overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .45s}
.card .edge{position:absolute; left:50%; transform:translateX(-50%); width:58%; height:3px; border-radius:4px;
  background:linear-gradient(90deg, transparent, #ffffff 50%, transparent); box-shadow:0 0 16px 3px rgba(170,215,255,.8); opacity:.85; transition:opacity .45s, box-shadow .45s; pointer-events:none}
.card .edge-top{top:-1px} .card .edge-bottom{bottom:-1px}
.card .shine{position:absolute; top:0; left:-130%; width:55%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform:skewX(-18deg); transition:left .85s ease; pointer-events:none}
.product:hover .card{transform:translateY(-12px); border-color:#fff; box-shadow:0 42px 70px -28px rgba(20,55,130,.65), 0 0 50px -8px rgba(150,200,255,.7), inset 0 1px 0 rgba(255,255,255,1)}
.product:hover .card .edge{opacity:1; box-shadow:0 0 24px 5px rgba(180,220,255,.95)} .product:hover .card .shine{left:160%}
.stage{position:relative; width:100%; height:315px; display:flex; align-items:flex-end; justify-content:center; margin-bottom:8px}
.float{display:flex; align-items:flex-end; justify-content:center; height:100%; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.product:hover .float{transform:translateY(-8px) scale(1.05)}
.float img{display:block; width:auto; max-width:120%; height:325px; filter:drop-shadow(0 18px 26px rgba(30,60,130,.30))}
.card h3{font-family:'Sora',sans-serif; font-weight:700; font-size:18px; letter-spacing:-.01em; margin-bottom:8px; color:var(--ink)}
.card p{font-size:13.6px; line-height:1.55; color:var(--body); margin-bottom:18px; flex:1 0 auto}
.btn{display:inline-flex; align-items:center; gap:9px; align-self:center; padding:11px 22px; border-radius:999px; cursor:pointer; text-decoration:none;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:14px; color:#fff; background:linear-gradient(135deg, #2f6bf0, var(--blue));
  box-shadow:0 12px 24px -10px rgba(27,79,215,.65), inset 0 1px 0 rgba(255,255,255,.25); transition:transform .35s, box-shadow .35s, filter .35s; position:relative; overflow:hidden}
.btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round; transition:transform .35s}
.btn::after{content:""; position:absolute; top:0; left:-120%; width:45%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-18deg); transition:left .7s ease}
.product:hover .btn{transform:translateY(-2px); box-shadow:0 18px 32px -10px rgba(27,79,215,.8), inset 0 1px 0 rgba(255,255,255,.3); filter:brightness(1.05)}
.product:hover .btn svg{transform:translateX(4px)} .product:hover .btn::after{left:160%}
.btn:focus-visible{outline:3px solid rgba(27,79,215,.4); outline-offset:2px}
@media (max-width:980px){.prod-grid{grid-template-columns:repeat(2,1fr); gap:22px}}
@media (max-width:560px){.prod{padding:18px 10px 28px} .prod-panel{padding:48px 16px 56px} .prod-grid{grid-template-columns:1fr 1fr; gap:12px} .stage{height:200px} .float img{height:185px} .card{padding:16px 12px 18px} .card h3{font-size:15px} .card p{font-size:12px; line-height:1.5} .btn{font-size:12px; padding:9px 14px}}
@keyframes pIn{to{opacity:1; transform:none}}

/* ========================================================= CLIENTES / MARCAS ========================================================= */
.brands{ --cyan:#9ccbff; --muted:rgba(206,226,255,.74);
  position:relative; isolation:isolate; overflow:hidden; width:100%; padding:80px 28px 88px; color:#fff; background:transparent;}
.brands *{box-sizing:border-box;margin:0;padding:0}
.brands-bg{position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.brands-bg .circuit{opacity:.16}
.brands-bg .dots{position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.3px); background-size:28px 28px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 35%, transparent 18%, #000 75%); mask-image:radial-gradient(120% 80% at 50% 35%, transparent 18%, #000 75%); opacity:.5}
.brands::after{content:""; position:absolute; left:50%; top:46%; z-index:-1; width:1100px; height:480px; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(140,190,255,.22), rgba(140,190,255,0) 72%); pointer-events:none}
.brands-wrap{position:relative; z-index:1; max-width:1180px; margin:0 auto}
.brands-head{text-align:center; max-width:720px; margin:0 auto 52px; opacity:0; transform:translateY(16px); animation:bIn .8s .05s forwards cubic-bezier(.2,.7,.2,1)}
.brands-eyebrow{display:inline-flex; align-items:center; gap:12px; font-size:12.5px; letter-spacing:.34em; font-weight:600; text-transform:uppercase; color:var(--cyan); margin-bottom:16px}
.brands-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan); box-shadow:0 0 0 4px rgba(156,203,255,.22)}
.brands-eyebrow .bar{width:46px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--cyan),transparent)}
.brands-head h2{font-family:'Sora',sans-serif; font-weight:700; line-height:1.14; font-size:clamp(25px,3.2vw,40px); letter-spacing:-.01em}
.brands-head h2 b{color:var(--cyan)}
.brands-head p{margin-top:14px; font-size:clamp(14.5px,1.3vw,16px); line-height:1.6; color:var(--muted)}
.brands-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:22px 30px; align-items:center; opacity:0; animation:bIn 1s .3s forwards cubic-bezier(.2,.7,.2,1)}
.logo{display:flex; align-items:center; justify-content:center; min-height:72px; padding:6px 8px; text-decoration:none; border-radius:12px; transition:background .35s}
.logo-name{font-family:'Sora',sans-serif; font-weight:700; font-size:16px; line-height:1.05; letter-spacing:.01em; text-align:center; color:#fff; opacity:.5; transition:opacity .4s ease, text-shadow .4s ease}
.logo-name small{display:block; font-weight:500; font-size:10px; letter-spacing:.08em; opacity:.8; margin-top:2px}
.logo img{max-height:85px; max-width:100%; object-fit:contain; filter:brightness(0) invert(1); opacity:.5; transition:opacity .4s ease, filter .4s ease}
.logo:hover .logo-name{opacity:1; text-shadow:0 0 18px rgba(160,205,255,.75)}
.logo:hover img{opacity:1; filter:brightness(0) invert(1) drop-shadow(0 0 10px rgba(160,205,255,.7))}
.logo:focus-visible{outline:2px solid rgba(156,203,255,.6); outline-offset:2px}
@media (max-width:1024px){.brands-grid{grid-template-columns:repeat(4,1fr); gap:20px 26px}}
@media (max-width:620px){.brands{padding:60px 20px 68px} .brands-grid{grid-template-columns:repeat(2,1fr); gap:18px 18px} .logo{min-height:58px}}
@keyframes bIn{to{opacity:1; transform:none}}

/* ========================================================= CONTATO + RODAPÉ ========================================================= */
.ct{ --blue:#5a9bff; --blue-soft:#8fbcff; --bg:#22262d; --bg2:#15181d; --line:rgba(255,255,255,.10); --text:#c6cedb; --muted:#8b93a2;
  position:relative; isolation:isolate; overflow:hidden; width:100%; padding:78px 28px 0; color:var(--text);
  background:radial-gradient(120% 90% at 18% 0%, #2b313a 0%, #22262d 46%, #1a1d23 100%);}
.ct *{box-sizing:border-box;margin:0;padding:0}
.ct::before{content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, #1450c8, #3b78ff, #1450c8); z-index:3}
.ct-bg{position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.ct-bg .dots{position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px); background-size:26px 26px}
.ct-bg .circuit{opacity:.12}
.ct-bg .glow{position:absolute; width:620px; height:620px; border-radius:50%; background:radial-gradient(closest-side, rgba(70,120,235,.22), rgba(70,120,235,0) 70%)}
.ct-bg .g1{right:-8%; top:-12%} .ct-bg .g2{left:-10%; bottom:6%; background:radial-gradient(closest-side, rgba(70,120,235,.16), rgba(70,120,235,0) 70%)}
.ct-wrap{position:relative; z-index:1; max-width:1240px; margin:0 auto}
.ct-head{margin-bottom:42px; opacity:0; transform:translateY(16px); animation:cIn .8s .05s forwards cubic-bezier(.2,.7,.2,1)}
.ct-eyebrow{display:inline-flex; align-items:center; gap:12px; font-size:12.5px; letter-spacing:.34em; font-weight:600; text-transform:uppercase; color:var(--blue); margin-bottom:14px}
.ct-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--blue); box-shadow:0 0 0 4px rgba(90,155,255,.18)}
.ct-eyebrow .bar{width:46px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--blue),transparent)}
.ct-head h2{font-family:'Sora',sans-serif; font-weight:700; color:#fff; line-height:1.14; font-size:clamp(25px,3.2vw,40px); letter-spacing:-.01em}
.ct-head h2 b{color:var(--blue)}
.ct-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:40px; align-items:stretch; opacity:0; transform:translateY(20px); animation:cIn .85s .2s forwards cubic-bezier(.2,.7,.2,1)}
.map-card{position:relative; min-height:380px; border-radius:18px; overflow:hidden; border:1px solid var(--line); background:linear-gradient(135deg,#2b313b,#20242b); box-shadow:0 28px 50px -26px rgba(0,0,0,.7)}
.map-card iframe{position:absolute; inset:0; width:100%; height:100%; border:0; filter:saturate(.95)}
.info{display:grid; grid-template-columns:1fr 1fr; gap:0};
.info-item{padding:26px 26px 30px; border-bottom:1px solid var(--line)}
.info-item:nth-child(odd){border-right:1px solid var(--line); padding-left:0}
.info-item:nth-child(even){padding-left:30px}
.info-item:nth-child(3),.info-item:nth-child(4){border-bottom:none; padding-bottom:6px}
.info-item:nth-child(1),.info-item:nth-child(2){padding-top:6px}
.info-top{display:flex; align-items:center; gap:14px; margin-bottom:14px}
.info-ic{flex:0 0 auto; width:48px; height:48px; border-radius:13px; display:grid; place-items:center; color:var(--blue-soft);
  background:linear-gradient(150deg,#2f343d,#262b32); border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); transition:transform .35s, box-shadow .35s, color .35s}
.info-ic svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.info-item:hover .info-ic{transform:translateY(-3px); color:#fff; box-shadow:0 0 0 1px rgba(90,155,255,.4), 0 0 22px -4px rgba(90,155,255,.6)}
.info-label{font-family:'Sora',sans-serif; font-weight:600; font-size:18px; color:var(--blue)}
.info-body{font-size:15px; line-height:1.7; color:var(--text)}
.info-body a{color:var(--text); text-decoration:none; position:relative; border-bottom:1px solid rgba(255,255,255,.22); padding-bottom:1px; transition:color .3s, border-color .3s}
.info-body a:hover{color:var(--blue-soft); border-color:var(--blue-soft)}
.info-body .row{display:block}
.ft{position:relative;z-index:1;margin-top:64px;/* background:linear-gradient(180deg, rgba(18,21,26,0), #14171c 22%); */border-top:1px solid var(--line);}
.ft-in{max-width:1240px; margin:0 auto; padding:48px 0 0}
.ft-top{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px}
.ft-brand .logo{font-family:'Sora',sans-serif; font-weight:800; font-size:22px; color:#fff; letter-spacing:-.01em; display:inline-flex; align-items:center; gap:10px; height:auto}
.ft-brand .logo img{height:85px; width:auto; display:block}
.ft-brand p{margin-top:16px; max-width:330px; font-size:14px; line-height:1.65; color:var(--muted)}
.ft-social{display:flex; gap:12px; margin-top:22px}
.ft-social a{width:40px;height:40px;border-radius:11px; display:grid; place-items:center; color:var(--text); background:#1c2026; border:1px solid var(--line); transition:transform .3s, color .3s, box-shadow .3s}
.ft-social a svg{width:19px;height:19px;fill:currentColor}
.ft-social a:hover{transform:translateY(-3px); color:#fff; box-shadow:0 0 0 1px rgba(90,155,255,.4), 0 0 18px -4px rgba(90,155,255,.6)}
.ft-col h4{font-family:'Sora',sans-serif; font-weight:600; font-size:14px; color:#fff; letter-spacing:.04em; margin-bottom:16px}
.ft-col ul{list-style:none; display:flex; flex-direction:column; gap:11px}
.ft-col a{color:var(--muted); text-decoration:none; font-size:14px; transition:color .3s; display:inline-flex; align-items:center; gap:8px}
.ft-col a:hover{color:var(--blue-soft)}
.ft-bottom{margin-top:42px; padding:20px 0 26px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.ft-bottom p{font-size:13px; color:var(--muted)}
.ft-bottom .made{font-size:13px; color:var(--muted); display:none} .ft-bottom .made b{color:var(--blue-soft); font-weight:600}

@media (max-width:900px){.ct-grid{grid-template-columns:1fr; gap:28px} .ft-top{grid-template-columns:1fr 1fr; gap:30px} .ft-brand{grid-column:1 / -1}}
@media (max-width:560px){.ct{padding:58px 20px 0} .info{grid-template-columns:1fr} .info-item{padding:22px 0!important; border-right:none!important; border-bottom:1px solid var(--line)!important} .info-item:last-child{border-bottom:none!important} .ft-top{grid-template-columns:1fr} .ft-bottom{flex-direction:column; align-items:flex-start}}
@keyframes cIn{to{opacity:1; transform:none}}

/* ========================================================= WHATSAPP FAB ========================================================= */
.wa-fab{position:fixed; bottom:24px; right:24px; z-index:10000;
  width:56px; height:56px; border-radius:50%; background:#25d366;
  box-shadow:0 4px 20px rgba(37,211,102,.45); display:flex;
  align-items:center; justify-content:center; cursor:pointer;
  border:none; transition:transform .25s, box-shadow .25s}
.wa-fab svg{width:30px; height:30px; fill:#fff; transition:transform .3s}
.wa-fab:hover{transform:scale(1.08)}
.wa-fab.open svg{transform:rotate(20deg) scale(.9)}
.wa-fab:focus-visible{outline:3px solid rgba(37,211,102,.7); outline-offset:3px}

.wa-popup{position:fixed; bottom:92px; right:24px; z-index:10000;
  width:270px; background:#1a1a2e; border:1px solid rgba(255,255,255,.1);
  border-radius:16px; box-shadow:0 16px 48px rgba(0,0,0,.6); overflow:hidden;
  transform-origin:bottom right; transform:scale(.85) translateY(10px);
  opacity:0; transition:transform .25s cubic-bezier(.34,1.56,.64,1), opacity .25s;
  pointer-events:none}
.wa-popup.open{transform:scale(1) translateY(0); opacity:1; pointer-events:all}

.wa-popup-header{background:linear-gradient(135deg,#075e54,#128c7e);
  padding:14px 16px; display:flex; align-items:center; gap:10px}
.wa-popup-avatar{width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.15); display:flex; align-items:center;
  justify-content:center; font-size:1rem; flex-shrink:0}
.wa-popup-info{flex:1}
.wa-popup-name{font-weight:700; font-size:.85rem; color:#fff; font-family:'Sora',sans-serif}
.wa-popup-status{font-size:.72rem; color:rgba(255,255,255,.7); display:flex; align-items:center; gap:4px; margin-top:2px}
.wa-popup-dot{width:6px; height:6px; border-radius:50%; background:#4ade80; display:inline-block}
.wa-popup-dot.offline{background:#fbbf24}
.wa-popup-body{padding:14px 12px 6px}
.wa-popup-msg{background:rgba(255,255,255,.06); border-radius:10px;
  padding:10px 12px; font-size:.78rem; color:#94a3b8; line-height:1.5; margin-bottom:12px}
.wa-options{display:flex; flex-direction:column; gap:6px; padding-bottom:14px}
.wa-option{display:flex; align-items:center; gap:10px;
  background:rgba(37,211,102,.08); border:1px solid rgba(37,211,102,.2);
  border-radius:10px; padding:9px 12px; font-size:.78rem; color:#d1fae5;
  font-weight:500; transition:all .15s; text-decoration:none; cursor:pointer}
.wa-option:hover{background:rgba(37,211,102,.18); border-color:rgba(37,211,102,.5)}
.wa-option-icon{font-size:1rem; flex-shrink:0}
.wa-popup-footer{padding:4px 12px 14px; font-size:.72rem; color:#64748b; text-align:center; font-style:italic}
@media(max-width:400px){.wa-popup{right:12px; width:calc(100vw - 24px)}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  [style*="opacity:0"],.feat,.product,.proc-step,.proc-head,.proc-conn,.brands-head,.brands-grid,.ct-head,.ct-grid,.hero-eyebrow,.hero h1,.hero-lead,.hero-logo,.hero-scroll,.device{opacity:1!important; transform:none!important}
}