/* ============================ 11 · MUNDO ============================ */
/* Escenario fijo (sticky) de 100vh dentro de una sección alta: --mp (0..1) es el avance. */
#mundo.mu{position:relative;height:240vh;height:240svh}
#mundo .mu-fijo{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;display:grid;align-items:center;
  /* fondo propio: la mezcla "screen" de los videos funde su negro con este azul */
  background:radial-gradient(55% 60% at 68% 50%,rgba(19,72,184,.22),transparent 70%),linear-gradient(180deg,var(--void),#040A18 50%,var(--void))}

/* ---------- escena ---------- */
/* la mezcla va en el contenedor exterior: sus transformaciones aíslan a los hijos, así que el grupo
   completo se mezcla en "screen" con el fondo azul y el negro de los videos desaparece */
#mundo .mu-escena{position:absolute;top:50%;left:68%;width:min(78vh,62vw);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:screen}
#mundo .mu-capa{position:absolute;inset:0;display:grid;place-items:center}
#mundo .mu-capa video{max-width:none}
/* esfera de puntos: visible al entrar, se abre y se desvanece */
#mundo .mu-esfera video{width:132%;height:auto;filter:sepia(.3) hue-rotate(185deg) saturate(2.6);
  -webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent);mask-image:radial-gradient(closest-side,#000 70%,transparent)}
#mundo .mu-esfera{opacity:calc(1 - clamp(0, (var(--mp,0) - .32) * 4.5, 1));
  transform:scale(calc(.86 + var(--mp,0) * .5))}
/* planeta: aparece desde el centro de la esfera y se acerca */
#mundo .mu-globo video{width:170%;height:auto;filter:saturate(1.25) brightness(1.15);
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 98%);mask-image:radial-gradient(closest-side,#000 62%,transparent 98%)}
#mundo .mu-globo{opacity:clamp(0, (var(--mp,0) - .3) * 3.2, 1);transform:scale(calc(.78 + clamp(0, var(--mp,0) - .3, .7) * .42))}

/* nubes: capas muy tenues que cruzan el planeta despacio */
#mundo .mu-nubes{position:absolute;inset:14%;border-radius:50%;overflow:hidden;
  -webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent);mask-image:radial-gradient(closest-side,#000 70%,transparent)}
#mundo .mu-nubes i{position:absolute;top:var(--t);left:-60%;width:90%;height:var(--h);border-radius:50%;
  background:radial-gradient(closest-side,rgba(200,230,255,.16),rgba(120,180,255,.06) 60%,transparent);filter:blur(10px);
  animation:mu-nube var(--d) linear infinite;animation-delay:var(--r)}
#mundo .mu-nubes i:nth-child(1){--t:18%;--h:22%;--d:38s;--r:-6s}
#mundo .mu-nubes i:nth-child(2){--t:46%;--h:16%;--d:52s;--r:-30s}
#mundo .mu-nubes i:nth-child(3){--t:66%;--h:20%;--d:44s;--r:-18s}
@keyframes mu-nube{from{transform:translateX(0)}to{transform:translateX(180%)}}
#mundo .mu-halo{position:absolute;inset:6%;border-radius:50%;pointer-events:none;opacity:clamp(0, (var(--mp,0) - .4) * 2.4, 1);
  box-shadow:0 0 120px 10px rgba(46,123,255,.18),inset 0 0 80px rgba(95,208,255,.08)}

/* ---------- texto ---------- */
#mundo .mu-texto{position:relative;z-index:2}
#mundo .mu-texto > *{max-width:520px}
#mundo h2{font-size:clamp(2.2rem,4.8vw,4rem);margin-top:22px;line-height:1.02}
#mundo h2 span{display:block;color:#6FB6FF;background:linear-gradient(100deg,#6FD8FF,#2E7BFF 60%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#mundo .mu-texto p{color:var(--mist);margin-top:22px;font-size:1.04rem;max-width:44ch}
#mundo .mu-cta{margin-top:32px}
/* el texto entra cuando ya se ve el planeta */
.js #mundo .mu-texto > *{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js #mundo.texto .mu-texto > *{opacity:1;transform:none}
.js #mundo.texto .mu-texto > :nth-child(2){transition-delay:.1s}
.js #mundo.texto .mu-texto > :nth-child(3){transition-delay:.2s}
.js #mundo.texto .mu-texto > :nth-child(4){transition-delay:.3s}
.js #mundo.texto .mu-texto > :nth-child(5){transition-delay:.4s}

