/* Tokens de DESIGN.md (neutros compartidos + skin Esmeralda). Fuentes: las del cliente iOS. */
@font-face{font-family:"Cormorant Garamond";src:url(/static/fonts/CormorantGaramond-SemiBold.ttf);font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url(/static/fonts/Manrope-Regular.ttf);font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url(/static/fonts/Manrope-SemiBold.ttf);font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url(/static/fonts/Manrope-Bold.ttf);font-weight:700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/static/fonts/JetBrainsMono-SemiBold.ttf);font-weight:600;font-display:swap}

:root{
  --bg:#131310;--text:#F2EFE6;--dim:#A8A498;--mute:#807C71;--danger:#E5484D;
  --accent:#00A86B;--on-accent:#04140d;
  --glow:rgba(0,168,107,.16);
  --card:rgba(255,255,255,.045);--card-edge:rgba(255,255,255,.08);
  --shadow:0 20px 40px -15px rgba(0,0,0,.45);
  --field:rgba(255,255,255,.06);
  --board:#efe2c6;--board-edge:rgba(107,74,43,.18);
  --serif:"Cormorant Garamond",Georgia,serif;--sans:Manrope,system-ui,-apple-system,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme:light){:root{
  --bg:#ECE4CE;--text:#1F1A0F;--dim:#4A4234;--mute:#726952;--danger:#B6362B;
  --accent:#1F6F4C;--on-accent:#fff;--glow:rgba(31,111,76,.14);
  --card:rgba(255,255,255,.55);--card-edge:rgba(255,255,255,.7);
  --shadow:0 20px 40px -15px rgba(0,0,0,.05);--field:rgba(255,255,255,.7);
}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;color:var(--text);font:400 15px/1.55 var(--sans);
  background:radial-gradient(900px 500px at 50% -10%,var(--glow),transparent 70%),var(--bg);background-attachment:fixed}
h1,h2{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(2.6rem,7vw,4rem)}h2{font-size:clamp(1.9rem,4.5vw,2.6rem)}
p{margin:0}
svg{flex:none}

.top{max-width:760px;margin:0 auto;padding:24px 20px 0}
.brand{font:700 13px/1 var(--sans);letter-spacing:.8px;text-transform:uppercase;color:var(--text);text-decoration:none}
main{max-width:760px;margin:0 auto;padding:0 20px 64px;display:grid;gap:72px}
main>section:first-child{margin-top:40px}

.stage{text-align:center;display:grid;gap:16px;justify-items:center}
.stage h1{max-width:12ch}
.badge{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--glow);color:var(--accent);
  border:1px solid var(--card-edge);font:700 11px/1 var(--sans);letter-spacing:.8px;text-transform:uppercase}
.badge svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hint{color:var(--dim);font-size:14px;max-width:46ch}
.board-wrap{--bw:min(calc(100vw - 32px),880px);width:var(--bw);justify-self:start;margin:8px 0 0 calc(50% - var(--bw)/2);perspective:1600px}
.board{position:relative;width:100%;max-width:520px;margin:0 auto;isolation:isolate;transform-style:preserve-3d;
  transform:rotateX(calc(var(--sp,0)*22deg)) scale(calc(1 - var(--sp,0)*.08));transform-origin:50% 100%;
  animation:board-in 1.3s cubic-bezier(.16,1,.3,1) .35s both}
.board.is-3d{max-width:none}
.board.is-3d canvas{aspect-ratio:16/9.5;cursor:crosshair}
canvas{display:block;width:100%;aspect-ratio:16/9;background:var(--board);border-radius:20px;border:1px solid var(--board-edge);
  touch-action:none;box-shadow:var(--shadow)}
.pill{position:absolute;top:12px;right:12px;display:flex;gap:6px;align-items:center;padding:6px 12px;border-radius:999px;
  background:rgba(10,18,14,.6);border:1px solid rgba(255,255,255,.12);color:#F2EFE6;font:600 13px/1 var(--mono);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.pill svg{width:15px;height:15px;fill:none;stroke:#f7c948;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pill.done svg{filter:drop-shadow(0 0 4px #f7c948)}

.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border:0;border-radius:14px;
  background:var(--accent);color:var(--on-accent);font:700 15px/1 var(--sans);text-decoration:none;cursor:pointer;
  transform:translate(var(--bx,0px),var(--by,0px));transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s cubic-bezier(.16,1,.3,1),background .25s}
