/* ============================================================
   ATLAS — SISTEMA SOLAR 3D
   Plano eclíptico inclinado (perspectiva real). La Tierra = el
   portafolio; los demás planetas = subdominios. Lenguaje:
   observatorio / carta estelar con profundidad.
   ============================================================ */

:root{ --tiltX:60deg; }

#solar{
  background:
    radial-gradient(140% 130% at 50% 40%, rgba(7,14,34,.40) 0%, rgba(3,6,16,.74) 60%, rgba(0,0,0,.92) 100%),
    url("../assets/journey/space-bg.59b121aec12f.webp") center/cover no-repeat #02040a;
  overflow:hidden;
}

/* campo profundo de estrellas */
.solar-stars{ position:absolute; inset:-6%; pointer-events:none; z-index:1; }
.solar-stars .star{ position:absolute; border-radius:50%; background:#fff;
  animation:twinkle var(--tw,5s) var(--ease) infinite; }
.solar-neb{ position:absolute; inset:0; pointer-events:none; opacity:.3; z-index:1;
  background:
    radial-gradient(38% 30% at 20% 24%, rgba(90,120,220,.18), transparent 70%),
    radial-gradient(32% 26% at 82% 74%, rgba(200,120,80,.13), transparent 70%),
    radial-gradient(50% 40% at 50% 50%, rgba(120,150,255,.06), transparent 75%); }

/* ---------- CÁMARA + CAMPO ORBITAL (se vuela en el "dive") ---------- */
.solar-field{
  position:absolute; inset:0; z-index:2;
  perspective:1400px; perspective-origin:50% 34%;
  transition:transform 1.7s var(--plunge), opacity 1.1s var(--ease), filter 1.4s var(--ease);
  contain:layout;
}
.ecliptic{
  position:absolute; top:50%; left:50%; width:0; height:0;
  transform-style:preserve-3d;
  transform:translateZ(0) rotateX(var(--tiltX));
  contain:layout;
}
#solar.diving .solar-field{ opacity:0; }

/* ---------- SOL ---------- */
.sun{
  position:absolute; top:50%; left:50%; pointer-events:none;
  width:clamp(72px,9.5vmin,128px); aspect-ratio:1;
  transform:translate(-50%,-50%) rotateX(calc(-1 * var(--tiltX)));
  transform-style:preserve-3d; z-index:2;
}
.sun .core{ position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 48% 44%, #fff7e4 0%, #ffd784 30%, #f7a72f 58%, #d96f18 100%);
  box-shadow:
    0 0 50px 10px rgba(255,185,85,.6),
    0 0 130px 36px rgba(255,150,50,.34),
    0 0 250px 90px rgba(255,120,40,.16); }
.sun .corona{ position:absolute; inset:-55%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,200,110,.22), transparent 60%);
  animation:sunPulse 9s var(--ease) infinite reverse; }
/* pulso por opacidad (compositor-safe en todos los engines);
   filter:brightness repintaba el core + sus 6 sombras cada frame */
@keyframes sunPulse{ 0%,100%{ opacity:.78; } 50%{ opacity:1; } }

