/* =========================================
   NARRATIVA — escena 12 (e12)
   Base 375 × 4752. Tokens de e13. Sin banda hacia e13. Sin z-index de escena.
   HTML: narrativa-e12.ejs. e12-01 z-index 2 sobre e11-10.
   ========================================= */

.narrativa-e12 {
  aspect-ratio: 375 / 4752;
  overflow: visible;
  background-image: linear-gradient(
    to bottom,
    rgb(var(--efigie-escena-12-fondo-b)) 0%,
    rgb(var(--efigie-escena-13-fondo-a)) 13.33%,
    rgb(var(--efigie-escena-13-fondo-b)) 84.77%,
    rgb(var(--efigie-escena-13-fondo-c)) 91.55%
  );
  border-top: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
}

/* =========================================
   POSICIONAMIENTO — Escena 12
   ========================================= */

.e12-01 {
  left: 8.5333%;
  top: -1.0644%;
  width: 82.9333%;
  height: 9.8192%;
  z-index: 2;
}

.e12-02 {
  left: 26.9333%;
  top: 6.3852%;
  width: 77.3333%;
  height: 9.1541%;
}

.e12-03 {
  left: 0;
  top: 16.2126%;
  width: 100%;
  height: 11.8477%;
}

.e12-04 {
  left: 4.2667%;
  top: 27.3657%;
  width: 91.4667%;
  height: 12.8114%;
  transform-origin: center center;
}

.e12-llamada-01 {
  left: 58.1333%;
  top: 26.6291%;
  width: 44.5333%;
}

.e12-05 {
  left: 0;
  top: 39.5145%;
  width: 100%;
  height: 9.7643%;
}

.e12-llamada-02 {
  left: 28.8000%;
  top: 48.6896%;
  width: 42.4000%;
}

.e12-06 {
  left: 33.0667%;
  top: 49.9457%;
  width: 58.4000%;
  height: 21.4057%;
}

.e12-07 {
  left: 4.2667%;
  top: 56.1747%;
  width: 71.4667%;
  height: 3.1776%;
}

.e12-08 {
  left: 13.6000%;
  top: 61.9050%;
  width: 31.4667%;
  height: 10.1221%;
}

.e12-09 {
  left: 0;
  top: 72.7062%;
  width: 100%;
  height: 17.0876%;
}

.e12-llamada-03 {
  left: 16.2667%;
  top: 85.0637%;
  width: 67.7333%;
  transform-origin: center center;
}

.e12-10 {
  left: 0;
  top: 89.7938%;
  width: 100%;
  height: 10.2062%;
}

.e12-o01 {
  left: 2.1333%;
  top: 89.9621%;
  width: 96.2667%;
  height: 9.4908%;
  transform-origin: center center;
}

/* =========================================
   PATRONES VISUALES
   Bordes --color-contraste-oscuro.
   La sombra de los abanicos va en .sombra
   del motor, no aquí.
   ========================================= */

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

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

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

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

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

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

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

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

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

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

.e12-o01 {
  overflow: hidden;
  background-size: contain;
}

/* La escena hereda .e12-xx para left/top/width/height; no pinta el recorte. */
.carrusel-3d-escena.e12-07,
.carrusel-3d-escena.e12-08 {
  border: none;
  overflow: visible;
  background-image: none;
}

/* =========================================
   ANIMACIONES — una curva por propiedad
   (Figma Motion). Traslaciones × --escala-narrativa.
   e12-10: trigger 0.15 (sin anotación en Figma;
   misma cadencia que e12-llamada-03).
   ========================================= */

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

.e12-01.visible {
  animation:
    e12-01-opacity 0.31s cubic-bezier(0.42, 0, 1, 1) both,
    e12-01-translate 1s cubic-bezier(0.175, 1.40, 0.55, 1) both;
}

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

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

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

.e12-04.visible {
  animation:
    e12-04-opacity 0.31s cubic-bezier(0, 0, 0.58, 1) both,
    e12-04-scale 1s cubic-bezier(0.16, 1.48, 0.50, 1) both;
}

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

.e12-llamada-01.visible {
  animation:
    e12-llamada-01-opacity 0.31s cubic-bezier(0, 0, 0.58, 1) both,
    e12-llamada-01-translate 0.75s cubic-bezier(0.27, 1.28, 0.60, 1) both;
}

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

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

@keyframes e12-06-opacity { from { opacity: 0; } }
@keyframes e12-06-translate { from { translate: 0 calc(64.86px * var(--escala-narrativa)); } }
@keyframes e12-06-blur { from { filter: blur(24px); } to { filter: blur(0); } }

.e12-06.visible {
  animation:
    e12-06-opacity 0.31s cubic-bezier(0.42, 0, 1, 1) both,
    e12-06-translate 0.75s ease-out both,
    e12-06-blur .5s ease-out both;
}

@keyframes e12-09-opacity { from { opacity: 0; } }
@keyframes e12-09-translate { from { translate: 0 calc(51.43px * var(--escala-narrativa)); } }

.e12-09.visible {
  animation:
    e12-09-opacity 0.31s cubic-bezier(0, 0, 0.58, 1) both,
    e12-09-translate 0.75s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

@keyframes e12-llamada-03-opacity { from { opacity: 0; } }
@keyframes e12-llamada-03-translate { from { translate: 0 calc(129.35px * var(--escala-narrativa)); } }
@keyframes e12-llamada-03-scale { from { scale: 0.1; } }

.e12-llamada-03.visible {
  animation:
    e12-llamada-03-opacity 0.31s cubic-bezier(0.42, 0, 1, 1) both,
    e12-llamada-03-translate 0.6s cubic-bezier(0.34, 1.20, 0.64, 1) both,
    e12-llamada-03-scale 1s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

@keyframes e12-10-opacity { from { opacity: 0; } }
@keyframes e12-10-translate { from { translate: 0 calc(51.43px * var(--escala-narrativa)); } }

.e12-10.visible {
  animation:
    e12-10-opacity 0.31s cubic-bezier(0, 0, 0.58, 1) both,
    e12-10-translate 0.75s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

@keyframes e12-o01-opacity { from { opacity: 0; } }
@keyframes e12-o01-scale { from { scale: 1.2; } }

.e12-o01.visible {
  animation:
    e12-o01-opacity 0.63s cubic-bezier(0.685, 0, 1, 1) both,
    e12-o01-scale 1s cubic-bezier(0.50, 0, 0.15, 1) both;
}