/* Prueba 5 · Pupi Wrapped (v3, sobre tinta). Sigue pareciendo el Wrapped de Spotify por la forma: stories con sus rayitas, un color
   plano a sangre por diapositiva, cifras enormes que cuentan solas, formas grandes que flotan detrás y la mancha de color al cambiar.
   Los colores, los del sistema; las letras, Futura Condensed ExtraBold para cifras y titulares y SF Pro Rounded para el resto.
   Solo se anima transform/opacity (y sus propiedades sueltas translate/rotate/scale), nunca filtros. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* sobre la tinta de esta prueba, el marcador va en tinta-2 para que se vea su tarjeta */
html[data-step="p5"] .hud{background:var(--tinta-2)}
.wrp{
  --ane:var(--chicle);--ane-d:var(--chicle-d);--mario:var(--cobalto);--mario-d:var(--cobalto-d);
  position:relative;flex:1;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none;
}
.wrp [hidden]{display:none !important}

/* las rayitas de arriba, dentro de la tarjeta (blancas; tinta en las diapositivas claras). La de ahora se llena al entrar. */
.wrp-bars{position:absolute;z-index:6;top:12px;left:14px;right:14px;display:flex;gap:4px;pointer-events:none;--bar:rgba(255,255,255,.32);--bar-on:#fff}
.wrp[data-tone="light"] .wrp-bars{--bar:rgba(29,20,66,.2);--bar-on:var(--tinta)}
.wrp-bars i{position:relative;flex:1;height:4px;border-radius:2px;overflow:hidden;background:var(--bar)}
.wrp-bars i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--bar-on);transform:scaleX(0);transform-origin:left}
.wrp-bars i.is-done::after{transform:none}
.wrp-bars i.is-now::after{animation:wrp-bar .8s cubic-bezier(.3,.7,.2,1) .15s forwards}

/* la tarjeta: recorta las diapositivas (y la que se va, debajo, mientras la nueva la tapa con su mancha de color) */
.wrp-host{
  position:relative;flex:1 0 auto;display:flex;flex-direction:column;border-radius:28px;overflow:hidden;isolation:isolate;
  background:var(--tinta-d);transform:translateZ(0);
}
.wrp-slide{
  --bg:var(--tinta);--fg:#fff;--a1:#fff;--a2:var(--anil);--a3:var(--tinta-2);--chip:#fff;--chip-fg:var(--tinta);--st:#fff;--st-fg:var(--tinta);--t0:.04s;
  position:relative;z-index:1;flex:1 0 auto;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);color:var(--fg);
}
.wrp-slide.has-flood{--t0:.3s} /* se queda puesta: cambiar --t0 a mitad haría saltar las entradas que dependen de él */
.wrp-slide.is-entering{background:transparent}
.wrp-slide.is-leaving{position:absolute;inset:0;z-index:0;pointer-events:none;animation:wrp-recede .62s cubic-bezier(.5,0,.2,1) forwards}
.wrp-flood{position:absolute;z-index:0;left:calc(85% - 40px);top:calc(50% - 40px);width:80px;height:80px;border-radius:50%;background:var(--bg);transform:scale(0)}
.wrp-slide.is-back .wrp-flood{left:calc(15% - 40px)}
.wrp-flood.is-go{animation:wrp-flood .62s cubic-bezier(.65,0,.25,1) forwards}

.wrp-content{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:44px 22px 26px;pointer-events:none}
.wrp-content button{pointer-events:auto}
.wrp-content > *{animation:wrp-rise .6s cubic-bezier(.2,.8,.2,1) calc(var(--t0) + .06s + var(--n,0) * 80ms) both}
.wrp-content > :nth-child(2){--n:1}
.wrp-content > :nth-child(3){--n:2}
.wrp-content > :nth-child(4){--n:3}
.wrp-content > :nth-child(5){--n:4}
.wrp-content > .shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}
.wrp-zone{position:absolute;z-index:1;top:0;bottom:0;border-radius:0;background:transparent}
.wrp-zone-prev{left:0;width:33.333%}
.wrp-zone-next{right:0;width:66.667%}
.wrp-zone:disabled{cursor:default}
.wrp-zone:focus-visible{outline:3px solid var(--fg);outline-offset:-7px}

