/* =========================================
   NARRATIVA — escena 1 (e1) + MOTOR compartido
   Base 375 × 8711. Hijos en %. Traslaciones × --escala-narrativa.

   Este archivo carga DESPUÉS de carrusel-3d.css a propósito:
   .narrativa-foto { position: absolute } aquí. Si el motor va antes,
   las escenas del abanico quedan relative y se rompe e3→e4.
   [data-anim-*] y .visible también viven aquí (todas las escenas los heredan).
   HTML: views/actos/[slug]/narrativa-e1.ejs. No rehacer degradado ni e1-10/11/o01/o02.
   ========================================= */

.narrativa {
  position: relative;
  width: 100%;
}

/* Fuera del tramo (centro del viewport ya no cae aquí): los recortes
   con overflow visible y z-index no deben robar el tap a créditos.
   iPad Safari hit-testea ese overflow; Chrome/Pixel no. */
.narrativa.narrativa--fuera {
  pointer-events: none;
}

.narrativa-escena {
  --escala-narrativa: 1;
  position: relative;
  width: 100%;
}

/* Fade: ocultos hasta .visible (la opacidad la anima el keyframe) */
.narrativa [data-anim-fade] {
  visibility: hidden;
}

.narrativa [data-anim-fade].visible {
  visibility: visible;
}

/* Pan/drift: visibles en su posición de partida; ocultos solo sin foto */
.narrativa [data-anim-pan][data-bg]:not(.foto-cargada),
.narrativa [data-bg]:not([data-anim-fade]):not([data-anim-pan]):not(.foto-cargada) {
  visibility: hidden;
}

