/* =========================================
   NARRATIVA — escena 4 (e4)
   Base 375 × 5491. Degradado escena-5 (INTENCIONAL).
   Al final de este archivo: banda e4→e5 (no mover a acto.css).
   HTML: narrativa-e4.ejs. e4-o02 estático, DOM antes de e4-10.
   ========================================= */

.narrativa-e4 {
  aspect-ratio: 375 / 5491;
  overflow: visible;
  background-image: linear-gradient(
    to bottom,
    rgb(var(--efigie-escena-5-fondo-a)) 19.7%, /* 19.7% INTENCIONAL (ajuste manual) */
    rgb(var(--efigie-escena-5-fondo-b)) 94.4% /* 94.4% INTENCIONAL (ajuste manual) */
  );
}

/* =========================================
   POSICIONAMIENTO — Escena 4
   ========================================= */

.e4-02 {
  left: 24.533%;
  top: 6.577%;
  width: 82.933%;
  height: 10.069%;
}

.e4-01 {
  left: -0.533%;
  top: 0.060%;
  width: 82.933%;
  height: 8.068%;
}

.e4-llamada-01 {
  left: 7.467%;
  top: 7.617%;
  width: 47.733%;
}

.e4-04 {
  left: -20.800%;
  top: 17.286%;
  width: 141.600%;
  height: 9.670%;
}

.e4-03 {
  left: 8.000%;
  top: 15.465%;
  width: 45.067%;
  height: 3.078%;
}

.e4-llamada-02 {
  left: 62.400%;
  top: 16.357%;
  width: 28.533%;
}

.e4-05 {
  left: -5.867%;
  top: 35.825%;
  width: 109.333%;
  height: 13.294%;
}

.e4-o01 {
  left: -74.400%;
  top: 26.519%;
  width: 166.667%;
  height: 10.124%;
}

.e4-llamada-03 {
  left: 51.733%;
  top: 36.2%;
  width: 49.600%;
}

.e4-07 {
  left: 4.267%;
  top: 56.732%;
  width: 91.467%;
  height: 6.247%;
}

.e4-06 {
  left: 8.534%;
  top: 48.488%;
  width: 82.933%;
  height: 8.498%;
  rotate: 15deg;
}

.e4-llamada-04 {
  left: -1.067%;
  top: 54.729%;
  width: 70.133%;
}

.e4-09 {
  left: -0.533%;
  top: 65.437%;
  width: 101.067%;
  height: 13.804%;
}

.e4-08 {
  left: 8.533%;
  top: 62.687%;
  width: 82.933%;
  height: 3.775%;
}

.e4-o02 {
  left: -0.533%;
  top: 85.707%;
  width: 101.067%;
  height: 14.296%;
}

.e4-10 {
  left: 4.267%;
  top: 75.053%;
  width: 91.467%;
  height: 11.091%;
}

.e4-llamada-05 {
  left: 16.267%;
  top: 92.063%;
  width: 67.733%;
  min-width: 90px; /* INTENCIONAL (ajuste manual) */
}

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

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

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

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

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

.e4-05 {
  border: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-radius: 0;
}

.e4-o01 {
  border: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-radius: var(--radio-mediano);
  box-shadow: var(--sombra-narrativa);
  overflow: hidden;
}

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

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

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

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

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

.e4-09 {
  border: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-radius: 0;
}

.e4-o02 {
  border-top: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-right: none;
  border-bottom: none;
  border-left: none;
  border-radius: 0;
}

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

/* =========================================
   ANIMACIONES — una curva por propiedad (Figma Motion)
   ========================================= */

@keyframes e4-01-opacity { from { opacity: 0; } }
@keyframes e4-01-translate { from { translate: -99.357% 0; } }

.e4-01.visible {
  animation:
    e4-01-opacity 0.283s cubic-bezier(0, 0, 0.58, 1) both,
    e4-01-translate 0.55s cubic-bezier(0, 0, 0.2548, 1) both;
}

@keyframes e4-02-opacity { from { opacity: 0; } }
@keyframes e4-02-translate { from { translate: 90.997% 0; } }

