/* Lavandería Nube Blanca: azul cielo, blanco y tinta. Fresco y mínimo.
   Bricolage Grotesque para titulares y numerales; Albert Sans para el resto.
   Firma: la boleta de lavandería (etiqueta perforada) en "Cómo funciona". */
@font-face { font-family: 'Bricolage Grotesque'; src: url('../_shared/fonts/bricolage-grotesque-latin-opsz-normal.woff2') format('woff2-variations'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Albert Sans'; src: url('../_shared/fonts/albert-sans-latin-wght-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #f8fbfd;
  --fg: #0e1f2c;
  --muted: #5c7688;
  --line: rgba(14, 31, 44, 0.14);
  --surface: #e9f3f8;
  --accent: #0b6a92;
  --accent-fg: #ffffff;
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Albert Sans', system-ui, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.02em;
  --radius: 16px;
  --radius-lg: 22px;
}

.hero h1 span { color: var(--accent); }
.price, .ledger .price { color: var(--accent); font-variant-numeric: tabular-nums; }
.faq summary::after { color: var(--accent); }
.quotes blockquote::before { color: var(--accent); }
.reasons .num { color: var(--accent); }
.band::before { background: linear-gradient(to top, rgba(9, 28, 41, 0.86), rgba(9, 28, 41, 0.32) 55%, rgba(9, 28, 41, 0.08)); }

/* Aviso en vivo: un punto de estado antepuesto por CSS (::before sobrevive al textContent
   que demo.js reemplaza en el elemento con data-open-hours). Sin JS se ve el horario fijo. */
.fact-live { position: relative; padding-left: 1.35rem; }
.fact-live::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--muted); }
.fact-live[data-open='true']::before { background: var(--wa); }

/* La boleta: una etiqueta de lavandería colgada de un tendedero.
   Un agujero perforado, un cordón que sube hasta la línea y el número de paso. */
.clothesline { position: relative; padding-top: 2.25rem; }
.clothesline::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); }
.tickets { display: grid; gap: 2.75rem 1.5rem; margin-top: 2.5rem; }
.ticket { position: relative; background: var(--surface); border-radius: 6px 6px var(--radius) var(--radius); padding: 2.1rem 1.5rem 1.85rem; }
.ticket::before { content: ''; position: absolute; top: -2.25rem; left: 50%; width: 1px; height: 2.65rem; background: var(--line); }
.ticket-hole { position: absolute; top: 0.85rem; left: 50%; transform: translate(-50%, -50%); width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); }
.ticket-num { display: block; margin-top: 1.1rem; font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--step-3); line-height: 1; color: var(--accent); letter-spacing: 0; }
.ticket h3 { margin-top: 0.9rem; font-size: var(--step-1); }
.ticket p { margin-top: 0.5rem; color: var(--fg-soft); font-size: var(--step-0); line-height: 1.5; }
@media (min-width: 800px) {
  .tickets { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .ticket:nth-child(1) { transform: rotate(-1deg); }
  .ticket:nth-child(2) { transform: rotate(0.6deg); }
  .ticket:nth-child(3) { transform: rotate(-0.4deg); }
}
@media (prefers-reduced-motion: reduce) { .ticket { transform: none !important; } }

/* Zonas: reutiliza .zones del scaffold; solo ajusta el tercer aviso a texto más discreto. */
.zones li.zone-note { background: transparent; border: 1px dashed var(--line); color: var(--fg-soft); }
.zones li.zone-note strong { color: var(--fg-soft); font-family: var(--font-body); font-weight: 600; font-size: var(--step-0); }