/* ════════════════════════════════════════════════════════════════
   UNIVERSO ORBITAL · EL MAPA DEL ESTUDIO
   La experiencia orbital de la web anterior: los proyectos giran en
   tres anillos alrededor del núcleo, con estelas, arcos de energía,
   narración y un fondo sonoro. Ahora en el negro del estudio, con el
   núcleo en oro y cada proyecto con el color de su universo.
   ════════════════════════════════════════════════════════════════ */
.u-orbital {
  --o-espacio: #06060e;
  --o-tinta: #f0ede6;
  --o-oro: #c9a84c;
  --o-oro-2: #e0c36a;
  --o-azul: #a9b8ff;
  --o-turquesa: #18b8b0;
  --o-rosa: #f0287c;
  --o-mudo: #9a978f;
  --o-mudo-2: #6f6c66;
  --o-ancha: 'Michroma', 'Noto Sans', sans-serif;
  --o-mono: 'IBM Plex Mono', 'Noto Sans Mono', monospace;
  --acento: #e0c36a;
  --alto-cab: 65px;
}
.orb {
  position: relative; height: calc(100svh - var(--alto-cab)); min-height: 560px; overflow: hidden;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, #0b0b17 0%, var(--o-espacio) 72%);
  color: var(--o-tinta); user-select: none; -webkit-user-select: none;
}
.orb::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, .05) 3px 4px);
}
.orb-svg { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; will-change: transform; }
.orb .s-a1 { stroke: var(--o-oro); }
.orb .s-a2 { stroke: var(--o-azul); }
.orb .s-tinta { stroke: var(--o-tinta); }
.orb .f-a1 { fill: var(--o-oro); }
.orb .f-a2 { fill: var(--o-turquesa); }
.orb .f-a3 { fill: var(--o-rosa); }
.orb .f-tinta { fill: var(--o-tinta); }
.orb .f-espacio { fill: var(--o-espacio); }
.orb .sc-a1 { stop-color: var(--o-oro); }
.orb .sc-a2 { stop-color: var(--o-turquesa); }
.orb .sc-a3 { stop-color: var(--o-rosa); }
.orb .sc-tinta { stop-color: var(--o-tinta); }
.orb-nucleo { cursor: pointer; }

