/* =========================================================
   INGRESALO / cinematic.css
   Capa cinematográfica: se carga DESPUÉS de styles.css.
   Todo lo de acá es aditivo: si borrás este archivo y
   cinematic.js, el sitio vuelve exactamente a como estaba.
   ========================================================= */

:root{
  --vj-bg:      #081A3B;
  --vj-bg-2:    #0E2A5C;
  --vj-line:    rgba(140,180,240,0.22);
  --vj-dim:     #9FBAE4;
  --vj-cyan:    #12B4D6;
  --vj-light:   #6BB6F5;
}

/* =========================================================
   1) EL VIAJE DE TU MERCADERÍA
   Track alto + escena sticky. El track solo se muestra
   cuando cinematic.js confirma que el equipo lo banca
   (html.is-cinematic). Sin JS queda la lista vertical.
   ========================================================= */
.viaje{
  background:var(--vj-bg);
  color:#fff;
  position:relative;
  /* OJO: nada de overflow:hidden acá. Un ancestro con overflow oculto
     rompe position:sticky y la escena se va de pantalla al scrollear.
     El recorte de la escena ancha lo hacen .viaje-sticky y .viaje-escena. */
}
.viaje::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(70% 55% at 18% 8%,  rgba(32,89,232,0.30), transparent 70%),
    radial-gradient(60% 50% at 88% 92%, rgba(18,180,214,0.20), transparent 70%);
  pointer-events:none;
}

/* --- entrada y salida suaves: el navy no aparece de golpe --- */
.viaje-fade{
  position:absolute; left:0; right:0; height:190px;
  z-index:1; pointer-events:none;
}
.viaje-fade-top{
  top:0;
  background:linear-gradient(to bottom, var(--bg-alt) 0%, rgba(238,243,252,0.55) 42%, rgba(238,243,252,0) 100%);
}
.viaje-fade-bot{
  bottom:0;
  background:linear-gradient(to top, var(--bg-alt) 0%, rgba(238,243,252,0.55) 42%, rgba(238,243,252,0) 100%);
}

/* el padding generoso deja respirar el degradado de entrada (190px) */
.viaje-intro{ position:relative; z-index:2; padding:168px 0 0; text-align:center; }
.viaje-intro .section-eyebrow{ color:var(--vj-cyan); }
.viaje-intro h2{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(30px, 4.4vw, 52px); line-height:1.08;
  letter-spacing:-0.02em; margin:10px auto 14px; max-width:16ch;
}
.viaje-intro p{ color:var(--vj-dim); max-width:52ch; margin:0 auto; font-size:17px; }
.viaje-hint{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:26px; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--vj-light);
}
.viaje-hint svg{ width:16px; height:16px; animation:vjBob 1.8s ease-in-out infinite; }
@keyframes vjBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }

/* --- track / sticky --- */
.viaje-track{ display:none; position:relative; z-index:2; height:560vh; }
html.is-cinematic .viaje-track{ display:block; }
html.is-cinematic .viaje-lista{ display:none; }
html.is-cinematic .viaje-intro{ padding-bottom:20px; }

.viaje-sticky{
  position:sticky; top:0;
  height:100vh; min-height:560px;
  display:flex; flex-direction:column; justify-content:space-between;
  /* 104px arriba: el header del sitio es sticky y mide 78px, así que sin
     este colchón la línea de tiempo quedaba tapada detrás y no se veía
     avanzar. */
  padding:104px 0 40px;
  overflow:hidden;
  contain:layout paint;         /* aísla el repintado de esta caja */
}
/* Cortina inferior: garantiza contraste para el texto sin importar qué
   parte de la escena esté pasando por detrás. */
.viaje-sticky::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:56%; z-index:2; pointer-events:none;
  background:linear-gradient(to top,
    #081A3B 6%, rgba(8,26,59,0.94) 30%, rgba(8,26,59,0.72) 52%, rgba(8,26,59,0) 100%);
}

/* --- HUD de seguimiento --- */
/* width:100% es obligatorio: .wrap trae margin:0 auto y, como hijo de un
   flex column, ese margen automático cancela el stretch y el bloque
   colapsa al ancho de su contenido. */
