/* =========================================================================
   El cielo del portfolio: constelación, mosaico, paradas, gráfica de años
   y letrero de ciudades. Solo se carga en las páginas que usan estos
   bloques (lo decide layout.php). Colores: únicamente tokens de
   tokens.css; los pasos --noche-* están verificados en el build.
   ========================================================================= */

/* ---------- La banda del cielo ---------- */

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

.cielo__interior {
  max-width: var(--ancho-contenido);
  margin-inline: auto;
  padding-inline: var(--esp-4);
}

.seccion--cielo h2 {
  color: var(--blanco);
}

.seccion--cielo .seccion__cabecera .antetitulo {
  color: var(--cielo-texto);
}

.cielo__intro {
  color: var(--cielo-texto);
  max-width: 58ch;
}

.cielo__cifras {
  color: var(--cielo-texto);
  margin-top: var(--esp-3);
}

.cielo__cifras strong {
  color: var(--blanco);
  font-family: var(--fuente-titular);
  font-size: 1.35em;
}

.cielo__sin-js {
  color: var(--cielo-texto);
  border: 1px dashed var(--cielo-eje);
  border-radius: var(--radio-m);
  padding: var(--esp-4);
}

.cielo__enlace {
  color: #9fc3ef;
}

/* ---------- Controles ---------- */

.cielo__controles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-4);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--esp-5);
}

.cielo__vistas {
  display: flex;
  flex-wrap: wrap; /* en pantallas muy estrechas pasa a dos filas */
  gap: var(--esp-1);
  background: rgba(255, 255, 255, 0.08);
  padding: var(--esp-1);
  border-radius: 22px;
}

.cielo__vistas button {
  font: inherit;
  font-family: var(--fuente-titular);
  font-weight: 600;
  font-size: var(--texto-s);
  color: var(--blanco);
  background: none;
  border: 0;
  border-radius: 999px;
  padding: var(--esp-2) var(--esp-4);
  cursor: pointer;
  min-height: var(--objetivo-minimo);
}

.cielo__vistas button[aria-pressed="true"] {
  background: var(--blanco);
  color: var(--tinta);
}

.cielo__leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

.cielo__filtro {
  font: inherit;
  font-size: var(--texto-xs);
  color: var(--blanco);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: var(--esp-1) var(--esp-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 2.25rem;
}

/* 0.55 mantiene el texto blanco por encima de 4.5:1 sobre el cielo
   (WCAG 1.4.3): un filtro desactivado sigue siendo un control operable */
.cielo__filtro[aria-pressed="false"] {
  opacity: 0.55;
}

.cielo__filtro small {
  color: inherit;
}

.cielo__punto {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  flex: none;
}

.cielo__punto--ponencia { background: var(--noche-ponencia); }
.cielo__punto--taller { background: var(--noche-taller); }
.cielo__punto--formacion { background: var(--noche-formacion); }
.cielo__punto--podcast { background: var(--noche-podcast); }
.cielo__punto--video { background: var(--noche-video); }
.cielo__punto--prensa { background: var(--noche-prensa); }
.cielo__punto--publicacion { background: var(--noche-publicacion); }
.cielo__punto--comunidad { background: var(--noche-comunidad); }
.cielo__punto--otro { background: var(--cielo-eje); }

/* ---------- Familias (hilos dorados) ---------- */

.cielo__familias {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  margin-top: var(--esp-4);
}

.cielo__rotulo {
  font-size: var(--texto-xs);
  color: var(--cielo-texto);
  margin-right: var(--esp-1);
}

.cielo__familia {
  font: inherit;
  font-size: var(--texto-xs);
  color: var(--amarillo-estrella);
  background: none;
  border: 1px solid rgba(223, 200, 90, 0.5);
  border-radius: 999px;
  padding: var(--esp-1) var(--esp-3);
  cursor: pointer;
  min-height: 2.25rem;
}

.cielo__familia[aria-pressed="true"] {
  background: var(--amarillo-estrella);
  color: var(--tinta);
  font-weight: 600;
}

.cielo__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;
  margin-left: auto;
  min-height: 2.25rem;
}

.cielo__criterio {
  /* itálica de la fuente de texto, no de la de citas: así esta página no
     descarga los 50 KB de la serif solo para esta línea */
  font-family: var(--fuente-texto);
  font-style: italic;
  color: var(--amarillo-estrella);
  min-height: 1.7em;
  margin-top: var(--esp-3);
  max-width: 75ch;
}

/* ---------- El lienzo (SVG) ---------- */

