/* =========================================
   NARRATIVA — escena 13 (e13) — última
   Base 375 × 3388. Sin banda e12→e13. Sin llamadas.
   HTML: narrativa-e13.ejs. Tops/left INTENCIONALES; no revertir al dump.
   ========================================= */

.narrativa-e13 {
  aspect-ratio: 375 / 3388;
  overflow: visible;
  background-image: linear-gradient(
    to bottom,
    rgb(var(--efigie-escena-13-fondo-c)) 0%,
    rgb(var(--efigie-escena-13-fondo-a)) 7.39%,
    rgb(var(--efigie-guerra)) 26.42%,
    rgb(var(--efigie-paz)) 53.64%,
    rgb(var(--efigie-portada-fondo)) 78.85%
  );
}

/* PNG: borde y radio van en el archivo.
   JPG e13-42 / e13-46: caja CSS, cover. */
.narrativa-e13 .narrativa-foto {
  background-size: contain;
  filter: drop-shadow(var(--sombra-narrativa));
}

.narrativa-e13 .e13-42,
.narrativa-e13 .e13-46 {
  background-size: cover;
  filter: none;
}

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

.e13-46 {
  /* EXCEPCIÓN: radio de estadio de Figma (no hay token 190px). */
  border-radius: 190px;
}

/* =========================================
   KEYFRAMES
   --ty × --escala-narrativa; --rot0 → --rot1
   (CW positivo, ya convertidos).
   ========================================= */

@keyframes e13-entrada {
  from {
    opacity: 0;
    translate: 0 var(--ty);
    rotate: var(--rot0);
  }
  to {
    opacity: 1;
    translate: 0 0;
    rotate: var(--rot1);
  }
}

@keyframes e13-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes e13-rise {
  from { translate: 0 var(--ty); }
  to { translate: 0 0; }
}

@keyframes e13-spin {
  from { rotate: var(--rot0); }
  to { rotate: var(--rot1); }
}

/* =========================================
   POSICIONAMIENTO + MOTION
   Triggers del dump 10–20 = 0.10–0.20
   (umbral desde abajo). Traslaciones ×
   --escala-narrativa.
   ========================================= */

.e13-01 {
  left: 37.17%;
  top: 2.63%;
  width: 38.94%;
  height: 6.56%;
  z-index: 2;
  --ty: calc(-25px * var(--escala-narrativa));
  --rot0: -35deg;
  --rot1: 7.96deg;
  --e13-duracion: 0.5s;
  --e13-curva: cubic-bezier(0.45, 1.45, 0.80, 1);
}

.e13-02 {
  left: 23.92%;
  top: 7.90%;
  width: 52.24%;
  height: 5.78%;
  z-index: 6;
  --ty: calc(-24px * var(--escala-narrativa));
  --rot0: 24deg;
  --rot1: 33.06deg;
  --e13-duracion: 0.75s;
  --e13-curva: cubic-bezier(0.34, 1.20, 0.64, 1);
}

.e13-03 {
  left: -0.86%;
  top: 3.71%;
  width: 47.41%;
  height: 5.66%;
  z-index: 1;
  --ty: calc(-21px * var(--escala-narrativa));
  --rot0: -27deg;
  --rot1: 165deg;
  --e13-duracion: 0.35s;
  --e13-curva: cubic-bezier(0, 0, 0.58, 1);
}

.e13-04 {
  left: -18.08%;
  top: 6.88%;
  width: 63.73%;
  height: 6.11%;
  z-index: 4;
  --ty: calc(-24px * var(--escala-narrativa));
  --rot0: -35deg;
  --rot1: 143.09deg;
  --e13-duracion: 0.5s;
  --e13-curva: cubic-bezier(0.45, 1.45, 0.80, 1);
}

.e13-05 {
  left: 30.95%;
  top: 11.67%;
  width: 32.89%;
  height: 11.53%;
  z-index: 5;
  --ty: calc(-30px * var(--escala-narrativa));
  --rot0: -34deg;
  --rot1: -11.48deg;
  --e13-duracion: 0.75s;
  --e13-curva: cubic-bezier(0.42, 0, 0.58, 1);
}