/* ---------- ÓRBITAS (elípticas reales via --ecc en el plano) ---------- */
.orbit{
  position:absolute; top:0; left:0; pointer-events:none;
  width:var(--d); height:var(--d);
  margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  transform-style:preserve-3d;
  /* eccentricidad: scaleX aplana ligeramente la órbita circular */
  transform:scaleX(var(--ecc, 1));
  contain:layout;
}
.orbit .ring{ position:absolute; inset:0; border-radius:50%; pointer-events:none;
  border:1px solid rgba(170,200,255,.10);
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease); }
.orbit.hot .ring{ border-color:color-mix(in srgb, var(--pac,#6fd6ec) 50%, transparent);
  box-shadow:0 0 30px color-mix(in srgb, var(--pac) 22%, transparent); }

/* portador que gira en el plano */
.carrier{ position:absolute; inset:0; transform-style:preserve-3d; pointer-events:none;
  will-change:transform;
  animation:orbitSpin var(--dur,90s) linear infinite; animation-delay:var(--delay,0s); }
.solar-field.paused .carrier{ animation-play-state:paused; }
@keyframes orbitSpin{ to{ transform:rotate(360deg); } }

/* el planeta cuelga arriba y CONTRA-gira (queda fijo respecto a la cámara) */
.planet{ position:absolute; top:0; left:50%; transform-style:preserve-3d; pointer-events:none;
  transform:translate(-50%,-50%);
  will-change:transform;
  animation:orbitCounter var(--dur,90s) linear infinite; animation-delay:var(--delay,0s); }
.solar-field.paused .planet{ animation-play-state:paused; }
@keyframes orbitCounter{
  from{ transform:translate(-50%,-50%) rotate(0); }
  to{   transform:translate(-50%,-50%) rotate(-360deg); }
}

/* billboard: endereza el planeta hacia la cámara (deshace la inclinación) */
.pbill{ transform:rotateX(calc(-1 * var(--tiltX))); transform-style:preserve-3d; pointer-events:none;
  display:grid; place-items:center; }

.planet-btn{
  position:relative; display:grid; place-items:center;
  width:max(var(--sz), 48px); height:max(var(--sz), 48px);
  pointer-events:auto; cursor:pointer; color:var(--paper);
}
.pball{
  width:var(--sz); height:var(--sz); border-radius:50%;
  background:var(--body, #888); background-size:cover; background-position:center;
  box-shadow:
    inset calc(var(--sz) * -.2) calc(var(--sz) * -.13) calc(var(--sz) * .5) rgba(0,0,0,.72),
    inset calc(var(--sz) * .1) calc(var(--sz) * .08) calc(var(--sz) * .3) rgba(255,255,255,.12);
  transform:rotate(var(--tilt,0deg));
  transition:box-shadow .4s var(--ease), filter .4s var(--ease); position:relative;
}
.pball::after{ content:''; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset; }
.planet-btn:hover .pball, .planet-btn.lit .pball{
  box-shadow:
    inset calc(var(--sz) * -.2) calc(var(--sz) * -.13) calc(var(--sz) * .5) rgba(0,0,0,.66),
    0 0 0 2px color-mix(in srgb, var(--pac) 65%, transparent),
    0 0 28px color-mix(in srgb, var(--pac) 60%, transparent);
  filter:brightness(1.08); }

/* anillo de Saturno (inclinado en su billboard) */
.pring{ position:absolute; top:50%; left:50%; width:calc(var(--sz) * 2.2); height:calc(var(--sz) * .66);
  transform:translate(-50%,-50%) rotate(-20deg); border-radius:50%;
  border:calc(var(--sz) * .075) solid color-mix(in srgb, var(--pac) 72%, transparent);
  pointer-events:none; }
.pring::after{ content:''; position:absolute; inset:16%; border-radius:50%;
  border:calc(var(--sz) * .045) solid color-mix(in srgb, var(--pac) 40%, transparent); }

/* TIERRA estilizada (esfera con océanos/continentes) — la foto real solo al entrar */
.planet.terra .pball{
  box-shadow:
    inset -11px -8px 28px rgba(0,0,0,.6),
    inset 8px 6px 20px rgba(170,210,255,.25),
    0 0 30px rgba(90,150,230,.5);
}
.planet.terra .pball::before{ content:''; position:absolute; inset:-26%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, transparent 54%, rgba(110,214,236,.42) 63%, transparent 72%); }
.planet.terra .planet-btn::after{ content:''; position:absolute; inset:-12px; border-radius:50%;
  border:1px solid rgba(111,214,236,.5); animation:earthHalo 3.4s var(--ease) infinite; }
@keyframes earthHalo{ 0%{ transform:scale(.85); opacity:.85; } 70%,100%{ transform:scale(1.8); opacity:0; } }

/* ---------- ETIQUETA del planeta ---------- */
.p-label{
  position:absolute; left:50%; top:calc(100% + 8px); transform:translate(-50%,4px);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  white-space:nowrap; pointer-events:none; text-align:center;
  opacity:0; transition:opacity .4s var(--ease), transform .5s var(--cinema);
}
.planet.terra .p-label, .planet-btn:hover .p-label, .planet-btn.lit .p-label{ opacity:1; transform:translate(-50%,0); }
.p-label .nm{ font-family:var(--f-display); font-weight:600; font-size:.9rem; letter-spacing:-.01em;
  text-shadow:0 2px 12px rgba(0,0,0,.85); }
.p-label .tg{ font-family:var(--f-mono); font-size:.52rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--pac); text-shadow:0 1px 6px rgba(0,0,0,.8); }
.planet.terra .p-label .nm{ color:#fff; }

/* ---------- TÍTULO de la portada ---------- */
.solar-cap{
  position:absolute; left:50%; bottom:clamp(40px,7vh,72px); transform:translateX(-50%);
  text-align:center; z-index:6; pointer-events:none; max-width:min(86vw,640px);
  opacity:0; transition:opacity 1s var(--ease) .5s;
}
#solar.is-on .solar-cap{ opacity:1; }
#solar.diving .solar-cap{ opacity:0; transition:opacity .4s; }
.solar-cap .kick{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--cyan); display:inline-flex; align-items:center; gap:12px; }
.solar-cap .kick::before, .solar-cap .kick::after{ content:''; width:30px; height:1px; background:var(--cyan); opacity:.6; }
.solar-cap h2{ font-family:var(--f-display); font-weight:700; letter-spacing:-.025em; line-height:1;
  font-size:clamp(1.7rem,4.4vw,3.1rem); margin:.7rem 0 .55rem; }
.solar-cap h2 em{ font-family:var(--f-serif); font-style:italic; font-weight:400; color:var(--gold-lt); }
.solar-cap p{ font-size:.92rem; line-height:1.55; color:var(--paper-mut); text-wrap:pretty; }
.solar-cap .hint{ margin-top:1rem; font-family:var(--f-mono); font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--paper-dim); display:inline-flex; align-items:center; gap:8px; }
.solar-cap .hint .e{ width:7px; height:7px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 10px var(--cyan); animation:hudPulse 2s var(--ease) infinite; }

