/* =========================================================
   WEB · marca: los colores, letras, medidas y el ancho de columna de esta web.
   Lo carga toda la web, también la reserva y el panel: para cambiar de marca se toca solo esto y las fuentes.
   ========================================================= */

:root {
  --c-bg: #ffffff;
  --c-surface: #ffffff;
  --c-surface-2: #f3e4d2;
  --c-ink: #3a2210;
  --c-muted: #756458;
  --c-line: #e3e0de;
  --c-brand: #3a2210;          /* color principal */
  --c-brand-ink: #ffffff;      /* texto sobre el color principal */
  --c-brand-soft: #f3e4d2;
  --c-accent: #b8214a;
  --c-ok: #2e7d4f;
  --c-warn: #b7791f;
  --c-bad: #b23b3b;

  --f-display: "Playfair Display", Georgia, serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: .875rem;
  --radius-lg: 1.5rem;
  --shadow: 0 1px 2px rgba(29,27,24,.05), 0 .5rem 1.5rem rgba(29,27,24,.06);
  --wrap-base: 73.75rem;       /* ancho de columna (Muestrario: «Columna») */
  --wrap-grande: 70vw;         /* el mismo, en pantallas de más de 1440 px */
  --wrap: var(--wrap-base);
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-h: 4.5rem;
}

/* ===== Pantallas grandes (14 oct 2026; herramientas/pantallas-grandes.mjs) =====
   Hasta 1440 px de ancho la web es idéntica. Por encima, la letra raíz crece en proporción (letra, espacios y
   medidas van en rem) hasta el 150 % a 2840 px, y el contenido ocupa al menos el 70 % de la pantalla: en una
   pantalla 2K o 4K se ve como en un portátil, solo que más grande, en vez de quedar apretado en el centro. */
html:not(:has([data-login])) { font-size: clamp(100%, calc(100% + (100vw - 1440px) * .005714), 150%); } /* el panel (admin.html) no crece */