/* ==========================================================================
   "El viaje de tu caja" · recorrido con scroll por actos (solo con SCROLL=1)
   Motor: pgk-scroll (ver tools/NOTICE-pgk-scroll.md). Marca: rojo, blanco,
   celeste, amarillo; sin degradados, el texto va sobre bloques sólidos.
   Sin JS (sin .pgk-scroll-ready) todo se lee en orden y no se oculta nada.
   ========================================================================== */

:root {
  /* El motor usa --pgk-canvas como fondo del body: se alinea con la marca. */
  --pgk-canvas: var(--blanco);
  --pgk-ink: var(--tinta);
  --pgk-accent: var(--rojo);
  --pgk-gutter: clamp(20px, 5vw, 56px);
}

.viaje { position: relative; }

/* ---------------------------------------------------------------- pasaporte */
.viaje-pasaporte { display: none; }
.pgk-scroll-ready .viaje-pasaporte {
  display: block;
  position: fixed; left: 20px; bottom: 20px; z-index: 40;
  width: 214px; padding: 14px 14px 12px;
  background: var(--blanco); border: 2px solid var(--rojo); border-radius: var(--radio-s);
  box-shadow: var(--sombra-2);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.pgk-scroll-ready .viaje-pasaporte.is-visible { opacity: 1; transform: none; }
.viaje-pasaporte img { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; }
.viaje-pasaporte strong { display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--rojo-texto); margin-bottom: 10px; }
.viaje-pasaporte ol { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.viaje-sello {
  aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed var(--celeste-linea);
  display: grid; place-items: center; font-size: 9.5px; font-weight: 600; letter-spacing: .02em; color: var(--tinta-3);
}
.viaje-sello span { transition: transform .3s cubic-bezier(.2, 1.4, .4, 1), color .2s; }
.viaje-sello.is-sellado {
  border: 2px solid var(--rojo); color: var(--rojo-texto); background: #FFF4F4;
  transform: rotate(-12deg);
}
.viaje-sello.is-sellado span { transform: scale(1.08); }
.viaje-pasaporte.is-completo { border-color: var(--wa); }
.viaje-pasaporte.is-completo strong { color: #157A3D; }

/* ---------------------------------------------------------------- acto 1, la caja */
.viaje-caja__stage {
  background: var(--celeste-claro);
  display: grid; gap: 28px; align-content: center;
  padding: 96px var(--pgk-gutter) 48px;
}
.viaje-caja__texto { max-width: 34rem; }
.viaje-caja__texto .titular { margin: 12px 0 18px; }
/* Con el módulo activo las dos líneas comparten sitio: una sustituye a la otra. */
.pgk-scroll-ready .viaje-lineas { display: grid; }
.pgk-scroll-ready .viaje-lineas > * { grid-area: 1 / 1; }
.viaje-linea { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; color: var(--tinta-2); margin-top: 10px; }
.viaje-caja__visual { position: relative; }
.viaje-caja__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio); }
.viaje-prod {
  position: absolute; width: 27%; margin: 0;
  background: var(--blanco); padding: 6px 6px 8px; border-radius: 10px; box-shadow: var(--sombra-2);
}
.viaje-prod img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.viaje-prod--0 { left: -6%; top: 6%; rotate: -6deg; }
.viaje-prod--1 { right: -4%; top: -4%; rotate: 5deg; }
.viaje-prod--2 { left: 10%; bottom: -8%; rotate: 4deg; }
.viaje-prod--3 { right: 6%; bottom: -6%; rotate: -4deg; }

