/* Reinicio corto, malla del fondo, cabecera en píldora, pie, navegación y utilidades. Nada de frameworks. */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--fondo);
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
[data-tema='claro'] { color-scheme: light; }
@media (prefers-color-scheme: light) { [data-tema='auto'] { color-scheme: light; } }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: var(--t-m);
  line-height: 1.55;
  letter-spacing: -0.005em;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--seleccion); color: var(--texto); }

p, ul, ol, figure { margin: 0; }
img, svg { max-width: 100%; height: auto; }
svg.ico { display: block; flex: none; }
button, input, textarea, select { font: inherit; color: inherit; }
hr { border: 0; border-top: 1px solid var(--borde); margin: 1.5rem 0; }

a { color: var(--acento-texto); text-decoration: none; transition: color var(--transicion); }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Foco visible siempre, también con ratón en los controles: contorno menta con aire. */
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 6px;
}

.saltar {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--cristal-alto);
  border: 1px solid var(--borde);
  color: var(--texto);
  font-weight: 700;
  transition: top 0.18s var(--curva);
}
.saltar:focus { top: 12px; }

/* ================= Malla de degradados =================
   Cuatro manchas de color fijas al fondo. Son degradados radiales suaves, sin filter: blur(), así que el
   navegador las pinta una vez y luego solo mueve la capa entera con transform (la mueve el puntero, ±14 px).
   Encima, el «grano»: un degradado que apaga la malla hacia abajo para que el texto largo se lea bien. */
.malla {
  position: fixed;
  inset: -10% -10% auto;
  height: 120vh;
  z-index: -2;
  pointer-events: none;
  opacity: var(--malla-opacidad);
  transform: translate3d(var(--desvio-x, 0), var(--desvio-y, 0), 0);
  transition: transform 0.7s var(--curva);
  will-change: transform;
}
.mancha { position: absolute; border-radius: 50%; }
.mancha--menta {
  width: 52vw; height: 42vw; left: -8%; top: 0;
  background: radial-gradient(closest-side, var(--mancha-menta), color-mix(in srgb, var(--mancha-menta) 45%, transparent) 45%, transparent);
}
.mancha--azul {
  width: 60vw; height: 46vw; left: 32%; top: -10%;
  background: radial-gradient(closest-side, var(--mancha-azul), color-mix(in srgb, var(--mancha-azul) 45%, transparent) 45%, transparent);
}
.mancha--melocoton {
  width: 46vw; height: 40vw; right: -6%; top: 20%;
  background: radial-gradient(closest-side, var(--mancha-melocoton), color-mix(in srgb, var(--mancha-melocoton) 40%, transparent) 45%, transparent);
}
.mancha--profunda {
  width: 76vw; height: 56vw; left: 8%; top: 38%;
  background: radial-gradient(closest-side, var(--mancha-profunda), transparent);
}
.grano {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--grano);
}

/* ================= Rejilla general ================= */
.envoltorio {
  width: min(var(--ancho-max), 100% - 44px);
  margin-inline: auto;
}
@media (max-width: 600px) { .envoltorio { width: calc(100% - 28px); } }

.rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--canalon); }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }
@media (max-width: 940px) { .col-4, .col-6, .col-8 { grid-column: span 12; } }

/* ================= Cabecera en píldora flotante ================= */
.cabecera { position: sticky; top: 0; z-index: 50; padding-top: 12px; }
.cabecera-in {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--cabecera-alto);
  padding: 0 8px 0 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cristal-alto) 80%, transparent);
  border: 1px solid var(--borde);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 14px 34px -20px rgba(0, 0, 0, 0.6);
}

.marca {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--texto);
  white-space: nowrap;
}
.marca:hover { text-decoration: none; }
.marca-sello {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--degradado-marca);
  color: var(--sobre-acento);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.25s var(--muelle);
}
.marca:hover .marca-sello { transform: rotate(-6deg) scale(1.06); }
.marca-texto { color: var(--suave); font-weight: 500; }
.marca-texto b { color: var(--texto); font-weight: 800; }

