/* Sistema de diseño 4d3 · base
 *
 * Reset mínimo, tipografía y las piezas estructurales de la marca: la barra de
 * tríada, las secciones numeradas «01 — Nombre» y la escala de texto fluida.
 *
 * Objetivo de accesibilidad: WCAG 2.1 AA. Foco siempre visible, ninguna
 * información transmitida solo por color, y `prefers-reduced-motion` respetado.
 */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-weight: var(--peso-ligero);
  font-size: var(--texto-base);
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papel);
}

/* --- Tipografía ---------------------------------------------------------- */

h1, h2, h3, h4 {
  font-weight: var(--peso-ligero);
  line-height: 1.2;
  margin: 0 0 var(--e3);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--texto-3xl); }
h2 { font-size: var(--texto-2xl); }
h3 { font-size: var(--texto-xl); }
h4 { font-size: var(--texto-lg); }

/* El sistema salta a 600 en <strong> y lo subraya en pastel: es el recurso
 * gráfico de la casa para destacar sin gritar. */
strong {
  font-weight: var(--peso-fuerte);
  position: relative;
}

p { margin: 0 0 var(--e4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--tinta);
  text-decoration-color: var(--pastel-blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--micro);
}
a:hover { color: var(--dark-blue); }

small { font-size: var(--texto-sm); }

/* --- Mono: etiquetas, números, importes, botones ------------------------- */

.mono,
.etiqueta,
.cifra,
th,
.numero-seccion {
  font-family: var(--fuente-mono);
  font-variant-numeric: tabular-nums;
}

.etiqueta {
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--tinta-suave);
}

/* Los importes en tabla se alinean por la coma decimal */
.cifra {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* --- Secciones numeradas: invariante 3 del sistema ----------------------- */

.seccion { margin-bottom: var(--e7); }

.numero-seccion {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--tinta-suave);
  margin-bottom: var(--e3);
}

.numero-seccion::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: none;
  /* El rombo: el logotipo son tres de estos superpuestos */
  transform: rotate(45deg);
  background: var(--acento, var(--pastel-green));
}

/* --- La barra de tríada -------------------------------------------------- */

.barra-triada {
  height: var(--barra);
  background: var(--triada);
  background-size: 200% 100%;
  animation: desplazar-triada 6s ease infinite;
}

@keyframes desplazar-triada {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* --- Estructura ---------------------------------------------------------- */

.contenedor {
  width: 100%;
  max-width: var(--ancho-rejilla);
  margin: 0 auto;
  padding: 0 var(--e5);
}

.contenedor--lectura { max-width: var(--ancho-lectura); }

main { padding: var(--e6) 0 var(--e8); }

/* --- Foco visible: nunca se suprime -------------------------------------- */

:focus-visible {
  outline: 3px solid var(--dark-blue);
  outline-offset: 2px;
}

.salto {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--e3) var(--e4);
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--fuente-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  font-size: var(--texto-xs);
}
.salto:focus { left: 0; }

.oculto-visualmente {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Utilidades ---------------------------------------------------------- */

.suave { color: var(--tinta-suave); }
.sin-dato { color: var(--tinta-suave); font-style: italic; }
.derecha { text-align: right; }
.centro { text-align: center; }
.nada { display: none; }

.fila {
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
}
.fila--entre { justify-content: space-between; }
.fila--fin { justify-content: flex-end; }

.pila { display: flex; flex-direction: column; gap: var(--e4); }
.pila--fina { gap: var(--e2); }

.rejilla {
  display: grid;
  gap: var(--e4);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

/* --- Movimiento reducido -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Impresión ------------------------------------------------------------ */

@media print {
  .cabecera, .barra-triada, .acciones, .paginador { display: none; }
  body { font-size: 11pt; }
}