/* =====================================================================
   BASE: estilos generales, estructura de la página, cabecera, menú y pie.
   Los colores vienen de tokens.css.

   ¿PARA QUÉ SIRVE ESTE ARCHIVO?
   Da el aspecto de fondo que comparten TODAS las pantallas: arreglos
   generales del navegador, letras y títulos, enlaces, el contorno de foco
   del teclado, la cabecera (marca y botón "Necesito apoyo"), el ancho del
   contenido, el menú principal, el pie de página y el aviso "sin conexión".

   ¿QUÉ PÁGINAS LO USAN?
   Todas (las 16 páginas .html). Se carga después de tokens.css y antes de
   componentes.css (y de publico.css o actividades.css en las páginas que
   los usan). Importa el orden: si dos reglas empatan, gana la que se lee
   DESPUÉS; por eso los componentes pueden cambiar lo que se define aquí.

   ÍNDICE DE SECCIONES
   1. Arreglos generales: box-sizing, [hidden], html y body.
   2. Tipografía: títulos, párrafos, enlaces e imágenes.
   3. Foco visible, texto solo para lectores de pantalla, "Saltar al
      contenido" e íconos.
   4. Cabecera: marca, eslogan y "Necesito apoyo".
   5. Contenido principal (<main>) y encabezado de página.
   6. Menú principal (abajo en el celular, en la cabecera en pantallas grandes).
   7. Pie de página (lo usa la bienvenida, index.html).
   8. Aviso "sin conexión".
   9. Reducir movimiento (accesibilidad).

   CÓMO LEER UNA REGLA CSS
   selector { propiedad: valor; }  El SELECTOR dice a qué elementos se aplica
   (.clase, #id o etiqueta); cada DECLARACIÓN "propiedad: valor;" cambia algo
   de su aspecto. var(--nombre) lee una variable definida en tokens.css.
   Los colores cambian solos en la apariencia nocturna (ver tokens.css).
   ===================================================================== */

/* Todos los elementos de la página y sus pseudo-elementos.
   * = selector universal: se aplica a TODOS los elementos.
   PSEUDO-ELEMENTO (::before, ::after): una "cajita" extra que el CSS dibuja antes o después del contenido de
   un elemento, sin que exista en el HTML (sirve para adornos, como flechas o números). */
*,
*::before, /* y el pseudo-elemento ::before de cada elemento */
*::after { /* y el pseudo-elemento ::after de cada elemento */
  box-sizing: border-box; /* el ancho incluye relleno y borde: las medidas son más fáciles de calcular */
} /* fin de la regla *, *::before, *::after */

/* El atributo hidden siempre oculta, aunque otra regla le dé un display (por ejemplo .boton) */
/* [hidden] = selector de ATRIBUTO: elige los elementos que tienen el atributo hidden en el HTML o a los que
   JavaScript se lo puso (elemento.hidden = true). Todas las páginas lo usan para mostrar u ocultar partes. */
[hidden] {
  display: none !important; /* no se muestra ni ocupa lugar; !important le gana a cualquier otra regla */
} /* fin de la regla [hidden] */

/* Etiqueta <html>: evita que el celular agrande el texto por su cuenta al girar la pantalla */
html {
  -webkit-text-size-adjust: 100%; /* versión con PREFIJO (-webkit-) para Safari del iPhone: tamaño sin cambios */
  text-size-adjust: 100%; /* la versión estándar de lo mismo */
} /* fin de la regla html */

/* <body>: el cuerpo de TODA página. Fondo, color y letra base; es una columna flexible para que, si el
   contenido es corto, el pie de página igual quede abajo. */
body {
  margin: 0; /* quita el margen que el navegador pone por defecto alrededor de la página */
  min-height: 100vh; /* mide al menos el alto de la ventana (1vh = 1 % del alto de la ventana) */
  display: flex; /* FLEX (caja flexible): acomoda a sus hijos en una fila o en una columna y reparte el espacio */
  flex-direction: column; /* los hijos (cabecera, main y pie) van uno debajo del otro */
  background: var(--color-fondo); /* var() lee la variable de tokens.css: fondo crema (u oscuro de noche) */
  color: var(--color-texto); /* color de texto que heredan todos los elementos */
  font-family: var(--fuente); /* letra del sistema (ver tokens.css) */
  font-size: var(--texto-normal); /* 16 px de base */
  line-height: 1.6; /* alto de cada línea: 1,6 veces el tamaño de la letra (se lee con más aire) */
  -webkit-font-smoothing: antialiased; /* en Mac dibuja la letra más fina y nítida */
} /* fin de la regla body */

/* ---------------------------------------------------------------------
   Tipografía (tamaños en tokens.css)
   --------------------------------------------------------------------- */
/* Todos los títulos h1, h2 y h3 de todas las páginas (una coma separa varios selectores) */
h1,
h2, /* los subtítulos h2 (misma regla) */
h3 { /* y los títulos pequeños h3 */
  margin: 0 0 var(--espacio-3); /* tres valores = arriba, lados y abajo: solo 16 px de margen abajo */
  font-family: var(--fuente-titulos); /* letra redondeada si el dispositivo la tiene */
  line-height: 1.2; /* líneas más juntas que en el texto normal: los títulos se ven compactos */
  letter-spacing: -0.01em; /* letras un poquito más juntas (1em = el tamaño de la letra actual) */
  text-wrap: balance; /* reparte las palabras para que no quede una sola al final */
} /* fin de la regla h1, h2, h3 */

/* Título principal de cada página ("Tu historial", "Ajustes", "Entrar"...) */
h1 {
  font-size: var(--texto-titulo); /* de 28 a 31 px según el ancho de la pantalla */
  font-weight: 800; /* grosor de la letra: 400 es normal, 700 negrita y 800 extra negrita */
  letter-spacing: -0.02em; /* letras aún más juntas porque es grande */
} /* fin de la regla h1 */

/* Subtítulos h2: títulos de tarjetas y de secciones ("Tu cuenta", "El camino de Nubbit"...) */
h2 {
  margin-top: var(--espacio-5); /* 40 px de aire arriba: separa una sección de la anterior */
  font-size: var(--texto-grande); /* 20 px */
  font-weight: 750; /* entre negrita (700) y extra negrita (800) */
} /* fin de la regla h2 */

/* Títulos pequeños h3: fechas del historial, líneas de ayuda de apoyo.html, pasos de la bienvenida */
h3 {
  font-size: var(--texto-normal); /* 16 px, como el texto: se distingue por la negrita */
  font-weight: 700; /* negrita */
} /* fin de la regla h3 */

/* Párrafos de todas las páginas */
p {
  margin: 0 0 var(--espacio-3); /* solo margen abajo (16 px): separa un párrafo del siguiente */
  text-wrap: pretty; /* evita que la última línea de un párrafo quede con una sola palabra */
} /* fin de la regla p */

/* Enlaces <a> de todas las páginas: violetas, porque lo que se puede tocar siempre es violeta */
a {
  color: var(--color-primario); /* violeta Noosfera */
  text-decoration-thickness: 1.5px; /* grosor de la línea del subrayado */
  text-underline-offset: 0.18em; /* separa un poco el subrayado de las letras: se lee mejor */
} /* fin de la regla a */