.cielo__lienzo {
  position: relative;
  margin-top: var(--esp-5);
}

.cielo__lienzo svg {
  width: 100%;
  height: auto;
  display: block;
}

.cielo__salto {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9;
  background: var(--blanco);
  color: var(--tinta);
  padding: var(--esp-2) var(--esp-4);
  border-radius: var(--radio-s);
}

.cielo__salto:focus {
  left: var(--esp-4);
  top: var(--esp-4);
}

.cielo__eje text {
  font-family: var(--fuente-texto);
  font-size: 13px;
  fill: var(--cielo-eje);
}

.cielo__eje line {
  stroke: rgba(185, 196, 216, 0.25);
  stroke-dasharray: 2 5;
}

.hilo {
  fill: none;
  stroke-width: 1;
  opacity: 0.32;
  transition: opacity 0.5s;
}

.vista-tiempo .hilo {
  opacity: 0;
}

.hilo-familia {
  fill: none;
  stroke: var(--amarillo-estrella);
  stroke-width: 1.3;
  stroke-dasharray: 1 6;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}

.con-familia .hilo-familia.hilo-familia--activa {
  opacity: 0.8;
}

.con-familia .nodo:not(.nodo--en-familia) {
  opacity: 0.13;
}

.con-familia .hilo:not(.hilo-familia) {
  opacity: 0.06;
}

.nodog {
  transition: transform 0.8s cubic-bezier(0.25, 0.6, 0.2, 1);
}

.nodo {
  cursor: pointer;
}

.nodo circle.nodo__c {
  transition: r 0.2s;
}

.nodo:hover circle.nodo__c,
.nodo:focus-visible circle.nodo__c {
  r: 10;
}

.nodo circle.nodo__halo {
  fill: transparent;
}

.nodo circle.nodo__aro {
  fill: none;
  stroke: var(--amarillo-estrella);
  stroke-width: 1.6;
  opacity: 0;
}

.con-familia .nodo--en-familia circle.nodo__aro {
  opacity: 0.9;
}

/* El cielo respira (titileo + deriva) solo en vista constelación, nunca
   con movimiento reducido ni con el cielo pausado. */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-a11y-movimiento]) .vista-constelacion:not(.cielo--quieto) .nodo--titila circle.nodo__c {
    animation: cielo-titila var(--tdur, 3.4s) ease-in-out var(--td, 0s) infinite;
  }

  html:not([data-a11y-movimiento]) .vista-constelacion:not(.cielo--quieto) .nodo {
    animation: cielo-deriva var(--ddur, 8s) ease-in-out var(--td, 0s) infinite alternate;
  }
}

@keyframes cielo-titila {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes cielo-deriva {
  from { transform: translate(calc(var(--dx, 3px) * -1), var(--dy, 2px)); }
  to { transform: translate(var(--dx, 3px), calc(var(--dy, 2px) * -1)); }
}

@media (prefers-reduced-motion: reduce) {
  .nodog,
  .hilo,
  .hilo-familia,
  .nodo circle.nodo__c {
    transition: none;
  }
}

/* ---------- El globo (tarjeta al pasar o enfocar) ---------- */

.cielo__globo {
  position: absolute;
  z-index: 5;
  max-width: 19rem;
  background: var(--blanco);
  color: var(--tinta);
  border-radius: var(--radio-m);
  padding: var(--esp-3) var(--esp-4);
  box-shadow: 0 10px 30px rgba(10, 16, 32, 0.45);
  font-size: var(--texto-xs);
  line-height: 1.45;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}

.cielo__globo--visible {
  opacity: 1;
}

.cielo__globo strong {
  display: block;
  font-family: var(--fuente-titular);
  font-weight: 600;
  line-height: 1.3;
  margin-top: var(--esp-1);
}

.cielo__globo .registro__meta {
  color: var(--gris-texto);
  margin-top: var(--esp-1);
}

/* ---------- Mosaico por años ---------- */

.cielo__mosaico {
  margin-top: var(--esp-5);
}

.cielo__mosaico details {
  border-top: 1px solid rgba(185, 196, 216, 0.25);
}

.cielo__mosaico summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: var(--esp-4);
  padding: var(--esp-4) var(--esp-1);
  min-height: var(--objetivo-minimo);
}

.cielo__mosaico summary::-webkit-details-marker {
  display: none;
}

.cielo__mosaico summary .mosaico__anho {
  font-family: var(--fuente-titular);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  color: var(--blanco);
  line-height: 1;
}

