/* ===== El museo del cielo (museo/*.html): lo que añaden a las páginas de texto de estilos.css =====
   Va aparte para no cargar la portada con estilos que solo usan las guías. */

/* Curvas de movimiento de las guías (las de Emil Kowalski: arrancan rápido y frenan suave) */
.pagina-guia {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* Botones: se encogen un poco al pulsar, como uno de verdad */
.pagina-guia .boton-secundario { transition: transform 160ms var(--ease-out); }
.pagina-guia .boton-secundario:active { transform: scale(0.97); }

/* Fotos: las que se cargan al bajar entran con un fundido en vez de aparecer de golpe.
   museo.js pone «cargando» solo a las que aún no han llegado; sin JavaScript se ven como siempre */
.foto-guia img { transition: opacity 250ms var(--ease-out); }
.foto-guia img.cargando { opacity: 0; }

/* Fecha de actualización, bajo la entrada */
.articulo-fecha { color: var(--suave); font-size: 0.85rem; }

/* «↑ Índice» al final de las secciones largas, con zona de toque de 44 px */
.volver-indice { margin: 14px 0 0; }
.volver-indice a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.92rem; }

/* Índice: en las guías, píldoras de 44 px como el resto de lo que se toca */
.pagina-guia .indice-ayuda a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: 0.92rem; }

/* «Lo esencial»: lista numerada con números grandes de tinta, sin caja */
.esencial { counter-reset: paso; list-style: none; margin: 10px 0 0; padding: 0; }
.esencial li { counter-increment: paso; position: relative; padding-left: 40px; margin-bottom: 12px; max-width: 34em; }
.esencial li::before {
  content: counter(paso);
  position: absolute; left: 0; top: -0.15em;
  font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--acento-2);
}

/* Fotos: ocupan el ancho de lectura; el pie, pequeño y en gris, con el crédito */
.foto-guia { margin: 16px 0; }
.foto-guia img { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--fondo); }
.foto-guia figcaption { margin-top: 6px; font-size: 0.85rem; color: var(--suave); max-width: 40em; }
.foto-guia figcaption a { color: var(--suave); }
.ojo-foto { margin: 14px 0; }

/* Dos anchos centrados en el mismo eje, como en las revistas: el texto a unas 70 letras por línea
   (36rem) y las fotos, el deslizador y los dibujos («.ancho») a todo lo que da la columna de la web.
   En el móvil la columna es más estrecha que 36rem y todo ocupa lo mismo. */
.pagina-guia .pagina-texto p, .pagina-guia .pagina-texto li,
.pagina-guia .foto-guia figcaption, .pagina-guia .mito-respuesta, .pagina-guia .esencial li { max-width: none; }
.pagina-guia .tarjeta > :not(.ancho) { max-width: 36rem; margin-left: auto; margin-right: auto; }
.pagina-guia .ojo-foto > :not(.ojo-foto-marco),
.pagina-guia .cielo-luz > :not(canvas),
.pagina-guia .reojo > :not(.reojo-panel) { max-width: 36rem; margin-left: auto; margin-right: auto; }
.pagina-guia .cielo-luz-cuenta { margin-top: 12px; }