/* Enlace con el puntero del mouse encima.
   :hover es una PSEUDO-CLASE: elige un elemento según su ESTADO (aquí, "el mouse está encima"). En estos
   archivos verás otras: :focus (tiene el foco), :focus-visible (foco con el teclado), :checked (marcado). */
a:hover {
  color: var(--color-primario-hover); /* violeta más oscuro: se nota que responde */
} /* fin de la regla a:hover */

/* Texto importante en negrita (<strong>) dentro de los párrafos */
strong {
  font-weight: 700; /* negrita fija (sin esto el navegador la calcula según el texto de alrededor) */
} /* fin de la regla strong */

/* Imágenes y dibujos SVG: nunca más anchos que su contenedor (así no se salen de la pantalla del celular) */
img,
svg { /* y los dibujos SVG (misma regla que img) */
  max-width: 100%; /* como máximo, el ancho del elemento que los contiene */
} /* fin de la regla img, svg */

/* Foco SIEMPRE visible al navegar con teclado (accesibilidad) */
/* :focus-visible = el elemento tiene el foco y el navegador decide mostrarlo (al usar la tecla Tab).
   Sin nada delante, vale para cualquier elemento: botones, enlaces, campos, casillas... */
:focus-visible {
  outline: 3px solid var(--color-foco); /* contorno azul de 3 px por FUERA del elemento (no cambia su tamaño) */
  outline-offset: 3px; /* separa el contorno 3 px del borde: no tapa el contenido */
  border-radius: 4px; /* esquinas un poco redondeadas (el contorno las sigue) */
} /* fin de la regla :focus-visible */

/* Oculta un elemento a la vista pero lo deja disponible para lectores de pantalla */
/* Se usa en títulos y avisos que solo necesita OÍR quien usa lector de pantalla (por ejemplo, el título del
   calendario en historial.html o el "Guardando…" del inicio). display:none no sirve: el lector tampoco lo leería. */
.visualmente-oculto {
  position: absolute !important; /* lo saca del flujo: no ocupa lugar ni empuja a los demás elementos */
  width: 1px; /* ancho mínimo: 1 píxel */
  height: 1px; /* alto mínimo: 1 píxel */
  padding: 0; /* sin relleno */
  margin: -1px; /* margen negativo: compensa el píxel que mide */
  overflow: hidden; /* lo que no cabe en ese píxel no se ve */
  clip: rect(0 0 0 0); /* recorta el elemento a un rectángulo vacío: queda invisible */
  white-space: nowrap; /* el texto no se parte en líneas (algunos lectores leerían palabra por palabra) */
  border: 0; /* sin borde */
} /* fin de la regla .visualmente-oculto */

/* Enlace "Saltar al contenido": aparece solo al recibir el foco con Tab */
/* Es el primer enlace de TODAS las páginas: con el teclado permite saltarse la cabecera y el menú. */
.saltar {
  position: absolute; /* ABSOLUTA: se ubica con top y left respecto a la página, por encima de lo demás */
  top: var(--espacio-2); /* 8 px desde arriba */
  left: var(--espacio-2); /* 8 px desde la izquierda */
  z-index: 100; /* orden de apilado: un número mayor queda ENCIMA (la cabecera usa 40 y el menú 50) */
  padding: var(--espacio-2) var(--espacio-3); /* relleno: dos valores = 8 px arriba y abajo, 16 px a los lados */
  background: var(--color-superficie); /* fondo blanco (u oscuro de noche) */
  color: var(--color-texto); /* texto oscuro */
  border-radius: var(--radio); /* esquinas redondeadas */
  box-shadow: var(--sombra-elevada); /* sombra marcada: se ve flotando */
  transform: translateY(-200%); /* lo sube el doble de su alto: queda fuera de la pantalla hasta recibir foco */
} /* fin de la regla .saltar */

/* El mismo enlace cuando recibe el foco (primer Tab al entrar a la página): baja y se ve */
.saltar:focus {
  transform: none; /* quita el desplazamiento: vuelve a su lugar, visible */
} /* fin de la regla .saltar:focus */

/* Ícono del set propio (img/iconos.svg): toma el color del texto que lo rodea */
/* Todos los íconos de trazo de la app: corazón de "Necesito apoyo", flechas, candado, íconos del menú... */
.icono {
  display: inline-block; /* va en la línea del texto, pero acepta ancho y alto */
  width: 1.4em; /* 1,4 veces la letra de alrededor: el ícono crece con el texto */
  height: 1.4em; /* alto igual al ancho: cuadrado */
  flex-shrink: 0; /* dentro de una caja flex no se encoge aunque falte espacio */
  fill: none; /* propiedad de SVG: sin relleno, solo líneas */
  stroke: currentColor; /* color de las líneas = color del texto actual (currentColor) */
  stroke-width: 2; /* grosor de las líneas del dibujo */
  stroke-linecap: round; /* puntas de las líneas redondeadas */
  stroke-linejoin: round; /* uniones de las líneas redondeadas */
  vertical-align: middle; /* se alinea con la mitad del texto */
} /* fin de la regla .icono */

/* ---------------------------------------------------------------------
   Cabecera: marca, menú (en pantallas grandes) y "Necesito apoyo".
   Queda fija arriba al desplazarse: el apoyo siempre está a mano.
   (Sin transform ni filtros: el menú del celular, que está adentro, usa position: fixed.)
   --------------------------------------------------------------------- */
/* <header class="cabecera">: la barra de arriba de TODAS las páginas */
.cabecera {
  position: sticky; /* STICKY ("pegajosa"): baja con la página hasta tocar el borde de arriba y ahí se queda */
  top: 0; /* se pega justo al borde superior de la ventana */
  z-index: 40; /* queda encima del contenido que pasa por debajo al desplazarse */
  background: var(--color-superficie); /* fondo blanco: el contenido no se transparenta */
  border-bottom: 1px solid var(--color-borde); /* línea fina que la separa del contenido */
} /* fin de la regla .cabecera */

/* Fila interna de la cabecera: marca a la izquierda, menú al medio (pantallas grandes), apoyo a la derecha.
   Nombres de clase: "cabecera__contenido" = bloque__elemento (una parte que vive dentro de la cabecera) y
   "boton--grande" = bloque--variante (otra versión del bloque). Así se sabe a qué pieza pertenece cada clase. */
.cabecera__contenido {
  display: flex; /* caja flexible: los hijos quedan en una fila */
  align-items: center; /* los centra en vertical */
  justify-content: space-between; /* reparte el espacio: el primero a la izquierda y el último a la derecha */
  gap: var(--espacio-3); /* 16 px de separación mínima entre ellos */
  max-width: var(--ancho-amplio); /* no pasa de 70rem aunque la ventana sea más ancha */
  min-height: 4rem; /* alto mínimo de la barra: 64 px */
  margin: 0 auto; /* 0 arriba y abajo; auto a los lados: centra la fila en la pantalla */
  padding: var(--espacio-2) var(--espacio-3); /* 8 px arriba y abajo, 16 px a los lados */
} /* fin de la regla .cabecera__contenido */

