/* =================================================================
   HUD DE NAVE - cian electrico sobre negro.

   Decisiones de Antonio que manda este fichero:
     · HUD de nave espacial, no consola cientifica ni cristal minimalista
     · Cian electrico como color de brillo
     · Esquinas cortadas en angulo, nunca redondeadas
     · El marco de cada panel se DIBUJA solo al aparecer
     · Reticula de fondo muy tenue sobre todo el visor
     · Grano fino + aberracion cromatica en los bordes
     · Brillo de neon "marcado pero controlado"
     · Titulos con efecto de resplandor
     · Arranque como un sistema encendiendose

   Fuentes del sistema a proposito: la web tiene que arrancar sin conexion.
   ================================================================= */

:root {
  /* --- Cian electrico, la familia entera --- */
  --cian:        #00e5ff;
  --cian-claro:  #7df9ff;
  --cian-medio:  rgba(0, 229, 255, 0.55);
  --cian-tenue:  rgba(0, 229, 255, 0.22);
  --cian-fantasma: rgba(0, 229, 255, 0.08);

  /* --- Negros. No negro puro: un azul muy profundo lee mejor --- */
  --fondo:       #01050c;
  --vidrio:      rgba(2, 12, 22, 0.72);
  --vidrio-solido: rgba(2, 12, 22, 0.94);

  /* --- Texto --- */
  --tinta:       #d6f6ff;
  --tinta-media: rgba(214, 246, 255, 0.62);
  --tinta-tenue: rgba(214, 246, 255, 0.34);

  /* --- Semaforo: separado del acento, como manda el buen diseno de datos --- */
  --alerta:      #ff5c4d;
  --aviso:       #ffb340;
  --ok:          #4dffa6;

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono",
          "Roboto Mono", Menlo, Consolas, "Courier New", monospace;

  /* Corte de las esquinas en angulo */
  --corte: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =================================================================
   Lienzo 3D
   ================================================================= */

#lienzo {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

#lienzo.arrastrando { cursor: grabbing; }
#lienzo.sobre-cuerpo { cursor: crosshair; }

/* =================================================================
   Capas de efecto sobre el visor.
   Todas con pointer-events:none: son cristal, no interfaz.
   ================================================================= */

.capa-visor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

/* ============ HIPERESPACIO — el salto entre paradas del recorrido Voyager ===
 *
 * Antonio, 6-sep: el efecto original se dibujaba con Three.js (rayas 3D
 * colgadas de la camara) y provocaba, de forma intermitente, cuadros negros/
 * blancos reales en pantalla ("Attachment has zero size" en la consola de
 * WebGL) -- confirmado en vivo que desaparecian del todo desactivando SOLO
 * la capa de postprocesado (`cine.js`), sin tocar nada mas. Bajar el brillo
 * no lo quito. Antonio, el mismo dia: "lo arreglas... o quitamos los
 * saltos". Esto es la solucion segura: un destello de PANTALLA (CSS puro,
 * fuera de Three.js), que no toca ni una sola textura ni "render target" de
 * WebGL -- no puede producir ESE fallo porque no participa de ese sistema.
 * `mix-blend-mode: screen` da el mismo aspecto "de luz sumada" que la
 * mezcla aditiva original, pero lo hace el compositor del navegador, no la
 * GPU a traves de Three.js. */
#capa-hiperespacio {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 15;
  background: radial-gradient(circle at 50% 50%,
    rgba(214, 228, 255, 1) 0%,
    rgba(214, 228, 255, 0.55) 20%,
    rgba(150, 180, 255, 0.18) 42%,
    rgba(150, 180, 255, 0) 68%);
  mix-blend-mode: screen;
  opacity: 0;
}
#capa-hiperespacio.activo {
  animation-name: hiperespacio-destello;
  animation-duration: var(--dur-hiperespacio, 3s);
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
@keyframes hiperespacio-destello {
  0%   { opacity: 0;    transform: scale(0.25); }
  14%  { opacity: 1;    transform: scale(1.5); }
  30%  { opacity: 0.85; transform: scale(2.3); }
  100% { opacity: 0;    transform: scale(3.8); }
}
@media (prefers-reduced-motion: reduce) {
  #capa-hiperespacio.activo { animation: none; opacity: 0; }
}

/* --- Reticula de fondo muy tenue (pregunta 7) --- */
#reticula {
  background-image:
    linear-gradient(to right, var(--cian-fantasma) 1px, transparent 1px),
    linear-gradient(to bottom, var(--cian-fantasma) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.45;
  /* Se desvanece hacia el centro: el borde del visor se lee, el centro queda
     limpio para mirar el espacio. */
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 34%, #000 96%);
  mask-image: radial-gradient(ellipse at center, transparent 34%, #000 96%);
}

/* --- Grano fino (pregunta 15) --- */
/* ⚠️ Antonio, 31-ago: "se ve como la presentacion con ese granulado o ruido".
 *
 * Habia DOS granos sumandose sin saberlo el uno del otro: este, de CSS, y el
 * de la cadena de cine en `js/main.js`. Ninguno de los dos molestaba solo.
 *
 * Y de los dos, el que se veia era este, por la animacion: un grano quieto
 * casi no se nota, pero uno que SALTA tres veces por segundo sobre un fondo
 * negro se lee como suciedad en movimiento. Se queda muy flojo y quieto. */
#grano {
  opacity: 0.014;
  mix-blend-mode: overlay;
  background-repeat: repeat;
  background-size: 180px 180px;
}

/* --- Vinetа y aberracion cromatica en los bordes (pregunta 15) --- */
#vineta {
  box-shadow:
    inset 0 0 220px 40px rgba(0, 0, 0, 0.85),
    inset 0 0 60px rgba(0, 229, 255, 0.05);
}

#aberracion {
  opacity: 0.5;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(255, 0, 60, 0.055) 100%),
    radial-gradient(ellipse at 49.4% 50%, transparent 62%, rgba(0, 140, 255, 0.055) 100%);
  mix-blend-mode: screen;
}

/* --- Marcas de encuadre en las esquinas del visor --- */
#encuadre::before, #encuadre::after,
#encuadre > span::before, #encuadre > span::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1px solid var(--cian-tenue);
}
#encuadre::before        { top: 14px; left: 14px;   border-right: none; border-bottom: none; }
#encuadre::after         { top: 14px; right: 14px;  border-left: none;  border-bottom: none; }
#encuadre > span::before { bottom: 14px; left: 14px;  border-right: none; border-top: none; }
#encuadre > span::after  { bottom: 14px; right: 14px; border-left: none;  border-top: none; }

/* =================================================================
   PANELES
   Esquinas cortadas en angulo + marco que se dibuja solo al aparecer.
   ================================================================= */

.panel {
  position: fixed;
  z-index: 10;
  background: var(--vidrio);
  backdrop-filter: blur(10px) saturate(1.25);
  -webkit-backdrop-filter: blur(10px) saturate(1.25);
  padding: 13px 15px;
  /* El corte en angulo de las cuatro esquinas: la firma del HUD */
  clip-path: polygon(
    var(--corte) 0, 100% 0,
    100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%,
    0 100%, 0 var(--corte)
  );
  transition: opacity 0.3s;
}

/* El borde no puede ser un border normal: el clip-path lo recortaria.
   Se pinta con un pseudo-elemento que hereda la misma forma. */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(
    135deg,
    var(--cian-medio) 0%,
    var(--cian-tenue) 40%,
    var(--cian-tenue) 60%,
    var(--cian-medio) 100%
  );
  clip-path: polygon(
    var(--corte) 0, 100% 0,
    100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%,
    0 100%, 0 var(--corte)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* --- Entrada del panel: el marco se dibuja y luego entra el contenido --- */
.panel.entrando {
  animation: panelEntra 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes panelEntra {
  0%   { opacity: 0; transform: translateY(6px) scaleY(0.4); filter: brightness(2.6); }
  55%  { opacity: 1; transform: translateY(0) scaleY(1); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* --- Barrido de escaneo al aparecer (pregunta 8) --- */
.panel.escaneando > .barrido {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 34%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(0, 229, 255, 0.16) 55%,
    rgba(0, 229, 255, 0.30) 82%,
    transparent
  );
  animation: barrer 0.72s ease-out 1;
  pointer-events: none;
}

@keyframes barrer {
  from { transform: translateY(-120%); opacity: 1; }
  to   { transform: translateY(340%);  opacity: 0; }
}

/* ============ SOLO ESPACIO ============
   Antonio, 1-sep: "un boton para apagar el HUD y que solo se vea el espacio".

   ⚠️ Antes esto lo hacia la tecla H y NO incluia la barra de arriba ni los
   avisos, asi que "solo espacio" seguia teniendo media interfaz encima. */
body.interfaz-oculta .panel,
body.interfaz-oculta .capa-visor,
body.interfaz-oculta #pista,
body.interfaz-oculta #barra-superior,
body.interfaz-oculta #avisos,
body.interfaz-oculta #aviso-superficie,
body.interfaz-oculta #salir,
body.interfaz-oculta #capa-etiquetas {
  /* ⚠️ `!important` aqui SI esta justificado, y es de los pocos sitios donde
   * lo esta. La animacion de entrada de los paneles (`hud.animarPanel`) les
   * escribe la opacidad EN LINEA, y un estilo en linea gana a cualquier regla
   * de la hoja por especifica que sea. Medido: al pulsar SOLO ESPACIO, los dos
   * paneles seguian con opacidad 1,00.
   *
   * La alternativa seria que el JS fuera borrando estilos en linea uno a uno,
   * que es mas fragil: cualquier animacion nueva volveria a romperlo. */
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ⚠️ EL BOTON SE QUEDA. Es la puerta de vuelta.
   Si se apaga todo y no queda nada que pulsar, el unico camino de regreso es
   una tecla que nadie ha visto. Encogido y casi transparente en la esquina,
   se enciende al acercar el raton. */
body.interfaz-oculta #btn-limpio {
  position: fixed;
  top: 14px; right: 14px;
  z-index: 40;
  opacity: 0.18;
  pointer-events: auto;
  font-size: 8px;
  padding: 5px 8px;
  transition: opacity 0.25s ease;
}
body.interfaz-oculta #btn-limpio:hover,
body.interfaz-oculta #btn-limpio:focus-visible { opacity: 1; }

/* La puerta de vuelta de verdad. Ver el comentario del boton en index.html:
 * el de la barra no puede servir porque hereda la opacidad 0 de su padre.
 *
 * Discreto para no estorbar a la vista limpia —que es justo lo que se ha
 * pedido al pulsarlo— pero SIEMPRE visible: se ve sin buscarlo, y se enciende
 * del todo al acercar el raton. */
#btn-volver-interfaz {
  /* ⚠️ TIENE QUE VERSE. Antonio, 3-sep: *"¿ves el botón de ver paneles? yo no,
   * está muy apagado"*.
   *
   * Lo puse al 35% de opacidad para no estorbar a la vista limpia, y me pasé:
   * encima va sobre un cielo lleno de estrellas, que es un fondo con manchas
   * claras, así que un texto tenue se disuelve en él. Y este botón no es un
   * adorno — es la ÚNICA forma de recuperar la interfaz.
   *
   * Ahora se ve de entrada y sigue siendo discreto: fondo casi opaco para que
   * no dependa de lo que haya detrás, borde marcado y letra algo mayor. Al
   * acercar el ratón se enciende del todo. */
  position: fixed;
  top: 14px; right: 14px;
  z-index: 60;
  padding: 9px 14px;
  border: 1px solid var(--cian-medio);
  border-radius: 4px;
  background: rgba(6, 10, 18, .88);
  color: var(--cian-claro);
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.16em;
  cursor: pointer;
  opacity: 0.9;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .55);
  backdrop-filter: blur(6px);
  transition: opacity .25s ease, border-color .25s ease, background .25s ease;
}
#btn-volver-interfaz:hover,
#btn-volver-interfaz:focus-visible {
  opacity: 1;
  border-color: var(--cian-claro);
  background: rgba(10, 18, 30, .95);
}
@media (max-width: 820px) {
  /* En movil, mas grande: se pulsa con el dedo, no con el raton. */
  #btn-volver-interfaz { padding: 11px 16px; font-size: 10px; opacity: .5; }
}

