/* =========================================================
   IZAKAYA SENRO · marca: colores, letras, medidas y ancho de columna.
   Lo carga toda la web, también la reserva y el panel.
   Papel crudo, negro carbón y rojo farolillo (los del briefing). El rojo del briefing (#C8372D) da 4,2:1 sobre el
   papel: se usa en bloques grandes (--c-farol); para texto y botones, el mismo rojo algo más oscuro (--c-brand, 5:1).
   ========================================================= */

:root {
  --c-bg: #efe6d2;
  --c-surface: #f8f2e4;
  --c-surface-2: #e5d9bf;
  --c-ink: #1a1a1a;
  --c-muted: #5a5249;
  --c-line: #cbbd9c;
  --c-brand: #b42f27;          /* rojo farolillo para texto y botones */
  --c-brand-ink: #fff8ec;      /* texto sobre el rojo */
  --c-brand-soft: #f0d5c8;
  --c-accent: #9e2a22;
  --c-farol: #c8372d;          /* el rojo del briefing, solo en superficies grandes */
  --c-carbon: #1a1a1a;
  --c-ok: #2e6b45;
  --c-warn: #9a6416;
  --c-bad: #a3302a;

  --f-display: "Barlow Condensed", "Arial Narrow", sans-serif-condensed, sans-serif;
  --f-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: .25rem;
  --radius-lg: .5rem;
  --shadow: 0 1px 0 rgba(26,26,26,.08), 0 .75rem 1.5rem -1rem rgba(26,26,26,.35);
  --wrap-base: 73.75rem;
  --wrap-grande: 70vw;
  --wrap: var(--wrap-base);
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-h: 4.25rem;
}

/* Piezas de marca que comparten todas las páginas (la reserva, la cita, los legales y la portada).
   Con «body» delante para ganar a funcional.css, que se carga después. */
body .header { background: var(--c-bg); border-bottom: 2px solid var(--c-ink); }
body .logo { font: 800 1.75rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: var(--c-ink); gap: .5rem; }
body .logo-mark { width: 2rem; height: 2rem; border-radius: var(--radius); background: var(--c-ink); }
body .logo-mark svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--c-bg); stroke-width: 2; }
body :is(h1, h2, h3) { font-family: var(--f-display); }
body .btn { border-radius: var(--radius); }

/* ===== 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 */
body .logo { min-height: 2.75rem; }
body .footer a, body .map .btn { display: inline-flex; align-items: center; min-height: 2.75rem; }