:root{
  --noche:#07040e; --noche2:#0d0718; --panel:#150c26; --panel2:#1d1233;
  --violeta:#7b2cbf; --violeta-cl:#a855f7; --magenta:#ff2d95; --oro:#ffc300;
  --neon:#39ff9c; --texto:#f6f0ff; --tenue:#b6a5d6; --linea:#2c1f47;
  --display:"Arial Black","Segoe UI",Impact,system-ui,sans-serif;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--noche);color:var(--texto);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}

.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.22,.7,.3,1),transform .8s cubic-bezier(.22,.7,.3,1)}
.js .rv.ok{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* ================= barra ================= */
.barra{position:fixed;top:0;left:0;right:0;z-index:80;padding:16px 0;transition:background .35s,padding .35s,border-color .35s;border-bottom:1px solid transparent}
.barra.pegada{background:rgba(7,4,14,.9);backdrop-filter:blur(14px);border-bottom-color:var(--linea);padding:10px 0}
.barra .wrap{display:flex;align-items:center;gap:14px}
.marca{display:flex;align-items:center;gap:11px;min-width:0}
.marca .disco{width:42px;height:42px;border-radius:50%;background:#fff;padding:3px;flex:0 0 auto;box-shadow:0 0 0 2px var(--violeta),0 0 22px rgba(168,85,247,.55)}
.marca .disco img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.marca b{font-family:var(--display);font-size:16px;letter-spacing:.4px;line-height:1;text-transform:uppercase}
.marca span{display:block;font-size:9.5px;letter-spacing:3px;color:var(--oro);font-weight:700;margin-top:3px}
.barra nav{margin-left:auto;display:flex;gap:24px;align-items:center}
.barra nav a{font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--tenue);transition:color .25s;position:relative}
.barra nav a:hover{color:var(--texto)}
.barra nav a.act{color:var(--magenta)}
.barra nav a.act::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--magenta);box-shadow:0 0 10px var(--magenta)}
@media(max-width:900px){.barra nav{display:none}}

/* ================= portada ================= */
.portada{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:120px 0 70px}
.portada::before{content:"";position:absolute;inset:0;
  background:radial-gradient(820px 460px at 78% 12%, rgba(255,45,149,.3), transparent 62%),
             radial-gradient(700px 500px at 10% 82%, rgba(123,44,191,.42), transparent 66%)}