@keyframes o-tw-a { 0%, 100% { opacity: .07; } 50% { opacity: .55; } }
@keyframes o-tw-b { 0%, 100% { opacity: .14; } 50% { opacity: .42; } }
@keyframes o-tw-c { 0%, 100% { opacity: .04; } 50% { opacity: .38; } }
@keyframes o-tw-d { 0%, 100% { opacity: .18; } 50% { opacity: .60; } }
@keyframes o-tw-e { 0%, 100% { opacity: .09; } 50% { opacity: .32; } }
@keyframes o-sube { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes o-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes o-parpadeo { 0%, 100% { opacity: .2; } 50% { opacity: .7; } }
@keyframes o-latido { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes o-brillo { 0%, 100% { opacity: .12; } 50% { opacity: .45; } }
@keyframes o-barrido { from { width: 0; } to { width: 100%; } }

/* Rótulo central */
.orb-intro {
  position: absolute; inset: 0; z-index: 10; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  transition: opacity 1.4s ease;
}
.orb-intro.apagado { opacity: 0; }
.orb-intro > * { opacity: 0; animation: o-sube 1s ease both; }
.orb-intro > :nth-child(2) { animation-delay: .22s; }
.orb-intro > :nth-child(3) { animation-delay: .40s; }
.orb-intro > :nth-child(4) { animation-delay: .58s; }
.orb-intro > :nth-child(5) { animation-delay: .76s; }
.orb-intro > :nth-child(6) { animation-delay: 1.3s; }
.orb-eye { margin-bottom: 8px; font: 400 10px/1.4 var(--o-ancha); letter-spacing: .5em; text-transform: uppercase; color: var(--o-oro); }
.orb-marca { font: 400 clamp(24px, 2.8vw, 34px)/1.1 var(--o-ancha); letter-spacing: .22em; text-transform: uppercase; color: var(--o-tinta); padding-left: .22em; }
.orb-raya { width: 100px; height: 1px; margin: 16px auto; background: linear-gradient(90deg, transparent, var(--o-oro), transparent); }
.orb-lema { font: 400 9px/1.6 var(--o-ancha); letter-spacing: .28em; text-transform: uppercase; color: var(--o-oro); }
.orb-sub { margin-top: 6px; font: 400 10px/1.6 var(--o-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--o-mudo-2); }
.orb-pista { margin-top: 36px; font: 400 10px/1.6 var(--o-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--o-mudo); }
.orb-intro > .orb-pista { animation: o-sube 1s 1.3s ease both, o-parpadeo 2.6s 2.3s ease-in-out infinite; }

/* Etiquetas de los nodos: botones que siguen a su planeta */
.orb-etiquetas { position: absolute; inset: 0; z-index: 12; pointer-events: none; }
.orb-etiqueta {
  position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center;
  padding: 18px 6px 4px; border: 0; background: none; color: var(--c); cursor: pointer; pointer-events: auto;
  transform: translate(-50%, -6px); opacity: 0; transition: opacity .4s ease;
}
.orb-etiqueta b {
  font: 400 9px/1.5 var(--o-ancha); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  opacity: .62; transition: opacity .25s, text-shadow .25s, letter-spacing .25s;
}
.orb-etiqueta span { margin-top: 2px; font: 400 8px/1.4 var(--o-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--o-mudo-2); transition: color .25s; }
.orb-etiqueta:hover b, .orb-etiqueta:focus-visible b { opacity: 1; letter-spacing: .2em; text-shadow: 0 0 18px currentColor, 0 0 36px currentColor; }
.orb-etiqueta:hover span, .orb-etiqueta:focus-visible span { color: var(--o-mudo); }
.orb-etiqueta:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }

/* Ficha de un proyecto */
.orb-ficha {
  position: absolute; inset: 0; z-index: 20; padding: 48px 32px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: var(--o-espacio); opacity: 0; visibility: hidden; transform: translateY(28px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1), visibility 0s .5s;
}
.orb-ficha.abierta { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
.orb-esquina { position: absolute; width: 22px; height: 22px; border: 0 solid var(--c, var(--o-oro)); opacity: .3; }
.orb-esquina.tl { top: 32px; left: 32px; border-width: 1px 0 0 1px; }
.orb-esquina.tr { top: 32px; right: 32px; border-width: 1px 1px 0 0; }
.orb-esquina.bl { bottom: 32px; left: 32px; border-width: 0 0 1px 1px; }
.orb-esquina.br { bottom: 32px; right: 32px; border-width: 0 1px 1px 0; }
.orb-f-anillo { margin-bottom: 8px; font: 400 9px/1.4 var(--o-ancha); letter-spacing: .4em; text-transform: uppercase; color: var(--c); opacity: .8; }
.orb-f-tipo { margin-bottom: 16px; font: 400 10px/1.5 var(--o-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--o-mudo); }
.orb-f-nombre { font: 400 clamp(26px, 4vw, 40px)/1.2 var(--o-ancha); letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.orb-f-raya { width: 60px; height: 1px; margin: 20px auto; background: var(--c); animation: o-brillo 2.2s ease-in-out infinite; }
.orb-f-estado { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; font: 400 10px/1.4 var(--o-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--e); }
.orb-f-estado i { width: 6px; height: 6px; border-radius: 50%; background: var(--e); animation: o-latido 2s ease-in-out infinite; }
.orb-f-desc { max-width: 520px; min-height: 84px; margin-bottom: 28px; font-size: 15px; line-height: 1.85; color: var(--o-mudo); }
.orb-f-ir { padding-bottom: 3px; border-bottom: 1px solid var(--c); color: var(--c); font: 400 10px/1.4 var(--o-ancha); letter-spacing: .24em; text-transform: uppercase; }
.orb-f-ir:hover { text-decoration: none; opacity: .7; }
.orb-f-volver { margin-top: 36px; padding: 6px; border: 0; background: none; color: var(--o-mudo-2); font: 400 9.5px/1.4 var(--o-mono); letter-spacing: .3em; text-transform: uppercase; transition: color .2s, letter-spacing .25s; }
.orb-f-volver:hover, .orb-f-volver:focus-visible { color: var(--o-oro); letter-spacing: .38em; }

/* Entrar al estudio, narración y sonido */
.orb-entrar {
  position: absolute; top: 18px; left: 50%; z-index: 30; transform: translateX(-50%);
  padding: 10px 28px; border: 1px solid var(--o-oro); background: rgba(6, 6, 14, .8); color: var(--o-oro);
  font: 400 9.5px/1.4 var(--o-ancha); letter-spacing: .4em; text-transform: uppercase; white-space: nowrap;
  animation: o-aparece 1s .6s ease both; transition: color .4s, background-color .4s, letter-spacing .4s;
}
.orb-entrar:hover, .orb-entrar:focus-visible { background: var(--o-oro); color: var(--o-espacio); letter-spacing: .5em; text-decoration: none; }
.orb-narracion {
  position: absolute; left: 50%; bottom: 84px; z-index: 30; transform: translateX(-50%);
  width: 82%; max-width: 640px; min-height: 64px; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
}
.orb-narracion p {
  font: 400 11px/2.1 var(--o-mono); letter-spacing: .26em; text-transform: uppercase; color: var(--o-tinta);
  opacity: 0; transition: opacity 1s ease; text-shadow: 0 0 50px rgba(201, 168, 76, .35), 0 0 100px rgba(201, 168, 76, .12);
}
.orb-narracion p.ve { opacity: .75; }
.orb-narracion i { display: block; width: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--o-oro), transparent); opacity: 0; transition: opacity .6s ease; }
.orb-narracion i.ve { opacity: .45; }
.orb-botones { position: absolute; left: 50%; bottom: 28px; z-index: 30; display: flex; gap: 16px; transform: translateX(-50%); }
.orb-botones button {
  padding: 8px 16px; border: 1px solid rgba(240, 237, 230, .28); background: none; color: var(--o-mudo);
  font: 400 9.5px/1.4 var(--o-mono); letter-spacing: .26em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; animation: o-sube 1s 1.4s ease both; transition: color .3s, border-color .3s;
}
.orb-botones button:nth-child(2) { animation-delay: 1.6s; }
.orb-botones button:hover, .orb-botones button:focus-visible { color: var(--o-oro); border-color: var(--o-oro); }
.orb-botones button[aria-pressed="true"] { color: var(--o-oro); border-color: var(--o-oro); }
.orb-botones button[disabled] { opacity: .35 !important; cursor: not-allowed; }

@media (max-width: 640px) {
  .u-orbital { --alto-cab: 57px; }
  .orb-intro { justify-content: flex-start; padding-top: 62px; }
  .orb-raya { margin: 10px auto; }
  /* En vertical el rótulo sube y el mapa ocupa el hueco que queda libre,
     así nombres y planetas no se pisan. */
  .orb-svg { top: 200px; bottom: auto; height: calc(100% - 296px); left: -12.5%; right: auto; width: 125%; }
  .orb-marca { font-size: 22px; }
  .orb-lema { font-size: 7.5px; letter-spacing: .2em; }
  .orb-sub { font-size: 8.5px; }
  .orb-pista { margin-top: 14px; padding: 0 20px; font-size: 8.5px; letter-spacing: .12em; text-wrap: balance; }
  .orb-entrar { top: 14px; padding: 8px 18px; font-size: 8.5px; letter-spacing: .3em; }
  .orb-botones { bottom: 20px; }
  .orb-narracion { bottom: 70px; }
  .orb-etiqueta b { font-size: 8px; }
  .orb-etiqueta span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .orb-intro > *, .orb-botones button, .orb-entrar { opacity: 1; animation: none; }
}