/* ==========================================================================
   layout.css — bandas, retícula y posicionamiento medido
   Modo 1 (≥1024 px): réplica posicionada en px de diseño (--u), con la misma
   altura de banda que el PNG. Modo 2 (<1024 px): flujo apilado y legible.
   ========================================================================== */

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

html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--band-nav) * var(--u));
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(var(--fs-body) * var(--u));
  letter-spacing: var(--track-body);
  line-height: var(--lh-body);
  color: var(--paper);
  background: var(--ink);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

/* ---------- Contenedores -------------------------------------------------- */
.wrap {
  width: 100%;
  padding-left: calc(var(--margin-left) * var(--u));
  padding-right: calc(var(--margin-right) * var(--u));
}

.read {
  max-width: calc(var(--read-width) * var(--u));
  margin-inline: auto;
}

/* ---------- Bandas ------------------------------------------------------- */
.band {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--ink);
}

/* El navbar del diseño va MONTADO sobre el retrato: no ocupa flujo, no pinta
   fondo y no desplaza las bandas. Cualquier altura en flujo rompe la réplica. */
.band--nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(var(--band-nav) * var(--u));
  z-index: 60;
  background: transparent;
  overflow: visible;
}
.band--hero    { height: calc(var(--band-hero) * var(--u)); }
.band--cintillo{ height: calc(var(--band-cintillo) * var(--u)); }
.band--geometria{ height: calc(var(--band-geometria) * var(--u)); }
.band--vision  { height: calc(var(--band-vision) * var(--u)); }
.band--comprension { height: calc(var(--band-comprension) * var(--u)); }
.band--armonia { height: calc(var(--band-armonia) * var(--u)); }

/* ---------- Piezas posicionadas (coordenadas medidas del PNG) ------------ */
.at {
  position: absolute;
  top: calc(var(--y, 0) * var(--u));
  left: calc(var(--x, 0) * var(--u));
  width: calc(var(--w, auto) * var(--u));
  margin: 0;
}

/* Caja con alto medido: --h en px de diseño */
.at--h { height: calc(var(--h) * var(--u)); }

/* Anclaje a la derecha: se usa cuando el PNG alinea a la derecha */
.at--right {
  left: auto;
  right: calc(var(--r, 0) * var(--u));
}

/* Centrado horizontal real sobre la banda */
.at--center {
  left: 50%;
  transform: translateX(-50%);
}

/* ---------- Tramas y texturas ------------------------------------------- */
/* Semitono: trama de puntos reproducible, no una captura (§4.3) */
.halftone {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center, currentColor 1.1px, transparent 1.2px);
  background-size: calc(6 * var(--u)) calc(6 * var(--u));
  opacity: 0.5;
  pointer-events: none;
}

/* Rayas horizontales tipo pentagrama (Pentagrama.png es una trama de 2 colores) */
.staff {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    currentColor 0,
    currentColor 1px,
    transparent 1px,
    transparent calc(18 * var(--u))
  );
  opacity: 0.55;
  /* el pentagrama no alcanza las esquinas en el PNG (esquina sup-izq: 2,1 % de gris) */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  pointer-events: none;
}

/* Marco de greca: el SVG real, escalado sin pérdida */
.greca {
  position: absolute;
  display: block;
  pointer-events: none;
}

/* ---------- Utilidades --------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: calc(16 * var(--u));
  top: calc(-200 * var(--u));
  z-index: 100;
  background: var(--lime);
  color: var(--ink);
  padding: calc(12 * var(--u)) calc(20 * var(--u));
  font-family: var(--font-display);
  font-size: calc(20 * var(--u));
  text-transform: uppercase;
  text-decoration: none;
  transition: top var(--t-fast) var(--ease);
}

.skip:focus { top: calc(8 * var(--u)); }

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

/* ---------- Modo flujo (móvil/tablet) ----------------------------------- */
@media (max-width: 1023px) {
  .band,
  .band--nav, .band--hero, .band--cintillo, .band--geometria,
  .band--vision, .band--comprension, .band--armonia {
    height: auto;
    min-height: 0;
    padding-block: 40px;
  }

  .at--h { height: auto; }

  .at,
  .at--right,
  .at--center {
    position: static;
    width: auto;
    transform: none;
    top: auto; left: auto; right: auto;
  }

  .band--hero { padding-top: 0; }

  .halftone { background-size: 5px 5px; }
  .staff { background-image: repeating-linear-gradient(to bottom, currentColor 0, currentColor 1px, transparent 1px, transparent 14px); }
}