/* Portada animada — primera parte (E0 cortina · E1 hero · E2 salida + frase).
   Receta de La Revoltosa adaptada: escena fijada (sticky) mientras el scroll la recorre, palabra
   gigante HTML detrás, dos bolsas que giran 360° (secuencias de cuadros de video real en canvas)
   y la mascota encima. portada.js mueve todo; sin JS o con movimiento reducido queda el estado quieto.
   Las posiciones de reposo de las bolsas (--x, --y, --r) se repiten en portada.js: si cambian
   acá, cambian allá. */

/* Ningún ancestro de la escena fijada puede ser contenedor de scroll (rompe el sticky):
   overflow-x: clip recorta lo que sale por los costados sin crear uno. */
/* 340svh = 240svh de recorrido fijado: la animación va a la mitad de velocidad que el scroll (pedido). */
.portada { position: relative; height: 340svh; overflow-x: clip; }
.portada-escena {
  position: sticky; top: var(--alto-cabecera);
  height: calc(100svh - var(--alto-cabecera)); min-height: 30rem;
  display: grid; grid-template-rows: 1fr auto;
}
.portada-escenario { position: relative; display: grid; place-items: center; isolation: isolate; }

/* Palabra gigante: decoración (::before), detrás de todo. */
/* Sin z-index propio: así la mascota (adentro) puede quedar por encima de las bolsas. */
.portada-palabra {
  position: relative;
  font: 800 clamp(4rem, min(17vw, 26svh), 16rem)/.8 var(--display); letter-spacing: -.06em;
}
.portada-palabra .palabra { font: inherit; letter-spacing: inherit; position: static; z-index: auto; will-change: transform; }

/* Mascota parada sobre la "e" final. Mide en em de la palabra: crece y se achica con ella. */
.mascota {
  position: absolute; z-index: 4; left: 88%; bottom: 47%;
  width: .62em; height: .66em; translate: -50% 0; transform-origin: 50% 100%;
  pointer-events: none; will-change: transform;
}
.mascota-cuerpo { position: absolute; inset: 0; transform-origin: 50% 100%; }
.mascota-pose {
  position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none;
  translate: -50% 0; transform-origin: 50% 100%; visibility: hidden;
}
.mascota[data-pose="atrapa"] .mascota-pose[data-pose="atrapa"],
.mascota[data-pose="abraza"] .mascota-pose[data-pose="abraza"],
.mascota[data-pose="salta"] .mascota-pose[data-pose="salta"],
.mascota[data-pose="montado"] .mascota-pose[data-pose="montado"] { visibility: visible; }

/* Bolsas: centradas en el escenario y corridas a su lugar. */
.bolsas { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.bolsa {
  position: absolute; left: 50%; top: 50%; width: auto; max-width: none; height: var(--alto);
  transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r));
  filter: drop-shadow(0 1.4rem 1.6rem rgb(43 20 24 / .16));
  will-change: transform;
}
.bolsa--cristalizado { --alto: clamp(13rem, min(42svh, 72vw), 32rem); --x: 7vw;  --y: 12svh; --r: -21deg; z-index: 2; }
.bolsa--caramelos    { --alto: clamp(13.5rem, min(44svh, 75vw), 33.5rem); --x: -15vw; --y: 9svh; --r: 12.6deg; z-index: 1; }
@media (max-width: 639px) {
  /* En móvil bajan un poco para dejar ver la palabra (y a la mascota) arriba. */
  .bolsa--cristalizado { --alto: clamp(10rem, min(31svh, 56vw), 18rem); --x: 18vw; --y: 9svh; }
  .bolsa--caramelos    { --alto: clamp(10.5rem, min(32.5svh, 58vw), 19rem); --x: -19vw; --y: 6svh; }
  .portada-palabra { align-self: start; margin-top: 7svh; }
  .mascota { width: .95em; height: 1em; left: 84%; bottom: 40%; }
}