/* ---------- botón "Sistema Solar" (volver) ---------- */
.orbit-btn{
  pointer-events:auto; display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.7em 1.1em; border-radius:40px; color:var(--paper);
  border:1px solid var(--line); background:var(--glass-2); backdrop-filter:blur(12px);
  transition:transform .45s var(--cinema), border-color .3s, background .3s;
}
.orbit-btn:hover{ transform:translateY(-2px); border-color:var(--cyan); }
.orbit-btn .ic{ width:18px; height:18px; display:grid; place-items:center; }
.orbit-btn .ic svg{ width:18px; height:18px; }
.orbit-btn .ring-spin{ animation:orbitSpin 9s linear infinite; transform-origin:center; transform-box:fill-box; }

.hub-solar{
  position:absolute; left:50%; bottom:clamp(30px,6vh,54px); transform:translateX(-50%);
  z-index:9; opacity:0; transition:opacity .6s var(--ease) .6s;
  display:flex; align-items:center; gap:10px;
}
#chile.is-on .hub-solar{ opacity:1; }
#chile.plunge .hub-solar{ opacity:0; transition:opacity .4s; }
/* botón legacy — más tenue, sin fondo, solo borde fino */
.orbit-btn-legacy{
  opacity:.55; font-size:.56rem;
  border-color:rgba(255,255,255,.12);
  background:rgba(4,6,12,.25);
}
.orbit-btn-legacy:hover{ opacity:1; border-color:var(--paper-dim); }

/* ============================================================
   DESCENSO AL PLANETA — video de aterrizaje (Chile)
   ============================================================ */
#descent{ z-index:43; background:#000; pointer-events:none; }
.dsc-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
  transition:opacity .7s var(--ease);
}
#descent.playing .dsc-video{ opacity:1; }
.dsc-vig{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(125% 120% at 50% 46%, transparent 56%, rgba(0,0,0,.5) 100%); }
.dsc-grade{ position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, rgba(8,14,30,.25), transparent 30%, transparent 70%, rgba(4,8,18,.4));
  transition:opacity .7s var(--ease); }
#descent.playing .dsc-grade{ opacity:1; }

/* ============================================================
   ATERRIZAJE EN PLANETA (subdominio) → teaser → redirige
   ============================================================ */