.e13-07 {
  left: 37.42%;
  top: 12.98%;
  width: 55.25%;
  height: 7.38%;
  z-index: 13;
  --ty: calc(-30px * var(--escala-narrativa));
  --rot0: -32deg;
  --rot1: -37.16deg;
  --e13-duracion: 0.75s;
  --e13-curva: cubic-bezier(0, 0, 0.58, 1);
}

.e13-08 {
  left: -8.50%;
  top: 12.37%;
  width: 56.84%;
  height: 5.66%;
  z-index: 10;
  --ty: calc(-27px * var(--escala-narrativa));
  --rot0: 44deg;
  --rot1: 158.70deg;
  --e13-duracion: 0.5s;
  --e13-curva: cubic-bezier(0.45, 1.45, 0.80, 1);
}

.e13-09 {
  left: 55.55%;
  top: 10.75%;
  width: 61.23%;
  height: 5.54%;
  z-index: 12;
  --ty: calc(-26px * var(--escala-narrativa));
  --rot0: 34deg;
  --rot1: -133.54deg;
  --e13-duracion: 0.75s;
  --e13-curva: cubic-bezier(0.22, 0.68, 0, 1);
}

.e13-10 {
  left: 38.32%;
  top: 18.65%;
  width: 77.48%;
  height: 3.73%;
  z-index: 20;
  --ty: calc(-26px * var(--escala-narrativa));
  --rot0: -39deg;
  --rot1: 146.53deg;
  --e13-duracion: 0.5s;
  --e13-curva: cubic-bezier(0.175, 1.40, 0.55, 1);
}