/* Cubitos y caramelos que caen despacio, entre la palabra y las bolsas. */
.simbolos { position: absolute; width: 0; height: 0; overflow: hidden; }
.particulas { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; display: none; }
.particula { position: absolute; left: var(--x); top: -12%; width: calc(2.6rem * var(--s)); aspect-ratio: 1; }
.particula--barra { width: calc(3.8rem * var(--s)); aspect-ratio: 2; }
.cae { display: none; position: absolute; left: 0; top: 0; z-index: 5; width: 3.4rem; aspect-ratio: 2; pointer-events: none; }

/* Título y accesos, abajo de la escena. */
.portada-texto { position: relative; z-index: 6; text-align: center; padding: 0 var(--margen) clamp(1.25rem, 3.5svh, 2.5rem); }
.portada-texto h1 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); max-width: 24ch; margin-inline: auto; }
.portada-bajada { max-width: 50ch; margin: .45rem auto 0; color: var(--tinta-suave); font-size: 1.0625rem; }
.portada-texto .stickers { margin-top: clamp(.9rem, 2.2svh, 1.4rem); }
@media (max-width: 559px) {
  .portada-bajada { display: none; }
  .portada-texto .sticker { min-height: 2.9rem; padding-block: .55rem; }
}

/* Frase de la escena 2: con JS se enciende letra por letra con el scroll. */
.frase { min-height: 85svh; display: grid; place-items: center; padding: 4rem var(--margen); }
.frase-texto {
  font-size: clamp(2.6rem, 7.5vw, 6.5rem); line-height: 1.02; letter-spacing: -.035em;
  max-width: 12ch; color: var(--vino);
}
.frase-palabra { display: inline-block; white-space: nowrap; }
.frase-letra { opacity: var(--o, 1); }
.oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Cortina de carga (E0): la mascota asoma desde abajo, se mece y salta; la cortina sube.
   Solo CSS, así no depende de que el JS llegue; no bloquea clics. */
.cortina { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .particulas { display: block; }
  .particula { animation: cae var(--t) linear var(--d) infinite; }
  @keyframes cae {
    from { transform: translateY(0) rotate(0deg) scale(var(--s)); }
    to   { transform: translateY(125svh) rotate(var(--g)) scale(var(--s)); }
  }
  .mascota-pose { animation: respira 2.6s ease-in-out infinite alternate; }
  @keyframes respira { to { scale: 1.015 .975; } }

  .cortina {
    display: grid; place-items: end center; overflow: hidden;
    position: fixed; inset: 0; z-index: 900; background: var(--vino); pointer-events: none;
    animation: cortina-sube .7s cubic-bezier(.76, 0, .24, 1) 1.35s forwards;
  }
  .cortina img {
    width: clamp(8rem, 22vw, 13rem); height: auto;
    translate: 0 62%; transform-origin: 50% 100%;
    animation: asoma .55s var(--sale) .1s both, mece .45s ease-in-out .65s 2 alternate, salta-fuera .5s cubic-bezier(.5, 0, .75, 0) 1.2s forwards;
  }
  @keyframes asoma { from { translate: 0 105%; } to { translate: 0 62%; } }
  @keyframes mece { from { rotate: -6deg; } to { rotate: 6deg; } }
  @keyframes salta-fuera { from { translate: 0 62%; } to { translate: 0 -120svh; } }
  @keyframes cortina-sube { to { transform: translateY(-100%); visibility: hidden; } }
}

/* Nosotros en la portada: la frase abre la sección; después la historia y el mosaico de fotos. */
.nosotros--portada { padding-top: 0; }
.nosotros--portada .frase { padding-bottom: clamp(1rem, 3vw, 2rem); }
.nosotros--portada .antetitulo { margin-bottom: 1rem; }
.nosotros--portada .nosotros-cuerpo { margin-top: 0; }
.portada-texto .invitacion { margin-top: clamp(.5rem, 1.5svh, 1rem); padding-block: .25rem; }
@media (max-width: 559px) { .portada-texto .invitacion { display: none; } }

