/* PlayFun · Current cinematic home, available before JavaScript enhancement.
   .peli-anim = película por scroll · .peli-static = fotogramas fijos (pausa, movimiento reducido o sin WebGL). */
#pelicula { display: none; }
/* Header dimensions also apply when no script can measure them. */
html.peli { --hdr: 64px; }
@media (max-width: 800px) { html.peli { --hdr: 120px; } }
html.peli:not(.peli-has-js) .mobile-map { display: none; }
html.peli { scroll-behavior: auto !important; scroll-padding-top: var(--hdr, 64px) !important; }
html.peli body { overflow-x: visible; background: #efedff; }
html.peli body > header { position: sticky; top: 0; z-index: 20; background: #fffffff0; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 #4230780f; }

/* decoración de la portada base: fuera (las imágenes con alt siguen en el DOM, ocultas visualmente) */
html.peli .atmosphere, html.peli .near-clouds, html.peli #fairy, html.peli .trail, html.peli #sparkles { display: none !important; }
html.peli .island, html.peli .world-banner {
  position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important;
  white-space: nowrap; opacity: 1 !important; transform: none !important; top: 0 !important; left: 0 !important; margin: 0 !important; padding: 0 !important;
}
html.peli #viaje { padding: 0 !important; overflow: visible !important; isolation: auto; position: relative; }
html.peli #viaje > section.peli-scene {
  position: relative !important; inset: auto !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
  scroll-margin-top: var(--hdr, 64px) !important; z-index: 2; transform: none !important;
}

/* ---------- textos sobre la película ---------- */
html.peli .peli-scene .caption {
  --p: 1; --x: 0;
  margin: 0 !important; background: none !important; backdrop-filter: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  max-width: none !important; display: flex; flex-direction: column; justify-content: flex-end; gap: 0; color: #fff;
}
html.peli .peli-scene .caption::before {   /* velo que da lectura sobre la imagen */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: calc(var(--p) * (1 - var(--x)));
  background: linear-gradient(90deg, #22124cd0 0%, #22124c80 34%, #22124c00 62%);
}
html.peli .peli-right .caption::before { background: linear-gradient(270deg, #22124cd0 0%, #22124c80 34%, #22124c00 62%); }
html.peli .peli-scene .caption > * {
  transform: translate(calc(var(--x) * var(--ex, 0px)), calc(var(--x) * var(--ey, -60px))) scale(calc(1 + var(--x) * (var(--es, 1) - 1)));
  filter: blur(calc(var(--x) * var(--eb, 10px)));
  transform-origin: 50% 70%; opacity: calc(1 - var(--x) * var(--x));
}
html.peli .peli-scene .caption h1, html.peli .peli-scene .caption h2 {
  font: bold clamp(40px, 5.4vw, 92px)/1.02 Georgia, serif !important; letter-spacing: -.02em; color: #fff !important; margin: 0 0 14px !important;
  text-align: inherit !important; white-space: normal !important; text-shadow: 0 2px 2px #2a145040, 0 10px 40px #2a145099;
}
html.peli .peli-scene .caption h1 { font-size: clamp(42px, 4.6vw, 80px) !important; }
html.peli-anim .peli-intro { width: 58vw !important; }
html.peli .peli-scene .caption h2::before {
  content: "Universo " attr(data-n); display: block; font: 600 12px/1 Arial, sans-serif; letter-spacing: .26em; text-transform: uppercase;
  color: #ffe7a8; margin-bottom: 18px; text-shadow: none; opacity: clamp(0, calc(var(--p) * 3 - .2), 1);
}
html.peli .peli-scene .caption .w {
  --wp: clamp(0, calc((var(--p) * (var(--n) + 1.6) - var(--i)) / 1.6), 1);
  display: inline-block; opacity: var(--wp);
  transform: translateY(calc((1 - var(--wp)) * .45em)) rotate(calc((1 - var(--wp)) * 4deg));
  filter: blur(calc((1 - var(--wp)) * 12px));
}
html.peli .peli-scene .caption p {
  font: 400 clamp(17px, 1.35vw, 22px)/1.5 Arial, sans-serif !important; color: #fffffff0 !important; margin: 0 0 22px !important; max-width: 30em !important;
  text-shadow: 0 2px 16px #2a1450b0; opacity: calc(clamp(0, calc(var(--p) * 2.4 - 1.1), 1) * (1 - var(--x)));
}
html.peli .peli-scene .caption .discover {
  align-self: flex-start; color: #fff !important; font: 600 14px/1 Arial, sans-serif !important; letter-spacing: .06em; cursor: pointer;
  padding: 13px 20px !important; margin: 0 !important; border-radius: 999px; border: 1px solid #ffffffa0 !important;
  background: #ffffff26 !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: calc(clamp(0, calc(var(--p) * 2.4 - 1.3), 1) * (1 - var(--x))); transition: background .25s, border-color .25s;
}
html.peli .peli-scene .caption .discover:hover, html.peli .peli-scene .caption .discover:focus-visible { background: #ffffff45 !important; border-color: #fff !important; }
html.peli .peli-right .caption { text-align: right; align-items: flex-end; }
html.peli .peli-right .caption .discover { align-self: flex-end; }
html.peli .peli-intro .social-channels { margin: 4px 0 0 !important; background: #2a1755cc !important; backdrop-filter: blur(8px); opacity: calc(clamp(0, calc(var(--p) * 2 - .8), 1) * (1 - var(--x))); }
html.peli .peli-right .peli-intro .social-channels { margin-left: auto !important; }

/* ---------- modo película ---------- */
html.peli-anim #pelicula {
  display: block;
  position: sticky; top: var(--hdr, 64px); height: calc(100vh - var(--hdr, 64px)); margin-bottom: calc(-100vh + var(--hdr, 64px));
  z-index: 1; overflow: hidden; background: #efedff;
}
html.peli-anim #pelicula canvas { display: block; width: 100%; height: 100%; }
/* Scroll spacers must not intercept the fixed CTA belonging to the active scene. */
html.peli-anim #viaje > section.peli-scene { height: var(--h, 62vh) !important; pointer-events: none; }
html.peli-anim .peli-scene .caption {
  position: fixed !important; top: var(--hdr, 64px) !important; bottom: 0 !important; left: 0 !important; right: auto !important;
  width: 50vw !important; padding: 0 5.5vw 11vh !important; z-index: 6; pointer-events: none; box-sizing: border-box;
}
html.peli-anim .peli-right .caption { left: auto !important; right: 0 !important; }
html.peli-anim .peli-scene .caption.peli-on .discover, html.peli-anim .peli-scene .caption.peli-on a { pointer-events: auto; }
html.peli-anim #polvo { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 5; pointer-events: none; }
html.peli-anim .peli-hint { position: fixed; left: 50%; bottom: 26px; z-index: 7; width: 26px; height: 42px; margin-left: -13px; border: 2px solid #ffffffd0; border-radius: 14px; pointer-events: none; }
html.peli-anim .peli-hint::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: peli-hint 1.6s ease-in-out infinite; }
@keyframes peli-hint { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }
html.peli-anim .progress { top: calc(var(--hdr, 64px) + 18vh); }
html.peli-anim .progress span { background: #ffffffc0; box-shadow: 0 0 0 1px #42307840; }
html.peli-anim .progress a.active span { background: #ffe7a8; box-shadow: 0 0 0 1px #423078a0; }
html.peli-anim .destinations { position: relative; z-index: 6; margin-top: calc(-1 * var(--arrival-overlap, 0px)); opacity: var(--arrival, 0); visibility: hidden; pointer-events: none; }
html.peli-arriving .destinations { visibility: visible; pointer-events: auto; }
html.peli-arriving #polvo { z-index: 8; }
html.peli-arriving .progress, html.peli-arriving .mobile-map { visibility: hidden; }

/* ---------- modo fijo (pausa, movimiento reducido, sin WebGL) ---------- */
html.peli-static #pelicula, html.peli-static #polvo, html.peli-static .peli-hint { display: none; }
html.peli-static #viaje > section.peli-scene {
  height: calc(100vh - var(--hdr, 64px)) !important; min-height: 480px; background: #2a1755 var(--still) center / cover no-repeat;
  /* Native anchor navigation already uses html's header scroll padding. */
  scroll-margin-top: 0 !important;
}
html.peli-static .peli-scene .caption { position: absolute !important; inset: 0 auto 0 0 !important; width: 52% !important; padding: 0 5.5vw 10vh !important; box-sizing: border-box; }
html.peli-static .peli-right .caption { inset: 0 0 0 auto !important; }

/* ---------- Nicole y Giselle al final, encima del logotipo del pie ---------- */
html.peli .peli-duo { width: min(460px, 92%); margin: 0 auto 30px; text-align: center; }
html.peli .peli-duo .welcome-duo { margin: 0 auto !important; width: 100% !important; }
html.peli .peli-duo .welcome-stage { height: 320px; }
html.peli .peli-duo .girls-caption { color: #75649d; margin: 6px 0 0 !important; }

/* ---------- móvil: texto abajo, la imagen sigue a las niñas ---------- */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  html.peli .peli-scene .caption, html.peli .peli-right .caption { text-align: left; align-items: flex-start; }
  html.peli .peli-right .caption .discover { align-self: flex-start; }
  html.peli .peli-scene .caption::before, html.peli .peli-right .caption::before { background: linear-gradient(0deg, #22124cdd 0%, #22124c99 30%, #22124c00 58%); }
  html.peli-anim .peli-scene .caption, html.peli-anim .peli-right .caption { left: 0 !important; right: 0 !important; width: 100% !important; padding: 0 22px 92px !important; }
  html.peli-static .peli-scene .caption, html.peli-static .peli-right .caption { inset: 0 !important; width: 100% !important; padding: 0 22px 92px !important; }
  html.peli .peli-scene .caption h1, html.peli .peli-scene .caption h2 { font-size: clamp(32px, 9.5vw, 44px) !important; margin-bottom: 10px !important; }
  html.peli .peli-scene .caption h2::before { margin-bottom: 12px; font-size: 11px; }
  html.peli .peli-scene .caption p { font-size: 16px !important; margin-bottom: 14px !important; }
  html.peli .peli-intro .social-channels { gap: 12px !important; padding: 10px 14px !important; }
  html.peli-anim .peli-hint { display: none; }
  html.peli .peli-duo .welcome-stage { height: 250px; }
}
@media (max-width: 380px) {
  html.peli .social-channels { gap: 9px !important; padding: 10px 12px !important; max-width: calc(100% - 12px); box-sizing: border-box; }
  html.peli .social-channels svg { width: 20px; height: 20px; }
}

/* The end of the journey is a usable gateway, visible during the final light. */
.destinations { max-width: none; padding: clamp(28px, 4vh, 48px) 6vw 20px; background: linear-gradient(#efedfff2, #fffaff 440px); color: #44317b; }
.destination-intro { text-align: center; max-width: 860px; margin: 0 auto 32px; }
.destination-eyebrow { font: 700 12px/1.4 Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #9353ac; margin: 0 0 10px; }
.destination-intro h2 { font: bold clamp(30px, 3.4vw, 50px)/1.12 Georgia, serif; margin: 0 0 14px; }
.destination-intro > p:last-child { font: 17px/1.5 Arial, sans-serif; color: #71638a; margin: 0; }
.editorial-gateway, .quick-destinations { max-width: 1240px; margin: 0 auto; }
.editorial-gateway { padding: 25px 28px 26px; border: 1px solid #ded4ee; border-radius: 26px; background: #ffffffed; box-shadow: 0 15px 45px #6348950c; }
.gateway-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.gateway-lockup { display: flex; align-items: center; gap: 13px; margin: 0; font: 500 23px/1.2 Arial, sans-serif; color: #72668b; }
.gateway-lockup img { display: block; width: 145px; height: auto; }
.gateway-heading p { margin: 6px 0 0; color: #72668b; font: 15px/1.4 Arial, sans-serif; }
.gateway-catalog { flex-shrink: 0; padding: 13px 18px; border-radius: 999px; border: 1px solid #d3c3e5; background: #f6f1fb; color: #543987; text-decoration: none; font: 600 14px/1.3 Arial, sans-serif; }
.gateway-catalog:hover { background: #ede2fa; }
.universe-orbits { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 16px; row-gap: 22px; }
.universe-orbit { min-width: 0; text-align: center; text-decoration: none; color: #4c367a; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.orbit-picture { position: relative; display: block; width: min(100%, 105px); aspect-ratio: 1; }
/* Keep lazy images painted while their parent fades over the WebGL scene. */
.orbit-image { box-sizing: border-box; display: block; position: absolute; inset: 0; width: 100%; height: 100%; border: 3px solid white; border-radius: 50%; outline: 1px solid #d8c7ed; box-shadow: 0 5px 16px #50357120; overflow: hidden; transform: translateZ(0); transition: transform .2s ease, outline-color .2s; }
.orbit-picture img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--thumb-pos, 50% 50%); transform: translateZ(0) scale(var(--thumb-scale, 1.2)); transform-origin: var(--thumb-origin, 50% 50%); }
.orbit-number { position: absolute; bottom: -2px; right: 1px; border: 2px solid white; background: #6a3f95; color: white; border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; font: 700 10px Arial, sans-serif; }
.orbit-name { font: 600 12px/1.35 Arial, sans-serif; max-width: 135px; }
.universe-orbit:hover .orbit-image { transform: translate3d(0, -3px, 0); outline-color: #a250cb; }
.universe-orbit:hover .orbit-name { color: #aa248c; }
.quick-destinations { margin-top: 44px; }
.quick-destinations > h3 { margin: 0 0 22px; font: bold clamp(25px, 2.4vw, 34px)/1.2 Georgia, serif; text-align: center; }
.quick-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.quick-route { --route: #7841ba; --route-a: #e7d3ff; --route-b: #ffe4f8; position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 58px 1fr; align-content: start; gap: 14px; padding: 27px; border: 2px solid #fff; border-radius: 26px; background: radial-gradient(circle at 100% 0, #ffffff99, #fff0 55%), linear-gradient(130deg, var(--route-a), var(--route-b)); color: #38265d; text-decoration: none; box-shadow: 0 8px 22px #69439012; transition: transform .2s, box-shadow .2s; }
.quick-route::before { content: ''; position: absolute; z-index: -1; width: 135px; height: 135px; border: 18px solid #ffffff44; border-radius: 50%; right: -42px; top: -57px; transform: rotate(-18deg); }
.quick-route::after { content: '✦'; position: absolute; right: 24px; top: 18px; font-size: 27px; color: #ffffffd9; transform: rotate(12deg); }
.destinations .quick-route:hover { text-decoration: none; transform: translateY(-5px) rotate(-.5deg); box-shadow: 0 15px 28px #66438d25; }
.route-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 19px; background: var(--route); box-shadow: 0 6px 0 #ffffff80, inset 0 1px 0 #ffffff50; color: #fff; transform: rotate(-5deg); }
.route-icon svg { width: 32px; height: 32px; }
.quick-route h4 { align-self: center; margin: 0; font: 750 26px/1.2 Arial, sans-serif; }
.quick-route p { grid-column: 1/-1; margin: 5px 0 8px; color: #534162; font: 15px/1.5 Arial, sans-serif; }
.route-action { grid-column: 1/-1; justify-self: start; align-self: end; padding: 10px 14px; border-radius: 999px; background: #ffffffe6; font: 700 14px/1.4 Arial, sans-serif; color: var(--route); }
.route-games { --route: #00777f; --route-a: #a8efd3; --route-b: #cef2ff; }
.route-family { --route: #ad326d; --route-a: #ffc8e4; --route-b: #ffe3c0; }
.route-youtube { --route: #bd3544; --route-a: #ffc6bd; --route-b: #ffe1ec; }
.route-aventuras { --route: #9b5709; --route-a: #ffe692; --route-b: #ffd3af; }
.route-universos { --route: #5143bd; --route-a: #cfc2ff; --route-b: #c9efff; }
.destinations a:focus-visible { outline: 3px solid #ad4acb; outline-offset: 5px; }
@media (max-width: 1000px) {
  .destinations { padding-left: 4vw; padding-right: 4vw; }
  .editorial-gateway { padding: 24px 18px; }
  .universe-orbits { column-gap: 10px; }
  .quick-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .destination-intro { margin-bottom: 25px; }
  .destination-intro > p:last-child { font-size: 15px; }
  .gateway-heading { align-items: flex-start; flex-direction: column; gap: 16px; }
  .gateway-lockup img { width: 130px; }
  .gateway-lockup { font-size: 21px; }
  .universe-orbits { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 12px; row-gap: 22px; }
  .orbit-name { font-size: 11px; }
  .orbit-number { width: 20px; height: 20px; font-size: 9px; }
  .quick-routes { grid-template-columns: 1fr; }
  .quick-route { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-image, .quick-route { transition: none; }
  .universe-orbit:hover .orbit-image, .destinations .quick-route:hover { transform: none; }
}

/* The film panel shows its opening frame before enhancement is ready.
   With JavaScript disabled/failed, the current static scenes remain usable. */
html.peli-loading { scroll-behavior: auto !important; }
html.peli-loading body { background: #fff; }
html.peli-loading body > header {
  position: sticky; top: 0; z-index: 20; background: #fffffff0;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 #4230780f;
}
html.peli-loading main, html.peli-loading .progress, html.peli-loading .mobile-map,
html.peli-loading .atmosphere, html.peli-loading .near-clouds, html.peli-loading #sparkles { visibility: hidden; }
html.peli-loading #pelicula {
  display: block; visibility: visible; position: fixed; left: 0; right: 0;
  top: var(--hdr, 64px); height: calc(100vh - var(--hdr, 64px)); margin: 0; z-index: 1; overflow: hidden; background: #fff;
}
html.peli-loading #pelicula canvas { visibility: hidden; }
.peli-first-frame {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--opening-focus, 50%) center;
}