.viaje-hud{ position:relative; z-index:4; width:100%; }
.viaje-hud-row{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:6px; position:relative; padding-top:20px;
}
.viaje-hud-row::before{
  content:""; position:absolute; left:5%; right:5%; top:26px;
  height:2px; background:var(--vj-line); border-radius:2px;
}
.viaje-hud-fill{
  position:absolute; left:5%; top:26px; height:2px; width:0;
  background:linear-gradient(90deg, var(--vj-light), var(--vj-cyan));
  border-radius:2px; transition:width .18s linear;
  box-shadow:0 0 14px rgba(18,180,214,0.7);
}
.viaje-node{
  position:relative; z-index:2;
  flex:1; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.viaje-node-dot{
  width:13px; height:13px; border-radius:50%;
  background:var(--vj-bg); border:2px solid var(--vj-line);
  transition:transform .3s cubic-bezier(.2,.8,.3,1), background .3s ease,
             border-color .3s ease, box-shadow .3s ease;
}
.viaje-node-label{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--vj-dim); opacity:.6;
  transition:color .3s ease, opacity .3s ease;
  white-space:nowrap;
}
.viaje-node.is-done .viaje-node-dot{ background:var(--vj-light); border-color:var(--vj-light); }
.viaje-node.is-done .viaje-node-label{ opacity:.85; }
.viaje-node.is-active .viaje-node-dot{
  background:var(--vj-cyan); border-color:var(--vj-cyan);
  transform:scale(1.55);
  box-shadow:0 0 0 6px rgba(18,180,214,0.18), 0 0 20px rgba(18,180,214,0.85);
}
.viaje-node.is-active .viaje-node-label{ color:#fff; opacity:1; }

/* --- escena panorámica --- */
.viaje-escena{
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  overflow:hidden;
}
/* La escena es más ancha que el viewport a propósito: eso es el recorrido
   que cinematic.js recorre horizontalmente. Nada de flex acá, porque un
   hijo flex se encoge y el paneo se pierde. */
/* La escena va corrida hacia arriba para dejar libre el tercio inferior,
   que es donde vive el texto, y para no chocar con la línea de tiempo. */
.viaje-escena svg{
  position:absolute; top:46%; left:0;
  height:min(62vh, 500px);
  width:auto; max-width:none;
  transform:translate3d(0,-50%,0);
  will-change:transform;
  backface-visibility:hidden;   /* fuerza capa propia en GPU */
}

/* --- panel de texto por etapa --- */
.viaje-panels{ position:relative; z-index:3; min-height:222px; width:100%; }
/* left:28px = el padding de .wrap, para que el texto quede alineado con el
   resto del contenido de la página y no pegado al borde. */
.viaje-panel{
  position:absolute; left:28px; bottom:0; width:min(46ch, 50%);
  opacity:0; transform:translateY(22px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.8,.3,1);
  pointer-events:none;
}
.viaje-panel.is-on{ opacity:1; transform:none; pointer-events:auto; }
/* filete de acento arriba del bloque, como ancla visual */
.viaje-panel::before{
  content:""; display:block; width:44px; height:3px; border-radius:3px;
  margin-bottom:16px;
  background:linear-gradient(90deg, var(--vj-cyan), rgba(18,180,214,0.15));
}
.viaje-panel-num{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.18em;
  color:var(--vj-cyan); display:block; margin-bottom:10px;
}
.viaje-panel h3{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(24px, 3vw, 36px); line-height:1.12;
  letter-spacing:-0.015em; margin-bottom:10px;
}
.viaje-panel p{ color:var(--vj-dim); font-size:16.5px; line-height:1.6; }

/* --- lista vertical: fallback sin JS / mobile / reduced-motion --- */
.viaje-lista{
  position:relative; z-index:2;
  padding:44px 0 96px;
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
}
.viaje-lista-item{
  border:1px solid var(--vj-line); border-radius:var(--radius-md);
  background:rgba(255,255,255,0.04); padding:24px 22px;
}
.viaje-lista-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px;
  background:rgba(18,180,214,0.12); color:var(--vj-cyan);
  margin-bottom:14px;
}
.viaje-lista-ico svg{ width:24px; height:24px; }
.viaje-lista-item > span:not(.viaje-lista-ico){
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.16em;
  color:var(--vj-cyan); display:block; margin-bottom:10px;
}
.viaje-lista-item h3{
  font-family:var(--f-display); font-weight:700; font-size:19px;
  margin-bottom:8px; letter-spacing:-0.01em;
}
.viaje-lista-item p{ color:var(--vj-dim); font-size:15px; }

/* =========================================================
   2) CONTADORES
   ========================================================= */
