/* =========================================
   NARRATIVA — escena 3 (e3)
   Base 375 × 5577. Degradado escena-4 (stops INTENCIONALES).
   Al final: transición e3→e4 (5 carruseles). HTML: narrativa-e3.ejs.
   ========================================= */

.narrativa-e3 {
  aspect-ratio: 375 / 5577;
  overflow: visible;
  background-image: linear-gradient(
    to bottom,
    rgb(var(--efigie-escena-4-fondo-a)) 23.31%, /* 23.31% INTENCIONAL (Figma: to top −56.03%; cálculo manual) */
    rgb(var(--efigie-escena-4-fondo-b)) 70.44% /* 70.44% INTENCIONAL (Figma: 156.03%; cálculo manual) */
  );
}

/* =========================================
   POSICIONAMIENTO — Escena 3
   ========================================= */

.e3-01 {
  left: 0%;
  top: -0.015%;
  width: 100%;
  height: 10.095%;
}

.e3-03 {
  left: 0%;
  top: 10.618%;
  width: 77.067%;
  height: 9.198%;
}

.e3-02 {
  left: 38.933%;
  top: 8.914%;
  width: 52.533%;
  height: 2.349%;
  translate: calc(229px * var(--escala-narrativa)) 0;
}

.e3-llamada-01 {
  left: 11.467%;
  top: 8.287%;
  width: 38.667%;
  transform-origin: 0% 50%;
}

.e3-05 {
  left: 0%;
  top: 23.994%;
  width: 100%;
  height: 3.281%;
  transform-origin: 100% 50%;
  scale: 2 1;
}

.e3-04 {
  left: 17.067%;
  top: 18.724%;
  width: 82.933%;
  height: 5.576%;
}

.e3-llamada-02 {
  left: 50.4%;
  top: 18.096%;
  width: 44.8%;
  transform-origin: 100% 50%;
}

.e3-06 {
  left: 0%;
  top: 27.274%;
  width: 100%;
  height: 2.654%;
  transform-origin: 0% 50%;
  scale: 2 1;
}

.e3-07 {
  left: 0%;
  top: 29.929%;
  width: 100%;
  height: 6.724%;
}

.e3-llamada-03 {
  left: 33.333%;
  top: 29.104%;
  width: 33.333%;
}

.e3-llamada-03 .llamada__texto {
  white-space: pre-line;
}

.e3-08 {
  left: 18.4%;
  top: 35.506%;
  width: 151.733%;
  height: 6.814%;
}

.e3-o01 {
  left: -12.36%;
  top: 42.413%;
  width: 124.451%;
  height: 6.267%;
}

.e3-09 {
  left: 4.267%;
  top: 49.31%;
  width: 91.467%;
  height: 4.101%;
}

.e3-10 {
  left: -1.333%;
  top: 53.988%;
  width: 102.667%;
  height: 10.382%;
}

.e3-llamada-compuesta-04 {
  left: 10.4%;
  top: 52.052%;
  width: 50.667%;
  height: 3.066%;
}

/* Subcajas = rectángulos del boolean en el SVG (viewBox 190×171):
   superior 101×92 en (0, 0); inferior 147×79 en (43, 92). */
.e3-llamada-compuesta-04__caja--superior {
  left: 0;
  top: 0;
  width: calc(101 / 190 * 100%);
  height: calc(92 / 171 * 100%);
  text-align: left;
  padding: var(--espacio-medio) var(--espacio-largo);
}

.e3-llamada-compuesta-04__caja--inferior {
  left: calc(43 / 190 * 100%);
  top: calc(92 / 171 * 100%);
  width: calc(147 / 190 * 100%);
  height: calc(79 / 171 * 100%);
  text-align: left;
  padding: var(--espacio-medio) 40px; /* EXCEPCIÓN: 40px compositivo, caja de llamada compuesta */
}

.e3-llamada-05 {
  left: 40%;
  top: 63.465%;
  width: 60%;
  transform-origin: 100% 50%;
}

.e3-12 {
  left: -116.533%;
  top: 82.744%;
  width: 216.533%;
  height: 11.296%;
  translate: calc(32px * var(--escala-narrativa)) calc(1px * var(--escala-narrativa));
}

.e3-o02 {
  position: absolute;
  left: -27.733%;
  top: 64.957%;
  width: 160%;
  height: 9.683%;
  filter: drop-shadow(var(--sombra-narrativa));
}

.e3-o02-2 {
  /* Figma daba 49.333% (misma x que o02-1); quedaba detrás. left 0 la saca a la izquierda. */
  left: 0%;
  top: 0%;
  width: 49.333%;
  height: 86.296%;
}