/* =================================================================
   Tipografia del HUD
   ================================================================= */

.etiqueta {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--cian-medio);
  text-transform: uppercase;
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Linea que se extiende a la derecha del titulo: detalle de HUD */
.etiqueta::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--cian-tenue), transparent);
}

.dato-grande {
  font-size: 17px;
  color: var(--tinta);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.dato-mono {
  font-size: 11px;
  color: var(--tinta-media);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* Titulos con resplandor (pregunta 10) */
.titulo-brillo {
  color: var(--cian-claro);
  text-shadow:
    0 0 6px rgba(0, 229, 255, 0.75),
    0 0 20px rgba(0, 229, 255, 0.35);
  letter-spacing: 0.14em;
}

/* =================================================================
   Panel de tiempo (arriba izquierda)
   ================================================================= */


#reloj-fecha { font-size: 15px; letter-spacing: 0.06em; }
#reloj-hora  { font-size: 20px; color: var(--cian-claro); letter-spacing: 0.1em; margin-top: 2px; }

.fila-vel {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--cian-fantasma);
}

.fila-vel span:first-child { font-size: 9px; letter-spacing: 0.16em; color: var(--cian-medio); }
#valor-velocidad { font-size: 12px; color: var(--tinta); }

.aviso-caja {
  margin-top: 9px;
  padding: 6px 8px;
  background: rgba(255, 92, 77, 0.1);
  border-left: 2px solid var(--alerta);
  color: var(--alerta);
  font-size: 10px;
  line-height: 1.4;
}

/* =================================================================
   Navegacion (derecha)
   ================================================================= */

/* La navegacion y la ficha comparten la columna derecha. Sin este tope, una
   ficha larga se comia la lista de destinos y no se podia pulsar el siguiente
   planeta: se detecto al intentar ir de la Tierra a Saturno y no responder. */
#panel-destinos {
  /* Antonio, 6-sep: "el menu de los planetas con boton y submenus, porque
     estorba la vision" -- ya no se abre solo (ver el arranque en main.js);
     nace `oculto` y el boton CUERPOS de la barra superior lo abre/cierra.
     `top:60px` en vez de `22px`: la barra de arriba mide 54px, y antes el
     panel arrancaba a la mitad de esa barra en vez de justo debajo. */
  top: 60px; right: 22px;
  width: 196px;
  max-height: 44vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--cian-tenue) transparent;
}

#panel-destinos::-webkit-scrollbar { width: 4px; }
#panel-destinos::-webkit-scrollbar-thumb { background: var(--cian-tenue); }

/* ============ Los 3 paneles de simulaciones nuevos, 6-sep ============
 * Mismo `.panel` compartido que `panel-destinos`/`panel-ficha` (cristal +
 * esquinas cortadas), solo reposicionado arriba-centro -- mismo sitio que
 * ya usa `#panel-fusion` para "la funcion grande del momento", en vez de
 * inventar una posicion nueva para cada uno. */
#panel-grand-tour, #panel-hitos {
  top: 78px; left: 50%; transform: translateX(-50%);
  width: min(380px, calc(100vw - 40px));
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  z-index: 20;
}
/* ⚠️ Antonio, 7-sep: "el recuadro molesta ahi" -- centrado arriba, este
   panel tapaba justo el centro de la pantalla, que es donde cae la estrella
   al encuadrarla (`_volarASistemaExoplaneta` apunta la camara al centro del
   sistema). A un lado no tapa lo que el propio panel esta describiendo. */
#panel-exoplanetas, #panel-satelites {
  top: 78px; right: 20px; left: auto; transform: none;
  width: min(340px, calc(100vw - 40px));
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  z-index: 20;
}
#panel-exoplanetas::-webkit-scrollbar,
#panel-satelites::-webkit-scrollbar,
#panel-grand-tour::-webkit-scrollbar,
#panel-hitos::-webkit-scrollbar { width: 4px; }
#panel-exoplanetas::-webkit-scrollbar-thumb,
#panel-satelites::-webkit-scrollbar-thumb,
#panel-grand-tour::-webkit-scrollbar-thumb,
#panel-hitos::-webkit-scrollbar-thumb { background: var(--cian-tenue); }

/* Info de un sistema de exoplanetas elegido: mismo aspecto que la
   descripcion de una ficha normal, sin duplicar esa regla. */
#info-exoplaneta, #info-satelite { margin-top: 10px; font-size: 11px; line-height: 1.55; color: var(--tinta-media); }
#info-exoplaneta h4, #info-satelite h4 { margin: 0 0 4px; color: var(--cian-claro); font-size: 12px; }
#info-exoplaneta .exo-dato, #info-satelite .exo-dato { color: var(--tinta-tenue); font-size: 9.5px; margin-top: 6px; }

.grupo {
  font-size: 8.5px;
  letter-spacing: 0.2em;
  color: var(--cian-medio);
  margin: 13px 0 5px;
  padding-top: 8px;
  border-top: 1px solid var(--cian-fantasma);
}
.grupo:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.destino {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 5px 7px;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  color: var(--tinta-media);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}

.destino:hover, .destino:focus-visible {
  background: var(--cian-fantasma);
  color: var(--tinta);
  border-left-color: var(--cian-medio);
  outline: none;
}

.destino.activo {
  background: rgba(0, 229, 255, 0.14);
  color: var(--cian-claro);
  border-left-color: var(--cian);
}

.punto {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 7px currentColor;
}

/* =================================================================
   FICHA - los datos entran uno a uno (peticion central de Antonio)
   ================================================================= */

#panel-ficha {
  bottom: 22px; right: 22px;
  width: 312px;
  max-height: 50vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--cian-tenue) transparent;
}

#panel-ficha::-webkit-scrollbar { width: 4px; }
#panel-ficha::-webkit-scrollbar-thumb { background: var(--cian-tenue); }

#ficha-nombre {
  margin: 3px 0 2px;
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 0.16em;
}

#ficha-tipo { font-size: 9.5px; color: var(--cian-medio); letter-spacing: 0.16em; margin-bottom: 11px; }

.descripcion {
  margin: 0 0 13px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--tinta-media);
  padding-left: 9px;
  border-left: 1px solid var(--cian-tenue);
}

.datos { margin: 0; }

/* Cada fila arranca invisible y la anima el JS con su retraso.
   Es lo que produce el efecto de "entran uno a uno". */
.fila-dato {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 11px;
  padding: 5px 0;
  border-bottom: 1px solid var(--cian-fantasma);
  opacity: 0;
  transform: translateX(14px);
}

.fila-dato.dentro {
  animation: filaEntra 0.34s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes filaEntra {
  0%   { opacity: 0; transform: translateX(14px); }
  40%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); }
}

/* Destello breve del valor justo cuando termina de contar */
.fila-dato .valor.recien {
  animation: destelloValor 0.5s ease-out;
}

@keyframes destelloValor {
  0%   { color: #fff; text-shadow: 0 0 12px var(--cian); }
  100% { color: var(--tinta); text-shadow: none; }
}

.fila-dato dt {
  font-size: 9.5px;
  letter-spacing: 0.11em;
  color: var(--cian-medio);
  flex-shrink: 0;
}

.fila-dato dd {
  margin: 0;
  font-size: 12.5px;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  text-align: right;
  letter-spacing: 0.02em;
}

.unidad { color: var(--tinta-tenue); font-size: 10px; margin-left: 3px; }

.marca-calc {
  font-size: 8px;
  color: var(--aviso);
  opacity: 0.8;
  margin-left: 4px;
  vertical-align: 0.25em;
  letter-spacing: 0.06em;
}

.nota-fuente {
  margin-top: 11px;
  padding-top: 8px;
  border-top: 1px solid var(--cian-fantasma);
  font-size: 9px;
  color: var(--tinta-tenue);
  line-height: 1.45;
}

.cerrar {
  position: absolute;
  top: 9px; right: 12px;
  background: none;
  border: none;
  color: var(--cian-medio);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 3px 5px;
  font-family: inherit;
}
.cerrar:hover, .cerrar:focus-visible { color: var(--cian-claro); outline: none; }

/* =================================================================
   Controles -- barra de abajo (VIEW / TIME / DISPLAY)

   Antonio, 6-sep: "el menu de abajo a la izquierda lo quiero con una barra
   que ocupe toda la pantalla con las opciones dentro... vaya como esta
   arriba pero abajo". Antes era una tarjeta flotante en la esquina (306 px,
   clase `.panel.compacto`); ahora es una barra de ancho completo, MISMA
   familia visual que `#barra-superior` (`.barra`) en vez de la tarjeta de
   esquinas cortadas -- por eso ya no lleva `.panel` ni `.compacto` en el
   HTML: esas dos clases traen un borde en angulo y una animacion de barrido
   pensadas para una tarjeta, no para una franja. Los grupos de dentro
   (`.grupo`, `.rejilla-botones`...) no cambian de aspecto, solo cambia el
   contenedor que los envuelve. ================================================================= */
#panel-controles.barra-inferior {
  position: fixed;
  top: auto; bottom: 0; left: 0; right: 0;
  z-index: 12;
  height: 54px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 18px;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  transition: opacity 0.5s, transform 0.5s;
  /* Igual que `.barra` pero con el degradado AL REVES: oscuro pegado al
     borde de abajo (el de la pantalla), transparente hacia arriba (hacia la
     escena) -- si no, quedaria oscuro justo en el borde que toca la escena
     y transparente en el que toca el marco de la ventana, al reves de como
     se lee. */
  background: linear-gradient(0deg,
    rgba(2, 12, 22, 0.94) 0%,
    rgba(2, 12, 22, 0.80) 72%,
    rgba(2, 12, 22, 0) 100%);
  box-shadow: inset 0 1px 0 var(--cian-tenue);
}
#panel-controles.barra-inferior.oculto { opacity: 0; transform: translateY(100%); pointer-events: none; }

/* --- Atajos de la barra de abajo, 10-sep ---
   Ver el aviso largo en index.html: botones directos a lo que antes solo
   vivia dentro de un desplegable. `margin-left: auto` los separa de
   VIEW/TIME/DISPLAY hacia la derecha, aprovechando el hueco vacio en vez de
   apretarse contra ellos. Solo escritorio -- ver el media query de abajo. */
.grupo-atajos { display: flex; align-items: center; gap: 6px; margin-left: auto; }
@media (max-width: 820px) {
  .grupo-atajos { display: none; }
}

.rejilla-botones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-bottom: 11px;
}

/* El boton de idioma es de una palabra corta: ocupa media columna y deja que
   los demas respiren. */
