/* =========================================================================
   La esfera de palabras del portfolio (bloque esfera). Solo se carga en
   las páginas que usan ese bloque (lo decide layout.php). Colores:
   únicamente tokens verificados de tokens.css.
   ========================================================================= */

/* botón de pausa de la esfera (mismo dibujo que el del cielo, pero esta
   hoja es autosuficiente: la página de la esfera no carga constelacion.css) */
.esfera__pausa {
  font: inherit;
  font-size: var(--texto-xs);
  color: var(--cielo-texto);
  background: none;
  border: 1px solid var(--cielo-eje);
  border-radius: 999px;
  padding: var(--esp-1) var(--esp-3);
  cursor: pointer;
  min-height: 2.25rem;
}

/* ---------- La esfera de palabras (cabecera del portfolio) ---------- */

.seccion--esfera {
  position: relative;
  max-width: none;
  background: linear-gradient(180deg, var(--cielo), var(--cielo-profundo));
  color: var(--blanco);
  padding-block: var(--esp-7);
  overflow: clip;
}

/* La receta del prototipo: la tarjeta de la esfera es enorme y se sale
   por la derecha de la pantalla; las puertas flotan en el hueco que queda
   entre la copy y la bola. */
.esfera__interior {
  display: grid;
  gap: var(--esp-6);
  align-items: center;
  padding-inline: var(--esp-4);
}

@media (min-width: 60em) {
  .esfera__interior {
    grid-template-columns: minmax(0, 0.82fr) minmax(34rem, 1.18fr);
    min-height: min(92vh, 58rem);
    padding: 0 0 0 clamp(1.5rem, 7.5vw, 7.5rem);
  }

  /* Desvanecido del borde derecho: una franja con el mismo fondo de la
     sección, difuminada en horizontal, que funde la esfera al salir por la
     derecha en vez de cortarla a media palabra. Es una capa POR ENCIMA (no
     una máscara del bloque), así que no recorta las puertas de la izquierda.
     Alto z-index para tapar también las palabras cercanas (que llegan a
     z-index ~1000). */
  .seccion--esfera::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: clamp(4rem, 8vw, 11rem);
    background: linear-gradient(180deg, var(--cielo), var(--cielo-profundo));
    -webkit-mask-image: linear-gradient(to right, transparent, #000 82%);
    mask-image: linear-gradient(to right, transparent, #000 82%);
    pointer-events: none;
    z-index: 1001;
  }
}

.esfera__copy {
  position: relative;
  z-index: 5;
  max-width: 41rem;
}

.esfera__visual {
  position: relative;
  align-self: stretch;
  min-height: min(82vh, 58rem);
}

.esfera__tarjeta {
  position: absolute;
  top: 50%;
  /* sangra con fuerza por la derecha (efecto «esfera que sigue más allá del
     borde»): buena parte de la bola queda fuera de pantalla y se disuelve con
     la máscara del borde, dejando el flanco izquierdo despejado para las
     puertas. */
  right: clamp(-24rem, -18vw, -12rem);
  width: clamp(42rem, 60vw, 66rem);
  aspect-ratio: 1;
  /* --esfera-dx lo pone esfera.js: corre en bloque toda la esfera a la
     derecha lo justo para que las puertas, ancladas a sus órbitas, no pisen
     la columna de texto en pantallas estrechas (0 si no hace falta) */
  transform: translate(var(--esfera-dx, 0px), -50%);
}

.seccion--esfera .esfera__antetitulo {
  color: var(--cielo-texto);
}

.esfera__titulo {
  color: var(--blanco);
  font-size: calc(var(--texto-2xl) * 0.9);
  max-width: 16ch;
  margin-top: var(--esp-3);
}

.esfera__titulo em {
  font-style: italic;
  color: var(--amarillo-estrella);
}

.esfera__texto {
  color: var(--cielo-texto);
  max-width: 44ch;
  margin-top: var(--esp-4);
}

.esfera__senales {
  list-style: none;
  margin: var(--esp-5) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-5);
}

.esfera__senales li {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-family: var(--fuente-titular);
  font-weight: 600;
  font-size: var(--texto-s);
}

.esfera__chispa {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  flex: none;
}

