/* ---------- En vivo (temporal, sáb 31 oct 2026) ----------
   Toda la sección baila al ritmo del riff (0.4988 s por pulso, 4 pulsos = 1 escena, 8 escenas = 16 s).
   assets/js/envivo.js cambia el pulso (--p) y el tono de la sección (data-tono). Mismas escenas del storyboard aprobado.
   Para borrarlo del todo el 1 nov: quitar la sección #en-vivo de index.html, este archivo, assets/js/envivo.js,
   su <link>/<script> y assets/img/envivo. */

.envivo {
  --cy: #4fe8ff; --display: var(--font-display); --body: var(--font-body);
  --ev-fg: var(--ink); --ev-fg2: var(--paper); --ev-fecha: var(--paper); --ev-chip: var(--ink); --ev-chipfg: var(--paper);
  --ev-btn: var(--ink); --ev-btnfg: var(--paper); --ev-bg: var(--red); --ev-blend: multiply;
  --ev-tex: url("../img/envivo/ev/papel.jpg"); --ev-tile: min(1100px, 150vw);
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ev-bg) var(--ev-tex) center / var(--ev-tile) auto; background-blend-mode: var(--ev-blend);
  color: var(--ev-fg);
  transition: background-color .12s linear, color .12s linear;
}
.envivo[data-tono="tinta"] {
  --ev-fg: var(--paper); --ev-fg2: var(--paper); --ev-fecha: var(--red); --ev-chip: var(--paper); --ev-chipfg: var(--ink);
  --ev-btn: var(--red); --ev-btnfg: var(--paper); --ev-bg: var(--ink); --ev-blend: normal;
}
.envivo[data-tono="papel"] {
  --ev-fg: var(--ink); --ev-fg2: var(--ink); --ev-fecha: var(--red); --ev-chip: var(--ink); --ev-chipfg: var(--paper);
  --ev-btn: var(--red); --ev-btnfg: var(--paper); --ev-bg: var(--paper); --ev-blend: normal;
}
/* las imágenes pesadas se piden solo cuando la sección se asoma (envivo.js agrega .is-listo) */
.envivo.is-listo {
  --i-g1: url("../img/envivo/ev/g1.webp"); --i-g2: url("../img/envivo/ev/g2.webp");
  --i-lugar: url("../img/envivo/ev/lugar.jpg"); --i-negro: url("../img/envivo/ev/negro.jpg"); --i-llamas2: url("../img/envivo/ev/llamas2.webp");
  --i-papel: url("../img/envivo/ev/papel.jpg"); --i-p1: url("../img/envivo/ev/pz1.webp"); --i-p2: url("../img/envivo/ev/pz2.webp");
  --i-p3: url("../img/envivo/ev/pz3.webp"); --i-gafas: url("../img/envivo/ev/gafas.webp"); --i-lentes: url("../img/envivo/ev/lentes.webp");
  --i-nz1: url("../img/envivo/ev/nz1.svg"); --i-nz2: url("../img/envivo/ev/nz2.svg"); --i-logo: url("../img/logo/laymon.svg");
  --gp-paseo:url(../img/fantasma/poses/paseo.webp);--gp-impulso:url(../img/fantasma/poses/impulso.webp);--gp-ollie:url(../img/fantasma/poses/ollie.webp);--gp-agachado:url(../img/fantasma/poses/agachado.webp);--gp-kickflip:url(../img/fantasma/poses/kickflip.webp);--gp-equilibrio:url(../img/fantasma/poses/equilibrio.webp);--gp-vertical:url(../img/fantasma/poses/vertical.webp);--gp-agarre:url(../img/fantasma/poses/agarre.webp);--gp-tabla-en-alto:url(../img/fantasma/poses/tabla-en-alto.webp);
}
.envivo.is-listo[data-tono="tinta"] { --ev-tex: url("../img/envivo/ev/negro.jpg"); }
.envivo.is-listo[data-tono="papel"] { --ev-tex: url("../img/envivo/ev/papel.jpg"); }