/* Logo "Noosfera" de la cabecera (ícono de Nubbit + nombre); es un enlace a la bienvenida o al inicio */
.marca {
  display: inline-flex; /* flex en línea: el ícono y el nombre en fila */
  align-items: center; /* centrados en vertical */
  gap: var(--espacio-2); /* 8 px entre el ícono y el nombre */
  min-height: 44px; /* área mínima de 44 px: fácil de tocar con el dedo */
  color: var(--color-texto); /* nombre en color tinta (no violeta de enlace) */
  font-family: var(--fuente-titulos); /* letra redondeada */
  font-size: var(--texto-grande); /* 20 px */
  font-weight: 800; /* extra negrita */
  letter-spacing: -0.01em; /* letras un poco más juntas */
  text-decoration: none; /* sin subrayado de enlace */
} /* fin de la regla .marca */

/* El ícono de Nubbit dentro de la marca. ".marca img" = las <img> que están DENTRO de .marca
   (un espacio entre selectores significa "descendiente de") */
.marca img {
  width: 36px; /* ancho del ícono */
  height: 36px; /* alto del ícono */
} /* fin de la regla .marca img */

/* Las dos "o" de Noosfera en violeta: son los ojos de Nubbit (ver docs/identidad-visual.md) */
.marca__oo {
  color: var(--color-primario); /* violeta Noosfera */
} /* fin de la regla .marca__oo */

/* Eslogan "Siente, nombra y crece." bajo un título (clase lista para usar; hoy ninguna página la tiene) */
.eslogan {
  margin-top: calc(-1 * var(--espacio-2)); /* calc() hace cuentas: -8 px, lo acerca al título de arriba */
  color: var(--color-primario); /* violeta */
  font-size: var(--texto-grande); /* 20 px */
  font-weight: 700; /* negrita */
} /* fin de la regla .eslogan */

/* "Necesito apoyo": siempre visible y distinto de los demás botones (con corazón) */
/* Está en la cabecera de TODAS las páginas y lleva a apoyo.html */
.enlace-apoyo {
  display: inline-flex; /* corazón y texto en fila */
  align-items: center; /* centrados en vertical */
  gap: var(--espacio-2); /* 8 px entre el corazón y el texto */
  min-height: 44px; /* fácil de tocar */
  padding: var(--espacio-1) var(--espacio-3); /* 4 px arriba y abajo, 16 px a los lados */
  border: 2px solid var(--color-primario); /* borde violeta de 2 px */
  border-radius: 999px; /* radio enorme: forma de "pastilla" (extremos redondos) */
  background: var(--color-primario-suave); /* fondo lila */
  color: var(--color-primario); /* texto violeta */
  font-weight: 700; /* negrita */
  text-decoration: none; /* sin subrayado */
  white-space: nowrap; /* "Necesito apoyo" nunca se parte en dos líneas */
  /* TRANSICIÓN: al pasar el mouse, el fondo y el color cambian poco a poco (0,15 s) y no de golpe */
  transition: background-color var(--transicion-rapida), color var(--transicion-rapida);
} /* fin de la regla .enlace-apoyo */

/* "Necesito apoyo" con el mouse encima, o cuando ya estás en apoyo.html (aria-current="page" marca
   la página actual y el lector de pantalla lo anuncia): se rellena de violeta */
.enlace-apoyo:hover,
.enlace-apoyo[aria-current="page"] { /* o cuando ya estás en apoyo.html (página actual) */
  background: var(--color-primario); /* fondo violeta */
  color: var(--color-sobre-primario); /* texto blanco */
} /* fin de la regla .enlace-apoyo:hover, .enlace-apoyo[aria-current="page"] */

/* El corazón de "Necesito apoyo", un poco más pequeño que los demás íconos */
.enlace-apoyo .icono {
  width: 1.2em; /* ancho del corazón */
  height: 1.2em; /* alto del corazón */
} /* fin de la regla .enlace-apoyo .icono */

/* ---------------------------------------------------------------------
   Contenido principal
   --------------------------------------------------------------------- */
/* <main>: el contenido principal de cada página, centrado y con un ancho cómodo para leer */
main {
  flex: 1; /* ocupa todo el alto que sobra dentro del body (flex): así el pie queda abajo */
  width: 100%; /* todo el ancho disponible... */
  max-width: var(--ancho-contenido); /* ...pero máximo 42rem: las líneas muy largas cansan al leer */
  margin: 0 auto; /* centrado a lo ancho */
  padding: var(--espacio-5) var(--espacio-3) var(--espacio-6); /* 40 px arriba, 16 a los lados, 64 abajo */
} /* fin de la regla main */

/* Páginas con tarjetas en columnas (inicio, actividades, progreso) */
/* main.contenido--amplio = un <main> que ADEMÁS tiene la clase contenido--amplio (sin espacio: el mismo elemento) */
main.contenido--amplio {
  max-width: var(--ancho-amplio); /* más ancho (70rem) para que quepan dos o más columnas */
} /* fin de la regla main.contenido--amplio */

/* <main> cuando recibe el foco ("Saltar al contenido" lo enfoca gracias a su tabindex="-1") */
main:focus {
  outline: none; /* sin contorno: marcar TODO el contenido con un borde azul confundiría */
} /* fin de la regla main:focus */

/* En el celular el menú va abajo: dejamos espacio para que no tape el contenido */
/* body[data-menu="completo"] = las páginas privadas, que son las que tienen menú (inicio, registrar,
   historial, progreso, actividades, respirar, anclaje, memoria y ajustes) */
body[data-menu="completo"] main {
  /* relleno de abajo = alto del menú + 40 px + la zona segura del celular. env(safe-area-inset-bottom) es el
     espacio de la barra de gestos del iPhone (0 si el celular no tiene) */
  padding-bottom: calc(var(--alto-menu-movil) + var(--espacio-5) + env(safe-area-inset-bottom));
} /* fin de la regla body[data-menu="completo"] main */

/* Texto de introducción bajo el título de una página ("Solo tú puedes ver tus registros...") */
.introduccion {
  max-width: 38rem; /* líneas no demasiado largas */
  color: var(--color-texto-suave); /* gris violeta: menos protagonismo que el título */
  font-size: 1.0625rem; /* 17 px: un poco más grande que el texto normal */
} /* fin de la regla .introduccion */

/* Título de página con su texto de apoyo */
/* (<div class="encabezado-pagina"> con un h1 y su introducción en historial, progreso, registrar, ajustes
   y actividades) */
.encabezado-pagina {
  margin-bottom: var(--espacio-4); /* 24 px de separación con lo que sigue */
} /* fin de la regla .encabezado-pagina */

/* El h1 dentro de ese encabezado */
.encabezado-pagina h1 {
  margin-bottom: var(--espacio-2); /* más cerca de su introducción (8 px en vez de 16) */
} /* fin de la regla .encabezado-pagina h1 */

/* La introducción dentro del encabezado */
.encabezado-pagina .introduccion {
  margin-bottom: 0; /* sin margen: el encabezado ya pone el espacio de abajo */
} /* fin de la regla .encabezado-pagina .introduccion */

/* ---------------------------------------------------------------------
   Menú principal (lo dibuja js/comun.js dentro de la cabecera)
   Celular y tableta: barra fija abajo. Pantallas grandes: dentro de la cabecera.
   --------------------------------------------------------------------- */
/* <nav class="menu"> de las páginas privadas: Inicio, Historial, Actividades, Progreso y Ajustes.
   Primero se escribe el diseño del celular y, más abajo, una media query lo cambia en pantallas grandes.
   Esto se llama DISEÑO ADAPTABLE (responsive): la misma página se acomoda a cada tamaño de pantalla. */
