/* =========================================
   NARRATIVA — escena 5 (e5)
   Base 375 × 10139. Tokens de e6. Sin banda hacia e6.
   HTML: narrativa-e5.ejs. e5-o01 encima de e5-06 (z-index).
   ========================================= */

.narrativa-e5 {
  aspect-ratio: 375 / 10139;
  overflow: visible;
  background-image: linear-gradient(
    to bottom,
    rgb(var(--efigie-escena-6-fondo-b)) 0%,
    rgb(var(--efigie-escena-5-medio)) 50.5%,
    rgb(var(--efigie-escena-6-fondo-a)) 100%
  );
}

/* =========================================
   POSICIONAMIENTO — Escena 5
   ========================================= */

.e5-01 {
  left: 0;
  top: 0;
  width: 100%;
  height: 5.917%;
}

.e5-llamada-01 {
  left: 28.533%;
  top: 4.569%;
  width: 42.400%;
}

.e5-02 {
  left: -85.333%;
  top: 10.260%;
  width: 185.333%;
  height: 4.567%;
}

.e5-03 {
  left: 8.533%;
  top: 5.575%;
  width: 82.933%;
  height: 5.168%;
}

.e5-llamada-02 {
  left: 23.733%;
  top: 10.397%;
  width: 52.000%;
}

.e5-04 {
  left: 8.533%;
  top: 15.142%;
  width: 82.933%;
  height: 2.044%;
}

.e5-05 {
  left: 0;
  top: 17.499%;
  width: 100%;
  height: 3.443%;
}

.e5-o01 {
  left: 4.800%;
  top: 21.099%;
  width: 90.667%;
  height: 3.837%;
  z-index: 1;
}

.e5-06 {
  left: 0;
  top: 25.094%;
  width: 100%;
  height: 2.920%;
  z-index: 0;
}

.e5-09 {
  left: 4.267%;
  top: 33.381%;
  width: 213.867%;
  height: 4.922%;
  translate: calc(-459px * var(--escala-narrativa)) 0;
}

.e5-08 {
  left: 13.600%;
  top: 30.867%;
  width: 82.133%;
  height: 2.831%;
}

.e5-07 {
  left: 4.267%;
  top: 28.353%;
  width: 82.133%;
  height: 2.831%;
}

.e5-10 {
  left: 0;
  top: 38.462%;
  width: 100%;
  height: 3.443%;
}

.e5-llamada-03 {
  left: 0;
  top: 41.346%;
  width: 67.733%;
  transform-origin: 0% 100%;
}

.e5-11 {
  left: 4.800%;
  top: 42.062%;
  width: 90.667%;
  height: 5.030%;
}

.e5-12 {
  left: 0;
  top: 47.258%;
  width: 100%;
  height: 5.553%;
}

.e5-llamada-04 {
  left: 26.133%;
  top: 51.261%;
  width: 47.733%;
}

.e5-13 {
  left: 4.803%;
  top: 52.735%;
  width: 90.667%;
  height: 3.354%;
}

.e5-14 {
  left: 0;
  top: 55.990%;
  width: 100%;
  height: 4.576%;
}

.e5-16 {
  left: 0;
  top: 65.612%;
  width: 100%;
  height: 5.543%;
}

.e5-15 {
  left: 0;
  top: 60.547%;
  width: 100%;
  height: 5.080%;
}

.e5-18 {
  left: 0;
  top: 71.152%;
  width: 100%;
  height: 6.767%;
}

.e5-17 {
  left: 8.536%;
  top: 70.836%;
  width: 82.933%;
  height: 2.044%;
}

.e5-19 {
  left: 12.800%;
  top: 78.074%;
  width: 82.933%;
  height: 2.044%;
  transform-origin: 100% 50%;
}

.e5-22 {
  left: 0;
  top: 83.253%;
  width: 100%;
  height: 2.989%;
}

.e5-21 {
  left: 12.800%;
  top: 81.763%;
  width: 82.933%;
  height: 1.725%;
  transform-origin: 0% 50%;
}

.e5-20 {
  left: 4.267%;
  top: 79.879%;
  width: 82.933%;
  height: 2.044%;
}

.e5-23 {
  left: 0;
  top: 86.241%;
  width: 100%;
  height: 2.456%;
}

.e5-llamada-06 {
  left: 0;
  top: 86.242%;
  width: 51.200%;
  transform-origin: 0% 0%;
}

.e5-24 {
  left: 0;
  top: 88.673%;
  width: 100%;
  height: 4.971%;
}

.e5-25 {
  left: 0;
  top: 93.641%;
  width: 100%;
  height: 6.360%;
}

.e5-llamada-05 {
  left: 48.000%;
  top: 65.336%;
  width: 43.467%;
}

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

.e5-02 {
  border-top: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-bottom: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
}

.e5-03 {
  border: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-radius: var(--radio-mediano);
  box-shadow: var(--sombra-narrativa);
}

.e5-04 {
  border: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-radius: var(--radio-mediano);
}

.e5-05 {
  border-top: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-bottom: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
}

