:root{
  --navy:#071426;
  --navy2:#0b1d33;
  --ink:#142235;
  --muted:#66758a;
  --line:#dce4ec;
  --bg:#f4f7fa;
  --white:#fff;
  --accent:#12a86b;
  --accent2:#0d8c59;
  --blue:#1476d4;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.6;
}

a{text-decoration:none;color:inherit}

.container{
  width:min(1180px,calc(100% - 40px));
  margin:auto;
}

.header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(7,20,38,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.nav{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
}

.brand-mark{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.3);
  border-radius:10px;
  font-weight:900;
  letter-spacing:-1px;
}

.brand strong{
  display:block;
  font-size:19px;
  line-height:1.1;
}

.brand small{
  display:block;
  color:#91a2b7;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1.5px;
  margin-top:4px;
}

nav{
  display:flex;
  align-items:center;
  gap:28px;
}

nav a{
  color:#c9d3df;
  font-size:14px;
  font-weight:600;
}

nav a:hover{color:#fff}

.nav-access{
  border:1px solid rgba(255,255,255,.25);
  padding:10px 16px;
  border-radius:8px;
}

.menu-button{
  display:none;
  border:0;
  background:none;
  color:#fff;
  font-size:25px;
}

.hero{
  min-height:690px;
  background:
    radial-gradient(circle at 80% 20%,rgba(20,118,212,.20),transparent 35%),
    radial-gradient(circle at 15% 90%,rgba(18,168,107,.14),transparent 30%),
    var(--navy);
  color:#fff;
  position:relative;
  overflow:hidden;
}

.hero-grid{
  position:absolute;
  inset:0;
  opacity:.10;
  background-image:
    linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);
  background-size:55px 55px;
  mask-image:linear-gradient(to right,transparent,#000);
}

.hero-content{
  position:relative;
  z-index:2;
  min-height:690px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:70px;
  align-items:center;
}

.eyebrow{
  font-size:12px;
  font-weight:800;
  letter-spacing:2px;
  color:#62d6a5;
  margin-bottom:18px;
}

.eyebrow.dark{color:var(--accent2)}

h1,h2,h3{
  margin-top:0;
  letter-spacing:-.035em;
}

.hero h1{
  font-size:clamp(48px,6vw,76px);
  line-height:1.01;
  margin-bottom:25px;
}

.hero h1 span{
  display:block;
  color:#aab9ca;
}

.hero-lead{
  max-width:680px;
  color:#b9c5d3;
  font-size:20px;
  margin:0 0 32px;
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.button{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding:14px 20px;
  border-radius:8px;
  font-weight:800;
  font-size:14px;
}

.button.primary{
  background:var(--accent);
  color:#fff;
}

.button.primary:hover{background:var(--accent2)}

.button.secondary{
  border:1px solid rgba(255,255,255,.24);
  color:#fff;
}

.hero-points{
  margin-top:34px;
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  color:#8294aa;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.7px;
}

.hero-panel{
  background:rgba(11,29,51,.72);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.28);
  overflow:hidden;
}

.panel-top{
  padding:18px 20px;
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.09);
}

.panel-top small{
  display:block;
  color:#758aa2;
  font-size:9px;
  letter-spacing:1.6px;
}

.panel-top strong{font-size:14px}

.online{
  color:#59d49e;
  font-size:10px;
  font-weight:800;
}

.map{
  height:310px;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(30deg,transparent 49%,rgba(255,255,255,.04) 50%,transparent 51%),
    #0b1b2f;
}

.road{
  position:absolute;
  height:4px;
  background:#34475e;
  border-radius:50%;
}

.road-a{width:130%;left:-15%;top:48%;transform:rotate(-12deg)}
.road-b{width:110%;left:-5%;top:62%;transform:rotate(24deg)}
.road-c{width:80%;left:15%;top:36%;transform:rotate(54deg)}

.vehicle{
  position:absolute;
  color:#5be0a6;
  font-size:24px;
  text-shadow:0 0 18px #3ecb91;
}

.v1{left:22%;top:35%}
.v2{left:58%;top:47%}
.v3{left:73%;top:67%}
.v4{left:40%;top:72%}

.map-label{
  position:absolute;
  left:20px;
  bottom:18px;
  background:rgba(7,20,38,.88);
  border:1px solid rgba(255,255,255,.1);
  padding:12px 15px;
  border-radius:8px;
}

.map-label strong,.map-label span{display:block}
.map-label span{font-size:11px;color:#8192a7}

.metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
}

.metrics div{
  padding:17px;
  border-right:1px solid rgba(255,255,255,.08);
}

.metrics strong,.metrics span{display:block}
.metrics strong{font-size:18px}
.metrics span{font-size:10px;color:#8192a7;text-transform:uppercase}

.section{padding:100px 0}

.intro{background:#fff}

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:start;
}

h2{
  font-size:clamp(34px,4vw,52px);
  line-height:1.08;
  margin-bottom:22px;
}

.split p{
  font-size:18px;
  color:var(--muted);
}

.solutions{background:var(--bg)}

.section-heading{
  display:flex;
  justify-content:space-between;
  margin-bottom:45px;
}

.section-heading h2{max-width:720px}

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}

.card{
  min-height:340px;
  padding:32px;
  background:#fff;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
  transition:.2s ease;
}

.card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 45px rgba(25,45,70,.09);
  z-index:2;
}

.card.featured{
  background:var(--navy2);
  color:#fff;
}

.number{
  position:absolute;
  right:25px;
  top:22px;
  color:#9ba9b7;
  font-size:11px;
  font-weight:800;
}

.icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  background:#eef5f9;
  border-radius:10px;
  color:var(--blue);
  font-size:23px;
  margin-bottom:45px;
}

.featured .icon{
  background:rgba(255,255,255,.08);
  color:#64dba8;
}

.card h3{
  font-size:24px;
  margin-bottom:12px;
}

.card p{
  color:var(--muted);
  font-size:14px;
}

.featured p{color:#a9b8c8}

.tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:25px;
}

.tags span{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.6px;
  border:1px solid var(--line);
  padding:6px 8px;
  border-radius:5px;
}

.featured .tags span{border-color:rgba(255,255,255,.15)}

.conductor-section{
  background:var(--navy);
  color:#fff;
  padding:110px 0;
}

.conductor-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:80px;
  align-items:center;
}

.conductor-section p{
  color:#a9b8c8;
  font-size:17px;
}

.feature-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px;
  margin:30px 0;
  color:#cbd6e2;
  font-size:13px;
}

.console{
  border:1px solid rgba(255,255,255,.13);
  background:#0c1c30;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.28);
}

.console-head{
  height:48px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.console-head span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#4b6078;
}

.console-head strong{
  margin-left:auto;
  color:#74869b;
  font-size:9px;
  letter-spacing:1px;
}

.console-body{padding:28px}

.console-body>small{
  color:#6c8299;
  letter-spacing:1.5px;
}