.counter-strip{
  position:relative; z-index:2;
  display:grid; gap:18px; padding:0 0 210px;   /* despeja el degradado de salida (190px) */
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
}
.counter-item{
  border-top:2px solid var(--vj-line); padding-top:18px;
}
.counter-num{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(34px, 4.6vw, 54px); line-height:1;
  letter-spacing:-0.03em;
  background:linear-gradient(120deg, #fff 20%, var(--vj-light));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.counter-num .u{ font-size:.5em; margin-left:2px; letter-spacing:0; }
.counter-item p{ color:var(--vj-dim); font-size:14.5px; margin-top:8px; }

/* =========================================================
   3) MARQUESINA
   (El cursor personalizado se removió: ver la nota en cinematic.js)
   ========================================================= */
.marquee{
  overflow:hidden; border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--bg-soft); padding:15px 0;
}
.marquee-inner{
  display:flex; width:max-content;
  animation:mqSlide 42s linear infinite;
  will-change:transform;
}
.marquee:hover .marquee-inner{ animation-play-state:paused; }
/* fuera de pantalla no tiene sentido gastar CPU animándola (lo marca cinematic.js) */
.marquee.is-fuera .marquee-inner{ animation-play-state:paused; }
.marquee span{
  font-family:var(--f-display); font-weight:700; font-size:15px;
  letter-spacing:.02em; color:var(--navy); opacity:.62;
  padding:0 22px; white-space:nowrap;
  display:inline-flex; align-items:center; gap:22px;
}
.marquee span::after{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--cyan); opacity:.75;
}
@keyframes mqSlide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.marquee-dark{ background:var(--navy); border-color:rgba(255,255,255,0.10); }
.marquee-dark span{ color:#fff; opacity:.55; }

/* =========================================================
   5) MEJORAS DE SCROLL / PARALLAX / HOVER
   ========================================================= */
.parallax-y{ will-change:transform; }

/* tarjetas de categoría: el brillo sigue al mouse */
.category-card{ position:relative; overflow:hidden; }
.category-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
             rgba(32,89,232,0.10), transparent 62%);
  opacity:0; transition:opacity .3s ease;
}
.category-card:hover::after{ opacity:1; }

/* barra de progreso de lectura */
.read-bar{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:60;
  background:linear-gradient(90deg, var(--blue), var(--cyan));
  transition:width .1s linear; pointer-events:none;
}

