/* Inter-Transporte · hoja de estilos común
   Paleta tomada del logo: azul petróleo #0E6284 y gris #575756 */

:root{
  --azul:#0E6284;
  --azul-osc:#0A4B65;
  --azul-claro:#E7F0F4;
  --gris:#575756;
  --ground:#F1F3F3;
  --card:#FFFFFF;
  --ink:#12171A;
  --ink-2:#3E474B;
  --muted:#7C888D;
  --line:#DFE4E5;
  --pend:#B07C00;
  --r-lg:34px;
  --r-md:22px;
  --r-pill:100px;
  --nav-bg:rgba(241,243,243,.86);
  --soft:0 1px 2px rgba(18,23,26,.04), 0 18px 40px -14px rgba(18,23,26,.12);
  --soft-lg:0 2px 4px rgba(18,23,26,.05), 0 44px 84px -26px rgba(14,98,132,.28);
}

/* ---------- BANDAS DE COLOR ----------
   Cada sección es una banda de ancho completo con su propio color y sus propios
   tokens. El corte entre bandas es neto, no un difuminado. */
/* Bandas de color planas: el corte entre una y otra es limpio, sin efectos. */
.banda{
  position:relative;overflow:hidden;
  background:var(--ground);color:var(--ink);
}
.banda > .wrap{position:relative;z-index:2;}
/* cada banda pinta por encima de la anterior: así una pasa sobre la otra */
.banda:nth-of-type(1){z-index:1}.banda:nth-of-type(2){z-index:2}
.banda:nth-of-type(3){z-index:3}.banda:nth-of-type(4){z-index:4}
.banda:nth-of-type(5){z-index:5}.banda:nth-of-type(6){z-index:6}
.banda:nth-of-type(7){z-index:7}.banda:nth-of-type(8){z-index:8}
.banda.primera{padding-top:0;}


/* --- paletas por banda --- */
.banda--blanca{--ground:#FFFFFF;--card:#F4F6F6;--line:#E6EAEA;}
.banda--nube{
  --ground:#E2EDF2;--card:#FFFFFF;--line:#CFDFE7;
  --soft:0 1px 2px rgba(18,23,26,.05), 0 18px 40px -14px rgba(14,98,132,.18);
}
.banda--azul{
  --ground:#0E4257;--card:#15536D;--ink:#EBF3F6;--ink-2:#C7DCE5;--muted:#93B7C7;
  --line:#1F6482;--azul:#7FCDEC;--azul-osc:#9BDAF3;--azul-claro:#17516A;
  --soft:0 1px 2px rgba(0,0,0,.24), 0 18px 40px -14px rgba(0,0,0,.42);
  --soft-lg:0 2px 4px rgba(0,0,0,.3), 0 44px 84px -26px rgba(0,0,0,.5);
}
.banda--noche{
  --ground:#08202C;--card:#0F3345;--ink:#E8F2F6;--ink-2:#BDD5E0;--muted:#87A6B6;
  --line:#164457;--azul:#6DC4E6;--azul-osc:#8DD5F0;--azul-claro:#123B4E;
  --soft:0 1px 2px rgba(0,0,0,.34), 0 18px 40px -14px rgba(0,0,0,.55);
  --soft-lg:0 2px 4px rgba(0,0,0,.4), 0 44px 84px -26px rgba(0,0,0,.62);
}
.banda--azul .tag,.banda--noche .tag{border-color:var(--line);}
.banda--azul .pend,.banda--noche .pend{color:#FFD980;border-color:#FFD980;}

*{box-sizing:border-box;}

body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip;
  transition:background-color .9s ease, color .9s ease;
}


.wrap{max-width:1120px;margin:0 auto;padding:0 22px;}
.narrow{max-width:660px;margin-left:auto;margin-right:auto;}

h1,h2,h3,h4{margin:0;letter-spacing:-.033em;line-height:1.07;text-wrap:balance;font-weight:650;}
p{margin:0;}
.lead{color:var(--muted);font-size:14.5px;line-height:1.65;text-wrap:pretty;}
.body-txt{color:var(--ink-2);font-size:15px;line-height:1.7;}

/* ---------- botones ---------- */
.pill{
  display:inline-flex;align-items:center;gap:8px;background:var(--azul);color:#fff;border:0;
  padding:12px 24px;border-radius:var(--r-pill);font-size:14px;font-weight:550;
  text-decoration:none;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), background .25s;
}
.pill:hover{transform:translateY(-2px);background:var(--azul-osc);}
.pill.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);}
.pill.ghost:hover{background:var(--card);}
.pill.light{background:#fff;color:var(--azul);}
.pill.light:hover{background:#EAF2F5;}
.pill.outline-w{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3);}
.pill.outline-w:hover{background:rgba(255,255,255,.1);}
.pill.sm{padding:9px 18px;font-size:13px;}
.pill:focus-visible,a:focus-visible{outline:2px solid var(--azul);outline-offset:3px;}

.tag{
  display:inline-block;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--azul);background:var(--azul-claro);border:1px solid var(--linea-tag,#D3E4EB);
  padding:5px 13px;border-radius:var(--r-pill);font-weight:550;
}

.pend{border-bottom:1px dashed var(--pend);color:var(--pend);cursor:help;}

/* ---------- barra superior ---------- */
.nav{
  position:sticky;top:0;z-index:40;background:var(--nav-bg);
  backdrop-filter:blur(12px);border-bottom:1px solid transparent;
  transition:border-color .3s;
}
.nav.stuck{border-bottom-color:var(--line);}
.nav .inner{
  max-width:1120px;margin:0 auto;padding:10px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.nav .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);}