.envivo__in {
  position: relative; z-index: 1;
  max-width: var(--max); margin: 0 auto; padding: clamp(40px, 5vw, 72px) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 0 clamp(16px, 3vw, 48px);
  min-height: clamp(640px, 54vw, 780px);
}
.envivo__texto { position: relative; z-index: 1; max-width: 560px; }
/* El escenario: las escenas del storyboard (4:5), con los bordes difuminados para que se fundan con la sección */
/* El escenario ocupa TODA la sección (detrás del texto); el lugar de la derecha lo guarda este espaciador solo en celular */
.envivo__escenario { display: none; }
.ev-stage { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.ev-stage > .ev-fr { display: none; position: absolute; inset: 0; aspect-ratio: auto; width: auto; background: transparent; container-type: normal; }
.ev-stage > .ev-fr.ev-cur { display: block; }
.ev-flash, .ev-wipe, .ev-glitch { position: absolute; inset: 0; z-index: 8; opacity: 0; }
.ev-flash { background: var(--paper); }
.ev-flash.on { animation: ev-flash .13s steps(1); }
.ev-wipe { background: var(--red); opacity: 1; clip-path: polygon(140% 0, 100% 0, 100% 100%, 100% 100%); }
.ev-wipe.on { animation: ev-wipe .22s linear; }
.ev-stage.ev-inv { filter: invert(1); }
.ev-glitch { background:
  linear-gradient(90deg, transparent 20%, var(--cy) 20% 70%, transparent 70%) 0 12% / 100% 7% no-repeat,
  linear-gradient(90deg, var(--red) 0 45%, transparent 45%) 0 38% / 100% 9% no-repeat,
  linear-gradient(90deg, transparent 30%, var(--paper) 30% 90%, transparent 90%) 0 62% / 100% 6% no-repeat,
  linear-gradient(90deg, transparent 10%, var(--ink) 10% 60%, transparent 60%) 0 80% / 100% 8% no-repeat; }
.ev-glitch.on { animation: ev-glitch .36s steps(1) forwards; }
@keyframes ev-flash { 0% { opacity: 1; } 60% { opacity: .45; } 100% { opacity: 0; } }
@keyframes ev-wipe { 0% { clip-path: polygon(0 0, 100% 0, 100% 100%, -40% 100%); } 100% { clip-path: polygon(140% 0, 100% 0, 100% 100%, 100% 100%); } }
@keyframes ev-glitch { 0% { opacity: 1; translate: 3% 0; } 25% { opacity: 1; translate: -4% 0; } 50% { opacity: 1; translate: 2% 0; } 75% { opacity: 1; translate: -2% 0; background-color: var(--ink); } 100% { opacity: 1; background-color: var(--ink); } }
.envivo:not(.is-visto) .ev-fr * { animation-play-state: paused !important; }

.envivo__kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }
.envivo__titulo { margin: 12px 0 0; font: 400 clamp(76px, 9vw, 150px)/.82 var(--font-display); letter-spacing: .01em; rotate: -3deg; transform-origin: left center; }
.envivo__titulo span { display: block; }
.envivo__titulo span + span { margin-left: .45em; }
.envivo__fantasma { position: absolute; top: -6px; right: 0; width: clamp(64px, 7vw, 100px); height: auto; rotate: 10deg; }
.envivo__fecha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: clamp(20px, 2.6vw, 32px) 0 0 .15em; rotate: -4deg; transform-origin: left center; color: var(--ev-fecha); font-size: clamp(36px, 4vw, 58px); line-height: 1; }
.envivo__hora { padding: 4px 14px 6px; background: var(--ev-chip); color: var(--ev-chipfg); font-size: .5em; white-space: nowrap; }
.envivo__lista { margin: clamp(22px, 2.6vw, 30px) 0 0; font-size: clamp(18px, 1.6vw, 22px); }
.envivo__lead { margin: 10px 0 0; max-width: 34em; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.5; color: var(--ev-fg2); }
.envivo__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 26px; }
.envivo__btn { display: inline-block; padding: 13px 26px; border-radius: 999px; background: var(--ev-btn); color: var(--ev-btnfg); text-decoration: none; font-size: 18px; transition: background var(--fast), color var(--fast); }
.envivo__btn:is(:hover, :focus-visible) { background: var(--ev-fg); color: var(--ev-bg); }
.envivo__llegar { color: var(--ev-fg); text-decoration-color: var(--ev-fg); text-underline-offset: 5px; }
.envivo__llegar:hover { color: var(--ev-fg2); }