/* Sin JS los productos van en fila bajo la foto, no flotando encima. */
html:not(.pgk-scroll-ready) .viaje-caja__visual { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
html:not(.pgk-scroll-ready) .viaje-caja__foto { grid-column: 1 / -1; }
html:not(.pgk-scroll-ready) .viaje-prod { position: static; width: auto; rotate: 0deg; }

@media (min-width: 960px) {
  .viaje-caja__stage { grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; padding: 72px var(--pgk-gutter); }
}
@media (max-width: 959px) {
  .pgk-scroll-ready .viaje-caja__stage { padding-top: 84px; gap: 22px; }
  .pgk-scroll-ready .viaje-caja__foto img { aspect-ratio: auto; height: 34svh; }
  .viaje-prod { width: 24%; }
}

/* ---------------------------------------------------------------- acto 2, el camino */
.viaje-camino__stage { background: var(--rojo); color: var(--blanco); display: flex; flex-direction: column; justify-content: center; }
.pgk-scroll-ready .viaje-camino__stage { overflow: hidden; }
.viaje-ruta {
  display: flex; align-items: center; gap: 14px;
  padding: 12px var(--pgk-gutter); margin: 72px 0 28px; background: var(--rojo-hondo);
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.viaje-ruta__linea { position: relative; flex: 1; height: 2px; background: rgba(255, 255, 255, .45); }
.viaje-ruta__avion {
  position: absolute; top: 50%; left: calc(var(--pgk-p, 0) * 100%);
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--amarillo); box-shadow: 0 0 0 4px var(--rojo-hondo);
}
.viaje-rail { gap: 22px; padding: 0 var(--pgk-gutter) 64px; align-items: stretch; }
.viaje-camino__intro { flex: 0 0 min(30rem, 80vw); align-self: center; padding-right: 24px; }
.viaje-camino__intro .titular { color: var(--blanco); }
/* Blanco sobre #FF0000 da 4:1; la entradilla va en una placa de rojo hondo
   para llegar a 4,5:1 en texto normal. */
.viaje-camino__intro .entradilla {
  color: var(--blanco); margin-top: 14px; font-size: 18px; font-weight: 500;
  background: var(--rojo-hondo); display: inline-block; padding: 8px 12px; border-radius: 8px;
}
.viaje-estacion {
  flex: 0 0 min(25rem, 78vw); background: var(--blanco); color: var(--tinta);
  border-radius: var(--radio); overflow: hidden; display: flex; flex-direction: column;
}
.viaje-estacion__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.viaje-estacion__num { display: block; padding: 18px 22px 0; font-size: 13px; font-weight: 600; color: var(--rojo-texto); letter-spacing: .08em; }
.viaje-estacion h3 { padding: 2px 22px 0; font-size: 24px; font-weight: 600; line-height: 1.2; }
.viaje-estacion p { padding: 8px 22px 22px; color: var(--tinta-2); font-size: 15.5px; }
html:not(.pgk-scroll-ready) .viaje-rail { flex-wrap: wrap; }

@media (max-width: 959px) {
  .viaje-ruta { margin-top: 76px; margin-bottom: 18px; }
  .pgk-scroll-ready .viaje-estacion__foto img { aspect-ratio: 16 / 9; }
  .viaje-estacion h3 { font-size: 21px; }
}

/* ---------------------------------------------------------------- acto 3, ya está en Lima */
.viaje-llega__stage { background: var(--tinta); }
.viaje-llega__foto img { width: 100%; height: 100%; object-fit: cover; }
.pgk-scroll-ready .viaje-llega__foto { position: absolute; inset: 0; }
html:not(.pgk-scroll-ready) .viaje-llega__foto img { aspect-ratio: 16 / 9; height: auto; }
.viaje-llega__texto {
  position: relative; z-index: 2;
  /* Rojo hondo de la marca: blanco sobre #FF0000 no llega a AA en texto normal. */
  background: var(--rojo-hondo); color: var(--blanco);
  padding: 26px 30px; max-width: 36rem; border-radius: var(--radio);
  margin: 24px var(--pgk-gutter);
}
.pgk-scroll-ready .viaje-llega__texto { position: absolute; left: 0; bottom: clamp(32px, 9vh, 96px); margin: 0 var(--pgk-gutter); }
.viaje-llega__texto h2 { color: var(--blanco); font-size: clamp(34px, 5.4vw, 72px); font-weight: 600; line-height: 1.04; letter-spacing: -.02em; }
.viaje-llega__texto p { margin-top: 12px; font-size: clamp(16px, 1.5vw, 20px); }

/* ---------------------------------------------------------------- acto 4, tu turno */
.viaje-turno { padding: clamp(72px, 12vh, 140px) 0; background: var(--blanco); }
.viaje-turno__grid { display: grid; gap: 28px; justify-items: start; }
/* Verde más oscuro que el botón general: blanco sobre #1FA855 da 3:1. */
.viaje-turno__cta { font-size: 17px; background: #157A3D; border-color: #157A3D; }
.viaje-turno__cta:hover, .viaje-turno__cta:focus-visible { background: #11663A; border-color: #11663A; }
@media (min-width: 960px) {
  .viaje-turno__grid { grid-template-columns: 1.4fr 1fr; align-items: end; }
  .viaje-turno__cta { justify-self: end; }
}

@media (max-width: 599px) {
  .pgk-scroll-ready .viaje-pasaporte { left: 12px; bottom: 12px; width: 168px; padding: 10px; }
  .viaje-pasaporte strong { font-size: 10.5px; margin-bottom: 7px; padding-right: 22px; }
  .viaje-sello { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  /* El raíl sin transform se recorre con scroll horizontal normal: el
     overflow:hidden del escenario no puede taparlo. */
  .pgk-scroll-ready .viaje-camino__stage { overflow-x: auto; overflow-y: hidden; }
  .pgk-scroll-ready .viaje-pasaporte, .viaje-sello span { transition: none; }
  .viaje-sello.is-sellado { transform: none; }
}

/* Móvil en horizontal o pantallas bajas: el acto 1 va en dos columnas y las
   fotos encogen para que el texto quepa entero en un viewport. */
@media (max-height: 520px) and (min-width: 600px) {
  /* Sin altura para el pasaporte: taparía el texto. Se queda solo en pantallas altas. */
  .pgk-scroll-ready .viaje-pasaporte { display: none; }
  .pgk-scroll-ready .viaje-caja__stage { grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; padding: 64px var(--pgk-gutter) 16px; }
  .pgk-scroll-ready .viaje-caja__foto img { aspect-ratio: auto; height: 62svh; }
  .viaje-caja__texto .titular { margin: 6px 0 8px; font-size: clamp(1.4rem, 3.6vw, 2rem); }
  .viaje-linea { font-size: 15px; margin-top: 4px; }
  .viaje-prod { width: 20%; }
  .viaje-ruta { margin: 60px 0 10px; padding-block: 6px; }
  .viaje-camino__intro .titular { font-size: 1.5rem; }
  .viaje-estacion { flex-basis: min(20rem, 40vw); }
  .pgk-scroll-ready .viaje-estacion__foto img { aspect-ratio: 21 / 9; }
  .viaje-estacion h3 { font-size: 18px; padding-top: 0; }
  .viaje-estacion p { font-size: 13.5px; padding-bottom: 12px; }
  .viaje-estacion__num { padding-top: 10px; }
}