/* Dato grande: una cifra para cortar la lectura */
.dato-grande { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 16px 0; padding: 14px 0; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.dato { flex: 1; display: flex; flex-direction: column; min-width: 120px; margin: 0; }
.dato-cifra { font-size: 2.4rem; font-weight: 600; line-height: 1.05; font-feature-settings: "tnum"; }
.dato-texto { color: var(--suave); font-size: 0.92rem; max-width: 18em; }
/* Una sola cifra: el texto al lado, para no dejar media fila vacía */
.dato-solo .dato { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.dato-solo .dato-texto { flex: 1; min-width: 14em; max-width: none; }

/* Antes y después: la foto de ciudad encima de la de campo, recortada desde la izquierda.
   museo.js mueve el recorte (clip-path) y la raya (transform) directamente en cada elemento;
   sin JavaScript se quedan a la mitad. La raya ocupa todo el ancho y se desplaza con translateX(%),
   que se mide sobre su propio ancho (= el de la foto): así se mueve sin recalcular la página */
.comparar { position: relative; overflow: hidden; border-radius: 12px; touch-action: pan-y; }
.comparar img { display: block; width: 100%; height: auto; }
.comparar .comparar-encima { position: absolute; inset: 0; height: 100%; clip-path: inset(0 0 0 50%); }
.comparar-raya { position: absolute; inset: 0; transform: translateX(50%); pointer-events: none; }
.comparar-raya::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--texto); }
.comparar-raya::after {
  content: "‹ ›";
  position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--fondo); border: 2px solid var(--texto); color: var(--texto);
  font-size: 1.1rem; font-weight: 600; letter-spacing: 2px;
}
/* Rótulos impresos sin caja, con contorno azul noche para leerse sobre la foto (como los nombres del dibujo del cielo) */
.comparar-rotulo {
  position: absolute; top: 10px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; pointer-events: none;
  -webkit-text-stroke: 3px var(--fondo); paint-order: stroke fill;
}
.comparar-rotulo-campo, .comparar-rotulo-izquierda { left: 8px; }
.comparar-rotulo-ciudad, .comparar-rotulo-derecha { right: 8px; }
/* El deslizador cubre la foto entera y es invisible: la raya y el círculo son su dibujo */
.comparar input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.comparar:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Ojo o foto: dos botones que cambian lo que se ve en el marco */
.ojo-foto-marco { position: relative; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; background: var(--fondo); }
.ojo-foto-marco > * { position: absolute; inset: 0; transition: opacity 300ms var(--ease-in-out); }
.ojo-foto-marco img { width: 100%; height: 100%; object-fit: cover; }
/* A simple vista: estrellitas sueltas y una manchita alargada, gris y débil */
.ojo-vista {
  background:
    radial-gradient(1.5px 1.5px at 12% 20%, #fff, transparent),
    radial-gradient(1px 1px at 30% 70%, #ddd, transparent),
    radial-gradient(1.5px 1.5px at 78% 30%, #fff, transparent),
    radial-gradient(1px 1px at 88% 78%, #ccc, transparent),
    radial-gradient(1px 1px at 22% 88%, #bbb, transparent),
    radial-gradient(1px 1px at 64% 12%, #ccc, transparent),
    radial-gradient(1.5px 1.5px at 44% 84%, #eee, transparent),
    var(--fondo);
}
.ojo-vista::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 70px; height: 20px; margin: -10px 0 0 -35px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(200, 205, 215, 0.55) 0%, rgba(200, 205, 215, 0.18) 45%, transparent 75%);
  transform: rotate(-35deg);
  filter: blur(2px);
}
.ojo-foto-marco[data-ver="ojo"] .ojo-foto-foto { opacity: 0; }
.ojo-foto-marco[data-ver="foto"] .ojo-vista { opacity: 0; }
.ojo-foto-botones { display: flex; gap: 8px; margin: 10px 0 0; }
.ojo-foto-botones .boton-secundario[aria-pressed="true"] { background: var(--acento); color: var(--fondo); }

/* ¿Verdad o mito?: cada frase se abre para ver la respuesta */
.mitos { margin: 10px 0 0; }
.mito { border-top: 1px solid var(--borde); }
.mito:last-child { border-bottom: 1px solid var(--borde); }
.mito summary {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 8px 0;
  cursor: pointer; list-style: none; font-weight: 500;
}
.mito summary::-webkit-details-marker { display: none; }
/* Un «+» dorado en un círculo que pasa a «−» al abrir */
/* La misma flechita que las filas plegables de la portada (.fila-flecha), que gira al abrir */
.mito summary::after {
  content: ""; margin: 0 6px 0 auto; flex-shrink: 0;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--suave); border-bottom: 1.5px solid var(--suave);
  transform: rotate(45deg) translateY(-3px); transition: transform 200ms var(--ease-out);
}
.mito[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.mito-respuesta { margin: 0 0 12px; max-width: 34em; }
/* Al abrir, la respuesta entra con un fundido y bajando 4 px (sin JavaScript: @starting-style) */
.mito[open] .mito-respuesta {
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  @starting-style { opacity: 0; transform: translateY(-4px); }
}
.mito-sello { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-right: 6px; }
/* Los dos sellos en dorado: en rojo, «Mito» parecía un «fallaste» aunque hubieras acertado */
.mito-sello-verdad, .mito-sello-mito { color: var(--acento); }

/* Dibujo de la puesta de sol a la noche cerrada: barra con el degradado del crepúsculo
   y debajo cuatro columnas (en texto, para que se lea igual en el móvil que en el ordenador) */
.crepusculo { margin: 14px 0 6px; max-width: 640px; }
.crepusculo-barra {
  height: 26px; border-radius: 999px;
  background: linear-gradient(90deg, #e9925a 0%, #8a6b8f 14%, #3b4f8a 36%, #1a2a55 62%, #070b1a 88%);
}
.crepusculo-pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.crepusculo-pasos li { position: relative; padding-top: 14px; font-size: 0.82rem; color: var(--suave); line-height: 1.3; }
.crepusculo-pasos li::before { content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 10px; background: var(--texto); }
.crepusculo-pasos b { display: block; color: var(--texto); font-size: 0.92rem; }

/* Títulos: en las guías, las secciones algo más grandes que en la ayuda, y los subtítulos
   como los rótulos de la casa (mayúsculas pequeñas en gris), para que se note el escalón */
.pagina-guia .tarjeta h2 { font-size: 1.4rem; }
.pagina-guia h3 { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--suave); margin: 26px 0 10px; }

/* Modo noche: el verde y el rojo de «Verdad / Mito» se pierden en rojo; lo dice la palabra */
:root[data-modo="noche"] .mito-sello { color: var(--texto); }

/* El cierre: resumen y botón para ir a la herramienta */
.articulo-cierre .boton-secundario { margin-top: 6px; text-decoration: none; font-size: 1rem; }

.ojo-foto .articulo-fecha { margin-top: 10px; }
.ojo-foto-marco { cursor: pointer; }

/* Modo noche: el filtro rojo deja las fotos oscuras casi negras (la ciudad del deslizador no se veía).
   Se aclaran antes de que les llegue el rojo de la tarjeta, y los pies de foto van en tinta para leerse */
:root[data-modo="noche"] .foto-guia img,
:root[data-modo="noche"] .ojo-foto-marco img { filter: brightness(1.7) contrast(1.15); }
:root[data-modo="noche"] .foto-guia figcaption,
:root[data-modo="noche"] .articulo-fecha { color: var(--texto); }

/* ===== «¿Verdad o mito?» como juego (museo.js convierte cada <details> en una pregunta con dos botones;
   sin JavaScript se quedan los <details> de siempre) ===== */
/* Es un test: plegado tras un botón y, ya empezado, una frase cada vez (las demás con hidden) que entra con un fundido */
.mitos-empezar { display: block; margin: 8px auto 0; }
.con-programa .mitos-intro { text-align: center; }
.mito-juego { border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); padding: 12px 0 16px;
  transition: opacity 250ms var(--ease-out); @starting-style { opacity: 0; } }
.mito-paso { margin: 0 0 4px; font-size: 0.8rem; color: var(--suave); font-variant-numeric: tabular-nums; }
.mito-frase { margin: 0 0 10px; font-weight: 500; font-size: 1.05rem; }
.mito-frase:focus { outline: none; }
.mito-siguiente { margin-top: 12px; }
.mito-botones { display: flex; gap: 8px; }
/* Ya contestada: la respuesta buena en verde; si elegiste la otra, tachada y apagada. Los botones no se
   desactivan del todo (aria-disabled), para que con el teclado no se pierda el sitio */
.mito-botones .boton-secundario[aria-disabled="true"] { cursor: default; }
.mito-botones .boton-secundario[aria-disabled="true"]:not(.correcta) { opacity: 0.45; }
.mito-botones .boton-secundario.elegida-mal { text-decoration: line-through; }
.mito-botones .boton-secundario.correcta { background: var(--bueno); border-color: var(--bueno); color: var(--fondo); }
:root[data-modo="noche"] .mito-botones .boton-secundario.correcta { background: var(--texto); border-color: var(--texto); }
.mito-resultado { margin: 10px 0 4px; font-weight: 600; }
.mito-resultado:empty { display: none; }
.mito-resultado.acierto { color: var(--bueno); }
.mito-resultado.fallo { color: var(--malo); }
.mito-juego .mito-respuesta {
  margin: 0;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  @starting-style { opacity: 0; transform: translateY(-4px); }
}
.mito-marcador { margin: 14px 0 0; font-weight: 600; }
.mito-marcador .boton-secundario { margin-left: 10px; }
:root[data-modo="noche"] .mito-resultado { color: var(--texto); }

/* ===== Prueba de la visión de reojo: una cruz y un punto débil sobre negro ===== */
.reojo { margin: 16px 0; }
.reojo-panel { position: relative; aspect-ratio: 2 / 1; border-radius: 12px; background: #000; }
.reojo-cruz { position: absolute; left: 22%; top: 50%; transform: translate(-50%, -50%); color: var(--suave); font-size: 1.4rem; line-height: 1; }
.reojo-punto { position: absolute; left: 72%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; }
.reojo label { display: flex; align-items: center; gap: 12px; margin: 10px 0 0; font-size: 0.92rem; color: var(--suave); }
.reojo input[type="range"] { flex: 1; min-height: 44px; accent-color: var(--acento); }

/* ===== Cielo según la luz: estrellas dibujadas que desaparecen al pasar del campo a la ciudad ===== */
.cielo-luz { margin: 16px 0; }
.cielo-luz canvas { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: var(--fondo); }
/* Los cuatro sitios en una fila también en el móvil (cuatro columnas iguales) */
.cielo-luz-botones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px auto 0; max-width: 36rem; }
.cielo-luz-botones .boton-secundario { justify-content: center; padding: 7px 4px; }
.cielo-luz-botones .boton-secundario[aria-pressed="true"] { background: var(--acento); color: var(--fondo); }
.cielo-luz-cuenta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 12px auto 0; max-width: 36rem; }
.cielo-luz-cuenta .dato-cifra { min-width: 3.2em; }
.cielo-luz-cuenta .dato-texto { max-width: none; }

/* Con «reducir movimiento»: nada se desplaza ni gira; los fundidos se quedan (ayudan a entender sin mover) */
@media (prefers-reduced-motion: reduce) {
  .mito summary::after { transition: none; }
  .mito[open] .mito-respuesta, .mito-juego .mito-respuesta { transition: opacity 200ms var(--ease-out); @starting-style { opacity: 0; transform: none; } }
  .pagina-guia .boton-secundario:active { transform: none; }
}

/* ===== Sala 0 (museo/index.html): el mapa del museo, una bóveda celeste con las salas =====
   El dibujo está en el HTML (SVG); lo que necesita programa (fugaces, fase de la Luna, salas visitadas)
   está en mapa.js. */

/* Título repartido en dos líneas iguales en el móvil («El museo / del cielo», no «cielo» solo) */
.cabecera h1 { text-wrap: balance; }
.museo-entrada { text-align: center; max-width: 34em; margin: 4px auto 20px; color: var(--suave); }

/* El mapa: en el móvil, todo el ancho; en el ordenador, centrado y sin pasar de 520 px */
.museo-mapa { margin: 8px auto 4px; max-width: 520px; }
.museo-mapa svg { display: block; width: 100%; height: auto; overflow: visible; }

.boveda-fondo { fill: var(--fondo); stroke: var(--borde); stroke-width: 1.5; }
.boveda-anillo { fill: none; stroke: var(--borde); stroke-width: 1; stroke-dasharray: 2 5; }
.boveda-estrellas { fill: var(--texto); opacity: 0.55; }
.boveda-cardinal { fill: var(--suave); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; }

/* El recorrido de menos a más: una línea dorada que se dibuja sola al entrar */
.recorrido { fill: none; stroke: var(--acento); stroke-width: 1.5; stroke-linecap: round; opacity: 0.75; }

/* La órbita de la ISS (raya fina), la ISS que la recorre, las fugaces y el contorno de la Luna */
.orbita { fill: none; stroke: var(--suave); stroke-width: 1; stroke-dasharray: 1 4; stroke-linecap: round; opacity: 0.6; }
.iss-viajera { fill: none; stroke: var(--texto); stroke-width: 1.5; stroke-linecap: round; opacity: 0; }
.iss-viajera .iss-estela { stroke: none; }
.fugaz { stroke-width: 2; stroke-linecap: round; fill: none; }
.luna-contorno { stroke: var(--suave); opacity: 0.55; }

/* Las salas. El círculo invisible es la zona de toque (≥ 44 px en un móvil de 347 px) */
.sala .toque { fill: transparent; }
.sala .dibujo { fill: none; stroke: var(--texto); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 220ms var(--ease-out), stroke 160ms; transform-box: fill-box; transform-origin: center; }
.sala .relleno { fill: var(--texto); stroke: none; }
.sala .aro { fill: none; stroke: var(--acento); stroke-width: 1; opacity: 0; transition: opacity 160ms; }
.sala .nombre { fill: var(--texto); font-size: 15.5px; font-weight: 500; text-anchor: middle; transition: fill 160ms; }
.sala .numero { fill: var(--acento); font-weight: 600; }
.sala .nota { fill: var(--suave); font-size: 12.5px; text-anchor: middle; }
.sala .empieza { fill: var(--acento); font-size: 12.5px; font-weight: 600; text-anchor: middle; }
.sala .izquierda { text-anchor: start; }
/* Un ribete del color del cielo alrededor de las letras, para que la línea y la órbita pasen por detrás */
.sala text { paint-order: stroke; stroke: var(--fondo); stroke-width: 5px; stroke-linejoin: round; }
/* En el móvil el mapa se encoge (400 → ~315 px): letras más grandes para no bajar de 12 px.
   «Próximamente» se quita del mapa (ya lo dicen la lista y el apagado) */
@media (max-width: 480px) {
  .sala .nombre { font-size: 18px; }
  .sala .empieza { font-size: 16px; }
  .boveda-cardinal { font-size: 16px; }
  .sala .nota { display: none; font-size: 15px; }
}
/* Ya visitada: «Visitada» con su ✓ en vez de «Empieza aquí» (lo cambia mapa.js) */
.sala .hecha { fill: none; stroke: var(--acento); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: none; }
.sala.visitada .hecha { display: inline; }

/* La sala abierta lleva su aro siempre a la vista (en el móvil no hay «pasar el ratón» que lo descubra) */
a.sala { cursor: pointer; outline: none; }
a.sala .aro { opacity: 0.6; }
a.sala.llama .aro { opacity: 1; }
a.sala:focus-visible .dibujo { transform: scale(1.18); stroke: var(--acento); }
a.sala:focus-visible .relleno { fill: var(--acento); }
a.sala:focus-visible .aro { opacity: 1; stroke-width: 2; }
a.sala:focus-visible .nombre { fill: var(--acento); }
/* Agrandar al pasar solo con ratón: en el móvil, tras tocar, se quedaría agrandada */
@media (hover: hover) and (pointer: fine) {
  a.sala:hover .dibujo { transform: scale(1.18); stroke: var(--acento); }
  a.sala:hover .relleno { fill: var(--acento); }
  a.sala:hover .aro { opacity: 1; }
  a.sala:hover .nombre { fill: var(--acento); }
}
a.sala:active .dibujo { transform: scale(1.06); }
@media (forced-colors: active) { a.sala:focus-visible .aro { stroke: Highlight; } }

/* Las que aún no existen: sin enlace. Se apaga el dibujo, no las letras, que tienen que leerse (también en
   modo noche): nombre y número en el gris suave, como en la lista */
.sala.pronto .dibujo, .sala.pronto .relleno { opacity: 0.45; }
.sala.pronto .nombre, .sala.pronto .numero { fill: var(--suave); }
.sala.pronto .nota { opacity: 0.8; }
/* Al tocar una apagada, mapa.js le pone «avisando» un momento: sale «Próximamente» también en el móvil */
.sala.pronto.avisando .nota { display: inline; }

@media (prefers-reduced-motion: no-preference) {
  /* Entrada: la línea se traza y cada sala aparece cuando la línea llega a ella */
  .recorrido { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trazar 2.4s var(--ease-out) 0.3s forwards; }
  @keyframes trazar { to { stroke-dashoffset: 0; } }
  /* --d (en index.html) es cuándo llega la línea a cada sala, medido sobre el trazo: con la curva ease-out la
     línea corre al principio y frena al final, así que no van a ritmo fijo */
  .sala-aparece { transform-box: fill-box; transform-origin: center;
    animation: aparecer 500ms var(--ease-out) backwards; animation-delay: var(--d); }
  @keyframes aparecer { from { opacity: 0; transform: scale(0.9); } }

  /* La única sala abierta late tres veces al terminar la entrada, para que se vea que es la puerta.
     Al tocar una sala apagada (mapa.js, clase «llama») vuelve a latir */
  a.sala .aro { transform-box: fill-box; transform-origin: center; animation: late-aro 1.4s ease-in-out 2.4s 3; }
  a.sala.calma .aro { animation: none; }
  a.sala.llama .aro { animation: late-aro-otra 1.4s ease-in-out 2; }
  /* Dos nombres iguales para que la animación vuelva a empezar cada vez que cambia la clase */
  @keyframes late-aro { 50% { transform: scale(1.2); opacity: 1; } }
  @keyframes late-aro-otra { 50% { transform: scale(1.2); opacity: 1; } }

  /* El cielo gira alrededor de la Polar (200,112), al revés de las agujas del reloj, como se ve mirando al Norte */
  .cielo-gira { transform-box: view-box; transform-origin: 200px 112px; animation: girar 360s linear infinite; }
  @keyframes girar { to { transform: rotate(-360deg); } }

  /* Unas pocas estrellas titilan rápido y a saltos, cada una a su ritmo (600-1150 ms). Acompañan, no llaman
     la atención: el destello más fuerte se queda por debajo del brillo de las salas */
  .titilan { opacity: 0.7; }
  .titilan circle { transform-box: fill-box; transform-origin: center;
    animation: titilar var(--t) linear var(--r) infinite; }
  @keyframes titilar {
    0%   { opacity: 0.85; transform: scale(1.12); }
    18%  { opacity: 0.3;  transform: scale(0.95); }
    32%  { opacity: 0.7;  transform: scale(1.05); }
    48%  { opacity: 0.25; transform: scale(0.92); }
    66%  { opacity: 0.8;  transform: scale(1.1); }
    82%  { opacity: 0.4;  transform: scale(0.97); }
    100% { opacity: 0.85; transform: scale(1.12); }
  }

  /* La ISS cruza en 7 s y luego el cielo queda tranquilo 11 s. Aparece poco a poco por el Oeste y se apaga
     antes de llegar al Este, como cuando entra en la sombra de la Tierra.
     Va por puntos de su órbita (.orbita en index.html) con transform, no con offset-path: así el navegador no
     repinta todo el mapa en cada fotograma (de ~120 a pocos ms por segundo). El giro mira hacia donde va. */
  .iss-viajera { transform-box: view-box; transform-origin: 0 0; animation: cruzar 18s linear 2.8s infinite backwards; }
  @keyframes cruzar {
    0% { transform: translate(352px, 236px) rotate(-116.2deg); opacity: 0; }
    3% { transform: translate(337.5px, 210.3px) rotate(-122.6deg); opacity: 0.5; }
    6% { transform: translate(320.2px, 186.5px) rotate(-129.7deg); opacity: 1; }
    9% { transform: translate(299.9px, 165.1px) rotate(-137.4deg); }
    12% { transform: translate(276.9px, 146.8px) rotate(-145.8deg); }
    15% { transform: translate(251.3px, 132.2px) rotate(-154.9deg); }
    18% { transform: translate(223.9px, 122px) rotate(-164.5deg); }
    21% { transform: translate(194.8px, 116.7px) rotate(-174.6deg); }
    24% { transform: translate(165.4px, 116.4px) rotate(-184.6deg); }
    27% { transform: translate(136.5px, 121.2px) rotate(-194.2deg); }
    30% { transform: translate(108.5px, 130.7px) rotate(-203.1deg); opacity: 1; }
    33% { transform: translate(82.4px, 144px) rotate(-210.9deg); }
    36% { transform: translate(58.2px, 160.7px) rotate(-217.9deg); }
    39%, 100% { transform: translate(36px, 180px) rotate(-224deg); opacity: 0; }
  }
}
@media (prefers-reduced-motion: reduce) { .iss-viajera { display: none; } }

/* Fuera de la pantalla o con la pestaña escondida, todo quieto (no gasta batería; mapa.js pone «pausado») */
.museo-mapa.pausado * { animation-play-state: paused !important; }

/* Lista de salas, debajo del mapa (también para quien no use el mapa y para lectores de pantalla) */
.lista-salas { list-style: none; margin: 4px 0 0; padding: 0; }
.lista-salas li { border-top: 1px solid var(--borde); }
.lista-salas li:first-child { border-top: 0; }
.lista-salas a, .lista-salas .sin-enlace { display: grid; grid-template-columns: 2.2em 1fr; gap: 0 4px; padding: 12px 0; min-height: 44px; text-decoration: none; color: var(--texto); }
.lista-salas .n { grid-row: span 2; color: var(--acento); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 1.15rem; line-height: 1.3; }
.lista-salas .t { font-weight: 600; line-height: 1.3; }
.lista-salas a .t { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lista-salas .d { color: var(--suave); font-size: 0.92rem; }
.lista-salas .sin-enlace .t, .lista-salas .sin-enlace .n { color: var(--suave); }
.lista-salas .marca { color: var(--acento); font-size: 0.85rem; font-weight: 600; margin-left: 6px; }
.lista-salas .pronto-texto { color: var(--suave); font-size: 0.85rem; font-weight: 400; margin-left: 6px; }

:root[data-modo="noche"] .museo-mapa, :root[data-modo="noche"] .museo-entrada { filter: url(#filtro-rojo); }

/* ===== Plantilla de sala (museo/<sala>.html) =====
   Pregunta grande con la mini bóveda encima, bloques de «experimento → qué está pasando», «¿Sabías que…?»,
   «¿Verdad o mito?», «Para llevarte», «Esta noche» y navegación entre salas. */

/* Cabecera: la mini bóveda (estás aquí) y la pregunta, algo más pequeña que el título de la portada porque es larga */
.sala-cabecera { padding-top: 22px; }
.sala-cabecera h1 { font-size: clamp(1.5rem, 6vw, 2.1rem); line-height: 1.2; text-wrap: balance; max-width: 22em; margin: 0 auto; }
.mini-boveda { display: block; width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; }
.mini-boveda svg { display: block; width: 100%; height: 100%; }
.mini-fondo { fill: var(--fondo); stroke: var(--borde); stroke-width: 8; transition: stroke 160ms; }
.mini-recorrido { fill: none; stroke: var(--acento); stroke-width: 9; stroke-linecap: round; opacity: 0.55; }
.mini-salas { fill: var(--suave); opacity: 0.6; }
.mini-aqui { fill: var(--acento); }
.mini-boveda:hover .mini-fondo, .mini-boveda:focus-visible .mini-fondo { stroke: var(--acento); }
@media (prefers-reduced-motion: no-preference) {
  /* La sala en la que estás late despacio, como una estrella: tres veces al llegar y se queda quieta */
  .mini-aqui { transform-box: fill-box; transform-origin: center; animation: mini-late 2.4s var(--ease-in-out) 3; }
  @keyframes mini-late { 50% { transform: scale(0.75); opacity: 0.7; } }
}

.sala-entrada { text-align: center; color: var(--suave); max-width: 34em; margin: 0 auto 18px; }

/* Bloque de experimento: subtítulo (pregunta), el experimento y «Qué está pasando» */
.sala-bloque h2 { font-size: 1.3rem; }
.que-pasa { margin: 16px 0 12px; padding-left: 14px; border-left: 1px solid var(--acento); }
.que-pasa h3 { margin: 0 0 4px; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; color: var(--acento); }
.que-pasa p { margin: 0; }

/* Con programa (clase puesta en la cabecera de la sala, antes de pintar), la barra fija del anochecer se cambia
   por el experimento, y los experimentos ocupan su sitio desde el principio para que la página no salte */
/* (Con una clase y no con «hidden»: estilos.css esconde [hidden] con !important y no se podría mostrar antes) */
.con-programa .sin-programa, .solo-con-programa { display: none; }
.con-programa .solo-con-programa { display: block; }

/* Experimento «El anochecer»: el paisaje (canvas) y debajo el mando, la fase y la hora de hoy */
.anochecer canvas, .adaptacion canvas { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: var(--fondo); touch-action: pan-y; }
/* Las estrellas que centellean de los lienzos: 4 capas transparentes encima de cada uno (titileo() en museo.js),
   con el mismo centelleo que el dibujo de «Esta noche» (estrella-titila, estilos.css). Sin fondo, que taparía el dibujo */
:is(.anochecer, .adaptacion, .cielo-luz) canvas.lienzo-titila { position: absolute; background: none; pointer-events: none; max-width: none; margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  canvas.lienzo-titila { animation: estrella-titila 1.6s linear infinite; }
}
/* Fuera de la pantalla, fuera del todo (en pausa seguían encareciendo el pintado de los otros dibujos) */
canvas.lienzo-titila.pausado { display: none; }
/* Mientras se mueve un mando (titileo() en museo.js), fuera del todo: solo escondidas seguían encareciendo el pintado */
canvas.lienzo-titila.esperando { display: none; }
.anochecer-mandos, .adaptacion-mandos { max-width: 36rem; margin: 12px auto 0; }
.anochecer-etiqueta { display: block; font-size: 0.85rem; color: var(--suave); margin-bottom: 2px; }
.anochecer input[type="range"], .adaptacion input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--acento); margin: 0; }
/* Cada marca en su minuto (--p, de 0 a 1, lo pone museo.js), centrada sobre donde queda el mando (11 px = medio
   botón del mando, que no llega hasta el borde) */
.anochecer-marcas { position: relative; height: 1.3em; font-size: 0.78rem; color: var(--suave); margin: -6px 0 8px; font-variant-numeric: tabular-nums; }
.anochecer-marcas span { position: absolute; top: 0; left: calc(11px + var(--p, 0) * (100% - 22px)); transform: translateX(-50%); white-space: nowrap; }
/* «Puesta» empieza en su punto y «−18°» acaba en el suyo: centradas se salían un poco por los lados */
.anochecer-marcas span:first-child { transform: translateX(-11px); }
.anochecer-marcas span:last-child { transform: translateX(calc(-100% + 11px)); }
/* Sitio fijo para los textos que cambian al mover el Sol (de 1 a 3 líneas en el móvil): si crecieran, empujarían
   todo lo de abajo y la página saltaría */
.anochecer-fase { margin: 0 0 2px; min-height: 4.5em; }
.anochecer-fase b { color: var(--texto); }
.anochecer-hora { color: var(--suave); font-size: 0.92rem; min-height: 3em; font-variant-numeric: tabular-nums; }
@media (min-width: 600px) { .anochecer-fase { min-height: 3em; } .anochecer-hora { min-height: 1.5em; } }
.anochecer-otra-vez { margin-top: 6px; }

/* Experimento «30 minutos a oscuras»: el cielo, el destello del móvil encima, el reloj y los botones */
.adaptacion-marco { position: relative; }
.adaptacion-destello { position: absolute; inset: 0; border-radius: 12px; background: #fff; opacity: 0; pointer-events: none; }
.adaptacion-destello.rojo { background: #c0201a; }
.adaptacion-reloj { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; }
.adaptacion-reloj .dato-cifra { font-size: 1.9rem; font-weight: 600; color: var(--acento); font-variant-numeric: tabular-nums; min-width: 4.2ch; }
.adaptacion-reloj .dato-texto { color: var(--suave); }
.adaptacion-reloj b { color: var(--texto); font-variant-numeric: tabular-nums; }
.adaptacion-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.adaptacion-empezar { flex-basis: 100%; justify-content: center; }
.adaptacion-movil, .adaptacion-roja { flex: 1 1 0; justify-content: center; }
.adaptacion-aviso { margin-top: 10px; min-height: 1.5em; color: var(--texto); }

/* «¿Sabías que…?»: una ventana al cielo, como la del museo en la portada (azul noche, esquinas redondeadas) */
.sabias {
  max-width: 36rem;
  margin: 8px auto 24px;
  padding: 16px 18px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background-color: var(--fondo);
  background-image:
    radial-gradient(circle at 6% 85%, rgba(241, 232, 209, 0.4) 0 0.9px, transparent 1.4px),
    radial-gradient(circle at 48% 8%, rgba(241, 232, 209, 0.35) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 93% 22%, rgba(241, 232, 209, 0.45) 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 92%, rgba(241, 232, 209, 0.3) 0 0.8px, transparent 1.3px);
}
.sabias h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 1.1rem; color: var(--acento); }
.sabias h2 .icono { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.sabias p { margin: 0; }
:root[data-modo="noche"] .sabias, :root[data-modo="noche"] .sala-nav, :root[data-modo="noche"] .sala-entrada, :root[data-modo="noche"] .luna-hoy { filter: url(#filtro-rojo); }

/* Esta noche: datos de hoy y el botón a la portada, en una «ventana» al cielo como la fila del museo de la portada
   (mismas capas de estrellas y mismas animaciones museo-deriva y museo-titila, que están en estilos.css) */
.esta-noche-ventana {
  max-width: 36rem;
  margin: 0 auto;
  padding: 14px 16px 4px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background-color: var(--fondo);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.esta-noche-ventana::before, .esta-noche-ventana::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 200%;
  z-index: -1;
  background-size: 50% 100%;
  background-repeat: repeat-x;
  pointer-events: none;
}
.esta-noche-ventana::before {
  background-image:
    radial-gradient(circle at 8% 12%, rgba(241, 232, 209, 0.55) 0 1px, transparent 1.5px),
    radial-gradient(circle at 37% 6%, rgba(241, 232, 209, 0.45) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 52% 94%, rgba(241, 232, 209, 0.5) 0 1px, transparent 1.5px),
    radial-gradient(circle at 79% 40%, rgba(241, 232, 209, 0.4) 0 1.1px, transparent 1.6px),
    radial-gradient(circle at 23% 70%, rgba(241, 232, 209, 0.35) 0 0.8px, transparent 1.3px);
}
.esta-noche-ventana::after {
  background-image:
    radial-gradient(circle at 14% 38%, rgba(241, 232, 209, 0.45) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 44% 52%, rgba(241, 232, 209, 0.35) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 70% 9%, rgba(241, 232, 209, 0.5) 0 1px, transparent 1.5px),
    radial-gradient(circle at 90% 80%, rgba(241, 232, 209, 0.45) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 62% 66%, rgba(241, 232, 209, 0.3) 0 0.8px, transparent 1.3px);
}
/* Aquí el centelleo es más suave que en la fila de la portada (no baja de 0,7): cada capa se apaga entera
   y, más fuerte, parecía que parpadeaba la ventana. El modo noche ya lo pone la .tarjeta (con dos filtros no se leía) */
@media (prefers-reduced-motion: no-preference) {
  .esta-noche-ventana::before { animation: museo-deriva 90s linear infinite, ventana-titila 1.3s linear infinite; }
  .esta-noche-ventana::after { animation: museo-deriva 140s linear infinite, ventana-titila 1.7s linear -0.6s infinite; }
}
@keyframes ventana-titila {
  0%, 100% { opacity: 1; }
  25% { opacity: 0.75; }
  50% { opacity: 0.95; }
  70% { opacity: 0.7; }
}
/* Fuera de la pantalla, quieta (esta-noche.js pone «pausado») */
.esta-noche-ventana.pausado::before, .esta-noche-ventana.pausado::after { animation-play-state: paused; }
/* Discreta: es un recordatorio al final de la sala, no lo principal (borde gris, título pequeño, enlace sin botón) */
.pagina-guia .esta-noche-ventana h2 { color: var(--acento); font-size: 1.15rem; margin-bottom: 6px; }
.esta-noche-datos { margin-bottom: 4px; }
.esta-noche-enlace { margin: 8px 0 10px; font-weight: 600; }
.esta-noche-enlace a { display: inline-block; padding: 4px 0; }   /* 24 px de alto como mínimo para tocarlo */
/* Tres cifras en fila: Sol, noche cerrada y Luna */
.esta-noche-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.esta-noche-lista li { display: flex; flex-direction: column; gap: 2px; }
.esta-noche-lista span { color: var(--suave); font-size: 0.8rem; line-height: 1.2; }
.esta-noche-lista b { color: var(--acento); font-variant-numeric: tabular-nums; font-size: 1.05rem; line-height: 1.2; white-space: nowrap; }
.esta-noche-lista small { font-size: 0.72em; font-weight: 500; color: var(--suave); }
/* Lo que llega después (nota, dibujo y línea de debajo) ocupa su sitio desde el principio sin verse (esta-noche.js),
   con el alto que suele tener, para que al llegar no empuje la página */
.esta-noche .esperando { visibility: hidden; }
.esta-noche-nota.esperando { min-height: 2.9em; }
/* El cielo a la mejor hora, plegado: se abre al tocar (flecha como la de «¿Verdad o mito?» sin programa) */
.esta-noche-cielo { border-top: 1px solid var(--borde); }
.esta-noche-cielo summary { list-style: none; cursor: pointer; padding: 10px 24px 10px 0; position: relative; font-size: 0.92rem; color: var(--suave); }
.esta-noche-cielo summary::-webkit-details-marker { display: none; }
.esta-noche-cielo summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 7px; height: 7px;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-70%) rotate(45deg); transition: transform 200ms var(--ease-out); }
.esta-noche-cielo[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.esta-noche-cielo summary:hover { color: var(--texto); }
.esta-noche-cielo .esta-noche-hora { padding-bottom: 10px; }
/* Los nombres del dibujo, algo más grandes que en la portada (aquí el dibujo es más estrecho) */
.esta-noche-dibujo :is(.linea-cielo-astro, .linea-cielo-texto, .linea-cielo-rotulo) { font-size: 14px; }
/* La nota de la noche (nubes y Luna), como en la portada */
.esta-noche-nota { margin: 12px 0 10px; font-size: 0.95rem; }
.esta-noche-nota b { font-size: 1.1rem; margin-right: 4px; font-variant-numeric: tabular-nums; }
.esta-noche-nota span { display: block; color: var(--suave); font-size: 0.85rem; }
/* En modo noche, la nota en tinta, como en la portada (el rojo de «noche mala» bajo el filtro rojo no se lee) */
:root[data-modo="noche"] .esta-noche-nota > b { color: var(--texto) !important; }
.esta-noche-nota .esta-noche-otra { color: var(--texto); font-size: 0.95rem; margin-top: 4px; }
.esta-noche-nota .esta-noche-otra b { color: var(--acento); font-size: inherit; margin: 0; }
/* El cielo a la mejor hora, de borde a borde de la ventana, y entero es un enlace a la portada */
.esta-noche-dibujo { display: block; margin: 0 -16px; color: var(--texto); text-decoration: none; }
.esta-noche-dibujo .cielo-marco { display: block; width: 100%; margin: 0; }
.esta-noche-dibujo .linea-cielo { width: 100%; margin: 0; aspect-ratio: 390 / 170; }
.esta-noche-hora { display: block; padding: 6px 16px 0; font-size: 0.95rem; }
.esta-noche-hora:empty::before { content: '\a0'; } /* una línea guardada mientras llega */
.esta-noche-hora b { color: var(--acento); font-variant-numeric: tabular-nums; }

/* Navegación entre salas */
.sala-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: 36rem; margin: 8px auto 0; padding: 18px 0 4px; border-top: 1px solid var(--borde); }
.sala-nav a, .sala-nav-pronto { display: inline-flex; align-items: center; min-height: 44px; }
.sala-nav-pronto { color: var(--suave); gap: 6px; }
.sala-nav-pronto span { font-size: 0.85rem; }

/* ===== Sala 2 · La Luna =====
   La Luna en 3D (luna3d.js, con los mapas reales de la NASA): el lienzo ya es un disco, con todo lo de fuera
   transparente, así que no hace falta recortarlo. Mientras no hay programa, o si algo falla (clase «fallo» que
   pone museo.js), la foto de siempre. */
.luna-marco { position: relative; display: block; }
.con-programa .luna-marco img { display: none; }
.con-programa .luna-marco.fallo img { display: block; }
.con-programa .luna-marco.fallo canvas { display: none; }
.luna-marco canvas, .luna-marco img { display: block; width: 100%; height: 100%; }
.luna-marco img { border-radius: 50%; object-fit: cover; }

/* La Luna de hoy: lo primero que se ve en la sala */
.luna-hoy { margin: 4px auto 22px; text-align: center; }
.luna-hoy-marco { width: min(300px, 78vw); aspect-ratio: 1; margin: 0 auto; }
.luna-hoy-dato { margin: 12px 0 0; font-size: 1.05rem; font-variant-numeric: tabular-nums; min-height: 1.5em; }
.luna-hoy-dato b { color: var(--acento); font-weight: 600; }
.luna-hoy-mas { margin: 2px 0 0; color: var(--suave); font-size: 0.9rem; min-height: 2.6em; }
.luna-hoy-mas b { color: var(--texto); }

/* Mandos de los experimentos de esta sala (como anochecer-marcas: --p lo pone museo.js) */
.luna-mandos { max-width: 36rem; margin: 14px auto 0; }
.luna-mandos label { display: block; font-size: 0.85rem; color: var(--suave); margin-bottom: 2px; }
.luna-mandos input[type=range] { width: 100%; min-height: 44px; accent-color: var(--acento); margin: 0; }
.luna-marcas { position: relative; height: 1.3em; font-size: 0.78rem; color: var(--suave); margin: -6px 0 8px; font-variant-numeric: tabular-nums; }
.luna-marcas span { position: absolute; top: 0; left: calc(11px + var(--p, 0) * (100% - 22px)); transform: translateX(-50%); white-space: nowrap; }
.luna-marcas span:first-child { transform: translateX(-11px); }
.luna-marcas span:last-child { transform: translateX(calc(-100% + 11px)); }

/* 1. Las fases: desde fuera (Sol, Tierra y la órbita, en SVG) y desde aquí (Luna 3D con estrellas detrás que
   se van apagando según crece, como en la Sala 1) */
.luna-fases-vistas { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.luna-fases-orbita { flex: 1 1 220px; max-width: 280px; }
.luna-fases-orbita svg { display: block; width: 100%; overflow: visible; }
.luna-fases-halo-dentro { stop-color: #ffd36b; stop-opacity: 0.35; }
.luna-fases-halo-fuera { stop-color: #ffd36b; stop-opacity: 0; }
.luna-fases-orbita-linea { fill: none; stroke: var(--borde); stroke-width: 1; stroke-dasharray: 2 4; }
/* Los rayos avanzan despacio hacia la derecha; quietos fuera de pantalla (museo.js pone «pausado») o con «reducir movimiento» */
/* Destellos de luz (museo.js los crea): salen del Sol, cruzan y se apagan; --d es hasta dónde llegan, --t lo que tardan */
.luna-fases-fotones ellipse { fill: url(#fases-foton); opacity: 0; animation: fases-foton var(--t) linear var(--r) infinite; }
.luna-fases-orbita.pausado .luna-fases-fotones ellipse { animation-play-state: paused; }
@keyframes fases-foton {
  0% { transform: translateX(0); opacity: 0; }
  12% { opacity: 1; }
  80% { opacity: 0.7; }
  100% { transform: translateX(var(--d)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .luna-fases-fotones { display: none; } }
/* Se puede arrastrar la Luna por la órbita: el dedo mueve la Luna, no la página (ni selecciona los rótulos) */
.luna-fases-orbita svg { touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.luna-fases-orbita svg:active { cursor: grabbing; }
.luna-fases-atmosfera { fill: none; stroke: #8fc2ff; stroke-width: 1; opacity: 0.35; }
.luna-fases-continentes { fill: #5f9a5a; opacity: 0.9; }
.luna-fases-mares circle { fill: #6f6b63; opacity: 0.55; }
.luna-fases-orbita svg.luna-fases-canto { margin-top: 6px; cursor: default; touch-action: auto; }
.luna-fases-orbita .luna-fases-rotulo-aqui { text-align: center; }
.luna-fases-plano { stroke: var(--borde); stroke-width: 1; }
.luna-fases-mirada { stroke: var(--acento); stroke-width: 1; stroke-dasharray: 1 3; opacity: 0.7; }
.luna-fases-rotulo { fill: var(--suave); font-size: 12px; text-anchor: middle; }
/* Las cuatro fases, para ir de un toque (museo.js marca la que está más cerca) */
.luna-fases-botones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 2px 0 4px; }
.luna-fases-botones button { min-height: 40px; padding: 6px 2px; border: 1px solid var(--borde); border-radius: 999px;
  background: transparent; color: var(--suave); font: inherit; font-size: 0.85rem; cursor: pointer;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out); }
.luna-fases-botones button:hover { border-color: var(--acento); color: var(--texto); }
.luna-fases-botones button[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--fondo); font-weight: 600; }
:root[data-modo="noche"] .luna-fases-botones button[aria-pressed="true"] { background: var(--texto); border-color: var(--texto); }
.luna-fases-aqui { flex: 0 0 auto; text-align: center; }
.luna-fases-aqui-caja { position: relative; display: block; width: 92px; aspect-ratio: 1; margin: 0 auto;
  border-radius: 50%; overflow: hidden; background: #03050f; }
.luna-fases-estrellas, .luna-fases-aqui-marco { position: absolute; inset: 0; width: 100%; height: 100%; }
.luna-fases-rotulo-aqui { margin: 6px 0 0; font-size: 0.78rem; color: var(--suave); }
.luna-fases-texto { margin: 14px 0 0; min-height: 2.6em; color: var(--suave); font-size: 0.92rem; }

/* 2. La línea de sombra: la Luna grande, con el relieve según los días que tiene */
.luna-relieve-marco { width: min(82%, 400px); aspect-ratio: 1; margin: 0 auto; }
.luna-relieve-texto { margin: 8px 0 0; min-height: 4.2em; }
.luna-relieve-texto b { color: var(--texto); }
.luna-relieve-otra-vez { margin-top: 6px; }

/* 3. La cara oculta: el botón gira la Luna 180° (fija en luna nueva: la cara que vemos, a oscuras) */
.luna-oculta { text-align: center; }
.luna-oculta-marco { width: min(260px, 70vw); aspect-ratio: 1; margin: 0 auto; }
/* Contorno fino: en luna nueva el disco es casi negro y, con el filtro rojo del modo noche, desaparecía */
.luna-oculta-marco::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--borde); border-radius: 50%; pointer-events: none; }
.luna-oculta-texto { margin: 12px auto; min-height: 2.6em; max-width: 34em; }

/* 4. La Luna en el horizonte: sale por detrás del paisaje (que va encima), anaranjada por el aire espeso de abajo.
   Sin paisaje sube al cielo vacío con el mismo tamaño, y abajo queda su contorno de puntos para comparar */
.luna-horizonte { text-align: center; }
.luna-horizonte-escena { position: relative; max-width: 36rem; margin: 0 auto; aspect-ratio: 390 / 220;
  border-radius: 12px; overflow: hidden; background: linear-gradient(#0a1030 0%, #1c2147 50%, #4a3552 82%, #6e4650 100%); }
.luna-horizonte-paisaje { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 400ms var(--ease-out); }
.luna-horizonte-lejos { fill: #161a33; }
.luna-horizonte-cerca { fill: #04060f; stroke: #04060f; stroke-width: 1.5; stroke-linejoin: round; }
.luna-horizonte-ventana { fill: #f6c56a; opacity: 0.85; }
.luna-horizonte-escena.sin-paisaje .luna-horizonte-paisaje { opacity: 0; }
.luna-horizonte-marco, .luna-horizonte-hueco { position: absolute; left: 18%; bottom: 20%; width: 24%; aspect-ratio: 1; }
.luna-horizonte-marco { filter: sepia(0.4) saturate(1.7) hue-rotate(-10deg) drop-shadow(0 0 12px rgba(255, 170, 90, 0.35));
  transition: transform 700ms var(--ease-out), filter 700ms var(--ease-out); }
.luna-horizonte-escena.sin-paisaje .luna-horizonte-marco { transform: translate(135%, -72%); filter: drop-shadow(0 0 10px rgba(230, 235, 255, 0.25)); }
.luna-horizonte-hueco { border: 1.5px dashed var(--suave); border-radius: 50%; opacity: 0; transition: opacity 300ms var(--ease-out); }
.luna-horizonte-medida { position: absolute; left: 47%; top: 58%; width: 32%; font-size: 0.8rem; color: var(--texto); opacity: 0; transition: opacity 300ms var(--ease-out); }
.sin-paisaje :is(.luna-horizonte-hueco, .luna-horizonte-medida) { opacity: 1; transition-delay: 400ms; }
@media (prefers-reduced-motion: reduce) {
  .luna-horizonte-marco, .luna-horizonte-paisaje, .luna-horizonte-hueco, .luna-horizonte-medida { transition: none; }
}
.luna-horizonte-boton { margin-top: 14px; }

/* (.luna-fases-orbita y .luna-horizonte-escena ya quedan en rojo al estar dentro de un .tarjeta: no hace falta repetirlo) */