/* títulos que entran palabra por palabra */
.split-line{ display:block; overflow:hidden; }
.split-line > span{
  display:inline-block;
  transform:translateY(100%);
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.is-visible .split-line > span{ transform:none; }
.split-line:nth-child(2) > span{ transition-delay:.09s; }

/* =========================================================
   6) RESPONSIVE
   ========================================================= */
@media (max-width: 980px){
  /* área táctil mínima recomendada: 44px. El botón del header quedaba en 42. */
  .btn{ min-height:44px; }

  /* en mobile el degradado de entrada/salida se achica: si no, se come
     media pantalla de un scroll que ya es más largo */
  .viaje-fade{ height:120px; }
  .viaje-intro{ padding:126px 0 0; }
  .viaje-intro h2{ font-size:clamp(27px, 7vw, 40px); }
  .viaje-intro p{ font-size:16px; }
  .viaje-hint{ margin-top:20px; font-size:12px; }
  .viaje-lista{ padding:36px 0 56px; gap:16px; }
  .counter-strip{ padding-bottom:140px; gap:22px; }
  .counter-num{ font-size:clamp(30px, 9vw, 44px); }
}
@media (max-width: 560px){
  .viaje-lista{ grid-template-columns:1fr; }
  .viaje-lista-item{ padding:20px 18px; }
  .viaje-lista-ico{ width:40px; height:40px; margin-bottom:12px; }
  .counter-strip{ grid-template-columns:1fr 1fr; }
  .marquee span{ font-size:13px; padding:0 14px; }
  .marquee span::after{ width:5px; height:5px; }
}

/* =========================================================
   7) ACCESIBILIDAD — respetamos prefers-reduced-motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .viaje-track{ display:none !important; }
  .viaje-lista{ display:grid !important; }
  .marquee-inner{ animation:none; }
  .viaje-hint svg{ animation:none; }
  .split-line > span{ transform:none; transition:none; }
}


/* =========================================================
   8) EL VIAJE — VERSIÓN MOBILE ANIMADA
   Línea de tiempo vertical. Reemplaza a la lista plana.

   TODO lo de este bloque vive dentro de @media (max-width:980px),
   así que el escritorio no se entera de que existe. Ahí sigue
   mandando .viaje-track y la regla
   html.is-cinematic .viaje-lista{display:none} la oculta igual.

   Criterio de rendimiento: cero listeners de scroll. Cada etapa se
   anima sola cuando entra en pantalla (IntersectionObserver) y las
   animaciones en bucle arrancan PAUSADAS: solo corren mientras la
   etapa está a la vista. Se animan únicamente transform y opacity.
   ========================================================= */
@media (max-width: 980px){

  .viaje-mobile{
    display:block;              /* mata la grilla de la lista vieja */
    padding:26px 0 64px;
    position:relative;
  }

  .vm-etapa{
    position:relative;
    padding:0 0 40px 46px;      /* 46px = carril de la línea de tiempo */
    opacity:0;
    transform:translateY(26px);
    transition:opacity .6s ease, transform .7s cubic-bezier(.16,1,.3,1);
  }
  .vm-etapa.is-on{ opacity:1; transform:none; }

  /* --- carril y nodo --- */
  .vm-linea{
    position:absolute; left:13px; top:20px; bottom:-4px; width:2px;
    background:rgba(120,164,224,0.20); border-radius:2px; overflow:hidden;
  }
  .vm-ultima .vm-linea{ display:none; }
  .vm-linea i{
    position:absolute; inset:0; display:block;
    background:linear-gradient(180deg, var(--vj-cyan), rgba(18,180,214,0.25));
    transform:scaleY(0); transform-origin:top;
    transition:transform .9s cubic-bezier(.16,1,.3,1) .15s;
  }
  .vm-etapa.is-on .vm-linea i{ transform:scaleY(1); }

  .vm-nodo{
    position:absolute; left:6px; top:14px;
    width:16px; height:16px; border-radius:50%;
    background:var(--vj-bg); border:2px solid rgba(120,164,224,0.45);
    transition:background .45s ease, border-color .45s ease, box-shadow .45s ease;
  }
  .vm-etapa.is-on .vm-nodo{
    background:var(--vj-cyan); border-color:var(--vj-cyan);
    box-shadow:0 0 0 5px rgba(18,180,214,0.16), 0 0 16px rgba(18,180,214,0.7);
  }

  /* --- mini escena --- */
  .vm-escena{
    border:1px solid var(--vj-line); border-radius:var(--radius-md);
    background:linear-gradient(160deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015));
    padding:10px 12px; margin-bottom:16px; overflow:hidden;
  }
  .vm-escena svg{ width:100%; height:auto; display:block; }

  /* --- texto --- */
  .vm-num{
    font-family:var(--f-mono); font-size:11px; letter-spacing:.16em;
    color:var(--vj-cyan); display:block; margin-bottom:8px;
  }
  .vm-txt h3{
    font-family:var(--f-display); font-weight:700;
    font-size:20px; line-height:1.2; letter-spacing:-0.01em;
    margin-bottom:8px;
  }
  .vm-txt p{ color:var(--vj-dim); font-size:15px; line-height:1.55; }

  /* =======================================================
     ANIMACIONES DE CADA ESCENA
     Pausadas por defecto; corren solo con .is-on.
     ======================================================= */
  .vm-etapa svg [class^="vm-"]{ animation-play-state:paused; }
  .vm-etapa.is-on svg [class^="vm-"]{ animation-play-state:running; }

  /* 01 — cajas avanzando por la cinta + humo */
  .vm-caja{
    animation:vmCinta 4.2s linear infinite;
    animation-delay:calc(var(--i, 0) * -1.4s);
    will-change:transform;
  }
  @keyframes vmCinta{
    from{ transform:translateX(64px); opacity:0; }
    8%  { opacity:1; }
    92% { opacity:1; }
    to  { transform:translateX(190px); opacity:0; }
  }
  .vm-humo circle{ fill:#6BB6F5; animation:vmHumo 3.4s ease-out infinite; }
  .vm-humo circle:nth-child(2){ animation-delay:.5s; }
  .vm-humo circle:nth-child(3){ animation-delay:1s; }
  @keyframes vmHumo{
    from{ opacity:.30; transform:translateY(6px) scale(.7); }
    to  { opacity:0;   transform:translateY(-16px) scale(1.25); }
  }

  /* 02 — las cargas caen dentro del contenedor, una por una */
  .vm-c{
    animation:vmCae .7s cubic-bezier(.3,1.4,.5,1) both;
    animation-delay:calc(.25s + var(--i) * .16s);
  }
  @keyframes vmCae{
    from{ transform:translateY(-34px); opacity:0; }
    to  { transform:none; opacity:1; }
  }

  /* 03 — el buque cabecea y el agua corre */
  .vm-barco{ animation:vmBoya 3.6s ease-in-out infinite; will-change:transform; }
  @keyframes vmBoya{
    0%,100%{ transform:translateY(0) rotate(-.6deg); }
    50%    { transform:translateY(-4px) rotate(.6deg); }
  }
  .vm-olas{ animation:vmOla 3.2s linear infinite; will-change:transform; }
  @keyframes vmOla{ from{ transform:translateX(0); } to{ transform:translateX(52px); } }

  /* 04 — la grúa baja la carga y aparece el sello */
  .vm-grua{ animation:vmBaja 1.1s cubic-bezier(.4,0,.2,1) both .2s; }
  @keyframes vmBaja{
    from{ transform:translateY(-26px); opacity:0; }
    to  { transform:none; opacity:1; }
  }
  .vm-sello{ animation:vmSello .6s cubic-bezier(.3,1.5,.5,1) both 1.05s; }
  @keyframes vmSello{
    from{ transform:scale(.2) rotate(-14deg); opacity:0; }
    to  { transform:none; opacity:1; }
  }

  /* 05 — el camión llega y aparece la caja descargada */
  .vm-camion{ animation:vmLlega 1s cubic-bezier(.2,.9,.3,1) both .1s; }
  @keyframes vmLlega{
    from{ transform:translateX(78px); opacity:0; }
    to  { transform:none; opacity:1; }
  }
  .vm-entrega{ animation:vmSuelta .55s cubic-bezier(.3,1.5,.5,1) both .95s; }
  @keyframes vmSuelta{
    from{ transform:translateY(-22px); opacity:0; }
    to  { transform:none; opacity:1; }
  }
}

@media (max-width: 980px) and (prefers-reduced-motion: reduce){
  /* sin movimiento: todo visible de una, sin animar nada */
  .vm-etapa{ opacity:1; transform:none; transition:none; }
  .vm-linea i{ transform:scaleY(1); transition:none; }
  .vm-etapa svg [class^="vm-"]{ animation:none !important; opacity:1; transform:none; }
}

/* =========================================================
   9) MAQUINARIA — foto hero + galería + lista de palabras clave
   Usa las mismas clases utilitarias del resto del sitio
   (.reveal, .stagger, .tilt-card, .parallax-y) para heredar
   las animaciones ya existentes sin tocar cinematic.js.
   ========================================================= */
.maq-hero-photo{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lift);
  aspect-ratio:4/3;
}
.maq-hero-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.maq-hero-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,26,59,0) 55%, rgba(8,26,59,0.35) 100%);
  pointer-events:none;
}

