/* ADOM – Asociación Down Mendoza · estilos del sitio · v20261113 */

/* Diseño "patio de juegos": paneles grandes y redondos, cada uno con un color del logo.
   Botones gordos tipo juego (se hunden al tocarlos). Confeti de círculos como en la marca.
   Siempre en modo claro, a propósito: así es la marca. */
:root{
  color-scheme:light;
  --bg:#ffffff;
  --ink:#2b2340;          /* tinta violeta oscura, más cálida que el negro */
  --ink-soft:#544b68;
  --rojo:#E84134; --verde:#78C044; --magenta:#C14B9B; --celeste:#5AC7F2; --amarillo:#F7CF2F;
  --t-rojo:#FDE6E3; --t-verde:#EAF6DE; --t-magenta:#F9E4F2; --t-celeste:#E0F4FC; --t-amarillo:#FFF4C8;
  --magenta-txt:#9C2F7A; --rojo-txt:#B8291D; --verde-txt:#3C7A16; --celeste-txt:#0B6A93;
  --f-fun:"Baloo 2","Atkinson Hyperlegible",system-ui,sans-serif;
  --f-body:"Atkinson Hyperlegible",Verdana,system-ui,sans-serif;
}
html{font-size:112.5%;scroll-behavior:smooth}
html[data-size="2"]{font-size:131%}
html[data-size="3"]{font-size:150%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:1.12rem;line-height:1.6;margin:0;overflow-x:hidden}
html.espacio body{line-height:1.95;letter-spacing:.03em;word-spacing:.12em}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-fun);line-height:1.1;margin:0;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(2.5rem,7vw,4.2rem);font-weight:800}
h2{font-size:clamp(2rem,5vw,3rem);font-weight:800}
h3{font-size:1.45rem;font-weight:700}
p{margin:0;max-width:58ch}
a{color:var(--celeste-txt);text-decoration-thickness:3px;text-underline-offset:4px}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
:focus-visible{outline:4px solid var(--ink);outline-offset:4px;border-radius:14px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-weight:700;z-index:60}
.skip:focus{left:16px}

/* ---------- Botones de juego ---------- */
.jbtn{--c:var(--amarillo);--t:var(--ink);font:inherit;font-family:var(--f-fun);font-weight:700;font-size:1.2rem;line-height:1.1;
  display:inline-flex;align-items:center;gap:12px;min-height:60px;padding:12px 24px;border-radius:999px;
  background:var(--c);color:var(--t);border:3px solid var(--ink);box-shadow:0 6px 0 var(--ink);
  text-decoration:none;cursor:pointer;transition:transform .12s, box-shadow .12s}