.e5-o01 {
  border: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-radius: var(--radio-mediano);
  box-sizing: border-box;
  overflow: hidden;
}

.carrusel-3d-escena.e5-o01 {
  z-index: 1;
  border: none;
  overflow: visible;
  background-image: none;
}

.e5-06 {
  border-top: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-bottom: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
}

.e5-09 {
  border: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-radius: var(--radio-mediano);
  box-shadow: var(--sombra-narrativa);
}

.e5-08 {
  border: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-radius: var(--radio-mediano);
  box-shadow: var(--sombra-narrativa);
}

.e5-07 {
  border: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-radius: var(--radio-mediano);
  box-shadow: var(--sombra-narrativa);
}

.e5-10 {
  border-top: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-bottom: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
}

.e5-llamada-03 {
  border-left: none;
  border-radius: 0 var(--radio-chico) 0 0;
}

.e5-11 {
  border: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-radius: var(--radio-mediano);
  box-shadow: var(--sombra-narrativa);
}

.e5-12 {
  border-top: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-bottom: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
}

.e5-13 {
  border: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-radius: 32px; /* EXCEPCIÓN: 32px Figma; --radio-grande es 24px */
  box-shadow: var(--sombra-narrativa);
}

.e5-14 {
  border-top: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-bottom: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
}

.e5-16 {
  border-bottom: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
}

.e5-15 {
  border-top: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-bottom: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
}

.e5-18 {
  border-top: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-bottom: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
}

.e5-17 {
  border: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-radius: var(--radio-mediano);
  box-shadow: var(--sombra-narrativa);
}

.e5-19 {
  border: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-radius: var(--radio-mediano);
}

.e5-22 {
  border-top: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  box-shadow: var(--sombra-narrativa);
}

.e5-21 {
  border: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-radius: var(--radio-mediano);
}

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

.e5-23 {
  border-top: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
}

.e5-llamada-06 {
  border-left: none;
  border-radius: 0 0 var(--radio-chico) 0;
}

.e5-24 {
  border-top: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
}

.e5-25 {
  border-top: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
}

/* =========================================
   ANIMACIONES — una curva por propiedad (Figma Motion)
   Traslaciones × --escala-narrativa.
   ========================================= */

@keyframes e5-02-pingpong {
  from { translate: calc(320px * var(--escala-narrativa)) 0; }
  to { translate: 0 0; }
}

.e5-02 {
  animation: e5-02-pingpong 3s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
}

@keyframes e5-13-loop {
  from { rotate: 0deg; }
  to { rotate: -360deg; }
}

.e5-13 {
  animation: e5-13-loop 4s linear infinite;
}

@keyframes e5-llamada-01-opacity { from { opacity: 0; } }
@keyframes e5-llamada-01-translate { from { translate: 0 calc(32px * var(--escala-narrativa)); } }

