/* ==========================================================================
   Hoja de estilos del sitio «Imaginario Matemático» (UNIVERSUM · UNAM).

   La paleta nace de las fotografías de la sala: los ámbares y ocres del
   mosaico de madera de la entrada, y el verde profundo de los espejos del
   caleidoscopio.  Fondo claro y cálido, tipografía expresiva (Fraunces para
   títulos, Inter para texto), diseño primero-móvil: los visitantes llegan
   escaneando códigos QR con el teléfono.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tipografías, servidas localmente desde static/fonts/ (sin CDN)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Variables de diseño
   -------------------------------------------------------------------------- */
:root {
  /* Paleta tomada de las fotos de la sala */
  --crema: #faf5ec;            /* fondo general: crema cálida, clara */
  --papel: #ffffff;            /* tarjetas y cajas */
  --tinta: #26211b;            /* texto principal */
  --tinta-suave: #6b6155;      /* texto secundario */
  --verde: #14584c;            /* verde profundo del caleidoscopio */
  --verde-oscuro: #0d3d35;     /* encabezado y pie */
  --verde-claro: #1d7a68;      /* enlaces y detalles */
  --ambar: #c98a2c;            /* madera dorada del mosaico */
  --ambar-suave: #f4e3c2;      /* fondos de etiquetas */
  --terracota: #a4552e;        /* acento cálido ocasional */
  --borde: #e8e0d1;

  --exito-fondo: #e5f2e2;
  --error-fondo: #fbe9e5;

  --radio: 14px;
  --sombra: 0 10px 30px rgba(38, 33, 27, 0.10);
  --ancho-lectura: 46rem;

  --fuente-titulos: "Fraunces", Georgia, "Times New Roman", serif;
  --fuente-texto: "Inter", "Segoe UI", system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.contenedor {
  width: min(72rem, 100% - 2.5rem);
  margin-inline: auto;
}

h1, h2, h3 {
  font-family: var(--fuente-titulos);
  color: var(--verde);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); }

a { color: var(--verde-claro); }
a:hover { color: var(--verde); }

code {
  background: #f1ebdd;
  padding: 0.1em 0.35em;
  border-radius: 6px;
  font-size: 0.92em;
}

/* --------------------------------------------------------------------------
   Encabezado
   -------------------------------------------------------------------------- */
.encabezado {
  background: var(--verde-oscuro);
  color: #fdf9f0;
  padding-block: 0.75rem;
  border-bottom: 3px solid var(--ambar);
}

.encabezado-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #fdf9f0;
  text-decoration: none;
}

/* El sello geométrico (SVG de estrella de 8 puntas) gira suavemente al
   pasar el cursor: un guiño a los caleidoscopios de la sala. */
.marca-sello {
  width: 42px;
  height: 42px;
  color: var(--ambar);
  flex-shrink: 0;
  transition: transform 0.6s ease;
}
.marca:hover .marca-sello { transform: rotate(45deg); }