.console-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:15px 0 25px;
}

.console-stats div{
  padding:15px;
  background:#10243c;
  border:1px solid rgba(255,255,255,.06);
  border-radius:8px;
}

.console-stats b,.console-stats strong{display:block}
.console-stats b{font-size:10px;color:#74869b}
.console-stats strong{font-size:15px;margin-top:4px}

.console-line{
  display:flex;
  justify-content:space-between;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.console-line i{
  font-style:normal;
  color:#5bddaa;
  font-size:10px;
  font-weight:900;
}

.fake-table>div{
  display:grid;
  grid-template-columns:1.3fr 1fr .8fr;
  padding:12px 4px;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size:11px;
}

.fake-table span{color:#60768e}
.fake-table b{font-weight:600}
.fake-table em{font-style:normal;color:#5bd9a5}

.coverage{background:#fff}

.coverage-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center;
}

.coverage p{
  color:var(--muted);
  font-size:17px;
}

.countries{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}

.countries div{
  padding:32px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.countries strong{
  display:block;
  font-size:30px;
  color:var(--navy);
}

.countries span{
  color:var(--muted);
  font-size:13px;
}

.company{background:var(--bg)}

.access{
  padding:90px 0;
  background:#0a192b;
  color:#fff;
}

.access-heading{margin-bottom:35px}

.access-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.access-card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:20px;
  align-items:center;
  padding:26px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:rgba(255,255,255,.025);
}

.access-card:hover{background:rgba(255,255,255,.06)}

.access-card>span{
  color:#5edca7;
  font-size:11px;
  font-weight:900;
}

.access-card strong,.access-card small{display:block}
.access-card small{color:#8395aa;margin-top:3px}

footer{
  padding:45px 0;
  background:#06111f;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.07);
}

.footer-grid{
  display:flex;
  justify-content:space-between;
  align-items:end;
}

footer p{
  color:#72859b;
  margin:5px 0 0;
  font-size:13px;
}

.footer-right{
  display:flex;
  gap:30px;
  color:#71849a;
  font-size:12px;
}

@media(max-width:900px){
  nav{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:76px;
    background:#071426;
    padding:20px;
    flex-direction:column;
    align-items:flex-start;
  }

  nav.open{display:flex}
  .menu-button{display:block}

  .hero-content,
  .split,
  .conductor-grid,
  .coverage-grid{
    grid-template-columns:1fr;
  }

  .hero-content{
    padding:75px 0;
    gap:50px;
  }

  .cards{grid-template-columns:1fr 1fr}
  .split{gap:25px}
  .conductor-grid,.coverage-grid{gap:50px}
}

@media(max-width:620px){
  .container{width:min(100% - 28px,1180px)}

  .hero h1{font-size:45px}

  .hero-lead{font-size:17px}

  .cards,
  .access-grid,
  .countries{
    grid-template-columns:1fr;
  }

  .feature-list{grid-template-columns:1fr}

  .console-stats{grid-template-columns:1fr}

  .fake-table{overflow:auto}

  .section,
  .conductor-section{
    padding:75px 0;
  }

  .footer-grid{
    align-items:flex-start;
    flex-direction:column;
    gap:25px;
  }
}

/* ==========================================================
   TRACKINGPAR — LOGO OFICIAL
   ========================================================== */

.brand-logo{
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.trackingpar-logo{
  display:block;
  width:auto;
  height:48px;
  max-width:260px;
  object-fit:contain;
}

@media(max-width:620px){
  .trackingpar-logo{
    height:40px;
    max-width:215px;
  }
}


/* ==========================================================
   TRACKINGPAR — DENSIDAD RESPONSIVE V2
   Optimizado para notebooks, desktop y pantallas grandes
   ========================================================== */

/* ---------- DESKTOP GENERAL ---------- */

.hero{
  min-height: 540px;
}

.hero-content{
  min-height: 540px;
  gap: clamp(32px, 4vw, 58px);
  padding-top: 54px;
  padding-bottom: 54px;
}

.hero h1{
  font-size: clamp(46px, 4.6vw, 70px);
  line-height: .98;
  letter-spacing: -2.8px;
  margin-bottom: 24px;
}

.hero-copy > p{
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.55;
  margin-bottom: 28px;
}

.map-card{
  min-height: 300px;
}

.section{
  padding-top: 70px;
  padding-bottom: 70px;
}

.section-heading{
  margin-bottom: 32px;
}


/* ---------- NOTEBOOK / DESKTOP COMPACTO ---------- */
/* Mantiene las dos columnas incluso en pantallas más estrechas */

@media (min-width: 769px) and (max-width: 1450px){

  .container{
    width: min(1180px, calc(100% - 64px));
  }

  .hero{
    min-height: 500px;
  }

  .hero-content{
    min-height: 500px;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
    gap: 42px;
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .hero h1{
    font-size: clamp(44px, 4.5vw, 62px);
    line-height: .98;
    letter-spacing: -2.4px;
    margin-bottom: 22px;
  }

  .hero-copy > p{
    font-size: 17px;
    line-height: 1.55;
    margin-bottom: 24px;
  }

  .map-card{
    min-height: 280px;
  }

  .section{
    padding-top: 62px;
    padding-bottom: 62px;
  }

  .split{
    gap: 52px;
  }

  .conductor-section{
    padding-top: 68px;
    padding-bottom: 68px;
  }

  .conductor-grid{
    gap: 48px;
  }

  .coverage-grid{
    gap: 52px;
  }

  .access{
    padding-top: 60px;
    padding-bottom: 60px;
  }
}


/* ---------- TABLET / MÓVIL ---------- */

@media (max-width: 768px){

  .container{
    width: min(100% - 36px, 1180px);
  }

  .hero{
    min-height: auto;
  }

  .hero-content{
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 38px;
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .hero h1{
    font-size: clamp(40px, 11vw, 54px);
    line-height: 1;
    letter-spacing: -2px;
  }

  .map-card{
    min-height: 280px;
  }

  .section{
    padding-top: 54px;
    padding-bottom: 54px;
  }
}


/* ---------- MÓVIL PEQUEÑO ---------- */

@media (max-width: 480px){

  .container{
    width: min(100% - 28px, 1180px);
  }

  .hero-content{
    gap: 32px;
    padding-top: 42px;
    padding-bottom: 42px;
  }

  .hero h1{
    font-size: clamp(38px, 11.5vw, 46px);
    letter-spacing: -1.6px;
  }

  .hero-copy > p{
    font-size: 16px;
  }

  .map-card{
    min-height: 250px;
  }

  .section{
    padding-top: 46px;
    padding-bottom: 46px;
  }
}


/* ==========================================================
   TRACKINGPAR — COBERTURA INTERNACIONAL V2
   ========================================================== */

.coverage{
  background:#fff;
}

.coverage-intro{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);
  gap:70px;
  align-items:end;
  margin-bottom:38px;
}

.coverage-intro h2{
  max-width:650px;
  margin-bottom:0;
}

.coverage-description p{
  max-width:570px;
  margin:0 0 20px;
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
}

.coverage-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.coverage-tags span{
  padding:7px 11px;
  border:1px solid #dbe4ed;
  border-radius:5px;
  color:#496078;
  background:#f8fafc;
  font-size:10px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.coverage-panel{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr);
  border:1px solid #dbe4ed;
  background:#fff;
  box-shadow:0 18px 50px rgba(10,31,53,.06);
}

.coverage-region{
  min-width:0;
}

.coverage-region-head{
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 24px;
  border-bottom:1px solid #dbe4ed;
}

.coverage-region-head > div{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.coverage-label{
  color:#7890a8;
  font-size:9px;
  font-weight:900;
  letter-spacing:.15em;
}

.coverage-region-head strong{
  color:var(--navy);
  font-size:17px;
}

.coverage-status{
  display:flex;
  align-items:center;
  gap:7px;
  color:#008d67;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
}

.coverage-status i{
  display:block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#35d99a;
  box-shadow:0 0 0 4px rgba(53,217,154,.12);
}

.countries-expanded{
  grid-template-columns:repeat(4,1fr);
  border:0;
}

.countries-expanded div{
  position:relative;
  min-height:112px;
  padding:22px 24px;
  border-right:1px solid #dbe4ed;
  border-bottom:1px solid #dbe4ed;
  background:#fff;
}

.countries-expanded div:nth-child(4n){
  border-right:0;
}

.countries-expanded div:nth-last-child(-n+4){
  border-bottom:0;
}

.countries-expanded strong{
  font-size:25px;
  line-height:1;
}

.countries-expanded span{
  display:block;
  margin-top:9px;
}

.countries-expanded small{
  display:block;
  margin-top:5px;
  color:#008d67;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.countries-expanded .country-main{
  background:
    linear-gradient(
      135deg,
      rgba(24,206,147,.10),
      rgba(24,206,147,.025)
    );
}

.countries-expanded .country-main::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:#18ce93;
}

.coverage-network{
  padding:26px;
  background:#091a2e;
  color:#fff;
}

.network-heading{
  padding-bottom:22px;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.network-heading > span{
  display:block;
  margin-bottom:7px;
  color:#6f8aa6;
  font-size:9px;
  font-weight:900;
  letter-spacing:.13em;
}

.network-heading > strong{
  display:block;
  font-size:20px;
  line-height:1.25;
}

.network-metrics{
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:22px 0;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.network-metrics div + div{
  padding-left:22px;
  border-left:1px solid rgba(255,255,255,.10);
}

.network-metrics strong{
  display:block;
  color:#54e0ad;
  font-size:30px;
  line-height:1;
}

.network-metrics span{
  display:block;
  margin-top:7px;
  color:#8ca0b5;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.network-feature{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:11px;
  padding:22px 0 18px;
}

.network-dot{
  width:8px;
  height:8px;
  margin-top:5px;
  border-radius:50%;
  background:#54e0ad;
  box-shadow:0 0 14px rgba(84,224,173,.65);
}

.network-feature strong{
  display:block;
  margin-bottom:5px;
  font-size:13px;
}

.network-feature small{
  display:block;
  color:#8298ae;
  font-size:11px;
  line-height:1.5;
}

.coverage-note{
  margin:0;
  padding-top:15px;
  border-top:1px solid rgba(255,255,255,.08);
  color:#637b93 !important;
  font-size:9px !important;
  line-height:1.5 !important;
}


/* ---------- NOTEBOOK ---------- */

@media (max-width:1100px){

  .coverage-intro{
    gap:45px;
  }

  .coverage-panel{
    grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr);
  }

  .countries-expanded{
    grid-template-columns:repeat(2,1fr);
  }

  .countries-expanded div:nth-child(4n){
    border-right:1px solid #dbe4ed;
  }

  .countries-expanded div:nth-child(2n){
    border-right:0;
  }

  .countries-expanded div:nth-last-child(-n+4){
    border-bottom:1px solid #dbe4ed;
  }

  .countries-expanded div:nth-last-child(-n+2){
    border-bottom:0;
  }

  .countries-expanded div{
    min-height:90px;
    padding:17px 20px;
  }
}


/* ---------- TABLET / MÓVIL ---------- */

@media (max-width:768px){

  .coverage-intro{
    grid-template-columns:1fr;
    gap:22px;
    margin-bottom:28px;
  }

  .coverage-panel{
    grid-template-columns:1fr;
  }

  .coverage-region-head{
    padding:16px 18px;
  }

  .coverage-network{
    padding:24px 20px;
  }
}


/* ---------- MÓVIL PEQUEÑO ---------- */

@media (max-width:480px){

  .coverage-region-head{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }

  .countries-expanded div{
    padding:16px;
  }

  .countries-expanded strong{
    font-size:22px;
  }
}


/* ==========================================================
   TRACKINGPAR — GPS LIVE HERO V1
   ========================================================== */

.gps-map{
  isolation:isolate;
}

/* profundidad sutil del mapa */

.gps-map::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(
      circle at 52% 22%,
      rgba(40,195,151,.055),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,0),
      rgba(3,14,27,.12)
    );
}


/* ---------- SATÉLITE ---------- */

.satellite-system{
  position:absolute;
  z-index:7;
  top:22px;
  left:50%;
  width:92px;
  height:74px;
  transform:translateX(-50%);
  pointer-events:none;
}

.satellite{
  position:absolute;
  top:15px;
  left:50%;
  width:72px;
  height:28px;
  transform:translateX(-50%) rotate(-10deg);
  animation:satelliteFloat 5s ease-in-out infinite;
}

.sat-body{
  position:absolute;
  z-index:3;
  left:29px;
  top:8px;
  width:15px;
  height:13px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:3px;
  background:#dce7f1;
  box-shadow:
    0 0 12px rgba(72,214,172,.20),
    inset 0 0 0 2px rgba(9,26,46,.15);
}

.sat-panel{
  position:absolute;
  z-index:2;
  top:6px;
  width:25px;
  height:17px;
  border:1px solid rgba(72,214,172,.55);
  background:
    linear-gradient(
      90deg,
      transparent 47%,
      rgba(73,219,174,.25) 48%,
      rgba(73,219,174,.25) 52%,
      transparent 53%
    ),
    linear-gradient(
      0deg,
      transparent 47%,
      rgba(73,219,174,.22) 48%,
      rgba(73,219,174,.22) 52%,
      transparent 53%
    ),
    #0e3852;
}

.sat-panel-left{
  left:0;
}

.sat-panel-right{
  right:0;
}

.sat-dish{
  position:absolute;
  z-index:4;
  left:32px;
  top:21px;
  width:11px;
  height:7px;
  border-bottom:2px solid #56dfac;
  border-radius:0 0 12px 12px;
}

.sat-dish::after{
  content:"";
  position:absolute;
  width:1px;
  height:8px;
  left:5px;
  top:5px;
  background:#56dfac;
}


/* ---------- ONDAS DEL SATÉLITE ---------- */

.sat-wave{
  position:absolute;
  z-index:1;
  left:50%;
  top:38px;
  border:1px solid rgba(84,224,173,.45);
  border-top:0;
  border-left-color:transparent;
  border-right-color:transparent;
  border-radius:0 0 50% 50%;
  transform:translateX(-50%);
  opacity:0;
}

.wave-1{
  width:32px;
  height:14px;
  animation:satelliteWave 2.4s ease-out infinite;
}

.wave-2{
  width:52px;
  height:24px;
  animation:satelliteWave 2.4s .55s ease-out infinite;
}

.wave-3{
  width:76px;
  height:34px;
  animation:satelliteWave 2.4s 1.1s ease-out infinite;
}


/* ---------- HACES GPS ---------- */

.gps-beam{
  position:absolute;
  z-index:2;
  top:66px;
  width:1px;
  transform-origin:top center;
  background:
    linear-gradient(
      to bottom,
      rgba(77,224,174,.38),
      rgba(77,224,174,.10),
      transparent
    );
  opacity:.34;
  filter:drop-shadow(0 0 4px rgba(77,224,174,.35));
  animation:beamPulse 3.4s ease-in-out infinite;
}

.beam-1{
  left:49%;
  height:145px;
  transform:rotate(30deg);
}

.beam-2{
  left:51%;
  height:175px;
  transform:rotate(-35deg);
  animation-delay:.8s;
}

.beam-3{
  left:50%;
  height:205px;
  transform:rotate(7deg);
  animation-delay:1.6s;
}


/* ---------- VEHÍCULOS ---------- */

.tracked-vehicle{
  position:absolute;
  z-index:6;
  width:34px;
  height:24px;
  pointer-events:none;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.35));
}

.vehicle-icon{
  position:absolute;
  left:4px;
  top:6px;
  width:25px;
  height:11px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:3px 5px 3px 3px;
  background:#dce8f2;
}

.vehicle-icon::before{
  content:"";
  position:absolute;
  left:12px;
  top:-6px;
  width:8px;
  height:6px;
  border:1px solid rgba(255,255,255,.72);
  border-bottom:0;
  border-radius:3px 4px 0 0;
  background:#14354c;
}

.vehicle-icon::after{
  content:"";
  position:absolute;
  left:3px;
  bottom:-4px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#06111f;
  box-shadow:14px 0 0 #06111f;
}

.vehicle-icon i{
  position:absolute;
  right:2px;
  top:2px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#54e0ad;
  box-shadow:0 0 8px #54e0ad;
}

.vehicle-pulse{
  position:absolute;
  z-index:-1;
  left:50%;
  top:50%;
  width:9px;
  height:9px;
  border:1px solid rgba(84,224,173,.8);
  border-radius:50%;
  transform:translate(-50%,-50%);
  animation:vehicleSignal 2s ease-out infinite;
}


/* recorridos */

.vehicle-1{
  left:18%;
  top:37%;
  animation:driveOne 10s ease-in-out infinite alternate;
}

.vehicle-2{
  left:52%;
  top:48%;
  animation:driveTwo 12s ease-in-out infinite alternate;
}

.vehicle-3{
  left:69%;
  top:67%;
  animation:driveThree 11s ease-in-out infinite alternate;
}

.vehicle-4{
  left:38%;
  top:70%;
  animation:driveFour 13s ease-in-out infinite alternate;
}

.vehicle-2 .vehicle-pulse{animation-delay:.5s}
.vehicle-3 .vehicle-pulse{animation-delay:1s}
.vehicle-4 .vehicle-pulse{animation-delay:1.5s}


/* ---------- ESTADO GPS ---------- */

.gps-status{
  position:absolute;
  z-index:8;
  right:17px;
  top:16px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:5px;
  background:rgba(5,18,34,.62);
  color:#70e6b9;
  font-size:8px;
  font-weight:900;
  letter-spacing:.10em;
  backdrop-filter:blur(5px);
}

.gps-status-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#54e0ad;
  box-shadow:0 0 8px #54e0ad;
  animation:gpsBlink 1.8s ease-in-out infinite;
}


/* ---------- ANIMACIONES ---------- */

@keyframes satelliteFloat{
  0%,100%{
    transform:translateX(-50%) translateY(0) rotate(-10deg);
  }
  50%{
    transform:translateX(-50%) translateY(4px) rotate(-8deg);
  }
}

@keyframes satelliteWave{
  0%{
    opacity:0;
    transform:translateX(-50%) scale(.65);
  }
  35%{
    opacity:.55;
  }
  100%{
    opacity:0;
    transform:translateX(-50%) scale(1.18);
  }
}

@keyframes beamPulse{
  0%,100%{opacity:.12}
  50%{opacity:.48}
}

@keyframes vehicleSignal{
  0%{
    opacity:.85;
    transform:translate(-50%,-50%) scale(.4);
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(4);
  }
}

@keyframes gpsBlink{
  0%,100%{opacity:1}
  50%{opacity:.35}
}

@keyframes driveOne{
  0%{
    transform:translate(0,0) rotate(12deg);
  }
  50%{
    transform:translate(72px,31px) rotate(12deg);
  }
  100%{
    transform:translate(142px,61px) rotate(12deg);
  }
}

@keyframes driveTwo{
  0%{
    transform:translate(0,0) rotate(-10deg);
  }
  50%{
    transform:translate(58px,-13px) rotate(-10deg);
  }
  100%{
    transform:translate(112px,-25px) rotate(-10deg);
  }
}

@keyframes driveThree{
  0%{
    transform:translate(0,0) rotate(23deg);
  }
  50%{
    transform:translate(44px,19px) rotate(23deg);
  }
  100%{
    transform:translate(84px,37px) rotate(23deg);
  }
}

@keyframes driveFour{
  0%{
    transform:translate(0,0) rotate(-13deg);
  }
  50%{
    transform:translate(-54px,12px) rotate(-13deg);
  }
  100%{
    transform:translate(-102px,25px) rotate(-13deg);
  }
}


/* ---------- ACCESIBILIDAD ---------- */

@media (prefers-reduced-motion:reduce){

  .satellite,
  .sat-wave,
  .gps-beam,
  .tracked-vehicle,
  .vehicle-pulse,
  .gps-status-dot{
    animation:none !important;
  }

  .sat-wave{
    opacity:.25;
  }

  .gps-beam{
    opacity:.22;
  }
}


/* ---------- MÓVIL ---------- */

@media (max-width:480px){

  .satellite-system{
    transform:translateX(-50%) scale(.85);
  }

  .tracked-vehicle{
    transform:scale(.88);
  }

  .gps-status{
    right:12px;
    top:12px;
  }
}


/* ==========================================================
   TRACKINGPAR — MARCADORES GPS PREMIUM V2
   ========================================================== */

.south-america-map{
  position:absolute;
  z-index:0;
  width:225px;
  height:270px;
  right:17%;
  top:18px;
  opacity:.42;
  pointer-events:none;
}

.continent-shape{
  fill:rgba(50,82,110,.10);
  stroke:rgba(129,158,186,.22);
  stroke-width:1.2;
}

.paraguay-shape{
  fill:rgba(84,224,173,.12);
  stroke:rgba(84,224,173,.68);
  stroke-width:1.5;
}

.py-location{
  fill:#54e0ad;
  filter:drop-shadow(0 0 5px #54e0ad);
  animation:pyLocationPulse 2.4s ease-in-out infinite;
}

.region-label{
  position:absolute;
  z-index:4;
  right:18px;
  bottom:17px;
  display:flex;
  align-items:center;
  gap:7px;
  color:rgba(151,173,194,.62);
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
}

.region-label > span{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#54e0ad;
  box-shadow:0 0 8px rgba(84,224,173,.7);
}


/* marcador circular inspirado en interfaz de monitoreo */

.tracked-vehicle{
  width:32px;
  height:32px;
}

.tracked-vehicle .vehicle-icon{
  display:none;
}

.vehicle-marker{
  position:absolute;
  z-index:3;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border:2px solid rgba(255,255,255,.92);
  border-radius:50%;
  background:#fff;
  box-shadow:
    0 5px 14px rgba(0,0,0,.32),
    0 0 0 1px rgba(5,17,31,.10);
}

.vehicle-marker svg{
  display:block;
  width:20px;
  height:20px;
  fill:#22a75d;
}

.marker-truck .vehicle-marker svg,
.marker-machine .vehicle-marker svg{
  width:21px;
  height:21px;
}

.tracked-vehicle .vehicle-pulse{
  z-index:1;
  left:16px;
  top:16px;
  width:13px;
  height:13px;
  background:rgba(84,224,173,.08);
  border-color:rgba(84,224,173,.65);
}


/* jerarquía de capas */

.gps-map .road{
  z-index:1;
  opacity:.72;
}

.gps-map .gps-beam{
  z-index:2;
}

.gps-map .tracked-vehicle{
  z-index:6;
}

.gps-map .satellite-system{
  z-index:7;
}

.gps-map .gps-status,
.gps-map .map-label{
  z-index:9;
}


@keyframes pyLocationPulse{
  0%,100%{
    opacity:.55;
  }

  50%{
    opacity:1;
  }
}


/* Notebook */

@media (max-width:1100px){

  .south-america-map{
    width:200px;
    height:240px;
    right:13%;
    top:27px;
  }

  .vehicle-marker,
  .tracked-vehicle{
    width:29px;
    height:29px;
  }

  .vehicle-marker svg{
    width:18px;
    height:18px;
  }

  .tracked-vehicle .vehicle-pulse{
    left:14.5px;
    top:14.5px;
  }
}


/* Móvil */

@media (max-width:480px){

  .south-america-map{
    width:175px;
    height:210px;
    right:7%;
    opacity:.35;
  }

  .region-label{
    display:none;
  }
}


@media (prefers-reduced-motion:reduce){
  .py-location{
    animation:none;
  }
}


/* ==========================================================
   TRACKINGPAR — FLEET DENSITY V3
   ========================================================== */

.secondary-fleet{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
}

.mini-unit{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.92);
  box-shadow:
    0 4px 9px rgba(0,0,0,.25),
    0 0 8px rgba(72,216,167,.12);
}

.mini-unit svg{
  width:13px;
  height:13px;
  fill:#29a963;
}

.mini-truck svg{
  width:14px;
  height:14px;
}

.mini-moto svg{
  width:13px;
  height:13px;
}


/* distribución irregular para evitar apariencia de cuadrícula */

.mini-1{
  left:12%;
  top:25%;
  animation:miniDriveA 15s ease-in-out infinite alternate;
}

.mini-2{
  left:29%;
  top:53%;
  animation:miniDriveB 18s ease-in-out infinite alternate;
}

.mini-3{
  left:44%;
  top:28%;
  animation:miniDriveC 16s ease-in-out infinite alternate;
}

.mini-4{
  left:62%;
  top:31%;
  animation:miniDriveD 19s ease-in-out infinite alternate;
}

.mini-5{
  left:78%;
  top:47%;
  animation:miniDriveE 17s ease-in-out infinite alternate;
}

.mini-6{
  left:87%;
  top:67%;
  animation:miniDriveF 20s ease-in-out infinite alternate;
}

.mini-7{
  left:17%;
  top:67%;
  animation:miniDriveC 21s ease-in-out infinite alternate-reverse;
}

.mini-8{
  left:35%;
  top:78%;
  animation:miniDriveA 19s ease-in-out infinite alternate-reverse;
}

.mini-9{
  left:54%;
  top:72%;
  animation:miniDriveF 17s ease-in-out infinite alternate;
}

.mini-10{
  left:72%;
  top:79%;
  animation:miniDriveB 22s ease-in-out infinite alternate-reverse;
}

.mini-11{
  left:83%;
  top:24%;
  animation:miniDriveD 20s ease-in-out infinite alternate-reverse;
}

.mini-12{
  left:8%;
  top:46%;
  animation:miniDriveE 18s ease-in-out infinite alternate-reverse;
}


/* recorridos pequeños: sensación de flota activa sin caos */

@keyframes miniDriveA{
  from{transform:translate(0,0) rotate(12deg)}
  to{transform:translate(42px,18px) rotate(12deg)}
}

@keyframes miniDriveB{
  from{transform:translate(0,0) rotate(-10deg)}
  to{transform:translate(48px,-11px) rotate(-10deg)}
}

@keyframes miniDriveC{
  from{transform:translate(0,0) rotate(18deg)}
  to{transform:translate(35px,16px) rotate(18deg)}
}

@keyframes miniDriveD{
  from{transform:translate(0,0) rotate(-16deg)}
  to{transform:translate(-38px,10px) rotate(-16deg)}
}

@keyframes miniDriveE{
  from{transform:translate(0,0) rotate(22deg)}
  to{transform:translate(43px,20px) rotate(22deg)}
}

@keyframes miniDriveF{
  from{transform:translate(0,0) rotate(-12deg)}
  to{transform:translate(-34px,9px) rotate(-12deg)}
}


/* el contexto regional debe percibirse sin dominar */

.south-america-map{
  opacity:.56;
}

.continent-shape{
  fill:rgba(49,82,111,.13);
  stroke:rgba(129,161,190,.28);
}

.paraguay-shape{
  fill:rgba(84,224,173,.15);
  stroke:rgba(84,224,173,.75);
}


/* alejamos el vehículo principal del rótulo inferior */

.vehicle-4{
  left:45%;
  top:61%;
}


/* profundidad: secundarios ligeramente más suaves */

.secondary-fleet .mini-unit{
  opacity:.78;
}

.secondary-fleet .mini-2,
.secondary-fleet .mini-5,
.secondary-fleet .mini-8,
.secondary-fleet .mini-11{
  opacity:.60;
}


/* notebook */

@media (max-width:1100px){

  .mini-unit{
    width:19px;
    height:19px;
  }

  .mini-unit svg{
    width:11px;
    height:11px;
  }
}


/* móvil: reducir densidad */

@media (max-width:600px){

  .mini-2,
  .mini-4,
  .mini-6,
  .mini-8,
  .mini-10,
  .mini-12{
    display:none;
  }
}


/* accesibilidad */

@media (prefers-reduced-motion:reduce){

  .mini-unit{
    animation:none !important;
  }
}


/* ==========================================================
   TRACKINGPAR — GPS MOTION FINAL V4
   Movimiento unidireccional, sin reversa visual
   ========================================================== */


/* ----------------------------------------------------------
   VEHÍCULOS PRINCIPALES
   ---------------------------------------------------------- */

.vehicle-1{
  left:18%;
  top:34%;
  animation:tpMainRoute1 12s linear infinite;
}

.vehicle-2{
  left:56%;
  top:43%;
  animation:tpMainRoute2 14s linear infinite;
  animation-delay:-4s;
}

.vehicle-3{
  left:73%;
  top:64%;
  animation:tpMainRoute3 13s linear infinite;
  animation-delay:-7s;
}

.vehicle-4{
  left:43%;
  top:57%;
  animation:tpMainRoute4 15s linear infinite;
  animation-delay:-9s;
}


/* El vehículo avanza y desaparece antes de reiniciar.
   Nunca recorre la ruta en reversa. */

@keyframes tpMainRoute1{
  0%{
    transform:translate(-35px,-15px) rotate(12deg);
    opacity:0;
  }
  8%{opacity:1}
  88%{opacity:1}
  100%{
    transform:translate(145px,62px) rotate(12deg);
    opacity:0;
  }
}

@keyframes tpMainRoute2{
  0%{
    transform:translate(-70px,15px) rotate(-11deg);
    opacity:0;
  }
  8%{opacity:1}
  88%{opacity:1}
  100%{
    transform:translate(105px,-23px) rotate(-11deg);
    opacity:0;
  }
}

@keyframes tpMainRoute3{
  0%{
    transform:translate(-75px,-32px) rotate(23deg);
    opacity:0;
  }
  8%{opacity:1}
  88%{opacity:1}
  100%{
    transform:translate(78px,34px) rotate(23deg);
    opacity:0;
  }
}

@keyframes tpMainRoute4{
  0%{
    transform:translate(90px,-22px) rotate(-13deg);
    opacity:0;
  }
  8%{opacity:1}
  88%{opacity:1}
  100%{
    transform:translate(-65px,17px) rotate(-13deg);
    opacity:0;
  }
}


/* ----------------------------------------------------------
   FLOTA SECUNDARIA
   ---------------------------------------------------------- */

.mini-1{
  left:10%;
  top:25%;
  animation:tpMiniA 17s linear infinite;
  animation-delay:-3s;
}

.mini-2{
  left:25%;
  top:48%;
  animation:tpMiniB 19s linear infinite;
  animation-delay:-11s;
}

.mini-3{
  left:38%;
  top:26%;
  animation:tpMiniC 16s linear infinite;
  animation-delay:-7s;
}

.mini-4{
  left:55%;
  top:31%;
  animation:tpMiniD 20s linear infinite;
  animation-delay:-13s;
}

.mini-5{
  left:72%;
  top:43%;
  animation:tpMiniE 18s linear infinite;
  animation-delay:-5s;
}

.mini-6{
  left:84%;
  top:62%;
  animation:tpMiniF 21s linear infinite;
  animation-delay:-15s;
}

.mini-7{
  left:13%;
  top:64%;
  animation:tpMiniG 20s linear infinite;
  animation-delay:-8s;
}

.mini-8{
  left:34%;
  top:68%;
  animation:tpMiniH 22s linear infinite;
  animation-delay:-16s;
}

.mini-9{
  left:54%;
  top:66%;
  animation:tpMiniI 18s linear infinite;
  animation-delay:-10s;
}

.mini-10{
  left:68%;
  top:73%;
  animation:tpMiniJ 23s linear infinite;
  animation-delay:-18s;
}

.mini-11{
  left:80%;
  top:24%;
  animation:tpMiniK 19s linear infinite;
  animation-delay:-12s;
}

.mini-12{
  left:8%;
  top:43%;
  animation:tpMiniL 21s linear infinite;
  animation-delay:-6s;
}


/* Rutas secundarias:
   aparición -> recorrido -> desaparición -> reinicio */

@keyframes tpMiniA{
  0%{transform:translate(-28px,-12px) rotate(12deg);opacity:0}
  10%{opacity:.78}
  90%{opacity:.78}
  100%{transform:translate(82px,35px) rotate(12deg);opacity:0}
}

@keyframes tpMiniB{
  0%{transform:translate(-38px,9px) rotate(-11deg);opacity:0}
  10%{opacity:.60}
  90%{opacity:.60}
  100%{transform:translate(76px,-16px) rotate(-11deg);opacity:0}
}

@keyframes tpMiniC{
  0%{transform:translate(-32px,-15px) rotate(18deg);opacity:0}
  10%{opacity:.78}
  90%{opacity:.78}
  100%{transform:translate(70px,31px) rotate(18deg);opacity:0}
}

@keyframes tpMiniD{
  0%{transform:translate(48px,-12px) rotate(-16deg);opacity:0}
  10%{opacity:.78}
  90%{opacity:.78}
  100%{transform:translate(-62px,17px) rotate(-16deg);opacity:0}
}

@keyframes tpMiniE{
  0%{transform:translate(-40px,-19px) rotate(22deg);opacity:0}
  10%{opacity:.60}
  90%{opacity:.60}
  100%{transform:translate(62px,28px) rotate(22deg);opacity:0}
}

@keyframes tpMiniF{
  0%{transform:translate(38px,-10px) rotate(-12deg);opacity:0}
  10%{opacity:.78}
  90%{opacity:.78}
  100%{transform:translate(-70px,14px) rotate(-12deg);opacity:0}
}

@keyframes tpMiniG{
  0%{transform:translate(-30px,-13px) rotate(14deg);opacity:0}
  10%{opacity:.78}
  90%{opacity:.78}
  100%{transform:translate(72px,31px) rotate(14deg);opacity:0}
}

@keyframes tpMiniH{
  0%{transform:translate(-35px,8px) rotate(-10deg);opacity:0}
  10%{opacity:.60}
  90%{opacity:.60}
  100%{transform:translate(68px,-14px) rotate(-10deg);opacity:0}
}

@keyframes tpMiniI{
  0%{transform:translate(-38px,-17px) rotate(20deg);opacity:0}
  10%{opacity:.78}
  90%{opacity:.78}
  100%{transform:translate(66px,29px) rotate(20deg);opacity:0}
}

@keyframes tpMiniJ{
  0%{transform:translate(38px,-9px) rotate(-13deg);opacity:0}
  10%{opacity:.78}
  90%{opacity:.78}
  100%{transform:translate(-65px,14px) rotate(-13deg);opacity:0}
}

@keyframes tpMiniK{
  0%{transform:translate(45px,-13px) rotate(-15deg);opacity:0}
  10%{opacity:.60}
  90%{opacity:.60}
  100%{transform:translate(-62px,17px) rotate(-15deg);opacity:0}
}

@keyframes tpMiniL{
  0%{transform:translate(-25px,-11px) rotate(15deg);opacity:0}
  10%{opacity:.78}
  90%{opacity:.78}
  100%{transform:translate(78px,34px) rotate(15deg);opacity:0}
}


/* ----------------------------------------------------------
   PROTEGER INFORMACIÓN DEL MAPA
   El fondo opaco evita que vehículos se vean atravesando
   visualmente el rótulo.
   ---------------------------------------------------------- */

.map-label{
  z-index:20 !important;
  background:rgba(7,20,38,.97);
  box-shadow:
    0 8px 24px rgba(0,0,0,.24),
    0 0 0 1px rgba(255,255,255,.025);
  backdrop-filter:blur(5px);
}

.gps-status{
  z-index:20 !important;
}


/* ----------------------------------------------------------
   Movimiento más natural
   ---------------------------------------------------------- */

.tracked-vehicle,
.mini-unit{
  will-change:transform,opacity;
}


/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){

  .vehicle-1,
  .vehicle-2,
  .vehicle-3,
  .vehicle-4,
  .mini-unit{
    animation:none !important;
    opacity:.78;
  }
}


/* ==========================================================
   TRACKINGPAR — ACTIVE NAVIGATION V1
   ========================================================== */

html{
  scroll-behavior:smooth;
}

#soluciones,
#conductor,
#combustible,
#cobertura,
#empresa,
#accesos{
  scroll-margin-top:105px;
}


/* enlaces normales */

#navMenu a:not(.nav-access){
  position:relative;
  transition:
    color .22s ease,
    opacity .22s ease;
}

#navMenu a:not(.nav-access)::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-11px;
  width:0;
  height:2px;
  border-radius:999px;
  background:#55dfa9;
  box-shadow:0 0 10px rgba(85,223,169,.38);
  transform:translateX(-50%);
  transition:
    width .24s ease,
    opacity .24s ease;
  opacity:0;
}

#navMenu a:not(.nav-access):hover{
  color:#fff;
}

#navMenu a:not(.nav-access).active{
  color:#fff;
}

#navMenu a:not(.nav-access).active::after{
  width:24px;
  opacity:1;
}


/* Acceso clientes mantiene jerarquía de CTA */

#navMenu .nav-access{
  transition:
    background .22s ease,
    border-color .22s ease,
    color .22s ease,
    box-shadow .22s ease;
}

#navMenu .nav-access:hover{
  color:#fff;
  border-color:rgba(85,223,169,.48);
  background:rgba(85,223,169,.055);
}

#navMenu .nav-access.active{
  color:#fff;
  border-color:rgba(85,223,169,.62);
  background:rgba(85,223,169,.09);
  box-shadow:
    inset 0 0 0 1px rgba(85,223,169,.04),
    0 0 18px rgba(85,223,169,.06);
}


/* móvil */

@media(max-width:900px){

  #navMenu a:not(.nav-access)::after{
    left:0;
    bottom:-4px;
    transform:none;
  }

  #navMenu a:not(.nav-access).active::after{
    width:20px;
  }
}


