/* base.css — mecánica compartida. Cero estética.
   Los colores y las fuentes viven en los tokens de :root y los escribe estilo.css
   por cliente. Aquí no hay un solo valor de color ni de tipografía fuera de esas
   variables: esta hoja sólo resuelve reset, accesibilidad, rejillas y estados. */

/* ------------------------------------------------------------------ reset */

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

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

ul, ol { padding: 0; list-style: none; }

body {
  min-height: 100dvh;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--fuente-display);
  line-height: 1.15;
  text-wrap: balance;
}

p { text-wrap: pretty; }

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

table { border-collapse: collapse; }

[hidden] { display: none !important; }

/* ------------------------------------------------------------------ tokens */

:root {
  --fondo: #ffffff;
  --tinta: #16181d;
  --tinta-suave: #5c6270;
  --acento: #1f6feb;
  --acento-contraste: #ffffff;
  --superficie: #f4f5f7;
  --borde: #dcdfe5;
  --radio: 12px;
  --fuente-display: Georgia, serif;
  --fuente-texto: Georgia, serif;
  --ancho-max: 1200px;
}

/* ------------------------------------------------------------- accesibilidad */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.salto {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radio);
  background: var(--acento);
  color: var(--acento-contraste);
  text-decoration: none;
  transition: transform 0.2s ease;
}

.salto:focus { top: 8px; }

:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ revelado */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
}

[data-reveal].es-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------- esqueletos */

.esqueleto {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  min-height: 280px;
}

.esqueleto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--borde), transparent);
  opacity: 0.7;
  transform: translateX(-100%);
  animation: brillo 1.4s linear infinite;
}

@keyframes brillo {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* ------------------------------------------------------------ estructura */

.hero { min-height: 100dvh; }

.resultados {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.lista-sucursales {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.producto { display: flex; flex-direction: column; }

.producto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.producto-sucursales { display: flex; flex-wrap: wrap; gap: 6px; }

.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.chips > * { flex: 0 0 auto; }

.hojas { display: flex; flex-wrap: wrap; gap: 8px; }

.buscador { display: flex; gap: 8px; flex-wrap: wrap; }
.buscador input[type="search"] { flex: 1 1 260px; min-width: 0; }

.sucursal-horarios dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; }
.sucursal-acciones { display: flex; flex-wrap: wrap; gap: 8px; }

.wa-flotante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--acento);
  color: var(--acento-contraste);
  text-decoration: none;
  transition: transform 0.2s ease;
}

.wa-flotante:hover { transform: scale(1.06); }

/* --------------------------------------------------------- movimiento off */

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
  .esqueleto::after { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}