/* Augur · sitio mínimo. Paleta «mármol y bronce» (augur-admin/tailwind.config.js).
   Sin fuentes ni scripts de terceros: la página no hace ninguna petición externa.
   Hanken Grotesk y Cormorant Garamond se usan si el equipo las tiene instaladas;
   si no, entran las del sistema. */

:root {
  color-scheme: light;
  --marmol: #F5F3EE;
  --tinta: #1B1A17;
  --bronce: #8A5A24;
  --bronce-oscuro: #6B4614;
  --piedra-50: #FBFAF7;
  --piedra-200: #DED9CF;
  --piedra-600: #5E5A52;
}

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

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

body {
  margin: 0;
  background: var(--marmol);
  color: var(--tinta);
  font: 400 1.0625rem/1.65 "Hanken Grotesk", "Hanken Grotesk Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* 16 px a cada lado en el celular. */
.contenedor { width: min(100% - 2rem, 44rem); margin-inline: auto; }

a { color: var(--bronce-oscuro); text-underline-offset: 0.18em; }
a:hover { color: var(--tinta); }
a:focus-visible { outline: 3px solid var(--bronce); outline-offset: 3px; border-radius: 2px; }

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.cabecera { padding-block: 1.5rem 0.5rem; }
.marca { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--bronce); text-decoration: none; }
.marca:hover { color: var(--bronce-oscuro); }
/* A 36 px las vueltas del lituus se pegan y el gancho parece una P. */
.marca svg { width: 44px; height: 44px; }
.firma { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-weight: 600; font-size: 1.85rem; letter-spacing: 0.01em; color: var(--tinta); line-height: 1; }

/* ── Texto ────────────────────────────────────────────────────────────────── */
h1, h2 { line-height: 1.2; font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(1.7rem, 5.2vw, 2.4rem); margin: 2.5rem 0 1rem; }
h2 { font-size: 1.25rem; margin: 2.75rem 0 0.75rem; }
p { margin: 0 0 1rem; text-wrap: pretty; }
.entrada { font-size: 1.1875rem; color: var(--tinta); }
.nota { color: var(--piedra-600); font-size: 0.9375rem; }

.productos { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.75rem; }
.productos li { padding: 0.9rem 1rem; background: var(--piedra-50); border: 1px solid var(--piedra-200); border-radius: 10px; }
.productos strong { display: block; font-weight: 600; }

.pasos { padding-left: 1.25rem; margin: 0 0 1rem; }
.pasos li { margin-bottom: 0.6rem; }
.pasos strong { font-weight: 600; }

/* ── Datos de la empresa ──────────────────────────────────────────────────── */
.empresa { margin: 0; padding: 0.25rem 1rem; background: var(--piedra-50); border: 1px solid var(--piedra-200); border-radius: 10px; }
.empresa div { padding: 0.7rem 0; border-top: 1px solid var(--piedra-200); }
.empresa div:first-child { border-top: 0; }
.empresa dt { font-size: 0.8125rem; color: var(--piedra-600); text-transform: uppercase; letter-spacing: 0.06em; }
.empresa dd { margin: 0.1rem 0 0; overflow-wrap: anywhere; }

@media (min-width: 36rem) {
  .empresa div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; align-items: baseline; }
  .empresa dd { margin: 0; }
}

/* ── Pie ──────────────────────────────────────────────────────────────────── */
.pie { margin-top: 3.5rem; padding-block: 1.5rem 2.5rem; border-top: 1px solid var(--piedra-200); color: var(--piedra-600); font-size: 0.9375rem; }
.pie p { margin: 0 0 0.4rem; }

/* ── Solo para los borradores legales (carpeta «pendientes», no se publica) ── */
.borrador { margin: 1.25rem 0 0; padding: 0.8rem 1rem; background: #F7E4E0; border: 1px solid #9E2F24; border-radius: 10px; color: #8E2A20; font-size: 0.9375rem; }
mark.confirmar { background: #F6E6B8; color: var(--tinta); padding: 0.05em 0.3em; border-radius: 4px; }
.legal h2 { margin-top: 2rem; }
.legal ul, .legal ol { padding-left: 1.25rem; margin: 0 0 1rem; }
.legal li { margin-bottom: 0.35rem; }