/* accesibilidad */

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  #navMenu a{
    transition:none !important;
  }
}


/* ==========================================================
   TRACKINGPAR — PREMIUM SURFACES V1
   Profundidad visual sin alterar la identidad corporativa
   ========================================================== */


/* ----------------------------------------------------------
   ECOSISTEMA
   Azul tecnológico extremadamente suave
   ---------------------------------------------------------- */

.intro{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(
      circle at 82% 20%,
      rgba(27,126,214,.055),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f8fbfd 55%,
      #f4f8fb 100%
    );
}

.intro::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:linear-gradient(
    to bottom,
    transparent,
    rgba(38,205,151,.72),
    transparent
  );
}

.intro .container{
  position:relative;
  z-index:1;
}


/* ----------------------------------------------------------
   SOLUCIONES
   Separación clara del bloque anterior
   ---------------------------------------------------------- */

.solutions{
  position:relative;
  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(40,197,151,.035),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #f1f5f8 0%,
      #f6f9fb 100%
    );
}


/* ----------------------------------------------------------
   TARJETAS
   Más presencia sin convertirlas en bloques coloreados
   ---------------------------------------------------------- */

.cards{
  border-color:#d6e0e8;
  box-shadow:
    0 18px 55px rgba(15,38,62,.055);
}