.nav .brand img{height:60px;width:auto;display:block;}

.nav .links{display:flex;align-items:center;gap:6px;}
.nav .links a{
  text-decoration:none;color:var(--ink-2);font-size:14px;padding:8px 12px;
  border-radius:var(--r-pill);transition:background .25s,color .25s;
}
.nav .links a:hover{background:var(--card);color:var(--ink);}
.nav .links a[aria-current="page"]{color:var(--azul);font-weight:600;}
/* el botón del menú conserva sus propios colores, sin heredar los del enlace */
.nav .links a.pill{color:#fff;background:var(--azul);}
.nav .links a.pill:hover{color:#fff;background:var(--azul-osc);}
.nav .burger{
  display:none;background:none;border:1px solid var(--line);border-radius:var(--r-pill);
  padding:9px 14px;font-size:13px;cursor:pointer;color:var(--ink);
}

@media (max-width:420px){
  .nav .brand img{height:44px;}
}

@media (max-width:860px){
  .nav .burger{display:block;}
  .nav .links{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--card);border-bottom:1px solid var(--line);padding:10px 16px 16px;
  }
  .nav .links.open{display:flex;}
  .nav .links a{padding:12px 14px;}
  .nav .links .pill{justify-content:center;margin-top:6px;}
}

/* ---------- animación ---------- */
.rv{
  opacity:0;transform:translateY(30px);
  transition:opacity .85s cubic-bezier(.2,.7,.3,1), transform .85s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--reveal-delay,0s);
}
.rv.in{opacity:1;transform:none;}
.rv.d1{--reveal-delay:.08s}.rv.d2{--reveal-delay:.16s}.rv.d3{--reveal-delay:.24s}
.rv.d4{--reveal-delay:.32s}.rv.d5{--reveal-delay:.40s}

/* variantes de entrada: desde los lados y con acercamiento */
.rv.izq{transform:translateX(-40px);}
.rv.der{transform:translateX(40px);}
.rv.zoom{transform:scale(.94) translateY(24px);}
.rv.izq.in,.rv.der.in,.rv.zoom.in{transform:none;}

/* barra de progreso de lectura */
.progreso{
  position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--azul),#38A3C9);z-index:60;pointer-events:none;
}