.menu {
  position: fixed; /* FIJO: queda clavado en la ventana y no se mueve al desplazar la página */
  inset: auto 0 0 0; /* arriba, derecha, abajo, izquierda: pegado abajo y de lado a lado */
  z-index: 50; /* encima del contenido y de la cabecera */
  background: var(--color-superficie); /* fondo blanco */
  border-top: 1px solid var(--color-borde); /* línea fina arriba */
  box-shadow: 0 -4px 16px rgb(42 35 64 / 0.06); /* sombra hacia ARRIBA (-4px): se despega del contenido */
  padding-bottom: env(safe-area-inset-bottom); /* deja libre la barra de gestos del iPhone */
} /* fin de la regla .menu */

/* La lista de opciones del menú (en el celular, una fila repartida a lo ancho) */
.menu ul {
  display: flex; /* opciones en fila */
  justify-content: space-around; /* reparte el espacio alrededor de cada opción */
  max-width: var(--ancho-contenido); /* en tabletas no se estira de más */
  margin: 0 auto; /* centrada */
  padding: 0; /* quita la sangría que el navegador pone a las listas */
  list-style: none; /* sin viñetas */
} /* fin de la regla .menu ul */

/* Cada opción del menú */
.menu li {
  flex: 1; /* todas crecen por igual: cinco partes del mismo ancho */
} /* fin de la regla .menu li */

/* El enlace de cada opción: en el celular, ícono arriba y texto abajo */
.menu a {
  display: flex; /* caja flexible */
  flex-direction: column; /* en columna: el ícono encima del texto */
  align-items: center; /* centrados a lo ancho */
  justify-content: center; /* centrados a lo alto */
  gap: 2px; /* un poquito de espacio entre ícono y texto */
  min-height: var(--alto-menu-movil); /* alto de la barra (68 px): fácil de tocar */
  padding: var(--espacio-1); /* 4 px de relleno */
  color: var(--color-texto-suave); /* gris violeta (la opción actual se pinta de violeta) */
  font-size: 0.8125rem; /* 13 px: letra pequeña para que quepan las cinco */
  font-weight: 600; /* seminegrita */
  text-decoration: none; /* sin subrayado */
} /* fin de la regla .menu a */

/* El ícono va en una "pastilla" que se colorea en la página actual */
.menu__icono {
  display: grid; /* GRID (cuadrícula): ordena los hijos en filas y columnas; aquí sirve para centrar el ícono */
  place-items: center; /* centra el ícono a lo alto y a lo ancho */
  width: 3.5rem; /* ancho de la pastilla (56 px) */
  height: 2rem; /* alto de la pastilla (32 px) */
  border-radius: 999px; /* forma de pastilla */
  transition: background-color var(--transicion-rapida); /* el fondo aparece suavemente */
} /* fin de la regla .menu__icono */

/* Los íconos del menú */
.menu .icono {
  width: 24px; /* ancho fijo */
  height: 24px; /* alto fijo */
} /* fin de la regla .menu .icono */

/* Opción del menú con el mouse encima */
.menu a:hover {
  color: var(--color-texto); /* el texto se oscurece */
} /* fin de la regla .menu a:hover */

/* Opción de la página en la que estás (comun.js le pone aria-current="page") */
.menu a[aria-current="page"] {
  color: var(--color-primario); /* violeta */
  font-weight: 800; /* más negrita */
} /* fin de la regla .menu a[aria-current="page"] */

/* La pastilla del ícono de la página actual */
.menu a[aria-current="page"] .menu__icono {
  background: var(--color-primario-suave); /* se rellena de lila */
} /* fin de la regla .menu a[aria-current="page"] .menu__icono */

/* MEDIA QUERY (@media): las reglas de adentro solo se aplican si se cumple la condición; aquí, si la
   ventana mide 900 px de ancho o más (computadores y tabletas grandes). El menú deja de ser una barra
   fija abajo y pasa a la cabecera, en una fila. */
@media (min-width: 900px) {
  /* El menú dentro de la cabecera, entre la marca y "Necesito apoyo" */
  .menu {
    position: static; /* vuelve al flujo normal: ya no está fijo abajo */
    flex: 1; /* ocupa el espacio libre del medio de la cabecera */
    background: none; /* sin fondo propio */
    border: 0; /* sin borde */
    box-shadow: none; /* sin sombra */
    padding: 0; /* sin relleno */
  } /* fin de la regla .menu (pantallas grandes) */

  /* La lista de opciones, centrada */
  .menu ul {
    justify-content: center; /* opciones agrupadas en el centro */
    gap: var(--espacio-1); /* 4 px entre opciones */
    max-width: none; /* sin límite de ancho */
  } /* fin de la regla .menu ul (pantallas grandes) */

  /* Cada opción mide lo que su contenido */
  .menu li {
    flex: none; /* ya no se estiran para repartirse el ancho */
  } /* fin de la regla .menu li (pantallas grandes) */

  /* Enlace de cada opción: ícono y texto en fila, dentro de una pastilla */
  .menu a {
    flex-direction: row; /* el ícono a la izquierda del texto */
    gap: var(--espacio-2); /* 8 px entre ícono y texto */
    min-height: 2.75rem; /* 44 px de alto */
    padding: 0 var(--espacio-3) 0 var(--espacio-2); /* cuatro valores: arriba 0, derecha 16, abajo 0, izq. 8 px */
    border-radius: 999px; /* forma de pastilla */
    font-size: var(--texto-normal); /* letra normal (16 px) */
    /* el fondo y el color cambian suavemente al pasar el mouse */
    transition: background-color var(--transicion-rapida), color var(--transicion-rapida);
  } /* fin de la regla .menu a (pantallas grandes) */

  /* La pastilla del ícono ya no hace falta: ahora se colorea el enlace completo */
  .menu__icono {
    width: auto; /* mide lo que mide el ícono */
    height: auto; /* ídem en alto */
    background: none !important; /* nunca lleva fondo (!important le gana a la regla de la página actual) */
  } /* fin de la regla .menu__icono (pantallas grandes) */

  /* Íconos del menú un poco más pequeños */
  .menu .icono {
    width: 22px; /* ancho */
    height: 22px; /* alto */
  } /* fin de la regla .menu .icono (pantallas grandes) */

  /* Opción con el mouse encima */
  .menu a:hover {
    background: var(--color-superficie-suave); /* fondo lila muy claro */
  } /* fin de la regla .menu a:hover (pantallas grandes) */

  /* Opción de la página actual */
  .menu a[aria-current="page"] {
    background: var(--color-primario-suave); /* pastilla lila */
  } /* fin de la regla .menu a[aria-current="page"] (pantallas grandes) */

  /* El menú ya no está abajo: el <main> de las páginas privadas no necesita el espacio extra */
  body[data-menu="completo"] main {
    padding-bottom: var(--espacio-6); /* 64 px, como las demás páginas */
  } /* fin de la regla body[data-menu="completo"] main (pantallas grandes) */
} /* fin del @media (min-width: 900px): menú dentro de la cabecera */

/* ---------------------------------------------------------------------
   Pie de página (páginas públicas)
   --------------------------------------------------------------------- */