.card{
  overflow:hidden;
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #ffffff 72%,
      #f8fbfd 100%
    );
  border-color:#d6e0e8;
}


/* pequeño acento superior */

.card:not(.featured)::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:3px;
  background:linear-gradient(
    90deg,
    #1687df 0%,
    #3ed3a0 38%,
    transparent 72%
  );
  opacity:.42;
}


/* variación sutil por tarjeta */

.card:nth-child(2)::before{
  background:linear-gradient(
    90deg,
    #1687df,
    #48bfe3,
    transparent 72%
  );
}

.card:nth-child(3)::before{
  background:linear-gradient(
    90deg,
    #35c993,
    #1687df,
    transparent 72%
  );
}

.card:nth-child(4)::before{
  background:linear-gradient(
    90deg,
    #1687df,
    #55dfa9,
    transparent 72%
  );
}

.card:nth-child(5)::before{
  background:linear-gradient(
    90deg,
    #55dfa9,
    #1687df,
    transparent 72%
  );
}

.card:nth-child(6)::before{
  background:linear-gradient(
    90deg,
    #1687df,
    #55dfa9,
    transparent 72%
  );
}


/* ----------------------------------------------------------
   ICONOS
   Más identidad tecnológica
   ---------------------------------------------------------- */

.card:not(.featured) .icon{
  background:
    linear-gradient(
      145deg,
      rgba(22,135,223,.09),
      rgba(62,211,160,.065)
    );
  border:1px solid rgba(22,135,223,.07);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8);
}