.rejilla-botones #btn-idioma { grid-column: span 1; }

/* ---- REAL TIME: destacado sobre los demas (Antonio, 30-ago) ----
   Es el boton que explica el comportamiento raro de la web (que a ritmo real
   los planetas parezcan quietos), asi que tiene que verse a la primera. Se
   distingue por color propio ambar, ancho doble y un latido lento. */
.rejilla-botones #btn-real {
  grid-column: span 2;
  background: rgba(255, 179, 64, 0.14);
  border-color: rgba(255, 179, 64, 0.55);
  color: var(--aviso);
  font-weight: 500;
  letter-spacing: 0.14em;
  box-shadow: inset 0 0 14px rgba(255, 179, 64, 0.14),
              0 0 10px rgba(255, 179, 64, 0.16);
  animation: latidoReal 3.4s ease-in-out infinite;
}

.rejilla-botones #btn-real:hover,
.rejilla-botones #btn-real:focus-visible {
  background: rgba(255, 179, 64, 0.26);
  border-color: var(--aviso);
  color: #ffdca8;
  animation: none;
}

/* Cuando esta pulsado (simulacion a ritmo real) se queda encendido y quieto:
   el latido solo invita a probarlo, no acompaña al estado activo. */
.rejilla-botones #btn-real.activo {
  background: rgba(255, 179, 64, 0.32);
  border-color: var(--aviso);
  color: #12100a;
  animation: none;
  box-shadow: 0 0 16px rgba(255, 179, 64, 0.45);
}

@keyframes latidoReal {
  0%, 100% { box-shadow: inset 0 0 14px rgba(255, 179, 64, 0.14),
                         0 0 10px rgba(255, 179, 64, 0.16); }
  50%      { box-shadow: inset 0 0 18px rgba(255, 179, 64, 0.26),
                         0 0 18px rgba(255, 179, 64, 0.34); }
}

@media (prefers-reduced-motion: reduce) {
  .rejilla-botones #btn-real { animation: none; }
}

.btn {
  padding: 7px 3px;
  background: rgba(0, 229, 255, 0.06);
  border: 1px solid var(--cian-tenue);
  color: var(--tinta-media);
  font-family: inherit;
  font-size: 9.5px;
  letter-spacing: 0.11em;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.btn:hover, .btn:focus-visible {
  background: rgba(0, 229, 255, 0.15);
  color: var(--cian-claro);
  border-color: var(--cian-medio);
  outline: none;
}

.btn.activo {
  background: rgba(0, 229, 255, 0.2);
  color: var(--cian-claro);
  border-color: var(--cian);
  box-shadow: inset 0 0 12px rgba(0, 229, 255, 0.18);
}

/* ⚠️ Antonio, 4-sep: *"quiero que sea un boton bien grande y que se vea
 * bien"* -- a proposito distinto del resto de la barra (que son todos
 * iguales de chicos, mismo cian, mismo tamaño). Color propio (el mismo
 * naranja de "--aviso" que ya usa "Ver en Amazon", para no inventar un
 * tercer color en la paleta) y un pulso lento para que el ojo lo encuentre
 * sin tener que leer toda la barra. */
.btn-destacado {
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--aviso);
  background: rgba(255, 179, 64, 0.12);
  border: 1px solid rgba(255, 179, 64, 0.55);
  animation: destacado-pulso 3.2s ease-in-out infinite;
}
.btn-destacado:hover, .btn-destacado:focus-visible {
  color: #1a1206;
  background: var(--aviso);
  border-color: var(--aviso);
  outline: none;
}
@keyframes destacado-pulso {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 179, 64, 0); }
  50%      { box-shadow: 0 0 14px rgba(255, 179, 64, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-destacado { animation: none; }
}

/* --- Linea de tiempo arrastrable (pregunta 77) --- */
.bloque-control { margin-bottom: 11px; }

.cabecera-control {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--cian-medio);
}

.cabecera-control b { color: var(--tinta); font-weight: 400; font-size: 10.5px; }

input[type="range"] {
  width: 100%;
  height: 2px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--cian-tenue);
  outline: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 3px;
  height: 15px;
  background: var(--cian);
  cursor: pointer;
  box-shadow: 0 0 9px var(--cian);
  border: none;
  border-radius: 0;
}

input[type="range"]::-moz-range-thumb {
  width: 3px;
  height: 15px;
  background: var(--cian);
  cursor: pointer;
  box-shadow: 0 0 9px var(--cian);
  border: none;
  border-radius: 0;
}

input[type="range"]:focus-visible { box-shadow: 0 0 0 2px var(--cian-tenue); }

.marcas-tiempo {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  /* 8 px eran los extremos del deslizador de tiempo, que es donde se lee
     cuanto corre la simulacion. Subido a 9 en la auditoria del 1-sep. */
  font-size: 9px;
  color: var(--tinta-tenue);
  letter-spacing: 0.08em;
}

.fila-fecha { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; }
.fila-fecha label { font-size: 9px; letter-spacing: 0.14em; color: var(--cian-medio); flex-shrink: 0; }

input[type="date"] {
  flex: 1;
  background: rgba(0, 229, 255, 0.06);
  border: 1px solid var(--cian-tenue);
  color: var(--tinta);
  font-family: inherit;
  font-size: 10.5px;
  padding: 4px 6px;
  color-scheme: dark;
}
input[type="date"]:focus-visible { outline: none; border-color: var(--cian); }

.rejilla-interruptores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 9px;
}

.interruptor {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  letter-spacing: 0.09em;
  color: var(--tinta-media);
  cursor: pointer;
  user-select: none;
}
.interruptor:hover { color: var(--tinta); }
.interruptor input { accent-color: var(--cian); cursor: pointer; margin: 0; width: 11px; height: 11px; }

.aviso-escala {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--cian-fantasma);
  font-size: 9.5px;
  line-height: 1.45;
  color: var(--tinta-tenue);
}
.aviso-escala b { color: var(--aviso); font-weight: 400; }
.aviso-escala.real { color: var(--aviso); }

/* =================================================================
   Etiquetas y anillos sobre los cuerpos
   ================================================================= */

#capa-etiquetas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
  transition: opacity 0.3s;
}

/* Anillo con datos girando alrededor del cuerpo señalado (pregunta 6) */
.marcador {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  will-change: transform;
}

.marcador .aro {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--cian-medio);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.25);
}

.marcador .aro::before,
.marcador .aro::after {
  content: "";
  position: absolute;
  background: var(--cian);
  box-shadow: 0 0 6px var(--cian);
}
.marcador .aro::before { top: -3px; left: 50%; width: 1px; height: 7px; transform: translateX(-50%); }
.marcador .aro::after  { bottom: -3px; left: 50%; width: 1px; height: 7px; transform: translateX(-50%); }

.marcador .aro-gira { animation: giraAro 14s linear infinite; }
@keyframes giraAro { to { transform: translate(-50%, -50%) rotate(360deg); } }

.marcador .rotulo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--cian-claro);
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 229, 255, 0.5);
}

.marcador .subrotulo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  color: var(--tinta-tenue);
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.95);
}

/* Linea que conecta el cuerpo con su ficha (pregunta 11) */
#conector { position: fixed; inset: 0; pointer-events: none; z-index: 5; }

/* =================================================================
   Pista de controles
   ================================================================= */

/* La pista se solapaba con el panel de controles, que ha crecido al añadirle
   botones y el volumen. Se mueve ARRIBA del todo: ahi no hay nada que tapar y
   se lee igual de bien. */
#pista {
  position: fixed;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--cian-medio);
  background: var(--vidrio);
  border: 1px solid var(--cian-tenue);
  padding: 7px 20px;
  white-space: nowrap;
  transition: opacity 0.8s;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}

/* =================================================================
   ARRANQUE - "como un sistema encendiendose" (pregunta 16)
   ================================================================= */

#arranque {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--fondo);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1s;
}

#arranque.fuera { opacity: 0; pointer-events: none; }

.arranque-caja { width: min(430px, 84vw); }

.arranque-marca {
  /* "SOLAR SYSTEM LIVE" es mas largo que el nombre anterior: se reduce el
     espaciado entre letras para que siga cabiendo en una linea en movil. */
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.38em;
  color: var(--cian);
  text-shadow: 0 0 14px rgba(0, 229, 255, 0.65);
  margin-bottom: 30px;
  text-indent: 0.38em;
  text-align: center;
}

.arranque-lineas { min-height: 132px; margin-bottom: 20px; }

.arranque-linea {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--tinta-tenue);
  padding: 3px 0;
  opacity: 0;
}

.arranque-linea.visible { animation: lineaArranque 0.3s ease-out forwards; }

@keyframes lineaArranque {
  from { opacity: 0; transform: translateX(-9px); }
  to   { opacity: 1; transform: none; }
}

.arranque-linea .estado { color: var(--ok); font-size: 9px; letter-spacing: 0.16em; }

.arranque-barra { height: 1px; background: var(--cian-tenue); overflow: hidden; }
.arranque-progreso { height: 100%; width: 0%; background: var(--cian); box-shadow: 0 0 10px var(--cian); transition: width 0.35s; }

.arranque-pie {
  margin-top: 22px;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--tinta-tenue);
  text-align: center;
  line-height: 1.7;
}

/* =================================================================
   Error
   ================================================================= */

#aviso-error {
  position: fixed;
  top: 22px; left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  max-width: 540px;
  background: rgba(30, 4, 4, 0.96);
  border: 1px solid var(--alerta);
  padding: 13px 17px;
  color: #ffd9d4;
  font-size: 11.5px;
  line-height: 1.55;
}

/* =================================================================
   Utilidades
   ================================================================= */

.oculto { display: none !important; }

/* Vibracion de la interfaz al acelerar mucho el tiempo (pregunta 14) */
body.temblor .panel { animation: temblar 0.09s linear infinite; }

@keyframes temblar {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(0.6px, -0.4px); }
  50%  { transform: translate(-0.5px, 0.5px); }
  75%  { transform: translate(0.4px, 0.6px); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  #grano { animation: none; }
  body.temblor .panel { animation: none; }
  .marcador .aro-gira { animation: none; }
}

/* =================================================================
   Movil
   ================================================================= */




/* =================================================================
   Fuente de las imagenes de superficie.
   Aparece solo al acercarse a Tierra, Marte o Luna, y dice de que
   mision salen las imagenes que estas viendo y a que resolucion.
   ================================================================= */

#aviso-superficie {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  background: var(--vidrio);
  border: 1px solid var(--cian-tenue);
  padding: 6px 16px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.11em;
  color: var(--tinta-tenue);
  white-space: nowrap;
  pointer-events: none;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

#aviso-superficie b { color: var(--cian-medio); font-weight: 400; }

body.interfaz-oculta #aviso-superficie { opacity: 0; }

@media (max-width: 820px) {
  #aviso-superficie { display: none; }
}

/* Aviso de giro ralentizado: es informativo, no una alarma, asi que va en
   ambar (aviso) y no en rojo (error). */
.aviso-caja.suave {
  background: rgba(255, 179, 64, 0.09);
  border-left-color: var(--aviso);
  color: var(--aviso);
  font-size: 9px;
  line-height: 1.35;
  letter-spacing: 0.04em;
}

/* ==========================================================================
 * VISITA GUIADA
 *
 * El cartel va abajo y CENTRADO, a proposito: el panel de control ocupa la
 * esquina inferior izquierda y la ficha del cuerpo la derecha, y con la visita
 * en marcha los tres estan abiertos a la vez. Cualquier otra posicion los
 * solaparia.
 * ========================================================================== */