#planetLand{ z-index:44; background:#02040a; }
.pl-sky{ position:absolute; inset:0;
  background:
    radial-gradient(120% 120% at 50% 30%, color-mix(in srgb, var(--pac,#888) 30%, rgba(4,6,12,.55)) 0%, rgba(2,4,10,.82) 56%, #000 100%),
    url("../assets/journey/space-bg.59b121aec12f.webp") center/cover no-repeat #02040a; }
.pl-stars{ position:absolute; inset:0; pointer-events:none; }
.pl-stars .star{ position:absolute; border-radius:50%; background:#fff;
  animation:twinkle var(--tw,5s) var(--ease) infinite; }
/* el planeta (esfera con profundidad) crece y se asienta como horizonte */
.pl-body{
  position:absolute; left:50%; bottom:-56%; transform:translateX(-50%) scale(.2);
  width:min(140vmin,1500px); aspect-ratio:1; border-radius:50%;
  background:var(--pbody,#888); background-size:cover;
  box-shadow:
    inset 90px 60px 160px rgba(255,255,255,.12),
    inset -40px -40px 200px rgba(0,0,0,.55),
    0 -10px 130px 14px color-mix(in srgb, var(--pac) 48%, transparent);
  opacity:0;
  transition:transform 1.7s var(--plunge), opacity .9s var(--ease);
}
#planetLand.show .pl-body{ transform:translateX(-50%) scale(1); opacity:1; }
.pl-body::before{ content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 36% 28%, rgba(255,255,255,.18), transparent 46%); }
.pl-atmo{ position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 -90px 170px 12px color-mix(in srgb, var(--pac) 32%, transparent); }
.pl-rim{ position:absolute; left:50%; bottom:-56%; transform:translateX(-50%) scale(.2);
  width:min(150vmin,1620px); aspect-ratio:1; border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(circle, transparent 47%, color-mix(in srgb, var(--pac) 55%, transparent) 50%, transparent 56%);
  transition:transform 1.7s var(--plunge), opacity .9s var(--ease); }
#planetLand.show .pl-rim{ transform:translateX(-50%) scale(1); opacity:1; }

/* tarjeta teaser */
.pl-card{
  position:absolute; left:50%; top:clamp(64px,15vh,140px); transform:translate(-50%,-14px);
  width:min(90vw,540px); text-align:center; z-index:3;
  opacity:0; transition:opacity .7s var(--ease) .55s, transform .8s var(--cinema) .55s;
}
#planetLand.show .pl-card{ opacity:1; transform:translate(-50%,0); }
.pl-card .pl-tag{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--pac); display:inline-flex; align-items:center; gap:9px; }
.pl-card .pl-tag::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--pac);
  box-shadow:0 0 10px var(--pac); }
.pl-card h2{ font-family:var(--f-display); font-weight:700; letter-spacing:-.025em; line-height:1.02;
  font-size:clamp(2rem,6vw,3.6rem); margin:.6rem 0 .7rem; }
.pl-card p{ font-size:1rem; line-height:1.6; color:var(--paper-mut); text-wrap:pretty; max-width:40ch; margin:0 auto; }
.pl-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:1.7rem; }
.pl-visit{ pointer-events:auto; display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  padding:.95em 1.6em; border-radius:3px; color:#0a0d14; background:var(--pac); border:1px solid var(--pac);
  transition:transform .4s var(--cinema), filter .3s; }
.pl-visit:hover{ transform:translateY(-2px); filter:brightness(1.1); }
.pl-visit svg{ width:15px; height:15px; transition:transform .4s var(--cinema); }
.pl-visit:hover svg{ transform:translateX(3px); }
.pl-visit.soon{ background:transparent; color:var(--paper-mut); border-color:var(--line); cursor:default; }
.pl-visit.soon:hover{ transform:none; filter:none; }
.pl-back{ pointer-events:auto; display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.95em 1.4em; border-radius:3px; color:var(--paper);
  border:1px solid var(--line); background:var(--glass); backdrop-filter:blur(10px);
  transition:transform .4s var(--cinema), border-color .3s; }
.pl-back:hover{ transform:translateY(-2px); border-color:var(--paper-mut); }
.pl-back svg{ width:15px; height:15px; }