.maq-gallery{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
  margin:36px 0 8px;
}
.maq-gallery-item{
  position:relative; border-radius:var(--radius-md); overflow:hidden;
  aspect-ratio:16/10; box-shadow:var(--shadow-soft);
}
.maq-gallery-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.maq-gallery-item:hover img{ transform:scale(1.05); }
.maq-gallery-item span{
  position:absolute; left:14px; bottom:12px;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.08em;
  color:#fff; background:rgba(8,26,59,0.55); backdrop-filter:blur(3px);
  padding:5px 10px; border-radius:20px;
}

.maq-cat-block{ margin-top:44px; }
.maq-cat-block h3{
  font-family:var(--f-display); font-weight:800; font-size:19px;
  color:var(--navy); margin-bottom:14px; letter-spacing:-0.01em;
}
.maq-cat-block ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:8px 20px;
}
.maq-cat-block li{
  font-size:14.5px; color:var(--text-muted); line-height:1.6;
  padding-left:16px; position:relative;
}
.maq-cat-block li::before{
  content:""; position:absolute; left:0; top:9px;
  width:6px; height:6px; border-radius:50%; background:var(--cyan);
}

/* lista larga de cola larga para SEO: deliberadamente chica y discreta,
   no compite visualmente con el contenido principal */
.keyword-cloud{
  margin-top:40px; padding-top:24px; border-top:1px solid var(--line);
}
.keyword-cloud p{
  font-size:12.5px; line-height:1.9; color:var(--text-faint);
  max-width:none;
}

.fine-print{
  margin-top:18px; font-size:12px; line-height:1.6; color:var(--text-faint);
  max-width:60ch;
}

@media (max-width: 720px){
  .maq-gallery{ grid-template-columns:1fr; }
  .maq-cat-block ul{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 480px){
  .maq-cat-block ul{ grid-template-columns:1fr; }
}