.e3-o02-1 {
  left: 49.333%;
  top: 13.519%;
  width: 50.667%;
  height: 86.481%;
}

.e3-o03 {
  position: absolute;
  left: -0.267%;
  /* Misma base que e3-12: top12 + alto12 − alto o03. % del mismo padre; no cambia con el viewport. */
  top: calc(82.744% + 11.296% - 8.248%);
  width: 100.267%;
  height: 8.248%;
  pointer-events: none;
  background-image: linear-gradient(
    to top,
    rgba(var(--efigie-escena-4-fondo-b), 1),
    rgba(var(--efigie-escena-4-fondo-b), 0)
  );
}

.e3-11 {
  left: 8.533%;
  top: 73.779%;
  width: 82.933%;
  height: 9.914%;
  scale: 1.1;
}

.e3-texto--dias {
  position: absolute;
  left: 21.333%;
  top: 67.394%;
  width: 57.6%;
  height: 25.728%;
  z-index: 1;
}

.e3-llamada-06,
.e3-llamada-07,
.e3-llamada-08,
.e3-llamada-09,
.e3-llamada-10 {
  width: 37.037%;
  height: 4.461%;
  padding: 0;
  rotate: -20.96deg;
}

.e3-llamada-06 {
  left: 35.04%;
  top: 0.85%;
}

.e3-llamada-07 {
  left: 38.84%;
  top: 16.87%;
}

.e3-llamada-08 {
  left: 0%;
  top: 34.43%;
}

.e3-llamada-09 {
  left: 62.73%;
  top: 49.56%;
}

.e3-llamada-10 {
  left: 36.11%;
  top: 68.86%;
}

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

.e3-01 {
  border-bottom: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-radius: 0;
}

.e3-03 {
  border-top: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-bottom: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-right: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-left: none;
  border-radius: 0 var(--radio-mediano) var(--radio-mediano) 0;
}

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

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

.e3-04 {
  border-top: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-bottom: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-left: 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);
}

.e3-06 {
  border-bottom: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-radius: 0;
}

.e3-07 {
  border-bottom: var(--stroke-llamadas) solid var(--color-contraste-oscuro);
  border-radius: 0;
}

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

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

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

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

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

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

.e3-o02-2 {
  border-radius: var(--radio-mediano) var(--radio-mediano) 0 var(--radio-mediano);
  overflow: hidden;
}

.e3-o02-1 {
  border-radius: 0 var(--radio-mediano) var(--radio-mediano) var(--radio-mediano);
  overflow: hidden;
}

.e3-11 {
  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)
   Traslaciones × --escala-narrativa.
   ========================================= */

@keyframes e3-03-translate {
  from { translate: calc(-289px * var(--escala-narrativa)) 0; }
  to { translate: 0 0; }
}

.e3-03.visible {
  animation: e3-03-translate 0.55s cubic-bezier(0, 0, 0.003, 0.967) both;
}

@keyframes e3-02-translate {
  from { translate: calc(229px * var(--escala-narrativa)) 0; }
  to { translate: 0 0; }
}

.e3-02.visible {
  animation: e3-02-translate 0.75s cubic-bezier(0.34, 1.42, 0.64, 1) both;
}

@keyframes e3-llamada-01-opacity { from { opacity: 0; } }
@keyframes e3-llamada-01-rotate { from { rotate: -90deg; } }

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

@keyframes e3-05-scale {
  from { scale: 2 1; }
  to { scale: 1 1; }
}

.e3-05.visible {
  animation: e3-05-scale 0.721s cubic-bezier(0, 0, 0.121, 1) both;
}

@keyframes e3-04-translate {
  from { translate: calc(311px * var(--escala-narrativa)) 0; }
  to { translate: 0 0; }
}

.e3-04.visible {
  animation: e3-04-translate 0.4s cubic-bezier(0, 0, 0, 0.97) both;
}

@keyframes e3-llamada-02-opacity { from { opacity: 0; } }
@keyframes e3-llamada-02-rotate { from { rotate: 90deg; } }

.e3-llamada-02.visible {
  animation:
    e3-llamada-02-opacity 0.55s cubic-bezier(0, 0, 0.58, 1) both,
    e3-llamada-02-rotate 1s cubic-bezier(0.34, 1.52, 0.64, 1) both;
}

@keyframes e3-06-scale {
  from { scale: 2 1; }
  to { scale: 1 1; }
}

