/*
 * ESCENAS APILADAS (index, debajo de la orla que se monta). Ver js/escenas-scroll.js.
 *
 * Los tres banners se quedan pegados arriba y el siguiente se monta encima, mientras el de debajo
 * se encoge, se oscurece y redondea las esquinas, como cartas que se apilan. El resto aparece
 * suavemente al llegar. En el movil, solo las apariciones.
 */

/* ── La pila ── */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .pila-escenas > .escena-apilada {
    position: sticky;
    top: 0;
    transform-origin: 50% 0%;
    will-change: transform, filter;
  }
  .pila-escenas > .escena-apilada:nth-of-type(1) { z-index: 1; }
  .pila-escenas > .escena-apilada:nth-of-type(2) { z-index: 2; }
  .pila-escenas > .escena-apilada:nth-of-type(3) { z-index: 3; }
  /* La que sube por encima lleva sombra, para que se note que esta delante. */
  .pila-escenas > .escena-apilada + .index-section-sep + .escena-apilada {
    box-shadow: 0 -18px 40px rgba(20, 15, 5, 0.12);
  }
  .pila-escenas > .index-section-sep { display: none; }
  /* La imagen de cada banner se acerca al entrar (la escala la pone el JS en --zoom). */
  .pila-escenas .index-hero-banner-img,
  .pila-escenas .index-ally-banner-img {
    transform: scale(var(--zoom, 1));
    transform-origin: 50% 50%;
  }
  .pila-escenas .index-hero-banner-visual,
  .pila-escenas .index-ally-visual { overflow: hidden; }
}

/*
 * ── En el movil: cada banner, una tarjeta ──
 * Las imagenes de estos banners traen arriba un hueco vacio (alli va el titulo en el ordenador). En el
 * movil el titulo ya va encima, aparte, asi que ese hueco salia como una franja gris y un espacio en
 * blanco. Se recorta (solo se ve la franja con el contenido) y cada banner queda como una tarjeta.
 * Van con !important porque los estilos del index estan dentro de la propia pagina.
 */
@media (max-width: 768px) {
  .index-hero .index-hero-banner { background: none !important; padding: 10px 0 !important; }
  .index-hero-banner-visual,
  .index-ally-visual {
    width: auto !important;
    margin: 0 12px;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 24px rgba(3, 2, 2, .08);
  }
  .index-ally { padding: 10px 0; }
  .index-hero-banner-head,
  .index-ally-head { background: transparent !important; padding: 18px 16px 4px !important; }
  .index-hero-banner-img {
    aspect-ratio: 3.125;
    object-fit: cover;
    object-position: center 77%;
  }
  .index-ally-banner-img {
    aspect-ratio: 3.2;
    object-fit: cover;
    object-position: center 80%;
  }
}

/* ── Los titulos: suben palabra a palabra ── */
.palabras-suben .palabra {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}
.palabras-suben.visible .palabra { opacity: 1; transform: none; }

/* ── Apariciones ── */
.aparece {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
}
.aparece.desde-izq { transform: translateX(-48px); }
.aparece.desde-der { transform: translateX(48px); }
.aparece.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .palabras-suben .palabra, .aparece { opacity: 1 !important; transform: none !important; transition: none !important; }
}