/* cápsula / nave que cae al planeta */
.capsule{ position:fixed; inset:0; z-index:46; pointer-events:none; opacity:0; }
.capsule.go{ opacity:1; }
.capsule .cap-streak{ position:absolute; top:-20%; left:50%; width:3px; height:50vh;
  transform:translateX(-50%) rotate(16deg);
  background:linear-gradient(180deg, transparent, var(--pac,#f6d29a), #fff);
  box-shadow:0 0 24px 6px color-mix(in srgb, var(--pac) 70%, transparent), 0 0 70px 18px color-mix(in srgb, var(--pac) 40%, transparent);
  border-radius:50%; }
.capsule.go .cap-streak{ animation:capFall 1.5s var(--plunge) forwards; }
@keyframes capFall{
  0%{ transform:translateX(-50%) rotate(16deg) translateY(-60vh) scaleY(.5); opacity:0; }
  20%{ opacity:1; }
  100%{ transform:translateX(-50%) rotate(16deg) translateY(70vh) scaleY(1.4); opacity:0; }
}

@media (max-width:760px){
  :root{ --tiltX:54deg; }
  .solar-cap{ bottom:96px; }
  .p-label .nm{ font-size:.8rem; }
}

/* ============================================================
   TRUCO DE TOBY — aterrizaje en paracaídas (overlay, 50%, una vez)
   ============================================================ */
.toby-drop{ position:fixed; inset:0; z-index:47; pointer-events:none; opacity:0; }
.toby-drop.go{ opacity:1; }
.toby-drop .td-gif{
  position:absolute; left:50%; top:0; width:clamp(180px,26vmin,320px);
  transform:translate(-50%,-60vh); filter:drop-shadow(0 18px 30px rgba(0,0,0,.5));
  border-radius:10px;
}
.toby-drop.go .td-gif{ animation:tobyDrop 3.6s cubic-bezier(.45,0,.3,1) forwards; }
@keyframes tobyDrop{
  0%{ transform:translate(-50%,-62vh) rotate(-4deg); opacity:0; }
  12%{ opacity:1; }
  78%{ transform:translate(-50%,28vh) rotate(3deg); opacity:1; }
  100%{ transform:translate(-50%,40vh) rotate(0); opacity:0; }
}
.toby-drop .td-cap{
  position:absolute; left:50%; bottom:clamp(120px,20vh,200px); transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper); background:var(--glass-2); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-left:2px solid var(--gold); border-radius:4px;
  padding:9px 14px; opacity:0;
}
.toby-drop.go .td-cap{ animation:tdCap 3.6s var(--ease) forwards; }
.toby-drop .td-cap .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px var(--gold); }
@keyframes tdCap{ 0%,8%{ opacity:0; transform:translate(-50%,8px);} 20%,80%{ opacity:1; transform:translate(-50%,0);} 100%{ opacity:0; } }

@media (prefers-reduced-motion: reduce){
  .carrier, .planet, .planet.terra .pball, .orbit-btn .ring-spin{ animation:none !important; }
  .carrier, .planet{ will-change:auto; }
}
/* liberar capas GPU cuando las animaciones están pausadas */
.solar-field.paused .carrier,
.solar-field.paused .planet{ will-change:auto; }
/* la pausa debe cubrir TODO lo que anima dentro del campo:
   animation-play-state solo afecta al elemento que lo declara */
.solar-field.paused .carrier,
.solar-field.paused .planet,
.solar-field.paused .sun::before,
.solar-field.paused .sun::after,
.solar-field.paused .sun .core::before,
.solar-field.paused .sun .corona,
.solar-field.paused .planet-btn::after{ animation-play-state:paused; }

/* ============================================================
   ENHANCED RENDER — Ultra-realistic upgrade
   ============================================================ */