/* trazado de los pictogramas al entrar en pantalla */
.ic [data-dibujo]{
  stroke-dasharray:var(--largo,200);
  stroke-dashoffset:var(--largo,200);
  transition:stroke-dashoffset 1.1s cubic-bezier(.4,.5,.2,1);
  transition-delay:calc(var(--reveal-delay,0s) + .12s);
}
.in .ic [data-dibujo],.ic.in [data-dibujo]{stroke-dashoffset:0;}

/* pictograma dentro de un disco de color */
.ic-wrap{
  width:56px;height:56px;border-radius:18px;background:var(--azul-claro);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
  transition:transform .4s cubic-bezier(.2,.7,.3,1), background .3s;
}
.card.hov:hover .ic-wrap{transform:rotate(-6deg) scale(1.06);filter:brightness(.96);}
.ic-wrap .ic{width:28px;height:28px;margin:0;}

/* marca de agua con el emblema */
.watermark{
  position:absolute;pointer-events:none;opacity:.045;width:520px;height:auto;
  right:-120px;top:-60px;z-index:0;
}
.tiene-marca{position:relative;overflow:hidden;}
.tiene-marca > *{position:relative;z-index:1;}
/* la marca de agua queda fuera del flujo: si no, empuja el contenido */
.tiene-marca > .watermark{position:absolute;z-index:0;}

/* pictograma sobre tarjeta oscura */
.ch.oscuro .ic-wrap{background:rgba(255,255,255,.12);}

@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) rotate(var(--rot,0deg));}
  50%{transform:translate3d(0,-13px,0) rotate(var(--rot,0deg));}
}
@keyframes drift-y{
  0%,100%{transform:translate3d(0,0,0);}
  50%{transform:translate3d(0,-7px,0);}
}

/* ---------- portada ---------- */
.hero{position:relative;padding:64px 0 0;text-align:center;}
.hero .marca{width:96px;height:auto;margin:0 auto 26px;display:block;}
.hero h1{font-size:clamp(38px,6.6vw,68px);}
.hero h1 em{font-style:normal;color:var(--azul);}
.hero .lead{margin:22px auto 0;max-width:40ch;font-size:16px;}
.hero .cta{margin-top:30px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

.orbit{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:30px;pointer-events:none;}
.chip{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:8px 15px;font-size:13px;font-weight:550;box-shadow:var(--soft);
  white-space:nowrap;color:var(--ink-2);
  animation:drift-y var(--dur,7s) ease-in-out infinite;animation-delay:var(--del,0s);opacity:0;
}
.chip.on{opacity:1;transition:opacity 1s ease;}
.chip b{color:var(--azul);font-weight:600;}



/* escena ilustrada de la portada */
.stage{
  margin-top:56px;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--soft-lg);
  position:relative;aspect-ratio:16/9;background:#DCE8EE;
}

@keyframes rodar{from{transform:translateX(0);}to{transform:translateX(-120px);}}
@keyframes girar{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes rebotar{0%,100%{transform:translateY(0);}50%{transform:translateY(-2.5px);}}
@keyframes nubes{from{transform:translateX(0);}to{transform:translateX(-260px);}}


/* ---------- encabezado de página interior ---------- */
.page-head{padding:40px 0 0;text-align:center;}
.page-head h1{font-size:clamp(32px,5.6vw,54px);margin-top:18px;}
.page-head .lead{margin:18px auto 0;max-width:52ch;}

/* ---------- secciones ---------- */
section{padding:76px 0 0;}
.head{text-align:center;}
.head h2{font-size:clamp(28px,4.5vw,44px);margin-top:18px;}
.head .lead{margin:14px auto 0;max-width:46ch;}

/* tarjetas genéricas */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px;}
.cards.dos{grid-template-columns:repeat(2,1fr);}
.card{
  background:var(--card);border-radius:var(--r-md);padding:30px;box-shadow:var(--soft);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;
}
.card.hov:hover{transform:translateY(-5px);box-shadow:var(--soft-lg);}
.card .ic{width:34px;height:34px;display:block;margin-bottom:18px;}
.card h3{font-size:17px;}
.card p{margin-top:9px;font-size:14px;color:var(--muted);line-height:1.62;}