.rejilla{position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(rgba(168,85,247,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(168,85,247,.1) 1px,transparent 1px);
  background-size:52px 52px;mask-image:radial-gradient(circle at 50% 45%,#000 12%,transparent 72%)}
.portada .wrap{position:relative;z-index:3;display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center}
@media(max-width:960px){.portada .wrap{grid-template-columns:1fr;gap:16px}.lado-tiki{order:-1}}
.chapa{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--linea);background:rgba(255,255,255,.04);border-radius:999px;padding:7px 15px;font-size:11.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:22px}
.luz{width:8px;height:8px;border-radius:50%;background:var(--neon);box-shadow:0 0 10px var(--neon)}
.luz.off{background:#ff6b6b;box-shadow:0 0 10px #ff6b6b}
.portada h1{font-family:var(--display);font-size:clamp(42px,9.4vw,92px);line-height:.92;letter-spacing:-2px;text-transform:uppercase;margin-bottom:20px}
.portada h1 .g{background:linear-gradient(100deg,var(--magenta),var(--oro));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 26px rgba(255,45,149,.4))}
.portada p.baja{font-size:clamp(15px,2.5vw,18.5px);color:var(--tenue);max-width:44ch;margin-bottom:28px}
.acciones{display:flex;gap:12px;flex-wrap:wrap}
.bt{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 26px;border-radius:12px;font-size:14px;font-weight:800;letter-spacing:.4px;cursor:pointer;font-family:inherit;border:1px solid transparent;transition:transform .25s,box-shadow .25s,background .25s,color .25s}
.bt-p{background:linear-gradient(135deg,var(--violeta),var(--magenta));color:#fff;box-shadow:0 12px 34px rgba(255,45,149,.35)}
.bt-p:hover{transform:translateY(-3px);box-shadow:0 18px 46px rgba(255,45,149,.5)}
.bt-s{border-color:var(--linea);background:rgba(255,255,255,.05);color:var(--texto)}
.bt-s:hover{transform:translateY(-3px);border-color:var(--violeta-cl)}
.bt-w{background:#25d366;color:#06280f}
.bt-w:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(37,211,102,.4)}
/* ========== selector de sede ========== */
.selector{margin:26px 0 6px}
.selector .eti{margin-bottom:9px}
.pastillas{display:flex;gap:8px;flex-wrap:wrap}
.pastilla-sede{font-family:inherit;font-size:13px;font-weight:800;letter-spacing:.2px;cursor:pointer;
  padding:10px 16px;border-radius:999px;border:1px solid var(--linea);background:rgba(255,255,255,.045);
  color:var(--tenue);transition:color .25s,border-color .25s,background .25s,transform .25s}
.pastilla-sede:hover{color:var(--texto);border-color:var(--violeta-cl);transform:translateY(-2px)}
.pastilla-sede.on{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--violeta),var(--magenta));
  box-shadow:0 10px 26px rgba(255,45,149,.35)}
.pastilla-sede:focus-visible{outline:2px solid var(--oro);outline-offset:2px}

/* ========== tarjetas de los 5 locales ========== */
.locales{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.local{background:linear-gradient(160deg,var(--panel),var(--panel2));border:1px solid var(--linea);
  border-radius:18px;padding:22px 20px;transition:transform .4s,border-color .4s,box-shadow .4s}
.local:hover{transform:translateY(-6px);border-color:var(--violeta-cl);box-shadow:0 26px 56px rgba(123,44,191,.3)}
.local-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.local h3{font-family:var(--display);font-size:22px;text-transform:uppercase;letter-spacing:-.4px;white-space:nowrap}
.local .verif{font-style:normal;color:var(--neon);font-size:13px;margin-left:5px}
.local .ciudad{font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:var(--oro);font-weight:800;margin:4px 0 15px}
.pin{flex:0 0 auto;font-size:10.5px;font-weight:900;letter-spacing:.9px;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;background:rgba(57,255,156,.14);color:var(--neon);border:1px solid rgba(57,255,156,.35)}
.pin.off{background:rgba(255,107,107,.13);color:#ff9a9a;border-color:rgba(255,107,107,.32)}
.local-datos{list-style:none;margin-bottom:17px}
.local-datos li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--linea);font-size:12.5px}
.local-datos li:last-child{border:0}
.local-datos b{color:var(--tenue);font-weight:700;font-size:10.5px;letter-spacing:1.3px;text-transform:uppercase;flex:0 0 auto}
.local-datos span{text-align:right}
.local-bts{display:flex;gap:8px;flex-wrap:wrap}
.bt-min{padding:11px 15px;font-size:12.5px;border-radius:10px;flex:1 1 auto}

.tiras{display:flex;gap:9px;flex-wrap:wrap;margin-top:28px}
.tira{border:1px solid var(--linea);background:rgba(255,255,255,.035);border-radius:11px;padding:10px 15px;font-size:12.5px}
.tira b{display:block;color:var(--oro);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:2px}

/* ================= TIKI ================= */
.lado-tiki{display:flex;justify-content:center;align-items:center;position:relative}
.tiki-caja{position:relative;width:min(340px,78vw);filter:drop-shadow(0 30px 60px rgba(123,44,191,.5))}
.tiki-caja svg{width:100%;height:auto;overflow:visible}
/* screen vuelve transparente el negro del afiche: la mascota queda integrada
   al fondo sin tener que recortarla pixel por pixel */
.mascota{width:100%;height:auto;mix-blend-mode:screen;animation:flotar 5.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.mascota{animation:none}}
/* en pantalla angosta la mascota va arriba y se comía la portada entera */
@media(max-width:960px){.tiki-caja{width:min(230px,54vw)}}
@media(max-width:560px){.tiki-caja{width:min(190px,48vw)}}
.flota-tiki{animation:flotar 5.4s ease-in-out infinite}
@keyframes flotar{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-18px) rotate(1deg)}}
.aura{position:absolute;inset:-14% -10%;border-radius:50%;background:radial-gradient(circle,rgba(255,45,149,.28),transparent 68%);filter:blur(28px);animation:latir 4.2s ease-in-out infinite;z-index:-1}
@keyframes latir{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.95;transform:scale(1.09)}}
/* El párpado BARRE hacia abajo dentro del recorte del ojo, como un párpado real.
   Escalar una elipse desde su centro cerraba el ojo por arriba y por abajo a la vez
   —un obturador, no un párpado— y por eso se veía a saltos. */