/* ----------------------------------------------------------
   TAGS
   Menos aspecto de formulario
   ---------------------------------------------------------- */

.card:not(.featured) .tags span{
  background:#f8fbfd;
  border-color:#d7e2ea;
  color:#435b73;
}


/* ----------------------------------------------------------
   HOVER
   Elevación premium, no exagerada
   ---------------------------------------------------------- */

.card:not(.featured):hover{
  background:#fff;
  border-color:rgba(32,153,210,.24);
  box-shadow:
    0 20px 48px rgba(12,38,63,.10),
    0 0 0 1px rgba(48,196,157,.035);
}

.card:not(.featured):hover::before{
  opacity:.85;
}


/* ----------------------------------------------------------
   EMPRESA
   Superficie propia para no repetir Solutions
   ---------------------------------------------------------- */

.company{
  position:relative;
  background:
    linear-gradient(
      110deg,
      #f7fafc 0%,
      #eef4f8 100%
    );
  border-top:1px solid rgba(19,51,79,.055);
}

.company::after{
  content:"";
  position:absolute;
  right:5%;
  top:18%;
  width:280px;
  height:280px;
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      rgba(25,135,207,.045),
      transparent 68%
    );
  pointer-events:none;
}

.company .container{
  position:relative;
  z-index:1;
}


