:root{
  --purple:#6330a8;
  --purple-dark:#32136b;
  --pink:#ff55b7;
  --blue:#56c9f4;
  --yellow:#ffd95a;
  --lav:#d9c7ff;
  --white:#fffaff;
  --shadow:0 20px 45px rgba(70,35,125,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;overflow-x:hidden;color:var(--purple-dark);
  font-family:ui-rounded,"Nunito","Avenir Next",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    linear-gradient(rgba(177,125,255,.12),rgba(255,223,246,.12)),
    url("../imagenes/fondo-magico.png") center top/cover fixed no-repeat;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.38;
  background-image:
    radial-gradient(circle at 7% 13%,#fff 0 2px,transparent 3px),
    radial-gradient(circle at 19% 28%,#ffe98a 0 2px,transparent 3px),
    radial-gradient(circle at 31% 9%,#fff 0 1.8px,transparent 3px),
    radial-gradient(circle at 44% 23%,#fff 0 2px,transparent 3px),
    radial-gradient(circle at 57% 10%,#ffe98a 0 2px,transparent 3px),
    radial-gradient(circle at 69% 29%,#fff 0 2px,transparent 3px),
    radial-gradient(circle at 81% 12%,#ffe98a 0 2px,transparent 3px),
    radial-gradient(circle at 94% 25%,#fff 0 2px,transparent 3px),
    radial-gradient(circle at 12% 58%,#fff 0 1.5px,transparent 3px),
    radial-gradient(circle at 27% 72%,#ffe98a 0 2px,transparent 3px),
    radial-gradient(circle at 73% 62%,#fff 0 2px,transparent 3px),
    radial-gradient(circle at 89% 75%,#ffe98a 0 2px,transparent 3px);
  background-size:100% 100%;
}
body:after{
  content:"";position:fixed;left:-8%;right:-8%;bottom:-80px;height:260px;z-index:-1;
  background:
    radial-gradient(ellipse at 12% 80%,rgba(255,255,255,.95) 0 10%,transparent 27%),
    radial-gradient(ellipse at 30% 62%,rgba(255,255,255,.88) 0 11%,transparent 28%),
    radial-gradient(ellipse at 51% 78%,rgba(255,255,255,.92) 0 13%,transparent 30%),
    radial-gradient(ellipse at 72% 61%,rgba(255,255,255,.88) 0 12%,transparent 28%),
    radial-gradient(ellipse at 91% 79%,rgba(255,255,255,.95) 0 11%,transparent 27%);
  filter:blur(4px);
  opacity:.45;
}
a{color:inherit}
.app-shell{width:min(1180px,100%);margin:auto;padding:18px 24px 30px;position:relative}
.familias-top{
  position:absolute;right:24px;top:20px;z-index:5;text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;
  background:rgba(255,255,255,.78);border:1px solid rgba(103,54,163,.13);
  box-shadow:0 8px 22px rgba(77,38,128,.09);font-size:.8rem;font-weight:900;color:#63348f;
  backdrop-filter:blur(10px);transition:.2s ease
}
.familias-top:hover{transform:translateY(-2px);background:#fff}
.hero-brand{
  min-height:285px;
  display:grid;
  grid-template-columns:minmax(330px,.82fr) minmax(430px,1.18fr);
  align-items:center;
  gap:18px;
  margin:4px auto 10px;
  max-width:1080px;
  position:relative;
}
.brand-side{
  position:relative;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:8px 0 8px 22px;
}
.logo{
  display:block;
  width:min(285px,28vw);
  max-height:135px;
  object-fit:contain;
  margin:0;
  /* Delineado blanco para que el logotipo no se pierda sobre el cielo mágico */
  filter:
    drop-shadow(2px 0 0 #fff)
    drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff)
    drop-shadow(0 -2px 0 #fff)
    drop-shadow(0 0 7px rgba(255,255,255,.98))
    drop-shadow(0 10px 17px rgba(69,25,121,.18));
}
.tagline{
  margin:7px 0 0 9px;
  color:#fff;
  font-size:clamp(.9rem,1.55vw,1.08rem);
  font-weight:1000;
  letter-spacing:.01em;
  text-shadow:
    0 2px 0 rgba(91,47,145,.55),
    0 3px 10px rgba(72,27,125,.42);
}
.characters-side{
  height:285px;
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:visible;
}
.characters{
  position:relative;
  z-index:3;
  width:min(590px,50vw);
  max-height:285px;
  object-fit:contain;
  filter:drop-shadow(0 24px 20px rgba(74,36,125,.16));
  animation:float 5.5s ease-in-out infinite;
}
.hero-glow{
  position:absolute;
  z-index:0;
  width:360px;
  height:210px;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(255,255,255,.82) 0 18%,rgba(226,211,255,.58) 45%,rgba(255,188,229,.16) 70%,transparent 74%);
  filter:blur(7px);
}
.hero-star{
  position:absolute;
  z-index:4;
  color:#ffe06a;
  text-shadow:0 2px 9px rgba(255,181,41,.4);
  animation:sparkle 3s ease-in-out infinite;
}
.hero-star-1{left:8%;top:22%;font-size:31px}
.hero-star-2{right:13%;top:14%;font-size:23px;animation-delay:.9s}
.hero-star-3{right:4%;bottom:25%;font-size:34px;animation-delay:1.7s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes sparkle{0%,100%{transform:scale(.8) rotate(0);opacity:.55}50%{transform:scale(1.15) rotate(10deg);opacity:1}}

.portal-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:5px auto 0;max-width:1050px;
}
.portal{
  min-height:235px;border-radius:34px;text-decoration:none;position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;
  border:2px solid rgba(255,255,255,.88);box-shadow:var(--shadow);isolation:isolate;
  transition:transform .22s ease,box-shadow .22s ease;backdrop-filter:blur(8px);
}
.portal:before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,255,255,.58))}
.portal:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-70px;top:-75px;background:rgba(255,255,255,.4);z-index:-1}
.portal:hover{transform:translateY(-7px) scale(1.012);box-shadow:0 27px 55px rgba(72,32,129,.22)}
.portal:active{transform:translateY(-1px) scale(.995)}
.portal-cuentos{background:linear-gradient(150deg,#fff7fc,#f5e5ff)}
.portal-juegos{background:linear-gradient(150deg,#effcff,#e6f2ff)}
.portal-canciones{background:linear-gradient(150deg,#fff0fb,#eee8ff)}
.portal-guardianes{background:linear-gradient(150deg,#fff9dd,#fff0fa)}
.portal-reino{background:linear-gradient(150deg,#eee8ff,#eaf8ff)}
.portal-descargables{background:linear-gradient(150deg,#fff7f0,#ffe9f6)}
.portal-art{height:168px;width:96%;display:flex;align-items:center;justify-content:center;position:relative}
.portal-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 11px 11px rgba(76,36,128,.14));transition:transform .25s ease}
.portal:hover .portal-art img{transform:translateY(-5px) scale(1.035)}
.portal-cuentos .portal-art img{width:220px;height:155px}
.portal-descargables .portal-art img{width:250px;height:160px}
.guardian-art img{width:245px!important;height:155px!important}
.portal-copy{width:100%;padding:10px 10px 17px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.5))}
.portal-copy h2{margin:0;color:#5d2b93;font-size:1.28rem;font-weight:1000;letter-spacing:-.02em}
.portal-copy p{margin:4px 0 0;color:#9368ae;font-size:.78rem;font-weight:800}
footer{display:flex;justify-content:center;gap:18px;align-items:center;padding:25px 0 5px;color:#8761a5;font-size:.8rem;font-weight:800}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}
@media(max-width:820px){
  .app-shell{padding:12px 14px 24px}.familias-top{right:14px;top:12px;padding:7px 10px;font-size:.72rem}
  .hero-brand{min-height:265px;grid-template-columns:.8fr 1.2fr;gap:4px}.brand-side{padding-left:8px}.logo{width:min(245px,34vw)}.characters-side{height:265px}.characters{width:52vw;max-height:265px}.hero-star{display:none}.portal-grid{grid-template-columns:repeat(2,1fr);gap:13px}.portal{min-height:215px;border-radius:27px}.portal-art{height:145px}.portal-copy h2{font-size:1.08rem}.portal-copy p{font-size:.7rem}
}
@media(max-width:520px){
  .hero-brand{min-height:235px;grid-template-columns:1fr 1.12fr;gap:0}.brand-side{padding:6px 0 6px 2px}.logo{width:min(210px,42vw);max-height:105px}.tagline{font-size:.78rem;margin-left:4px}.characters-side{height:235px}.characters{width:57vw;max-height:235px}.portal-grid{gap:10px}.portal{min-height:190px;border-radius:23px}.portal-art{height:125px}.portal-cuentos .portal-art img{width:112px;height:110px}.portal-descargables .portal-art img{width:155px;height:105px}.guardian-art img{width:195px!important;height:105px!important}.portal-copy{padding:8px 6px 13px}.portal-copy h2{font-size:.98rem}.portal-copy p{font-size:.62rem}.familias-top span{display:none}footer{font-size:.7rem}
}

.music-toggle{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:30;
  border:1.5px solid rgba(255,255,255,.8);
  background:rgba(78,38,139,.58);
  color:#fff;
  border-radius:999px;
  padding:8px 13px;
  font:800 .78rem/1 system-ui,sans-serif;
  box-shadow:0 5px 18px rgba(54,25,103,.2);
  backdrop-filter:blur(8px);
  cursor:pointer;
}
.music-toggle:hover{transform:translateY(-1px)}

.music-toggle{
  position:fixed !important;
  right:18px !important;
  bottom:18px !important;
  z-index:99999 !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  min-width:92px;
  border:2px solid #fff !important;
  background:linear-gradient(135deg,#7b42d8,#ec4fa5) !important;
  color:#fff !important;
  border-radius:999px !important;
  padding:10px 15px !important;
  font:800 14px/1.1 system-ui,sans-serif !important;
  box-shadow:0 6px 22px rgba(63,25,120,.35) !important;
  cursor:pointer !important;
}

.music-toggle{
  min-width:104px !important;
  padding:11px 16px !important;
  font-size:14px !important;
}