/* paneles grandes */
.mv{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px;}
.panel{background:var(--card);border-radius:var(--r-lg);padding:40px;box-shadow:var(--soft);}
.panel.azul{background:var(--azul);color:#fff;}
.panel h3{font-size:23px;}
.panel p{margin-top:16px;}
.panel.azul p{color:rgba(255,255,255,.84);}
.panel .year{
  font-size:72px;font-weight:680;letter-spacing:-.05em;line-height:1;
  color:rgba(255,255,255,.22);font-variant-numeric:tabular-nums;
}

/* documentos */
.docs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:36px;}
.doc{
  background:var(--card);border-radius:var(--r-md);padding:28px;box-shadow:var(--soft);
  display:flex;gap:18px;align-items:flex-start;text-decoration:none;color:inherit;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;
}
.doc:hover{transform:translateY(-5px);box-shadow:var(--soft-lg);}
.doc .sheet{
  flex:0 0 42px;height:54px;border-radius:6px;background:var(--azul-claro);
  border:1px solid #D3E4EB;position:relative;overflow:hidden;
}
.doc .sheet::before{
  content:"";position:absolute;left:8px;right:8px;top:11px;height:2px;background:#C3DAE3;
  box-shadow:0 8px 0 #C3DAE3, 0 16px 0 #C3DAE3, 0 24px 0 #C3DAE3;
}
.doc .sheet::after{
  content:"";position:absolute;right:0;top:0;border-width:0 12px 12px 0;border-style:solid;
  border-color:transparent var(--card) transparent transparent;
}
.doc h3{font-size:16.5px;}
.doc p{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.55;}
.doc .go{font-size:13px;color:var(--azul);margin-top:12px;display:inline-block;font-weight:550;}

/* bloque de detalle */
.block{background:var(--card);border-radius:var(--r-lg);padding:36px;margin-top:28px;box-shadow:var(--soft);}
.block .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:28px;}
.block h4{font-size:15.5px;color:var(--azul);}
.block .cols p{margin-top:8px;font-size:14px;color:var(--muted);line-height:1.62;}
.rights{
  margin-top:30px;padding-top:26px;border-top:1px solid var(--line);
  display:flex;gap:22px;flex-wrap:wrap;align-items:center;justify-content:space-between;
}

/* canales */
.chan{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px;}
.ch{border-radius:var(--r-lg);padding:38px;box-shadow:var(--soft);background:var(--card);display:flex;flex-direction:column;}
.ch.oscuro{background:#12171A;color:#fff;}
.ch h3{font-size:23px;}
.ch p{font-size:14.5px;color:var(--muted);margin-top:14px;line-height:1.65;}
.ch.oscuro p{color:rgba(255,255,255,.72);}
.badge{
  margin-top:16px;font-size:12.5px;border-radius:var(--r-pill);padding:6px 14px;align-self:flex-start;
  background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.24);
}
.ch ul{margin:18px 0 0;padding-left:19px;}
.ch li{font-size:14px;color:var(--muted);line-height:1.7;}
.ch.oscuro li{color:rgba(255,255,255,.72);}
.ch .btnrow{margin-top:auto;padding-top:28px;}

/* portada con foto a sangre y texto encima */
.banda--portada{padding:0;background:#08202C;--ink:#fff;}
.portada-foto{
  position:relative;display:grid;place-items:center;overflow:hidden;
  min-height:min(86vh,680px);
}
.portada-foto picture,.portada-foto > img{position:absolute;inset:0;}
.portada-foto img{width:100%;height:100%;object-fit:cover;object-position:center 64%;}
@media (max-width:700px){.portada-foto img{object-position:center 62%;}}
.portada-foto .velo{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,26,36,.55) 0%,rgba(6,26,36,.26) 40%,rgba(6,26,36,.80) 100%);
}
.portada-texto{
  position:relative;z-index:2;text-align:center;color:#fff;
  padding:96px 24px 88px;max-width:940px;
}