.btn-tour {
  /* Ocupaba la fila entera cuando se llamaba "GUIDED TOUR" y no cabia al lado
     de nada. Con la etiqueta corta cabe en su columna como los demas, y la
     fila de VISTA queda en una sola linea. */
  grid-column: auto;
  border-color: var(--cian-medio) !important;
  color: var(--cian-claro) !important;
  letter-spacing: 0.18em;
}
.btn-tour:hover { background: rgba(0, 229, 255, 0.14) !important; }
.btn-tour.activo {
  background: rgba(0, 229, 255, 0.18) !important;
  border-color: var(--cian) !important;
}

#cartel-tour {
  position: fixed;
  left: 50%; bottom: 3vh;
  transform: translateX(-50%);
  width: min(46rem, 88vw);
  padding: 1rem 1.2rem 1.1rem;
  background: rgba(2, 10, 20, 0.90);
  border: 1px solid var(--cian-tenue);
  border-radius: 3px;
  backdrop-filter: blur(9px);
  z-index: 40;
}
#cartel-tour.oculto { display: none; }

.tour-cabecera {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.55rem;
}
#tour-paso {
  font-size: 0.6rem; letter-spacing: 0.22em;
  color: var(--tinta-tenue);
  font-variant-numeric: tabular-nums;
}
.tour-botones { display: flex; gap: 0.3rem; }
.tour-btn {
  background: transparent; border: 1px solid var(--cian-tenue);
  color: var(--cian-claro); cursor: pointer;
  width: 1.8rem; height: 1.55rem; line-height: 1;
  font-size: 0.62rem; border-radius: 2px;
  transition: background 0.15s;
}
.tour-btn:hover { background: rgba(0, 229, 255, 0.16); }
.tour-btn:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }

#tour-titulo {
  margin: 0 0 0.42rem;
  font-size: clamp(1.05rem, 2.1vw, 1.5rem);
  letter-spacing: 0.1em;
  color: var(--cian-claro);
  font-weight: 400;
  text-wrap: balance;
}
#tour-texto {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.75;
  color: var(--tinta);
  /* ~65 caracteres por linea es lo que mejor se lee de un tiron; mas ancho y
     el ojo pierde el renglon al volver a la izquierda. */
  max-width: 62ch;
}
#tour-fuente {
  margin-top: 0.5rem;
  font-size: 0.55rem; letter-spacing: 0.08em;
  color: var(--tinta-tenue);
}
#tour-fuente:empty { display: none; }

.tour-barra {
  margin-top: 0.7rem; height: 1px;
  background: rgba(0, 229, 255, 0.14);
}
#tour-avance {
  height: 100%; width: 0%;
  background: var(--cian);
}

@media (max-width: 760px) {
  #cartel-tour { width: 94vw; bottom: 1.2vh; padding: 0.8rem 0.9rem; }
  #tour-texto { font-size: 0.7rem; line-height: 1.65; }
}

/* Quien haya pedido menos animacion no recibe la barra corriendo sola. */
@media (prefers-reduced-motion: reduce) {
  #tour-avance { transition: none !important; }
}

/* Nota del mirador en el modo cielo: donde estas y por que ese sitio. */
.nota-cielo {
  margin: 0.55rem 0 0;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--tinta-tenue);
}
.nota-cielo b { color: var(--cian-claro); font-weight: 600; }

/* =================================================================
   BARRA SUPERIOR

   ⚠️ Antonio, 31-ago: "quiero que se vea como una web de verdad; la parte de
   arriba esta desaprovechada y los menus empiezan a ser demasiado grandes".

   Las dos quejas eran el mismo problema. Cada cosa nueva se iba amontonando en
   el panel de abajo a la izquierda —nueve botones, cuatro bloques de control,
   seis casillas— mientras la franja de arriba, que ocupa el ancho ENTERO de la
   pantalla, solo llevaba una linea de ayuda.

   Esta barra se lleva lo que cualquier web pone arriba: la marca, la hora y
   las acciones de uso constante. El panel de la izquierda se queda solo con lo
   que de verdad es un ajuste.
   ================================================================= */
.barra {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 12;
  height: 54px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 18px;
  background: linear-gradient(180deg,
    rgba(2, 12, 22, 0.94) 0%,
    rgba(2, 12, 22, 0.80) 72%,
    rgba(2, 12, 22, 0) 100%);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  /* Una sola linea de acento abajo: es lo que separa "barra" de "caja". */
  box-shadow: inset 0 -1px 0 var(--cian-tenue);
  transition: opacity 0.5s, transform 0.5s;
}
.barra.oculto { opacity: 0; transform: translateY(-100%); pointer-events: none; }

/* --- La marca --- */
.barra-marca { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.marca-punto {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cian);
  box-shadow: 0 0 10px var(--cian), 0 0 22px rgba(0, 229, 255, 0.5);
  /* Late despacio: la señal de que el sistema esta vivo. */
  animation: latido 3.4s ease-in-out infinite;
}
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.marca-texto {
  font-size: 11px; letter-spacing: 0.28em;
  color: var(--tinta-media); white-space: nowrap;
}
.marca-texto b { color: var(--cian-claro); font-weight: 600; margin-left: 0.45em; }

/* --- El reloj, en linea --- */
.barra-reloj {
  display: flex; align-items: baseline; gap: 14px;
  flex: 1 1 auto; min-width: 0;
  /* ⚠️ RED DE SEGURIDAD CONTRA EL SOLAPE.
   *
   * Todo lo de dentro lleva `white-space: nowrap` —el reloj no puede partirse
   * en dos lineas— pero el contenedor si puede encogerse (`min-width: 0`). El
   * resultado era que a anchos medios el texto SE SALIA por la derecha y se
   * pintaba ENCIMA de los botones PAUSA y AHORA: se leia "REALTIME NOW"
   * superpuesto a "TIME RATE". Visto a 1200 px en el recorrido del 3-sep.
   *
   * Con esto, si algun dia vuelve a no caber, se recorta limpio por su lado en
   * vez de invadir al vecino. Y para que no llegue a recortarse, la regla de
   * abajo esconde antes la parte prescindible. */
  overflow: hidden;
}

.reloj-fecha {
  font-size: 12px; letter-spacing: 0.1em; color: var(--tinta-media);
  white-space: nowrap;
}
.reloj-hora {
  font-size: 20px; letter-spacing: 0.09em; color: var(--cian-claro);
  /* Cifras de ancho fijo: sin esto el reloj BAILA cada segundo, porque el 1
     es mas estrecho que el 8 y toda la linea se recoloca. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.reloj-vel {
  display: flex; align-items: baseline; gap: 7px;
  padding-left: 14px; border-left: 1px solid var(--cian-fantasma);
  white-space: nowrap;
}
.reloj-vel i { font-style: normal; font-size: 9px; letter-spacing: 0.16em; color: var(--tinta-tenue); }
.reloj-vel b { font-size: 12px; color: var(--tinta); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Por debajo de 1400 px no caben el reloj entero y los siete botones. Lo
 * primero que sobra es la etiqueta de la velocidad, porque ese mismo dato se
 * ve —mas grande y con su deslizador— en el panel de ajustes. El reloj y la
 * fecha se quedan: eso no esta en ningun otro sitio.
 *
 * ⚠️ VA DESPUES DE `.reloj-vel`, Y ESO NO ES UN DETALLE. Se puso antes y no
 * hacia nada: a igual especificidad gana la ultima regla del fichero, asi que
 * el `display: flex` de arriba anulaba este `display: none` aunque estuviera
 * dentro de una media query. Medido a 1200 px: la etiqueta seguia saliendo,
 * cortada. Es la cuarta vez que esta cascada muerde en este proyecto. */
@media (max-width: 1400px) {
  .reloj-vel { display: none; }
}

/* Y un escalon mas: por debajo de 1150 px tampoco cabe el rotulo "TU RELOJ".
 * Se quita la etiqueta, no el reloj — sobran 90 px y la hora deja de salir
 * cortada ("01:19:"), que es como se veia a 1100 px. */
@media (max-width: 1150px) {
  .reloj-que { display: none; }
}

/* --- Las acciones --- */
.barra-acciones { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.barra-acciones .btn { margin: 0; padding: 7px 11px; font-size: 9.5px; }
.barra-sep { width: 1px; height: 20px; background: var(--cian-fantasma); margin: 0 5px; }

/* =================================================================
   SUBMENUS -- de la barra de arriba Y de la de abajo

   Antonio, 6-sep: "en el boton de la fusion e las galaxias hay que poner
   simulaciones y hacer un submenu... habra que hacer barios submenus en
   la parte de arriba porque se empiezan a tapar info". Cada boton nuevo
   que se añadia a `.barra-acciones` (sin wrap a ancho de escritorio, ver
   arriba) se sumaba en linea recta; con 13 sueltos ya se apretaba contra
   el reloj. Los que se abren poco (secciones aparte) se agrupan aqui; los
   de uso constante o ya destacados (§ btn-destacado) se quedan sueltos.

   Mismo dia, mismo patron: "el menu de abajo... vaya como esta arriba pero
   abajo" y "el menu de los planetas con boton y submenus, porque estorba la
   vision". `#panel-controles` (VIEW/TIME/DISPLAY) y el boton CUERPOS
   reutilizan estas mismas clases -- un solo sistema de desplegables para
   toda la web, no uno distinto por barra. ================================================================= */
.menu-desplegable { position: relative; flex: 0 0 auto; }
.btn-menu { display: inline-flex; align-items: center; gap: 4px; }
/* La flechita gira al abrir -- misma idea que un <select>, sin JS de mas:
   solo una clase que activa/desactiva el propio boton. */
.btn-menu::after {
  content: "▾"; font-size: 8px; transition: transform 0.15s;
}
.btn-menu.abierto::after { transform: rotate(180deg); }

.menu-lista {
  position: absolute; top: calc(100% + 6px); left: 0;
  z-index: 20;
  display: flex; flex-direction: column; gap: 4px;
  min-width: max-content;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 6px;
  background: var(--vidrio);
  border: 1px solid var(--cian-tenue);
  backdrop-filter: blur(10px) saturate(1.25);
  -webkit-backdrop-filter: blur(10px) saturate(1.25);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.menu-lista.oculto { display: none; }
/* La barra de ABAJO abre hacia ARRIBA -- un desplegable que se abriera hacia
   abajo desde el borde inferior de la pantalla saldria fuera de la
   ventana. */
.menu-lista.arriba {
  top: auto; bottom: calc(100% + 6px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px));
}
/* Solo los botones DIRECTOS del desplegable van en columna a ancho completo
   (GALAXY MERGER, SHOP, BLOG...). Con selector de descendiente en vez de
   hijo directo, esto tambien pillaba los botones SYSTEM/TOP/TOUR o
   EARTH/MARS/MOON de dentro de `#panel-controles` -- que ya tienen su
   propia rejilla de 3 columnas (`.rejilla-botones`) -- y se los aplastaba a
   ancho completo, uno debajo de otro, rompiendo esa rejilla. */
.menu-lista > .btn { width: 100%; text-align: left; white-space: nowrap; }

/* --- Avisos, bajo la barra --- */
#avisos {
  position: fixed; top: 62px; left: 18px;
  z-index: 11; max-width: 380px;
  display: flex; flex-direction: column; gap: 6px;
  pointer-events: none;
}

/* =================================================================
   PANEL COMPACTO

   Los controles pasan de ser una lista larga a GRUPOS con titulo. Antes eran
   nueve botones seguidos de cuatro bloques sin separacion: una lista plana en
   la que costaba encontrar nada porque nada indicaba de que iba cada cosa.
   ================================================================= */
.grupo { padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--cian-fantasma); }
.grupo:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.grupo.sin-linea { border-top: 0; padding-top: 4px; }