/* <footer class="pie"> al final de la bienvenida (index.html): marca, créditos del proyecto y enlaces */
.pie {
  border-top: 1px solid var(--color-borde); /* línea fina que lo separa del contenido */
  background: var(--color-superficie); /* fondo blanco */
  color: var(--color-texto-suave); /* texto gris violeta */
  font-size: var(--texto-pequeno); /* letra pequeña (14 px) */
} /* fin de la regla .pie */

/* Caja interna del pie: una columna en el celular y dos en pantallas anchas */
.pie__contenido {
  display: grid; /* cuadrícula (por defecto, una sola columna) */
  gap: var(--espacio-3); /* 16 px entre bloques */
  max-width: var(--ancho-amplio); /* el mismo ancho que la cabecera */
  margin: 0 auto; /* centrado */
  padding: var(--espacio-5) var(--espacio-3); /* 40 px arriba y abajo, 16 px a los lados */
} /* fin de la regla .pie__contenido */

/* Desde 720 px de ancho: dos columnas (créditos a la izquierda y enlaces a la derecha) */
@media (min-width: 720px) {
  /* Caja interna del pie: pasa a dos columnas */
  .pie__contenido {
    grid-template-columns: 1.4fr 1fr; /* dos columnas; fr = parte del espacio libre (1,4 partes y 1 parte) */
    align-items: start; /* cada bloque arriba de su celda */
  } /* fin de la regla .pie__contenido (dos columnas) */
} /* fin del @media (min-width: 720px): pie en dos columnas */

/* Párrafos del pie */
.pie p {
  margin: 0; /* sin márgenes: el espacio lo da el gap de la cuadrícula */
} /* fin de la regla .pie p */

/* Primera línea del pie: ícono de Nubbit y "Noosfera · Siente, nombra y crece." */
.pie__marca {
  display: flex; /* ícono y texto en fila */
  align-items: center; /* centrados en vertical */
  gap: var(--espacio-2); /* 8 px entre ellos */
  margin-bottom: var(--espacio-2) !important; /* 8 px debajo; !important le gana a la regla ".pie p" */
  color: var(--color-texto); /* texto oscuro */
  font-family: var(--fuente-titulos); /* letra redondeada */
  font-weight: 800; /* extra negrita */
} /* fin de la regla .pie__marca */

/* Ícono de Nubbit en el pie */
.pie__marca img {
  width: 28px; /* ancho */
  height: 28px; /* alto */
} /* fin de la regla .pie__marca img */

/* Lista de enlaces del pie ("Buscar apoyo", "Cómo cuidamos tus datos", "Entrar") */
.pie ul {
  display: flex; /* en fila */
  flex-wrap: wrap; /* si no caben, pasan a otra línea */
  gap: var(--espacio-1) var(--espacio-4); /* 4 px entre filas y 24 px entre columnas */
  margin: 0; /* sin márgenes */
  padding: 0; /* sin la sangría de las listas */
  list-style: none; /* sin viñetas */
} /* fin de la regla .pie ul */

/* En pantallas anchas, los enlaces se alinean a la derecha */
@media (min-width: 720px) {
  /* Lista de enlaces del pie */
  .pie ul {
    justify-content: flex-end; /* empuja la fila hacia la derecha */
  } /* fin de la regla .pie ul (enlaces a la derecha) */
} /* fin del @media (min-width: 720px): enlaces del pie a la derecha */

/* Cada enlace del pie */
.pie a {
  display: inline-flex; /* permite darle alto y centrar el texto */
  align-items: center; /* texto centrado en vertical */
  min-height: 44px; /* área cómoda para tocar */
  font-weight: 600; /* seminegrita */
} /* fin de la regla .pie a */

/* ---------------------------------------------------------------------
   Aviso "sin conexión" (lo muestra js/comun.js)
   --------------------------------------------------------------------- */
/* Franja amarilla bajo la cabecera: "Estás sin conexión..." (aparece en cualquier página si se va internet) */
.aviso-conexion {
  margin: 0; /* sin márgenes */
  padding: var(--espacio-2) var(--espacio-3); /* 8 px arriba y abajo, 16 px a los lados */
  background: var(--color-aviso-fondo); /* amarillo pálido */
  border-bottom: 1px solid var(--color-aviso-borde); /* línea dorada abajo */
  text-align: center; /* texto centrado */
  font-size: var(--texto-pequeno); /* letra pequeña */
} /* fin de la regla .aviso-conexion */

/* Con conexión, comun.js le pone el atributo hidden: la franja no se muestra */
.aviso-conexion[hidden] {
  display: none; /* oculta */
} /* fin de la regla .aviso-conexion[hidden] */

/* Respeta a quien pidió reducir el movimiento en su sistema */
/* prefers-reduced-motion: reduce = la persona activó "reducir movimiento" en su celular o computador (a algunas
   personas las animaciones les causan mareo o distracción). Entonces, en TODOS los elementos, las ANIMACIONES
   (movimientos definidos con @keyframes, como el salto de Nubbit) y las TRANSICIONES duran casi 0: los cambios
   siguen pasando, pero sin movimiento. */
@media (prefers-reduced-motion: reduce) {
  /* Todos los elementos y sus pseudo-elementos ::before y ::after */
  *,
  *::before, /* y su pseudo-elemento ::before */
  *::after { /* y su pseudo-elemento ::after */
    animation-duration: 0.01ms !important; /* animaciones casi instantáneas */
    animation-iteration-count: 1 !important; /* las que se repiten sin fin se hacen una sola vez */
    transition-duration: 0.01ms !important; /* transiciones casi instantáneas */
    scroll-behavior: auto !important; /* los saltos dentro de la página son directos, sin deslizarse */
  } /* fin de la regla *, *::before, *::after (sin movimiento) */
} /* fin del @media (prefers-reduced-motion: reduce) */

/* Menú de abajo con 6 opciones (se agregó «Mi isla», ver docs/islas.md) en pantallas angostas: la pastilla
   del ícono y la letra se achican un poco para que quepan las 6 sin cortarse. Con 5 opciones o en
   pantallas grandes (menú en la cabecera) no cambia nada.
   li:first-child:nth-last-child(6) = el primer <li> cuando la lista tiene exactamente 6; "~ li" = sus hermanos. */
@media (max-width: 559px) {
  .menu li:first-child:nth-last-child(6) .menu__icono,
  .menu li:first-child:nth-last-child(6) ~ li .menu__icono { /* y la de las demás opciones */
    width: 2.75rem; /* 44 px en vez de 56 px */
  } /* fin de la regla de la pastilla más angosta */
  .menu li:first-child:nth-last-child(6) a,
  .menu li:first-child:nth-last-child(6) ~ li a { /* y los de las demás opciones */
    padding-inline: 1px; /* casi sin relleno a los lados */
    font-size: 0.6875rem; /* 11 px: letra un poco más pequeña para que quepan las 6 */
  } /* fin de la regla de los enlaces más compactos */
} /* fin del @media (max-width: 559px): menú de 6 opciones */

/* Menú de 6 opciones dentro de la cabecera (pantallas de 900 a 1199 px): letra y relleno un poco más chicos
   para que la marca, las 6 opciones y «Necesito apoyo» quepan en una sola fila sin taparse. */
