/* Decoraciones — refresh de branding y hero */
.decor-page .site-header{position:relative!important;background:linear-gradient(90deg,#4f147f 0%,#6418a8 58%,#4e126f 100%)!important;border-bottom:0!important;box-shadow:0 10px 30px rgba(60,18,92,.16)!important}
.decor-page .site-header:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:4px;background:linear-gradient(90deg,#24dffe,#ffd83d,#24dffe)}
.decor-page .nav{height:92px!important}
.decor-page .brand{min-width:116px!important;display:flex!important;align-items:center!important}
.decor-page .brand-logo{content:url('/assets/branding/logo-mundo-detalles-white.svg?v=20260905-corrected')!important;height:82px!important;max-width:108px!important;width:auto!important;object-fit:contain!important;filter:none!important;background:transparent!important}
.decor-page .nav-links a{color:#fff!important;font-weight:800!important;opacity:.92}
.decor-page .nav-links a:hover{color:#ffd83d!important;opacity:1}
.decor-page .nav-links a.is-active{color:#24dffe!important;opacity:1}
.decor-page .site-header>.container>.btn.primary{background:#fff!important;color:#6418a8!important;box-shadow:0 10px 24px rgba(31,7,50,.2)!important}
.decor-page .site-header>.container>.btn.primary:hover{background:#fff8ce!important;color:#5311ad!important}
.decor-page .hamb{color:#fff!important;border-color:rgba(255,255,255,.35)!important}

/* Hero por capas: globos al fondo y personaje al frente.
   Sustituye las decoraciones anteriores y crea movimiento tipo GIF con CSS. */
.decor-page .decor-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 80% 34%,rgba(185,109,255,.14),transparent 34%),
    radial-gradient(circle at 89% 16%,rgba(255,216,61,.18),transparent 27%),
    linear-gradient(135deg,#fffdf7 0%,#fff8ef 46%,#f5edff 100%)!important
}
.decor-page .decor-hero:before{content:none!important;display:none!important}
.decor-page .decor-hero:after{
  z-index:1!important;
  background:linear-gradient(90deg,#fffdf6 0%,rgba(255,253,246,.98) 36%,rgba(255,253,246,.88) 47%,rgba(255,253,246,.28) 59%,rgba(255,253,246,.03) 72%,transparent 82%)!important;
  pointer-events:none
}
.decor-page .decor-hero>.container{position:relative;z-index:2!important}
.decor-page .decor-hero .container:before,.decor-page .decor-hero .container:after{content:none!important;display:none!important}
.decor-page .decor-kicker,.decor-page .decor-hero h1,.decor-page .decor-hero p{position:relative;z-index:4}
.decor-page .decor-kicker{background:rgba(255,255,255,.9)!important}
.decor-page .decor-hero h1{max-width:700px!important}
.decor-page .decor-hero p{max-width:560px!important}
.decor-page .decor-hero-art{
  position:absolute;
  z-index:3;
  right:-42px;
  top:50%;
  width:min(51vw,650px);
  aspect-ratio:1199/1312;
  transform:translateY(-50%);
  pointer-events:none;
  user-select:none
}
.decor-page .decor-hero-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  transform-origin:50% 62%;
  backface-visibility:hidden;
  will-change:transform,filter
}
.decor-page .decor-hero-balloons{
  z-index:1;
  animation:mdDecorBalloonsFloat 7.2s ease-in-out infinite;
  filter:drop-shadow(0 18px 28px rgba(82,27,122,.12))
}
.decor-page .decor-hero-person{
  z-index:2;
  animation:mdDecorPersonFloat 5.8s ease-in-out -.8s infinite;
  filter:drop-shadow(0 22px 34px rgba(58,35,72,.18))
}
@keyframes mdDecorBalloonsFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(-.6deg) scale(1)}
  50%{transform:translate3d(-10px,-12px,0) rotate(.9deg) scale(1.018)}
}
@keyframes mdDecorPersonFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(.2deg)}
  50%{transform:translate3d(8px,-10px,0) rotate(-.45deg)}
}

/* El explorador de categorías permanece en su lugar dentro de la página.
   No acompaña el scroll ni cambia de posición. */
.decor-page .decor-toolbar{position:static!important;top:auto!important;z-index:auto!important;backdrop-filter:none!important}

/* Footer con el mismo logo blanco oficial */
.decor-page .footer{background:linear-gradient(135deg,#431066,#6418a8)!important;border-top:4px solid #24dffe!important;color:#fff!important}
.decor-page .footer .brand-logo{content:url('/assets/branding/logo-mundo-detalles-white.svg?v=20260905-corrected')!important;filter:none!important;background:transparent!important}
.decor-page .footer h4{color:#ffd83d!important}
.decor-page .footer a,.decor-page .footer p{color:rgba(255,255,255,.82)!important}

@media(max-width:1100px){
  .decor-page .decor-hero-art{right:-68px;width:min(55vw,590px)}
  .decor-page .decor-hero h1{max-width:630px!important}
  .decor-page .decor-hero p{max-width:515px!important}
}
@media(max-width:900px){
  .decor-page .nav{height:78px!important}
  .decor-page .brand-logo{height:66px!important;max-width:88px!important}
  .decor-page .decor-hero{min-height:760px!important;padding-bottom:310px!important}
  .decor-page .decor-hero>.container{min-height:450px!important;padding-bottom:40px!important}
  .decor-page .decor-hero:after{background:linear-gradient(180deg,#fffdf6 0%,rgba(255,253,246,.98) 48%,rgba(255,253,246,.72) 61%,rgba(255,253,246,.08) 76%,transparent 88%)!important}
  .decor-page .decor-hero-art{top:auto;bottom:-82px;right:50%;width:min(94vw,650px);transform:translateX(50%)}
  .decor-page .decor-hero h1{max-width:700px!important}
  .decor-page .decor-hero p{max-width:620px!important}
}
@media(max-width:620px){
  .decor-page .brand-logo{height:56px!important;max-width:72px!important}
  .decor-page .decor-hero{min-height:700px!important;padding-bottom:275px!important}
  .decor-page .decor-hero>.container{min-height:390px!important}
  .decor-page .decor-hero-art{bottom:-44px;width:min(104vw,570px)}
}
@media(prefers-reduced-motion:reduce){
  .decor-page .decor-hero-layer{animation:none!important;transform:none!important}
}