.esfera__chispa--oro { background: var(--amarillo-estrella); }
.esfera__chispa--azul { background: var(--palabra-azul); }
.esfera__chispa--verde { background: var(--palabra-verde); }
.esfera__chispa--rosa { background: var(--palabra-rosa); }
.esfera__chispa--morado { background: var(--palabra-morado); }

.esfera__pausa {
  margin-top: var(--esp-4);
  margin-left: 0;
}

/* ---- el visual: bola + orbitas + puertas ---- */

.esfera__bola {
  position: absolute;
  inset: 50% 18% auto auto;
  width: 68%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
}

.esfera__globo,
.esfera__capa3d {
  position: absolute;
  inset: 0;
}

.esfera__globo {
  width: 100%;
  height: 100%;
}

/* con JavaScript la bola se puede agarrar y girar; pan-y deja el
   desplazamiento vertical táctil en manos del navegador */
.esfera__bola--3d {
  cursor: grab;
  touch-action: pan-y;
}

.esfera__bola--agarrada {
  cursor: grabbing;
}

.esfera__capa3d {
  -webkit-user-select: none;
  user-select: none;
}

/* la persona en el centro: silueta celeste que se intuye dentro de la
   bola. z-index 500 = a mitad de la escala de las palabras (0-1000):
   las lejanas pasan por detrás, las cercanas por delante. */
.esfera__corazon {
  display: none;
}

.esfera--3d .esfera__corazon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 500;
  height: 24%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.esfera__corazon::before {
  content: "";
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(201, 212, 232, 0.08) 0%,
    rgba(201, 212, 232, 0.03) 45%,
    rgba(201, 212, 232, 0) 70%);
}

.esfera__corazon svg {
  position: relative;
  height: 100%;
  width: auto;
  color: var(--cielo-texto);
  opacity: 0.14;
  filter: drop-shadow(0 0 12px rgba(201, 212, 232, 0.28));
  animation: esfera-respira 7s ease-in-out infinite;
}