.grupo-tit {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 8.5px; letter-spacing: 0.2em;
  color: var(--tinta-tenue);
  margin-bottom: 7px;
}
.grupo-tit b {
  font-size: 11px; letter-spacing: 0.06em; color: var(--cian-claro);
  font-weight: 500; font-variant-numeric: tabular-nums;
}

/* ⚠️ Antes escritas como `#panel-controles.compacto .xxx`: la clase
   `.compacto` desaparecio el 6-sep al convertir la tarjeta en la barra de
   abajo (ver arriba), asi que estas reglas se quedaban sin aplicarse a
   nada. Mismo contenido, solo sin esa clase en el selector. */
#panel-controles .rejilla-botones { margin-bottom: 0; gap: 4px; }
#panel-controles .btn { padding: 7px 4px; font-size: 9px; }
#panel-controles .btn.ancho { width: 100%; margin-top: 5px; }
#panel-controles .marcas-tiempo { margin-top: 4px; }
#panel-controles .fila-fecha { margin-top: 9px; }

/* Las casillas, en dos columnas y mas juntas: son seis y ocupaban media
   pantalla puestas en fila. */
#panel-controles .rejilla-interruptores {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px;
}
#panel-controles .interruptor { font-size: 10px; letter-spacing: 0.06em; }
.nota-escala {
  margin: 9px 0 0; font-size: 10px; line-height: 1.55;
  color: var(--tinta-tenue);
}

/* =================================================================
   PANEL DE FUENTES

   ⚠️ No es decoracion: tres de las licencias de este proyecto (CC BY 4.0)
   EXIGEN atribucion para poder usar el material. Hasta hoy las fuentes solo
   estaban en ficheros .md del repositorio, que nadie que use la web ve.
   ================================================================= */
#panel-fuentes {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 40px));
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  z-index: 30;
  padding: 20px 22px 18px;
}
#panel-fuentes.oculto { display: none; }

.fuentes-lista { margin-top: 12px; }
.fuente {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 14px;
  padding: 9px 0;
  border-top: 1px solid var(--cian-fantasma);
}
.fuente:first-child { border-top: 0; }
.fuente b {
  grid-column: 1; font-size: 11.5px; color: var(--cian-claro);
  letter-spacing: 0.06em; font-weight: 600;
}
.fuente i {
  grid-column: 2; grid-row: 1 / span 2;
  align-self: center;
  font-style: normal; font-size: 8.5px; letter-spacing: 0.1em;
  color: var(--tinta-tenue); white-space: nowrap;
}
.fuente span {
  grid-column: 1; font-size: 10px; line-height: 1.5;
  color: var(--tinta-media);
}
.fuentes-nota {
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--cian-fantasma);
  font-size: 9.5px; line-height: 1.6; color: var(--tinta-tenue);
}
.fuentes-nota b { color: var(--cian-claro); font-weight: 600; }

/* Nombre del reloj de la barra.
   Sin el, su fecha y la del campo de abajo se leen como una contradiccion
   cuando en realidad miden cosas distintas: aqui TU hora, alli la fecha que
   estan viviendo los planetas. */
.reloj-que {
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--tinta-tenue);
  margin-right: 8px;
  white-space: nowrap;
}

/* El enlace a la presentacion. Es un <a>, no un <button>, para que se pueda
   abrir en otra pestaña y para que un buscador lo siga. Se le da el mismo
   aspecto que a los botones y un toque de color: es la unica cosa de la barra
   que lleva a otro sitio. */
#btn-toma {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  border-color: var(--cian-medio);
  color: var(--cian-claro);
}
#btn-toma:hover { background: var(--cian-fantasma); }

/* =================================================================
   DESDE DONDE SE MIRA EL CIELO

   La latitud es lo que de verdad cambia lo que ves: desde Madrid no se ve la
   Cruz del Sur y desde Sídney no se ve la Osa Mayor. Por eso el selector va
   pegado a los botones de mundo y no escondido en un menú.
   ================================================================= */
#bloque-lugar { margin: 8px 0 4px; }
#bloque-lugar.oculto { display: none; }

#lugar-lista {
  width: 100%;
  background: var(--vidrio);
  border: 1px solid var(--cian-tenue);
  color: var(--tinta-media);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 6px 7px;
  outline: none;
}
#lugar-lista:focus-visible { border-color: var(--cian); }

.fila-lugar {
  display: grid;
  grid-template-columns: 1fr 52px 52px 34px;
  gap: 4px;
  margin-top: 5px;
}
.fila-lugar .btn { font-size: 8.5px; padding: 5px 4px; }
.fila-lugar input {
  background: var(--vidrio);
  border: 1px solid var(--cian-fantasma);
  color: var(--tinta-media);
  font-family: var(--mono);
  font-size: 9.5px;
  padding: 4px 5px;
  text-align: center;
  outline: none;
  /* Sin las flechitas: ocupan sitio y aquí no hacen falta. */
  -moz-appearance: textfield;
}
.fila-lugar input::-webkit-outer-spin-button,
.fila-lugar input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fila-lugar input:focus-visible { border-color: var(--cian-medio); }

/* =================================================================
   DESDE DONDE SE MIRA EL CIELO

   La latitud es lo que de verdad cambia lo que ves: desde Madrid no se ve la
   Cruz del Sur y desde Sídney no se ve la Osa Mayor. Por eso el selector va
   pegado a los botones de mundo y no escondido en un menú.
   ================================================================= */
#bloque-lugar { margin: 8px 0 4px; }
#bloque-lugar.oculto { display: none; }

#lugar-lista {
  width: 100%;
  background: var(--vidrio);
  border: 1px solid var(--cian-tenue);
  color: var(--tinta-media);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 6px 7px;
  outline: none;
}
#lugar-lista:focus-visible { border-color: var(--cian); }

.fila-lugar {
  display: grid;
  grid-template-columns: 1fr 52px 52px 34px;
  gap: 4px;
  margin-top: 5px;
}
.fila-lugar .btn { font-size: 8.5px; padding: 5px 4px; }
.fila-lugar input {
  background: var(--vidrio);
  border: 1px solid var(--cian-fantasma);
  color: var(--tinta-media);
  font-family: var(--mono);
  font-size: 9.5px;
  padding: 4px 5px;
  text-align: center;
  outline: none;
  /* Sin las flechitas: ocupan sitio y aquí no hacen falta. */
  -moz-appearance: textfield;
}
.fila-lugar input::-webkit-outer-spin-button,
.fila-lugar input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fila-lugar input:focus-visible { border-color: var(--cian-medio); }

/* =================================================================
   QUE CONSTELACIONES SE VEN DESDE AQUI

   Depende SOLO de la latitud, y es de lo mejor que puede enseñar esta vista:
   desde Madrid hay nueve constelaciones que no se ven jamas, por mucho que se
   espere. Va pegado al selector de sitio porque es su consecuencia directa.
   ================================================================= */
#visibles { margin-top: 8px; }
#visibles.oculto { display: none; }

.visibles-cab {
  width: 100%;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--cian-fantasma);
  color: var(--tinta-tenue);
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 8px 0 6px;
  cursor: pointer;
}
.visibles-cab:hover { color: var(--tinta-media); }
.visibles-cab b { color: var(--cian-claro); font-weight: 600; }

.visibles-lista {
  font-size: 9px;
  line-height: 1.65;
  color: var(--tinta-tenue);
  padding-bottom: 4px;
  max-height: 30vh;
  overflow-y: auto;
}
.visibles-lista.oculto { display: none; }
.visibles-lista h4 {
  margin: 6px 0 2px;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--cian-medio);
}
.visibles-lista p { margin: 0; }

/* =================================================================
   QUE CIELO TIENES ENCIMA

   Antonio, 1-sep: "pon información de eso en la web cuando miren los cielos".
   Va justo debajo del sitio elegido, porque es su consecuencia directa: cambias
   de sitio y cambian estos números delante de ti.
   ================================================================= */
#informe-cielo {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--cian-fantasma);
  font-size: 9.5px;
  line-height: 1.7;
  color: var(--tinta-tenue);
}
#informe-cielo.oculto { display: none; }

.cielo-calidad {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 3px;
}
.cielo-calidad b {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--cian-claro);
  font-weight: 600;
}
.cielo-calidad i {
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  color: var(--tinta-tenue);
}

/* La barra: cuanto cielo se ve aqui, de 0 a lo mejor que hay en la Tierra.
   Un numero se lee; una barra se COMPARA de un vistazo. */
.cielo-barra {
  height: 3px;
  background: rgba(255,255,255,0.08);
  margin: 5px 0 7px;
  overflow: hidden;
}
.cielo-barra i {
  display: block;
  height: 100%;
  background: var(--cian);
  box-shadow: 0 0 8px var(--cian);
  transition: width 0.6s ease;
}

#informe-cielo .dato { color: var(--tinta-media); }
#informe-cielo .dato b { color: var(--cian-claro); font-weight: 600; }
#informe-cielo .compara {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--cian-fantasma);
  font-size: 9px;
  color: var(--tinta-tenue);
}
#informe-cielo .compara b { color: var(--tinta-media); font-weight: 600; }

/* =================================================================
   MOVIL
   =================================================================

   ⚠️ Este bloque se rehizo entero el 1-sep. El anterior colocaba
   `#panel-tiempo`, que dejo de existir cuando se puso la barra superior: la
   barra nueva se quedo sin ninguna regla para pantallas pequeñas y en un
   telefono de 390 px se solapaba consigo misma, mientras el panel de
   controles ocupaba 804 px de 844 de alto. El sistema solar no se veia.

   La idea es la contraria a la de escritorio: en un telefono NO caben dos
   paneles y la escena a la vez, asi que no se intenta. La pantalla es para el
   sistema solar; los paneles se abren cuando se piden, uno cada vez.
   ================================================================= */