.e3-06.visible {
  animation: e3-06-scale 0.75s cubic-bezier(0, 0, 0.164, 1) both;
}

@keyframes e3-llamada-03-opacity { from { opacity: 0; } }
@keyframes e3-llamada-03-scale { from { scale: 0.8; } }

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

@keyframes e3-08-pingpong {
  from { translate: calc(-295px * var(--escala-narrativa)) 0; }
  to { translate: calc(-36px * var(--escala-narrativa)) 0; }
}

.e3-08 {
  animation: e3-08-pingpong 2s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
}

@keyframes e3-o01-loop {
  from { rotate: 405deg; }
  to { rotate: 45deg; }
}

.e3-o01 {
  animation: e3-o01-loop 3s linear infinite;
}

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

.e3-09.visible {
  animation:
    e3-09-opacity 0.55s cubic-bezier(0.5, 0, 0.5, 1) both,
    e3-09-translate 1s cubic-bezier(0.34, 1.42, 0.64, 1) both;
}

@keyframes e3-comp04-opacity { from { opacity: 0; } }
@keyframes e3-comp04-scale { from { scale: 1.3; } }

.e3-llamada-compuesta-04.visible {
  animation:
    e3-comp04-opacity 0.55s cubic-bezier(0.5, 0, 0.5, 1) both,
    e3-comp04-scale 1s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}

@keyframes e3-llamada-05-translate {
  from { translate: calc(225px * var(--escala-narrativa)) 0; }
  to { translate: 0 0; }
}

.e3-llamada-05.visible {
  animation: e3-llamada-05-translate 0.55s cubic-bezier(0, 0, 0.252, 1) both;
}

@keyframes e3-12-pan {
  from {
    translate:
      calc(32px * var(--escala-narrativa))
      calc(1px * var(--escala-narrativa));
  }
  to { translate: calc(437px * var(--escala-narrativa)) 0; }
}

.e3-12.visible {
  animation: e3-12-pan 2s cubic-bezier(0.347, 0.004, 0.124, 1.011) both;
}

@keyframes e3-11-scale {
  from { scale: 1.1; }
  to { scale: 1; }
}

.e3-11.visible {
  animation: e3-11-scale 2s cubic-bezier(0.34, 1.42, 0.64, 1) both;
}

@keyframes e3-d-opacity { from { opacity: 0; } }
@keyframes e3-d-rotate { from { rotate: 60deg; } to { rotate: -20.96deg; } }
@keyframes e3-d-translate {
  from { translate: 0 calc(-39.4px * var(--escala-narrativa)); }
}

.e3-llamada-06.visible {
  animation:
    e3-d-opacity 0.5s cubic-bezier(0, 0, 0.58, 1) both,
    e3-d-rotate 1s cubic-bezier(0.34, 1.42, 0.64, 1) both,
    e3-d-translate 1s cubic-bezier(0.22, 1.70, 0.36, 1) both;
}

@keyframes e3-i-opacity { from { opacity: 0; } }
@keyframes e3-i-rotate { from { rotate: 45deg; } to { rotate: -20.96deg; } }
@keyframes e3-i-translate {
  from { translate: 0 calc(-39.2px * var(--escala-narrativa)); }
}

.e3-llamada-07.visible {
  animation:
    e3-i-opacity 0.5s cubic-bezier(0, 0, 0.58, 1) both,
    e3-i-rotate 1s cubic-bezier(0.34, 1.42, 0.64, 1) both,
    e3-i-translate 1s cubic-bezier(0.22, 1.70, 0.36, 1) both;
}

@keyframes e3-a-opacity { from { opacity: 0; } }
@keyframes e3-a-rotate { from { rotate: -60deg; } to { rotate: -20.96deg; } }
@keyframes e3-a-translate {
  from {
    translate:
      calc(-4.3px * var(--escala-narrativa))
      calc(-39.2px * var(--escala-narrativa));
  }
}

.e3-llamada-08.visible {
  animation:
    e3-a-opacity 0.5s cubic-bezier(0, 0, 0.58, 1) both,
    e3-a-rotate 1s cubic-bezier(0.34, 1.42, 0.64, 1) both,
    e3-a-translate 1s cubic-bezier(0.22, 1.70, 0.36, 1) both;
}

@keyframes e3-s-opacity { from { opacity: 0; } }
@keyframes e3-s-rotate { from { rotate: 30deg; } to { rotate: -20.96deg; } }
@keyframes e3-s-translate {
  from {
    translate:
      calc(-0.4px * var(--escala-narrativa))
      calc(-29.6px * var(--escala-narrativa));
  }
}