.portada-texto h1{font-size:clamp(34px,6.2vw,66px);color:#fff;text-shadow:0 3px 26px rgba(0,0,0,.42);}
.portada-texto h1 em{font-style:normal;color:#8FD8F5;}
.portada-texto .lead{color:rgba(255,255,255,.86);margin:22px auto 0;max-width:44ch;font-size:16.5px;}
.portada-texto .cta{margin-top:32px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.credito-foto{
  position:absolute;right:14px;bottom:12px;z-index:3;
  font-size:10.5px;color:rgba(255,255,255,.5);
}
.credito-foto a{color:rgba(255,255,255,.6);}

/* reseñas de clientes */
.resenas{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:16px;margin-top:36px;}
.resena{
  margin:0;background:var(--card);border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--soft);display:flex;flex-direction:column;
}
.resena img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.resena .cuerpo{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;}
.resena .estrellas{color:#E9A400;font-size:14px;letter-spacing:2px;}
.resena .estrellas i{color:#CBD3D6;font-style:normal;}
.resena blockquote{margin:11px 0 0;font-size:14.5px;line-height:1.58;color:var(--ink-2);}
.resena figcaption{margin-top:auto;padding-top:16px;font-size:13px;color:var(--muted);}

@media (max-width:600px){.portada-texto{padding:70px 20px 64px;}}

/* fotos reales de la flota */
.stage img.foto{width:100%;height:100%;object-fit:cover;display:block;}
.flota{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px;}
.flota figure{margin:0;border-radius:22px;overflow:hidden;box-shadow:var(--soft);}
.flota img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.flota figure:hover img{transform:scale(1.05);}
@media (max-width:700px){
  .flota{grid-template-columns:1fr 1fr;gap:10px;}
  .flota figure:nth-child(3){grid-column:1 / -1;}
}

/* llamado corto, al grano */
.cta-franja{
  margin-top:40px;background:var(--azul);color:#fff;border-radius:var(--r-lg);
  padding:30px 40px;display:flex;align-items:center;justify-content:space-between;
  gap:28px;flex-wrap:wrap;box-shadow:var(--soft);
}
.cta-franja h3{font-size:clamp(20px,2.5vw,27px);}
.cta-franja p{color:rgba(255,255,255,.74);font-size:14.5px;margin-top:7px;}
.cta-franja .botones{display:flex;gap:10px;flex-wrap:wrap;}
@media (max-width:760px){
  .cta-franja{flex-direction:column;align-items:center;padding:28px 24px;text-align:center;}
  .cta-franja .botones{justify-content:center;}
}

/* cierre */
.closer{
  margin:0;background:var(--azul);color:#fff;border-radius:var(--r-lg);
  padding:64px 30px;text-align:center;position:relative;overflow:hidden;
}
.closer h2{font-size:clamp(28px,4.8vw,46px);}
.closer .lead{color:rgba(255,255,255,.72);margin:18px auto 0;max-width:42ch;}
.closer .cta{margin-top:32px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.closer .glow{
  position:absolute;left:50%;top:-46%;width:900px;height:900px;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(255,255,255,.14) 0%,transparent 62%);pointer-events:none;
}

/* ---------- 3 · cinta de ciudades ---------- */
.cinta{
  overflow:hidden;margin-top:36px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:13px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.cinta-pista{display:flex;width:max-content;animation:desfile 42s linear infinite;}
.cinta:hover .cinta-pista{animation-play-state:paused;}
.cinta-pista span{
  display:flex;align-items:center;gap:24px;padding-right:24px;
  font-size:14px;font-weight:550;color:var(--ink-2);white-space:nowrap;
}
.cinta-pista span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--azul);opacity:.45;}
@keyframes desfile{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- 6 · cifras que suben ---------- */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px;}
.cifra{background:var(--card);border-radius:var(--r-md);padding:30px 20px;text-align:center;box-shadow:var(--soft);}
.cifra .n{
  font-size:clamp(34px,4.4vw,46px);font-weight:680;letter-spacing:-.045em;line-height:1;
  color:var(--azul);font-variant-numeric:tabular-nums;
}
.cifra .l{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.45;}
.aviso-cifras{
  margin-top:16px;text-align:center;font-size:12.5px;
}

/* ---------- 1 · red de rutas ---------- */
.mapa-fila{
  display:block;margin-top:28px;
}
.mapa{margin:0;}
.corredores{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:9px;}
.corredores li{
  display:flex;align-items:center;gap:11px;font-size:14.5px;color:var(--ink-2);
  padding:11px 16px;background:var(--card);border-radius:var(--r-pill);
  border:1px solid var(--line);
}
.corredores li::before{
  content:"";flex:0 0 7px;height:7px;border-radius:50%;background:var(--azul);
}
.corredores .tot{
  background:transparent;border:0;color:var(--muted);font-size:12.5px;padding-left:0;
}
.corredores .tot::before{display:none;}
@media (max-width:900px){
  .corredores li{font-size:13.5px;padding:9px 14px;}
}
.mapa svg{width:100%;height:auto;display:block;}
/* silueta del país: primero se dibuja el borde, luego aparece la trama de puntos */
.pais{
  fill:none;stroke:var(--azul);stroke-width:1.2;opacity:.5;stroke-linejoin:round;
  stroke-dasharray:var(--largo,6000);stroke-dashoffset:var(--largo,6000);
  transition:stroke-dashoffset 2.8s cubic-bezier(.4,.5,.2,1);
}
.in .pais{stroke-dashoffset:0;}
.pais-trama{fill:url(#tramaPais);opacity:0;transition:opacity 1.4s ease 1s;}
.in .pais-trama{opacity:1;}
.punto-pais{fill:var(--azul);opacity:.4;}
.rutas{fill:none;stroke:var(--azul);stroke-width:1.8;stroke-linecap:round;opacity:.75;}
.viajero{fill:#FFC94D;}
.viajeros{opacity:0;transition:opacity 1s ease 2.2s;}
.in .viajeros{opacity:1;}
.nodo.sede-nodo{fill:#FFC94D;}
.etiqueta.sede{fill:#FFC94D;}

/* conectores: promesas colgadas del mapa */
.conector{opacity:0;transition:opacity .8s ease;transition-delay:var(--retraso,0s);}
.in .conector{opacity:1;}
.hilo{stroke:var(--azul);stroke-width:1;opacity:.4;}
.halo{fill:var(--azul);opacity:.12;}
.disco{fill:var(--card);stroke:var(--azul);stroke-width:1.4;}
.ic-conector{color:var(--azul);}
.rotulo{fill:var(--ink);font-size:13px;font-weight:650;letter-spacing:-.01em;}
.sede-nodo{filter:drop-shadow(0 0 8px #FFC94D);}
.ruta{
  stroke-dasharray:var(--largo,600);stroke-dashoffset:var(--largo,600);
  transition:stroke-dashoffset 1.8s cubic-bezier(.4,.5,.2,1);
  transition-delay:var(--retraso,0s);
}
.in .ruta{stroke-dashoffset:0;}
.nodo{
  opacity:0;transform:scale(.3);transform-box:fill-box;transform-origin:center;
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,1.4,.4,1);
  transition-delay:var(--retraso,0s);
}
.in .nodo{opacity:1;transform:none;}
.etiqueta{
  opacity:0;transition:opacity .6s ease;transition-delay:var(--retraso,0s);
  font-size:13px;font-weight:600;fill:var(--ink-2);
}
.in .etiqueta{opacity:1;}
.sede{font-size:14px;fill:var(--azul);}
@keyframes onda{0%{r:9;opacity:.5;}100%{r:30;opacity:0;}}
.in .onda{animation:onda 2.8s ease-out infinite;}

/* ---------- 2 · recorrido del envío ---------- */
.recorrido{margin-top:40px;position:relative;}
/* el riel va de centro a centro del primer y último paso (4 columnas) */
.riel{
  position:absolute;left:12.5%;right:12.5%;top:34px;height:4px;border-radius:3px;
  background:var(--line);overflow:hidden;
}
.riel i{
  display:block;height:100%;width:100%;background:var(--azul);border-radius:3px;
  transform:scaleX(var(--avance,0));transform-origin:0 50%;transition:transform .25s linear;
}
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative;}
.paso{text-align:center;padding-top:0;}
.paso .punto{
  width:72px;height:72px;border-radius:50%;background:var(--card);border:2px solid var(--line);
  margin:0 auto 18px;display:flex;align-items:center;justify-content:center;
  transition:border-color .45s ease, background .45s ease, transform .45s cubic-bezier(.2,1.3,.4,1);
}
.paso .punto svg{width:30px;height:30px;}
.paso .punto path,.paso .punto circle,.paso .punto rect{stroke:var(--muted);transition:stroke .45s ease;}
.paso.activo .punto{border-color:var(--azul);background:var(--azul-claro);transform:scale(1.06);}
.paso.activo .punto path,.paso.activo .punto circle,.paso.activo .punto rect{stroke:var(--azul);}
.paso h3{font-size:16px;}
.paso p{font-size:13.5px;color:var(--muted);margin-top:7px;line-height:1.55;}
.camioncito{
  position:absolute;top:14px;left:12.5%;width:44px;height:44px;margin-left:-22px;
  transform:translateX(calc(var(--avance,0) * 75cqw));
  transition:transform .25s linear;pointer-events:none;
}
.recorrido{container-type:inline-size;}

/* ---------- 5 · titular por palabras ---------- */
.palabra{display:inline-block;opacity:0;transform:translateY(26px);}
.arranque .palabra{animation:asomar .75s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:var(--d,0s);}
@keyframes asomar{to{opacity:1;transform:none;}}

/* ---------- 8 · botón flotante de WhatsApp ---------- */
.wa{
  position:fixed;right:18px;bottom:78px;z-index:55;width:56px;height:56px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(18,23,26,.26);text-decoration:none;
  opacity:0;transform:translateY(18px) scale(.9);pointer-events:none;
  transition:opacity .4s ease, transform .4s cubic-bezier(.2,1.3,.4,1);
}
.wa.visible{opacity:1;transform:none;pointer-events:auto;}
.wa:hover{transform:scale(1.07);}
.wa svg{width:29px;height:29px;position:relative;z-index:1;}
.wa::before{
  content:"";position:absolute;inset:0;border-radius:50%;background:#25D366;
  animation:latido 2.8s ease-out infinite;
}
@keyframes latido{0%{transform:scale(1);opacity:.5;}70%,100%{transform:scale(1.75);opacity:0;}}

/* ---------- 7 · transición entre páginas ---------- */
@view-transition{navigation:auto;}
@keyframes entrada-pagina{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
body{animation:entrada-pagina .5s cubic-bezier(.2,.7,.3,1) both;}

/* ---------- 10 · las superficies acompañan el cambio de tono ----------
   Va al final a propósito: estas reglas tienen que ganarle al `transition`
   que ya declararon .card y .doc más arriba, sin perder el efecto de hover. */
.card,.doc{
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s,
             background-color .9s ease, border-color .9s ease, color .9s ease;
}
.panel,.block,.ch,.mapa,.cinta,.cifra,.chip,.tag,.paso .punto,.nav,.riel{
  transition-property:background-color,border-color,color,box-shadow;
  transition-duration:.9s;
  transition-timing-function:ease;
}
.ic-wrap{
  transition:transform .4s cubic-bezier(.2,.7,.3,1), background-color .9s ease;
}
/* los pictogramas y el mapa toman el azul del tema, no el fijo del SVG */
.ic [data-dibujo]{stroke:var(--azul);transition:stroke .9s ease;}
.pais{transition-property:stroke-dashoffset,fill-opacity;}
.mapa g[stroke]{stroke:var(--azul);transition:stroke .9s ease;}
.nodo,.onda{fill:var(--azul);transition:fill .9s ease;}
.etiqueta{transition:fill .9s ease, opacity .6s ease;}
body.oscuro .tag{border-color:var(--line);}
body.oscuro .doc .sheet{border-color:var(--line);}
body.oscuro .cifra .n{color:var(--azul);}


/* ---------- ritmo vertical de las bandas ---------- */
.banda{padding:72px 0;}
.banda--portada + .banda{padding-top:40px;}
.banda.primera{padding-top:0;}
.banda.ultima{padding-bottom:0;}
.banda.ultima{padding-bottom:0;}
.banda .hero{padding-top:34px;}
.banda .closer{margin-top:0;}
.banda .head + .cards,.banda .head + .cifras,.banda .head + .mapa,
.banda .head + .recorrido{margin-top:48px;}
@media (max-width:600px){
  .banda{padding:54px 0;}
  .banda--portada + .banda{padding-top:28px;}
  .banda .hero{padding-top:26px;}
}

/* pie */
footer{padding:44px 0 40px;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;}
footer img{width:150px;height:auto;}
footer .lead{font-size:12.5px;}
footer a{color:var(--azul);}
footer .cols{display:flex;gap:44px;flex-wrap:wrap;}
footer h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600;}
footer nav{display:flex;flex-direction:column;gap:7px;margin-top:12px;}
footer nav a{font-size:13.5px;text-decoration:none;color:var(--ink-2);}
footer nav a:hover{color:var(--azul);}

.draft{
  position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:50;
  background:rgba(18,23,26,.93);color:#fff;font-size:12px;padding:8px 16px;
  border-radius:var(--r-pill);backdrop-filter:blur(8px);
}
.draft b{color:#FFC94D;font-weight:600;}

@media (max-width:900px){
  .mv,.cards,.cards.dos,.docs,.chan,.block .cols{grid-template-columns:1fr;}
  .cifras{grid-template-columns:repeat(2,1fr);}
  /* el mapa se encoge: hay que agrandar tipografía y trazos para que se lea */
  /* el mapa se recorta al país: sin conectores y con tipografía mayor */
  .conectores{display:none;}
  .etiqueta{font-size:17px;}
  .etiqueta.sede{font-size:19px;}
  .rutas{stroke-width:2.6;}
  .nodo{r:5.4;}
  .corredores li{font-size:13px;}
  /* el recorrido pasa a vertical: el riel y el camión se ocultan */
  .pasos{grid-template-columns:1fr;gap:26px;}
  .riel,.camioncito{display:none;}
  .paso{display:grid;grid-template-columns:64px 1fr;gap:16px;text-align:left;align-items:center;}
  .paso .punto{width:64px;height:64px;margin:0;}
}
@media (max-width:700px){
  footer{flex-direction:column;align-items:center;text-align:center;gap:26px;}
  footer .cols{justify-content:center;gap:34px;}
  footer nav{align-items:center;}
  footer img{margin:0 auto;}
}

@media (max-width:600px){
  .hero{padding-top:44px;}
  section{padding-top:76px;}
  .chip{font-size:11.5px;padding:6px 12px;}
  .panel,.block,.ch{padding:28px 22px;}
  .closer{padding:52px 22px;}
}

@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;transition:none;}
  .chip,.cinta-pista,.wa::before{animation:none;}
  .pill,.card,.doc,.ic-wrap{transition:none;}
  .ic [data-dibujo]{stroke-dashoffset:0;transition:none;}
  .progreso{display:none;}
  .ruta{stroke-dashoffset:0;transition:none;}
  .nodo,.etiqueta{opacity:1;transform:none;transition:none;}
  .in .onda{animation:none;opacity:0;}
  .palabra{opacity:1;transform:none;}
  .arranque .palabra{animation:none;}
  body{animation:none;}
  .camioncito,.riel i{transition:none;}
}