/* =====================================================================
   MAKKI — Reset y tipografia base. Mobile-first (seccion 12).
   ===================================================================== */

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

/* El atributo [hidden] tiene que ganar SIEMPRE. Sin esto, cualquier regla con
   display: block o flex lo pisa y el elemento «oculto» se queda a la vista: ya
   pasó con el panel de ejemplos y con las pistas del panel de administración. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--negro);
  color: var(--crema);
  font-family: var(--f-cuerpo);
  font-size: var(--t-m);
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;     /* el cuerpo nunca hace scroll horizontal */
}

/* ---- Titulares tipo cartel ---- */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 400;           /* Anton ya es de peso alto */
  text-transform: uppercase;
  letter-spacing: var(--ls-cartel);
  line-height: 0.9;
  margin: 0 0 var(--e-3);
  text-wrap: balance;
}
h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); font-family: var(--f-cond); font-weight: 700; letter-spacing: 0.01em; line-height: 1.05; }
h4 { font-size: var(--t-m); font-family: var(--f-cond); font-weight: 700; letter-spacing: 0.04em; }

p { margin: 0 0 var(--e-3); max-width: var(--ancho-lectura); }
p:last-child { margin-bottom: 0; }

/* Cuerpo en bloques cortos, alineados a la izquierda: nunca justificado */
.prosa { max-width: var(--ancho-lectura); }
.prosa > * + * { margin-top: var(--e-3); }

/* ---- Etiqueta de metadato: MOD. 2 / ESCENA 14 ---- */
.meta {
  font-family: var(--f-cond);
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--crema-apag);
  display: inline-block;
}
.meta--acento { color: var(--acento); }
.meta--sobre-claro { color: rgba(0, 0, 0, 0.66); }

a { color: var(--acento); text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover, a:focus-visible { color: var(--crema); }
.bloque--crema a { color: var(--acento-prof); }
.bloque--crema a:hover { color: var(--negro); }

/* ---- Foco visible: critico para navegacion por teclado (seccion 16) ---- */
:focus-visible {
  outline: var(--filete-grueso) solid var(--acento);
  outline-offset: 2px;
}
.bloque--acento :focus-visible,
.bloque--acento-prof :focus-visible { outline-color: var(--crema); }

/* ---- Utilidad para lectores de pantalla ---- */
.solo-lector {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.salto-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--acento); color: var(--crema); padding: var(--e-3) var(--e-4);
  font-family: var(--f-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  border: 0;
}
.salto-contenido:focus { left: var(--gutter); top: var(--e-2); }

/* ---- Fotografia: SIEMPRE en blanco y negro (seccion 9.1) ---- */
img, video, .foto {
  max-width: 100%;
  height: auto;
  display: block;
  filter: grayscale(1) contrast(1.12);
}

hr {
  border: 0;
  border-top: var(--filete) solid var(--negro-filete);
  margin: var(--e-6) 0;
}
.bloque--crema hr { border-top-color: rgba(0, 0, 0, .2); }

/* ---- Estructura de pagina ---- */
.envoltorio {
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  padding-block: var(--e-5);
}

.pila > * + * { margin-top: var(--e-4); }
.pila-holgada > * + * { margin-top: var(--e-6); }

/* Scroll horizontal solo donde toca: tablas, diagramas, codigo */
.desborda-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

::selection { background: var(--acento); color: var(--crema); }

/* Barra de scroll discreta, coherente con el plano negro */
* { scrollbar-color: var(--negro-filete) var(--negro); scrollbar-width: thin; }