.narrativa-foto,
.e1-o02__foto {
  --foto-narrativa: none;
  background-image: var(--foto-narrativa);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.narrativa--protegida .narrativa-foto,
.narrativa--protegida .e1-o02__foto {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.narrativa-foto {
  position: absolute;
}

.narrativa-e1 {
  aspect-ratio: 375 / 8711;
  overflow: visible;
  /* Lavanda (fondo-b) → oscuro (fondo-a). Stops medidos a mano; no usar el overflow de Figma. */
  background-image: linear-gradient(
    to bottom,
    rgb(var(--efigie-escena-2-fondo-b)) 26.87%, /* 26.87% INTENCIONAL (Cálculo manual) */
    rgb(var(--efigie-escena-2-fondo-a)) 83.25% /* 83.25% INTENCIONAL (Cálculo manual) */
  );
}

/* =========================================
   POSICIONAMIENTO — Escena 1
   ========================================= */

.e1-01 {
  left: 39.73%;
  top: 0.39%;
  width: 30.79%;
  height: 1.11%;
}

.e1-02 {
  left: 13.6%;
  top: 2.32%;
  width: 72.8%;
  height: 2.08%;
}

.e1-03 {
  left: -8.12%;
  top: 4.57%;
  width: 150.89%;
  height: 3.24%;
}

.e1-04 {
  left: -26.67%;
  top: 7.73%;
  width: 126.67%;
  height: 5.45%;
  translate: calc(100px * var(--escala-narrativa)) 0;
}

.e1-05 {
  left: -71%;
  top: 12%;
  width: 79.34%;
  height: 9.28%;
  rotate: -57deg;
  transform-origin: right top;
}

.e1-06 {
  left: -87.2%;
  top: 17.23%;
  width: 178.67%;
  height: 5.12%;
  translate: calc(359px * var(--escala-narrativa)) 0;
  opacity: 0;
}

.e1-07 {
  left: 0%;
  top: 22.07%;
  width: 100%;
  height: 6.48%;
}

.e1-08 {
  left: 22.4%;
  top: 27.67%;
  width: 55.2%;
  height: 3.57%;
}

.e1-09 {
  left: 45.49%;
  top: 34.2%;
  width: 43.73%;
  height: 1.25%;
}

.e1-10 {
  left: 0%;
  top: 34.88%;
  width: 126.13%;
  height: 3.62%;
  translate: calc(-98px * var(--escala-narrativa)) 0;
}

.e1-11 {
  left: 0%;
  top: 33.05%; /* INTENCIONAL — corrección manual (no 34.89%) */
  width: 126.13%;
  height: 1.83%;
  translate: calc(-98px * var(--escala-narrativa)) 0;
}

.e1-12 {
  left: -22.4%;
  top: 38.49%;
  width: 160.27%;
  height: 3.87%;
  translate: calc(-142px * var(--escala-narrativa)) 0;
}

.e1-13 {
  left: -49.33%;
  top: 42.34%;
  width: 149.37%;
  height: 3.62%;
}

.e1-14 {
  left: 17.07%;
  top: 45.7%;
  width: 76.53%;
  height: 4.95%;
}

.e1-15 {
  left: 4.27%;
  top: 46.22%;
  width: 32.53%;
  height: 0.93%;
  transform-origin: left top;
}

.e1-16 {
  left: 0%;
  top: 50.33%;
  width: 100%;
  height: 7.63%;
}

.e1-17 {
  left: 8.53%;
  top: 57.68%;
  width: 82.93%;
  height: 3.57%;
  rotate: -45deg;
}

.e1-18 {
  left: 8.53%;
  top: 61.4%;
  width: 82.93%;
  height: 5.35%;
}

.e1-19 {
  left: 0%;
  top: 65.94%;
  width: 100%;
  height: 7.01%;
}

.e1-20 {
  left: 15.2%;
  top: 72.32%;
  width: 85.07%;
  height: 3.66%;
  translate: calc(318px * var(--escala-narrativa)) 0;
  opacity: 0;
}

.e1-21 {
  left: 12.8%;
  top: 83.56%;
  width: 88.8%;
  height: 15.7%;
  translate: calc(327px * var(--escala-narrativa)) 0;
  opacity: 0;
}

.e1-llamada-01 {
  left: 28.8%;
  top: 31.7%;
  width: 42.4%;
}

.e1-llamada-02 {
  left: 25.6%;
  top: 75.95%;
  width: 54.4%;
}

.e1-o01 {
  position: absolute;
  left: 0%;
  top: 32.95%;
  width: 100%;
  height: 2.64%;
  /* INTENCIONAL — no usar --efigie-escena-1-velo (176,165,178) */
  background-image: linear-gradient(
    to bottom,
    rgba(179, 168, 181, 1) 2%,
    rgba(179, 168, 181, 0) 86.1%
  );
  pointer-events: none;
}

.e1-o02 {
  position: absolute;
  left: 4.8%;
  top: 75.54%;
  width: 95.73%;
  height: 8.22%;
  border: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-radius: var(--radio-mediano) 0 0 var(--radio-mediano);
  box-shadow: var(--sombra-narrativa);
  overflow: hidden;
  translate: calc(357px * var(--escala-narrativa)) 0;
  opacity: 0;
}

.e1-o02__foto {
  position: absolute;
  left: 0;
  width: 100%;
}

/* Arranca en el borde interior del padre (el outline). Sin top
   desplazado: si no, el fondo se ve como un hueco / “cuadro”. */
.e1-o02__foto-inferior {
  position: relative;
  display: block;
  top: 0;
  width: 100%;
  aspect-ratio: 718 / 211;
}

.e1-o02__foto-superior {
  position: relative;
  display: block;
  width: 100%;
  inset: 0;
  height: auto;
  z-index: 1;
  aspect-ratio: 718 / 1219;
}

/* =========================================
   PATRONES VISUALES
   ========================================= */

.e1-01,
.e1-02,
.e1-03,
.e1-05,
.e1-06,
.e1-08,
.e1-09,
.e1-14,
.e1-15,
.e1-17,
.e1-18 {
  border: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-radius: var(--radio-mediano);
  box-shadow: var(--sombra-narrativa);
}

.e1-07,
.e1-12,
.e1-13,
.e1-16,
.e1-19 {
  border-top: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-bottom: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-left: none;
  border-right: none;
  border-radius: 0;
}

.e1-04 {
  border-top: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-bottom: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-left: none;
  border-right: none;
  border-radius: 0;
  box-shadow: var(--sombra-narrativa);
}

.e1-10,
.e1-11 {
  border: none;
  border-radius: 0;
}

.e1-20,
.e1-21 {
  border: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-radius: var(--radio-mediano) 0 0 var(--radio-mediano);
  box-shadow: var(--sombra-narrativa);
}

/* =========================================
   ANIMACIONES — una curva por propiedad
   ========================================= */

@keyframes e1-01-fade { from { opacity: 0; } }
@keyframes e1-01-move { from { translate: 0 calc(-103.9px * var(--escala-narrativa)); } }
@keyframes e1-01-rotate { from { rotate: -72.3deg; } }

.e1-01.visible {
  animation:
    e1-01-fade 0.55s cubic-bezier(0, 0, 0.58, 1) both,
    e1-01-move 0.55s cubic-bezier(0, 0, 0.58, 1) both,
    e1-01-rotate 0.55s cubic-bezier(0, 0, 0.156, 1.01) both;
}

@keyframes e1-02-fade { from { opacity: 0; } }
@keyframes e1-02-move { from { translate: calc(0.06px * var(--escala-narrativa)) calc(-77.9px * var(--escala-narrativa)); } }
@keyframes e1-02-rotate { from { rotate: 19.2deg; } }

.e1-02.visible {
  animation:
    e1-02-fade 0.55s cubic-bezier(0, 0, 0.58, 1) both,
    e1-02-move 0.55s cubic-bezier(0, 0, 0.187, 0.99) both,
    e1-02-rotate 0.55s cubic-bezier(0, 0, 0.077, 0.991) both;
}

@keyframes e1-03-fade { from { opacity: 0; } }
@keyframes e1-03-move { from { translate: calc(3.2px * var(--escala-narrativa)) calc(-40.8px * var(--escala-narrativa)); } }
@keyframes e1-03-rotate { from { rotate: -29.8deg; } }

.e1-03.visible {
  animation:
    e1-03-fade 0.75s cubic-bezier(0, 0, 0.58, 1) both,
    e1-03-move 0.75s cubic-bezier(0, 0, 0.58, 1) both,
    e1-03-rotate 0.75s cubic-bezier(0, 0, 0.052, 1) both;
}

@keyframes e1-04-slide {
  from { translate: calc(100px * var(--escala-narrativa)) 0; }
  to { translate: 0 0; }
}

.e1-04.visible {
  animation: e1-04-slide 1.5s cubic-bezier(0, 0, 0.116, 0.979) both;
}

@keyframes e1-05-fade { from { opacity: 0; } }
@keyframes e1-05-move { from { translate: calc(-262.6px * var(--escala-narrativa)) calc(-77.1px * var(--escala-narrativa)); } }
@keyframes e1-05-rotate {
  from { rotate: 11.9deg; }
  to { rotate: -57deg; }
}

.e1-05.visible {
  animation:
    e1-05-fade 0.605s cubic-bezier(0.5, 0, 0.5, 1) both,
    e1-05-move 1s cubic-bezier(0.25, 0.1, 0.25, 1.4) both, /* 1s INTENCIONAL (corrección manual) */
    e1-05-rotate 1.5s cubic-bezier(0.2, 0, 0, 1.6) both;
}

@keyframes e1-06-slide {
  0% { opacity:0; translate: calc(359px * var(--escala-narrativa)) 0; }
  100% { opacity:1; translate: 0 0; }
}

.e1-06.visible {
  animation: e1-06-slide 2s cubic-bezier(0, 0, 0.393, 1.005) both;
}

@keyframes e1-07-fade { from { opacity: 0; } }

.e1-07.visible {
  animation: e1-07-fade 0.75s cubic-bezier(0, 0, 0.58, 1) both;
}

@keyframes e1-08-fade { from { opacity: 0; } }
@keyframes e1-08-move { from { translate: 0 calc(84.1px * var(--escala-narrativa)); } }

.e1-08.visible {
  animation:
    e1-08-fade 0.75s cubic-bezier(0.42, 0, 1, 1) both,
    e1-08-move 0.75s cubic-bezier(0.495, 1.717, 0.8, 1) both;
}

@keyframes e1-ll01-fade { from { opacity: 0; } }
@keyframes e1-ll01-move { from { translate: 0 calc(24px * var(--escala-narrativa)); } }

.e1-llamada-01.visible {
  animation:
    e1-ll01-fade 0.6s cubic-bezier(0.5, 0, 0.5, 1) both,
    e1-ll01-move 0.6s cubic-bezier(0.45, 1.45, 0.8, 1) both;
}

@keyframes e1-09-fade { from { opacity: 0; } }
@keyframes e1-09-move { from { translate: 0 calc(-33.9px * var(--escala-narrativa)); } }
@keyframes e1-09-rotate { from { rotate: -76.4deg; } }

.e1-09.visible {
  animation:
    e1-09-fade 0.6s cubic-bezier(0.5, 0, 0.5, 1) both,
    e1-09-move 0.6s cubic-bezier(0, 0, 0.58, 1) both,
    e1-09-rotate 0.6s cubic-bezier(0, 0, 0.137, 0.989) both;
}

@keyframes e1-10-drift {
  from { translate: calc(-98px * var(--escala-narrativa)) 0; }
  to { translate: 0 0; }
}

.e1-10.visible {
  animation: e1-10-drift 2s cubic-bezier(0, 0, 0.58, 1) both;
}

@keyframes e1-11-drift {
  from { translate: calc(-98px * var(--escala-narrativa)) 0; }
  to { translate: 0 0; }
}

.e1-11.visible {
  animation: e1-11-drift 2s cubic-bezier(0, 0, 0.58, 1) both;
}

@keyframes e1-12-drift {
  from { translate: calc(-142px * var(--escala-narrativa)) 0; }
  to { translate: 0 0; }
}

.e1-12.visible {
  animation: e1-12-drift 2s cubic-bezier(0, 0, 0.58, 1) both;
}

@keyframes e1-13-drift {
  from { translate: 0 0; }
  to { translate: calc(85px * var(--escala-narrativa)) 0; }
}

.e1-13.visible {
  animation: e1-13-drift 1.5s cubic-bezier(0, 0, 0.315, 1) both;
}

@keyframes e1-14-fade { from { opacity: 0; } }
@keyframes e1-14-move { from { translate: 0 calc(35.1px * var(--escala-narrativa)); } }

.e1-14.visible {
  animation:
    e1-14-fade 1s cubic-bezier(0, 0, 0.58, 1) both,
    e1-14-move 1s cubic-bezier(0.25, 0.1, 0.25, 1.4) both;
}

@keyframes e1-15-fade { from { opacity: 0; } }
@keyframes e1-15-rotate { from { rotate: 90deg; } }

.e1-15.visible {
  animation:
    e1-15-fade 1s cubic-bezier(0, 0, 0.58, 1) both,
    e1-15-rotate 1s cubic-bezier(0.25, 0.1, 0.25, 1.4) both;
}

@keyframes e1-17-spin {
  from { rotate: -45deg; }
  to { rotate: 315deg; }
}

.e1-17.visible {
  animation: e1-17-spin 5s linear infinite;
}

@keyframes e1-18-fade { from { opacity: 0; } }
@keyframes e1-18-move { from { translate: 0 calc(-41.9px * var(--escala-narrativa)); } }

.e1-18.visible {
  animation:
    e1-18-fade 0.6s cubic-bezier(0.5, 0, 0.5, 1) both,
    e1-18-move 0.6s cubic-bezier(0, 0, 0.345, 1) both;
}

@keyframes e1-20-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes e1-20-slide {
  from { translate: calc(318px * var(--escala-narrativa)) 0; }
  to { translate: 0 0; }
}

.e1-20.visible {
  animation:
    e1-20-fade 0.25s ease-out both,
    e1-20-slide 0.55s cubic-bezier(0, 0, 0.321, 1) both;
}

@keyframes e1-o02-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes e1-o02-slide {
  from { translate: calc(357px * var(--escala-narrativa)) 0; }
  to { translate: 0 0; }
}

.e1-o02.visible {
  animation:
    e1-o02-fade 0.25s ease-out both,
    e1-o02-slide 0.55s cubic-bezier(0, 0, 0.212, 1) both;
}

@keyframes e1-ll02-fade { from { opacity: 0; } }
@keyframes e1-ll02-scale { from { scale: 0.6; } }

.e1-llamada-02.visible {
  animation:
    e1-ll02-fade 1s cubic-bezier(0, 0, 0.58, 1) both,
    e1-ll02-scale 1s cubic-bezier(0.25, 0.1, 0.25, 1.4) both;
}

@keyframes e1-21-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes e1-21-slide {
  from { translate: calc(327px * var(--escala-narrativa)) 0; }
  to { translate: 0 0; }
}

.e1-21.visible {
  animation:
    e1-21-fade 0.25s ease-out both,
    e1-21-slide 0.55s cubic-bezier(0, 0, 0.312, 1) both;
}