.cielo__mosaico summary .mosaico__cuantos {
  color: var(--cielo-texto);
  font-size: var(--texto-s);
}

.cielo__mosaico summary .mosaico__desplegar {
  margin-left: auto;
  color: var(--amarillo-estrella);
  font-size: var(--texto-xs);
}

.cielo__mosaico summary .mosaico__flecha {
  display: inline-block;
  transition: transform 0.3s;
}

.cielo__mosaico details[open] .mosaico__flecha {
  transform: rotate(180deg);
}

.mosaico__teselas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--esp-2);
  padding: 0 0 var(--esp-5);
}

.tesela {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cielo-profundo);
  color: var(--blanco);
  text-decoration: none;
}

.tesela__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s;
}

.tesela:hover .tesela__img,
.tesela:focus-visible .tesela__img {
  transform: scale(1.05);
}

/* velo inferior: su opacidad final (0.92, VELO_TESELA_OPACIDAD en
   lib.php) garantiza AA del rótulo blanco sobre cualquier imagen */
.tesela__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 29, 51, 0.15) 30%, rgba(20, 29, 51, 0.92));
}

.tesela__rotulo {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--esp-2) var(--esp-2);
  font-size: 0.72rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tesela__tipo {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(16, 23, 41, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .tesela__img {
    transition: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html:not([data-a11y-movimiento]) .cielo__mosaico details[open] .tesela {
    animation: tesela-aparece 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
    animation-delay: var(--ta, 0s);
  }
}

@keyframes tesela-aparece {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* ---------- Pie del cielo ---------- */

.cielo__pie {
  margin-top: var(--esp-5);
  font-size: var(--texto-xs);
  color: var(--cielo-texto);
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-4);
}

/* ---------- Paradas (recorrido guiado) ---------- */

.paradas {
  list-style: none;
  margin: 0;
  padding: 0;
}

.parada {
  background: var(--blanco);
  max-width: none; /* anula el ancho de prosa que aplica a todo li */
}

.parada__interior {
  margin-inline: auto;
  padding: var(--esp-6) 0;
  display: grid;
  grid-template-columns: auto minmax(0, 3fr);
  gap: var(--esp-4) clamp(1rem, 4vw, 3.5rem);
  align-items: center;
  width: 100%;
}

.parada__interior--con-foto {
  grid-template-columns: auto minmax(0, 2.4fr) minmax(0, 1.8fr);
}

.parada__numero {
  font-family: var(--fuente-titular);
  font-weight: 700;
  font-size: clamp(4rem, 9vw, 8.5rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px var(--fantasma);
}

.parada .proyecto__ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--esp-3) var(--esp-5);
  margin: var(--esp-5) 0 0;
  padding-top: var(--esp-4);
  border-top: 1px solid var(--borde);
}

.parada .proyecto__ficha dt {
  font-family: var(--fuente-titular);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-texto);
}

.parada .proyecto__ficha dd {
  margin: var(--esp-1) 0 0;
  font-size: var(--texto-s);
}

@supports not (-webkit-text-stroke: 2px var(--fantasma)) {
  .parada__numero {
    color: var(--fantasma);
  }
}

.parada__contenido h3 {
  font-size: var(--texto-xl);
  max-width: 22ch;
}

.parada__foto {
  margin: 0;
  align-self: center;
}

.parada__foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-alzada);
}

.parada__foto figcaption {
  margin-top: var(--esp-2);
  font-size: var(--texto-xs);
  color: var(--gris-texto);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 0.1rem var(--esp-3);
  display: inline-block;
}

/* Efecto baraja: solo en pantallas anchas; en móvil, flujo normal. */
@media (min-width: 761px) {
  .parada {
    position: sticky;
    top: var(--alto-cabecera);
    min-height: calc(100vh - var(--alto-cabecera));
    display: grid;
    align-content: center;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -16px 38px rgba(31, 42, 68, 0.16);
  }

  .parada:nth-child(even) {
    background: var(--lila);
  }
}

@media (max-width: 760px) {
  .parada {
    border-top: 1px solid var(--borde);
  }

  .parada__interior,
  .parada__interior--con-foto {
    grid-template-columns: 1fr;
    gap: var(--esp-2);
    padding-block: var(--esp-6);
  }

  .parada__numero {
    font-size: 3.4rem;
    -webkit-text-stroke-width: 1.5px;
  }

  .parada__foto {
    margin-top: var(--esp-4);
  }
}

/* La sección que sigue a las paradas debe taparlas al llegar */
.paradas + *,
.seccion--suave {
  position: relative;
  z-index: 1;
}