/* Las fotos del mosaico crecen y se enderezan al entrar (solo la imagen: el pie queda quieto y legible). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .nosotros--portada .mosaico img {
      animation: foto-entra linear both; animation-timeline: view(); animation-range: entry 0% cover 40%;
    }
    .nosotros--portada .mosaico li:nth-child(even) img { --giro-foto: 3deg; }
    @keyframes foto-entra {
      from { scale: .82; rotate: var(--giro-foto, -3deg); }
      to { scale: 1; rotate: 0deg; }
    }
  }
}

/* Centro de la escena mientras las bolsas bajan: foto, "100 % natural" y sellos.
   Solo con JS (lo enciende portada.js con el scroll); sin JS o con movimiento reducido no está. */
.portada-centro, .etiqueta-bolsa { display: none; }
.portada-viva .portada-centro {
  display: grid; justify-items: center; gap: .6rem; text-align: center;
  position: absolute; z-index: 3; left: 50%; top: 50%; width: min(30rem, 38vw);
  opacity: 0; pointer-events: none; will-change: transform, opacity;
}
.portada-centro img {
  width: clamp(8rem, 13vw, 12.5rem); aspect-ratio: 1; height: auto; object-fit: cover;
  border-radius: 50%; box-shadow: 0 0 0 .4rem var(--amarillo);
}
.portada-centro-titulo { margin: .4rem 0 0; font: 800 clamp(1.7rem, 3.2vw, 2.8rem)/1 var(--display); letter-spacing: -.03em; color: var(--vino); }
.portada-centro ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.portada-centro li { padding: .35rem .8rem; border-radius: 999px; background: var(--amarillo-claro); font: 700 .95rem/1.1 var(--texto); color: var(--tinta); }
.portada-centro li:nth-child(2) { background: var(--lila-claro); }
.portada-viva .etiqueta-bolsa {
  display: block; position: absolute; z-index: 3; left: 0; top: 0; margin: 0;
  padding: .45rem 1rem; border-radius: 999px; white-space: nowrap;
  font: 800 1.05rem/1 var(--display); letter-spacing: -.01em; opacity: 0; pointer-events: none;
}
.etiqueta-bolsa span { font: 700 .85rem/1 var(--texto); margin-left: .3rem; opacity: .85; }
.etiqueta-bolsa--caramelos { background: var(--lila); color: var(--tinta); }
.etiqueta-bolsa--cristalizado { background: var(--vino); color: #fff; }
@media (max-width: 639px) {
  .portada-viva .portada-centro { top: 30%; width: 72vw; }
  .portada-centro img { width: 6.5rem; }
  .portada-viva .etiqueta-bolsa { font-size: .9rem; padding: .35rem .7rem; }
}
.portada-centro-bajada { margin: .5rem 0 0; font: 600 1.15rem/1.35 var(--texto); color: var(--tinta-suave); }
.portada-centro-usos { margin: .4rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; width: 100%; }
.portada-centro-usos div { padding: .8rem .6rem; border-radius: 1.1rem; box-shadow: inset 0 0 0 2px var(--filete); background: #fff; }
.portada-centro-usos dt { font: 800 1rem/1.1 var(--display); color: var(--vino); }
.portada-centro-usos dd { margin: .3rem 0 0; font: 500 .92rem/1.25 var(--texto); color: var(--tinta); }
@media (max-width: 639px) {
  .portada-centro-bajada { font-size: 1rem; }
  .portada-centro-usos { display: none; }
}

/* ── Escenas de la mascota (E3–E5): sección fijada, el scroll avanza el video (escenas.js). ── */
.escena-uso { position: relative; height: 420svh; }   /* 320svh de recorrido: mitad de velocidad */
.escena-uso-fija {
  position: sticky; top: var(--alto-cabecera); height: calc(100svh - var(--alto-cabecera));
  display: grid; align-items: center; gap: clamp(1rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  padding: 0 var(--margen); max-width: 84rem; margin-inline: auto;
}
.escena-uso-lienzo { position: relative; display: grid; place-items: center; }
.escena-uso-lienzo::before {             /* círculo lila detrás de la mascota */
  content: ''; position: absolute; width: 82%; aspect-ratio: 1; border-radius: 50%;
  background: var(--lila-claro);
}
.escena-uso-lienzo img, .escena-uso-lienzo canvas {
  position: relative; width: min(100%, 72svh); height: auto; aspect-ratio: 1;
}
.escena-uso-texto { display: grid; }
.escena-uso-texto > * { grid-area: 1 / 1; align-self: center; }
.escena-uso-antes {
  margin: 0; font: 800 clamp(1.8rem, 4vw, 3.4rem)/1.05 var(--display); letter-spacing: -.03em; color: var(--tinta-suave);
  opacity: clamp(0, calc(1 - (var(--avance, 1) - .3) * 6), 1);
}
.escena-uso-despues { opacity: clamp(0, calc((var(--avance, 1) - .55) * 5), 1); translate: 0 calc((1 - clamp(0, calc((var(--avance, 1) - .55) * 5), 1)) * 1.5rem); }
.escena-uso-despues h2 { font-size: clamp(2rem, 4.6vw, 3.9rem); max-width: 13ch; margin-top: .6rem; color: var(--vino); }
.escena-uso-despues p:last-child { margin: 1rem 0 0; max-width: 40ch; font-size: 1.15rem; color: var(--tinta-suave); }
@media (max-width: 767px) {
  .escena-uso-fija { grid-template-columns: 1fr; align-content: center; gap: .5rem; }
  .escena-uso-lienzo img, .escena-uso-lienzo canvas { width: min(100%, 46svh); }
  .escena-uso-texto { text-align: center; justify-items: center; }
  .escena-uso-despues h2 { margin-inline: auto; }
  .escena-uso-despues p:last-child { margin-inline: auto; font-size: 1rem; }
}
/* Sin movimiento: la escena no se fija, se ve el final con su texto. */
@media (prefers-reduced-motion: reduce) {
  .escena-uso { height: auto; padding: 3rem 0; }
  .escena-uso-fija { position: static; height: auto; }
  .escena-uso-antes { display: none; }
}

/* Escritorio (desde 640 px): el texto del hero se compacta para que
   las bolsas, que van más abajo de la palabra, no le caigan encima al título. */
@media (min-width: 640px) {
  .portada-bajada { display: none; }
  .portada-texto .invitacion { margin-top: .35rem; padding-block: .1rem; font-size: .9rem; gap: 0; }
  .portada-texto .invitacion::after { font-size: 1.1rem; }
  .portada-texto h1 { font-size: clamp(1.4rem, 2.6vw, 2rem); max-width: none; }
  .portada-texto .stickers { margin-top: .7rem; }
  .portada-texto .sticker { min-height: 2.75rem; padding: .5rem 1.05rem; font-size: 1.02rem; }
  .bolsa--cristalizado { --alto: clamp(12rem, 40svh, 30rem); --y: 10svh; }
  .bolsa--caramelos    { --alto: clamp(12.5rem, 42svh, 31.5rem); --y: 7svh; }
}
@media (min-width: 1000px) { .portada-texto .stickers { flex-wrap: nowrap; } }

/* E4 · En el viaje: ventana del bus con el paisaje en tres capas que pasan con el scroll
   (parallax: la de cerca se mueve más). La mascota (video) va delante, sentada. */
.viaje .escena-uso-lienzo::before { content: none; }
.ventana {
  position: absolute; inset: 10% 0 30% 40%; overflow: hidden; transform-origin: 50% 50%;
  border-radius: calc(2rem * (1 - var(--z, 0)));
  background: var(--amarillo-claro);
  box-shadow: 0 0 0 calc(.9rem * (1 - var(--z, 0))) var(--vino), 0 0 0 calc(1.15rem * (1 - var(--z, 0))) var(--vino-hondo);
}
.ventana::before {                       /* sol */
  content: ''; position: absolute; width: 16%; aspect-ratio: 1; border-radius: 50%;
  top: 14%; right: 16%; background: var(--amarillo);
}
.ventana-capa {
  /* La base de cada SVG es transparente (los últimos 3 %) y la capa baja ese tanto: al ampliar la
     ventana, el navegador mezclaba la base con el borde de arriba y se veía una línea fina. */
  position: absolute; left: 0; right: 0; bottom: -3.5%; background-repeat: repeat-x; background-size: 100% 100%;
  background-position-x: calc(var(--avance, 0) * var(--recorre));
}
.ventana-capa--lejos { height: 62%; background-image: url('/assets/img/escenas/viaje/colinas-lejos.svg'); background-size: 120% 100%; --recorre: -30%; }
.ventana-capa--medio { height: 48%; background-image: url('/assets/img/escenas/viaje/colinas-medio.svg'); background-size: 110% 100%; --recorre: -70%; }
.ventana-capa--cerca { height: 34%; background-image: url('/assets/img/escenas/viaje/colinas-cerca.svg'); --recorre: -140%; }
@media (prefers-reduced-motion: reduce) { .ventana-capa { background-position-x: 0; } }

/* ── E4 + E5 (viaje.js): bus → zoom por la ventanilla → caminata ───────────────────────────────
   Sin JS / movimiento reducido: el bus quieto con su texto y, debajo, el texto de la caminata. */
.viaje { height: auto; padding: clamp(2rem, 6vw, 4rem) 0; }
.viaje .escena-uso-fija { position: static; height: auto; }
.viaje-figura--camina, .viaje-t--bus-antes, .viaje-t--camina-antes { display: none; }
.viaje-textos { gap: 2.5rem; }
.viaje-textos > * { grid-area: auto; }
.viaje-t h2 { font-size: clamp(2rem, 4.6vw, 3.9rem); max-width: 13ch; margin-top: .6rem; color: var(--vino); }
.viaje-t > p:last-child { margin: 1rem 0 0; max-width: 40ch; font-size: 1.15rem; color: var(--tinta-suave); }
.viaje-t--bus-antes, .viaje-t--camina-antes { margin: 0; font: 800 clamp(1.8rem, 4vw, 3.4rem)/1.05 var(--display); letter-spacing: -.03em; color: var(--tinta-suave); }

.viaje.viva { height: 1100svh; padding: 0; overflow: clip; }
.viaje.viva .escena-uso-fija { position: sticky; height: calc(100svh - var(--alto-cabecera)); }
.viaje.viva .escena-uso-lienzo { z-index: 1; }
.viaje.viva .ventana { will-change: transform; }
.viaje.viva .viaje-figura { grid-area: 1 / 1; position: relative; z-index: 1; will-change: opacity, transform; }
.viaje.viva .viaje-figura--camina { display: block; opacity: 0; }
.viaje.viva .viaje-textos { position: relative; z-index: 2; gap: 0; }
.viaje.viva .viaje-textos > * { grid-area: 1 / 1; align-self: center; display: block; opacity: 0; }
/* Sobre el paisaje, los textos de la caminata van en una tarjeta para leerse bien. */
.viaje.viva .viaje-t--camina, .viaje.viva .viaje-t--camina-antes {
  justify-self: start; padding: 1.1rem 1.5rem 1.3rem; border-radius: 1.5rem;
  background: color-mix(in srgb, var(--azucar) 92%, transparent);
}
@media (max-width: 767px) {
  .viaje-t h2 { margin-inline: auto; }
  .viaje-t > p:last-child { margin-inline: auto; font-size: 1rem; }
  .viaje.viva .viaje-t--camina, .viaje.viva .viaje-t--camina-antes { justify-self: center; }
}

/* Móvil: en la caminata el texto sube (sobre el cielo) y la mascota baja a pisar las colinas. */
@media (max-width: 767px) {
  .viaje.viva.en-camina .viaje-textos { order: -1; }
  .viaje.viva.en-camina .viaje-figura--camina { margin-top: 18svh; }
}