.parpado,.guino{transform:translateY(0)}
.parpado{animation:parpadear 5.4s cubic-bezier(.4,0,.5,1) infinite}
@keyframes parpadear{
  0%,88%      {transform:translateY(0)}
  91%         {transform:translateY(30px)}
  93.5%       {transform:translateY(58px)}   /* cerrado */
  95%         {transform:translateY(58px)}
  97%         {transform:translateY(26px)}
  99.5%,100%  {transform:translateY(0)}      /* abre más lento que cierra */
}
/* el guiño va en su propio compás para que no caiga junto al pestañeo */
.guino{animation:guinar 8.6s cubic-bezier(.4,0,.5,1) infinite}
@keyframes guinar{
  0%,44%    {transform:translateY(0)}
  47%       {transform:translateY(34px)}
  49%,58%   {transform:translateY(58px)}     /* se queda guiñando un momento */
  62%       {transform:translateY(24px)}
  65%,100%  {transform:translateY(0)}
}
/* saluda con el brazo del pulgar, girando desde el hombro */
.brazo-saludo{transform-box:view-box;transform-origin:212px 322px;animation:saludar 5.2s ease-in-out infinite}
@keyframes saludar{0%,54%,100%{transform:rotate(0)}61%{transform:rotate(12deg)}69%{transform:rotate(-8deg)}77%{transform:rotate(10deg)}85%{transform:rotate(-4deg)}}
.brillo{animation:chispear 2.9s ease-in-out infinite}
@keyframes chispear{0%,100%{opacity:.28}50%{opacity:.95}}
.lustre{animation:lustrar 6.4s ease-in-out infinite}
@keyframes lustrar{0%,72%,100%{opacity:.1}82%{opacity:.4}}
.parche{transform-box:fill-box;transform-origin:center;animation:respirar 5.4s ease-in-out infinite}
@keyframes respirar{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.humo{animation:subir 4.6s ease-in-out infinite;transform-origin:center bottom}
.hu2{animation-delay:.9s}.hu3{animation-delay:1.8s}
@keyframes subir{0%{opacity:0;transform:translateY(6px) scale(.85)}35%{opacity:.75}100%{opacity:0;transform:translateY(-26px) scale(1.25)}}
@media(prefers-reduced-motion:reduce){
  .flota-tiki,.aura,.parpado,.guino,.brazo-saludo,.brillo,.lustre,.parche,.humo{animation:none}
}
/* burbuja que dice algo — sale por el costado, sin pisar el tocado */
.globo{position:absolute;top:62%;left:-16px;z-index:4;background:var(--oro);color:#241800;font-weight:900;font-size:12.5px;padding:9px 14px;border-radius:12px;box-shadow:0 10px 26px rgba(255,195,0,.35);animation:asomar 6s ease-in-out infinite;white-space:nowrap}
.globo::after{content:"";position:absolute;right:-7px;top:50%;margin-top:-7px;border:7px solid transparent;border-left-color:var(--oro);border-right:0}
@keyframes asomar{0%,12%,88%,100%{opacity:0;transform:translateX(10px) scale(.92)}20%,80%{opacity:1;transform:none}}
@media(max-width:1080px){.globo{left:auto;right:-6px;top:34%}
  .globo::after{right:auto;left:-7px;border-left-color:transparent;border-right-color:var(--oro);border-left:0;border-right-width:7px}}
@media(max-width:960px){.globo{top:auto;bottom:-6px;right:-4px}}
@media(max-width:560px){.globo{font-size:11.5px;padding:7px 11px}}

/* ================= riel de promos ================= */
.seccion{padding:86px 0}
.cab-sec{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px;flex-wrap:wrap}
.eti{font-size:10.5px;letter-spacing:3.6px;text-transform:uppercase;color:var(--oro);font-weight:800;margin-bottom:10px}
h2{font-family:var(--display);font-size:clamp(28px,5.4vw,50px);line-height:1;letter-spacing:-1.2px;text-transform:uppercase}
h2 .g{background:linear-gradient(100deg,var(--magenta),var(--oro));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--tenue);font-size:15px;max-width:52ch;margin-top:12px}
.riel{display:flex;gap:18px;overflow-x:auto;padding:6px 20px 22px;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -20px}
.riel::-webkit-scrollbar{display:none}
.cartel{flex:0 0 clamp(240px,74vw,320px);scroll-snap-align:start;position:relative;border-radius:20px;overflow:hidden;background:var(--panel);border:1px solid var(--linea);transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s,border-color .45s}
.cartel:hover{transform:translateY(-10px);box-shadow:0 30px 64px rgba(255,45,149,.26);border-color:var(--violeta-cl)}
.cartel .im{aspect-ratio:1/1;overflow:hidden;position:relative}
.cartel .im img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.cartel:hover .im img{transform:scale(1.09)}
.cartel .im::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 46%,rgba(10,5,20,.94))}
.cartel .sello{position:absolute;top:12px;left:12px;z-index:2;background:var(--oro);color:#241800;font-size:10.5px;font-weight:900;letter-spacing:.8px;padding:5px 10px;border-radius:8px;text-transform:uppercase}
.cartel .val{position:absolute;bottom:12px;left:14px;z-index:2;font-family:var(--display);font-size:27px;color:var(--oro);text-shadow:0 3px 18px rgba(0,0,0,.7)}
.cartel .cu{padding:16px 16px 18px}
.cartel h3{font-size:16px;font-weight:800;margin-bottom:6px;line-height:1.2}
.cartel p{font-size:12.5px;color:var(--tenue);min-height:34px}
.arrastra{font-size:11.5px;color:var(--tenue);letter-spacing:1.6px;text-transform:uppercase;margin-top:4px}

/* ================= pasos ================= */
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.paso{position:relative;background:linear-gradient(160deg,var(--panel),var(--panel2));border:1px solid var(--linea);border-radius:18px;padding:26px 22px;overflow:hidden;transition:transform .4s,border-color .4s}
.paso:hover{transform:translateY(-6px);border-color:var(--violeta-cl)}
.paso .n{font-family:var(--display);font-size:52px;line-height:1;color:transparent;-webkit-text-stroke:1.6px var(--violeta-cl);opacity:.65;margin-bottom:10px}
.paso h3{font-size:16.5px;margin-bottom:7px}
.paso p{font-size:13.5px;color:var(--tenue)}

/* ================= franja neón ================= */
.neon{background:linear-gradient(90deg,var(--violeta),var(--magenta));padding:16px 0;overflow:hidden}
.neon .rueda{display:flex;gap:44px;white-space:nowrap;animation:corre 26s linear infinite;font-family:var(--display);font-size:16px;letter-spacing:1.4px;text-transform:uppercase;color:#fff}
.neon span i{font-style:normal;margin:0 18px;color:var(--oro)}
@keyframes corre{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.neon .rueda{animation:none}}

/* ================= carta (página propia) ================= */
.cabecera{position:relative;min-height:46svh;display:flex;align-items:flex-end;overflow:hidden;padding:120px 0 44px}
.cabecera::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 420px at 76% 8%, rgba(255,45,149,.3), transparent 62%),radial-gradient(620px 460px at 8% 90%, rgba(123,44,191,.45), transparent 66%)}
.cabecera .wrap{position:relative;z-index:2}
.cabecera h1{font-family:var(--display);font-size:clamp(36px,7.6vw,72px);line-height:.95;text-transform:uppercase;letter-spacing:-1.6px;margin-bottom:12px}
.volver{display:inline-block;font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:var(--tenue);margin-bottom:18px;transition:color .3s}
.volver:hover{color:var(--magenta)}
.cinta{position:sticky;top:54px;z-index:70;background:rgba(13,7,24,.95);backdrop-filter:blur(12px);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.cinta .indice{display:flex;overflow-x:auto;scrollbar-width:none}
.cinta .indice::-webkit-scrollbar{display:none}
.indice a{flex:0 0 auto;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--tenue);padding:14px 17px;white-space:nowrap;border-right:1px solid var(--linea);transition:color .25s,background .25s}
.indice a:last-child{border-right:0}
.indice a:hover{color:var(--texto)}
.indice a.on{color:var(--oro);background:rgba(255,195,0,.08);box-shadow:inset 0 -2px 0 var(--oro)}
.nota-sede{margin-top:14px;font-size:13px;color:var(--tenue);border-left:3px solid var(--oro);padding-left:12px}
.nota-sede b{color:var(--texto)}
.nota-sede a{color:var(--magenta);text-decoration:underline;text-underline-offset:3px}
.pag-carta{padding:56px 0 90px}
.bloque-cat{margin-bottom:56px;scroll-margin-top:120px}
.bloque-cat h3{font-family:var(--display);font-size:clamp(22px,4vw,34px);text-transform:uppercase;letter-spacing:-.6px;margin-bottom:6px}
.bloque-cat .nota{font-size:13px;color:var(--tenue);margin-bottom:22px}
.malla{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.plato{display:flex;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--linea);border-radius:14px;padding:12px;transition:transform .35s,border-color .35s,background .35s}
.plato:hover{transform:translateY(-4px);border-color:var(--violeta-cl);background:var(--panel2)}
.plato .mini{width:76px;height:76px;border-radius:11px;object-fit:cover;flex:0 0 auto;background:var(--panel2)}
.plato .sinfoto{width:76px;height:76px;border-radius:11px;flex:0 0 auto;background:linear-gradient(140deg,var(--panel2),#2a1b45);display:flex;align-items:center;justify-content:center;font-size:26px}
.plato .tx{flex:1;min-width:0}
.plato h4{font-size:14.5px;font-weight:800;line-height:1.25;margin-bottom:3px}
.plato p{font-size:11.5px;color:var(--tenue);line-height:1.4}
.plato .v{font-family:var(--display);font-size:19px;color:var(--oro);white-space:nowrap;margin-left:6px}

/* ================= visita ================= */
.doble{display:grid;grid-template-columns:1fr 1fr;gap:44px}
@media(max-width:860px){.doble{grid-template-columns:1fr;gap:28px}}
.ficha{background:var(--panel);border:1px solid var(--linea);border-radius:18px;padding:26px}
.ficha h3{font-size:14px;letter-spacing:2.4px;text-transform:uppercase;color:var(--oro);margin-bottom:16px}
.ficha li{list-style:none;display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--linea);font-size:14px}
.ficha li:last-child{border:0}
.ficha li span{color:var(--tenue);text-align:right}
.ficha li.hoy,.ficha li.hoy span{color:var(--neon);font-weight:800}

footer{border-top:1px solid var(--linea);padding:40px 0 46px;text-align:center;background:var(--noche2)}
footer p{font-size:12.5px;color:var(--tenue);margin:0 auto 8px;max-width:60ch}
.aviso{max-width:680px;margin:0 auto 20px;padding:15px 18px;border:1px solid rgba(255,195,0,.3);background:rgba(255,195,0,.07);color:#f7e4b0;font-size:12.5px;text-align:left;line-height:1.6;border-radius:12px}
.flot{position:fixed;right:18px;bottom:18px;z-index:90;background:#25d366;color:#06280f;border-radius:50px;padding:14px 20px;font-size:13.5px;font-weight:900;box-shadow:0 14px 34px rgba(37,211,102,.4);display:flex;align-items:center;gap:8px;transition:transform .3s}
.flot:hover{transform:translateY(-4px) scale(1.04)}
@media(max-width:520px){.flot{right:12px;bottom:12px;padding:12px 17px;font-size:12.5px}}

/* === UPGRADE DRAKO 15-ago-2026: detalles finos, accesibilidad y micro-interacción ===
   Aditivo y con selectores de elemento: no pisa las clases de la demo. */

/* Títulos que no dejan una palabra huérfana en la última línea */
h1,h2,h3,h4{text-wrap:balance}
p,li{text-wrap:pretty}

/* Foco visible para quien navega con teclado — faltaba en varias */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid currentColor;outline-offset:3px;border-radius:5px}

/* El toque responde: acuse de recibo en móvil y en escritorio */
a,button,summary{-webkit-tap-highlight-color:transparent}
button:active,a:active{scale:.985}

/* Las fotos entran en vez de aparecer de golpe */
img{transition:opacity .45s ease,filter .45s ease}
img[loading="lazy"]{background:rgba(128,128,128,.08)}

/* Scroll suave si la demo no lo tenía */
html{scroll-behavior:smooth}

/* Barra de scroll acorde al sitio, no la del sistema */
*{scrollbar-width:thin}

/* Cursor de ayuda en lo que se puede tocar */
button:not(:disabled),summary{cursor:pointer}

/* 🔑 Respeta a quien pidió menos movimiento — apaga TODO de una,
   incluidas las animaciones que la demo declaró sin cubrir este caso. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}
/* === fin UPGRADE DRAKO === */