/* Listados: home (index.php) y paginas de ubicacion (categoria.php).
   Colores: las variables cortas (--txt, --terra, --verde...) las define tema.css (seccion 3) a partir de sus fichas */
.hm{color:var(--txt);font-family:Roboto,"Helvetica Neue",Arial,sans-serif;padding:24px 0 50px}
.hm *{box-sizing:border-box}
.hm-cont{max-width:1140px;margin:0 auto;padding:0 16px}
.hm-intro{text-align:center;margin-bottom:22px}
.hm-intro h1{font-family:Lustria,Georgia,serif;font-size:32px;line-height:1.15;font-weight:400;margin:0 0 8px;color:var(--txt)}
.hm-intro h2{font-family:Lustria,Georgia,serif;font-size:18px;line-height:1.35;font-weight:400;color:var(--txt2);margin:0 0 10px}
.hm-intro p{font-size:15px;color:var(--txt2);margin:0}
.hm-intro a{color:var(--terra);text-decoration:underline;text-underline-offset:2px}
.hm-barrios{display:flex;gap:8px;overflow-x:auto;padding:4px 0 12px;scrollbar-width:thin}
.hm-barrios a{flex-shrink:0;display:inline-flex;align-items:center;min-height:40px;border:1px solid var(--borde);border-radius:20px;padding:0 14px;font-size:14px;color:var(--txt);text-decoration:none;background:#fff;white-space:nowrap}
.hm-barrios a b{color:var(--terra);font-weight:500;margin-left:5px}
.hm-barrios a:hover,.hm-barrios a:focus-visible{border-color:var(--terra)}
.hm-migas{font-size:13px;color:var(--txt2);margin:0 0 14px}
.hm-migas a{color:var(--txt2);text-decoration:underline}
.hm-barrios-tit{flex-shrink:0;align-self:center;font-size:13px;color:var(--txt2);margin-right:2px}
.hm-filtros{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 6px}
/* ocultos hasta que listas.js los activa, pero ocupando su lugar: si no, al aparecer empujaban las fotos (CLS 0,04 en
   los listados; tanda 6, 28/09). Sin JavaScript no se muestran (noscript en pie.php). El !important es para ganarle a
   [hidden]{display:none!important} de bootstrap.min.css (tema viejo): sin él la regla no hacía nada */
.hm-filtros[hidden]{display:flex!important;visibility:hidden}
.hm-filtros button{display:inline-flex;align-items:center;min-height:40px;border:1.5px solid var(--borde);border-radius:20px;padding:0 14px;font-size:14px;color:var(--txt);background:#fff;cursor:pointer;font-family:inherit}
.hm-filtros button b{color:var(--terra);font-weight:500;margin-left:5px}
.hm-filtros button[aria-pressed="true"]{border-color:var(--terra);background:var(--terra);color:#fff}
.hm-filtros button[aria-pressed="true"] b{color:#fff}
.hm-filtros button:focus-visible,.hm-barrios a:focus-visible{outline:2px solid var(--txt);outline-offset:2px}
.hm-sin-resultados{margin:18px 0 0;padding:14px;border-radius:10px;background:var(--suave);color:var(--txt2);text-align:center}
.hm-oculta{display:none!important}
.hm .paginacion a{display:inline-block;padding:12px 22px;border:1px solid var(--borde);border-radius:10px;color:var(--terra);font-weight:500;text-decoration:none;background:#fff}
.hm .page-load-status p{color:var(--txt2);font-size:14px}
.hm-sec{margin-top:34px}
.hm-sec-zona{border-top:1px solid var(--borde);padding-top:26px}
.hm-cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.hm-cab h2{font-family:Lustria,Georgia,serif;font-size:24px;line-height:1.2;font-weight:400;margin:0;color:var(--txt)}
.hm-cab p{margin:3px 0 0;color:var(--txt2);font-size:14px}
.hm-cab a{color:var(--terra);font-weight:500;white-space:nowrap;font-size:15px}
.hm-grilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hm-card{display:block;text-decoration:none;color:var(--txt)}
.hm-card:hover{text-decoration:none;color:var(--txt)}
.hm-foto{position:relative;display:block;border-radius:10px;overflow:hidden;background:var(--suave)}
.hm-foto picture{display:block}
.hm-foto img{width:100%;height:auto;aspect-ratio:384/538;object-fit:cover;display:block;transition:transform .3s}
.hm-card:hover img{transform:scale(1.03)}
.hm-marca{position:absolute;left:8px;top:8px;background:var(--terra);color:#fff;font-size:12px;font-weight:500;padding:3px 9px;border-radius:12px}
.hm-nombre{display:block;font-weight:500;font-size:15px;margin-top:6px}
.hm-zona{display:block;color:var(--txt2);font-size:13px}
.hm-resenas{display:block;color:var(--verde);font-size:12px}
.hm-mas{display:block;text-align:center;margin-top:14px;padding:12px;border:1px solid var(--borde);border-radius:10px;color:var(--terra);font-weight:500;text-decoration:none}
@media (max-width:767px){.hm-cab a{display:none}}
/* celular: las fotos primero. Arriba quedan el H1, los barrios y los filtros; el subtitulo, el
   parrafo y los tipos de masaje se ven despues del primer bloque de fotos. Es SOLO orden visual:
   el HTML (lo que lee Google) sigue en el mismo orden. Decidido el 27/09, ver decisiones.md */
@media (max-width:767px){
  .hm-cont{display:flex;flex-direction:column}
  .hm-cont>*{order:5;min-width:0}
  .hm-intro{display:contents}
  .hm-migas,.hm-intro>h1{order:1}
  .hm-intro>h1{font-size:26px;margin:0 0 12px}
  .hm-barrios,.hm-filtros,.hm-sin-resultados{order:2}
  .hm-cont>section:first-of-type{order:3;margin-top:18px}
  .hm-intro>h2,.hm-intro>p,.hm-cont>.hm-tipos{order:4}
  .hm-intro>h2{margin:34px 0 8px}
  .hm-intro>p{margin:0 0 14px}
  /* los filtros en una sola fila deslizable, como los barrios: en dos renglones empujaban las fotos */
  .hm-filtros{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .hm-filtros::-webkit-scrollbar{display:none}
  .hm-filtros>*{flex-shrink:0}
  .hm-filtros button{white-space:nowrap}
}
@media (min-width:768px){
  .hm-intro h1{font-size:40px}
  .hm-grilla{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
  .hm-mas{display:none}
}

/* bloque "en numeros": datos reales del listado */
.hm-datos{margin-top:46px}
.hm-datos-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.hm-datos-lista div{background:#fff;border:1px solid var(--borde);border-radius:14px;padding:12px 14px}
.hm-datos-lista dt{font-family:Lustria,Georgia,serif;font-size:20px;font-weight:400;line-height:1.2;color:var(--txt)}
.hm-datos-lista dd{margin:2px 0 0;font-size:13px;line-height:1.35;color:var(--txt2)}
.hm-datos-barrios{margin:14px 0 0;font-size:14px;color:var(--txt2)}
.hm-datos-barrios a{color:var(--terra)}
@media (min-width:768px){.hm-datos-lista{grid-template-columns:repeat(4,minmax(0,1fr))}}