.jbtn:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--ink)}
.jbtn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ink)}
.jbtn svg{width:28px;height:28px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.jbtn.blanco{--c:#fff}
.jbtn.magenta{--c:var(--magenta);--t:#fff}
.jbtn.celeste{--c:var(--celeste)}
.jbtn.verde{--c:var(--verde)}
.jbtn.rojo{--c:var(--rojo);--t:#fff}

/* ---------- Barra de arriba ---------- */
.top{padding-block:14px}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand img{height:68px;width:auto}
.brand b{font-family:var(--f-fun);font-size:1.25rem;font-weight:800;line-height:1.05;display:block}
.ayudas{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--t-amarillo);border:3px solid var(--ink);border-radius:999px;padding:6px 8px 6px 18px}
.ayudas .lbl{font-weight:700;font-size:.95rem}
.size{display:flex;gap:6px}
.size button,.esp{font:inherit;font-family:var(--f-fun);font-weight:800;min-width:48px;min-height:48px;border-radius:999px;border:3px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer}
.size button:nth-child(1){font-size:1rem}.size button:nth-child(2){font-size:1.3rem}.size button:nth-child(3){font-size:1.6rem}
.size button[aria-pressed="true"],.esp[aria-pressed="true"]{background:var(--ink);color:#fff}
.esp{padding:0 16px;font-size:1rem}

/* ---------- Menú: fichas de colores ---------- */
.menu ul{list-style:none;margin:0;padding:6px 0 0;display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.menu a{--c:var(--amarillo);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:104px;padding:10px 6px;
  background:var(--c);border:3px solid var(--ink);border-radius:26px;box-shadow:0 6px 0 var(--ink);text-decoration:none;color:var(--ink);
  font-family:var(--f-fun);font-weight:700;font-size:1.12rem;line-height:1.1;text-align:center;transition:transform .12s, box-shadow .12s}
.menu a:hover{transform:translateY(-3px) rotate(-1.5deg);box-shadow:0 9px 0 var(--ink)}
.menu a:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ink)}
.menu svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.menu li:nth-child(1) a{--c:var(--magenta);color:#fff}
.menu li:nth-child(2) a{--c:var(--amarillo)}
.menu li:nth-child(3) a{--c:var(--celeste)}
.menu li:nth-child(4) a{--c:#fff}
.menu li:nth-child(5) a{--c:var(--verde)}
.menu li:nth-child(6) a{--c:var(--rojo);color:#fff}
@media (max-width:900px){.menu ul{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.menu ul{grid-template-columns:repeat(2,1fr)}.menu a{min-height:88px}}

/* ---------- Confeti ---------- */
.confeti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confeti i{position:absolute;border-radius:50%;display:block;animation:flota 6s ease-in-out infinite}
.confeti i:nth-child(2n){animation-duration:7.5s;animation-delay:-2s}
.confeti i:nth-child(3n){animation-duration:5s;animation-delay:-1s}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ---------- Portada ---------- */
.hero{position:relative;margin-top:28px}
.hero-panel{position:relative;background:var(--t-celeste);border:3px solid var(--ink);border-radius:44px;padding:44px 40px;display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;overflow:hidden}
.hero-panel > *:not(.confeti){position:relative;min-width:0}
.hola{display:inline-block;font-family:var(--f-fun);font-weight:800;font-size:1.5rem;background:var(--amarillo);border:3px solid var(--ink);border-radius:999px;padding:2px 20px;transform:rotate(-3deg);margin-bottom:14px}
.hero h1 .a{color:var(--rojo-txt)}.hero h1 .d{color:var(--celeste-txt)}.hero h1 .o{color:var(--verde-txt)}.hero h1 .m{color:#9a7400}
.hero .lead{font-size:1.4rem;margin-top:14px;font-weight:700}
.hero .lead2{font-size:1.2rem;margin-top:8px}
.quien{margin-top:26px}
.quien p{font-family:var(--f-fun);font-weight:700;font-size:1.25rem;margin-bottom:12px}
.quien .row{display:flex;flex-wrap:wrap;gap:14px}
.foto-juego{position:relative;justify-self:center;width:100%;max-width:420px}
.foto-juego .marco{background:#fff;border:3px solid var(--ink);border-radius:36px;padding:12px;transform:rotate(2.5deg);box-shadow:0 8px 0 var(--ink)}
.foto-juego img{border-radius:26px;aspect-ratio:1/1;object-fit:cover;width:100%}
.foto-juego .sticker{position:absolute;left:-16px;bottom:-18px;background:var(--magenta);color:#fff;font-family:var(--f-fun);font-weight:800;font-size:1.15rem;line-height:1.1;border:3px solid var(--ink);border-radius:22px;padding:10px 16px;transform:rotate(-5deg);box-shadow:0 5px 0 var(--ink)}
.logo-grande{background:#fff;border:3px solid var(--ink);border-radius:50%;width:150px;height:150px;display:grid;place-items:center;position:absolute;right:-12px;top:-30px;box-shadow:0 6px 0 var(--ink)}
.logo-grande img{width:112px}
@media (max-width:860px){.hero-panel{grid-template-columns:1fr;padding:32px 22px;border-radius:34px}.logo-grande{width:110px;height:110px;right:-6px;top:-24px}.logo-grande img{width:82px}}

/* ---------- Paneles de sección ---------- */
.panel{--tint:var(--t-amarillo);--c:var(--amarillo);position:relative;margin-top:56px;background:var(--tint);border:3px solid var(--ink);border-radius:44px;padding:42px 40px 46px;overflow:hidden;scroll-margin-top:16px}
.panel > *:not(.confeti){position:relative}
@media (max-width:700px){.panel{padding:30px 20px 34px;border-radius:32px}}
.p-amarillo{--tint:var(--t-amarillo);--c:var(--amarillo)}
.p-celeste{--tint:var(--t-celeste);--c:var(--celeste)}
.p-magenta{--tint:var(--t-magenta);--c:var(--magenta)}
.p-verde{--tint:var(--t-verde);--c:var(--verde)}
.p-rojo{--tint:var(--t-rojo);--c:var(--rojo)}
.titulo{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.titulo .burbuja{width:66px;height:66px;border-radius:50%;background:var(--c);border:3px solid var(--ink);display:grid;place-items:center;flex:none;box-shadow:0 4px 0 var(--ink)}
.titulo .burbuja svg{width:36px;height:36px;fill:none;stroke:var(--ink);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.p-magenta .titulo .burbuja svg,.p-rojo .titulo .burbuja svg{stroke:#fff}
.titulo h2{flex:1 1 220px;min-width:0}
.bajada{font-size:1.3rem;font-weight:700;margin-bottom:28px}

/* Tarjetas de juego */
.cartas{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1000px){.cartas{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cartas{grid-template-columns:1fr}}
.carta{background:#fff;border:3px solid var(--ink);border-radius:30px;overflow:hidden;box-shadow:0 7px 0 var(--ink);display:flex;flex-direction:column;min-width:0;transition:transform .15s}
.carta:nth-child(odd){transform:rotate(-1.2deg)}
.carta:nth-child(even){transform:rotate(1.2deg)}
.carta:hover{transform:rotate(0) translateY(-4px)}
.carta .img{position:relative;aspect-ratio:4/3;border-bottom:3px solid var(--ink)}
.carta .img{overflow:visible}
.carta .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%}
.carta .pin{position:absolute;left:14px;bottom:-26px;width:56px;height:56px;border-radius:50%;border:3px solid var(--ink);display:grid;place-items:center;background:var(--k,var(--amarillo))}
.carta .pin svg{width:30px;height:30px;fill:none;stroke:var(--ink);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.carta .txt{padding:34px 20px 22px;display:grid;gap:6px}
.carta h3{font-size:1.4rem}
.k-rojo{--k:var(--rojo)}.k-verde{--k:var(--verde)}.k-magenta{--k:var(--magenta)}.k-celeste{--k:var(--celeste)}.k-amarillo{--k:var(--amarillo)}
.k-rojo .pin svg,.k-magenta .pin svg{stroke:#fff}

/* Burbujas de temas */
.temas{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media (max-width:860px){.temas{grid-template-columns:repeat(2,1fr)}.temas li:last-child{grid-column:1/-1}}
.temas li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;background:#fff;border:3px solid var(--ink);border-radius:28px;padding:16px 10px;font-family:var(--f-fun);font-weight:700;font-size:1.2rem;line-height:1.15;min-width:0;text-wrap:balance}
.temas .b{width:60px;height:60px;border-radius:50%;border:3px solid var(--ink);display:grid;place-items:center;flex:none;background:var(--k)}
.temas .b svg{width:28px;height:28px;fill:none;stroke:var(--ink);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.temas .k-rojo svg,.temas .k-magenta svg{stroke:#fff}

/* Dos columnas */
.dos{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}
.dos > *{min-width:0}
@media (max-width:860px){.dos{grid-template-columns:1fr}}
.globo{background:#fff;border:3px solid var(--ink);border-radius:30px;padding:22px 24px;display:grid;gap:10px;position:relative}
.globo::after{content:"";position:absolute;left:40px;bottom:-20px;width:30px;height:30px;background:#fff;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg)}
.foto-marco{background:#fff;border:3px solid var(--ink);border-radius:32px;padding:10px;box-shadow:0 7px 0 var(--ink);transform:rotate(-2deg)}
.foto-marco img{border-radius:22px;width:100%;aspect-ratio:4/3;object-fit:cover}
.foto-marco figcaption{font-weight:700;padding:10px 6px 4px;font-size:1rem}

/* Camino (historia) */
.camino{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative}
.camino::before{content:"";position:absolute;left:8%;right:8%;top:42px;border-top:5px dashed var(--ink);z-index:0}
.camino li{position:relative;z-index:1;display:grid;justify-items:center;text-align:center;gap:12px}
.camino .paso{width:84px;height:84px;border-radius:50%;border:3px solid var(--ink);background:var(--k);display:grid;place-items:center;font-family:var(--f-fun);font-weight:800;font-size:1.25rem;box-shadow:0 5px 0 var(--ink)}
.camino .k-magenta .paso{color:#fff}
.camino p{background:#fff;border:3px solid var(--ink);border-radius:22px;padding:14px 16px}
@media (min-width:761px){.camino li{grid-template-rows:auto 1fr}.camino p{align-self:stretch;width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center}}
@media (max-width:760px){.camino{grid-template-columns:1fr}.camino::before{left:41px;right:auto;top:20px;bottom:20px;border-top:0;border-left:5px dashed var(--ink)}.camino li{grid-template-columns:84px 1fr;justify-items:start;text-align:left;align-items:center}}

/* Sueño */
.sueno-grande{font-family:var(--f-fun);font-weight:800;font-size:clamp(1.8rem,4.6vw,2.8rem);line-height:1.45;max-width:22ch;margin:6px 0 28px}
.sueno-grande span{background:var(--amarillo);border-radius:14px;padding:.02em .3em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:860px){.tres{grid-template-columns:1fr}}
.tres div{background:#fff;border:3px solid var(--ink);border-radius:28px;padding:20px 22px;display:grid;gap:8px;align-content:start}
.tres h3{font-size:1.3rem}
details{margin-top:24px;background:#fff;border:3px solid var(--ink);border-radius:28px}
summary{cursor:pointer;font-family:var(--f-fun);font-weight:700;font-size:1.2rem;padding:12px 20px;min-height:60px;display:flex;align-items:center;gap:12px;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";font-size:1.6rem;width:40px;height:40px;border-radius:50%;background:var(--amarillo);border:3px solid var(--ink);display:grid;place-items:center;flex:none;line-height:1}
details[open] summary::before{content:"−"}
details .det{padding:0 24px 22px}
details ul{margin:0;padding-left:1.2em;display:grid;gap:8px}

/* Ayudar */
.opciones{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:860px){.opciones{grid-template-columns:1fr}}
.opcion{background:#fff;border:3px solid var(--ink);border-radius:30px;padding:24px;display:grid;gap:12px;align-content:start;box-shadow:0 7px 0 var(--ink)}
.opcion .b{width:64px;height:64px;border-radius:50%;border:3px solid var(--ink);display:grid;place-items:center;background:var(--k)}
.opcion .b svg{width:34px;height:34px;fill:none;stroke:var(--ink);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.opcion.k-magenta .b svg,.opcion.k-rojo .b svg{stroke:#fff}
.opcion .jbtn{justify-self:start;font-size:1.05rem;min-height:54px;padding:10px 20px}

/* Empate */
.empate{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;background:#fff;border:3px solid var(--ink);border-radius:30px;padding:24px;box-shadow:0 7px 0 var(--ink)}
.pelota{width:96px;height:96px;border-radius:50%;background:var(--verde);border:3px solid var(--ink);display:grid;place-items:center;animation:rebota 2.4s ease-in-out infinite}
.pelota svg{width:58px;height:58px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
@keyframes rebota{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(25deg)}}
@media (max-width:560px){.empate{grid-template-columns:1fr}}

/* Contacto */
.datos{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media (max-width:760px){.datos{grid-template-columns:1fr}}
.dato{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:#fff;border:3px solid var(--ink);border-radius:28px;padding:14px 18px;min-width:0}
.dato .b{width:58px;height:58px;border-radius:50%;border:3px solid var(--ink);display:grid;place-items:center;flex:none;background:var(--k)}
.dato .b svg{width:30px;height:30px;fill:none;stroke:var(--ink);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.dato.k-rojo .b svg,.dato.k-magenta .b svg{stroke:#fff}
.dato .t{flex:1 1 180px;min-width:0}
.dato b{display:block;font-family:var(--f-fun);font-size:1.15rem}
.dato span{overflow-wrap:anywhere}
.copiar{font:inherit;font-family:var(--f-fun);font-weight:700;min-height:50px;padding:6px 18px;border-radius:999px;border:3px solid var(--ink);background:var(--amarillo);color:var(--ink);cursor:pointer;box-shadow:0 4px 0 var(--ink)}
.copiar:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.copiar.ok{background:var(--verde)}

footer{margin-top:56px;background:var(--ink);color:#fff;padding-block:36px 44px;position:relative;overflow:hidden}
footer .wrap{display:flex;gap:24px;align-items:center;flex-wrap:wrap;position:relative}
footer .chip{background:#fff;border-radius:50%;width:110px;height:110px;display:grid;place-items:center;flex:none}
footer .chip img{width:84px}
footer p{color:#e9e4f3;max-width:none}
footer b{font-family:var(--f-fun);font-size:1.35rem;color:#fff}

.arriba{position:fixed;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:30}
.arriba .jbtn{min-height:56px;padding:8px 18px;font-size:1.05rem}
@media (max-width:700px){.arriba .jbtn{padding:0;width:58px;justify-content:center;font-size:0;gap:0}.hero .confeti i:nth-child(n+2){display:none}.hero .confeti i:first-child{left:auto;right:6%;top:4%}.ayudas{border-radius:28px;padding:8px 12px}}

/* ================= EFECTOS ================= */
/* Modo calma: apaga todo el movimiento */
html.calma *,html.calma *::before,html.calma *::after{animation:none!important;transition:none!important}
html.calma .confeti{translate:none!important}

/* Botones de la barra de ayudas con ícono */
.esp{display:inline-flex;align-items:center;gap:8px}
.esp svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* Letras de ADOM: saltan al cargar y cada una salta al pasar el mouse */
.hero h1 .l{display:inline-block;animation:salto .8s cubic-bezier(.3,1.7,.5,1) both;transition:transform .25s cubic-bezier(.3,1.8,.5,1)}
.hero h1 .l:nth-of-type(2){animation-delay:.12s}.hero h1 .l:nth-of-type(3){animation-delay:.24s}.hero h1 .l:nth-of-type(4){animation-delay:.36s}
.hero h1 .l:hover{transform:translateY(-12px) rotate(-6deg) scale(1.12)}
@keyframes salto{0%{transform:translateY(0)}35%{transform:translateY(-26px) rotate(-4deg)}65%{transform:translateY(4px)}100%{transform:none}}

/* Saludo que se balancea */
.hola{animation:saludo 3s ease-in-out infinite;transform-origin:20% 80%}
@keyframes saludo{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

/* Sticker que tiembla cada tanto */
.foto-juego .sticker{animation:tiembla 5s ease-in-out infinite}
@keyframes tiembla{0%,86%,100%{transform:rotate(-5deg)}89%{transform:rotate(-11deg) scale(1.08)}92%{transform:rotate(1deg) scale(1.08)}95%{transform:rotate(-8deg)}}

/* Logo que gira de alegría al tocarlo */
.logo-grande{cursor:pointer;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.logo-grande:hover{transform:scale(1.08)}
.logo-grande.gira{animation:gira .9s cubic-bezier(.3,1.4,.5,1)}
@keyframes gira{0%{transform:none}30%{transform:translateY(-22px) scale(1.12)}55%{transform:translateY(0) scale(.95,1.05)}75%{transform:translateY(-8px)}100%{transform:none}}

/* Foto principal: se acomoda al pasar */
.foto-juego .marco{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.foto-juego:hover .marco{transform:rotate(-1deg) scale(1.02)}

/* Confeti de la portada: aparece de a uno y se puede reventar */
.confeti i{animation:aparece .6s cubic-bezier(.3,1.7,.5,1) both,flota 6s ease-in-out .6s infinite}
.confeti i:nth-child(2){animation-delay:.1s,.7s}.confeti i:nth-child(3){animation-delay:.2s,.8s}.confeti i:nth-child(4){animation-delay:.3s,.9s}
.confeti i:nth-child(5){animation-delay:.4s,1s}.confeti i:nth-child(6){animation-delay:.5s,1.1s}.confeti i:nth-child(7){animation-delay:.6s,1.2s}
@keyframes aparece{0%{scale:.2}100%{scale:1}}
.hero .confeti{transition:translate .4s ease-out}
.hero .confeti i{pointer-events:auto;cursor:pointer}
.confeti i.revienta{animation:revienta .45s ease-out both!important}
@keyframes revienta{0%{scale:1}40%{scale:1.6}100%{scale:0}}

/* Íconos del menú se mueven al pasar */
.menu a:hover svg{animation:menea .5s ease-in-out}
@keyframes menea{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg) scale(1.15)}75%{transform:rotate(12deg) scale(1.15)}}

/* Brillo que cruza los botones de juego */
.jbtn{position:relative;overflow:hidden}
.jbtn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .5s ease}
.jbtn:hover::after{left:130%}

/* Las burbujas de título rebotan cuando aparece la sección */
.panel.boing{animation:boing .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes boing{0%{transform:scale(.97)}60%{transform:scale(1.008)}100%{transform:none}}
.panel.boing .titulo .burbuja{animation:burbuja .8s cubic-bezier(.3,1.8,.5,1) .15s both}
@keyframes burbuja{0%{transform:scale(.5) rotate(-30deg)}100%{transform:none}}

/* Cartas que se reparten como en un juego */
.panel.boing .carta{animation:reparte .7s cubic-bezier(.3,1.5,.5,1) both}
.panel.boing .carta:nth-child(2){animation-delay:.1s}.panel.boing .carta:nth-child(3){animation-delay:.2s}.panel.boing .carta:nth-child(4){animation-delay:.3s}
@keyframes reparte{0%{transform:translateY(40px) rotate(-8deg)}100%{}}
.carta,.opcion{transform-style:preserve-3d;will-change:transform}
.carta .pin{transition:transform .4s cubic-bezier(.3,1.8,.5,1)}
.carta:hover .pin{transform:scale(1.2) rotate(-12deg)}

/* Camino: los casilleros saltan en orden */
.panel.boing .camino .paso{animation:casillero .6s cubic-bezier(.3,1.8,.5,1) both}
.panel.boing .camino li:nth-child(2) .paso{animation-delay:.25s}.panel.boing .camino li:nth-child(3) .paso{animation-delay:.5s}
@keyframes casillero{0%{transform:translateY(0)}40%{transform:translateY(-18px)}100%{transform:none}}

/* Temas: saltan al pasar */
.temas li{transition:transform .3s cubic-bezier(.3,1.8,.5,1)}
.temas li:hover{transform:translateY(-4px) rotate(-1.5deg)}
.temas li:hover .b{animation:menea .5s ease-in-out}

/* Pelota: al tocarla hace un gol */
.pelota{cursor:pointer}
.pelota.gol{animation:gol 1.1s cubic-bezier(.4,0,.3,1)!important}
@keyframes gol{0%{transform:none}45%{transform:translate(60px,-50px) rotate(360deg) scale(.9)}75%{transform:translate(10px,0) rotate(600deg)}100%{transform:rotate(720deg)}}
.gol-txt{font-family:var(--f-fun);font-weight:800;font-size:1.6rem;color:var(--verde-txt);margin-left:8px;display:inline-block;animation:salto .8s cubic-bezier(.3,1.7,.5,1)}


/* Lienzo de confeti */
#lluvia{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:70}

/* Aviso pequeño */
.aviso{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(140%);background:var(--ink);color:#fff;font-family:var(--f-fun);font-weight:700;font-size:1.1rem;padding:12px 22px;border-radius:999px;z-index:80;transition:transform .35s cubic-bezier(.3,1.6,.5,1);max-width:calc(100% - 32px);text-align:center}
.aviso.ver{transform:translateX(-50%) translateY(0)}

.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.esp .estado{font-family:var(--f-fun);font-size:.8rem;font-weight:800;background:var(--rojo);color:#fff;border-radius:999px;padding:1px 8px;line-height:1.5}
#btn-sonido[aria-pressed="true"] .estado{background:var(--verde);color:var(--ink)}
.menu a[aria-current="true"]{outline:4px dashed var(--ink);outline-offset:4px}

/* ================= JUEGOS ================= */
.p-juegos{--tint:#ffffff;--c:var(--amarillo);background:
  radial-gradient(circle at 6% 12%,var(--t-celeste) 0 70px,transparent 71px),
  radial-gradient(circle at 96% 88%,var(--t-verde) 0 90px,transparent 91px),
  radial-gradient(circle at 88% 8%,var(--t-magenta) 0 50px,transparent 51px),#fff}
.aclaracion{display:flex;gap:12px;align-items:flex-start;background:var(--t-amarillo);border:3px dashed var(--ink);border-radius:22px;padding:12px 16px;margin-bottom:24px;max-width:none}
.aclaracion svg{width:28px;height:28px;flex:none;fill:none;stroke:var(--ink);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.elegir-juego{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:24px}
@media (max-width:640px){.elegir-juego{grid-template-columns:1fr}}
.ej{--c:var(--amarillo);font:inherit;display:flex;align-items:center;gap:16px;text-align:left;cursor:pointer;background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:28px;padding:14px 18px;box-shadow:0 6px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.ej:hover{transform:translateY(-3px);box-shadow:0 9px 0 var(--ink)}
.ej:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ink)}
.ej[aria-pressed="true"]{background:var(--c)}
.ej .b{width:64px;height:64px;border-radius:50%;border:3px solid var(--ink);background:var(--c);display:grid;place-items:center;flex:none}
.ej[aria-pressed="true"] .b{background:#fff}
.ej .b svg{width:36px;height:36px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ej b{display:block;font-family:var(--f-fun);font-size:1.4rem;line-height:1.1}
.ej span{font-size:1rem}
.tablero{background:var(--t-celeste);border:3px solid var(--ink);border-radius:32px;padding:22px;display:grid;gap:18px}
@media (max-width:560px){.tablero{padding:14px;border-radius:26px}}
.tablero-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.consigna{font-family:var(--f-fun);font-weight:800;font-size:1.55rem;line-height:1.15;display:flex;align-items:center;gap:12px;margin:0;max-width:none}
.consigna svg{width:40px;height:40px;flex:none;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.niveles{display:flex;gap:8px;flex-wrap:wrap}
.nivel{font:inherit;font-family:var(--f-fun);font-weight:700;font-size:1rem;min-height:50px;padding:6px 16px;border-radius:999px;border:3px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.nivel[aria-pressed="true"]{background:var(--ink);color:#fff}
.nivel i{display:inline-flex;gap:3px}
.nivel i::before{content:"";width:var(--n);height:12px;background:radial-gradient(circle,currentColor 4px,transparent 4.5px) 0 0/12px 12px repeat-x}
.mensaje{font-family:var(--f-fun);font-weight:700;font-size:1.2rem;min-height:1.6em;margin:0;max-width:none}

/* Memotest */
.memo{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:14px;max-width:calc(var(--cols) * 170px);margin:0 auto;width:100%}
.memo-card{font:inherit;padding:0;border:0;background:none;cursor:pointer;aspect-ratio:3/4;perspective:800px;border-radius:22px;min-height:96px}
.memo-card .in{position:relative;display:block;width:100%;height:100%;transition:transform .5s cubic-bezier(.3,1.4,.5,1);transform-style:preserve-3d}
.memo-card.vuelta .in,.memo-card.ok .in{transform:rotateY(180deg)}
.memo-card .cara{position:absolute;inset:0;border:3px solid var(--ink);border-radius:22px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center;box-shadow:0 5px 0 var(--ink)}
.memo-card .atras{background:var(--magenta);background-image:radial-gradient(circle at 25% 25%,var(--amarillo) 0 9%,transparent 10%),radial-gradient(circle at 75% 35%,var(--celeste) 0 7%,transparent 8%),radial-gradient(circle at 40% 75%,var(--verde) 0 11%,transparent 12%),radial-gradient(circle at 78% 78%,#fff 0 5%,transparent 6%)}
.memo-card .atras b{font-family:var(--f-fun);font-size:2.2rem;color:#fff;text-shadow:0 3px 0 var(--ink)}
.memo-card .frente{background:#fff;transform:rotateY(180deg);align-content:center;gap:6px;padding:8px}
.memo-card .frente svg{width:62%;max-width:90px;height:auto;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.memo-card .frente span{font-family:var(--f-fun);font-weight:700;font-size:1.05rem;line-height:1}
.memo-card.ok .frente{background:var(--t-verde)}
.memo-card.ok{animation:festeja .6s cubic-bezier(.3,1.8,.5,1)}
@keyframes festeja{0%{transform:none}40%{transform:scale(1.1) rotate(-3deg)}100%{transform:none}}
.memo-card:hover:not(.vuelta):not(.ok) .in{transform:rotateY(12deg) translateY(-3px)}

/* Rutina */
.rutinas{display:flex;gap:10px;flex-wrap:wrap}
.casilleros{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:paso}
@media (max-width:640px){.casilleros{grid-template-columns:repeat(2,1fr)}}
.casillero{position:relative;border:3px dashed var(--ink);border-radius:24px;min-height:150px;display:grid;place-items:center;text-align:center;padding:10px;background:rgba(255,255,255,.5)}
.casillero .num{position:absolute;top:-16px;left:-10px;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--f-fun);font-weight:800;font-size:1.2rem;display:grid;place-items:center}
.casillero.lleno{border-style:solid;background:#fff;box-shadow:0 5px 0 var(--ink);animation:festeja .6s cubic-bezier(.3,1.8,.5,1)}
.casillero.siguiente{border-color:var(--magenta-txt);background:#fff}
.casillero .vacio{font-family:var(--f-fun);font-weight:700;color:var(--ink-soft);font-size:1rem}
.paso-ico{width:72px;height:72px;border-radius:50%;border:3px solid var(--ink);display:grid;place-items:center;margin:0 auto 6px;background:var(--k,var(--amarillo))}
.paso-ico svg{width:44px;height:44px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.paso-txt{font-family:var(--f-fun);font-weight:700;font-size:1.05rem;line-height:1.15;display:block}
.fichas{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:640px){.fichas{grid-template-columns:repeat(2,1fr)}}
.ficha{font:inherit;cursor:pointer;background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:24px;padding:14px 8px;box-shadow:0 6px 0 var(--ink);min-height:150px;transition:transform .15s,box-shadow .15s,opacity .3s}
.ficha:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 9px 0 var(--ink)}
.ficha:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ink)}
.ficha.usada{visibility:hidden}
.ficha.mueve{animation:mueve .5s ease-in-out}
@keyframes mueve{0%,100%{transform:none}20%{transform:translateX(-10px) rotate(-3deg)}40%{transform:translateX(10px) rotate(3deg)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.ficha.pista{animation:pista 1s ease-in-out 2;outline:5px solid var(--amarillo);outline-offset:3px}
@keyframes pista{0%,100%{transform:none}50%{transform:scale(1.07)}}
html.calma .ficha.pista{outline:6px solid var(--magenta)}

/* Festejo final */
.festejo{background:#fff;border:3px solid var(--ink);border-radius:30px;padding:28px 20px;text-align:center;display:grid;gap:14px;justify-items:center;box-shadow:0 7px 0 var(--ink)}
.festejo h3{font-size:clamp(2rem,6vw,3rem);font-weight:800}
.estrellas{display:flex;gap:10px}
.estrellas svg{width:64px;height:64px;fill:var(--amarillo);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;animation:estrella .7s cubic-bezier(.3,1.8,.5,1) both}
.estrellas svg:nth-child(2){animation-delay:.15s;width:80px;height:80px}.estrellas svg:nth-child(3){animation-delay:.3s}
@keyframes estrella{0%{transform:scale(.3) rotate(-40deg)}100%{transform:none}}
.festejo .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.consejo{font-size:1rem;color:var(--ink-soft);display:flex;gap:8px;align-items:center;max-width:none}
.consejo svg{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ================= LINEAMIENTOS "INTERMEDIO" =================
   Cálido y claro, para todas las edades. La marca aporta el color como acento;
   la base es blanca y ordenada. Formas firmes, sin inclinaciones. Festejos solo en logros. */
:root{
  --f-fun:"Lexend","Atkinson Hyperlegible",system-ui,sans-serif;
  --page:#f5f6f9;
  --t-rojo:#FDEDEB; --t-verde:#F0F8E8; --t-magenta:#FBEEF6; --t-celeste:#EAF7FD; --t-amarillo:#FFF8DC;
  --r-l:24px; --r-m:18px; --r-s:14px;
  --sombra:0 4px 0 var(--ink);
}
body{background:var(--page)}
h1{font-weight:700;font-size:clamp(2.3rem,6vw,3.5rem);letter-spacing:-.01em}
h2{font-weight:700;font-size:clamp(1.8rem,4.4vw,2.5rem);letter-spacing:-.01em}
h3{font-weight:600}

/* Bordes 2px en todo, radios moderados */
.jbtn,.menu a,.ayudas,.size button,.esp,.hero-panel,.panel,.titulo .burbuja,.carta,.carta .pin,.carta .img,.temas li,.temas .b,.globo,.foto-marco,.camino .paso,.camino p,.tres div,details,summary::before,.opcion,.opcion .b,.empate,.pelota,.dato,.dato .b,.copiar,.logo-grande,.foto-juego .marco,
.ej,.ej .b,.tablero,.nivel,.memo-card .cara,.casillero,.ficha,.paso-ico,.festejo,.aclaracion{border-width:2px}
.carta .img{border-bottom-width:2px}
.globo::after{border-right-width:2px;border-bottom-width:2px}

/* Botones: firmes y claros, menos "golosina" */
.jbtn{border-radius:var(--r-s);box-shadow:var(--sombra);font-weight:600;min-height:56px}
.jbtn:hover{transform:translateY(-1px);box-shadow:0 5px 0 var(--ink)}
.jbtn:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink)}
.escuchar,.copiar,.nivel{box-shadow:none}
.copiar{border-radius:var(--r-s);box-shadow:0 3px 0 var(--ink)}

/* Menú: fichas blancas, el color va en el ícono y en la línea inferior */
.menu a{background:#fff;color:var(--ink)!important;border-radius:var(--r-m);box-shadow:0 5px 0 var(--c);border-color:var(--ink);font-weight:600;min-height:96px}
.menu a svg{width:46px;height:46px;padding:8px;border-radius:50%;background:var(--c);stroke:var(--ink);box-sizing:border-box}
.menu li:nth-child(1) a svg,.menu li:nth-child(6) a svg{stroke:#fff}
.menu li:nth-child(4) a{--c:var(--ink)}
.menu li:nth-child(4) a svg{stroke:#fff}
.menu a:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--c)}
.menu a:hover svg{animation:none}
.menu a[aria-current="true"]{outline:none;background:var(--t-amarillo)}
.ayudas{border-radius:var(--r-m);background:#fff}

/* Portada */
.hero-panel{border-radius:32px;background:linear-gradient(135deg,var(--t-celeste),#fff 70%)}
.hola{transform:none;animation:none;font-weight:600;font-size:1.1rem;background:var(--amarillo);border-width:2px;padding:4px 16px}
.hero .lead{font-weight:600}
.foto-juego .marco{transform:none;border-radius:var(--r-l);box-shadow:var(--sombra);padding:8px}
.foto-juego img{border-radius:18px;aspect-ratio:4/3}
.foto-juego:hover .marco{transform:none}
.foto-juego .sticker{display:none}
.logo-grande{box-shadow:var(--sombra)}
.confeti i{opacity:.75}
.confeti i:nth-child(n+5){display:none}

/* Secciones: fondo blanco con banda de color arriba */
.panel{background:#fff;border-radius:28px;border-top:10px solid var(--c)}
.p-juegos{background:#fff}
.titulo .burbuja{width:56px;height:56px;box-shadow:none}
.titulo .burbuja svg{width:30px;height:30px}
.bajada{font-weight:600}

/* Tarjetas derechas, sin giros */
.carta,.carta:nth-child(odd),.carta:nth-child(even){transform:none;border-radius:var(--r-l);box-shadow:var(--sombra)}
.carta:hover{transform:translateY(-3px)}
.panel.boing .carta{animation:none}
.panel.boing{animation:none}
.temas li,.dato,.opcion,.tres div,.globo,.empate,details{border-radius:var(--r-m)}
.temas li:hover{transform:translateY(-2px)}
.temas li:hover .b{animation:none}
.opcion,.empate{box-shadow:var(--sombra)}
.foto-marco{transform:none;border-radius:var(--r-l);box-shadow:var(--sombra)}
.foto-marco img{border-radius:16px}
.camino .paso{box-shadow:none;width:76px;height:76px;font-weight:700;font-size:1.1rem}
.camino::before{border-top-width:3px}
.camino p{border-radius:var(--r-m)}
.sueno-grande{font-weight:700}
summary::before{background:var(--t-amarillo)}

/* Juegos: mismo lenguaje, más sobrio */
.ej{border-radius:var(--r-m);box-shadow:var(--sombra)}
.tablero{border-radius:var(--r-l);background:var(--page)}
.consigna{font-weight:700;font-size:1.35rem}
.memo-card .cara{border-radius:var(--r-m);box-shadow:0 3px 0 var(--ink)}
.ficha,.casillero{border-radius:var(--r-m)}
.ficha{box-shadow:0 4px 0 var(--ink)}
.festejo{border-radius:var(--r-l);box-shadow:var(--sombra)}
.estrellas svg{width:52px;height:52px}.estrellas svg:nth-child(2){width:64px;height:64px}

/* Pie */
footer{background:#2b2340}

/* ================= FORMULARIO DE CONTACTO ================= */
.caja-form{background:#fff;border:2px solid var(--ink);border-radius:var(--r-l,24px);padding:26px 24px 24px;margin-bottom:34px;box-shadow:var(--sombra,0 4px 0 var(--ink))}
@media (max-width:560px){.caja-form{padding:20px 16px}}
.form-contacto{display:grid;gap:20px}
.fila-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:700px){.fila-2{grid-template-columns:1fr}}
.fila-2 > *{min-width:0}
.campo{display:grid;gap:8px;align-content:start}
.campo > label{font-family:var(--f-fun);font-weight:600;font-size:1.12rem}
.campo .opc{font-family:var(--f-body);font-weight:400;color:var(--ink-soft);font-size:1rem}
.campo input[type=text],.campo input[type=email],.campo input[type=tel],.campo select,.campo textarea{
  font:inherit;font-size:1.12rem;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:14px;
  min-height:58px;padding:12px 16px;width:100%;box-sizing:border-box}
.campo textarea{min-height:150px;resize:vertical;line-height:1.5}
.campo select{appearance:none;-webkit-appearance:none;padding-right:48px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2340' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:24px}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{outline:4px solid var(--celeste);outline-offset:2px;border-radius:14px}
.campo [aria-invalid="true"]{border-color:var(--rojo-txt);background:var(--t-rojo)}
.error{display:flex;gap:8px;align-items:center;color:var(--rojo-txt);font-weight:700;font-size:1.02rem;margin:0}
.error::before{content:"!";flex:none;width:24px;height:24px;border-radius:50%;background:var(--rojo-txt);color:#fff;display:grid;place-items:center;font-size:.9rem;line-height:1}
.check{display:flex;gap:14px;align-items:flex-start;cursor:pointer;font-weight:600;font-size:1.08rem;line-height:1.4}
.check input{flex:none;width:30px;height:30px;margin:0;accent-color:var(--ink);cursor:pointer}
.nota{margin:0 0 0 44px;font-size:1rem}
.trampa{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.enviar{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.enviar .jbtn[disabled]{opacity:.6;cursor:wait}
.estado{margin:0;font-weight:700;font-size:1.05rem;max-width:none}
.estado.mal{color:var(--rojo-txt)}
.enviado{display:grid;justify-items:center;text-align:center;gap:12px;padding:20px 8px}
.enviado .ok-ico{width:76px;height:76px;border-radius:50%;background:var(--verde);border:2px solid var(--ink);display:grid;place-items:center}
.enviado .ok-ico svg{width:44px;height:44px;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.enviado h3{font-size:clamp(1.5rem,4vw,2rem)}
.sub-otras{margin-bottom:16px}

/* Pie: enlaces */
.pie-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:6px}
.pie-links a{color:#fff;font-weight:700}

/* ================= PÁGINAS DE TEXTO ================= */
[hidden]{display:none!important}
.texto h1{font-size:clamp(2rem,5vw,2.8rem)}
.texto h2{font-size:1.4rem;margin:30px 0 8px}
.texto p{margin:8px 0}
.texto ul{padding-left:1.3em;margin:8px 0;display:grid;gap:6px;max-width:60ch}
.texto details{margin-top:30px}
.texto .det p{font-size:1rem;line-height:1.6}
.actualizado{color:var(--ink-soft);font-size:.98rem;margin-top:28px!important}

/* ================= AJUSTES ================= */
.aviso{visibility:hidden;transform:translateX(-50%) translateY(calc(100% + 40px))}
.aviso.ver{visibility:visible;transform:translateX(-50%) translateY(0)}
.btn-ayudas{display:none;font:inherit;font-family:var(--f-fun);font-weight:600;font-size:1rem;align-items:center;gap:8px;min-height:52px;padding:8px 16px;border-radius:999px;border:2px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer}
.btn-ayudas svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.btn-ayudas[aria-expanded="true"]{background:var(--ink);color:#fff}
@media (max-width:700px){.btn-ayudas{display:inline-flex}.ayudas{display:none;width:100%;border-radius:22px}.ayudas.abierta{display:flex}}
@media (max-width:700px){.hero .confeti{display:none}}