.btn::after{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-120%) skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transition:transform .7s cubic-bezier(.16,1,.3,1)}
.btn:hover::after{transform:translateX(120%) skewX(-20deg)}
.btn:hover{transform:translate(var(--bx,0px),calc(var(--by,0px) - 2px));box-shadow:0 12px 28px -10px var(--accent)}
.btn:active{transform:translate(var(--bx,0px),var(--by,0px)) scale(.97)}
.btn:focus-visible,.ghost:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn svg{width:18px;height:18px;margin-right:8px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn[aria-disabled=true]{opacity:.55;pointer-events:none}
.ghost svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px;margin-left:4px}
.ghost{background:none;border:0;color:var(--dim);font:600 14px/1 var(--sans);padding:12px 16px;border-radius:12px;cursor:pointer;
  opacity:.85;transition:all .2s ease}
.ghost:hover{opacity:1;color:var(--text);background:var(--field)}
.btn.outline{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--card-edge)}
.btn.outline:hover{box-shadow:inset 0 0 0 1px var(--mute)}

.card{background:var(--card);border:1px solid var(--card-edge);border-radius:24px;padding:clamp(1.75rem,5vw,3rem);
  box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.scroll-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.scroll-title{flex:1 1 220px}
.icon.big{width:52px;height:52px;border-radius:16px}.icon.big svg{width:26px;height:26px}
.seal{padding:6px 12px;border-radius:999px;font:700 11px/1 var(--sans);letter-spacing:.8px;text-transform:uppercase;color:var(--dim);
  background:var(--field);border:1px solid var(--card-edge);transition:all .4s ease}
.scroll-title p{color:var(--dim);margin-top:4px}
.scroll{perspective:1200px}
/* El pergamino se despliega en 3D y se inclina con el puntero. Sin backdrop-filter: lo aplanaría. */
.scroll .card{-webkit-backdrop-filter:none;backdrop-filter:none;transform-style:preserve-3d;transform-origin:50% 0;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:opacity .6s ease,transform .9s cubic-bezier(.16,1,.3,1),box-shadow .6s ease}
.scroll .card.tilting{transition:transform .08s linear,opacity .6s ease,box-shadow .6s ease}
.scroll .icon.big{transform:translateZ(34px)}
.scroll .powers li{transform:translateZ(14px)}
.scroll .cta{transform:translateZ(22px)}
.scroll .card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:var(--glare,0);
  background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.12),transparent 55%);transition:opacity .3s}
.scroll .card{position:relative}
.js .scroll.sealed .card{opacity:.5;transform:rotateX(-18deg) scale(.96);box-shadow:none}
.scroll:not(.sealed) .seal{color:var(--accent);background:var(--glow)}
.powers{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.powers li{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start}
.icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--glow);color:var(--accent)}
.icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.powers strong{display:block;font-weight:700;font-size:16px;margin-bottom:2px}
.powers span{color:var(--dim)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}

.join{display:grid;gap:10px}
.join p{color:var(--dim)}
input{flex:1 1 240px;height:52px;padding:0 18px;border-radius:14px;border:1px solid var(--card-edge);background:var(--field);color:var(--text);
  font:400 15px/1 var(--sans);text-align:center;transition:all .2s ease}
input::placeholder{color:var(--mute);text-align:center}
input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--glow)}
.error{color:var(--danger);font-size:14px}
.sr{position:absolute;left:-9999px}
footer{text-align:center;color:var(--mute);font-size:13px;padding:0 20px 40px}

/* Campo unificado: enlace + botón dentro del mismo contenedor */
.field{display:flex;align-items:center;gap:6px;margin-top:14px;height:56px;padding:0 6px 0 16px;border-radius:16px;
  border:1px solid var(--card-edge);background:var(--field);transition:all .2s ease}
