/* =========================================
   NARRATIVA — escena 6 (e6)
   Base 375 × 4170. Sin bandas. overflow visible: e6-01 pinta encima de e5.
   Degradado con tokens de e7 (no pisar los de e6: e5 ya los usa).
   HTML: narrativa-e6.ejs.
   ========================================= */

.narrativa-e6 {
  aspect-ratio: 375 / 4170;
  overflow: visible;
  background-image: linear-gradient(
    to bottom,
    rgb(var(--efigie-escena-7-fondo-a)) 17.9%,
    rgb(var(--efigie-escena-7-fondo-b)) 83.15%
  );
}

/* =========================================
   POSICIONAMIENTO — Escena 6
   ========================================= */

.e6-01 {
  left: 35.733%;
  top: 0.307%;
  width: 28.267%;
  height: 0.959%;
  rotate: -15deg;
  transform-origin: center center;
  z-index: 2; /* Encima de e5 durante los primeros frames (translate Y negativo). */
}

.e6-04 {
  left: 4.267%;
  top: 5.157%;
  width: 91.467%;
  height: 7.075%;
}

.e6-03 {
  left: 9.768%;
  top: 3.572%;
  width: 80.462%;
  height: 1.343%;
  rotate: -9deg;
  transform-origin: center center;
}

.e6-02 {
  left: 23.200%;
  top: 2.033%;
  width: 53.600%;
  height: 1.151%;
  rotate: 13deg;
  transform-origin: center center;
}

.e6-06 {
  left: 4.267%;
  top: 15.694%;
  width: 82.933%;
  height: 9.944%;
}

.e6-05 {
  left: 27.467%;
  top: 11.738%;
  width: 72.533%;
  height: 4.341%;
}

.e6-llamada-01 {
  left: 0;
  top: 11%;
  width: 42.400%;
}

.e6-llamada-02 {
  left: 72.267%;
  top: 21.955%;
  width: 28.800%;
}

.e6-llamada-02 .llamada__texto {
  white-space: pre-line;
}

.e6-08 {
  left: 0;
  top: 34.832%;
  width: 100%;
  height: 15.971%;
}

.e6-07 {
  left: 12.800%;
  top: 25.262%;
  width: 82.933%;
  height: 9.944%;
}

.e6-llamada-03 {
  left: 8.533%;
  top: 38.596%;
  width: 38.133%;
}

.e6-10 {
  left: 0;
  top: 63.206%;
  width: 100%;
  height: 15.563%;
}

.e6-09 {
  left: -124.267%;
  top: 50.425%;
  width: 220.000%;
  height: 13.118%;
}

.e6-llamada-04 {
  left: 23.733%;
  top: 61.618%;
  width: 67.733%;
  min-height: 3%; /* Intencional para mejorar alineación */
}

.e6-o01 {
  left: 0;
  top: 78.764%;
  width: 636.155%;
  height: 12.711%;
}

.e6-llamada-05 {
  left: 10.933%;
  top: 89.029%;
  width: 78.133%;
}

.e6-11 {
  left: 0;
  top: 91.451%;
  width: 99.733%;
  height: 8.537%;
}

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

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

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

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

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

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

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

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

.e6-llamada-02 {
  border-right: none;
}

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

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

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

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

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

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

/* =========================================
   ANIMACIONES — una curva por propiedad (Figma Motion)
   Traslaciones × --escala-narrativa.
   e6-01/02/03 quedan inclinadas (−15deg / 13deg / −9deg).
   ========================================= */

@keyframes e6-o01-pingpong {
  from { translate: 0 0; }
  to { translate: calc(-2012px * var(--escala-narrativa)) 0; }
}

.e6-o01 {
  animation: e6-o01-pingpong 9s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
}

@keyframes e6-01-opacity { from { opacity: 0; } }
@keyframes e6-01-rotate { from { rotate: -90deg; } to { rotate: -15deg; } }
@keyframes e6-01-translate { from { translate: calc(-47px * var(--escala-narrativa)) calc(-49px * var(--escala-narrativa)); } }
@keyframes e6-01-scale { from { scale: 0.6; } }

