/* Ferretería La Rondana: papel kraft, óxido y acero. Barlow Condensed para
   titulares (herencia de señalética de carretera, práctica y sin adorno) y
   Barlow para el cuerpo. El catálogo se lee como un inventario real, no
   como una vitrina: por eso no lleva fotos, solo código, marca y precio. */
@font-face { font-family: 'Barlow Condensed'; src: url('../_shared/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../_shared/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../_shared/fonts/barlow-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../_shared/fonts/barlow-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../_shared/fonts/barlow-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --bg: #f6f2ea;
  --fg: #211b16;
  --muted: #6d6255;
  --line: rgba(33, 27, 22, 0.16);
  --surface: #ece3d3;
  --accent: #b8391f;
  --accent-fg: #fff8f2;
  --steel: #4b5560;
  --wa: #1f9d55;
  --font-display: 'Barlow Condensed', system-ui, sans-serif;
  --font-body: 'Barlow', system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.01em;
  --radius: 4px;
  --radius-lg: 6px;
  --btn-radius: 4px;
}
body { font-weight: 400; }
strong, b { font-weight: 600; }

.hero h1 span { color: var(--accent); }
.brand-mark { border-radius: 4px; font-weight: 700; }

/* Estado en vivo (horario): un punto y el texto que calcula demo.js. */
.status { display: inline-flex; align-items: center; gap: 0.6em; font-weight: 600; color: var(--fg); }
.status::before { content: ''; width: 0.55em; height: 0.55em; border-radius: 999px; background: var(--steel); flex: none; }
.status[data-open='false']::before { background: var(--muted); }

/* Marquesina de marcas: franja de acero justo debajo del héroe. */
.brands { background: var(--steel); color: #fff; padding-block: 1.1rem; }
.brands .marquee-track { animation-duration: 32s; }
.brands span { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.92); }

/* Banner ancho del catálogo: una foto, no una rejilla. */
.catalog-band { margin: 0 0 1.75rem; }
.catalog-band img { width: 100%; aspect-ratio: 1800 / 700; object-fit: cover; border-radius: var(--radius-lg); }
.catalog-band figcaption { margin-top: 0.75rem; max-width: 46rem; color: var(--muted); font-size: var(--step--1); }

/* Clave de departamentos: qué significa cada letra del código. */
.catalog-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0 0 1.75rem; padding-top: 1.1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--step--1); }
.catalog-legend strong { margin-right: 0.4em; font-family: var(--font-display); font-weight: 700; color: var(--steel); }

/* Buscador y fichas de departamento (solo tienen sentido con JS). */
.catalog-toolbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 1.75rem; }
.catalog-toolbar input[type='search'] { flex: 1 1 17rem; min-height: 3rem; padding: 0 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--fg); font: inherit; font-size: var(--step-0); }
.catalog-toolbar input[type='search']::placeholder { color: var(--muted); }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { padding: 0.55rem 1.05rem; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--fg); font-weight: 600; font-size: var(--step--1); cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.chip:hover { border-color: var(--fg); }
.chip[aria-pressed='true'] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.catalog-empty { padding: 1.5rem 0; }

/* Tabla del catálogo: código con tipografía de etiqueta, existencia con punto. */
.catalog-table th[scope='row'] { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); letter-spacing: 0.01em; color: var(--steel); font-variant-numeric: tabular-nums; }
.catalog-table .price { font-size: var(--step-0); font-family: var(--font-body); font-weight: 600; color: var(--fg); }
.stock { display: inline-flex; align-items: center; gap: 0.5em; }
.stock::before { content: ''; width: 0.5em; height: 0.5em; border-radius: 999px; background: var(--steel); flex: none; }
.stock.is-order { color: var(--muted); }
.stock.is-order::before { background: var(--accent); }
.catalog-note { margin-top: 1.75rem; }

/* Pasos de "cómo pedimos": numeral condensado, sin tarjeta. */
.reasons .num { font-weight: 700; }

.faq summary::after { color: var(--accent); }
.band::before { background: linear-gradient(to top, rgba(33, 27, 22, 0.86), rgba(33, 27, 22, 0.32) 55%, rgba(33, 27, 22, 0.08)); }