@media (min-width: 900px) and (max-width: 1199px) {
  .menu li:first-child:nth-last-child(6) a,
  .menu li:first-child:nth-last-child(6) ~ li a { /* y los de las demás opciones */
    gap: var(--espacio-1); /* 4 px entre ícono y texto */
    padding: 0 10px; /* 10 px a cada lado */
    font-size: var(--texto-pequeno); /* 14 px */
  } /* fin de la regla del menú de 6 opciones en la cabecera */
} /* fin del @media (min-width: 900px) and (max-width: 1199px) */

/* Entre 900 y 1079 px todavía no caben los íconos: el menú de 6 opciones muestra solo el texto
   (el texto es el nombre de cada opción; los íconos son decorativos). */
@media (min-width: 900px) and (max-width: 1079px) {
  .menu li:first-child:nth-last-child(6) .menu__icono,
  .menu li:first-child:nth-last-child(6) ~ li .menu__icono { /* y los de las demás opciones */
    display: none; /* sin ícono */
  } /* fin de la regla de los íconos ocultos */
} /* fin del @media (min-width: 900px) and (max-width: 1079px) */

/* =====================================================================
   Fondo de galaxia de las páginas con menú
   El cielo (degradado con nebulosas) va en el <body>, así se ve desde el primer momento. Encima,
   js/fondo-espacio.js (lo pone comun.js) agrega planetas, estrellas que titilan, destellos y estrellas
   fugaces, DETRÁS de todo el contenido. Las tarjetas, la cabecera y el menú siguen siendo opacos: el texto
   se lee igual. En la apariencia nocturna es una galaxia violeta y azul; en la clara, una versión pastel.
   Con "reducir movimiento" nada se mueve (la regla general de arriba deja cada animación quieta; además,
   al final de este bloque se esconden las estrellas fugaces).
   ===================================================================== */
:root {
  /* Galaxia en la apariencia clara: lila muy claro con planetas pastel */
  --galaxia-cielo-1: #f5f0ff;          /* cielo, arriba a la izquierda */
  --galaxia-cielo-2: #ebe3ff;          /* cielo, al centro */
  --galaxia-cielo-3: #f6efff;          /* cielo, abajo a la derecha */
  --galaxia-nebulosa-1: #dccbff;       /* nebulosa lila */
  --galaxia-nebulosa-2: #cfe4ff;       /* nebulosa celeste */
  --galaxia-nebulosa-3: #f7d3ea;       /* nebulosa rosa */
  --galaxia-estrella: #a48ce6;         /* estrellitas (lila: sobre el cielo claro se ven) */
  --galaxia-destello: #8f74e0;         /* destellos de cuatro puntas */
  --galaxia-grande-claro: #d6f3fb;     /* planeta grande: luz */
  --galaxia-grande-oscuro: #9fd6ef;    /* planeta grande: sombra */
  --galaxia-franja: #f2fbff;           /* franjas del planeta grande */
  --galaxia-lila-claro: #eadcff;       /* planeta lila: luz */
  --galaxia-lila-oscuro: #c2a6f4;      /* planeta lila: sombra */
  --galaxia-luna-claro: #fbf9ff;       /* luna: luz */
  --galaxia-luna-oscuro: #ddd3f2;      /* luna: sombra y cráteres */
  --galaxia-rosa-claro: #fde0ee;       /* planetita rosa: luz */
  --galaxia-rosa-oscuro: #f0b3d2;      /* planetita rosa: sombra */
  --galaxia-anillo: #c7b4f3;           /* anillo del planetita */
  --galaxia-fugaz: #9a82e8;            /* estrellas fugaces */
  --galaxia-borde-tarjeta: #ddd0f5;    /* borde de las tarjetas (componentes.css) */
  --galaxia-brillo: rgb(120 84 230 / 0.22); /* resplandor violeta suave de las tarjetas */
} /* fin de la regla :root (galaxia clara) */
@media (prefers-color-scheme: dark) {
  :root:not([data-apariencia="clara"]) { /* galaxia de noche automática: violeta y azul profundos */
    --galaxia-cielo-1: #150d36; --galaxia-cielo-2: #231453; --galaxia-cielo-3: #0f0a29; /* cielo */
    --galaxia-nebulosa-1: #5b2fb8; --galaxia-nebulosa-2: #1f5fae; --galaxia-nebulosa-3: #8a2f9e; /* nebulosas */
    --galaxia-estrella: #ffffff; --galaxia-destello: #ffffff; /* estrellas blancas */
    --galaxia-grande-claro: #8ee3f7; --galaxia-grande-oscuro: #2f6fc0; --galaxia-franja: #b9eefb; /* planeta azul */
    --galaxia-lila-claro: #c99af5; --galaxia-lila-oscuro: #5c2aa8; /* planeta lila */
    --galaxia-luna-claro: #e6e0fa; --galaxia-luna-oscuro: #a497cf; /* luna */
    --galaxia-rosa-claro: #d48ab7; --galaxia-rosa-oscuro: #7c3a74; --galaxia-anillo: #b7a6ff; /* planetita */
    --galaxia-fugaz: #ffffff; /* estrellas fugaces */
    --galaxia-borde-tarjeta: #4a3a7a; --galaxia-brillo: rgb(150 110 255 / 0.3); /* tarjetas */
  } /* fin de la galaxia nocturna automática */
} /* fin del @media (prefers-color-scheme: dark) de la galaxia */
:root[data-apariencia="nocturna"] { /* galaxia de noche elegida en Ajustes (los mismos valores de arriba) */
  --galaxia-cielo-1: #150d36; --galaxia-cielo-2: #231453; --galaxia-cielo-3: #0f0a29; /* cielo */
  --galaxia-nebulosa-1: #5b2fb8; --galaxia-nebulosa-2: #1f5fae; --galaxia-nebulosa-3: #8a2f9e; /* nebulosas */
  --galaxia-estrella: #ffffff; --galaxia-destello: #ffffff; /* estrellas blancas */
  --galaxia-grande-claro: #8ee3f7; --galaxia-grande-oscuro: #2f6fc0; --galaxia-franja: #b9eefb; /* planeta azul */
  --galaxia-lila-claro: #c99af5; --galaxia-lila-oscuro: #5c2aa8; /* planeta lila */
  --galaxia-luna-claro: #e6e0fa; --galaxia-luna-oscuro: #a497cf; /* luna */
  --galaxia-rosa-claro: #d48ab7; --galaxia-rosa-oscuro: #7c3a74; --galaxia-anillo: #b7a6ff; /* planetita */
  --galaxia-fugaz: #ffffff; /* estrellas fugaces */
  --galaxia-borde-tarjeta: #4a3a7a; --galaxia-brillo: rgb(150 110 255 / 0.3); /* tarjetas */
} /* fin de la galaxia nocturna elegida */

/* El cielo de la galaxia, en el <body> de las páginas con menú. Las nebulosas son manchas suaves (el color
   va mezclado con transparente para que el texto de la página se siga leyendo bien). background-attachment:
   fixed = el cielo queda quieto al desplazar la página. */