/* ── Nebula: campos de polvo cósmico más dramáticos ── */
.solar-neb{
  opacity:.55;
  background:
    radial-gradient(52% 44% at 10% 15%, rgba(50,70,210,.26) 0%, transparent 60%),
    radial-gradient(40% 34% at 90% 85%, rgba(190,70,50,.20) 0%, transparent 60%),
    radial-gradient(30% 26% at 80% 12%, rgba(120,180,255,.14) 0%, transparent 55%),
    radial-gradient(22% 18% at 94% 42%, rgba(70,210,170,.10) 0%, transparent 50%),
    radial-gradient(28% 22% at 22% 88%, rgba(200,110,70,.13) 0%, transparent 58%),
    radial-gradient(46% 38% at 52% 50%, rgba(90,110,240,.07) 0%, transparent 68%),
    radial-gradient(18% 14% at 60% 82%, rgba(160,80,200,.09) 0%, transparent 52%);
}

/* ── Sol: núcleo más brillante + corona animada ── */
.sun .core{
  background: radial-gradient(
    circle at 48% 44%,
    #fff9f0 0%,
    #fff4d0 10%,
    #ffd060 26%,
    #ffaa20 50%,
    #e06814 74%,
    #b04008 92%,
    #7a2800 100%
  );
  box-shadow:
    0 0 0 2px rgba(255,210,90,.40),
    0 0 30px 8px rgba(255,190,70,.62),
    0 0 80px 24px rgba(255,150,50,.44);
}
/* halo exterior pre-pintado: reemplaza las 3 sombras gigantes (180/360/520px,
   ~1500px² re-rasterizados con cada brightness) por UN radial-gradient estático
   que pulsa solo por opacidad (compositor-safe) */
.sun .core::before{
  content:'';
  position:absolute; inset:-600%; border-radius:50%;
  background: radial-gradient(circle,
    rgba(255,120,40,.20) 0%,
    rgba(255,110,35,.12) 22%,
    rgba(255,90,20,.06) 45%,
    rgba(255,60,10,.03) 68%,
    transparent 90%);
  pointer-events:none; z-index:-1;
  animation: sunPulse 7s var(--ease) infinite;
}

/* corona rotativa con rayos irregulares.
   Sin filter:blur en vivo (eran 2 pasadas gaussianas por frame, permanentes):
   la suavidad va horneada en rampas graduales del conic-gradient,
   que se rasteriza UNA vez y solo rota (compositor) */
.sun::before{
  content:'';
  position:absolute;
  inset:-70%;
  border-radius:50%;
  background: conic-gradient(
    from 0deg,
    transparent 12deg,
    rgba(255,170,50,.15) 28deg,
    rgba(255,170,50,.15) 36deg,
    transparent 52deg,
    transparent 70deg,
    rgba(255,140,40,.12) 84deg,
    rgba(255,140,40,.12) 92deg,
    transparent 106deg,
    transparent 142deg,
    rgba(255,160,60,.13) 154deg,
    rgba(255,160,60,.13) 162deg,
    transparent 176deg,
    transparent 222deg,
    rgba(255,120,30,.11) 234deg,
    rgba(255,120,30,.11) 242deg,
    transparent 256deg,
    transparent 312deg,
    rgba(255,150,50,.12) 324deg,
    rgba(255,150,50,.12) 332deg,
    transparent 346deg
  );
  animation: solarRotate 38s linear infinite;
  pointer-events:none;
  z-index:-1;
}
@keyframes solarRotate{ to{ transform:rotate(360deg); } }

/* segundo aro de corona, contra-giro más lento
   (también sin blur en vivo — rampas horneadas en el gradiente) */
.sun::after{
  content:'';
  position:absolute;
  inset:-50%;
  border-radius:50%;
  background: conic-gradient(
    from 180deg,
    transparent 32deg,
    rgba(255,200,80,.10) 46deg,
    rgba(255,200,80,.10) 54deg,
    transparent 68deg,
    transparent 112deg,
    rgba(255,160,50,.08) 126deg,
    rgba(255,160,50,.08) 134deg,
    transparent 148deg,
    transparent 192deg,
    rgba(255,180,60,.11) 206deg,
    rgba(255,180,60,.11) 214deg,
    transparent 228deg,
    transparent 282deg,
    rgba(255,140,40,.08) 296deg,
    rgba(255,140,40,.08) 304deg,
    transparent 318deg
  );
  animation: solarRotate 60s linear infinite reverse;
  pointer-events:none;
  z-index:-1;
}