/* formas de fondo: entran con un salto y luego flotan (cada una a su ritmo); los discos van troquelados, con su borde blanco */
.wrp-art{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.wrp-s{
  position:absolute;display:block;
  animation:
    var(--in,wrp-pop) .85s cubic-bezier(.2,.9,.3,1.15) calc(var(--t0) + var(--k,0) * 70ms) both,
    var(--loop,wrp-float) var(--dur,10s) var(--ease,ease-in-out) calc(var(--k,0) * -1.3s) infinite var(--dir,normal);
}
.wrp-s svg{display:block;width:100%;height:auto}
.s-disc,.s-ring{border-radius:50%;aspect-ratio:1}
.s-disc,.s-ring{box-shadow:0 0 0 7px #fff}
.s-spark{color:var(--a1);--dr:30deg;--dur:7s}
.s-spark svg{height:100%}

/* textos */
.wrp-title{margin:0;text-align:center;text-wrap:balance;font:800 clamp(25px,7.4vw,31px)/1.08 var(--ui);letter-spacing:-.015em;color:var(--fg)}
.wrp-slide:is([data-id="te-amo"],[data-id="echo-de-menos"],[data-id="pupi"],[data-id="duelos"]) .wrp-title{
  font:400 clamp(46px,14vw,64px)/.88 var(--display);letter-spacing:-.005em;
}
.wrp-hl{padding:0 .16em;border-radius:.18em;background:var(--chip);color:var(--chip-fg);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.wrp-body{margin:0;text-align:center;text-wrap:balance;font:600 16.5px/1.4 var(--ui);color:var(--fg)}
.wrp-chip{display:inline-block;padding:8px 16px 7px;border-radius:var(--r-pill);background:var(--chip);color:var(--chip-fg);font:800 18px/1.2 var(--ui)}
.wrp-after{margin:0;text-align:center}
.wrp-sticker{
  display:inline-block;padding:10px 16px 9px;border-radius:16px;background:var(--st);color:var(--st-fg);
  font:800 16px/1.28 var(--ui);text-wrap:balance;transform:rotate(var(--tilt,-2deg));
}
.wrp-hint{margin:6px 0 0;text-align:center}
.wrp-hint span{
  display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 2.5px currentColor;
  background:var(--bg);color:var(--fg);font:800 15px/1 var(--ui);animation:wrp-nudge 1.6s ease-in-out infinite;
}

/* cifras gordas: el texto final da el ancho y lo lee el lector de pantalla; encima, mientras cuenta, el número que va saliendo */
.wrp-stats{display:flex;flex-direction:column;align-items:center}
.wrp-stat{margin:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.wrp-stat + .wrp-stat{margin-top:18px}
.wrp-stat-num{display:block;font:400 clamp(104px,33vw,150px)/.82 var(--display);letter-spacing:-.012em;color:var(--a1);font-variant-numeric:tabular-nums}
.wrp-stat + .wrp-stat .wrp-stat-num{font-size:clamp(66px,21vw,96px);color:var(--a2)}
.wrp-stat-label{font:800 clamp(17px,5.2vw,21px)/1.1 var(--ui);letter-spacing:-.01em}
.wrp-count{position:relative;display:inline-block}
.wrp-count-run{position:absolute;inset:0;text-align:center;white-space:nowrap}
.wrp-count-run:empty{display:none}
.wrp-count.is-running .wrp-count-end{opacity:0}

/* burbujas: el WhatsApp de verdad, puesto encima de la story como una tarjeta con su canto. Las del 15-6-2025 salen una a una. */
.wrp-chat{-webkit-user-select:none;user-select:none}
.wrp .chat{border-radius:var(--r-tesela);box-shadow:0 6px 0 rgba(10,6,36,.35)}
.wrp .chat-head{padding:7px 14px}
.wrp .chat-avatar{width:30px;height:30px;font-size:15px}
.wrp .chat-body{padding:8px 10px 10px}
.wrp .chat-date{margin:5px 0 4px}
.wrp-slide:not([data-staged]) .chat-msg{animation:wrp-bubble .45s cubic-bezier(.2,.9,.3,1.25) calc(var(--t0) + .32s + var(--k,0) * 90ms) both}
.wrp .chat-msg.own{transform-origin:right bottom}
.wrp .chat-msg.other{transform-origin:left bottom}
.wrp-slide .chat-msg,.wrp-slide .wrp-after{transition:opacity .3s ease,translate .3s ease}
.wrp-slide .chat-msg.is-pending,.wrp-slide .wrp-after.is-pending{visibility:hidden;opacity:0;translate:0 10px}

/* duelos: los nombres en pegatina (Ane chicle, Mario cobalto) y una barra partida por fila que crece desde cada lado */
.wrp-legend{display:flex;justify-content:space-between;padding:0 4px}
.wrp-legend span{
  display:inline-flex;align-items:center;height:44px;padding:4px 16px 0;border-radius:16px;font:400 30px/1 var(--display);
}
.wrp-legend .is-ane{background:var(--ane);color:var(--tinta);box-shadow:0 0 0 3.5px #fff,0 7px 0 3.5px var(--ane-d);rotate:-4deg}
.wrp-legend .is-mario{background:var(--mario);color:#fff;box-shadow:0 0 0 3.5px #fff,0 7px 0 3.5px var(--mario-d);rotate:3deg}
.wrp-duels{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.wrp-duel-label{margin:0 0 6px;text-align:center;font:700 14px/1 var(--ui);color:#D6D0F6}
.wrp-vs{display:flex;gap:4px;height:38px}
.wrp-seg{position:relative;display:flex;align-items:center;flex:var(--w,50) 1 0%;min-width:0;padding:4px 12px 0;white-space:nowrap;font:400 24px/1 var(--display)}
.wrp-seg.is-ane{justify-content:flex-start;border-radius:14px 4px 4px 14px;color:var(--tinta)}
.wrp-seg.is-mario{justify-content:flex-end;border-radius:4px 14px 14px 4px;color:#fff}
.wrp-fill{position:absolute;inset:0;border-radius:inherit;animation:wrp-grow .9s cubic-bezier(.2,.8,.2,1) calc(var(--t0) + .2s + var(--i,0) * 110ms) both}
.wrp-seg.is-ane .wrp-fill{background:var(--ane);transform-origin:left}
.wrp-seg.is-mario .wrp-fill{background:var(--mario);transform-origin:right}
.wrp-seg-val{position:relative;animation:wrp-fade .35s ease-out calc(var(--t0) + .5s + var(--i,0) * 110ms) both}
.wrp-seg.is-win .wrp-seg-val{font-size:30px}

/* preguntas: dos pegatinas gordas, Ane (chicle) o Mario (cobalto), troqueladas; se hunden al pulsar */
.wrp-options{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 4px}
.wrp-option{
  --od:var(--ane-d);
  position:relative;display:flex;align-items:center;justify-content:center;min-height:104px;margin-bottom:8px;padding:8px 10px 2px;
  border-radius:26px;box-shadow:0 0 0 4px #fff,0 9px 0 4px var(--od);
  font:400 clamp(36px,11vw,46px)/1 var(--display);
  transition:opacity .2s,translate .1s,box-shadow .1s;
}
.wrp-option:active:not(:disabled){translate:0 6px;box-shadow:0 0 0 4px #fff,0 3px 0 4px var(--od)}
.wrp-option.is-ane{background:var(--ane);color:var(--tinta)}
.wrp-option.is-mario{--od:var(--mario-d);background:var(--mario);color:#fff}
.wrp-option:focus-visible{outline:3px solid var(--fg);outline-offset:8px}
.wrp-option:disabled{cursor:default;opacity:1}
.wrp-option.is-dim{opacity:.35}
.wrp-option.is-correct{translate:0 6px;box-shadow:0 0 0 4px var(--lima),0 3px 0 4px var(--od)}
.wrp-option.is-wrong{translate:0 6px;box-shadow:0 0 0 4px var(--tinta),0 3px 0 4px var(--od)}
.wrp-mark{
  position:absolute;top:-16px;right:-12px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  font:800 20px/1 var(--ui);box-shadow:0 0 0 3.5px #fff;
}
.wrp-mark:empty{display:none}
.wrp-option.is-correct .wrp-mark{background:var(--lima);color:var(--tinta)}
.wrp-option.is-wrong .wrp-mark{background:var(--tinta);color:#fff}
.wrp-feedback{display:flex;flex-direction:column;align-items:center;gap:14px}
.wrp-feedback:empty{display:none}
.wrp-content > .wrp-feedback.is-fresh{animation:none} /* al responder no se repite la entrada de la caja: solo suben sus hijos */
.wrp-feedback.is-fresh > *{animation:wrp-rise .45s cubic-bezier(.2,.8,.2,1) both}
.wrp-feedback.is-fresh > :nth-child(2){animation-delay:.12s}
.wrp-feedback.is-fresh > :nth-child(3){animation-delay:.24s}
.wrp-gain{margin:0}
.wrp-gain span{
  display:inline-block;padding:10px 20px 4px;border-radius:18px;background:var(--lima);color:var(--tinta);font:400 56px/1 var(--display);
  box-shadow:0 0 0 4px #fff,0 9px 0 4px var(--lima-d);transform:rotate(-4deg);
}
.wrp-feedback.is-fresh .wrp-gain span{animation:wrp-slam .55s cubic-bezier(.2,.9,.3,1.3) both}
.wrp-fail{margin:0;text-align:center;text-wrap:balance;font:800 19px/1.3 var(--ui);color:var(--fg)}
.wrp-result{margin:0;text-align:center;text-wrap:balance;font:800 22px/1.25 var(--ui);color:var(--fg)}
/* «Seguir» dentro de la story: la píldora con los colores de la diapositiva al revés, con su canto */
.wrp .wrp-next{
  --face:var(--fg);--lab:var(--bg);--edge:rgba(10,6,36,.38);
  width:auto;min-width:56%;min-height:54px;padding:0 30px;font-size:18px;
}
.wrp .wrp-next:focus-visible{outline:3px solid var(--fg);outline-offset:4px}

/* ===== paletas y composiciones, diapositiva a diapositiva ===== */

/* 1 · portada: cobalto, la diana lima que flota y el disco chicle que respira */
.wrp-slide[data-id="portada"]{--bg:var(--cobalto);--fg:#fff;--a1:var(--lima);--a2:var(--chicle)}
.wrp-slide[data-id="portada"] .wrp-stat + .wrp-stat .wrp-stat-num{color:#FFC2E2} /* el «487»: chicle claro, 4,2:1 sobre cobalto (el disco sigue chicle) */
.wrp-slide[data-id="portada"] .wrp-content{justify-content:space-between;padding-top:60px}
.wrp-slide[data-id="portada"] .wrp-title{font:400 min(18vw,74px)/.84 var(--display);letter-spacing:-.012em;text-align:left}
[data-id="portada"] .s-ring{
  width:84%;bottom:-18%;right:-34%;--dx:-14px;--dy:-16px;--dr:0deg;--dur:12s;
  background:radial-gradient(circle closest-side,var(--cobalto) 0 18%,var(--lima) 18.5% 39%,var(--cobalto) 39.5% 53%,var(--lima) 53.5% 67%,var(--cobalto) 67.5% 81%,var(--lima) 81.5% 100%);
}
[data-id="portada"] .s-disc{width:58%;top:-8%;right:-24%;background:var(--a2);--dx:-12px;--dy:12px}
[data-id="portada"] .s-spark.s1{width:40px;height:40px;top:46%;right:12%;color:var(--lima)}
[data-id="portada"] .s-spark.s2{width:26px;height:26px;top:16%;left:62%;color:var(--chicle)}

/* 2 · «te quiero comer»: tomate, mancha chicle que gira, disco girasol y garabato */
.wrp-slide[data-id="comer"]{--bg:var(--tomate);--fg:var(--tinta);--a1:var(--chicle);--a2:var(--girasol);--a3:var(--leche);--chip:var(--leche);--chip-fg:var(--tinta);--st:var(--tinta);--st-fg:var(--leche)}
.wrp-slide[data-id="comer"] .wrp-title{text-align:left;font-size:clamp(25px,7.6vw,32px)}
.wrp-slide[data-id="comer"] .wrp-body{text-align:left;font-size:16px}
.wrp-slide[data-id="comer"] .wrp-after{text-align:left}
.wrp-slide[data-id="comer"] .wrp-sticker{--tilt:1.5deg}
.wrp-slide[data-id="comer"] .wrp-chat{rotate:-1.6deg}
[data-id="comer"] .s-blob{width:86%;top:-15%;left:-32%;color:var(--a1);--loop:wrp-spin;--dur:48s;--ease:linear}
[data-id="comer"] .s-disc{width:52%;bottom:-13%;right:-18%;background:var(--a2)}
[data-id="comer"] .s-spark{width:40px;height:40px;top:11%;right:9%;color:var(--a3)}
[data-id="comer"] .s-scribble{width:76%;bottom:2%;left:-9%;color:var(--a1);--dr:-5deg}

/* 3 · primer «te amo»: chicle, dos lunas (tomate y cobalto) que se acercan; las cifras subrayadas en lima */
.wrp-slide[data-id="te-amo"]{--bg:var(--chicle);--fg:var(--tinta);--a1:var(--tomate);--a2:var(--cobalto);--chip:var(--lima);--chip-fg:var(--tinta)}
.wrp-slide[data-id="te-amo"] .wrp-title{text-align:left}
.wrp-slide[data-id="te-amo"] .wrp-body{font:800 clamp(21px,6.4vw,25px)/1.3 var(--ui);letter-spacing:-.01em}
[data-id="te-amo"] .s-d1{width:62%;top:-9%;right:-34%;background:var(--a1);--dx:-20px;--dy:8px;--dr:0deg}
[data-id="te-amo"] .s-d2{width:82%;bottom:-32%;left:-36%;background:var(--a2);--dx:22px;--dy:-6px;--dr:0deg}
[data-id="te-amo"] .s-spark{width:34px;height:34px;top:12%;right:8%;color:#fff}

/* 4 · 15-6-2025: noche de tinta, «1:11» en hueco corriendo detrás, luna añil y el rótulo «5 minutos» en lima */
.wrp-slide[data-id="echo-de-menos"]{--bg:var(--tinta);--fg:#fff;--a1:var(--anil);--a2:rgba(147,165,255,.34)}
.wrp-slide[data-id="echo-de-menos"] .wrp-title{font-size:clamp(36px,11vw,44px);color:var(--a1)}
.wrp-slide[data-id="echo-de-menos"] .wrp-content{gap:10px;padding:36px 16px 16px}
[data-id="echo-de-menos"] .s-type{left:0;white-space:nowrap;font:400 150px/1 var(--display);color:transparent;-webkit-text-stroke:1.5px var(--a2);--in:wrp-fade;--loop:wrp-pan;--dur:36s;--ease:linear}
[data-id="echo-de-menos"] .s-type span{display:block}
[data-id="echo-de-menos"] .s-type.r1{top:2%}
[data-id="echo-de-menos"] .s-type.r2{top:37%;--dir:reverse;--dur:44s}
[data-id="echo-de-menos"] .s-type.r3{top:72%}
[data-id="echo-de-menos"] .s-moon{width:34%;aspect-ratio:1;bottom:-5%;left:-10%;border-radius:50%;box-shadow:inset -26px 16px 0 0 var(--a1);transform:rotate(-15deg);--dr:0deg}
[data-id="echo-de-menos"] .s-spark.s1{width:22px;height:22px;top:29%;left:7%;color:var(--girasol)}
[data-id="echo-de-menos"] .s-spark.s2{width:15px;height:15px;top:63%;right:9%;color:var(--chicle)}
.wrp-after.is-label .wrp-sticker{
  padding:12px 22px 6px;border-radius:18px;background:var(--lima);color:var(--tinta);
  font:400 clamp(40px,12vw,48px)/1 var(--display);--tilt:-5deg;box-shadow:0 0 0 4px #fff,0 9px 0 4px var(--lima-d);
}
.wrp-after.is-label:not(.is-pending) .wrp-sticker{animation:wrp-slam .55s cubic-bezier(.2,.9,.3,1.3) both}

/* 5 · primer «pupi»: lima, lunares tinta y tomate que corren abajo */
.wrp-slide[data-id="pupi"]{--bg:var(--lima);--fg:var(--tinta);--a1:var(--tinta);--a2:var(--tomate);--chip:var(--tinta);--chip-fg:var(--lima)}
.wrp-slide[data-id="pupi"] .wrp-title{text-align:left}
.wrp-slide[data-id="pupi"] .wrp-body{font:800 18px/1.35 var(--ui)}
.wrp-slide[data-id="pupi"] .wrp-chat{rotate:1.4deg}
[data-id="pupi"] .s-dots{left:0;right:0;bottom:0;height:84px;overflow:hidden;--in:wrp-fade;--loop:none}
.wrp-slide[data-id="pupi"] .wrp-content{padding-bottom:100px}
[data-id="pupi"] .s-dots::before{
  content:"";position:absolute;top:-64px;left:-64px;right:0;bottom:0;
  background:
    radial-gradient(circle at 16px 16px,var(--a1) 0 10px,transparent 10.5px) 0 0/64px 64px,
    radial-gradient(circle at 48px 48px,var(--a2) 0 10px,transparent 10.5px) 0 0/64px 64px;
  animation:wrp-dots 5s linear infinite;
}
[data-id="pupi"] .s-disc{width:48%;top:-13%;right:-18%;background:var(--a2)}
[data-id="pupi"] .s-spark{width:34px;height:34px;top:16%;right:8%;color:var(--cobalto)}

/* 6 · mes récord: chicle a sangre con túneles de anillos tomate y girasol arriba y abajo; la cifra en tinta */
.wrp-slide[data-id="mes-record"]{--bg:var(--chicle);--fg:var(--tinta);--a1:var(--tinta);--chip:var(--tinta);--chip-fg:var(--chicle)}
.wrp-slide[data-id="mes-record"] .wrp-title,.wrp-slide[data-id="silencio"] .wrp-title{font:400 clamp(38px,12vw,48px)/.9 var(--display);letter-spacing:0}
.wrp-slide[data-id="mes-record"] .wrp-chip{rotate:-3deg}
[data-id="mes-record"] .s-tunnel{left:-30%;width:160%;aspect-ratio:1;--in:wrp-fade;--loop:none}
[data-id="mes-record"] .s-tunnel::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:repeating-radial-gradient(circle,var(--tomate) 0 14px,var(--girasol) 14px 28px);
  box-shadow:0 0 0 8px #fff;
  animation:wrp-breathe 4.5s ease-in-out infinite alternate;
}
[data-id="mes-record"] .s-tunnel.t1{bottom:79%}
[data-id="mes-record"] .s-tunnel.t2{top:81%}
[data-id="mes-record"] .s-tunnel.t2::before{animation-delay:-2.2s}
[data-id="mes-record"] .s-spark{width:28px;height:28px;top:31%;right:9%;color:var(--girasol)}

/* 7 · el silencio más largo: leche, un «3» enorme y el op-art de tinta que respira abajo */
.wrp-slide[data-id="silencio"]{--bg:var(--leche);--fg:var(--tinta);--a1:var(--tinta);--chip:var(--tinta);--chip-fg:var(--leche);--st:var(--cobalto);--st-fg:#fff}
.wrp-slide[data-id="silencio"] .wrp-content{justify-content:flex-start;padding-top:64px}
.wrp-slide[data-id="silencio"] .wrp-stat-num{font-size:clamp(200px,64vw,280px);line-height:.8}
[data-id="silencio"] .s-opart{left:-35%;width:170%;aspect-ratio:1;top:74%;--in:wrp-fade;--loop:none}
[data-id="silencio"] .s-opart::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:repeating-radial-gradient(circle,var(--tinta) 0 8px,transparent 8px 17px);
  animation:wrp-breathe 6s ease-in-out infinite alternate;
}
[data-id="silencio"] .s-scribble{width:56%;top:58%;right:-22%;color:var(--chicle);--dr:-8deg}

/* 8 · duelos: tinta, ajedrezado de leche que corre abajo, chispas chicle y cobalto */
.wrp-slide[data-id="duelos"]{--bg:var(--tinta);--fg:#fff}
.wrp-slide[data-id="duelos"] .wrp-title{font-size:clamp(40px,12vw,52px)}
.wrp-slide[data-id="duelos"] .wrp-hl{padding:0;background:none;color:var(--ane)}
.wrp-slide[data-id="duelos"] .wrp-hl.is-m1{color:var(--anil)}
.wrp-slide[data-id="duelos"] .wrp-content{gap:14px;padding-bottom:44px}
[data-id="duelos"] .s-checker{left:0;bottom:0;width:calc(100% + 40px);height:20px;background:conic-gradient(var(--leche) 25%,transparent 0 50%,var(--leche) 0 75%,transparent 0) 0 0/20px 20px;--in:wrp-fade;--loop:wrp-pan40;--dur:1.6s;--ease:linear}
[data-id="duelos"] .s-spark.s1{width:32px;height:32px;top:9%;left:6%;color:var(--ane)}
[data-id="duelos"] .s-spark.s2{width:22px;height:22px;top:5%;right:6%;color:var(--anil)}

/* 9 · buenos días: girasol, un sol tomate que sale con sus rayos girando */
.wrp-slide[data-id="buenos-dias"]{--bg:var(--girasol);--fg:var(--tinta);--a1:var(--tomate);--a2:rgba(255,255,255,.45)}
.wrp-slide[data-id="buenos-dias"] .wrp-title{font:400 clamp(40px,12vw,50px)/.92 var(--display);letter-spacing:-.005em}
.wrp-slide[data-id="buenos-dias"] .wrp-content{padding-bottom:36%}
[data-id="buenos-dias"] .s-sun{width:86%;aspect-ratio:1;left:7%;top:76%;isolation:isolate;--in:wrp-sunrise;--loop:none}
[data-id="buenos-dias"] .s-sun::before{
  content:"";position:absolute;z-index:-1;left:50%;top:50%;width:230%;aspect-ratio:1;margin:-115% 0 0 -115%;border-radius:50%;
  background:repeating-conic-gradient(var(--a2) 0 8deg,transparent 8deg 16deg);animation:wrp-turn 60s linear infinite;
}
[data-id="buenos-dias"] .s-sun::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--a1);box-shadow:0 0 0 8px #fff}
[data-id="buenos-dias"] .s-spark{width:40px;height:40px;top:12%;right:8%;color:#fff}

/* 10 · «atension»: tomate y tinta, como el Bando que viene después, con la cinta «ATENSION» corriendo */
.wrp-slide[data-id="atension"]{--bg:var(--tomate);--fg:var(--tinta);--chip:var(--tinta);--chip-fg:var(--leche)}
.wrp-slide[data-id="atension"] .wrp-title{font:400 clamp(44px,13.4vw,60px)/.9 var(--display);letter-spacing:0}
.wrp-slide[data-id="atension"] .wrp-content{padding-bottom:92px}
[data-id="atension"] .s-band{
  left:-10%;right:-10%;bottom:4%;height:56px;display:flex;align-items:center;overflow:hidden;background:var(--tinta);color:var(--leche);
  transform:rotate(-5deg);--in:wrp-fade;--dx:0px;--dy:-6px;--dr:0deg;
}
[data-id="atension"] .s-band span{white-space:nowrap;padding-top:6px;font:400 36px/1 var(--display);letter-spacing:.03em;animation:wrp-pan 16s linear infinite}
[data-id="atension"] .s-disc{width:60%;top:-17%;right:-26%;background:var(--tinta)}

/* ===== movimiento ===== */
@keyframes wrp-bar{to{transform:none}}
@keyframes wrp-flood{to{transform:scale(var(--fs,16))}}
@keyframes wrp-recede{to{transform:scale(.94);opacity:.35}}
@keyframes wrp-rise{from{opacity:0;translate:0 26px}}
@keyframes wrp-pop{from{opacity:0;scale:.3}}
@keyframes wrp-fade{from{opacity:0}}
@keyframes wrp-sunrise{from{opacity:0;translate:0 45%}}
@keyframes wrp-float{50%{translate:var(--dx,12px) var(--dy,-16px);rotate:var(--dr,6deg)}}
@keyframes wrp-spin{to{rotate:360deg}}
@keyframes wrp-turn{to{rotate:360deg}}
@keyframes wrp-pan{to{translate:-50% 0}}
@keyframes wrp-pan40{to{translate:-40px 0}}
@keyframes wrp-dots{to{translate:64px 64px}}
@keyframes wrp-breathe{to{scale:1.09}}
@keyframes wrp-bubble{from{opacity:0;scale:.82;translate:0 10px}}
@keyframes wrp-slam{from{opacity:0;scale:2.1}60%{opacity:1}}
@keyframes wrp-grow{from{transform:scaleX(0)}}
@keyframes wrp-nudge{50%{translate:6px 0}}

@media (max-width:340px){
  .wrp-content{padding:38px 14px 18px;gap:12px}
  .wrp-seg{font-size:21px;padding-left:9px;padding-right:9px}
  .wrp-seg.is-win .wrp-seg-val{font-size:25px}
  .wrp-vs{height:34px}
  .wrp-option{min-height:88px}
}
@media (prefers-reduced-motion:reduce){
  .wrp *,.wrp *::before,.wrp *::after{animation:none !important}
  .wrp-bars i.is-now::after{transform:none}
  .wrp-slide .chat-msg,.wrp-slide .wrp-after{transition-duration:.01ms !important}
}