@media (max-width: 820px) {
  :root { --corte: 10px; }
  body { font-size: 12px; }

  /* --- La barra: en dos filas, no apretada en una --- */
  #barra-superior {
    flex-wrap: wrap;
    height: auto;
    padding: 7px 10px 8px;
    gap: 5px 10px;
    row-gap: 6px;
  }
  .barra-marca { font-size: 11px; letter-spacing: 0.14em; }
  /* El reloj baja a su propia fila y ocupa el ancho: es lo que mas texto
     lleva, y arriba peleaba con la marca y con los botones. */
  .barra-reloj {
    order: 3; width: 100%;
    justify-content: flex-start;
    gap: 8px; font-size: 11px;
  }
  /* ⚠️ La fila de botones TIENE que poder partirse. Sin `flex-wrap` se salia
     por la derecha y el ultimo boton (el del idioma) quedaba cortado a la
     mitad — visto en la captura de un movil de 390 px, no deducido. */
  .barra-acciones {
    margin-left: 0; gap: 4px;
    flex-wrap: wrap;
    order: 2; width: 100%;
  }
  .barra-acciones .btn { font-size: 8.5px; padding: 5px 7px; }
  .barra-sep { display: none; }
  /* Estos tres caben en el panel: arriba solo lo que se usa a cada rato. */
  #btn-ahora, #btn-real, #btn-sonido { display: none; }
  /* La velocidad tambien esta en el panel de ajustes, con su deslizador al
     lado. Repetirla aqui obligaba a la fila del reloj a salirse. */
  .reloj-vel { display: none; }

  /* --- CUERPOS: hoja que sube desde abajo --- ⚠️ `panel-controles` YA NO
     entra aqui: dejo de ser un panel que se abre/cierra el 6-sep (ver el
     bloque grande junto a `.barra-inferior`, mas abajo) -- ahora es una
     barra siempre visible, en cualquier ancho, como `#barra-superior`. */
  #panel-destinos {
    top: auto; bottom: 0; left: 0; right: 0;
    width: auto; margin: 0;
    max-height: 52vh;
    overflow-y: auto;
    border-radius: 0;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  }
  #panel-ficha {
    top: auto; bottom: 0; right: 0; left: 0;
    width: auto; max-height: 58vh;
  }
  #panel-fuentes { max-height: 74vh; }

  /* --- Los avisos, debajo de la barra y sin tapar la escena --- */
  #avisos {
    top: auto; left: 8px; right: 8px;
    max-width: none;
  }
  .aviso-caja { font-size: 9.5px; white-space: normal; }

  /* La pista habla de raton y de rueda: en un movil no aplica ni una palabra
     de ella, asi que estorbaria en vez de ayudar. */
  #pista { display: none; }

  #reticula { background-size: 40px 40px; }
}


/* ============ CREDITOS DE LAS FOTOS DE GALAXIAS ============
 *
 * Se abre al encender las galaxias. No es un extra: la licencia de ESA/Hubble,
 * ESO y NOIRLab permite usar las fotos gratis —incluso para vender— A CAMBIO
 * de que el credito se vea junto a la imagen. Esconderlo seria incumplirla.
 *
 * Va abajo a la izquierda y con scroll propio: son once creditos, algunos de
 * cuatro lineas, y no pueden empujar el resto de la interfaz. */

/* Antonio, 6-sep: "los botones de musica y efecto que estan arriba quitalos
 * ya tenemos el volumen en el panel de abajo". Se ocultan por CSS en vez de
 * borrarlos del HTML: el JS los referencia en varios sitios (el interruptor
 * de encender/apagar, aparte del volumen), y quitarlos del DOM habria hecho
 * falta desenredar todas esas referencias sin necesidad -- los deslizadores
 * de volumen del panel de abajo ya cubren lo mismo (a 0% equivale a apagado). */
#btn-sonido, #btn-musica { display: none !important; }

/* ============ FUSION VIA LACTEA - ANDROMEDA ============
 * Mismo lenguaje visual que #creditos-galaxias (cristal oscuro, letra
 * pequeña), pero arriba: la escena se ve entera detras, y el panel de
 * creditos de las galaxias de fondo (si estuvieran encendidas) sigue
 * teniendo su sitio abajo sin pisarse. */
#panel-fusion {
  position: fixed;
  top: 78px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  width: min(520px, calc(100vw - 60px));
  background: rgba(8, 10, 20, .78);
  border: 1px solid rgba(160, 180, 255, .18);
  border-radius: 10px;
  padding: .85rem 1.1rem 1rem;
  font-size: .74rem;
  line-height: 1.45;
  color: #c3cbe6;
  backdrop-filter: blur(6px);
}
#panel-fusion h3 {
  margin: 0 0 .3rem;
  font-size: .95rem;
  color: #eef2ff;
  letter-spacing: .02em;
}
#panel-fusion .fus-fase {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #9ab6e8;
  margin-bottom: .5rem;
}
#panel-fusion input[type="range"] { width: 100%; margin: 0 0 .6rem; }
#panel-fusion .fus-dato { margin: 0 0 .35rem; color: #dfe6f8; }
#panel-fusion .fus-dato b { color: #ffd479; }
#panel-fusion .fus-aviso {
  margin: .5rem 0 .5rem;
  padding: .45rem .6rem;
  border-left: 2px solid rgba(224, 178, 92, .55);
  background: rgba(224, 178, 92, .08);
  color: #e3d3a8;
  font-size: .70rem;
  line-height: 1.5;
}
#panel-fusion .fus-fuente { margin: 0; color: #7d88a4; font-size: .62rem; }
#cerrar-fusion {
  position: absolute; top: 6px; right: 8px;
  background: none; border: 0; cursor: pointer;
  color: #7d88a4; font-size: 1.2rem; line-height: 1;
}
#cerrar-fusion:hover { color: #dfe6f8; }
@media (max-width: 820px) {
  #panel-fusion { top: auto; bottom: 96px; font-size: .68rem; }
}

#creditos-galaxias {
  /* ⚠️ ABAJO A LA DERECHA, NO A LA IZQUIERDA.
   *
   * El primer sitio fue abajo a la izquierda y TAPABA los interruptores
   * (`#panel-controles` vive en `bottom: 22px; left: 22px`). Lo encontro la
   * prueba automatica al intentar marcar la casilla de las constelaciones:
   * "el panel de creditos intercepta el clic". A una persona le habria pasado
   * exactamente lo mismo, solo que sin decirlo.
   *
   * La derecha tampoco valia: ahi esta `#panel-ficha` (abajo) y
   * `#panel-destinos` (arriba). Las dos esquinas de abajo estan ocupadas, asi
   * que va CENTRADO abajo, que es el unico hueco libre de la interfaz. */
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  z-index: 40;
  width: min(560px, calc(100vw - 700px));
  min-width: 320px;
  /* ⚠️ Bajado de 46vh a 30vh despues de MIRAR una captura: ocupaba media
   * pantalla de cielo. El credito tiene que verse —lo exige la licencia— pero
   * verse no es taparlo todo: con esta altura entran tres creditos y el resto
   * se lee bajando, sin comerse la vista. */
  max-height: 30vh;
  overflow-y: auto;
  padding: .7rem .9rem .8rem;
  border-radius: 10px;
  background: rgba(8, 11, 22, .88);
  border: 1px solid rgba(120, 150, 210, .28);
  backdrop-filter: blur(6px);
  font-size: .68rem;
  line-height: 1.4;
  color: #b9c2da;
}
#creditos-galaxias h4 {
  margin: 0 0 .25rem;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #dfe6f8;
}
#creditos-galaxias p { margin: 0 0 .5rem; color: #8f9ab6; }
#creditos-galaxias ul { margin: 0; padding: 0; list-style: none; }
#creditos-galaxias li { margin: 0 0 .4rem; }
#creditos-galaxias b { color: #dfe6f8; font-weight: 600; }
#creditos-galaxias a { color: #9ab6e8; }
#cerrar-creditos {
  position: absolute; top: 4px; right: 6px;
  background: none; border: 0; cursor: pointer;
  color: #7d88a4; font-size: 1.1rem; line-height: 1;
}
#cerrar-creditos:hover { color: #dfe6f8; }
@media (max-width: 820px) {
  /* En movil la interfaz ya va justa: los creditos se quedan pero mas
   * pequenos y mas bajos, sin tapar los botones de abajo. */
  #creditos-galaxias {
    width: 92vw; min-width: 0; max-height: 26vh; bottom: 96px; font-size: .68rem;
  }
}


/* Con la vista limpia (el boton SOLO ESPACIO / tecla H) tambien se van los
 * creditos: si no hay interfaz, tampoco hay galaxias que acreditar en pantalla
 * — es el mismo cielo desnudo que pidio Antonio el 1-sep. */
body.interfaz-oculta #creditos-galaxias { display: none !important; }


/* El credito de la foto del suelo, bajo la nota del mirador. Pequeno pero
 * legible: la licencia de ESO pide que se vea, no que se esconda. */
.credito-suelo {
  display: block;
  margin-top: .35rem;
  font-size: .64rem;
  line-height: 1.35;
  color: #7f8aa6;
}


/* Aviso de hemisferio sin cartografiar, en la ficha del cuerpo.
 * En ambar apagado: es una advertencia sobre lo que se ve, no un dato mas. */
#aviso-sin-mapa {
  margin: .5rem 0 0;
  padding: .4rem .55rem;
  border-left: 2px solid rgba(224, 178, 92, .55);
  background: rgba(224, 178, 92, .07);
  font-size: .68rem;
  line-height: 1.45;
  color: #c6b490;
}

/* =================================================================
   EQUIPO Y BLOG — las dos secciones que se abren a propósito
   =================================================================

   Antonio, 3-sep: "botón para blog y botón para amazon, pero ponlo equipo y
   accesorios o algo así, y dentro del blog y de amazon los anuncios".

   ⚠️ Se abren ENCIMA de la vista 3D, y solo al pulsar su botón. Nunca
   comparten pantalla con el cielo: la web funciona porque se abre y enseña el
   sistema solar limpio, y meter una columna de productos al lado se lleva por
   delante justo eso. Cerradas no ocupan nada.
   ================================================================= */

.hoja-seccion {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  /* ⚠️ Sangrado de las etiquetas de los cuerpos por encima de la hoja
   * (visto probando "Vídeos" y "Blog", 7-sep). Subir la opacidad a 0,985
   * dejaba un resto todavia visible -- un rotulo cian con su propio
   * resplandor sigue leyendose incluso al 1,5%. Fondo del TODO opaco: cero
   * dependencia de si el desenfoque (`backdrop-filter`, con su prefijo
   * `-webkit-` aqui abajo) llega a aplicarse o no. */
  background: rgb(6, 9, 16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: hoja-entra .22s ease-out;
}
.hoja-seccion.oculto { display: none; }

@keyframes hoja-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hoja-seccion { animation: none; }
}

.hoja-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 14px 20px;
  border-bottom: 1px solid var(--cian-fantasma);
  flex: 0 0 auto;
}
.hoja-barra h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cian-claro);
}
.hoja-barra .btn { font-size: 15px; line-height: 1; padding: 5px 11px; }

/* Scroll propio: la lista puede ser larga y el fondo no debe moverse. */
.hoja-cuerpo {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 22px 20px 60px;
}
/* ⚠️ La columna de lectura la marca el CONTENEDOR, no cada hijo.
 *
 * Estaba puesto como `.hoja-cuerpo > * { max-width: 760px; margin: auto }`, y
 * eso centra cada bloque por separado dentro de la pantalla entera: el texto
 * de "todavia no hay nada" (que es mas estrecho) salia flotando en mitad de
 * la pantalla, lejos del titulo de la izquierda. Con la columna en el
 * contenedor, todo lo de dentro empieza en el mismo margen. */
.hoja-interior { max-width: 760px; margin: 0 auto; }

/* El texto de "todavía no hay nada". Dice qué irá ahí en vez de dejar un
   hueco mudo, que se lee como una web rota. */
.hoja-vacia {
  color: var(--tinta-media);
  font-size: 12.5px;
  line-height: 1.7;
  max-width: 56ch;
  border-left: 2px solid var(--cian-fantasma);
  padding-left: 14px;
}

