/* ==========================================================================
   CasaMarx Campus · Base
   Reset acotado, tipografía y layout. Identidad de imprenta política:
   mayúsculas, tracking amplio, bordes de 1px, bloques de color sólido.
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--crema);
  color: var(--gris-texto);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  color: var(--azul);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
}

h1 { font-size: clamp(2.25rem, 5vw, var(--text-4xl)); }
h2 { font-size: clamp(1.75rem, 3.5vw, var(--text-2xl)); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5, h6 { font-size: var(--text-md); letter-spacing: var(--track-wide); }

p { margin: 0 0 var(--space-5); }

a { color: var(--rojo); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--rojo-hover); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--amarillo);
  outline-offset: 2px;
  border-radius: var(--radius);
}

hr { border: 0; border-top: 1px solid var(--gris-sutil); margin: var(--space-10) 0; }

blockquote {
  margin: var(--space-8) 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  border-left: 4px solid var(--rojo);
  font-size: var(--text-md);
  color: var(--azul);
}

code, pre, kbd { font-family: var(--font-mono); font-size: 0.9em; }

pre {
  background: var(--azul);
  color: var(--crema);
  padding: var(--space-5);
  overflow: auto;
  border-radius: var(--radius);
}

table { width: 100%; border-collapse: collapse; margin: var(--space-6) 0; }
th, td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--gris-sutil); text-align: left; }
th {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  font-size: var(--text-sm);
  color: var(--azul);
}

/* --- Layout --- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.wrap--wide { max-width: var(--maxw-wide); }
.wrap--flush { padding-inline: 0; }

.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1 0 auto; padding-block: var(--space-12); }

.section { padding-block: clamp(48px, 8vw, 96px); }
.section.is-alt { background: var(--hueso); }
.section.is-dark { background: var(--azul); color: var(--crema); }
.section.is-dark h1,
.section.is-dark h2,
.section.is-dark h3 { color: var(--crema); }

/* Encabezado de sección con numeración en amarillo, guiño de imprenta */
.section__head { margin-bottom: var(--space-10); }
.section__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-xwide);
  color: var(--amarillo);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.section__title { margin-bottom: var(--space-3); }
.section__lead {
  max-width: 62ch;
  font-size: var(--text-md);
  color: var(--gris-texto);
}
.section.is-dark .section__lead { color: rgba(242, 240, 236, 0.82); }

/* --- Accesibilidad --- */

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-tooltip);
  background: var(--rojo);
  color: var(--crema);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); color: var(--crema); }

/* --- Utilidades --- */

.u-mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.u-center { text-align: center; }
.u-mt-0 { margin-top: 0; }
.u-mb-0 { margin-bottom: 0; }