.e13-11 {
  left: -1.22%;
  top: 16.17%;
  width: 45.30%;
  height: 6.42%;
  z-index: 9;
  --ty: calc(-29px * var(--escala-narrativa));
  --rot0: 12deg;
  --rot1: -65.32deg;
  --e13-duracion: 0.5s;
  --e13-curva: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.e13-12 {
  left: -12.18%;
  top: 20.16%;
  width: 73.01%;
  height: 3.84%;
  z-index: 11;
  --ty: calc(-21px * var(--escala-narrativa));
  --rot0: -30deg;
  --rot1: -13.42deg;
  --e13-duracion: 0.75s;
  --e13-curva: cubic-bezier(0.34, 1.20, 0.64, 1);
}

.e13-13 {
  left: -18.80%;
  top: 22.78%;
  width: 107.37%;
  height: 7.02%;
  z-index: 7;
  --ty: calc(-29px * var(--escala-narrativa));
  --rot0: -12deg;
  --rot1: 150deg;
  --e13-duracion: 0.75s;
  --e13-curva: cubic-bezier(0.34, 1.20, 0.64, 1);
}

.e13-14 {
  left: 22.78%;
  top: 26.90%;
  width: 39.82%;
  height: 8.57%;
  z-index: 8;
  --ty: calc(-22px * var(--escala-narrativa));
  --rot0: -15deg;
  --rot1: 36.05deg;
  --e13-duracion: 0.35s;
  --e13-curva: cubic-bezier(0.45, 1.45, 0.80, 1);
}

.e13-15 {
  left: 56.36%;
  top: 28.24%;
  width: 52.70%;
  height: 5.87%;
  z-index: 24;
  --ty: calc(-25px * var(--escala-narrativa));
  --rot0: -17deg;
  --rot1: 45deg;
  --e13-duracion: 0.35s;
  --e13-curva: cubic-bezier(0.22, 0.68, 0, 1);
}

.e13-16 {
  left: 72.91%;
  top: 16.33%;
  width: 36.58%;
  height: 14.43%;
  z-index: 19;
  --ty: calc(-30px * var(--escala-narrativa));
  --rot0: 22deg;
  --rot1: 4.61deg;
  --e13-duracion: 0.5s;
  --e13-curva: cubic-bezier(0.34, 1.20, 0.64, 1);
}

.e13-17 {
  left: -10.57%;
  top: 32.86%;
  width: 44.49%;
  height: 4.95%;
  z-index: 21;
  --ty: calc(-27px * var(--escala-narrativa));
  --rot0: -38deg;
  --rot1: 125.66deg;
  --e13-duracion: 0.5s;
  --e13-curva: cubic-bezier(0.175, 1.40, 0.55, 1);
}

.e13-18 {
  left: 41.72%;
  top: 29.7%;
  width: 51.58%;
  height: 9.47%;
  z-index: 23;
  --ty: calc(-29px * var(--escala-narrativa));
  --rot0: 38deg;
  --rot1: 72.84deg;
  --e13-duracion: 0.75s;
  --e13-curva: cubic-bezier(0.22, 0.68, 0, 1);
}

.e13-19 {
  left: -6.40%;
  top: 30.08%;
  width: 31.20%;
  height: 5.11%;
  z-index: 22;
  --ty: calc(-30px * var(--escala-narrativa));
  --rot0: -18deg;
  --rot1: -90deg;
  --e13-duracion: 0.75s;
  --e13-curva: cubic-bezier(0.42, 0, 0.58, 1);
}

.e13-20 {
  left: 59.66%;
  top: 35.93%;
  width: 57.36%;
  height: 4.66%;
  z-index: 15;
  --ty: calc(-29px * var(--escala-narrativa));
  --rot0: -27deg;
  --rot1: 17.48deg;
  --e13-duracion: 0.5s;
  --e13-curva: cubic-bezier(0, 0, 0.58, 1);
}

.e13-21 {
  left: -15.86%;
  top: 36.33%;
  width: 67.33%;
  height: 5.94%;
  z-index: 16;
  --ty: calc(-20px * var(--escala-narrativa));
  --rot0: -27deg;
  --rot1: -60deg;
  --e13-duracion: 0.35s;
  --e13-curva: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.e13-22 {
  left: 3.53%;
  top: 42.04%;
  width: 38.50%;
  height: 9.47%;
  z-index: 18;
  --ty: calc(-25px * var(--escala-narrativa));
  --rot0: -23deg;
  --rot1: 27.68deg;
  --e13-duracion: 0.75s;
  --e13-curva: cubic-bezier(0.34, 1.20, 0.64, 1);
}

.e13-23 {
  left: 40.53%;
  top: 38.74%;
  width: 75.76%;
  height: 9.10%;
  z-index: 14;
  --ty: calc(-29px * var(--escala-narrativa));
  --rot0: 41deg;
  --rot1: -43.29deg;
  --e13-duracion: 0.5s;
  --e13-curva: cubic-bezier(0.175, 1.40, 0.55, 1);
}

.e13-24 {
  left: 24.11%;
  top: 37.45%;
  width: 25.01%;
  height: 7.12%;
  z-index: 32;
  --ty: calc(-30px * var(--escala-narrativa));
  --rot0: 16deg;
  --rot1: 2.08deg;
  --e13-duracion: 0.35s;
  --e13-curva: cubic-bezier(0.34, 1.20, 0.64, 1);
}

.e13-25 {
  left: 28.72%;
  top: 45.44%;
  width: 54.40%;
  height: 4.79%;
  z-index: 40;
  --ty: calc(-26px * var(--escala-narrativa));
  --rot0: 26deg;
  --rot1: -8.32deg;
  --e13-duracion: 0.75s;
  --e13-curva: cubic-bezier(0.175, 1.40, 0.55, 1);
}

.e13-26 {
  left: 7.87%;
  top: 39.51%;
  width: 95.73%;
  height: 2.30%;
  z-index: 25;
  --ty: calc(-28px * var(--escala-narrativa));
  --rot0: -24deg;
  --rot1: -90deg;
  --e13-duracion: 0.75s;
  --e13-curva: cubic-bezier(0.42, 0, 0.58, 1);
}

.e13-27 {
  left: -4.00%;
  top: 41.09%;
  width: 26.67%;
  height: 5.58%;
  z-index: 26;
  --ty: calc(-24px * var(--escala-narrativa));
  --rot0: -11deg;
  --rot1: -180deg;
  --e13-duracion: 0.35s;
  --e13-curva: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.e13-28 {
  left: 13.58%;
  top: 52.10%;
  width: 67.05%;
  height: 2.60%;
  z-index: 39;
  --ty: calc(-26px * var(--escala-narrativa));
  --rot0: 22deg;
  --rot1: 100.17deg;
  --e13-duracion: 0.35s;
  --e13-curva: cubic-bezier(0.45, 1.45, 0.80, 1);
}

.e13-29 {
  left: 55.60%;
  top: 50.17%;
  width: 44.00%;
  height: 3.25%;
  z-index: 28;
  --ty: calc(-30px * var(--escala-narrativa));
  --rot0: -30deg;
  --rot1: 73.32deg;
  --e13-duracion: 0.75s;
  --e13-curva: cubic-bezier(0.22, 0.68, 0, 1);
}

.e13-30 {
  left: 84.05%;
  top: 42.66%;
  width: 17.19%;
  height: 5.71%;
  z-index: 31;
  --ty: calc(-30px * var(--escala-narrativa));
  --rot0: -34deg;
  --rot1: 170.70deg;
  --e13-duracion: 0.75s;
  --e13-curva: cubic-bezier(0.45, 1.45, 0.80, 1);
}

.e13-31 {
  left: 15.61%;
  top: 50.7%;
  width: 50.26%;
  height: 4.72%;
  z-index: 17;
  --ty: calc(-29px * var(--escala-narrativa));
  --rot0: 36deg;
  --rot1: -24.81deg;
  --e13-duracion: 0.75s;
  --e13-curva: cubic-bezier(0.34, 1.20, 0.64, 1);
}

.e13-32 {
  left: 29.36%;
  top: 56.60%;
  width: 50.65%;
  height: 4.15%;
  z-index: 38;
  --ty: calc(-24px * var(--escala-narrativa));
  --rot0: -16deg;
  --rot1: 141.64deg;
  --e13-duracion: 0.5s;
  --e13-curva: cubic-bezier(0.175, 1.40, 0.55, 1);
}

.e13-33 {
  left: -11.01%;
  top: 55.93%;
  width: 47.29%;
  height: 7.87%;
  z-index: 34;
  --ty: calc(-30px * var(--escala-narrativa));
  --rot0: -18deg;
  --rot1: 47.92deg;
  --e13-duracion: 0.35s;
  --e13-curva: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.e13-34 {
  left: -14.93%;
  top: 50.53%;
  width: 48.80%;
  height: 4.46%;
  z-index: 29;
  --ty: calc(-24px * var(--escala-narrativa));
  --rot0: 35deg;
  --rot1: -91.94deg;
  --e13-duracion: 0.35s;
  --e13-curva: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.e13-35 {
  left: 56.41%;
  top: 49.3%;
  width: 72.32%;
  height: 3.58%;
  z-index: 27;
  --ty: calc(-22px * var(--escala-narrativa));
  --rot0: -18deg;
  --rot1: -69.83deg;
  --e13-duracion: 0.5s;
  --e13-curva: cubic-bezier(0.22, 0.68, 0, 1);
}

.e13-36 {
  left: 29.92%;
  top: 58.38%;
  width: 78.57%;
  height: 6.76%;
  z-index: 35;
  --ty: calc(-29px * var(--escala-narrativa));
  --rot0: 26deg;
  --rot1: 159.05deg;
  --e13-duracion: 0.5s;
  --e13-curva: cubic-bezier(0.175, 1.40, 0.55, 1);
}

.e13-37 {
  left: -1.07%;
  top: 53.21%;
  width: 39.30%;
  height: 5.89%;
  z-index: 37;
  --ty: calc(-22px * var(--escala-narrativa));
  --rot0: 11deg;
  --rot1: -78.35deg;
  --e13-duracion: 0.5s;
  --e13-curva: cubic-bezier(0.45, 1.45, 0.80, 1);
}

.e13-38 {
  left: 51.92%;
  top: 53.91%;
  width: 60.93%;
  height: 5.19%;
  z-index: 30;
  --ty: calc(-20px * var(--escala-narrativa));
  --rot0: -12deg;
  --rot1: -135deg;
  --e13-duracion: 0.5s;
  --e13-curva: cubic-bezier(0.175, 1.40, 0.55, 1);
}

.e13-39 {
  left: 17.25%;
  top: 60.35%;
  width: 70.32%;
  height: 4.36%;
  z-index: 36;
  --ty: calc(-26px * var(--escala-narrativa));
  --rot0: -23deg;
  --rot1: -15.05deg;
  --e13-duracion: 0.5s;
  --e13-curva: cubic-bezier(0, 0, 0.58, 1);
}

.e13-40 {
  left: 9.80%;
  top: 60.50%;
  width: 41.07%;
  height: 4.96%;
  z-index: 44;
  --ty: calc(-20px * var(--escala-narrativa));
  --rot0: 26deg;
  --rot1: -163.45deg;
  --e13-duracion: 0.35s;
  --e13-curva: cubic-bezier(0.34, 1.20, 0.64, 1);
}

.e13-41 {
  left: 23.85%;
  top: 64.79%;
  width: 43.75%;
  height: 6.30%;
  z-index: 42;
  --ty: calc(-29px * var(--escala-narrativa));
  --rot0: -14deg;
  --rot1: 139.93deg;
  --e13-duracion: 0.35s;
  --e13-curva: cubic-bezier(0, 0, 0.58, 1);
}

.e13-43 {
  left: 52.40%;
  top: 64.33%;
  width: 54.92%;
  height: 5.97%;
  z-index: 41;
  --ty: calc(-21px * var(--escala-narrativa));
  --rot0: 37deg;
  --rot1: -11.65deg;
  --e13-duracion: 0.75s;
  --e13-curva: cubic-bezier(0.22, 0.68, 0, 1);
}

.e13-44 {
  left: -17.61%;
  top: 64.55%;
  width: 64.93%;
  height: 4.79%;
  z-index: 43;
  --ty: calc(-29px * var(--escala-narrativa));
  --rot0: -11deg;
  --rot1: -101.45deg;
  --e13-duracion: 0.75s;
  --e13-curva: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.e13-45 {
  left: 4.27%;
  top: 57.06%;
  width: 91.47%;
  height: 15.13%;
  z-index: 33;
  --ty: calc(-30px * var(--escala-narrativa));
  --rot0: -14deg;
  --rot1: -180deg;
  --e13-duracion: 0.75s;
  --e13-curva: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.e13-06 {
  left: 43.06%;
  top: 5.69%;
  width: 75.41%;
  height: 8.26%;
  z-index: 3;
  --ty: calc(-20px * var(--escala-narrativa));
  --rot0: -25deg;
  --rot1: -158.77deg;
}

.e13-42 {
  left: 30.58%;
  top: 70.51%;
  width: 39.11%;
  height: 4.33%;
  z-index: 45;
  --rot0: -75deg;
  --rot1: -135deg;
}

.e13-46 {
  left: 8.53%;
  top: 74.09%;
  width: 82.93%;
  height: 10.60%;
  z-index: 46;
  --ty: calc(-85.45px * var(--escala-narrativa));
}

.narrativa-e13 .narrativa-foto[data-anim-fade].visible:not(.e13-06):not(.e13-42):not(.e13-46) {
  animation: e13-entrada var(--e13-duracion) var(--e13-curva) both;
}

.e13-06.visible {
  animation:
    e13-fade 0.315s cubic-bezier(0.42, 0, 0.58, 1) both,
    e13-rise 0.75s cubic-bezier(0.42, 0, 0.58, 1) both,
    e13-spin 0.75s cubic-bezier(0.42, 0, 0.58, 1) both;
}

.e13-42.visible {
  animation:
    e13-fade 0.629s cubic-bezier(0.175, 1.40, 0.55, 1) both,
    e13-spin 1.5s cubic-bezier(0.14, 1.65, 0.41, 1) both;
}

.e13-46.visible {
  animation:
    e13-fade 0.472s cubic-bezier(0.42, 0, 1, 1) both,
    e13-rise 1.5s cubic-bezier(0.175, 1.40, 0.55, 1) both;
}