.cabecera nav { display: flex; gap: 2px; }
.cabecera nav a {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--suave);
  transition: background var(--transicion), color var(--transicion);
}
.cabecera nav a:hover { background: var(--relleno-hover); color: var(--texto); text-decoration: none; }
.cabecera nav a[aria-current='page'] { color: var(--texto); background: var(--relleno-hover); box-shadow: inset 0 0 0 1px var(--borde); }
@media (max-width: 960px) { .cabecera nav { display: none; } }

/* El disparador del buscador parece un campo pero es un botón: Ctrl+K y el clic hacen lo mismo. */
.buscar-disparador {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  min-width: 250px;
  height: 38px;
  padding: 0 8px 0 13px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--cristal);
  color: var(--tenue);
  font-size: var(--t-s);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion), color var(--transicion);
}
.buscar-disparador:hover { border-color: var(--borde-fuerte); background: var(--relleno-hover); color: var(--suave); }
.buscar-disparador .relleno { flex: 1; }
.teclas { display: inline-flex; gap: 3px; align-items: center; }
@media (max-width: 700px) {
  .buscar-disparador { min-width: 0; flex: 1; }
  .buscar-disparador .teclas { display: none; }
}

.acciones-cabecera { display: flex; gap: 2px; }

/* ================= Navegación inferior en móvil: otra píldora, abajo ================= */
.nav-movil {
  display: none;
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 45;
  padding: 6px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--cristal-alto) 86%, transparent);
  border: 1px solid var(--borde);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--sombra-flotante);
}
.nav-movil a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0;
  border-radius: 16px;
  font-size: var(--t-xxs);
  font-weight: 600;
  color: var(--suave);
}
.nav-movil a:hover { text-decoration: none; }
.nav-movil a[aria-current='page'] { color: var(--texto); background: var(--relleno-hover); }
.nav-movil a[aria-current='page'] .ico { color: var(--acento-texto); }
@media (max-width: 760px) {
  .nav-movil { display: flex; }
  body { padding-bottom: 86px; }
}

/* ================= Contenido ================= */
main { display: block; outline: none; min-height: 60vh; padding-block: 0.5rem 3rem; }
main > .envoltorio > * + * { margin-top: 1.5rem; }

.migas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 26px;
  font-size: var(--t-xs);
  color: var(--tenue);
}
.migas a { color: var(--suave); }
.migas a:hover { color: var(--texto); text-decoration: none; }
.migas .sep { color: var(--tenue-deco); }
.migas [aria-current='page'] { color: var(--tenue); }

.texto-largo { max-width: var(--medida); color: var(--suave); }
.texto-largo p { margin: 0 0 0.9rem; }
.texto-largo strong { color: var(--texto); }
.texto-largo h2 { margin: 2rem 0 0.6rem; color: var(--texto); }
.texto-largo h3 { margin: 1.4rem 0 0.4rem; color: var(--texto); }
.texto-largo ul, .texto-largo ol { margin: 0 0 0.9rem; padding-left: 1.2rem; }
.texto-largo li { margin-bottom: 0.3rem; }

/* ================= Pie ================= */
.pie { margin-top: 36px; padding: 28px 0 40px; border-top: 1px solid var(--borde); }
.pie-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; font-size: var(--t-xs); color: var(--tenue); }
.pie-in nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-left: auto; }
.pie-in a { color: var(--suave); }
.pie-in a:hover { color: var(--texto); text-decoration: none; }

/* ================= Aparición suave =================
   El contenido ya está pintado y visible: esto solo le quita unos píxeles de desplazamiento al entrar en
   pantalla. Si el JS falla, no se pierde nada; con prefers-reduced-motion no se mueve. */
.listo-para-aparecer { transform: translate3d(0, 12px, 0); transition: transform 0.55s var(--curva); }
.listo-para-aparecer.es-visible { transform: none; }
@media (prefers-reduced-motion: reduce) { .listo-para-aparecer { transform: none; } }

/* ================= Utilidades mínimas ================= */
.oculto { display: none !important; }
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.suave { color: var(--suave); }
.tenue { color: var(--tenue); }
.mono { font-family: var(--mono); }
.mono-xs { font-family: var(--mono); font-size: var(--t-xxs); }
.fila { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.columna { display: flex; flex-direction: column; gap: 0.6rem; }