/* ==========================================================================
   Galindo Gutiérrez · «La carga en movimiento» · empaque.css
   Acto 2 · Preparación: texto, verbos, dibujo de la caja e hilo de entrada y salida.
   ========================================================================== */

.empaque {
  position: relative;
  background: var(--hielo);
  color: var(--marino);
  --foco: var(--marino);
  --giro-y: 6.5rem;
  --costura-x: 60vw;
  --costura-y: 40vh;
}
.empaque__escena {
  position: relative;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(4rem, 12vw, 8rem) var(--margen) clamp(2rem, 6vw, 4rem) var(--texto-x);
}
.empaque__titulo {
  max-width: 13ch;
  margin: 0 0 clamp(1.5rem, 4.5vh, 3.25rem);
  font: 700 clamp(1.5rem, 2.5vw, 2.375rem) / 1.05 var(--titular);
  letter-spacing: -0.01em;
}

.verbos {
  display: grid;
  gap: clamp(0.9rem, 2.4vh, 1.6rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.verbo {
  position: relative;
  display: grid;
  gap: 0.25rem;
}
.verbo__palabra {
  font: 700 clamp(2.5rem, 5.2vw, 4.75rem) / 0.95 var(--titular);
  letter-spacing: -0.022em;
}
.verbo__apoyo {
  color: var(--acero);
  font-size: 1.0625rem;
  line-height: 1.3;
}

.empaque__figura {
  min-width: 0;
  margin: 0;
}
.escena-caja {
  display: block;
  width: 100%;
  height: auto;
  max-height: 82vh;
  --u: 0.8;
}

/* Dibujo de la escena: trazo marino, cartón en tintes de la paleta, naranja solo en cinta, sello y ruta. */
.caja__base {
  fill: none;
  stroke: var(--marino);
  stroke-width: 2.6;
  stroke-linejoin: round;
  stroke-dasharray: 1;
}
.caja__piso {
  fill: var(--carton-fondo);
}
.escena-caja .caja__sombra {
  fill: rgb(59 107 142 / 0.16);
  stroke: none;
}
.caja__dentro,
.caja__cara,
.solapa rect,
.bulto rect {
  stroke: var(--marino);
  stroke-width: 2.6;
  stroke-linejoin: round;
}
.caja__dentro--a {
  fill: var(--carton-dentro);
}
.caja__dentro--b {
  fill: var(--carton-fondo);
}
.caja__cara--izq {
  fill: var(--carton-izq);
}
.caja__cara--der {
  fill: var(--carton-der);
}
.caja__marca {
  fill: none;
  stroke: var(--acero);
  stroke-width: 3;
  stroke-linejoin: round;
}
.solapa rect {
  fill: var(--carton-tapa);
}
.solapa.es-interior rect {
  fill: var(--carton-dentro);
}
.cinta {
  fill: var(--naranja);
  stroke: var(--marino);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.etiqueta__papel {
  fill: var(--blanco);
  stroke: var(--marino);
  stroke-width: 2.2;
  stroke-linejoin: round;
}
.etiqueta__sello {
  fill: var(--naranja);
}
.etiqueta__linea {
  fill: none;
  stroke: var(--acero);
  stroke-width: 3;
}
.bulto__cara--izq {
  fill: var(--carton-izq);
}
.bulto__cara--der {
  fill: var(--carton-der);
}
.bulto__tapa {
  fill: var(--carton-tapa);
}
.bulto rect.bulto__cinta {
  fill: var(--acero-claro);
  stroke-width: 1.4;
}
.ruta {
  fill: none;
  stroke: var(--naranja);
  stroke-width: calc(2px / var(--u));
  stroke-linejoin: miter;
  stroke-dasharray: 1;
}

@media (min-width: 60em) {
  .empaque__escena {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
  }
}

/* — Empaque con movimiento: escena fijada — */
.motion .empaque {
  height: calc(100vh + var(--empaque-recorrido));
  height: calc(100lvh + var(--empaque-recorrido));
}
.motion .empaque__escena {
  position: sticky;
  top: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.25rem;
  height: 100vh;
  height: 100lvh;
  /* La parte baja queda libre de dibujo cuando la barra del navegador móvil está visible. */
  padding: calc(var(--cabecera-h) + 0.9rem) 0 calc(100lvh - 100svh) var(--texto-x);
  overflow: clip;
}
.motion .empaque__texto {
  padding-right: var(--margen);
}
.motion .empaque__titulo {
  max-width: none;
  margin-bottom: 0.8rem;
  font-size: clamp(1.375rem, 5.6vw, 1.75rem);
}
.motion .empaque__figura {
  display: flex;
  align-self: stretch;
  min-height: 0;
  margin-left: calc(-1 * var(--texto-x));
}
.motion .escena-caja {
  align-self: center;
  width: 100%;
  height: auto;
  max-height: 100%;
  aspect-ratio: 800 / 820;
}
@media (max-width: 34em) {
  /* En teléfono el dibujo se reduce a menos de la mitad: el trazo se engrosa para no adelgazar en pantalla. */
  .caja__base,
  .caja__dentro,
  .caja__cara,
  .solapa rect,
  .bulto rect {
    stroke-width: 3.6;
  }
  .caja__marca,
  .etiqueta__linea {
    stroke-width: 4;
  }
}

/* Los tres verbos: por venir (acero) → activo (marino + sello naranja + apoyo) → hecho (marino). */
.motion .verbos {
  position: relative;
  display: flex;
  gap: 0 clamp(0.6rem, 3.4vw, 1.1rem);
  padding-bottom: 1.7rem;
}
.motion .verbo {
  position: static;
  display: block;
}
.motion .verbo__palabra {
  position: relative;
  display: inline-block;
  padding-bottom: 0.4rem;
  color: var(--acero);
  font-size: clamp(1rem, 5.25vw, 1.875rem);
  letter-spacing: -0.012em;
  transition: color var(--micro) var(--estado);
}
.motion .verbo__palabra::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.25em;
  bottom: 0;
  height: 3px;
  background: var(--naranja);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 240ms var(--salida);
}
.motion .verbo.es-activo .verbo__palabra,
.motion .verbo.es-hecho .verbo__palabra {
  color: var(--marino);
}
.motion .verbo.es-activo .verbo__palabra::after {
  transform: scaleX(1);
}
.motion .verbo__apoyo {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 0.9375rem;
  opacity: 0;
  transform: translateY(0.3rem);
  transition: opacity var(--micro) var(--estado), transform var(--micro) var(--salida);
}
.motion .verbo.es-activo .verbo__apoyo {
  opacity: 1;
  transform: none;
}

/* Hilo de entrada: baja por el riel, cruza y cae hasta el punto donde nacerá la cinta. */
.hilo--entrada [data-tramo="riel"] {
  left: var(--riel-x);
  top: 0;
  width: var(--hilo);
  height: var(--giro-y);
  transform-origin: 50% 100%;
}
.hilo--entrada [data-tramo="riel"] > i {
  transform-origin: 50% 0;
}
.hilo--entrada [data-tramo="cruza"] {
  left: var(--riel-x);
  top: calc(var(--giro-y) - var(--hilo));
  width: calc(var(--costura-x) - var(--riel-x) + 1px);
  height: var(--hilo);
  transform-origin: 100% 50%;
}
.hilo--entrada [data-tramo="cruza"] > i {
  transform-origin: 0 50%;
}
.hilo--entrada [data-tramo="baja"] {
  left: calc(var(--costura-x) - 1px);
  top: calc(var(--giro-y) - var(--hilo));
  width: var(--hilo);
  height: calc(var(--costura-y) - var(--giro-y) + var(--hilo));
  transform-origin: 50% 100%;
}
.hilo--entrada [data-tramo="baja"] > i {
  transform-origin: 50% 0;
}

/* Hilo de salida: prolonga la ruta desde el borde del dibujo hasta el final de la escena. */
.hilo--salida [data-tramo="sale"] {
  left: calc(var(--salida-x, 64vw) - 1px);
  top: var(--salida-y, 100%);
  bottom: 0;
  width: var(--hilo);
}
.hilo--salida [data-tramo="sale"] > i {
  transform-origin: 50% 0;
}

@media (min-width: 60em) {
  .motion .empaque__escena {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
  }
  .motion .empaque__texto {
    align-self: center;
    padding-right: 0;
  }
  .motion .empaque__titulo {
    max-width: 13ch;
    margin-bottom: clamp(1.5rem, 4.5vh, 3.25rem);
    font-size: clamp(1.5rem, 2.5vw, 2.375rem);
  }
  .motion .empaque__figura {
    margin-left: 0;
  }
  .motion .escena-caja {
    align-self: stretch;
    height: 100%;
    aspect-ratio: auto;
  }
  .motion .verbos {
    display: grid;
    gap: clamp(0.9rem, 2.4vh, 1.6rem);
    padding-bottom: 0;
  }
  .motion .verbo {
    position: relative;
    display: grid;
    min-height: calc(clamp(2.5rem, 5.2vw, 4.75rem) * 0.95 + 1.75rem);
    align-content: start;
  }
  .motion .verbo__palabra {
    padding-bottom: 0;
    font-size: clamp(2.5rem, 5.2vw, 4.75rem);
    letter-spacing: -0.022em;
  }
  /* En escritorio el sello sale del riel hacia el verbo activo. */
  .motion .verbo__palabra::after {
    left: calc(-1 * var(--sangria));
    right: auto;
    top: 0.46em;
    bottom: auto;
    width: calc(var(--sangria) - 0.6rem);
  }
  .motion .verbo__apoyo {
    position: static;
    font-size: 1.0625rem;
  }
}