/* enlace a la oficina */
#mundo .mu-oficina{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;margin-top:34px;padding:16px 18px;border-radius:var(--r-lg);
  border:1px solid var(--line-2);background:rgba(8,13,24,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:border-color .5s var(--ease),transform .6s var(--ease),background-color .5s var(--ease)}
#mundo .mu-oficina:hover{border-color:rgba(46,123,255,.5);background:rgba(13,20,34,.75);transform:translateY(-3px)}
#mundo .mu-oficina-ico{grid-row:1/3;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--accent-2);background:var(--accent-soft);border:1px solid rgba(46,123,255,.3)}
#mundo .mu-oficina-ico svg{width:20px;height:20px}
#mundo .mu-oficina-txt{font-size:.84rem;color:var(--silver);line-height:1.5}
#mundo .mu-oficina-txt b{display:block;color:var(--white);font-weight:500;font-size:.9rem}
#mundo .mu-oficina em{grid-column:2;font-style:normal;font-size:.78rem;color:var(--accent-2);font-weight:500}

/* ---------- celular y tablet: planeta arriba, texto abajo ---------- */
@media (max-width:900px){
  #mundo.mu{height:185vh;height:185svh}
  #mundo .mu-fijo{align-items:end;padding-bottom:max(28px,4vh)}
  #mundo .mu-escena{left:50%;top:30%;width:min(92vw,52vh)}
  #mundo .mu-texto > *{max-width:none}
  #mundo h2{font-size:clamp(1.9rem,8vw,2.6rem);margin-top:14px}
  #mundo .mu-texto p{margin-top:12px;font-size:.95rem}
  #mundo .mu-cta{margin-top:18px}
  #mundo .mu-cta .btn{width:100%}
  #mundo .mu-oficina{margin-top:16px;padding:12px 14px}
  #mundo .mu-oficina-txt{font-size:.78rem}
}
@media (max-height:640px) and (max-width:900px){
  #mundo .mu-texto p{display:none}
}

/* sin JS o con movimiento reducido: sin sticky, todo visible */
html:not(.js) #mundo.mu,#mundo.estatico{height:auto}
html:not(.js) #mundo .mu-fijo,#mundo.estatico .mu-fijo{position:relative;height:auto;min-height:100vh;padding-block:clamp(90px,12vw,150px)}
#mundo.estatico{--mp:.75}
#mundo.estatico .mu-nubes i{animation:none}

@media (max-width:900px){ #mundo .mu-nubes i{filter:none} }

/* ---------- rendimiento ----------
   Las capas solo se promueven a su propia capa de dibujo mientras la sección se ve;
   fuera de pantalla el navegador recupera esa memoria. */
#mundo.activa .mu-esfera,#mundo.activa .mu-globo{will-change:transform,opacity}
#mundo .mu-esfera,#mundo .mu-globo{contain:paint}
@media (max-width:820px){
  /* en celular el tinte se hace con el fondo, no con filtros por cuadro (mucho más fluido)
     y se quita la máscara: con la mezcla 'screen' el negro del video ya desaparece solo */
  #mundo .mu-esfera video{filter:none;-webkit-mask-image:none;mask-image:none}
  #mundo .mu-globo video{filter:saturate(1.1)}
  #mundo.mu{height:200vh;height:200svh}
  #mundo .mu-nubes i:nth-child(n+4){display:none}
}
@media (max-width:560px){
  #mundo .mu-escena{left:50%;width:min(66vh,86vw)}
}

/* videos con su color original */
#mundo .mu-esfera video,#mundo .mu-globo video{filter:none!important}