.marca-texto { display: flex; flex-direction: column; line-height: 1.25; }
.marca-texto strong {
  font-family: var(--fuente-titulos);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.marca-texto small { opacity: 0.8; font-size: 0.74rem; letter-spacing: 0.04em; }

.nav-sesion { display: flex; align-items: center; gap: 0.8rem; font-size: 0.9rem; }
.nav-usuario { opacity: 0.9; }
.enlace-discreto { color: #cfe4dc; text-decoration: none; }
.enlace-discreto:hover { color: #fff; text-decoration: underline; }
.forma-salir { display: inline; margin: 0; }
.enlace-boton {
  background: none; border: none; color: #cfe4dc;
  cursor: pointer; font: inherit; padding: 0; text-decoration: underline;
}
.enlace-boton:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Héroe de la portada: la teselación de madera de la sala
   -------------------------------------------------------------------------- */
.heroe {
  background-size: cover;
  background-position: center;
  position: relative;             /* para colocar el teseracto encima */
  overflow: hidden;
}

/* El lienzo del hipercubo 4D flota sobre la fotografía, detrás del texto.
   En pantallas anchas ocupa la mitad derecha; en el teléfono, todo el ancho
   con menos presencia. */
#heroe-lienzo {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(46%, 34rem);
  height: 100%;
  pointer-events: none;
}

@media (max-width: 48rem) {
  #heroe-lienzo { width: 100%; opacity: 0.5; }
}

/* Un velo en degradado verde oscuro garantiza contraste del texto sobre la
   fotografía, dejando ver la madera en la parte alta. */
.heroe-velo {
  position: relative;             /* el texto queda por encima del lienzo */
  z-index: 1;
  background: linear-gradient(
    175deg,
    rgba(13, 61, 53, 0.30) 0%,
    rgba(13, 61, 53, 0.55) 45%,
    rgba(13, 61, 53, 0.88) 100%
  );
  padding: clamp(3rem, 9vw, 7rem) 0 clamp(1.6rem, 4vw, 3rem);
}

.heroe-titulo {
  color: #fdf6e8;
  font-size: clamp(2.6rem, 8vw, 5rem);
  font-weight: 700;
  margin: 0 0 0.6rem;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.heroe-texto {
  color: #f3ecdc;
  max-width: 38rem;
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  margin: 0 0 0.7rem;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

.heroe-nota {
  color: var(--ambar-suave);
  font-size: 0.92rem;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Índice de piezas
   -------------------------------------------------------------------------- */
/* Continuación del texto de bienvenida, bajo el héroe */
.bienvenida {
  max-width: var(--ancho-lectura);
  margin: 2.4rem auto 0.5rem;
  font-size: 1.08rem;
  color: var(--tinta-suave);
}
.bienvenida p { margin-block: 0.7rem; }
.bienvenida strong { color: var(--verde); }

.grupo-tema { margin-block: 2.6rem 3rem; }

.titulo-tema {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.2rem;
}

/* Rombo dorado que marca cada sección, eco del mosaico de la entrada. */
.tema-marca {
  width: 0.75em;
  height: 0.75em;
  background: var(--ambar);
  transform: rotate(45deg);
  border-radius: 2px;
  flex-shrink: 0;
}

.rejilla-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 1.1rem;
}

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;               /* recorta la foto a las esquinas redondas */
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.tarjeta:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra);
}

.tarjeta-foto {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.tarjeta-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 1.1rem 1.05rem;
  flex: 1;
}

.tarjeta-titulo { margin: 0; font-size: 1.14rem; }
.tarjeta-resumen { margin: 0; color: var(--tinta-suave); font-size: 0.9rem; line-height: 1.55; }

.etiqueta-demo {
  margin-top: auto;
  align-self: flex-start;
  background: var(--ambar-suave);
  color: #7c5410;
  border-radius: 999px;
  padding: 0.14rem 0.65rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* --------------------------------------------------------------------------
   Página de una exhibición
   -------------------------------------------------------------------------- */
.articulo {
  max-width: var(--ancho-lectura);
  margin-inline: auto;
  padding-block: 1.6rem 2rem;
}

.migas {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.92rem;
  margin-bottom: 1.3rem;
}
.migas a { text-decoration: none; font-weight: 600; }
.migas a:hover { text-decoration: underline; }

.articulo-tema {
  color: var(--ambar);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  font-weight: 600;
  margin: 0 0 0.2rem;
}

.articulo-cabecera h1 { margin: 0 0 0.4rem; }

.articulo-resumen {
  color: var(--tinta-suave);
  font-size: 1.14rem;
  margin-top: 0;
}

/* Fotografía de la pieza en la sala */
.articulo-foto { margin: 1.4rem 0; }
.articulo-foto img {
  width: 100%;
  max-height: 30rem;
  object-fit: cover;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  display: block;
}
.articulo-foto figcaption {
  color: var(--tinta-suave);
  font-size: 0.85rem;
  margin-top: 0.5rem;
  text-align: center;
}

.articulo-cuerpo h2 {
  margin-top: 2.2rem;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid var(--ambar-suave);
}
.articulo-cuerpo h3 { margin-top: 1.5rem; }
.articulo-cuerpo img { max-width: 100%; height: auto; border-radius: var(--radio); }
.articulo-cuerpo blockquote {
  border-left: 4px solid var(--ambar);
  margin-inline: 0;
  padding-inline: 1rem;
  color: var(--tinta-suave);
}
.articulo-cuerpo table {
  border-collapse: collapse;
  width: 100%;
  display: block;
  overflow-x: auto;
}
.articulo-cuerpo th, .articulo-cuerpo td {
  border: 1px solid var(--borde);
  padding: 0.4rem 0.7rem;
}
.articulo-cuerpo th { background: var(--ambar-suave); }

.articulo-cuerpo .katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 0.2rem;
}

/* --------------------------------------------------------------------------
   Caja del demo interactivo
   -------------------------------------------------------------------------- */
.caja-demo {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-top: 4px solid var(--verde);
  border-radius: var(--radio);
  padding: 1.2rem 1.2rem 1rem;
  margin-block: 1.6rem;
  box-shadow: var(--sombra);
}

.caja-demo h2 { margin-top: 0; font-size: 1.25rem; }

.caja-demo canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  touch-action: none;
}

.demo-controles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  align-items: center;
  margin-block: 0.7rem;
  font-size: 0.92rem;
}
.demo-controles label { display: flex; align-items: center; gap: 0.45rem; }
.demo-controles input[type="range"] { accent-color: var(--verde-claro); }