/* ---------- Gráfica de años ---------- */

.grafica-anios {
  display: flex;
  align-items: flex-end;
  gap: clamp(2px, 0.6vw, 8px);
  margin-top: var(--esp-6);
}

.grafica-anios__anio {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: var(--esp-2);
  align-content: end;
  justify-items: center;
  text-decoration: none;
  border-radius: var(--radio-s);
}

.grafica-anios__barra {
  width: 100%;
  height: 3px;
  background: var(--azul);
  border-radius: 4px 4px 0 0;
}

/* Alturas en pasos de 8px: la CSP no admite atributos style. */
.grafica-anios__barra--alto-8 { height: 8px; }
.grafica-anios__barra--alto-16 { height: 16px; }
.grafica-anios__barra--alto-24 { height: 24px; }
.grafica-anios__barra--alto-32 { height: 32px; }
.grafica-anios__barra--alto-40 { height: 40px; }
.grafica-anios__barra--alto-48 { height: 48px; }
.grafica-anios__barra--alto-56 { height: 56px; }
.grafica-anios__barra--alto-64 { height: 64px; }
.grafica-anios__barra--alto-72 { height: 72px; }
.grafica-anios__barra--alto-80 { height: 80px; }
.grafica-anios__barra--alto-88 { height: 88px; }
.grafica-anios__barra--alto-96 { height: 96px; }
.grafica-anios__barra--alto-104 { height: 104px; }
.grafica-anios__barra--alto-112 { height: 112px; }
.grafica-anios__barra--alto-120 { height: 120px; }
.grafica-anios__barra--alto-128 { height: 128px; }
.grafica-anios__barra--alto-136 { height: 136px; }
.grafica-anios__barra--alto-144 { height: 144px; }
.grafica-anios__barra--alto-152 { height: 152px; }
.grafica-anios__barra--alto-160 { height: 160px; }
.grafica-anios__barra--alto-168 { height: 168px; }

a.grafica-anios__anio:hover .grafica-anios__barra,
a.grafica-anios__anio:focus-visible .grafica-anios__barra {
  background: var(--morado);
}

.grafica-anios__anio--vacio .grafica-anios__barra {
  background: var(--borde);
}

.grafica-anios__valor {
  font-family: var(--fuente-titular);
  font-weight: 600;
  font-size: var(--texto-xs);
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  min-height: 1.2em;
}

.grafica-anios__etiqueta {
  font-size: 0.6875rem;
  color: var(--gris-texto);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

@media (min-width: 56.25em) {
  .grafica-anios__etiqueta {
    writing-mode: horizontal-tb;
    transform: none;
  }
}

@media (max-width: 700px) {
  .grafica-anios {
    gap: 2px;
  }

  .grafica-anios__valor {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html:not([data-a11y-movimiento]) .grafica-anios__barra {
    transform-origin: bottom;
    animation: barra-crece 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
    animation-delay: var(--gb, 0s);
  }
}

@keyframes barra-crece {
  from {
    transform: scaleY(0);
  }
}

/* ---------- Letrero de ciudades ---------- */

.letrero {
  background: var(--tinta);
  color: var(--blanco);
  overflow: hidden;
  padding-block: var(--esp-4);
  display: flex;
  align-items: center;
  gap: var(--esp-4);
}

.letrero__tren {
  display: flex;
}

.letrero__vagon {
  display: flex;
  gap: 2.6rem;
  white-space: nowrap;
  font-family: var(--fuente-titular);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  padding-right: 2.6rem;
}

.letrero__vagon span::after {
  content: "·";
  margin-left: 2.6rem;
  color: var(--amarillo-estrella);
}

@media (prefers-reduced-motion: no-preference) {
  html:not([data-a11y-movimiento]) .letrero__tren {
    animation: letrero-pasa 46s linear infinite;
  }

  .letrero:not(.letrero--andando) .letrero__tren {
    animation-play-state: paused;
  }
}

@keyframes letrero-pasa {
  to {
    transform: translateX(-50%);
  }
}

.letrero__pausa {
  flex: none;
  margin-left: auto;
  margin-right: var(--esp-4);
  background: none;
  border: 1.5px solid var(--cielo-eje);
  color: var(--blanco);
  border-radius: 50%;
  width: var(--objetivo-minimo);
  height: var(--objetivo-minimo);
  cursor: pointer;
}

/* Los medios de ficha (.registro__medio) viven en ficha-dialogo.css:
   el archivo de esta página va con sin_medios y no los pinta. */