body[data-menu="completo"] {
  background:
    radial-gradient(ellipse 60% 45% at 12% 8%, color-mix(in srgb, var(--galaxia-nebulosa-1) 60%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 50% at 88% 42%, color-mix(in srgb, var(--galaxia-nebulosa-2) 55%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 45% at 28% 96%, color-mix(in srgb, var(--galaxia-nebulosa-3) 50%, transparent), transparent 70%),
    linear-gradient(160deg, var(--galaxia-cielo-1), var(--galaxia-cielo-2) 50%, var(--galaxia-cielo-3));
  background-attachment: fixed; /* quieto al desplazar */
} /* fin de la regla del cielo de galaxia */

/* La capa de adornos (planetas, estrellas...): fija en la ventana y detrás de todo */
.fondo-espacio {
  position: fixed; /* quieta al desplazar la página */
  inset: 0; /* toda la ventana */
  z-index: -2; /* detrás del contenido (y del fondo de las islas, que usa -1) */
  overflow: hidden; /* nada se sale */
  pointer-events: none; /* no recibe toques */
} /* fin de la regla .fondo-espacio */
.fondo-espacio__nebulosas {
  position: absolute; /* toda la ventana */
  inset: 0; /* (ídem) */
  width: 100%; /* (ídem) */
  height: 100%; /* (ídem) */
} /* fin de la regla .fondo-espacio__nebulosas */
.fondo-espacio__nebulosa {
  opacity: 0.22; /* muy suaves */
  animation: espacio-flotar 30s ease-in-out infinite alternate; /* se mueven muy despacio */
} /* fin de la regla .fondo-espacio__nebulosa */
.fondo-espacio__nebulosa--1 { fill: var(--galaxia-nebulosa-1); } /* lila */
.fondo-espacio__nebulosa--2 { fill: var(--galaxia-nebulosa-2); animation-delay: -10s; } /* azul */
.fondo-espacio__nebulosa--3 { fill: var(--galaxia-nebulosa-3); animation-delay: -20s; } /* rosa */
@keyframes espacio-flotar {
  from { transform: translate(-12px, -6px); } /* un poco a un lado */
  to { transform: translate(12px, 6px); } /* y al otro */
} /* fin de @keyframes espacio-flotar */
/* Estrellitas: puntitos dibujados con degradados que se repiten en cuadros de 230 y 370 px */
.fondo-espacio__estrellas {
  position: absolute; /* toda la ventana */
  inset: 0; /* (ídem) */
  background-image:
    radial-gradient(1px 1px at 20px 30px, var(--galaxia-estrella), transparent),
    radial-gradient(1px 1px at 140px 70px, var(--galaxia-estrella), transparent),
    radial-gradient(1.5px 1.5px at 80px 160px, var(--galaxia-estrella), transparent),
    radial-gradient(1px 1px at 200px 120px, var(--galaxia-estrella), transparent),
    radial-gradient(1px 1px at 50px 210px, var(--galaxia-estrella), transparent),
    radial-gradient(1.5px 1.5px at 180px 200px, var(--galaxia-estrella), transparent);
  background-size: 230px 230px; /* el cuadro que se repite */
  opacity: 0.7; /* suaves */
} /* fin de la regla .fondo-espacio__estrellas */
.fondo-espacio__estrellas--titilan {
  background-image:
    radial-gradient(1.5px 1.5px at 60px 50px, var(--galaxia-estrella), transparent),
    radial-gradient(2px 2px at 300px 140px, var(--galaxia-estrella), transparent),
    radial-gradient(1.5px 1.5px at 190px 290px, var(--galaxia-estrella), transparent),
    radial-gradient(2px 2px at 90px 330px, var(--galaxia-estrella), transparent);
  background-size: 370px 370px; /* otro cuadro, para que no se note la repetición */
  animation: espacio-titilar 6s ease-in-out infinite alternate; /* brillan y se apagan muy despacio */
} /* fin de la regla .fondo-espacio__estrellas--titilan */
@keyframes espacio-titilar {
  from { opacity: 0.25; } /* tenues */
  to { opacity: 0.95; } /* brillantes */
} /* fin de @keyframes espacio-titilar */
/* Destellos de cuatro puntas: una cruz que se desvanece hacia afuera (máscara) y un puntito al centro */
.fondo-espacio__destello {
  position: absolute; /* en su lugar */
  left: var(--x); /* (lo pone fondo-espacio.js) */
  top: var(--y); /* (ídem) */
  width: var(--tam); /* tamaño */
  height: var(--tam); /* cuadrado */
  background:
    radial-gradient(circle, var(--galaxia-destello) 0 12%, transparent 30%),
    linear-gradient(var(--galaxia-destello), var(--galaxia-destello)) center / 1.5px 100% no-repeat,
    linear-gradient(var(--galaxia-destello), var(--galaxia-destello)) center / 100% 1.5px no-repeat;
  -webkit-mask-image: radial-gradient(circle, #000 15%, transparent 70%); /* las puntas se desvanecen (Safari) */
  mask-image: radial-gradient(circle, #000 15%, transparent 70%); /* (ídem) */
  animation: espacio-titilar 4s ease-in-out var(--retraso) infinite alternate; /* titilan despacio */
} /* fin de la regla .fondo-espacio__destello */
/* Planetas */
.fondo-espacio__definiciones {
  position: absolute; /* no ocupa lugar */
  width: 0; /* (ídem) */
  height: 0; /* (ídem) */
} /* fin de la regla .fondo-espacio__definiciones */
.galaxia-parada--grande-claro { stop-color: var(--galaxia-grande-claro); } /* colores de los degradados */
.galaxia-parada--grande-oscuro { stop-color: var(--galaxia-grande-oscuro); } /* (ídem) */
.galaxia-parada--lila-claro { stop-color: var(--galaxia-lila-claro); } /* (ídem) */
.galaxia-parada--lila-oscuro { stop-color: var(--galaxia-lila-oscuro); } /* (ídem) */
.galaxia-parada--luna-claro { stop-color: var(--galaxia-luna-claro); } /* (ídem) */
.galaxia-parada--luna-oscuro { stop-color: var(--galaxia-luna-oscuro); } /* (ídem) */
.galaxia-parada--rosa-claro { stop-color: var(--galaxia-rosa-claro); } /* (ídem) */
.galaxia-parada--rosa-oscuro { stop-color: var(--galaxia-rosa-oscuro); } /* (ídem) */
.fondo-espacio__planeta {
  position: absolute; /* en su esquina */
  overflow: visible; /* el anillo y el resplandor pueden salirse un poco */
  opacity: 0.9; /* casi opacos */
  animation: espacio-flotar 24s ease-in-out infinite alternate; /* flotan muy despacio */
} /* fin de la regla .fondo-espacio__planeta */
.fondo-espacio__planeta--grande {
  top: -9vmin; /* arriba a la derecha, un poco afuera */
  right: -8vmin; /* (ídem) */
  width: clamp(200px, 34vw, 480px); /* grande */
  filter: drop-shadow(0 0 40px var(--galaxia-grande-oscuro)); /* resplandor azul */
} /* fin de la regla del planeta grande */
.fondo-espacio__planeta--lila {
  bottom: -6vmin; /* abajo a la izquierda */
  left: -5vmin; /* (ídem) */
  width: clamp(130px, 19vw, 270px); /* mediano */
  filter: drop-shadow(0 0 30px var(--galaxia-lila-oscuro)); /* resplandor lila */
  animation-delay: -8s; /* a otro ritmo */
} /* fin de la regla del planeta lila */
.fondo-espacio__planeta--luna {
  top: 34%; /* a la izquierda, a media altura */
  left: 3%; /* (ídem) */
  width: clamp(44px, 6vw, 92px); /* pequeña */
  filter: drop-shadow(0 0 18px var(--galaxia-luna-claro)); /* brillo */
  animation-delay: -14s; /* a otro ritmo */
} /* fin de la regla de la luna */
.fondo-espacio__planeta--rosa {
  top: 62%; /* a la derecha, más abajo */
  right: 3%; /* (ídem) */
  width: clamp(60px, 8vw, 130px); /* pequeño */
  animation-delay: -4s; /* a otro ritmo */
} /* fin de la regla del planetita rosa */
.fondo-espacio__franja { fill: var(--galaxia-franja); opacity: 0.35; } /* franjas onduladas */
.fondo-espacio__franja--suave { opacity: 0.2; } /* una más suave */
.fondo-espacio__brillo-planeta { fill: #ffffff; opacity: 0.25; } /* brillo de la luz */
.fondo-espacio__espiral { fill: none; stroke: var(--galaxia-lila-claro); stroke-width: 3.5; stroke-linecap: round; opacity: 0.55; } /* espiral */
.fondo-espacio__crater { fill: var(--galaxia-luna-oscuro); opacity: 0.6; } /* cráteres */
.fondo-espacio__anillo { fill: none; stroke: var(--galaxia-anillo); stroke-width: 4; stroke-linecap: round; opacity: 0.85; } /* anillo */
/* En pantallas angostas los planetas quedan más chicos y más transparentes, para no molestar al texto */
@media (max-width: 699px) {
  .fondo-espacio__planeta { opacity: 0.55; } /* más suaves */
  .fondo-espacio__planeta--grande { width: 170px; top: -50px; right: -60px; } /* asoma en la esquina */
  .fondo-espacio__planeta--lila { width: 110px; } /* más chico */
  .fondo-espacio__planeta--luna { left: auto; right: 4%; top: 30%; } /* a la derecha, en el borde */
} /* fin del @media (max-width: 699px) de la galaxia */
/* Estrellas fugaces: una línea con la cabeza brillante abajo a la izquierda y la cola hacia arriba a la
   derecha; cruzan en diagonal y quedan escondidas el resto del tiempo (cada una con su ritmo) */
.fondo-espacio__fugaz {
  position: absolute; /* en su lugar */
  width: 140px; /* largo de la cola */
  height: 2px; /* fina */
  border-radius: 2px; /* puntas redondas */
  background: linear-gradient(90deg, var(--galaxia-fugaz), transparent); /* cabeza brillante y cola que se apaga */
  opacity: 0; /* escondida hasta que cruza */
  transform-origin: left center; /* gira desde la cabeza */
  animation: espacio-fugaz 13s linear infinite; /* cruza de vez en cuando */
} /* fin de la regla .fondo-espacio__fugaz */
.fondo-espacio__fugaz::before {
  content: ""; /* la cabeza */
  position: absolute; /* al principio de la línea */
  left: -2px; /* (ídem) */
  top: -2px; /* (ídem) */
  width: 6px; /* redonda */
  height: 6px; /* (ídem) */
  border-radius: 50%; /* círculo */
  background: var(--galaxia-fugaz); /* brillante */
  box-shadow: 0 0 10px 2px var(--galaxia-fugaz); /* resplandor */
} /* fin de la regla de la cabeza de la estrella fugaz */
.fondo-espacio__fugaz--1 { top: 18%; left: 62%; animation-delay: 2s; } /* arriba a la derecha */
.fondo-espacio__fugaz--2 { top: 46%; left: 30%; animation-duration: 17s; animation-delay: 7s; } /* al centro */
.fondo-espacio__fugaz--3 { top: 8%; left: 30%; animation-duration: 21s; animation-delay: 12s; } /* arriba */
@keyframes espacio-fugaz {
  0% { opacity: 0; transform: rotate(-35deg) translateX(0); } /* aparece */
  2% { opacity: 1; } /* brilla */
  9% { opacity: 0; transform: rotate(-35deg) translateX(-360px); } /* cruzó y se apagó */
  100% { opacity: 0; transform: rotate(-35deg) translateX(-360px); } /* espera hasta la próxima vez */
} /* fin de @keyframes espacio-fugaz */
@media (prefers-reduced-motion: reduce) {
  .fondo-espacio__fugaz {
    display: none; /* sin estrellas fugaces */
  } /* fin de la regla de las estrellas fugaces */
} /* fin del @media (prefers-reduced-motion: reduce) de la galaxia */

/* =====================================================================
   Ajustes para celular (toda la plataforma)
   Pensados para pantallas de 320 a 430 px de ancho, con dedo en vez de mouse.
   ===================================================================== */
/* Al tocar: sin zoom por doble toque en lo que se toca (tocar rápido, por ejemplo en los juegos, no agranda
   la página) y un destello violeta suave en vez del gris que pone el navegador. touch-action: manipulation
   deja desplazar y pellizcar para hacer zoom; solo quita el zoom del doble toque. */
a,
button,
label,
summary,
input,
select,
textarea,
[role="button"] { /* todo lo que se toca */
  touch-action: manipulation; /* sin zoom por doble toque */
  -webkit-tap-highlight-color: rgb(91 63 196 / 0.18); /* destello violeta suave al tocar */
} /* fin de la regla de los toques */
/* Zona segura de los lados: con el iPhone de lado, la muesca no tapa el contenido. max() elige el mayor:
   los 16 px de siempre o el espacio de la muesca (env(safe-area-inset-left), 0 si no hay muesca). */
.cabecera__contenido,
main { /* y el contenido de cada página */
  padding-left: max(var(--espacio-3), env(safe-area-inset-left)); /* izquierda */
  padding-right: max(var(--espacio-3), env(safe-area-inset-right)); /* derecha */
} /* fin de la regla de la zona segura de los lados */
.menu {
  padding-left: env(safe-area-inset-left); /* el menú de abajo tampoco queda debajo de la muesca */
  padding-right: env(safe-area-inset-right); /* (ídem) */
} /* fin de la regla de la zona segura del menú */
/* Celulares muy angostos (menos de 375 px, por ejemplo de 320 px): la marca y «Necesito apoyo» se achican
   un poco para caber juntos en la cabecera (antes el nombre quedaba tapado). «Necesito apoyo» sigue
   visible, con su corazón, en negrita y con 44 px de alto. */
@media (max-width: 374px) {
  .cabecera__contenido {
    gap: var(--espacio-2); /* 8 px entre la marca y el botón */
  } /* fin de la regla de la cabecera angosta */
  .marca {
    gap: 6px; /* ícono y nombre más juntos */
    font-size: var(--texto-normal); /* 16 px */
  } /* fin de la regla de la marca angosta */
  .marca img {
    width: 32px; /* ícono de 32 px */
    height: 32px; /* (ídem) */
  } /* fin de la regla del ícono de la marca angosta */
  .enlace-apoyo {
    gap: 6px; /* corazón y texto más juntos */
    padding: var(--espacio-1) 10px; /* 10 px a los lados */
    font-size: var(--texto-pequeno); /* 14 px */
  } /* fin de la regla de «Necesito apoyo» angosto */
} /* fin del @media (max-width: 374px) de la cabecera */