.e5-llamada-01.visible {
  animation:
    e5-llamada-01-opacity 0.4s cubic-bezier(0, 0, 0.58, 1) both,
    e5-llamada-01-translate 1s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

@keyframes e5-03-opacity { from { opacity: 0; } }
@keyframes e5-03-scale { from { scale: 1.4; } }

.e5-03.visible {
  animation:
    e5-03-opacity 0.4s cubic-bezier(0, 0, 0.58, 1) both,
    e5-03-scale 1s cubic-bezier(0.175, 1.40, 0.55, 1) both;
}

@keyframes e5-llamada-02-opacity { from { opacity: 0; } }
@keyframes e5-llamada-02-translate { from { translate: 0 calc(-42px * var(--escala-narrativa)); } }

.e5-llamada-02.visible {
  animation:
    e5-llamada-02-opacity 0.4s cubic-bezier(0, 0, 0.58, 1) both,
    e5-llamada-02-translate 1s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

@keyframes e5-04-opacity { from { opacity: 0; } }
@keyframes e5-04-scale { from { scale: 1.4; } }

.e5-04.visible {
  animation:
    e5-04-opacity 0.4s cubic-bezier(0, 0, 0.58, 1) both,
    e5-04-scale 1s cubic-bezier(0.175, 1.40, 0.55, 1) both;
}

@keyframes e5-07-opacity { from { opacity: 0; } }
@keyframes e5-07-rotate { from { rotate: 60deg; } }
@keyframes e5-07-scale { from { scale: 1.3; } }

.e5-07.visible {
  animation:
    e5-07-opacity 0.4s cubic-bezier(0.5, 0, 0.5, 1) both,
    e5-07-rotate 1s cubic-bezier(0.34, 1.20, 0.64, 1) both,
    e5-07-scale 1s cubic-bezier(0.12, 1.80, 0.32, 1) both;
}

@keyframes e5-08-opacity { from { opacity: 0; } }
@keyframes e5-08-rotate { from { rotate: -60deg; } }
@keyframes e5-08-scale { from { scale: 0.7; } }

.e5-08.visible {
  animation:
    e5-08-opacity 0.4s cubic-bezier(0.5, 0, 0.5, 1) both,
    e5-08-rotate 1s cubic-bezier(0.34, 1.20, 0.64, 1) both,
    e5-08-scale 1s cubic-bezier(0.12, 1.80, 0.32, 1) both;
}

@keyframes e5-09-translate {
  from { translate: calc(-459px * var(--escala-narrativa)) 0; }
  to { translate: 0 0; }
}

.e5-09.visible {
  animation: e5-09-translate 2.5s cubic-bezier(0.50, 0, 0.15, 1) both;
}

@keyframes e5-llamada-03-opacity { from { opacity: 0; } }
@keyframes e5-llamada-03-rotate { from { rotate: -90deg; } }

.e5-llamada-03.visible {
  animation:
    e5-llamada-03-opacity 0.5s cubic-bezier(0.42, 0, 1, 1) both,
    e5-llamada-03-rotate 0.5s cubic-bezier(0.888, 0, 1, 1) both;
}

@keyframes e5-11-opacity { from { opacity: 0; } }
@keyframes e5-11-translate { from { translate: 0 calc(43px * var(--escala-narrativa)); } }

.e5-11.visible {
  animation:
    e5-11-opacity 0.5s cubic-bezier(0, 0, 0.58, 1) both,
    e5-11-translate 1s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

@keyframes e5-llamada-04-opacity { from { opacity: 0; } }
@keyframes e5-llamada-04-scale { from { scale: 1.4; } }

.e5-llamada-04.visible {
  animation:
    e5-llamada-04-opacity 0.668s cubic-bezier(0.42, 0, 1, 1) both,
    e5-llamada-04-scale 1s cubic-bezier(0.175, 1.40, 0.55, 1) both;
}

@keyframes e5-17-opacity { from { opacity: 0; } }
@keyframes e5-17-translate { from { translate: 0 calc(64px * var(--escala-narrativa)); } }
@keyframes e5-17-scale { from { scale: 1.1; } }

.e5-17.visible {
  animation:
    e5-17-opacity 0.5s cubic-bezier(0.42, 0, 1, 1) both,
    e5-17-translate 0.75s cubic-bezier(0.34, 1.20, 0.64, 1) both,
    e5-17-scale 0.75s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

@keyframes e5-19-opacity { from { opacity: 0; } }
@keyframes e5-19-rotate { from { rotate: 30deg; } }

.e5-19.visible {
  animation:
    e5-19-opacity 0.4s cubic-bezier(0.42, 0, 1, 1) both,
    e5-19-rotate 0.75s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

@keyframes e5-20-opacity { from { opacity: 0; } }
@keyframes e5-20-translate { from { translate: calc(-74px * var(--escala-narrativa)) 0; } }

.e5-20.visible {
  animation:
    e5-20-opacity 0.4s cubic-bezier(0.42, 0, 1, 1) both,
    e5-20-translate 0.75s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

@keyframes e5-21-opacity { from { opacity: 0; } }
@keyframes e5-21-rotate { from { rotate: 30deg; } }

.e5-21.visible {
  animation:
    e5-21-opacity 0.4s cubic-bezier(0.42, 0, 1, 1) both,
    e5-21-rotate 0.75s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

@keyframes e5-23-opacity { from { opacity: 0; } }
@keyframes e5-23-translate { from { translate: 0 calc(-32px * var(--escala-narrativa)); } }

.e5-23.visible {
  animation:
    e5-23-opacity 0.42s cubic-bezier(0.42, 0, 1, 1) both,
    e5-23-translate 0.75s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

@keyframes e5-llamada-06-opacity { from { opacity: 0; } }
@keyframes e5-llamada-06-rotate { from { rotate: 90deg; } }
@keyframes e5-llamada-06-scale { from { scale: 0.8; } }

.e5-llamada-06.visible {
  animation:
    e5-llamada-06-opacity 0.42s cubic-bezier(0.42, 0, 1, 1) both,
    e5-llamada-06-rotate 0.75s cubic-bezier(0.50, 0, 0.15, 1) both,
    e5-llamada-06-scale 0.52s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

@keyframes e5-24-opacity { from { opacity: 0; } }
@keyframes e5-24-translate { from { translate: 0 calc(-32px * var(--escala-narrativa)); } }

.e5-24.visible {
  animation:
    e5-24-opacity 0.42s cubic-bezier(0.42, 0, 1, 1) both,
    e5-24-translate 0.75s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

@keyframes e5-25-opacity { from { opacity: 0; } }
@keyframes e5-25-translate { from { translate: 0 calc(-32px * var(--escala-narrativa)); } }

.e5-25.visible {
  animation:
    e5-25-opacity 0.42s cubic-bezier(0.42, 0, 1, 1) both,
    e5-25-translate 0.75s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

@keyframes e5-llamada-05-opacity { from { opacity: 0; } }
@keyframes e5-llamada-05-translate {
  from { translate: 0 0; }
  to { translate: calc(-148px * var(--escala-narrativa)) 0; }
}

.e5-llamada-05.visible {
  animation:
    e5-llamada-05-opacity 0.42s cubic-bezier(0.42, 0, 1, 1) both,
    e5-llamada-05-translate 0.75s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}