.envivo__aire { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.envivo__aire i { width: 4px; height: 100%; background: var(--ev-fg); transform-origin: bottom; animation: envivo-eq 1.1s ease-in-out infinite alternate; }
.envivo__aire i:nth-child(2) { animation-delay: -.45s; animation-duration: .9s; }
.envivo__aire i:nth-child(3) { animation-delay: -.2s; animation-duration: 1.3s; }
.envivo__aire i:nth-child(4) { animation-delay: -.7s; animation-duration: 1s; }
@keyframes envivo-eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

@media (max-width: 820px) {
  .envivo__in { grid-template-columns: 1fr; min-height: 0; padding-bottom: 0; }
  .envivo__escenario { display: block; aspect-ratio: 4 / 5; margin-top: 8px; }
  .envivo__titulo { font-size: clamp(66px, 19vw, 100px); }
  .envivo__kicker { padding-right: 70px; font-size: 13px; }
  .envivo__fantasma { top: -2px; width: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .envivo { transition: none; }
  .envivo__aire i { animation: none; transform: scaleY(.7); } .envivo__aire i:nth-child(odd) { transform: scaleY(.45); }
}

.ev-gp-paseo { background-image: var(--gp-paseo); }
.ev-gp-impulso { background-image: var(--gp-impulso); }
.ev-gp-ollie { background-image: var(--gp-ollie); }
.ev-gp-agachado { background-image: var(--gp-agachado); }
.ev-gp-kickflip { background-image: var(--gp-kickflip); }
.ev-gp-equilibrio { background-image: var(--gp-equilibrio); }
.ev-gp-vertical { background-image: var(--gp-vertical); }
.ev-gp-agarre { background-image: var(--gp-agarre); }
.ev-gp-tabla-en-alto { background-image: var(--gp-tabla-en-alto); }

/* ---- Escenas (generadas del storyboard; cada clase lleva el prefijo ev-) ---- */

.ev-fr{position:relative;aspect-ratio:4/5;width:100%;container-type:inline-size;overflow:hidden;background:var(--ink);isolation:isolate}
.ev-fr>*{position:absolute}
.ev-bg{inset:0;background-size:cover;background-position:center}
.ev-f-brick{font-family:var(--display);font-weight:400;line-height:.86;text-transform:uppercase;white-space:nowrap}
.ev-f-chel{font-family:var(--body);line-height:1}
.ev-gl{text-shadow:.9cqw 0 var(--cy),-.9cqw 0 var(--red)}

/* mecanismo: --p es el pulso (1 a 4). Cada elemento con .ev-ap aparece en su pulso --at */
.ev-fr{--p:1}
.ev-ap{opacity:clamp(0,calc(var(--p) - var(--at) + 1),1);translate:0 calc(clamp(0,calc(var(--at) - var(--p)),1)*var(--dy,7cqw));scale:calc(1 + clamp(0,calc(var(--at) - var(--p)),1)*.25);transition:opacity 0s,translate .22s cubic-bezier(.2,.9,.3,1),scale .22s cubic-bezier(.2,.9,.3,1)}
.ev-gp{opacity:clamp(0,calc(1 - (var(--p) - var(--k))*(var(--p) - var(--k))),1);transition:opacity .05s steps(1)}
.ev-gh>.ev-gp{position:absolute;inset:0;background-size:contain;background-position:center bottom;background-repeat:no-repeat}
.ev-sil{-webkit-mask:var(--i-g1) center bottom/100% 100% no-repeat;mask:var(--i-g1) center bottom/100% 100% no-repeat}
/* S1 */
.ev-s1 .ev-bg{background-image:var(--i-negro)}
.ev-s1 .ev-ll{left:-10%;right:-10%;bottom:-2%;height:46%;background:var(--i-llamas) center bottom/100% auto no-repeat;translate:0 calc((4 - var(--p))*3cqw);transition:translate .4988s ease-out}
.ev-s1 .ev-a{left:8cqw;top:14cqw;font-size:19cqw;color:var(--paper)}
.ev-s1 .ev-b{left:8cqw;top:38cqw;font-size:26cqw;color:var(--red)}
.ev-s1 .ev-c{left:8cqw;top:68cqw;font-size:19cqw;color:var(--paper)}
.ev-s1 .ev-gh{right:6.5cqw;bottom:20cqw;width:36cqw;aspect-ratio:1/1.2;animation:ev-flota 1.9952s ease-in-out infinite alternate}
.ev-gl{animation:ev-glx .4988s steps(2) infinite}
/* S2 */
.ev-s2 .ev-cam{inset:0;scale:calc(1 + (var(--p) - 1)*.09);transition:scale .9976s ease-out}
.ev-s2 .ev-cam>*,.ev-s2 .ev-band>*{position:absolute}
.ev-s2 .ev-bgb{inset:0;background:var(--i-lugar) center/cover;filter:blur(2.2cqw) brightness(.45)}
.ev-s2 .ev-band{left:0;right:0;top:49cqw;height:80cqw;-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
.ev-s2 .ev-ph{inset:0;background:var(--i-lugar) center/100% 100% no-repeat}
.ev-s2 .ev-neon{left:28.5%;width:46.3%;top:-6%;bottom:-6%;border:.9cqw solid #ff5a70;border-bottom:0;border-radius:14cqw 14cqw 0 0;box-shadow:0 0 3cqw var(--red),0 0 7cqw var(--red),inset 0 0 3cqw var(--red);animation:ev-glow .9976s ease-in-out infinite}
.ev-s2 .ev-vel{inset:0;background:linear-gradient(180deg,rgba(12,11,11,.55),rgba(12,11,11,0) 28%,rgba(12,11,11,0) 60%,rgba(12,11,11,.8))}
.ev-s2 .ev-a{left:8cqw;top:12cqw;font-size:15cqw;color:var(--paper)}
.ev-s2 .ev-st{left:15cqw;right:15cqw;top:10cqw;aspect-ratio:1759/1001;animation:ev-logoweb 1.9952s steps(1) infinite}
.ev-s2 .ev-st>div{position:absolute;inset:0;background:var(--red);-webkit-mask:var(--i-logo) center/contain no-repeat;mask:var(--i-logo) center/contain no-repeat}
.ev-s2 .ev-dark{left:0;right:0;top:0;height:60cqw;background:linear-gradient(180deg,rgba(12,11,11,.88),rgba(12,11,11,0))}
.ev-s2 .ev-b{left:8cqw;right:8cqw;bottom:16cqw;font-size:8.4cqw;color:var(--paper);line-height:1.15}
/* S3 */
.ev-s3 .ev-bg{background-image:var(--i-esp);scale:calc(1 + clamp(0,calc(var(--p) - 1),1)*clamp(0,calc(var(--p) - 1),1)*.28);filter:brightness(calc(1 - clamp(0,calc(var(--p) - 1),1)*.18));transition:scale .4988s cubic-bezier(.6,0,.9,.4),filter .4988s}
.ev-s3 .ev-vel{inset:0;background:radial-gradient(circle at 50% 45%,rgba(12,11,11,0) 30%,rgba(12,11,11,.75))}
.ev-s3 .ev-ti{left:8cqw;top:10cqw;font-size:9cqw;color:var(--paper);line-height:1.1;z-index:5}
.ev-s3 .ev-gw{left:12cqw;right:12cqw;bottom:0;aspect-ratio:620/1030}
.ev-s3 .ev-gw>div{position:absolute;inset:0}
.ev-s3 .ev-g{background:var(--i-g1) center bottom/100% 100% no-repeat}
.ev-s3 .ev-gc,.ev-s3 .ev-gr{background:var(--i-g1) center bottom/100% 100% no-repeat;mix-blend-mode:screen;opacity:calc(clamp(0,calc(var(--p) - 2),1)*.5);filter:sepia(1) hue-rotate(140deg) saturate(5)}
.ev-s3 .ev-gr{filter:sepia(1) hue-rotate(-30deg) saturate(6)}
.ev-s3 .ev-gc{animation:ev-gcx .2494s steps(3) infinite}
.ev-s3 .ev-gr{animation:ev-grx .2494s steps(3) infinite}
.ev-s3 .ev-gs{background:var(--i-g1) center bottom/100% 100% no-repeat;clip-path:inset(46% 0 38% 0);opacity:clamp(0,calc(var(--p) - 3),1);animation:ev-slice .4988s steps(1) infinite}
/* S4 */
.ev-s4 .ev-bg{background-image:var(--i-papel)}
.ev-s4 .ev-rojo{left:0;right:0;top:0;height:66%;background:var(--red);-webkit-mask:url(../img/envivo/ev/onda.svg) 0 0/100% 100% no-repeat;mask:url(../img/envivo/ev/onda.svg) 0 0/100% 100% no-repeat}
.ev-s4 .ev-w1{left:8cqw;top:16cqw;font-size:28cqw;color:var(--paper)}
.ev-s4 .ev-w2{left:8cqw;top:40cqw;font-size:28cqw;color:var(--ink)}
.ev-s4 .ev-rec{right:6cqw;top:6cqw;display:flex;align-items:center;gap:2cqw;font-family:var(--body);font-size:5.4cqw;color:var(--paper);letter-spacing:.06em;z-index:9}
.ev-s4 .ev-rec i{width:4cqw;height:4cqw;border-radius:50%;background:var(--paper);animation:ev-rec .9976s steps(2) infinite}
.ev-s4 .ev-caja{left:2cqw;bottom:0;width:96cqw;aspect-ratio:620/762}
.ev-s4 .ev-caja .ev-img{position:absolute;inset:0;background:var(--i-g2) center/contain no-repeat}
.ev-s4 .ev-lg{position:absolute;left:33%;top:14%;width:21.4%;aspect-ratio:124/47;rotate:-8deg}
.ev-s4 .ev-lg>div{position:absolute;inset:0;background-size:100% 100%}
.ev-s4 .ev-lg .ev-l1{background-image:var(--i-lentes);filter:brightness(0);animation:ev-vg .4988s steps(4) infinite}
.ev-s4 .ev-lg .ev-l4{background:repeating-linear-gradient(0deg,rgba(255,255,255,.5) 0,rgba(255,255,255,.5) .25cqw,transparent .25cqw,transparent .8cqw);-webkit-mask:var(--i-lentes) center/100% 100% no-repeat;mask:var(--i-lentes) center/100% 100% no-repeat;animation:ev-scanv .4988s steps(5) infinite}
.ev-s4 .ev-lg .ev-l5{background:linear-gradient(180deg,transparent 0,var(--cy) 45%,var(--red) 55%,transparent 100%);background-size:100% 40%;background-repeat:no-repeat;opacity:.75;-webkit-mask:var(--i-lentes) center/100% 100% no-repeat;mask:var(--i-lentes) center/100% 100% no-repeat;animation:ev-sweep .9976s linear infinite}
.ev-s4 .ev-lg .ev-l2{background-image:var(--i-gafas)}
/* S5 */
.ev-s5 .ev-bg{background-image:var(--i-negro)}
.ev-s5 .ev-ll{left:-10%;right:-10%;bottom:-2%;height:30%;background:var(--i-llamas) center bottom/100% auto no-repeat;opacity:.9;animation:ev-sube 1.9952s ease-in-out infinite alternate}
.ev-s5 .ev-t1{left:0;right:0;top:8cqw;text-align:center;font-size:16cqw;color:var(--paper)}
.ev-s5 .ev-t2{left:0;right:0;top:24cqw;text-align:center;font-size:16cqw;color:var(--red)}
.ev-s5 .ev-tw{left:0;right:22cqw;bottom:0;aspect-ratio:620/1030;filter:drop-shadow(0 0 1.5cqw rgba(255,255,255,.25))}
.ev-s5 .ev-tw>div{position:absolute;inset:0}
.ev-s5 .ev-tw .ev-base{background:#e6e2dd}
.ev-s5 .ev-tw .ev-nz1{background:var(--i-nz1) 0 0/38cqw 38cqw;opacity:.8;animation:ev-nz .1247s steps(1) infinite}
.ev-s5 .ev-tw .ev-nz2{background:var(--i-nz2) 0 0/46cqw 46cqw;opacity:1;animation:ev-nz2 .2494s steps(1) infinite}
.ev-s5 .ev-tw .ev-sc{background:repeating-linear-gradient(0deg,rgba(12,11,11,.8) 0,rgba(12,11,11,.8) .5cqw,transparent .5cqw,transparent 1.1cqw);animation:ev-scan 1.9952s linear infinite}
.ev-s5 .ev-tw .ev-band{background:linear-gradient(180deg,transparent 0,rgba(255,255,255,.9) 45%,transparent 100%);background-size:100% 14%;background-repeat:no-repeat;animation:ev-roll 1.9952s linear infinite;mix-blend-mode:screen}
.ev-s5 .ev-tw .ev-rr{background:var(--red);mix-blend-mode:screen;opacity:.8;animation:ev-grx .2494s steps(2) infinite}
.ev-s5 .ev-tw .ev-cc{background:var(--cy);mix-blend-mode:screen;opacity:.8;animation:ev-gcx .2494s steps(2) infinite}
.ev-s5 .ev-tw .ev-tear{background:var(--paper);clip-path:inset(34% 0 58% 0);animation:ev-tear 1.9952s steps(1) infinite}
.ev-s5 .ev-ac{right:10cqw;bottom:36cqw;font-size:5.4cqw;line-height:1.1;color:var(--paper);text-align:right;z-index:9}
.ev-s5 .ev-ac::after{content:"";display:block;height:.7cqw;background:var(--red);margin-top:1.2cqw;width:calc(clamp(0,calc(var(--p) - 2),1)*100%);transition:width .35s ease-out}
/* S6 */
.ev-s6 .ev-bg{background:var(--red)}
.ev-s6 .ev-tx{inset:-12cqw;background:var(--i-papel) center/cover;mix-blend-mode:multiply;opacity:.45;animation:ev-arruga 1.9952s steps(1) infinite}
.ev-s6 .ev-p{width:52cqw;aspect-ratio:1/1;background-size:contain;background-position:center;background-repeat:no-repeat;filter:drop-shadow(1.5cqw 1.5cqw 0 var(--ink));--dy:-60cqw}
.ev-s6 .ev-p1{left:4cqw;top:6cqw;background-image:var(--i-p1);transform:rotate(-8deg)}
.ev-s6 .ev-p2{right:3cqw;top:50cqw;background-image:var(--i-p2);transform:rotate(9deg)}
.ev-s6 .ev-p3{left:6cqw;top:94cqw;background-image:var(--i-p3);transform:rotate(-5deg)}
.ev-s6 .ev-a{left:60cqw;top:20cqw;font-size:11cqw;color:var(--paper);text-shadow:.8cqw .8cqw 0 var(--ink)}
.ev-s6 .ev-b{left:5cqw;top:68cqw;font-size:11cqw;color:var(--paper);text-shadow:.8cqw .8cqw 0 var(--ink)}
.ev-s6 .ev-c{left:62cqw;top:108cqw;font-size:11cqw;color:var(--paper);text-shadow:.8cqw .8cqw 0 var(--ink)}
.ev-s6 .ev-gh{left:-20cqw;bottom:3cqw;width:26cqw;aspect-ratio:1/1.1;translate:calc((var(--p) - 1)*34cqw) 0;transition:translate .4988s linear}
/* S7 */
.ev-s7 .ev-bg{background-image:var(--i-negro)}
.ev-s7 .ev-a{left:0;right:0;top:20cqw;text-align:center;font-size:10cqw;color:var(--paper)}
.ev-s7 .ev-n,.ev-s7 .ev-nr,.ev-s7 .ev-nc{left:0;right:0;top:34cqw;text-align:center;font-size:50cqw}
.ev-s7 .ev-n{color:var(--red)}
.ev-s7 .ev-nr{color:var(--paper);mix-blend-mode:screen;clip-path:inset(0 0 55% 0);animation:ev-gcx .2494s steps(3) infinite}
.ev-s7 .ev-nc{color:var(--cy);mix-blend-mode:screen;clip-path:inset(48% 0 0 0);animation:ev-grx .2494s steps(3) infinite}
.ev-s7 .ev-m{left:0;right:0;top:82cqw;text-align:center;font-size:20cqw;color:var(--paper)}
.ev-s7 .ev-h{left:0;right:0;top:108cqw;text-align:center;font-size:11cqw;color:var(--paper)}
.ev-s7 .ev-fill{left:0;right:0;bottom:0;-webkit-mask-image:linear-gradient(0deg,#000 60%,transparent);mask-image:linear-gradient(0deg,#000 60%,transparent);height:calc(clamp(0,calc(var(--p) - 3),1)*190cqw);background:linear-gradient(0deg,#b3001b,#EA1D3B 60%,#ff8a1f);transition:height .4988s ease-in}
.ev-s7 .ev-row{-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 30%);mask-image:linear-gradient(0deg,transparent 0,#000 30%);left:-15cqw;width:130cqw;aspect-ratio:1000/474;background:var(--i-llamas) center bottom/100% 100% no-repeat;--dy:45cqw}
.ev-s7 .ev-row.ev-fx{transform:scaleX(-1)}
.ev-s7 .ev-row:nth-of-type(n){margin-bottom:0}
/* S8 */
.ev-s8 .ev-bg{inset:-12cqw;background-image:var(--i-papel);animation:ev-arruga 1.9952s steps(1) infinite}
.ev-s8 .ev-cover{inset:0;background:linear-gradient(0deg,#b3001b,#EA1D3B 60%,#ff8a1f);opacity:clamp(0,calc(2 - var(--p)),1);transition:opacity .2494s}
.ev-s8 .ev-logo{left:4cqw;right:4cqw;top:8cqw;aspect-ratio:3/1;background:var(--i-logo) center/contain no-repeat}
.ev-s8 .ev-a{left:0;right:0;top:44cqw;text-align:center;font-size:12cqw;color:var(--red)}
.ev-s8 .ev-gh{left:50%;top:74cqw;width:38cqw;margin-left:-19cqw;aspect-ratio:1/1.2;animation:ev-flota 1.9952s ease-in-out infinite alternate}
.ev-s8 .ev-b{left:8cqw;right:8cqw;top:128cqw;text-align:center;font-size:5.2cqw;color:var(--ink);line-height:1.3}
.ev-s8 .ev-c{left:0;right:0;top:149cqw;text-align:center;font-size:5.2cqw;color:var(--red)}
/* animaciones */
@keyframes ev-sube{from{transform:translateY(5%)}to{transform:translateY(-4%)}}
@keyframes ev-glow{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes ev-boil{0%{translate:0 0}20%{translate:1.2cqw -.8cqw}40%{translate:-.6cqw 1cqw}60%{translate:.9cqw .6cqw}80%{translate:-1cqw -.4cqw}}
@keyframes ev-vg{0%{transform:translateY(0)}25%{transform:translateY(.5cqw)}50%{transform:translateY(-.4cqw)}75%{transform:translateY(.2cqw)}}
@keyframes ev-scanv{from{background-position:0 0}to{background-position:0 .8cqw}}
@keyframes ev-sweep{from{background-position:0 -50%}to{background-position:0 150%}}
@keyframes ev-arruga{0%{transform:scale(1.08) translate(-2%,-1.5%)}12.5%{transform:scaleX(-1) scale(1.12) translate(2%,1.5%)}37.5%{transform:scale(1.08) translate(-2%,-1.5%)}62.5%{transform:scaleY(-1) scale(1.1) translate(-1.5%,2%)}75%{transform:scaleX(-1) scale(1.12) translate(2%,1.5%)}87.5%{transform:scale(-1,-1) scale(1.1) translate(1%,-2%)}}
@keyframes ev-logoweb{0%{transform:translate(-.8cqw,0) skew(-8deg);filter:drop-shadow(-1.4cqw 0 0 #00F0FF) drop-shadow(1.4cqw 0 0 #FFE600)}3%{transform:translate(.8cqw,.3cqw);filter:drop-shadow(1.6cqw 0 0 #00F0FF) drop-shadow(-1cqw .3cqw 0 #FF2BD6) brightness(1.15)}6%{transform:translate(-.5cqw,0) skew(5deg);filter:drop-shadow(-1.8cqw 0 0 #00F0FF) drop-shadow(1cqw 0 0 #FFE600) drop-shadow(0 .5cqw 0 #FF2BD6)}9%{transform:translate(.5cqw,0);filter:drop-shadow(1cqw 0 0 #FFE600) drop-shadow(-.8cqw 0 0 #00F0FF) contrast(1.3)}12%,50%{transform:none;filter:none}52%{transform:translate(-.3cqw,0);filter:drop-shadow(-.8cqw 0 0 #00F0FF) drop-shadow(.8cqw 0 0 #FFE600)}56%,100%{transform:none;filter:none}}
@keyframes ev-late{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.12);opacity:1}}
@keyframes ev-flota{from{transform:translateY(2cqw) rotate(-3deg)}to{transform:translateY(-3cqw) rotate(3deg)}}
@keyframes ev-rec{0%{opacity:1}100%{opacity:0}}
@keyframes ev-glx{0%{text-shadow:.9cqw 0 var(--cy),-.9cqw 0 var(--red)}50%{text-shadow:-.9cqw .3cqw var(--cy),.9cqw -.3cqw var(--red)}100%{text-shadow:1.4cqw 0 var(--cy),-1.4cqw 0 var(--red)}}
@keyframes ev-gcx{0%{transform:translate(1.4cqw,0)}33%{transform:translate(-1.6cqw,.4cqw)}66%{transform:translate(.8cqw,-.4cqw)}100%{transform:translate(-1cqw,0)}}
@keyframes ev-grx{0%{transform:translate(-1.4cqw,0)}33%{transform:translate(1.6cqw,-.4cqw)}66%{transform:translate(-.8cqw,.4cqw)}100%{transform:translate(1cqw,0)}}
@keyframes ev-slice{0%{translate:0 0}25%{translate:3cqw 0}50%{translate:-2cqw 0}75%{translate:1cqw 0}}
@keyframes ev-lgx{0%{transform:translate(0,0)}20%{transform:translate(.8cqw,-.3cqw)}40%{transform:translate(-.6cqw,.3cqw)}60%{transform:translate(0,0)}80%{transform:translate(1cqw,0)}}
@keyframes ev-nz{0%{background-position:0 0}25%{background-position:-13cqw 9cqw}50%{background-position:7cqw -17cqw}75%{background-position:-21cqw -4cqw}}
@keyframes ev-nz2{0%{background-position:0 0}33%{background-position:11cqw 16cqw}66%{background-position:-9cqw 5cqw}}
@keyframes ev-scan{from{transform:translateY(0)}to{transform:translateY(1.1cqw)}}
@keyframes ev-roll{from{background-position:0 -20%}to{background-position:0 120%}}
@keyframes ev-tear{0%{translate:0 0}6%{translate:5cqw 0}12%{translate:-4cqw 0}18%{translate:0 0}50%{translate:0 0}56%{translate:7cqw 0}62%{translate:-6cqw 0}68%{translate:0 0}}
@media (prefers-reduced-motion:reduce){.ev-fr *{animation:none!important;transition:none!important}}

/* 4:5 (feed de Facebook): mismo contenido, solo reencuadrado */
.ev-fr{aspect-ratio:4/5}
.ev-s1 .ev-a{top:7cqw}.ev-s1 .ev-b{top:25cqw}.ev-s1 .ev-c{top:50cqw}
.ev-s1 .ev-gh{bottom:8cqw;width:30cqw}
.ev-s1 .ev-ll{height:38%}
.ev-s2 .ev-band{top:22cqw}
.ev-s2 .ev-st{top:4cqw;left:20cqw;right:20cqw}
.ev-s2 .ev-dark{height:42cqw}
.ev-s2 .ev-b{bottom:7cqw;font-size:7.4cqw}
.ev-s3 .ev-ti{top:6cqw;font-size:8cqw}
.ev-s3 .ev-gw{left:22cqw;right:22cqw}
.ev-s4 .ev-w1{top:6cqw;font-size:20cqw}.ev-s4 .ev-w2{top:22cqw;font-size:20cqw}
.ev-s4 .ev-rec{top:4cqw}
.ev-s4 .ev-caja{left:17cqw;width:66cqw}
.ev-s5 .ev-t1{top:4cqw;font-size:13cqw}.ev-s5 .ev-t2{top:18cqw;font-size:13cqw}
.ev-s5 .ev-tw{left:10cqw;right:38cqw}
.ev-s5 .ev-ac{bottom:22cqw;right:9cqw}
.ev-s5 .ev-ll{height:26%}
.ev-s6 .ev-p{width:42cqw}
.ev-s6 .ev-p1{top:4cqw}.ev-s6 .ev-p2{top:36cqw}.ev-s6 .ev-p3{top:70cqw}
.ev-s6 .ev-a{left:52cqw;top:12cqw;font-size:9cqw}
.ev-s6 .ev-b{left:4cqw;top:50cqw;font-size:9cqw}
.ev-s6 .ev-c{left:52cqw;top:84cqw;font-size:9cqw}
.ev-s6 .ev-gh{width:20cqw;bottom:2cqw}
.ev-s7 .ev-a{top:12cqw;font-size:9cqw}.ev-s7 .ev-n,.ev-s7 .ev-nr,.ev-s7 .ev-nc{top:20cqw;font-size:40cqw}
.ev-s7 .ev-m{top:58cqw;font-size:16cqw}.ev-s7 .ev-h{top:80cqw;font-size:9cqw}
.ev-s7 .ev-ll{height:26%}
.ev-s8 .ev-logo{top:5cqw}
.ev-s8 .ev-a{top:36cqw;font-size:10cqw}
.ev-s8 .ev-gh{top:55cqw;width:30cqw;margin-left:-15cqw}
.ev-s8 .ev-b{top:98cqw;font-size:4.8cqw}.ev-s8 .ev-c{top:113cqw;font-size:4.8cqw}

/* ---- Fondos a sangre: el fondo de cada escena ocupa toda la sección; lo demás vive en una caja 4:5 a la derecha (abajo en celular) ---- */
.ev-box { position: absolute; container-type: inline-size; aspect-ratio: 4 / 5; width: min(44%, 520px); top: 50%; translate: 0 -50%;
  right: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); }
.ev-box > * { position: absolute; }
.ev-fr > .ev-bg, .ev-fr > .ev-ll, .ev-fr > .ev-tx { position: absolute; }
.ev-bg { inset: 0; }
.ev-fr .ev-ll { left: 0; right: 0; bottom: 0; height: clamp(200px, 46%, 400px); background: var(--i-llamas2) left bottom / auto 100% repeat-x; opacity: 1; animation: none; }
.ev-s1 .ev-ll { translate: 0 calc((4 - var(--p)) * 3%); transition: translate .4988s ease-out; }
.ev-s5 .ev-ll { height: clamp(140px, 32%, 300px); opacity: .9; animation: ev-sube 1.9952s ease-in-out infinite alternate; }
.ev-s6 .ev-tx, .ev-s8 .ev-bg { inset: -10%; }
.ev-s1 .ev-bg, .ev-s5 .ev-bg, .ev-s7 .ev-bg { background-image: var(--i-negro); }
.ev-s6 .ev-bg { background: var(--red); }
/* escena 2 y 3: la foto del patio cubre toda la sección y el neón rodea el espejo; en escritorio se corre a la derecha y se funde con el negro del texto */
.ev-cam { position: absolute; left: 50%; top: 50%; translate: -50% -50%; min-width: 100%; min-height: 100%; aspect-ratio: 1500 / 1200;
  transform-origin: 51.7% 50%; -webkit-mask-image: linear-gradient(90deg, #000, #000); }
.ev-ph { inset: 0; position: absolute; background: var(--i-lugar) center / 100% 100% no-repeat; }
.ev-neon { position: absolute; left: 28.5%; width: 46.3%; top: -2%; bottom: -2%; border: .55vmin solid #ff5a70; border-bottom: 0; border-radius: 14vmin 14vmin 0 0;
  box-shadow: 0 0 2vmin var(--red), 0 0 5vmin var(--red), inset 0 0 2vmin var(--red); animation: ev-glow .9976s ease-in-out infinite; }
.ev-s2 .ev-cam { scale: calc(1 + (var(--p) - 1) * .06); transition: scale .9976s ease-out; }
.ev-s3 .ev-cam { scale: calc(1.15 + clamp(0, calc(var(--p) - 1), 1) * .25); filter: brightness(calc(1 - clamp(0, calc(var(--p) - 1), 1) * .2)); transition: scale .4988s cubic-bezier(.6, 0, .9, .4), filter .4988s; }
.ev-s2 .ev-vel, .ev-s3 .ev-vel { inset: 0; background: linear-gradient(90deg, rgba(12,11,11,.92), rgba(12,11,11,.55) 38%, rgba(12,11,11,0) 62%), linear-gradient(180deg, rgba(12,11,11,.5), rgba(12,11,11,0) 25%, rgba(12,11,11,0) 70%, rgba(12,11,11,.7)); }
.ev-s2 .ev-dark { inset: 0 0 auto 0; height: 45%; left: 0; right: 0; top: 0; background: linear-gradient(180deg, rgba(12,11,11,.88), rgba(12,11,11,0)); }
/* escena 4: el rojo es el de la sección y el papel blanco sube a la derecha, con el borde en onda */
.ev-s4 .ev-bg { inset: auto 0 0 46%; height: 42%; background-image: var(--i-papel); background-size: cover;
  -webkit-mask: url("../img/envivo/ev/onda2.svg") 0 0 / 100% 100% no-repeat, linear-gradient(90deg, transparent, #000 22%); -webkit-mask-composite: source-in;
  mask: url("../img/envivo/ev/onda2.svg") 0 0 / 100% 100% no-repeat, linear-gradient(90deg, transparent, #000 22%); mask-composite: intersect; }
/* escena 7: las llamas cubren toda la sección */
.ev-s7 .ev-fill { left: 0; right: 0; bottom: 0; height: calc(clamp(0, calc(var(--p) - 3), 1) * 100%); background: linear-gradient(0deg, #b3001b, #EA1D3B 60%, #ff8a1f); -webkit-mask-image: linear-gradient(0deg, #000 60%, transparent); mask-image: linear-gradient(0deg, #000 60%, transparent); transition: height .4988s ease-in; }
.ev-s7 .ev-row { left: 0; right: 0; width: auto; height: 52%; aspect-ratio: auto; background: var(--i-llamas2) left bottom / auto 100% repeat-x; --dy: 60%; -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 30%); mask-image: linear-gradient(0deg, transparent 0, #000 30%); }
.ev-s7 .ev-row.ev-fx { transform: none; background-position: right bottom; }
/* escena 8: arranca con el fuego y luego aparece el papel */
.ev-s8 .ev-cover { inset: 0; background: linear-gradient(0deg, #b3001b, #EA1D3B 60%, #ff8a1f); }

@media (max-width: 820px) {
  .ev-box { left: 0; right: 0; top: auto; bottom: 0; translate: none; width: 100%; }
  .ev-cam { translate: -50% -50%; }
  .ev-s2 .ev-vel, .ev-s3 .ev-vel { background: linear-gradient(180deg, rgba(12,11,11,.88), rgba(12,11,11,.45) 45%, rgba(12,11,11,.2) 70%, rgba(12,11,11,.6)); }
  .ev-s4 .ev-bg { inset: auto 0 0 0; height: 17%; }
}
@media (min-width: 821px) {
  .ev-cam { translate: -30% -50%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }
}

/* texturas sin estirar: el papel se repite a tamaño fijo y el negro cubre sin pasar de ~1x */
.ev-s4 .ev-bg, .ev-s8 .ev-bg { background-size: var(--ev-tile) auto; background-repeat: repeat; background-position: center; }
.ev-s6 .ev-tx { background-size: var(--ev-tile) auto; background-repeat: repeat; }