:root{--fucsia:#ff2e98;--fucsia-hondo:#d91472;--turquesa:#06b9bb;--turquesa-hondo:#008f92;--amarillo:#ffc21a;--amarillo-hondo:#e0a000;--verde:#25d366;--verde-hondo:#18a34d;--tinta:#20242c;--tinta-media:#5b616b}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:28px 16px;font-family:Nunito,system-ui,sans-serif;color:var(--tinta);overflow-x:hidden;background-color:#fffafc;background-image:radial-gradient(circle,rgba(255,46,152,.16) 2px,transparent 2.5px),radial-gradient(circle,rgba(6,185,187,.16) 2px,transparent 2.5px),radial-gradient(circle,rgba(255,194,26,.22) 2px,transparent 2.5px);background-size:46px 46px;background-position:0 0,23px 23px,11px 34px}
a{color:inherit;text-decoration:none}

/* Todo va en una tarjeta centrada sobre el fondo de puntos. */
.marco{position:relative;z-index:1;width:min(100%,500px);background:#fff;border-radius:34px;overflow:hidden;box-shadow:0 10px 0 rgba(0,143,146,.22),0 30px 70px rgba(16,84,91,.16)}
/* Franja turquesa con los rayos del logo. */
.cabeza{position:relative;padding:22px 16px 54px;text-align:center;background:var(--turquesa);overflow:hidden}
.cabeza::after{content:'';position:absolute;left:-5%;right:-5%;bottom:-2px;height:36px;background:#fff;border-radius:50% 50% 0 0/100% 100% 0 0}
.cabeza__rayos{position:absolute;inset:0;width:100%;height:100%;opacity:.25;animation:girar 30s linear infinite}
@keyframes girar{to{transform:rotate(4deg) scale(1.08)}}
.logo{position:relative;z-index:1;display:inline-block;padding:12px 20px;background:#fff;border-radius:30px;box-shadow:0 8px 0 var(--turquesa-hondo);transform:rotate(-2deg);animation:saludo 4s ease-in-out infinite}
@keyframes saludo{50%{transform:rotate(2deg) translateY(-4px)}}
.logo img{display:block;width:180px;height:auto}

.redes{position:relative;z-index:1;margin:-32px 0 0;padding:0 28px 28px;text-align:center}
.cartel{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;padding:5px 14px 5px 9px;border:3px solid var(--tinta);border-radius:999px;background:var(--amarillo);box-shadow:0 4px 0 var(--tinta);font-family:'Baloo 2',sans-serif;font-weight:800;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;transform:rotate(-2deg)}
.cartel svg{width:22px;height:22px}
h1{margin:0;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.75rem;line-height:1.05;color:var(--fucsia)}
h1 span{display:block;color:var(--turquesa)}
.sub{margin:6px auto 14px;max-width:400px;color:var(--tinta-media);font-weight:700;line-height:1.5}

/* Barra de avance con franjas de obra, en los colores de la marca. */
.avance{margin:0 auto 20px;max-width:320px}
.avance__barra{height:18px;padding:3px;border:3px solid var(--tinta);border-radius:999px;background:#fff;box-shadow:0 4px 0 var(--tinta)}
.avance__barra span{display:block;width:88%;height:100%;border-radius:999px;background:repeating-linear-gradient(-45deg,var(--amarillo) 0 12px,var(--fucsia) 12px 24px);background-size:34px 34px;animation:obra 1s linear infinite}
@keyframes obra{to{background-position:34px 0}}
.avance small{display:block;margin-top:6px;font-size:.85rem;font-weight:800;color:var(--tinta-media)}
.avance b{color:var(--fucsia)}

ul{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.boton{display:flex;align-items:center;gap:14px;padding:10px 16px 10px 10px;text-align:left;color:var(--tinta);background:#fff;border:3px solid var(--c);border-radius:22px;box-shadow:0 6px 0 var(--ch);transition:transform .15s ease,box-shadow .15s ease}
.boton:hover,.boton:focus-visible{transform:translateY(-2px) rotate(-.5deg);box-shadow:0 8px 0 var(--ch);outline:none}
.boton:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ch)}
.icono{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--c);color:#fff}
.icono svg{width:28px;height:28px;display:block}
.texto{flex:1;min-width:0}
.texto b{display:block;font-family:'Baloo 2',sans-serif;font-size:1.2rem;font-weight:800;line-height:1.1}
.texto small{display:block;margin-top:2px;color:var(--tinta-media);font-weight:700;font-size:.86rem}
.flecha{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 15%,#fff);color:var(--ch);font-weight:800}
.c-tienda{--c:var(--fucsia);--ch:var(--fucsia-hondo)}
.c-wsp{--c:var(--verde);--ch:var(--verde-hondo)}
.c-ig{--c:#e1306c;--ch:#b0204f}
.c-ig .icono{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.c-mapa{--c:var(--amarillo);--ch:var(--amarillo-hondo)}

.pie{margin:18px 0 0;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.15rem;color:var(--turquesa-hondo)}
.pie span{color:var(--fucsia)}

/* Candado de acceso, discreto al final. */
.acceso{margin-top:14px}
.acceso summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;list-style:none;padding:8px 16px;border:3px solid var(--turquesa);border-radius:999px;background:#fff;box-shadow:0 4px 0 var(--turquesa-hondo);font-family:'Baloo 2',sans-serif;font-weight:800;color:var(--turquesa-hondo)}
.acceso summary::-webkit-details-marker{display:none}
.acceso summary svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.acceso[open] summary{border-color:var(--fucsia);box-shadow:0 4px 0 var(--fucsia-hondo);color:var(--fucsia)}
form{max-width:340px;margin:16px auto 0;padding:16px;border:3px solid var(--turquesa);border-radius:22px;background:#fff;box-shadow:0 6px 0 var(--turquesa-hondo);text-align:left}
label{display:block;font-size:13px;font-weight:800}
.campo{display:flex;gap:8px;margin-top:8px}
input,button{min-height:46px;border-radius:14px;font:inherit}
input{flex:1;min-width:0;padding:10px 12px;border:2px solid #cfe7e7}
input:focus{outline:none;border-color:var(--turquesa)}
button{padding:0 18px;border:0;background:var(--fucsia);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 4px 0 var(--fucsia-hondo)}
button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--fucsia-hondo)}
[role=alert]{min-height:1em;margin:8px 0 0;color:#c62828;font-size:13px;font-weight:800}

/* Juguetes de adorno. Las posiciones van aquí: la página no admite estilos en línea. */
.juguete{position:fixed;z-index:0;pointer-events:none;animation:flotar 6s ease-in-out infinite}
.j1{top:250px;left:3%;width:58px}
.j2{top:330px;right:3%;width:52px;animation-delay:-2s}
.j3{bottom:12%;left:4%;width:60px;animation-delay:-4s}
.j4{bottom:8%;right:5%;width:54px;animation-delay:-1s}
.j5{top:55%;right:4%;width:50px;animation-delay:-3s}
.j6{top:48%;left:5%;width:52px;animation-delay:-5s}
@keyframes flotar{50%{transform:translateY(-10px) rotate(6deg)}}
@media(max-width:560px){body{padding:14px 12px}.marco{border-radius:26px}.redes{padding:0 16px 22px}.juguete{opacity:.35;width:40px}h1{font-size:1.7rem}.texto b{font-size:1.1rem}.texto small{font-size:.8rem}.boton{padding-right:12px;gap:12px}.flecha{display:none}.logo img{width:190px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* "Ver nuestras redes" se despliega: al entrar solo se ve un botón. */
.desplegable summary{list-style:none;cursor:pointer}
.desplegable summary::-webkit-details-marker{display:none}
.desplegable > summary .flecha{transition:transform .25s ease}
.desplegable[open] > summary .flecha{transform:rotate(90deg)}
.desplegable ul{margin-top:14px}
.desplegable[open] li{animation:aparecer .35s ease both}
.desplegable[open] li:nth-child(2){animation-delay:.07s}
.desplegable[open] li:nth-child(3){animation-delay:.14s}
.desplegable[open] li:nth-child(4){animation-delay:.21s}
@keyframes aparecer{from{opacity:0;transform:translateY(-8px) scale(.97)}}
.desplegable .boton{padding-top:8px;padding-bottom:8px}
.desplegable ul .icono{width:44px;height:44px;border-radius:14px}
.desplegable ul .icono svg{width:24px;height:24px}
.mas{display:inline-block;font-weight:800;color:var(--fucsia-hondo);font-size:.9rem}
@media(max-width:560px){.desplegable > summary .flecha{display:grid}}

/* Fondo ilustrado: cielo, arcoíris, nubes, colinas y bloques RZ. Es vectorial,
   así que se ve nítido en cualquier pantalla. */
.escena{position:fixed;inset:0;width:100%;height:100%;z-index:-1}
body{background-color:transparent}
.banderines{position:fixed;top:0;left:0;width:100%;height:70px;z-index:0;pointer-events:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.18))}
.juguete{filter:drop-shadow(0 4px 6px rgba(0,0,0,.22))}
.j7{top:16%;left:14%;width:56px;animation-delay:-1.5s}
.j8{top:22%;right:13%;width:50px;animation-delay:-3.5s}
.j9{bottom:22%;left:15%;width:52px;animation-delay:-2.5s}
.j10{bottom:24%;right:15%;width:54px;animation-delay:-4.5s}
.marco{box-shadow:0 10px 0 rgba(0,143,146,.35),0 30px 70px rgba(16,40,50,.35)}
@media(max-width:560px){.banderines{height:44px}.j7,.j8,.j9,.j10{display:none}}