/* =========================================
   NARRATIVA — escena 11 (e11)
   Base 375 × 4072. Tokens de e12. Sin banda hacia e12. z-index 1.
   HTML: narrativa-e11.ejs.
   ========================================= */

.narrativa-e11 {
  aspect-ratio: 375 / 4072;
  overflow: visible;
  z-index: 1;
  background-image: linear-gradient(
    to bottom,
    rgb(var(--efigie-escena-12-fondo-a)) 0%,
    rgb(var(--efigie-escena-12-fondo-b)) 100%
  );
  border-bottom: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
}

/* =========================================
   POSICIONAMIENTO — Escena 11
   ========================================= */

.e11-02 {
  left: 0;
  top: 4.2219%;
  width: 100%;
  height: 22.2863%;
}

.e11-01 {
  left: 8.5333%;
  top: 0;
  width: 82.9333%;
  height: 5.0860%;
}

.e11-llamada-01 {
  left: 26.1333%;
  top: 14.0649%;
  width: 47.7333%;
  transform-origin: center center;
}

.e11-04 {
  left: 0;
  top: 26.5157%;
  width: 100%;
  height: 13.8439%;
}

.e11-03 {
  left: 22.4000%;
  top: 22.6871%;
  width: 55.2000%;
  height: 7.6338%;
}

.e11-05 {
  left: 0;
  top: 50.2500%;
  width: 100%;
  height: 13.4267%;
}

.e11-06 {
  left: 8.5333%;
  top: 39.5714%;
  width: 82.9333%;
  height: 11.4534%;
}

.e11-llamada-02 {
  left: 26.9333%;
  top: 59.1802%;
  width: 46.1333%;
  transform-origin: center center;
}

.e11-07 {
  left: 0;
  top: 63.6774%;
  width: 100%;
  height: 6.1365%;
}

.e11-08 {
  left: -0.2667%;
  top: 69.8156%;
  width: 100.5333%;
  height: 13.8684%;
}

.e11-09 {
  left: 15.7333%;
  top: 68.3680%;
  width: 40.5333%;
  height: 5.6211%;
}

.e11-10 {
  left: 0;
  top: 83.64%;
  width: 100%;
  height: 16.4%;
}

.e11-11 {
  left: 25.6000%;
  top: 93.7408%;
  width: 48.8000%;
  height: 3.5837%;
}

/* =========================================
   PATRONES VISUALES
   Bordes por zona: teal (e12-fondo-b) arriba,
   rojo-magenta (e12-fondo-a) en 07/09,
   contraste oscuro en 08/10,
   rosa e13 en e11-11.
   La sombra de los abanicos va en .sombra
   del motor, no aquí.
   ========================================= */

.e11-02 {
  border-top: var(--stroke-llamadas) solid rgb(var(--efigie-escena-12-fondo-b));
  border-bottom: var(--stroke-llamadas) solid rgb(var(--efigie-escena-12-fondo-b));
}

.e11-01 {
  border: var(--stroke-llamadas) solid rgb(var(--efigie-escena-12-fondo-b));
  border-radius: var(--radio-mediano);
  box-sizing: border-box;
  overflow: hidden;
}

.e11-04 {
  border-bottom: var(--stroke-llamadas) solid rgb(var(--efigie-escena-12-fondo-b));
}

.e11-03 {
  border: var(--stroke-llamadas) solid rgb(var(--efigie-escena-12-fondo-b));
  border-radius: var(--radio-mediano);
  box-sizing: border-box;
  overflow: hidden;
}

.e11-05 {
  border-top: var(--stroke-llamadas) solid rgb(var(--efigie-escena-12-fondo-b));
}

.e11-06 {
  border: var(--stroke-llamadas) solid rgb(var(--efigie-escena-12-fondo-b));
  border-radius: var(--radio-mediano);
  box-sizing: border-box;
  overflow: hidden;
}

.e11-07 {
  border-top: var(--stroke-llamadas) solid rgb(var(--efigie-escena-12-fondo-a));
  border-bottom: var(--stroke-llamadas) solid rgb(var(--efigie-escena-12-fondo-a));
}

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

.e11-09 {
  border: var(--stroke-llamadas) solid rgb(var(--efigie-escena-12-fondo-a));
  border-radius: var(--radio-mediano);
  box-sizing: border-box;
  overflow: hidden;
}

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

.e11-11 {
  border: var(--stroke-llamadas) solid rgb(var(--efigie-escena-13-fondo-a));
  border-radius: var(--radio-mediano);
  box-sizing: border-box;
  overflow: hidden;
}

/* La escena hereda .e11-xx para left/top/width/height; no pinta el recorte. */
.carrusel-3d-escena.e11-01,
.carrusel-3d-escena.e11-03,
.carrusel-3d-escena.e11-06,
.carrusel-3d-escena.e11-09,
.carrusel-3d-escena.e11-11 {
  border: none;
  overflow: visible;
  background-image: none;
}

/* =========================================
   ANIMACIONES — una curva por propiedad
   (Figma Motion). Llamadas: fade + scale.
   ========================================= */

@keyframes e11-llamada-01-opacity { from { opacity: 0; } }
@keyframes e11-llamada-01-scale { from { scale: 1.6; } }

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

@keyframes e11-llamada-02-opacity { from { opacity: 0; } }
@keyframes e11-llamada-02-scale { from { scale: 1.6; } }

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