.field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--glow)}
.field>svg{width:20px;height:20px;stroke:var(--mute);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.field input{flex:1 1 auto;min-width:0;height:100%;padding:0 8px;border:0;background:transparent;box-shadow:none;text-align:left;border-radius:0}
.field input::placeholder{text-align:left}
.field input:focus{box-shadow:none;border:0}
.field .btn{height:44px;min-height:0;padding:0 20px;border-radius:12px}

/* Entrada suave al cargar y al hacer scroll */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.js .reveal.in{opacity:1;transform:none}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.rise{animation:rise .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*90ms)}
@media (prefers-reduced-motion:reduce){.aurora i,.board,.board::before,.title3d .w,.gold,.pill.bump,.toast{animation:none!important}.board{transform:none!important}body::before{display:none}.btn::after{display:none}.scroll .card,.js .scroll.sealed .card{transform:none!important}.scroll .card::after{display:none}.rise{animation:none}.js .reveal,.scroll .card,.seal{transition:none}.js .reveal{opacity:1;transform:none}.btn,.ghost,input{transition:none}.btn:hover{transform:none;box-shadow:none}}
@media (max-width:480px){main{gap:56px}.cta{flex-direction:column}.cta .btn{width:100%}.field .btn{padding:0 14px}}

/* ---------- Efectos: fondo, título 3D, tablero, avisos, pergamino y confeti ---------- */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(80px);opacity:.28;mix-blend-mode:screen;will-change:transform}
.aurora i:nth-child(1){background:#00A86B;left:-20vmax;top:-25vmax;animation:drift1 22s ease-in-out infinite alternate}
.aurora i:nth-child(2){background:#f7c948;right:-25vmax;top:10vmax;opacity:.12;animation:drift2 28s ease-in-out infinite alternate}
.aurora i:nth-child(3){background:#1F6F4C;left:10vmax;bottom:-35vmax;opacity:.3;animation:drift3 25s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(18vmax,14vmax) scale(1.15)}}
@keyframes drift2{to{transform:translate(-16vmax,18vmax) scale(.85)}}
@keyframes drift3{to{transform:translate(14vmax,-16vmax) scale(1.1)}}
@media (prefers-color-scheme:light){.aurora i{mix-blend-mode:multiply;opacity:.12}.aurora i:nth-child(2){opacity:.1}}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(520px circle at var(--mx,-999px) var(--my,-999px),var(--glow),transparent 70%)}

.title3d{perspective:800px}
.title3d .w{display:inline-block;transform-origin:50% 100%;animation:word-in 1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0)*110ms)}
@keyframes word-in{from{opacity:0;transform:translateY(.4em) rotateX(-90deg);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.gold{background:linear-gradient(100deg,#d4a72c 0%,#f7c948 30%,#fff6d8 45%,#f7c948 60%,#b98a3c 100%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:word-in 1s cubic-bezier(.16,1,.3,1) both,shimmer 5s ease-in-out 1.4s infinite;animation-delay:calc(var(--i,0)*110ms),1.4s}
@keyframes shimmer{0%,100%{background-position:100% 0}50%{background-position:0 0}}
@media (prefers-color-scheme:light){.gold{background-image:linear-gradient(100deg,#8a6a1e 0%,#b98a3c 35%,#e0b84a 50%,#b98a3c 65%,#7a5a14 100%)}}

@keyframes board-in{from{opacity:0;transform:rotateX(38deg) translateY(60px) scale(.9)}to{opacity:1}}
/* Borde que gira alrededor del tablero, con un halo difuso detrás. */
.board::before,.board::after{content:"";position:absolute;inset:-1.5px;border-radius:17.5px;z-index:-1;pointer-events:none;
  background:conic-gradient(from var(--ang),transparent 0 55%,#3ecf8e 70%,#f7c948 80%,transparent 92%);animation:spin 6s linear infinite}
.board::after{inset:-6px;border-radius:22px;filter:blur(22px);opacity:.55}
@keyframes spin{to{--ang:360deg}}
.board.is-3d canvas{box-shadow:0 40px 80px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06)}
.board.hit canvas{animation:hit .45s ease}
@keyframes hit{0%{filter:none}20%{filter:saturate(1.6) brightness(1.15) hue-rotate(-25deg)}100%{filter:none}}
.pill.bump{animation:bump .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes bump{40%{transform:scale(1.25)}}
.pill.done{border-color:rgba(247,201,72,.6);box-shadow:0 0 22px -4px rgba(247,201,72,.6)}
.toast{position:absolute;left:50%;bottom:16px;transform:translate(-50%,10px);opacity:0;pointer-events:none;white-space:nowrap;
  max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;
  padding:9px 16px;border-radius:999px;background:rgba(10,18,14,.72);border:1px solid rgba(255,255,255,.14);color:#F2EFE6;
  font:700 13px/1.2 var(--sans);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.toast.show{animation:toast 1.9s cubic-bezier(.16,1,.3,1) forwards}
@keyframes toast{0%{opacity:0;transform:translate(-50%,12px) scale(.9)}12%,82%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-6px)}}

/* El pergamino se despliega al abrirse y sus puntos entran uno a uno. */
.scroll.opening .card{animation:unroll 1.2s cubic-bezier(.16,1,.3,1)}
@keyframes unroll{0%{opacity:.5;transform:rotateX(-70deg) scaleY(.35);clip-path:inset(0 0 85% 0 round 24px)}
  60%{clip-path:inset(0 0 0 0 round 24px)}100%{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 24px)}}
.scroll.opening .powers li{animation:flip-in .8s cubic-bezier(.16,1,.3,1) both}
.scroll.opening .powers li:nth-child(1){animation-delay:.45s}
.scroll.opening .powers li:nth-child(2){animation-delay:.6s}
.scroll.opening .powers li:nth-child(3){animation-delay:.75s}
@keyframes flip-in{from{opacity:0;transform:translateZ(14px) rotateX(-75deg) translateY(16px)}to{opacity:1;transform:translateZ(14px)}}
.scroll.opening .seal{animation:seal-pop .7s cubic-bezier(.34,1.56,.64,1) .2s}
@keyframes seal-pop{40%{transform:scale(1.4) rotate(-8deg);box-shadow:0 0 30px var(--accent)}}
.scroll.opening .icon.big{animation:icon-pop .9s cubic-bezier(.34,1.56,.64,1) .3s}
@keyframes icon-pop{0%{transform:translateZ(34px) scale(.4) rotate(-30deg)}100%{transform:translateZ(34px)}}

.confetti{position:fixed;z-index:9;pointer-events:none;border-radius:2px;margin:-6px 0 0 -6px;will-change:transform;backface-visibility:visible}
.confetti.round{border-radius:50%}
.confetti.star{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
@media (max-width:600px){.board.is-3d canvas{aspect-ratio:1/1}.toast{bottom:12px;font-size:12px}}
@media (prefers-reduced-motion:reduce){.board::after{animation:none!important}.toast.show{opacity:1;transform:translate(-50%,0)}.scroll.opening *,.scroll.opening .card{animation:none!important}}

/* ---------- Keepy (static/keepy.js): mismos tiempos que MascotSpec de iOS/Android ---------- */
[data-keepy]{display:inline-block;width:96px;height:96px;color:var(--mute);flex:none}
.keepy{width:100%;height:100%;overflow:visible}
.keepy *{transform-box:view-box}
.keepy .k-body{transform-origin:50px 91px;animation:k-breathe 3.2s ease-in-out infinite}
.keepy.k-sleepy .k-body{animation:k-breathe-deep 4.5s ease-in-out infinite}
.keepy .k-eye{animation:k-blink 4.2s linear infinite}
.keepy .k-leaf.l{animation:k-sway-l 2.6s ease-in-out infinite}
.keepy .k-leaf.r{animation:k-sway-r 2.6s ease-in-out infinite}
.keepy.k-happy .k-hop{animation:k-hop 1.1s infinite}
.keepy.k-happy .k-shadow{transform-origin:50px 93px;animation:k-shadow 1.1s infinite}
.keepy .k-z{animation:k-z 2.4s ease-out infinite}
@keyframes k-breathe{0%,50%,100%{transform:none}25%{transform:scale(.9875,1.025)}75%{transform:scale(1.0125,.975)}}
@keyframes k-breathe-deep{0%,50%,100%{transform:none}25%{transform:scale(.98,1.04)}75%{transform:scale(1.02,.96)}}
@keyframes k-blink{0%,96.6%,100%{transform:none}98.3%{transform:scaleY(.1)}}
@keyframes k-sway-l{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes k-sway-r{0%,100%{transform:rotate(4deg)}50%{transform:rotate(-4deg)}}
@keyframes k-hop{0%,100%{transform:none;animation-timing-function:cubic-bezier(.3,.7,.6,1)}50%{transform:translateY(-6px);animation-timing-function:cubic-bezier(.4,0,.7,.3)}}
@keyframes k-shadow{0%,100%{transform:none}50%{transform:scale(.7)}}
@keyframes k-z{0%{transform:none;opacity:0}30%{opacity:1}100%{transform:translate(4px,-10px);opacity:0}}
@media (prefers-reduced-motion:reduce){.keepy *{animation:none!important}}
.join-head{display:flex;align-items:center;gap:16px}
.join-head [data-keepy]{width:76px;height:76px}

/* ---------- La Colección del Guardián: tablero cálido, bordes de 20px y sombras suaves ---------- */
.board.is-3d canvas{border-radius:20px;border:0;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 24px 48px -24px rgba(60,40,20,.45),0 8px 18px -10px rgba(60,40,20,.25)}
.board::before{inset:-1.5px;border-radius:21.5px;opacity:.55;
  background:conic-gradient(from var(--ang),transparent 0 55%,#e8c48a 70%,#f7c948 80%,transparent 92%)}
.board::after{inset:-6px;border-radius:26px;opacity:.3;
  background:conic-gradient(from var(--ang),transparent 0 55%,#e8c48a 70%,#f7c948 80%,transparent 92%)}
.pill-label{font-family:var(--sans);font-weight:700;letter-spacing:.2px}
/* El botón verde de la invitación: hover sutil, transición suave. */
.field .btn{transform:none;transition:background-color .3s ease,box-shadow .3s ease,filter .3s ease}
.field .btn::after{display:none}
.field .btn:hover{transform:none;filter:brightness(1.07);box-shadow:0 6px 16px -8px var(--accent)}
.field .btn:active{transform:none;filter:brightness(.97)}

/* ---------- Exploración: llave, sonido y botón de acción ---------- */
kbd{font:600 12px/1 var(--mono);padding:2px 6px;border-radius:6px;border:1px solid var(--card-edge);background:var(--field)}
.keychip{display:inline-flex;margin-left:6px;padding-left:8px;border-left:1px solid rgba(255,255,255,.2);animation:bump .5s cubic-bezier(.34,1.56,.64,1)}
.keychip svg{width:15px;height:15px;fill:none;stroke:#f7c948;stroke-width:2.2;stroke-linecap:round}
.sound{position:absolute;top:12px;left:12px;width:36px;height:36px;display:grid;place-items:center;border-radius:999px;cursor:pointer;
  background:rgba(10,18,14,.6);border:1px solid rgba(255,255,255,.12);color:#F2EFE6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.sound svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sound .mute,.sound.off .on{display:none}.sound.off .mute{display:block}
.sound:focus-visible,.act:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.act{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border:0;border-radius:999px;
  background:var(--accent);color:var(--on-accent);font:700 15px/1 var(--sans);cursor:pointer;box-shadow:0 10px 24px -10px rgba(0,0,0,.6);
  animation:act-pulse 1.2s ease-in-out infinite}
.act svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
@keyframes act-pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(62,207,142,.55)}50%{transform:scale(1.06);box-shadow:0 0 0 10px rgba(62,207,142,0)}}
@media (prefers-reduced-motion:reduce){.act,.keychip{animation:none}}
/* Los avisos largos parten en dos líneas y el botón de acción queda por encima. */
.toast{white-space:normal;text-align:center;width:max-content;line-height:1.3}
.act{bottom:72px}