@keyframes esfera-respira {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

/* la respiración se detiene con el botón de pausa y con «reducir
   movimiento» (sistema o panel): esfera.js pone la clase — y también
   la retira si la usuaria activa el movimiento a propósito */
.esfera--quieta .esfera__corazon svg {
  animation: none;
}

/* nube plana: lo que se ve sin JavaScript (y lo que leen los lectores) */
.esfera__nube {
  list-style: none;
  margin: 0;
  padding: var(--esp-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-4);
  align-items: baseline;
  justify-content: center;
  align-content: center;
  height: 100%;
}

.esfera--3d .esfera__nube {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  padding: 0;
}

.esfera__palabra {
  font-family: var(--fuente-titular);
  line-height: 1.15;
  max-width: none;
}

.esfera__palabra--peso-1 { font-size: 0.8rem; font-weight: 500; }
.esfera__palabra--peso-2 { font-size: 0.95rem; font-weight: 600; }
.esfera__palabra--peso-3 { font-size: 1.15rem; font-weight: 600; }
.esfera__palabra--peso-4 { font-size: 1.4rem; font-weight: 700; }
.esfera__palabra--peso-5 { font-size: 1.8rem; font-weight: 700; }

.esfera__palabra--blanco, .esfera__palabra3d--blanco { color: var(--blanco); }
.esfera__palabra--oro, .esfera__palabra3d--oro { color: var(--amarillo-estrella); }
.esfera__palabra--azul, .esfera__palabra3d--azul { color: var(--palabra-azul); }
.esfera__palabra--verde, .esfera__palabra3d--verde { color: var(--palabra-verde); }
.esfera__palabra--rosa, .esfera__palabra3d--rosa { color: var(--palabra-rosa); }
.esfera__palabra--morado, .esfera__palabra3d--morado { color: var(--palabra-morado); }

/* palabras ancladas a la bola (las pinta esfera.js) */
.esfera__palabra3d {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  width: max-content;
  font-family: var(--fuente-titular);
  /* --escala-palabras lo pone esfera.js según el ancho de la bola: en
     pantallas estrechas las palabras encogen para no salirse del recorte */
  font-size: calc(var(--cuerpo, 1rem) * var(--escala-palabras, 1));
  font-weight: var(--grosor, 650);
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  will-change: transform, opacity;
  text-shadow: 0 2px 14px rgba(10, 16, 32, 0.55);
}

.esfera__palabra3d[data-frente="true"] {
  text-shadow: 0 2px 10px rgba(10, 16, 32, 0.8), 0 0 22px currentColor;
}

/* ---- orbitas ---- */

.orbita {
  --orbita-color: var(--noche-ponencia);
  --orbita-desfase: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}

.orbita--outer { --orbita-color: var(--noche-ponencia); width: 124%; transform: translate(-50%, -50%); }
.orbita--middle { --orbita-color: var(--noche-formacion); width: 106%; transform: translate(-50%, -50%) rotate(12deg); }
.orbita--inner { --orbita-color: var(--noche-podcast); width: 88%; transform: translate(-50%, -50%) rotate(-18deg); }
.orbita--core { --orbita-color: var(--noche-publicacion); width: 72%; transform: translate(-50%, -50%) rotate(7deg); }

.orbita__linea {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.orbita__linea circle {
  fill: none;
  stroke: var(--orbita-color);
  stroke-width: 1.4;
  stroke-dasharray: 0.8 3.2;
  stroke-dashoffset: var(--orbita-desfase);
  stroke-linecap: round;
  opacity: 0.55;
  vector-effect: non-scaling-stroke;
}

/* ---- puertas: los cuatro caminos, flotando sobre su orbita ---- */

.puerta {
  --puerta-acento: var(--amarillo-estrella);
  --puerta-dx: 0px;
  --puerta-dy: 0px;
  --puerta-angulo: 180;
  position: absolute;
  z-index: 9;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2);
  color: var(--blanco);
  text-decoration: none;
  translate: var(--puerta-dx) var(--puerta-dy);
  white-space: nowrap;
  will-change: translate;
}

.puerta--tono-azul { --puerta-acento: var(--noche-ponencia); }
.puerta--tono-verde { --puerta-acento: var(--noche-formacion); }
.puerta--tono-rosa { --puerta-acento: var(--noche-podcast); }
.puerta--tono-morado { --puerta-acento: var(--noche-publicacion); }
.puerta--tono-oro { --puerta-acento: var(--amarillo-estrella); }

.puerta__cuerpo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-family: var(--fuente-titular);
  font-weight: 600;
  font-size: var(--texto-s);
  background: rgba(20, 29, 51, 0.78);
  border: 1.5px solid var(--puerta-acento);
  border-radius: 999px;
  padding: var(--esp-2) var(--esp-4);
}

.puerta__punto {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--puerta-acento);
  box-shadow: 0 0 10px var(--puerta-acento);
  flex: none;
}

.puerta__flecha {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1.5px solid var(--puerta-acento);
  background: rgba(20, 29, 51, 0.78);
  color: var(--blanco);
  font-size: 0.85rem;
  transition: transform 0.2s;
}

.puerta:hover .puerta__flecha,
.puerta:focus-visible .puerta__flecha {
  transform: translate(2px, -2px);
}

/* posiciones de reposo (tambien el respaldo sin JavaScript) */
.puerta--outer { --puerta-angulo: 204; top: 26%; left: -12%; }
.puerta--middle { --puerta-angulo: 193; top: 42%; left: -9%; }
.puerta--inner { --puerta-angulo: 173; top: 58%; left: -6%; }
.puerta--core { --puerta-angulo: 155; top: 63%; left: -5%; }

@media (max-width: 59.99em) {
  /* en pantallas medianas y moviles las puertas dejan la orbita y forman
     una rejilla clara bajo la bola: tocables, sin solapes */
  .esfera__visual {
    display: grid;
    gap: var(--esp-4);
    min-height: 0;
  }

  .esfera__tarjeta {
    position: static;
    width: 100%;
    transform: none;
    display: grid;
    gap: var(--esp-3);
    aspect-ratio: auto;
  }

  .esfera__bola {
    position: relative;
    inset: auto;
    width: min(100%, 28rem);
    transform: none;
    margin-inline: auto;
    order: -1;
  }

  .puerta,
  .puerta--outer, .puerta--middle, .puerta--inner, .puerta--core {
    position: static;
    translate: none;
    white-space: normal;
  }

  .puerta__cuerpo {
    flex: 1;
    justify-content: flex-start;
  }

  .orbita {
    display: none;
  }
}