.e3-llamada-09.visible {
  animation:
    e3-s-opacity 0.5s cubic-bezier(0, 0, 0.58, 1) both,
    e3-s-rotate 1s cubic-bezier(0.34, 1.42, 0.64, 1) both,
    e3-s-translate 1s cubic-bezier(0.22, 1.70, 0.36, 1) both;
}

@keyframes e3-punto-opacity { from { opacity: 0; } }
@keyframes e3-punto-rotate { from { rotate: -180deg; } to { rotate: -20.96deg; } }
@keyframes e3-punto-translate {
  from { translate: 0 calc(-39.9px * var(--escala-narrativa)); }
}

.e3-llamada-10.visible {
  animation:
    e3-punto-opacity 0.5s cubic-bezier(0, 0, 0.58, 1) both,
    e3-punto-rotate 1.5s cubic-bezier(0.34, 1.42, 0.64, 1) both,
    e3-punto-translate 1.5s cubic-bezier(0.22, 1.70, 0.36, 1) both;
}

/* =========================================
   TRANSICIÓN e3→e4 — 375×683
   Hijos en % (width + height): el motor 3D usa el nodo como sizer.
   ========================================= */

.transicion-interseccional--e3-e4 {
  --escala-narrativa: 1;
  position: relative;
  height: auto;
  aspect-ratio: 375 / 683;
  overflow: visible;
  pointer-events: auto;
  /* 9.15% / 85.32% INTENCIONAL (cálculo manual; Figma: to top −873.3% / 973.2%) */
  background-image: linear-gradient(
    to bottom,
    rgb(var(--efigie-escena-4-fondo-b)) 9.15%,
    rgb(var(--efigie-escena-5-fondo-a)) 85.32%
  );
}

.e3-13 {
  left: 21.6%;
  top: 4.669%;
  width: 56.8%;
  height: 12.738%;
  border: 1.5px solid var(--color-contraste-oscuro); /* EXCEPCIÓN: 1.5px Figma */
  border-radius: var(--radio-chico);
  box-sizing: border-box;
  overflow: hidden;
}

.e3-14 {
  left: 11.2%;
  top: 25.89%; /* 25.89% INTENCIONAL (Figma: 36.294%; corrección manual) */
  width: 77.6%;
  height: 10.395%;
  border: 1.5px solid var(--color-contraste-oscuro); /* EXCEPCIÓN: 1.5px Figma */
  border-radius: var(--radio-chico);
  box-sizing: border-box;
  overflow: hidden;
}

.e3-15 {
  left: 4.267%;
  top: 44.786%;
  width: 91.467%;
  height: 7.76%;
  border: 1.5px solid var(--color-contraste-oscuro); /* EXCEPCIÓN: 1.5px Figma */
  border-radius: var(--radio-chico);
  box-sizing: border-box;
  overflow: hidden;
}

.e3-16 {
  left: 11.2%;
  top: 61.03%; /* 61.03% INTENCIONAL (Figma: 71.433%; corrección manual) */
  width: 77.6%;
  height: 10.395%;
  border: 1.5px solid var(--color-contraste-oscuro); /* EXCEPCIÓN: 1.5px Figma */
  border-radius: var(--radio-chico);
  box-sizing: border-box;
  overflow: hidden;
}

.e3-17 {
  left: 21.6%;
  top: 79.925%;
  width: 56.8%;
  height: 12.738%;
  border: 1.5px solid var(--color-contraste-oscuro); /* EXCEPCIÓN: 1.5px Figma */
  border-radius: var(--radio-chico);
  box-sizing: border-box;
  overflow: hidden;
}

/* La escena hereda .e3-13 para left/top/width/height; no pinta el recorte. */
.carrusel-3d-escena.e3-13,
.carrusel-3d-escena.e3-14,
.carrusel-3d-escena.e3-15,
.carrusel-3d-escena.e3-16,
.carrusel-3d-escena.e3-17 {
  border: none;
  overflow: visible;
  background-image: none;
}

.e3-llamada-11 {
  left: 37.333%;
  top: 16.382%;
  width: 42.4%;
}

.e3-llamada-12 {
  left: 25.6%;
  top: 70.701%;
  width: 49.067%;
}

@keyframes e3-llamada-11-opacity { from { opacity: 0; } }
@keyframes e3-llamada-11-translate { from { translate: -67.296% 0; } }

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

@keyframes e3-llamada-12-opacity { from { opacity: 0; } }
@keyframes e3-llamada-12-translate { from { translate: 39.130% 0; } }

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