/* --- El blog --- */
.blog-cabecera h2 {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinta-tenue); font-weight: 500; margin: 0 0 4px;
}
.blog-lista { display: flex; flex-direction: column; gap: 34px; }
.blog-articulo { display: flex; flex-direction: column; gap: 9px; }
.blog-fecha {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-tenue);
}
.blog-articulo h3 {
  margin: 0; font-size: 19px; line-height: 1.3; color: var(--tinta);
  font-weight: 500; text-wrap: balance;
}
.blog-imagen {
  display: block; width: 100%; max-width: 100%; height: auto;
  border-radius: 6px; border: 1px solid rgba(255,255,255,.12);
}
.blog-articulo p {
  margin: 0; color: var(--tinta-media); font-size: 14px; line-height: 1.75;
  max-width: 68ch;
}
.blog-entradilla { color: var(--tinta) !important; }
.blog-ver { align-self: flex-start; margin-top: 4px; }

/* --- Vídeos recomendados (divulgadores con permiso) ---
   Mismo lenguaje que la tienda: rejilla de tarjetas con marco 16:9 en vez
   de 4:3 (miniaturas de YouTube, no fotos de producto). */
.recursos-divulgador + .recursos-divulgador { margin-top: 40px; }
.recursos-cabecera h3 {
  margin: 0 0 4px; font-size: 17px; color: var(--tinta); font-weight: 500;
}
.recursos-descripcion {
  margin: 0 0 10px; max-width: 68ch;
  color: var(--tinta-media); font-size: 13px; line-height: 1.7;
}
.recursos-canal { font-size: 11px; }
.recursos-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 16px;
  list-style: none;
}
.recursos-tarjeta { display: flex; flex-direction: column; gap: 8px; }
.recursos-video-marco {
  display: block; position: relative; width: 100%;
  aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden;
  border: 1px solid var(--cian-fantasma); background: rgba(2, 12, 22, 0.5);
  padding: 0; cursor: pointer;
}
.recursos-video-miniatura { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Botón de play propio, encima de la miniatura -- así se ve claramente que
   es un vídeo por incrustar y no una foto suelta. */
.recursos-video-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.recursos-video-play::before {
  content: ""; width: 0; height: 0;
  border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent rgba(4, 10, 18, 0.85);
  margin-left: 4px; /* centra el triangulo visualmente */
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.4));
}
.recursos-video-marco:hover .recursos-video-play::before,
.recursos-video-marco:focus-visible .recursos-video-play::before {
  border-color: transparent transparent transparent var(--cian-claro);
}
.recursos-video-iframe {
  width: 100%; aspect-ratio: 16 / 9; border-radius: 4px;
  border: 1px solid var(--cian-fantasma);
}
.recursos-video-titulo {
  margin: 0; color: var(--tinta); font-size: 13px; line-height: 1.5;
}

/* --- Galería de fotos de galaxias ---
   Mismo lenguaje que los vídeos (rejilla de tarjetas), pero la foto manda:
   marco a su proporción real, sin recortar a 16:9 como un vídeo. */
.galfoto-marco {
  display: block; border-radius: 4px; overflow: hidden;
  border: 1px solid var(--cian-fantasma); background: rgba(2, 12, 22, 0.5);
}
.galfoto-imagen { width: 100%; height: auto; display: block; }
.galfoto-nombre { margin-top: 8px; }
.galfoto-tamano {
  margin: 2px 0 0; color: var(--tinta-media); font-size: 11px;
}
.galfoto-credito {
  margin: 4px 0 0; color: var(--tinta-tenue); font-size: 10.5px; line-height: 1.5;
}
.galfoto-credito a { color: var(--cian-claro); }

/* --- El hueco de publicidad ---
   Sin anuncio configurado, `anuncios.js` lo deja oculto y aquí no se pinta ni
   un borde: un espacio reservado vacío se ve como una web a medio hacer. */
.anuncio { margin: 0 0 26px; }
.anuncio[hidden] { display: none !important; }
.anuncio-aviso {
  margin: 0 0 6px;
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-tenue);
}

/* --- El equipo (productos de Amazon) ---
   Sin estilo propio hasta el 4-sep -- las tarjetas se veian con el CSS por
   defecto del navegador. `tienda-cabecera` reutiliza el patron del blog. */
.tienda-cabecera h2 {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinta-tenue); font-weight: 500; margin: 0 0 4px;
}
/* Botones de filtro, uno por categoria + "Todos" -- Antonio, 4-sep,
   aclarando el punto anterior: *"cada categoria tenga su boton"*. Pulsar
   uno oculta el resto de grupos enteros (ver `marcarFiltro` en tienda.js). */
.tienda-filtros {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 18px 0 4px;
}
.tienda-filtro.activo {
  background: rgba(0, 229, 255, 0.2);
  color: var(--cian-claro);
  border-color: var(--cian);
}
/* Un grupo por categoria (telescopios, prismaticos...), cada uno con su
   titulo y su propia rejilla -- Antonio, 4-sep: "separar los productos por
   categorias". Antes era una unica rejilla con todo mezclado. */
.tienda-grupo + .tienda-grupo { margin-top: 40px; }
.tienda-grupo.oculto { display: none; }
.tienda-grupo-titulo {
  margin: 0 0 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cian-fantasma);
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cian-claro); font-weight: 500;
}
.tienda-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 22px;
  margin-top: 18px;
  list-style: none;
}
/* ⚠️ Antonio, 7-sep: "el mismo diseño que en la web de patinetes" -- misma
 * estructura de tarjeta que `mejorespatinetes.com` (`web/styles.css`,
 * seccion 6 "Tarjetas de producto"): marco claro para la foto, marca en
 * mayusculas pequeñas, linea de estrellas, titulo, y un boton de compra
 * grande y solido, no un enlace de texto perdido al final. Los colores son
 * los propios de esta web (cian, no el naranja de patinetes) -- mismo
 * patron, paleta propia, igual que el resto del sitio nunca copia el color
 * de marca de otra web suya. */
.tienda-tarjeta {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cian-fantasma);
  border-radius: 8px;
  background: rgba(0, 229, 255, 0.03);
  overflow: hidden;
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, border-color 0.18s;
}
.tienda-tarjeta:hover {
  transform: translateY(-3px);
  border-color: var(--cian-medio);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
/* Las fotos de Amazon vienen con fondo blanco: un panel oscuro detras se
   vería como un recorte mal hecho. Marco claro propio, no el fondo del
   sitio, para que la fotografia se vea como se ve en Amazon. */
.tienda-imagen-marco {
  display: block;
  aspect-ratio: 4 / 3;
  background: #f4f6f4;
  border-bottom: 1px solid var(--cian-fantasma);
  overflow: hidden;
}
.tienda-imagen {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 14px;
  box-sizing: border-box;
  transition: transform 0.25s ease-out;
}
.tienda-tarjeta:hover .tienda-imagen { transform: scale(1.045); }
/* Todo lo de debajo de la foto comparte este relleno -- la foto va a
   sangre (marco propio), el texto no. */
.tienda-cuerpo { display: flex; flex-direction: column; gap: 7px; padding: 12px 14px 14px; }
.tienda-marca {
  margin: 0;
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tinta-tenue);
}
.tienda-valoracion {
  display: flex; align-items: baseline; gap: 6px;
  margin: 0;
  font-size: 12px;
}
.tienda-valoracion-estrella { font-weight: 600; }
.tienda-valoracion-alta .tienda-valoracion-estrella { color: var(--cian-claro); }
.tienda-valoracion-media .tienda-valoracion-estrella { color: var(--tinta-media); }
.tienda-valoracion-baja .tienda-valoracion-estrella { color: var(--aviso); }
.tienda-valoracion-cuenta { color: var(--tinta-tenue); font-size: 11px; }
.tienda-tarjeta h4 {
  margin: 0; font-size: 15px; line-height: 1.35; color: var(--tinta);
  font-weight: 500; text-wrap: balance;
}
.tienda-para {
  margin: 0; color: var(--tinta); font-size: 12.5px; line-height: 1.6;
}
.tienda-nota {
  margin: 0; color: var(--tinta-media); font-size: 11.5px; line-height: 1.6;
}
/* El boton de compra: solido y grande, como `.btn-comprar` de la web de
 * patinetes -- ahi es lo primero que se ve, aqui tambien. Degradado cian en
 * vez de su naranja de Amazon (esta web no usa naranja en ningun otro
 * sitio), con el mismo peso visual: ancho completo, texto oscuro sobre
 * fondo claro para que destaque del resto de la tarjeta, siempre oscura. */
.tienda-enlace {
  display: block;
  width: 100%;
  margin: 6px 0 0;
  padding: 10px 14px;
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
  font-size: 13px; font-weight: 600;
  color: #01121a;
  background: linear-gradient(180deg, var(--cian-claro), var(--cian));
  border: 1px solid var(--cian);
  box-shadow: 0 2px 10px rgba(0, 229, 255, 0.18);
  transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.15s;
  box-sizing: border-box;
}
.tienda-enlace:hover, .tienda-enlace:focus-visible {
  color: #01121a;
  filter: brightness(1.08);
  box-shadow: 0 4px 16px rgba(0, 229, 255, 0.3);
}
.tienda-enlace:active { transform: translateY(1px); }
/* La divulgación de afiliado que exige Amazon (`tienda.js`, TEXTOS.divulgacion)
   -- nunca tuvo estilo propio, así que ha salido siempre con el color de
   texto por defecto en vez del de la web. La frase EXACTA de Amazon va
   destacada (es la que hay que enseñar sí o sí); la explicación amistosa de
   debajo, más discreta. */
.tienda-aviso {
  margin: 8px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--tinta-media);
}
.tienda-aviso-extra { color: var(--tinta-tenue); margin-top: 2px; }
.tienda-aviso-enlace {
  align-self: flex-start;
  font-size: 9.5px; color: var(--tinta-tenue);
  margin-top: 2px;
}

/* --- La Tierra es redonda (rebate el terraplanismo) ---
   Columna mas ancha que el blog/equipo: los diagramas necesitan sitio, y el
   texto de refutacion es largo -- 760px lo hubiera partido en demasiadas
   lineas. */
.hoja-interior-ancha { max-width: 920px; }
/* La foto de cabecera, generada en ChatGPT -- Antonio, 4-sep. Recorte de
   altura fijo (no la relacion de aspecto original, 16:9) para que no empuje
   el titulo demasiado abajo en pantallas bajas. */
.terraplanismo-hero {
  display: block; width: 100%; max-height: 260px;
  object-fit: cover; object-position: center 65%;
  border-radius: 6px; margin-bottom: 22px;
  border: 1px solid var(--cian-fantasma);
}
.terraplanismo-cabecera h2 {
  margin: 0 0 10px; font-size: 22px; line-height: 1.3;
  color: var(--tinta); font-weight: 500; text-wrap: balance;
}
.terraplanismo-intro {
  margin: 0 0 30px; max-width: 68ch;
  color: var(--tinta-media); font-size: 13px; line-height: 1.75;
}
.terraplanismo-lista {
  display: flex; flex-direction: column; gap: 30px;
}
.terraplanismo-tarjeta {
  padding: 20px 22px;
  border: 1px solid var(--cian-fantasma);
  border-radius: 6px;
  background: rgba(0, 229, 255, 0.025);
}
.terraplanismo-reclamo {
  margin: 0 0 14px;
  padding-left: 14px;
  border-left: 2px solid rgba(255, 179, 64, 0.5);
  color: var(--tinta);
  font-size: 15px; font-style: italic; line-height: 1.5;
}
.terraplanismo-diagrama-marco {
  margin: 0 0 16px;
  overflow: hidden;
  background: rgba(2, 12, 22, 0.5);
  border: 1px solid var(--cian-fantasma);
  border-radius: 4px;
}
/* El SVG (esquema propio) necesita aire alrededor; la foto de ChatGPT ya
   trae su propio fondo oscuro compuesto, asi que va a sangre, sin padding
   -- con padding se veia una costura entre el fondo del marco y el de la
   imagen, dos oscuros ligeramente distintos. */
