/* ══════════════════════════════════════════════════════════════════════════
   LA ESCENA DE UN ESTILO DE EDICIÓN

   No es una captura: es el estilo montándose solo, pasando por sus cuatro
   momentos con el ritmo que tendría el video (un corte cada 1,2–2,5 s).

   LLENA LA CAJA. Nada de un «teléfono» vertical flotando dentro de un hueco
   horizontal: eso deja bandas negras arriba y abajo y se ve mal. La escena
   ocupa el 100 % de donde la pongas y lo que sobra se recorta, como hace una
   portada. Por eso todo mide en `cqmin` (relativo a la caja) y la silueta va
   en un SVG con `slice`.
   ══════════════════════════════════════════════════════════════════════════ */

.ee{position:absolute;inset:0;overflow:hidden;background:#050a16;
  container-type:size}

/* cada momento del video, a sangre */
.ee-p{position:absolute;inset:0;opacity:0;display:grid;place-items:center;
  animation:eePlano 12s linear infinite}
.ee-p.a{animation-delay:0s}
.ee-p.b{animation-delay:3s}
.ee-p.c{animation-delay:6s}
.ee-p.d{animation-delay:9s}
@keyframes eePlano{
  0%{opacity:0} 1.5%{opacity:1} 24%{opacity:1} 25.5%{opacity:0} 100%{opacity:0}
}

/* el texto manda sobre el tamaño de la caja, no al revés */
/* `place-items:center` deja que el hijo tome su ancho natural y se salga por
   los lados. El bloque ocupa el ancho entero y mide por el ANCHO de la caja
   (cqw), que es lo que recorta: con cqmin, en una caja alta y estrecha el
   texto crece hasta salirse. */
.ee-centro{display:flex;flex-direction:column;align-items:center;text-align:center;
  width:100%;max-width:100%;box-sizing:border-box;padding:0 8%;overflow:hidden}
.ee-chico,.ee-ctx{font-size:clamp(7px,4.2cqw,15px);font-weight:600;line-height:1.3;
  margin-bottom:.35em}
.ee-serif{font-family:'Instrument Serif','Playfair Display',Georgia,serif;font-style:italic;
  font-size:clamp(17px,12cqw,52px);line-height:1.05;color:#2f6bff;
  max-width:100%;overflow-wrap:break-word}
.ee-clave{font-size:clamp(15px,11cqw,46px);font-weight:800;letter-spacing:-.02em;color:#fff;
  line-height:1.05;max-width:100%;overflow-wrap:break-word}
.ee-chico{color:#1d2436}
.ee-ctx{color:rgba(255,255,255,.92)}

/* A · el plano a cámara: su cara y la píldora blanca bajo la barbilla */
.ee-p.a{background:
  radial-gradient(70% 45% at 76% 26%,rgba(47,107,255,.5),rgba(47,107,255,0) 70%),
  radial-gradient(60% 40% at 18% 70%,rgba(47,107,255,.22),rgba(47,107,255,0) 72%),
  linear-gradient(170deg,#101c38,#080f22)}
/* La textura de la pared se FUNDE, no se corta: antes acababa de golpe a
   media caja y se veía la línea del corte. */
.ee-cuarto{position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(90deg,transparent 0 13px,rgba(120,170,255,.1) 13px 14px);
  mask-image:linear-gradient(180deg,#000 0%,#000 34%,transparent 72%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 34%,transparent 72%)}
/* la tipografía cinética: las palabras entran una a una con la voz, que es
   lo que de verdad define el estilo (nada de siluetas de personas) */
.ee-cin{display:flex;gap:.35em;align-items:baseline;flex-wrap:wrap;justify-content:center;
  max-width:100%}
.ee-cin i{font-style:normal;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(11px,6.6cqw,30px);color:#eaf1ff;opacity:0;
  animation:eePalabra 12s ease-out infinite}
.ee-cin i:nth-child(1){animation-delay:.25s}
.ee-cin i:nth-child(2){animation-delay:.55s;color:#5c96ff}
.ee-cin i:nth-child(3){animation-delay:.85s}

.ee-pildora{position:absolute;left:50%;top:68%;transform:translateX(-50%);max-width:84%;
  background:#fff;color:#0b1020;font-weight:700;font-size:clamp(6px,3.6cqw,13px);
  letter-spacing:-.01em;padding:.35em .8em;border-radius:99px;white-space:nowrap;z-index:2;
  animation:eeEntra 12s ease-out infinite}
@keyframes eeEntra{
  0%{opacity:0;transform:translateX(-50%) translateY(6px)}
  3%{opacity:1;transform:translateX(-50%) translateY(0)}
  24%{opacity:1} 25.5%{opacity:0} 100%{opacity:0}
}

/* B · la frase emotiva en serif sobre fondo claro */
.ee-p.b{background:linear-gradient(170deg,#f3f6ff,#dfe8ff)}
.ee-p.b .ee-chico{animation:eePalabra 12s ease-out infinite;animation-delay:3.1s}
.ee-p.b .ee-serif{animation:eePalabra 12s ease-out infinite;animation-delay:3.35s}
@keyframes eePalabra{
  0%{opacity:0;transform:translateY(7px)}
  2%{opacity:1;transform:translateY(0)}
  21%{opacity:1;transform:translateY(0)}
  22.5%{opacity:0} 100%{opacity:0}
}

/* C · la palabra clave en azul */
.ee-p.c{background:linear-gradient(165deg,#1e5ce8,#2f6bff 60%,#1746b8)}
.ee-p.c .ee-ctx{animation:eePalabra 12s ease-out infinite;animation-delay:6.1s}
.ee-p.c .ee-clave{animation:eePalabra 12s ease-out infinite;animation-delay:6.35s}

/* D · la tarjeta oscura con la rejilla */
.ee-p.d{background:#050a18}
.ee-rejilla{position:absolute;inset:0;opacity:.5;
  background:
    repeating-linear-gradient(90deg,rgba(90,140,255,.22) 0 1px,transparent 1px 16px),
    repeating-linear-gradient(0deg,rgba(90,140,255,.16) 0 1px,transparent 1px 16px);
  mask-image:linear-gradient(180deg,transparent,#000 55%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 55%)}
.ee-marca{position:relative;font-size:clamp(16px,11cqw,48px);font-weight:800;max-width:88%;
  letter-spacing:-.02em;color:#eaf1ff;text-shadow:0 0 22px rgba(120,170,255,.65);
  animation:eePalabra 12s ease-out infinite;animation-delay:9.2s}

/* la barra de tiempo: marca los cortes */
.ee-linea{position:absolute;left:5%;right:5%;bottom:4%;height:3px;border-radius:3px;
  background:rgba(160,190,255,.22);overflow:hidden;z-index:3}
.ee-linea i{position:absolute;inset:0 auto 0 0;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
  animation:eeAvanza 12s linear infinite}
@keyframes eeAvanza{0%{width:0}100%{width:100%}}

/* el destello de cada corte */
.ee-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:4;
  animation:eeCorte 3s steps(1,end) infinite}
@keyframes eeCorte{0%{opacity:.17}2%{opacity:0}100%{opacity:0}}