/* WowCita · "Spas en Neiva" (Módulo 17A): directorio público, pensado primero para el celular. */

.spas { background: var(--porcelana); }

/* ---------- Encabezado ---------- */
.spas-encabezado { background: var(--superficie); border-bottom: 1px solid var(--borde); }
.spas-encabezado__interior { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-3); min-height: 60px; }
.spas-encabezado__unete { font-size: var(--texto-s); font-weight: 700; color: var(--frambuesa); text-align: right; }

/* ---------- Título y filtros ---------- */
.spas-cabecera { padding: var(--espacio-6) 0 var(--espacio-4); }
.spas-cabecera h1 { margin: 0 0 var(--espacio-1); font-size: var(--texto-xxl); line-height: 1.15; }
.spas-cabecera p { margin: 0; max-width: var(--ancho-lectura); }

.spas-filtros { display: flex; flex-direction: column; gap: var(--espacio-3); margin-bottom: var(--espacio-3); }
/* En el celular las zonas se deslizan de lado, en una sola fila */
.spas-zonas { display: flex; gap: var(--espacio-2); overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.spas-zonas::-webkit-scrollbar { display: none; }
.spas-zona {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 var(--espacio-4);
  border: 1px solid var(--borde);
  border-radius: var(--radio-pastilla);
  background: var(--superficie);
  color: var(--ciruela);
  font: inherit;
  font-size: var(--texto-s);
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--rapido), border-color var(--rapido);
}
.spas-zona:hover { border-color: var(--rubor); background: var(--rubor-claro); }
.spas-zona[aria-pressed="true"] { background: var(--ciruela); border-color: var(--ciruela); color: #fff; }
.spas-zona:focus-visible { outline: 3px solid var(--frambuesa); outline-offset: 2px; }
.spas-filtros input[type="search"] { width: 100%; }

.spas-cuantos { margin: 0 0 var(--espacio-3); font-size: var(--texto-s); min-height: 1.4em; }

/* ---------- Tarjetas ---------- */
.spas-lista { list-style: none; margin: 0 0 var(--espacio-8); padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-4); }
.spas-lista[aria-busy="true"] { opacity: 0.6; transition: opacity var(--rapido); }

.spa {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-suave);
}
/* En el celular la imagen es más bajita (16:9) para que se vea más de una tarjeta al bajar */
.spa__imagen { display: block; aspect-ratio: 16 / 9; background: var(--rubor-claro); }
.spa__foto { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Sin foto: la muestra de esmalte (la forma de uña de WowCita) sobre un fondo suave */
.spa__sin-foto { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.spa__sin-foto span { width: 56px; height: 72px; border-radius: var(--forma-una); background: var(--esmalte-1); box-shadow: inset -6px -8px 0 rgb(0 0 0 / 0.08); }
.spa__sin-foto--2 span { background: var(--esmalte-2); }
.spa__sin-foto--3 span { background: var(--esmalte-3); }
.spa__sin-foto--4 span { background: var(--esmalte-4); }
.spa__sin-foto--5 span { background: var(--esmalte-5); }

.spa__cuerpo { display: flex; flex-direction: column; gap: var(--espacio-2); padding: var(--espacio-4) var(--espacio-4) var(--espacio-5); flex: 1 1 auto; }
.spa__nombre { margin: 0; font-size: var(--texto-l); line-height: 1.2; }
.spa__nombre a { color: var(--ciruela); text-decoration: none; }
.spa__nombre a:hover { color: var(--frambuesa); text-decoration: underline; }
.spa__lugar { margin: 0; font-size: var(--texto-s); font-weight: 600; color: var(--lila-humo); }
.spa__servicios { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--espacio-1); }
.spa__servicios li { padding: 2px var(--espacio-2); border-radius: var(--radio-pastilla); background: var(--rubor-claro); font-size: var(--texto-xs); font-weight: 600; }
.spa__servicios .spa__mas { background: transparent; color: var(--lila-humo); }
.spa__beneficios { margin: 0; font-size: var(--texto-xs); color: var(--lila-humo); }
.spa__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-3); margin-top: auto; padding-top: var(--espacio-2); }
.spa__desde { margin: 0; font-size: var(--texto-s); color: var(--lila-humo); }
.spa__desde strong { display: block; font-family: var(--letra-titulos); font-size: var(--texto-l); color: var(--ciruela); font-variant-numeric: tabular-nums; }

.spas-vacio { grid-column: 1 / -1; text-align: center; }
.spas-vacio p { margin: 0 0 var(--espacio-3); }

.spas-pie { padding-bottom: var(--espacio-8); font-size: var(--texto-s); text-align: center; }
.spas-pie p { margin: var(--espacio-1) 0; }

@media (min-width: 720px) {
  .spas-cabecera { padding-top: var(--espacio-10); }
  .spas-cabecera h1 { font-size: var(--texto-hero); }
  .spas-filtros { flex-direction: row; align-items: center; justify-content: space-between; }
  .spas-filtros input[type="search"] { max-width: 340px; }
  .spas-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spa__imagen { aspect-ratio: 4 / 3; }
}

@media (min-width: 1024px) {
  .spas-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}