.e6-01.visible {
  animation:
    e6-01-opacity 0.55s cubic-bezier(0.42, 0, 1, 1) both,
    e6-01-rotate 1s cubic-bezier(0.34, 1.20, 0.64, 1) both,
    e6-01-translate 1s cubic-bezier(0.34, 1.20, 0.64, 1) both,
    e6-01-scale 0.42s cubic-bezier(0.5, 0, 0.5, 1) both;
}

@keyframes e6-02-opacity { from { opacity: 0; } }
@keyframes e6-02-rotate { from { rotate: 90deg; } to { rotate: 13deg; } }
@keyframes e6-02-translate { from { translate: calc(57px * var(--escala-narrativa)) calc(-60px * var(--escala-narrativa)); } }
@keyframes e6-02-scale { from { scale: 0.6; } }

.e6-02.visible {
  animation:
    e6-02-opacity 0.63s cubic-bezier(0.42, 0, 1, 1) both,
    e6-02-rotate 1.5s cubic-bezier(0.34, 1.20, 0.64, 1) both,
    e6-02-translate 1.5s cubic-bezier(0.34, 1.20, 0.64, 1) both,
    e6-02-scale 0.63s cubic-bezier(0.5, 0, 0.5, 1) both;
}

@keyframes e6-03-opacity { from { opacity: 0; } }
@keyframes e6-03-rotate { from { rotate: -90deg; } to { rotate: -9deg; } }
@keyframes e6-03-translate { from { translate: calc(-81px * var(--escala-narrativa)) calc(-60px * var(--escala-narrativa)); } }
@keyframes e6-03-scale { from { scale: 0.6; } }

.e6-03.visible {
  animation:
    e6-03-opacity 0.63s cubic-bezier(0.42, 0, 1, 1) both,
    e6-03-rotate 1.5s cubic-bezier(0.34, 1.20, 0.64, 1) both,
    e6-03-translate 1.5s cubic-bezier(0.34, 1.20, 0.64, 1) both,
    e6-03-scale 0.63s cubic-bezier(0.5, 0, 0.5, 1) both;
}

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

.e6-04.visible {
  animation:
    e6-04-opacity 0.42s cubic-bezier(0, 0, 0.58, 1) both,
    e6-04-scale 1s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

@keyframes e6-05-opacity { from { opacity: 0; } }
@keyframes e6-05-translate { from { translate: calc(218px * var(--escala-narrativa)) 0; } }
@keyframes e6-05-scale { from { scale: 0.8; } }

.e6-05.visible {
  animation:
    e6-05-opacity 0.315s cubic-bezier(0.5, 0, 0.5, 1) both,
    e6-05-translate 0.75s cubic-bezier(0.50, 0, 0.15, 1) both,
    e6-05-scale 0.75s cubic-bezier(0.12, 1.80, 0.32, 1) both;
}

@keyframes e6-06-opacity { from { opacity: 0; } }
@keyframes e6-06-scale { from { scale: 0.8; } }

.e6-06.visible {
  animation:
    e6-06-opacity 0.315s cubic-bezier(0.42, 0, 1, 1) both,
    e6-06-scale 0.75s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

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

.e6-llamada-01.visible {
  animation:
    e6-llamada-01-opacity 0.315s cubic-bezier(0.42, 0, 1, 1) both,
    e6-llamada-01-translate 0.75s cubic-bezier(0.50, 0, 0.15, 1) both;
}

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

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

@keyframes e6-07-opacity { from { opacity: 0; } }
@keyframes e6-07-scale { from { scale: 1.2; } }

.e6-07.visible {
  animation:
    e6-07-opacity 0.315s cubic-bezier(0.42, 0, 1, 1) both,
    e6-07-scale 0.75s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

@keyframes e6-llamada-03-opacity { from { opacity: 0; } }
@keyframes e6-llamada-03-scale { from { scale: 0.6; } }

.e6-llamada-03.visible {
  animation:
    e6-llamada-03-opacity 0.315s cubic-bezier(0.42, 0, 1, 1) both,
    e6-llamada-03-scale 0.75s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

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

.e6-09.visible {
  animation: e6-09-translate 3s cubic-bezier(0.7, -0.4, 0.4, 1.4) both;
}

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

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