/* gsbatx.com — «en construcción». La idea: la cinta de medir del constructor es el marco de la página.
   Paleta provisional (no hay logo todavía): el oro del nombre sobre concreto claro, tinta de grafito. */
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/fuentes/plex-sans-latin.woff2) format("woff2");
}

:root {
  --oro: #c9a227;        /* la cinta: campo de color, nunca texto sobre concreto */
  --tinta: #1d1b18;      /* títulos y marcas de la cinta */
  --grafito: #4a453d;    /* texto secundario: 8.6:1 sobre el concreto */
  --concreto: #efece6;   /* fondo */
  --linea: #d6d1c6;      /* separadores */
  --t-nota: 0.875rem;    /* 14 */
  --t-cuerpo: 1rem;      /* 16 */
  --t-medio: 1.25rem;    /* 20 */
  --t-estado: 1.75rem;   /* 28 */
  --t-nombre: clamp(2.5rem, 7vw, 4rem); /* 40 → 64 */
  --margen: clamp(1rem, 6vw, 5rem);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: "IBM Plex Sans", system-ui, sans-serif; font-size: var(--t-cuerpo); line-height: 1.5;
  color: var(--tinta); background: var(--concreto);
}
::selection { background: var(--oro); color: var(--tinta); }
a { color: var(--tinta); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }

/* La cinta: marcas cada 24 px, más altas cada 48 y cada 96 (como pulgada, media y cuarto). */
.regla {
  height: 56px; flex: none; background-color: var(--oro);
  background-image:
    repeating-linear-gradient(90deg, var(--tinta) 0 2px, transparent 2px 96px),
    repeating-linear-gradient(90deg, transparent 0 48px, var(--tinta) 48px 50px, transparent 50px 96px),
    repeating-linear-gradient(90deg, transparent 0 24px, var(--tinta) 24px 26px, transparent 26px 48px);
  background-size: 100% 24px, 100% 16px, 100% 10px;
  background-position: left bottom;
  background-repeat: repeat-x;
}

.obra { flex: 1; width: 100%; max-width: 72rem; padding: clamp(3rem, 10vh, 7.5rem) var(--margen) 4rem; }
.marca { display: block; width: 56px; height: 56px; margin-bottom: 2rem; border-radius: 4px; }
h1 {
  margin: 0; font-size: var(--t-nombre); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em;
  text-wrap: balance;
}
.lugar { margin: 0.75rem 0 0; font-size: var(--t-medio); color: var(--grafito); }

.estado { margin-top: 3rem; padding-top: 1.5rem; border-top: 2px solid var(--tinta); max-width: 36rem; }
.estado + .estado { margin-top: 2rem; border-top: 1px solid var(--linea); }
.estado h2 { margin: 0; font-size: var(--t-estado); font-weight: 600; line-height: 1.2; text-wrap: balance; }
.estado p { margin: 0.5rem 0 0; color: var(--grafito); text-wrap: pretty; }

.texto { max-width: 44rem; }
.texto h1 { font-size: var(--t-estado); margin-top: 0.5rem; }
.texto h2 { font-size: var(--t-medio); margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--linea); }
.texto p { text-wrap: pretty; }
.volver { margin: 0; font-size: var(--t-nota); }

.pie {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem;
  padding: 1.5rem var(--margen); border-top: 1px solid var(--linea);
  font-size: var(--t-nota); color: var(--grafito);
}
.pie p { margin: 0; }
.pie a { color: var(--grafito); }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }