/* =========================================================
   MEGA WORLD LOGISTICS — style.css
   Animações, estados JS e detalhes que o Tailwind não cobre
   ========================================================= */

:root{
  --navy-900:#0B1533;
  --navy-800:#122148;
  --navy-700:#1B2E63;
  --azure-500:#12A5E5;
  --azure-400:#3FC6F1;
}

html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{ font-family:'Inter', system-ui, sans-serif; overflow-x:hidden; }
::selection{ background:var(--azure-500); color:#fff; }

/* ---------- Utilidades de texto ---------- */
.font-800{ font-weight:800; }
.font-700{ font-weight:700; }

.text-gradient{
  background:linear-gradient(100deg,#3FC6F1 0%,#12A5E5 55%,#8FE3FF 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* =========================================================
   HEADER
   ========================================================= */
#header{ background:transparent; }
#header.is-scrolled{
  background:rgba(255,255,255,0.97);
  box-shadow:0 4px 24px rgba(11,21,51,0.08);
  backdrop-filter:saturate(140%) blur(6px);
}

/* Logo swap (branco no topo -> navy ao rolar) */
#header.is-scrolled .logo-white{ opacity:0; }
#header.is-scrolled .logo-navy{ opacity:1; }

/* Nav links */
.nav-link{
  position:relative;
  color:rgba(255,255,255,0.9);
  font-weight:500; font-size:15px;
  transition:color .25s ease;
}
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-6px;
  width:0; height:2px; background:var(--azure-500);
  transition:width .28s ease;
}
.nav-link:hover::after,
.nav-link.is-active::after{ width:100%; }
#header.is-scrolled .nav-link{ color:#1B2E63; }
.nav-link:hover{ color:var(--azure-500); }
#header.is-scrolled .nav-link:hover{ color:var(--azure-500); }

/* Hamburger */
.hamburger{ display:block; width:26px; height:18px; position:relative; }
.hamburger span{
  position:absolute; left:0; height:2px; width:100%;
  background:#fff; border-radius:2px; transition:all .3s ease;
}
.hamburger span:nth-child(1){ top:0; }
.hamburger span:nth-child(2){ top:8px; }
.hamburger span:nth-child(3){ top:16px; }
#header.is-scrolled .hamburger span{ background:#1B2E63; }
body.menu-open .hamburger span{ background:#fff; }
body.menu-open .hamburger span:nth-child(1){ top:8px; transform:rotate(45deg); }
body.menu-open .hamburger span:nth-child(2){ opacity:0; }
body.menu-open .hamburger span:nth-child(3){ top:8px; transform:rotate(-45deg); }

/* =========================================================
   MOBILE MENU
   ========================================================= */
.mobile-menu{
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
.mobile-menu.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.mobile-link{
  color:#fff; font-family:'Sora',sans-serif; font-weight:600;
  font-size:1.5rem; letter-spacing:-0.01em;
  transition:color .2s ease;
}
.mobile-link:hover{ color:var(--azure-400); }
body.menu-open{ overflow:hidden; }

/* =========================================================
   HERO
   ========================================================= */
.hero-video{ filter:saturate(1.05) contrast(1.02); }

.hero-overlay{
  background:
    linear-gradient(105deg, rgba(7,14,36,0.92) 0%, rgba(11,21,51,0.72) 42%, rgba(18,33,72,0.35) 72%, rgba(18,165,229,0.10) 100%);
}
.hero-vignette{
  background:
    linear-gradient(to top, rgba(7,14,36,0.96) 0%, rgba(7,14,36,0) 32%),
    radial-gradient(120% 80% at 20% 30%, rgba(0,0,0,0) 40%, rgba(7,14,36,0.35) 100%);
}

/* Rotas decorativas animadas */
.hero-routes .route{
  opacity:.55;
  animation:dash 14s linear infinite;
}
.hero-routes .route-2{ animation-duration:20s; opacity:.4; }
@keyframes dash{ to{ stroke-dashoffset:-320; } }

/* Scroll indicator */
.scroll-mouse{
  width:22px; height:34px; border:2px solid currentColor; border-radius:12px;
  position:relative;
}
.scroll-mouse::after{
  content:''; position:absolute; left:50%; top:6px; transform:translateX(-50%);
  width:3px; height:7px; border-radius:2px; background:currentColor;
  animation:mouse 1.6s ease-in-out infinite;
}
@keyframes mouse{ 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 80%{opacity:0;transform:translate(-50%,10px)} 100%{opacity:0} }

/* =========================================================
   BOTÕES
   ========================================================= */
.btn-cta{ transition:transform .25s ease, background-color .25s ease, box-shadow .25s ease; }
.btn-cta:hover{ transform:translateY(-2px); }
.btn-cta:active{ transform:translateY(0); }
.btn-ghost{ transition:all .25s ease; }
.btn-ghost:hover{ transform:translateY(-2px); }

/* =========================================================
   REVEAL ON SCROLL
   ========================================================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-delay-1{ transition-delay:.08s; }
.reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; }
.reveal-delay-4{ transition-delay:.32s; }
.reveal-delay-5{ transition-delay:.40s; }

@keyframes fadeInUp{ from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

/* Respeita usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero-routes .route{ animation:none; }
  .scroll-mouse::after{ animation:none; }
  .wa-float{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   COMPONENTES DE SEÇÃO
   ========================================================= */
.section-kicker{
  display:inline-flex; align-items:center; gap:.7rem;
  color:#12A5E5; font-family:'Sora',sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em; font-size:.78rem;
}
.section-kicker::before{ content:''; width:1.75rem; height:2px; background:#12A5E5; border-radius:2px; }
.section-kicker.justify-center{ justify-content:center; }

.section-title{
  font-family:'Sora',sans-serif; font-weight:800;
  font-size:clamp(1.85rem, 3.6vw, 3rem); line-height:1.1; letter-spacing:-0.02em;
}

/* Banda navy (ritmo escuro) */
.band-gradient{
  background:
    radial-gradient(90% 120% at 85% 10%, rgba(18,165,229,0.18) 0%, rgba(18,165,229,0) 55%),
    linear-gradient(160deg, #0B1533 0%, #122148 55%, #0B1533 100%);
}

/* Listas com check */
.feature-li, .why-li{
  position:relative; padding-left:2rem; color:#25408A; font-weight:500; line-height:1.4;
}
.why-li{ color:#1B2E63; padding:.9rem 1rem .9rem 3rem; background:#fff; border-radius:14px; box-shadow:0 4px 16px rgba(11,21,51,.06); }
.feature-li::before, .why-li::before{
  content:''; position:absolute; left:0; top:2px; width:1.4rem; height:1.4rem;
  background:#12A5E5; border-radius:50%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/0.9rem no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/0.9rem no-repeat;
  background:#12A5E5;
}
.why-li::before{ left:1rem; top:.95rem; }

/* Stats */
.stat-card{ text-align:left; padding:1.5rem 0; border-top:2px solid #E4EAF6; }
.stat-num{ display:block; font-family:'Sora',sans-serif; font-weight:800; font-size:clamp(2rem,4vw,2.9rem); color:#1B2E63; line-height:1; }
.stat-label{ display:block; margin-top:.6rem; color:#5B6B8C; font-size:.95rem; line-height:1.35; }

/* =========================================================
   CARDS DE SOLUÇÕES
   ========================================================= */
.sol-card{
  background:#fff; border:1px solid #E7EDF8; border-radius:20px; padding:2rem 1.75rem;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.sol-card:hover{ transform:translateY(-6px); box-shadow:0 18px 44px rgba(11,21,51,.14); border-color:transparent; }
.sol-icon{
  width:3.4rem; height:3.4rem; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#12A5E5,#0B87C4); color:#fff; margin-bottom:1.25rem;
  box-shadow:0 8px 20px rgba(18,165,229,.32);
}
.sol-icon svg{ width:1.7rem; height:1.7rem; }
.sol-title{ font-family:'Sora',sans-serif; font-weight:700; font-size:1.15rem; color:#122148; line-height:1.25; }
.sol-text{ margin-top:.6rem; color:#5B6B8C; line-height:1.5; }

/* Chips de etapas (importação de máquinas) */
.step-chip{
  display:flex; align-items:center; gap:.75rem; background:#F4F7FC; border:1px solid #E7EDF8;
  border-radius:12px; padding:.8rem 1rem; color:#1B2E63; font-weight:600; font-size:.95rem;
}
.step-dot{
  flex-shrink:0; width:1.6rem; height:1.6rem; border-radius:50%; background:#1B2E63; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; font-family:'Sora',sans-serif;
}

/* =========================================================
   BENEFÍCIOS (cards no navy)
   ========================================================= */
.ben-card{
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10); border-radius:20px;
  padding:2rem 1.75rem; backdrop-filter:blur(4px); transition:transform .3s ease, background .3s ease, border-color .3s ease;
}
.ben-card:hover{ transform:translateY(-6px); background:rgba(255,255,255,0.07); border-color:rgba(63,198,241,.45); }
.ben-icon{
  width:3.2rem; height:3.2rem; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:rgba(63,198,241,.14); color:#3FC6F1; margin-bottom:1.1rem;
}
.ben-icon svg{ width:1.6rem; height:1.6rem; }
.ben-title{ font-family:'Sora',sans-serif; font-weight:700; font-size:1.12rem; color:#fff; }
.ben-text{ margin-top:.5rem; color:rgba(255,255,255,.65); line-height:1.5; }
.ben-cta{ display:flex; flex-direction:column; justify-content:center; background:linear-gradient(135deg, rgba(18,165,229,.16), rgba(18,165,229,.04)); border-color:rgba(63,198,241,.35); }

/* =========================================================
   SEGMENTOS
   ========================================================= */
.seg-card{
  display:flex; align-items:center; gap:.85rem; background:#F4F7FC; border:1px solid #E7EDF8;
  border-radius:14px; padding:1.1rem 1.25rem; color:#122148; font-weight:600;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.seg-card:hover{ transform:translateY(-3px); background:#fff; box-shadow:0 10px 26px rgba(11,21,51,.10); }
.seg-card:hover .seg-ico{ background:#12A5E5; color:#fff; }
.seg-ico{
  flex-shrink:0; width:2.5rem; height:2.5rem; border-radius:10px;
  background:#EAF1FB; color:#12A5E5; display:flex; align-items:center; justify-content:center;
  transition:background .25s ease, color .25s ease;
}
.seg-ico svg{ width:1.4rem; height:1.4rem; }

/* =========================================================
   TIMELINE (Como funciona)
   ========================================================= */
.timeline{ display:grid; gap:1.5rem; }
.tl-step{ position:relative; padding-left:4.25rem; }
.tl-num{
  position:absolute; left:0; top:0; width:3rem; height:3rem; border-radius:50%;
  background:linear-gradient(135deg,#1B2E63,#12A5E5); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:800; font-size:1.15rem; box-shadow:0 8px 20px rgba(18,165,229,.28);
}
.tl-title{ font-family:'Sora',sans-serif; font-weight:700; font-size:1.15rem; color:#122148; padding-top:.35rem; }
.tl-text{ margin-top:.35rem; color:#5B6B8C; line-height:1.5; }
@media (min-width:768px){
  .timeline{ grid-template-columns:repeat(5,1fr); gap:1.25rem; position:relative; }
  .timeline::before{ content:''; position:absolute; top:1.5rem; left:6%; right:6%; height:2px; background:linear-gradient(90deg,#1B2E63,#12A5E5); opacity:.35; }
  .tl-step{ padding-left:0; text-align:center; }
  .tl-num{ position:static; margin:0 auto 1.1rem; }
  .tl-title{ padding-top:0; }
}

/* =========================================================
   TECNOLOGIA (mock de rastreamento)
   ========================================================= */
.tech-pill{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#fff; border-radius:45px; padding:.5rem 1.1rem; font-size:.9rem; font-weight:500; }
.track-card{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:22px; padding:1.8rem; box-shadow:0 24px 60px rgba(0,0,0,.35); }
.track-badge{ background:rgba(63,198,241,.16); color:#3FC6F1; border:1px solid rgba(63,198,241,.4); border-radius:45px; padding:.3rem .85rem; font-size:.75rem; font-weight:700; }
.track-line{ display:flex; justify-content:space-between; position:relative; }
.track-line::before{ content:''; position:absolute; top:.55rem; left:6%; right:6%; height:2px; background:rgba(255,255,255,.15); }
.track-node{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:.6rem; font-size:.72rem; color:rgba(255,255,255,.55); text-align:center; flex:1; }
.track-node span{ width:1.15rem; height:1.15rem; border-radius:50%; background:#25408A; border:2px solid #0B1533; }
.track-node.done span{ background:#12A5E5; }
.track-node.done{ color:rgba(255,255,255,.8); }
.track-node.active span{ background:#3FC6F1; box-shadow:0 0 0 0 rgba(63,198,241,.6); animation:pulse 1.8s infinite; }
.track-node.active{ color:#fff; font-weight:700; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(63,198,241,.55)} 70%{box-shadow:0 0 0 9px rgba(63,198,241,0)} 100%{box-shadow:0 0 0 0 rgba(63,198,241,0)} }
.track-metric{ background:rgba(255,255,255,.05); border-radius:12px; padding:.85rem; text-align:center; font-size:.7rem; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.05em; }
.track-metric span{ display:block; font-family:'Sora',sans-serif; font-weight:700; font-size:.95rem; color:#fff; text-transform:none; letter-spacing:0; margin-bottom:.15rem; }

/* =========================================================
   CLIENTES
   ========================================================= */
.client-card{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:5.5rem; padding:1.25rem; background:#F4F7FC; border:1px solid #E7EDF8; border-radius:16px;
  font-family:'Sora',sans-serif; font-weight:700; color:#1B2E63; font-size:1.02rem;
  transition:transform .25s ease, box-shadow .25s ease, color .25s ease;
}
.client-card:hover{ transform:translateY(-4px); box-shadow:0 12px 30px rgba(11,21,51,.12); color:#12A5E5; }

/* =========================================================
   FAQ
   ========================================================= */
.faq-item{ background:#F4F7FC; border:1px solid #E7EDF8; border-radius:16px; overflow:hidden; }
.faq-item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.3rem 1.5rem; font-family:'Sora',sans-serif; font-weight:600; color:#122148; font-size:1.05rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-plus{ position:relative; flex-shrink:0; width:1.4rem; height:1.4rem; }
.faq-plus::before, .faq-plus::after{ content:''; position:absolute; background:#12A5E5; border-radius:2px; transition:transform .3s ease; }
.faq-plus::before{ top:50%; left:0; right:0; height:2.5px; transform:translateY(-50%); }
.faq-plus::after{ left:50%; top:0; bottom:0; width:2.5px; transform:translateX(-50%); }
.faq-item[open] .faq-plus::after{ transform:translateX(-50%) scaleY(0); }
.faq-body{ padding:0 1.5rem 1.4rem; color:#5B6B8C; line-height:1.6; }
.faq-item[open] summary{ color:#12A5E5; }

/* =========================================================
   CTA FINAL
   ========================================================= */
.cta-overlay{
  background:
    linear-gradient(180deg, rgba(7,14,36,.82) 0%, rgba(11,21,51,.78) 100%),
    radial-gradient(80% 60% at 50% 40%, rgba(18,165,229,.18) 0%, rgba(18,165,229,0) 70%);
}

/* =========================================================
   CONTATO / FORMULÁRIO
   ========================================================= */
.contact-line{ display:flex; align-items:center; gap:1rem; color:#1B2E63; transition:color .2s ease; }
a.contact-line:hover{ color:#12A5E5; }
.contact-ico{ flex-shrink:0; width:3rem; height:3rem; border-radius:12px; background:#EAF1FB; color:#12A5E5; display:flex; align-items:center; justify-content:center; }
.contact-ico svg{ width:1.4rem; height:1.4rem; }
.contact-line span:last-child{ line-height:1.35; font-size:.98rem; }

.form-card{ background:#fff; border:1px solid #E7EDF8; border-radius:22px; padding:2rem; box-shadow:0 12px 40px rgba(11,21,51,.08); }
@media(min-width:640px){ .form-card{ padding:2.5rem; } }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field label{ font-size:.85rem; font-weight:600; color:#1B2E63; }
.field input, .field select, .field textarea{
  border:1.5px solid #DDE5F2; border-radius:12px; padding:.8rem 1rem; font-size:.98rem; color:#122148;
  background:#fff; transition:border-color .2s ease, box-shadow .2s ease; font-family:inherit; width:100%;
}
.field input::placeholder, .field textarea::placeholder{ color:#A9B4CC; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:#12A5E5; box-shadow:0 0 0 4px rgba(18,165,229,.12);
}
.field textarea{ resize:vertical; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer-h{ font-family:'Sora',sans-serif; font-weight:700; color:#fff; font-size:1rem; margin-bottom:1.1rem; }
.footer-link{ transition:color .2s ease; }
.footer-link:hover{ color:#3FC6F1; }
.social-btn{
  width:2.6rem; height:2.6rem; border-radius:12px; background:rgba(255,255,255,.08); color:#fff;
  display:flex; align-items:center; justify-content:center; transition:background .25s ease, transform .25s ease;
}
.social-btn:hover{ background:#12A5E5; transform:translateY(-2px); }

/* =========================================================
   WHATSAPP FLUTUANTE
   ========================================================= */
.wa-float{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:45;
  width:3.6rem; height:3.6rem; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(37,211,102,.5);
  transition:transform .25s ease; animation:waPulse 2.6s infinite;
}
.wa-float svg{ width:2rem; height:2rem; }
.wa-float:hover{ transform:scale(1.08); }
@keyframes waPulse{ 0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)} 70%{box-shadow:0 0 0 14px rgba(37,211,102,0)} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0)} }