.demo-nota { color: var(--tinta-suave); font-size: 0.88rem; margin-bottom: 0; }

.boton-demo {
  background: var(--verde);
  border: none;
  border-radius: 9px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.38rem 0.95rem;
}
.boton-demo:hover { background: var(--verde-claro); }

/* --------------------------------------------------------------------------
   Mensajes del sistema
   -------------------------------------------------------------------------- */
.mensaje {
  border-radius: var(--radio);
  padding: 0.7rem 1rem;
  margin-block: 0.8rem;
}
.mensaje-success { background: var(--exito-fondo); color: #245020; }
.mensaje-error   { background: var(--error-fondo);  color: #7c1f18; }

/* --------------------------------------------------------------------------
   Formularios: login y editor
   -------------------------------------------------------------------------- */
.caja-login {
  max-width: 26rem;
  margin: 2.5rem auto;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-top: 4px solid var(--ambar);
  border-radius: var(--radio);
  padding: 1.6rem;
  box-shadow: var(--sombra);
}

.login-nota { color: var(--tinta-suave); font-size: 0.95rem; }

.caja-login label {
  display: block;
  margin-top: 0.9rem;
  font-weight: 600;
  font-size: 0.92rem;
}

.caja-login input {
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--borde);
  border-radius: 9px;
  font: inherit;
  background: #fff;
}

.boton-principal {
  margin-top: 1.2rem;
  background: var(--verde);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 0.6rem 1.4rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.boton-principal:hover { background: var(--verde-claro); }

.editor { max-width: 56rem; margin-inline: auto; padding-block: 1.2rem; }

.editor-ayuda {
  background: var(--ambar-suave);
  border-radius: var(--radio);
  padding: 0.8rem 1.1rem;
  font-size: 0.92rem;
  color: #5d4a20;
}

.editor-forma textarea {
  width: 100%;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.95rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0.9rem;
  background: #fff;
}

.editor-acciones { margin-top: 0.9rem; }

/* --------------------------------------------------------------------------
   Pie de página
   -------------------------------------------------------------------------- */
.pie {
  background: var(--verde-oscuro);
  color: #d8e6df;
  margin-top: 3.5rem;
  padding-block: 1.8rem 2.2rem;
  font-size: 0.92rem;
  border-top: 3px solid var(--ambar);
}
.pie strong { color: #fdf6e8; }
.pie-nota { font-size: 0.85rem; opacity: 0.85; }

/* ==========================================================================
   MODO ESPECTACULAR: acentos, animaciones y detalles finos
   ========================================================================== */

/* --------------------------------------------------------------------------
   Un color de acento distinto para cada sección temática del índice.
   La variable --acento se hereda por las tarjetas y marcas de la sección.
   -------------------------------------------------------------------------- */
.grupo-tema:nth-of-type(6n+1) { --acento: #c98a2c; }  /* ámbar (madera)    */
.grupo-tema:nth-of-type(6n+2) { --acento: #1d7a68; }  /* verde jade        */
.grupo-tema:nth-of-type(6n+3) { --acento: #a4552e; }  /* terracota         */
.grupo-tema:nth-of-type(6n+4) { --acento: #4a6fa5; }  /* azul pizarra      */
.grupo-tema:nth-of-type(6n+5) { --acento: #7c5cad; }  /* violeta           */
.grupo-tema:nth-of-type(6n+6) { --acento: #b0486d; }  /* granate rosado    */

.grupo-tema .tema-marca { background: var(--acento, var(--ambar)); }

/* La tarjeta muestra una regla superior con el color de su sección y el
   título adopta el acento al pasar el cursor. */
.grupo-tema .tarjeta { border-top: 4px solid var(--acento, var(--ambar)); }
.grupo-tema .tarjeta:hover .tarjeta-titulo { color: var(--acento, var(--verde)); }

/* --------------------------------------------------------------------------
   Aparición al hacer scroll: los elementos .revelar inician invisibles y
   suben suavemente cuando entran en pantalla (clase .visible desde JS).
   -------------------------------------------------------------------------- */
.revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.revelar.visible { opacity: 1; transform: none; }

/* Pequeño escalonamiento: cada tarjeta de una fila entra con un retraso. */
.rejilla-tarjetas .tarjeta:nth-child(2) { transition-delay: 0.07s; }
.rejilla-tarjetas .tarjeta:nth-child(3) { transition-delay: 0.14s; }
.rejilla-tarjetas .tarjeta:nth-child(4) { transition-delay: 0.21s; }

/* La foto de la tarjeta hace un zoom sutil al pasar el cursor. */
.tarjeta-foto { transition: transform 0.5s ease; }
.tarjeta:hover .tarjeta-foto { transform: scale(1.05); }

/* --------------------------------------------------------------------------
   Letra capital al estilo de los libros antiguos de geometría: la primera
   letra del primer párrafo de cada artículo, en Fraunces y verde.
   -------------------------------------------------------------------------- */
.articulo-cuerpo > p:first-of-type::first-letter {
  font-family: var(--fuente-titulos);
  font-size: 3.1em;
  font-weight: 700;
  float: left;
  line-height: 0.82;
  padding: 0.08em 0.12em 0 0;
  color: var(--verde);
}

/* --------------------------------------------------------------------------
   Barra de progreso de lectura: una línea dorada fija en lo alto que se
   llena conforme avanzas por la página (controlada desde sitio.js).
   -------------------------------------------------------------------------- */
#barra-progreso {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--ambar), var(--terracota));
  transform: scaleX(0);
  transform-origin: left;
  z-index: 50;
}

/* --------------------------------------------------------------------------
   Botón «Sorpréndeme» del encabezado
   -------------------------------------------------------------------------- */
.boton-sorpresa {
  color: #0d3d35;
  background: var(--ambar);
  border-radius: 999px;
  padding: 0.28rem 0.85rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  transition: transform 0.15s ease, background 0.15s ease;
}
.boton-sorpresa:hover {
  background: #e3a93f;
  color: #0d3d35;
  transform: rotate(-2deg) scale(1.05);
}

/* --------------------------------------------------------------------------
   Botón «volver arriba»
   -------------------------------------------------------------------------- */
#boton-subir {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  width: 2.8rem;
  height: 2.8rem;
  border: none;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: var(--sombra);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 40;
}
#boton-subir.visible { opacity: 1; transform: none; pointer-events: auto; }
#boton-subir:hover { background: var(--verde-claro); }

/* --------------------------------------------------------------------------
   La marquesina de π en el pie: los dígitos desfilan sin fin.
   -------------------------------------------------------------------------- */
.pi-marquesina {
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  margin-bottom: 1.4rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.82rem;
  color: rgba(244, 227, 194, 0.75);
  padding-block: 0.45rem;
  white-space: nowrap;
}
.pi-cinta {
  display: inline-block;
  animation: desfile-pi 90s linear infinite;
}
@keyframes desfile-pi {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }  /* la cinta está duplicada */
}

/* --------------------------------------------------------------------------
   Accesibilidad: con «menos movimiento», nada se anima.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; transition: none; }
  .pi-cinta { animation: none; }
  .tarjeta, .tarjeta-foto, .marca-sello, .boton-sorpresa { transition: none; }
}

/* --------------------------------------------------------------------------
   Página de «no encontrado»
   -------------------------------------------------------------------------- */
.caja-404 {
  max-width: 34rem;
  margin: 3rem auto;
  text-align: center;
}

/* El símbolo del conjunto vacío, en grande */
.cuatro-cero-cuatro {
  font-family: var(--fuente-titulos);
  font-size: clamp(4rem, 16vw, 7rem);
  color: var(--ambar);
  line-height: 1;
  margin: 0 0 0.5rem;
}

.boton-principal-enlace {
  display: inline-block;
  margin-top: 0.6rem;
  background: var(--verde);
  color: #fff;
  border-radius: 9px;
  padding: 0.6rem 1.4rem;
  font-weight: 600;
  text-decoration: none;
}
.boton-principal-enlace:hover { background: var(--verde-claro); color: #fff; }

/* --------------------------------------------------------------------------
   Pantallas muy pequeñas
   -------------------------------------------------------------------------- */
@media (max-width: 26rem) {
  body { font-size: 1rem; }
  .marca-texto small { display: none; }
  .boton-sorpresa { font-size: 0.78rem; padding: 0.22rem 0.7rem; }
}