.terraplanismo-diagrama-marco > svg.terraplanismo-diagrama { padding: 10px; box-sizing: border-box; }
.terraplanismo-diagrama { display: block; width: 100%; height: auto; }
.terraplanismo-diagrama-img { display: block; width: 100%; height: auto; }
.terraplanismo-refutacion {
  margin: 0; color: var(--tinta-media); font-size: 13.5px; line-height: 1.75;
}
/* El interruptor Adultos/Niños -- Antonio, 4-sep: *"una seccion de lo mismo
   pero para niños"*. Reutiliza el mismo boton de filtro que ya tiene la
   tienda (`.tienda-filtro`), asi que solo hace falta la fila que los agrupa. */
.terraplanismo-interruptor { display: flex; gap: 8px; margin-top: 4px; }
/* En modo niños, letra mas grande y mas espacio -- mas facil de leer para
   quien todavia esta aprendiendo a leer del tiron. */
.terraplanismo-lista-ninos .terraplanismo-refutacion {
  font-size: 15.5px; line-height: 1.85; color: var(--tinta);
}
.terraplanismo-lista-ninos .terraplanismo-reclamo { font-size: 16px; }

.terraplanismo-boton-visita { margin-top: 14px; }

/* --- Visita narrada: presentacion a pantalla completa ---
   Antonio, 4-sep: *"podria ser como una visita con voz?"* / *"en forma de
   presentacion chula"*. Encima de todo (incluida la hoja de la seccion, que
   se queda debajo tal cual estaba), fondo oscuro tipo cine, una diapositiva
   grande por argumento. `js/terraplanismo_presentacion.js`. */
.terraplanismo-presentacion {
  position: fixed; inset: 0; z-index: 500;
  display: flex; flex-direction: column; align-items: center;
  padding: 26px 24px 22px;
  background:
    radial-gradient(ellipse at center, rgba(0, 229, 255, 0.05) 0%, transparent 62%),
    var(--fondo);
  animation: terraplanismo-presentacion-entra-fondo 0.28s ease-out;
}
.terraplanismo-presentacion-sale { animation: terraplanismo-presentacion-sale-fondo 0.2s ease-in forwards; }
@keyframes terraplanismo-presentacion-entra-fondo { from { opacity: 0; } to { opacity: 1; } }
@keyframes terraplanismo-presentacion-sale-fondo { from { opacity: 1; } to { opacity: 0; } }
/* La hoja de detras no hace falta que siga desplazandose por debajo. */
body.terraplanismo-presentacion-abierta .hoja-seccion.oculto ~ .hoja-seccion,
body.terraplanismo-presentacion-abierta { overflow: hidden; }

.terraplanismo-presentacion-cerrar {
  position: absolute; top: 18px; right: 20px;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--cian-tenue); background: rgba(1, 5, 12, 0.6);
  color: var(--tinta-media); font-size: 22px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: color 0.15s, border-color 0.15s;
}
.terraplanismo-presentacion-cerrar:hover,
.terraplanismo-presentacion-cerrar:focus-visible { color: var(--cian-claro); border-color: var(--cian-medio); outline: none; }

.terraplanismo-presentacion-puntos {
  display: flex; gap: 7px; flex-wrap: wrap; justify-content: center;
  max-width: 70%; margin-bottom: 18px;
}
.terraplanismo-presentacion-punto {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cian-fantasma); transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}
.terraplanismo-presentacion-punto.visto { background: var(--cian-tenue); }
.terraplanismo-presentacion-punto.activo {
  background: var(--cian); box-shadow: 0 0 8px var(--cian);
  transform: scale(1.35);
}

.terraplanismo-presentacion-diapositiva {
  flex: 1; width: 100%; max-width: 780px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 22px;
  overflow-y: auto; min-height: 0;
}
.terraplanismo-presentacion-visual {
  width: 100%; max-width: 560px;
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--cian-tenue);
  box-shadow: 0 0 40px rgba(0, 229, 255, 0.08);
  background: rgba(2, 12, 22, 0.5);
  opacity: 0; transform: translateY(14px) scale(0.98);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.terraplanismo-presentacion-visual img,
.terraplanismo-presentacion-visual svg {
  display: block; width: 100%; height: auto;
  animation: terraplanismo-presentacion-zoom 9s ease-out forwards;
}
.terraplanismo-presentacion-visual svg { padding: 16px; box-sizing: border-box; }
@keyframes terraplanismo-presentacion-zoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
.terraplanismo-presentacion-texto {
  width: 100%; text-align: center;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.5s ease-out 0.12s, transform 0.5s ease-out 0.12s;
}
.terraplanismo-presentacion-entra .terraplanismo-presentacion-visual,
.terraplanismo-presentacion-entra .terraplanismo-presentacion-texto {
  opacity: 1; transform: none;
}
.terraplanismo-presentacion-etiqueta {
  display: inline-block; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 6px;
}
.terraplanismo-presentacion-etiqueta-mal { color: var(--aviso); }
.terraplanismo-presentacion-etiqueta-bien { color: var(--cian-claro); }
.terraplanismo-presentacion-reclamo {
  margin: 0 0 22px; font-size: 17px; font-style: italic; line-height: 1.45;
  color: var(--tinta-media);
  text-decoration: line-through; text-decoration-color: rgba(255, 179, 64, 0.55);
  text-decoration-thickness: 1.5px;
}
.terraplanismo-presentacion-refutacion {
  margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--tinta);
  max-width: 62ch; margin-inline: auto;
}

.terraplanismo-presentacion-avance {
  width: 100%; max-width: 780px; height: 2px;
  background: var(--cian-fantasma); border-radius: 2px;
  margin-top: 18px; overflow: hidden; flex-shrink: 0;
}
.terraplanismo-presentacion-avance-barra {
  height: 100%; width: 0%; background: var(--cian);
  box-shadow: 0 0 8px var(--cian);
}
.terraplanismo-presentacion-controles {
  display: flex; align-items: center; gap: 18px;
  margin-top: 14px; flex-shrink: 0;
}
.terraplanismo-presentacion-nav {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--cian-tenue); background: transparent;
  color: var(--cian-claro); font-size: 22px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}
.terraplanismo-presentacion-nav:hover:not(:disabled),
.terraplanismo-presentacion-nav:focus-visible { border-color: var(--cian); background: var(--cian-fantasma); outline: none; }
.terraplanismo-presentacion-nav:disabled { opacity: 0.3; cursor: default; }
.terraplanismo-presentacion-contador {
  font-size: 12px; color: var(--tinta-tenue); min-width: 52px; text-align: center;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .terraplanismo-presentacion,
  .terraplanismo-presentacion-sale,
  .terraplanismo-presentacion-visual img,
  .terraplanismo-presentacion-visual svg,
  .terraplanismo-presentacion-visual,
  .terraplanismo-presentacion-texto { animation: none !important; transition: none !important; }
  .terraplanismo-presentacion-visual,
  .terraplanismo-presentacion-texto { opacity: 1 !important; transform: none !important; }
}

@media (max-width: 820px) {
  .hoja-barra { padding: 12px 14px; }
  .hoja-cuerpo { padding: 18px 14px 80px; }
  .blog-articulo h3 { font-size: 17px; }
  .terraplanismo-tarjeta { padding: 16px; }
  .terraplanismo-reclamo { font-size: 14px; }
  .terraplanismo-presentacion { padding: 18px 14px 16px; }
  .terraplanismo-presentacion-reclamo { font-size: 15px; }
  .terraplanismo-presentacion-refutacion { font-size: 14.5px; }
  .terraplanismo-presentacion-visual { max-width: 100%; }
}

/* --- ¿De qué está hecho el universo? (física cuántica) ---
   Mismo tratamiento visual que la sección de terraplanismo, pero sin el
   tachado en la pregunta -- aquí no hay ningún mito que desmentir, es
   explicar, así que la pregunta-gancho se resalta en vez de tacharse. */
.cuantica-hero {
  display: block; width: 100%; max-height: 260px;
  object-fit: cover; object-position: center 55%;
  border-radius: 6px; margin-bottom: 22px;
  border: 1px solid var(--cian-fantasma);
}
.cuantica-cabecera h2 {
  margin: 0 0 10px; font-size: 22px; line-height: 1.3;
  color: var(--tinta); font-weight: 500; text-wrap: balance;
}
.cuantica-intro {
  margin: 0 0 30px; max-width: 68ch;
  color: var(--tinta-media); font-size: 13px; line-height: 1.75;
}
.cuantica-interruptor { display: flex; gap: 8px; margin-top: 4px; margin-bottom: 30px; }
.cuantica-lista {
  display: flex; flex-direction: column; gap: 30px;
}
.cuantica-tarjeta {
  padding: 20px 22px;
  border: 1px solid var(--cian-fantasma);
  border-radius: 6px;
  background: rgba(0, 229, 255, 0.025);
}
.cuantica-tema-titulo {
  margin: 0 0 10px; font-size: 16px; font-weight: 600;
  color: var(--cian-claro);
}
.cuantica-pregunta {
  margin: 0 0 14px;
  padding-left: 14px;
  border-left: 2px solid var(--cian-medio);
  color: var(--tinta);
  font-size: 15px; font-style: italic; line-height: 1.5;
}
.cuantica-diagrama-marco {
  margin: 0 0 16px;
  overflow: hidden;
  background: rgba(2, 12, 22, 0.5);
  border: 1px solid var(--cian-fantasma);
  border-radius: 4px;
}
.cuantica-diagrama-marco > svg.cuantica-diagrama { padding: 10px; box-sizing: border-box; }
.cuantica-diagrama { display: block; width: 100%; height: auto; }
.cuantica-diagrama-img { display: block; width: 100%; height: auto; }
.cuantica-explicacion {
  margin: 0; color: var(--tinta-media); font-size: 13.5px; line-height: 1.8;
}
.cuantica-lista-ninos .cuantica-explicacion {
  font-size: 15.5px; line-height: 1.9; color: var(--tinta);
}
.cuantica-lista-ninos .cuantica-pregunta { font-size: 16px; }

@media (max-width: 820px) {
  .cuantica-tarjeta { padding: 16px; }
  .cuantica-pregunta { font-size: 14px; }
  .cuantica-tema-titulo { font-size: 15px; }
}

/* --- Modo niños, para toda la web ---
   Antonio, 4-sep: interruptor unico (js/modo_ninos.js) que ademas de cambiar
   los textos, oculta paneles tecnicos y agranda la letra donde se lee la
   ficha de cada cuerpo -- mismo trato que ya tenian terraplanismo/cuantica. */
.modo-ninos-oculto { display: none !important; }
body.modo-ninos .descripcion {
  font-size: 15px; line-height: 1.75; color: var(--tinta);
}
#btn-modo-ninos { font-size: 15px; line-height: 1; padding: 6px 10px; }
.ficha-retrato {
  display: block; width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover; border-radius: 6px; margin-bottom: 10px;
  border: 1px solid var(--cian-fantasma);
}