/* ----------------------------------------------------------
   DESKTOP / NOTEBOOK
   Mantener limpieza visual
   ---------------------------------------------------------- */

@media (min-width:769px){

  .intro{
    border-bottom:1px solid rgba(20,53,81,.045);
  }

  .solutions{
    border-bottom:1px solid rgba(20,53,81,.055);
  }
}


/* ----------------------------------------------------------
   MÓVIL
   Reducir elementos puramente decorativos
   ---------------------------------------------------------- */

@media(max-width:768px){

  .intro::before{
    width:2px;
  }

  .company::after{
    width:180px;
    height:180px;
    right:-60px;
  }
}


/* ----------------------------------------------------------
   ACCESIBILIDAD
   ---------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){

  .card{
    transition:none !important;
  }
}



/* ==========================================================
   TRACKINGPAR — CONTACTO + FOOTER CORPORATIVO V1
   ========================================================== */


/* ----------------------------------------------------------
   CONTACTO
   ---------------------------------------------------------- */

.contact-section{
  position:relative;
  padding:72px 0;
  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(20,130,215,.14),
      transparent 32%
    ),
    radial-gradient(
      circle at 10% 90%,
      rgba(45,211,159,.09),
      transparent 28%
    ),
    #08182a;
  color:#fff;
  overflow:hidden;
}