.e4-02.visible {
  animation:
    e4-02-opacity 0.283s cubic-bezier(0, 0, 0.58, 1) both,
    e4-02-translate 0.55s cubic-bezier(0, 0, 0.2274, 1) both;
}

@keyframes e4-llamada-01-opacity { from { opacity: 0; } }
@keyframes e4-llamada-01-translate { from { translate: 0 84.130%; } }

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

@keyframes e4-03-opacity { from { opacity: 0; } }
@keyframes e4-03-scale { from { scale: 1.3; } }

.e4-03.visible {
  animation:
    e4-03-opacity 0.55s cubic-bezier(0, 0, 0.58, 1) both,
    e4-03-scale 1s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

@keyframes e4-llamada-02-opacity { from { opacity: 0; } }
@keyframes e4-llamada-02-translate { from { translate: -32.243% 0; } }

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

@keyframes e4-o01-pingpong {
  from { translate: 50% 0; }
  to { translate: 0 0; }
}

.e4-o01 {
  animation: e4-o01-pingpong 3s cubic-bezier(0.7, -0.4, 0.4, 1.4) infinite alternate;
}

@keyframes e4-llamada-03-opacity { from { opacity: 0; } }
@keyframes e4-llamada-03-translate { from { translate: 97.849% 0; } }

.e4-llamada-03.visible {
  animation:
    e4-llamada-03-opacity 0.303s cubic-bezier(0, 0, 0.58, 1) both,
    e4-llamada-03-translate 0.75s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

@keyframes e4-06-opacity { from { opacity: 0; } }
@keyframes e4-06-rotate { from { rotate: -30deg; } to { rotate: 15deg; } }

.e4-06.visible {
  animation:
    e4-06-opacity 0.5s cubic-bezier(0.5, 0, 0.5, 1) both,
    e4-06-rotate 1s cubic-bezier(0.34, 1.40, 0.4, 1) both;
}

@keyframes e4-07-opacity { from { opacity: 0; } }
@keyframes e4-07-scale { from { scale: 0.7; } }

.e4-07.visible {
  animation:
    e4-07-opacity 0.4s cubic-bezier(0, 0, 0.58, 1) both,
    e4-07-scale 1s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

@keyframes e4-llamada-04-translate {
  from { translate: -98.425% 0; }
  to { translate: -3.422% 0; }
}

@keyframes e4-llamada-04-width {
  from { width: 67.733%; }
  to { width: 70.133%; }
}

.e4-llamada-04.visible {
  animation:
    e4-llamada-04-translate 1s cubic-bezier(0.34, 1.20, 0.64, 1) both,
    e4-llamada-04-width 1s linear both;
}

@keyframes e4-08-opacity { from { opacity: 0; } }
@keyframes e4-08-scale { from { scale: 1.4; } }

.e4-08.visible {
  animation:
    e4-08-opacity 0.4s cubic-bezier(0, 0, 0.58, 1) both,
    e4-08-scale 1s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

@keyframes e4-10-opacity { from { opacity: 0; } }
@keyframes e4-10-translate { from { translate: 0 -13.775%; } }

.e4-10.visible {
  animation:
    e4-10-opacity 0.75s cubic-bezier(0, 0, 0.58, 1) both,
    e4-10-translate 1.5s cubic-bezier(0.175, 1.40, 0.55, 1) both;
}

@keyframes e4-llamada-05-opacity { from { opacity: 0; } }
@keyframes e4-llamada-05-scale { from { scale: 0.7; } }

.e4-llamada-05.visible {
  animation:
    e4-llamada-05-opacity 0.403s cubic-bezier(0, 0, 0.58, 1) both,
    e4-llamada-05-scale 1s cubic-bezier(0.50, 0, 0.15, 1) both;
}

/* =========================================
   TRANSICIÓN e4→e5 — 375×126
   ========================================= */

.transicion-interseccional--e4-e5 {
  height: auto;
  aspect-ratio: 375 / 126;
  pointer-events: none;
  background-image: linear-gradient(
    to bottom,
    rgb(var(--efigie-escena-5-fondo-b)),
    rgb(var(--efigie-portada-fondo))
  );
}