/* ── Órbitas: ring más tenue, hot state más dramático ── */
.orbit .ring{
  border:1px solid rgba(120,160,200,.055);
}
.orbit.hot .ring{
  border-color: color-mix(in srgb, var(--pac) 70%, transparent);
  box-shadow:
    0 0 50px color-mix(in srgb, var(--pac) 32%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--pac) 10%, transparent);
}

/* ── Iluminación de esfera: specular highlight realista ── */
.pball{
  box-shadow:
    inset calc(var(--sz) * -.24) calc(var(--sz) * -.16) calc(var(--sz) * .58) rgba(0,0,0,.82),
    inset calc(var(--sz) * .12) calc(var(--sz) * .09) calc(var(--sz) * .35) rgba(255,255,255,.14),
    inset calc(var(--sz) * .05) calc(var(--sz) * .04) calc(var(--sz) * .14) rgba(255,255,255,.24);
}
/* reflejo especular: mancha de luz en el lado iluminado */
.pball::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  background: radial-gradient(
    ellipse 48% 38% at 28% 26%,
    rgba(255,255,255,.58) 0%,
    rgba(255,255,255,.12) 42%,
    transparent 68%
  );
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
}

/* ── Atmósfera por planeta: halo de color alrededor ── */
.planet-btn::before{
  content:'';
  position:absolute;
  inset:-20%;
  border-radius:50%;
  background: radial-gradient(
    circle,
    transparent 40%,
    color-mix(in srgb, var(--pac) 26%, transparent) 54%,
    transparent 70%
  );
  pointer-events:none;
  z-index:-1;
  opacity:.6;
  transition: opacity .5s;
}
.planet-btn:hover::before,
.planet-btn.lit::before{ opacity:1; }

/* ── Tierra: atmósfera y nubes reforzadas ── */
.planet.terra .pball{
  box-shadow:
    inset -16px -11px 36px rgba(0,0,0,.68),
    inset 12px 9px 28px rgba(160,220,255,.30),
    0 0 0 3px rgba(90,190,235,.10),
    0 0 22px 7px rgba(70,170,215,.50),
    0 0 60px 22px rgba(50,140,200,.26),
    0 0 120px 50px rgba(30,100,180,.12);
}
/* anillo de atmósfera azul más pronunciado */
.planet.terra .pball::before{
  inset:-30%;
  background: radial-gradient(
    circle,
    transparent 50%,
    rgba(100,210,240,.46) 60%,
    rgba(80,180,220,.20) 68%,
    transparent 76%
  );
}

/* ── Saturno: sistema de anillos multi-banda ── */
.pring{
  width: calc(var(--sz) * 2.7);
  height: calc(var(--sz) * .78);
  border: none;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 100% 100% at center,
    transparent 32%,
    color-mix(in srgb, var(--pac) 14%, transparent) 34%,
    transparent 38%,
    color-mix(in srgb, var(--pac) 52%, transparent) 40%,
    color-mix(in srgb, var(--pac) 72%, transparent) 46%,
    color-mix(in srgb, var(--pac) 50%, transparent) 50%,
    transparent 53%,
    color-mix(in srgb, var(--pac) 36%, transparent) 55%,
    color-mix(in srgb, var(--pac) 22%, transparent) 58%,
    transparent 62%,
    color-mix(in srgb, var(--pac) 10%, transparent) 64%,
    transparent 68%
  );
  transform: translate(-50%, -50%) rotate(-22deg);
  left: 50%; top: 50%;
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.pring::after{ display:none; }

/* hover glow más dramático */
.planet-btn:hover .pball,
.planet-btn.lit .pball{
  box-shadow:
    inset calc(var(--sz) * -.22) calc(var(--sz) * -.15) calc(var(--sz) * .54) rgba(0,0,0,.72),
    0 0 0 2px color-mix(in srgb, var(--pac) 72%, transparent),
    0 0 18px 4px color-mix(in srgb, var(--pac) 65%, transparent),
    0 0 50px 18px color-mix(in srgb, var(--pac) 36%, transparent),
    0 0 90px 40px color-mix(in srgb, var(--pac) 16%, transparent);
  filter: brightness(1.12);
}

@media (prefers-reduced-motion: reduce){
  .sun::before, .sun::after, .sun .core::before, .sun .corona, .pball{ animation:none !important; }
}