/* Depilación láser · zonas más pedidas (home v5) */
.zh { background: var(--blanco); }
.zh__cab { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 36px; }
.zh__cab .titulo { margin-top: 14px; }
.zh__tabs { display: inline-flex; gap: 8px; margin-top: 26px; }
.zh__tab { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px 0 18px; border-radius: var(--r-pildora); background: var(--crema); font-size: 15px; font-weight: 500; color: var(--texto-60); transition: background-color .25s var(--curva-hover), color .25s var(--curva-hover); }
.zh__tab .lucide { width: 17px; height: 17px; }
.zh__tab:hover { color: var(--texto); }
.zh__tab.activo { background: var(--texto); color: var(--blanco); }
.zh__tab.activo .lucide { color: #F0C38A; }
.zh__abajo { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 36px; }
.zh__rejilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.zh__card { position: relative; display: block; aspect-ratio: .8; border-radius: 16px; overflow: hidden; background: #FBF5EA; }
/* Animación al cambiar de pestaña (la entrada inicial la maneja [data-anim] en home-ui.css) */
.zh__rejilla--cambio .zh__card { animation: sube .55s var(--curva) both; }
.zh__rejilla--cambio .zh__card:nth-child(2) { animation-delay: .05s; } .zh__rejilla--cambio .zh__card:nth-child(3) { animation-delay: .1s; } .zh__rejilla--cambio .zh__card:nth-child(4) { animation-delay: .15s; }
.zh__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--curva); }
.zh__card:hover img, .zh__card:focus-visible img { transform: scale(1.05); }
.zh__info { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 14px 14px 14px 18px; border-radius: 12px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.zh__nombre { font-family: var(--serif); font-size: 22px; letter-spacing: -0.03em; line-height: 1.15; }
.zh__precio { grid-row: 2; font-size: 13px; color: var(--texto-60); }
.zh__precio b { font-size: 16px; font-weight: 500; color: var(--texto); }
.zh__ir { grid-row: span 2; grid-column: 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--crema); transition: background-color .25s var(--curva-hover), color .25s var(--curva-hover); }
.zh__ir .lucide { width: 17px; height: 17px; }
.zh__card:hover .zh__ir, .zh__card:focus-visible .zh__ir { background: var(--acento); color: var(--blanco); }
.zh__pie { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--texto-45); }
.zh__pie .lucide { width: 16px; height: 16px; color: var(--acento-hondo); }

@media (prefers-reduced-motion: reduce) { .zh__rejilla--cambio .zh__card { animation: none; } }
@media (max-width: 1100px) { .zh__rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .zh__tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .zh__pie { justify-content: center; text-align: center; }
  .zh__tab { justify-content: center; padding: 0 12px; font-size: 14px; }
  .zh__rejilla { gap: 10px; }
  .zh__card { aspect-ratio: .72; }
  .zh__info { left: 6px; right: 6px; bottom: 6px; padding: 10px; grid-template-columns: 1fr; }
  .zh__nombre { font-size: 17px; }
  .zh__precio { font-size: 11.5px; }
  .zh__precio b { font-size: 14px; }
  .zh__ir { display: none; }
}

/* Caja de nombre/precio por debajo de la foto: en escritorio sobresale del borde inferior; en móvil va como segunda fila */
.zh__card { overflow: visible; background: none; aspect-ratio: .74; }
.zh__foto { position: absolute; inset: 0 0 44px; overflow: hidden; border-radius: 16px; background: #FBF5EA; }
.zh__info { bottom: 0; box-shadow: 0 10px 30px rgba(31, 26, 21, .08); }
@media (max-width: 900px) {
  .zh__card { display: flex; flex-direction: column; aspect-ratio: auto; }
  .zh__foto { position: relative; inset: auto; aspect-ratio: .85; border-radius: 14px; }
  .zh__info { position: static; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--crema); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Móvil: misma idea que en escritorio, la caja monta sobre el borde inferior de su foto (queda claro a qué foto pertenece) */
@media (max-width: 900px) {
  .zh__rejilla { row-gap: 22px; }
  .zh__info { position: relative; z-index: 1; margin: -26px 6px 0; padding: 10px 12px; background: var(--blanco); box-shadow: 0 8px 22px rgba(31, 26, 21, .10); }
  .zh__precio { line-height: 1.35; }
}