.contact-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.08;
  background-image:
    linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);
  background-size:60px 60px;
}

.contact-shell{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:70px;
  align-items:center;
}

.contact-copy h2{
  max-width:570px;
  margin:12px 0 18px;
  font-size:clamp(38px,4vw,58px);
  line-height:1.02;
  letter-spacing:-2px;
}

.contact-copy p{
  max-width:610px;
  margin:0;
  color:#9eb0c3;
  font-size:16px;
  line-height:1.7;
}

.contact-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:26px;
}

.contact-tags span{
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:6px;
  background:rgba(255,255,255,.035);
  color:#a9bbcd;
  font-size:10px;
  font-weight:800;
  letter-spacing:.65px;
  text-transform:uppercase;
}

.contact-actions{
  padding-left:20px;
}

.contact-primary{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px;
  align-items:center;
  padding:24px;
  border:1px solid rgba(93,224,166,.27);
  border-radius:12px;
  background:
    linear-gradient(
      135deg,
      rgba(41,198,148,.13),
      rgba(18,104,176,.08)
    );
  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease;
}

.contact-primary:hover{
  transform:translateY(-2px);
  border-color:rgba(93,224,166,.5);
  background:
    linear-gradient(
      135deg,
      rgba(41,198,148,.19),
      rgba(18,104,176,.12)
    );
}

.contact-channel{
  color:#58dda8;
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
}

.contact-primary strong,
.contact-primary small{
  display:block;
}

.contact-primary strong{
  color:#fff;
  font-size:16px;
}

.contact-primary small{
  margin-top:4px;
  color:#8398ae;
  font-size:12px;
}

.contact-primary b{
  color:#58dda8;
  font-size:20px;
}

.contact-info{
  margin-top:18px;
  padding:18px 4px 0;
  border-top:1px solid rgba(255,255,255,.08);
}

.contact-info span{
  display:block;
  margin-bottom:5px;
  color:#57dda8;
  font-size:9px;
  font-weight:900;
  letter-spacing:1.3px;
}

.contact-info strong{
  color:#8fa3b8;
  font-size:12px;
  font-weight:500;
}


/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

.site-footer{
  padding:0;
  background:#050f1c;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.07);
}

.footer-main{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr .8fr;
  gap:55px;
  padding:55px 0 46px;
}

.footer-brand{
  max-width:310px;
}

.footer-logo{
  display:block;
  width:220px;
  max-width:100%;
  height:auto;
  object-fit:contain;
}

.footer-brand p{
  max-width:290px;
  margin:17px 0 0;
  color:#71859b;
  font-size:13px;
  line-height:1.65;
}

.footer-column{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:9px;
}

.footer-column>strong{
  margin-bottom:8px;
  color:#fff;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1.15px;
}

.footer-column a{
  color:#75899e;
  font-size:12px;
  transition:color .18s ease;
}

.footer-column a:hover{
  color:#5edca7;
}

.footer-bottom{
  min-height:66px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  border-top:1px solid rgba(255,255,255,.07);
  color:#60758b;
  font-size:11px;
}

.footer-bottom>div{
  display:flex;
  align-items:center;
  gap:8px;
}

.footer-separator{
  color:#34495f;
}

.developer-credit{
  display:flex;
  align-items:center;
  gap:5px;
  color:#60758b;
  transition:color .18s ease;
}

.developer-credit strong{
  color:#8fa1b3;
  font-weight:600;
}

.developer-credit span{
  margin-left:3px;
  color:#4ed6a0;
}

.developer-credit:hover,
.developer-credit:hover strong{
  color:#fff;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media(max-width:900px){

  .contact-shell{
    grid-template-columns:1fr;
    gap:38px;
  }

  .contact-actions{
    padding-left:0;
  }

  .footer-main{
    grid-template-columns:1.4fr 1fr 1fr;
    gap:38px;
  }

  .footer-brand{
    grid-column:1/-1;
  }
}

@media(max-width:620px){

  .contact-section{
    padding:58px 0;
  }

  .contact-copy h2{
    font-size:38px;
    letter-spacing:-1.4px;
  }

  .contact-primary{
    grid-template-columns:1fr auto;
  }

  .contact-channel{
    grid-column:1/-1;
  }

  .footer-main{
    grid-template-columns:1fr 1fr;
    gap:34px 25px;
    padding:45px 0 38px;
  }

  .footer-brand{
    grid-column:1/-1;
  }

  .footer-bottom{
    align-items:flex-start;
    flex-direction:column;
    gap:12px;
    padding:20px 0;
  }
}