/**
 * Home — pantalla subcategorías «Explora otras categorías» (hero + grid HTML).
 */

/* Ocultar pickers hermanos aunque CSS de flex anule [hidden] */
#catPickerAdultos[hidden],
#catPickerClassic[hidden] {
  display: none !important;
}

/* Modal: fondo del sector (no rosa adultos) */
.home-modal--sector-subcat-premium.home-modal--categorias.home-modal--sector {
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  background: var(--sector-theme-bg, #eef2f6) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.home-modal--sector-subcat-premium .home-modal__panel--categorias {
  width: 100%;
  max-width: 100%;
  max-height: 100dvh;
  height: 100%;
  border-radius: 0;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--sector-theme-bg, #eef2f6) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.home-modal--sector-subcat-premium .home-modal__close {
  top: max(10px, env(safe-area-inset-top, 0px));
  right: 12px;
  z-index: 12;
  width: 36px;
  height: 36px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--sector-close-bg, #607d8b) 82%, #fff) 0%,
    var(--sector-close-bg, #607d8b) 52%,
    color-mix(in srgb, var(--sector-close-bg, #455a64) 84%, #000) 100%
  );
  box-shadow: 0 6px 20px color-mix(in srgb, var(--sector-close-bg, #455a64) 35%, transparent);
}

.home-sector-subcat-screen__promo {
  padding: max(6px, env(safe-area-inset-top, 0px)) 44px 0 12px;
}

.home-modal--sector-subcat-premium[data-sector="bienestar"] { --sector-close-bg: #7cb342; }
.home-modal--sector-subcat-premium[data-sector="salud"] { --sector-close-bg: #1976d2; }
.home-modal--sector-subcat-premium[data-sector="profesionales"] { --sector-close-bg: #37474f; }
.home-modal--sector-subcat-premium[data-sector="eventos"] { --sector-close-bg: #f4511e; }
.home-modal--sector-subcat-premium[data-sector="restaurantes"] { --sector-close-bg: #f4511e; }
.home-modal--sector-subcat-premium[data-sector="mascotas"] { --sector-close-bg: #43a047; }
.home-modal--sector-subcat-premium[data-sector="transporte"] { --sector-close-bg: #0288d1; }
.home-modal--sector-subcat-premium[data-sector="tecnologia"] { --sector-close-bg: #5c6bc0; }
.home-modal--sector-subcat-premium[data-sector="comercio"] { --sector-close-bg: #00897b; }
.home-modal--sector-subcat-premium[data-sector="hogar"] { --sector-close-bg: #f4511e; }
.home-modal--sector-subcat-premium[data-sector="automotriz"] { --sector-close-bg: #1976d2; }
.home-modal--sector-subcat-premium[data-sector="bienes-raices"] { --sector-close-bg: #6d4c41; }
.home-modal--sector-subcat-premium[data-sector="educacion"] { --sector-close-bg: #5c6bc0; }
.home-modal--sector-subcat-premium[data-sector="industria"] { --sector-close-bg: #6d4c41; }

.home-sector-subcat-screen {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  background: var(--sector-hero-bg, var(--sector-theme-bg, #eef2f6));
}

.home-sector-subcat-screen[hidden] {
  display: none !important;
}

/* ── Hero ── */
.home-sector-subcat-hero {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  background: var(--sector-hero-bg, #eef2f6);
}

.home-sector-subcat-hero__visual {
  width: 100%;
  aspect-ratio: var(--hero-aspect, 682 / 450);
  max-height: min(42dvh, 360px);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  line-height: 0;
  background: var(--sector-hero-bg, #eef2f6);
}

.home-sector-subcat-hero__visual img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  flex-shrink: 0;
  object-fit: var(--hero-fit, contain);
  object-position: var(--hero-pos, center top);
}

.home-sector-subcat-hero__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28%;
  background: linear-gradient(to bottom, transparent, var(--sector-body-fade, var(--sector-theme-bg, #eef2f6)));
  pointer-events: none;
  z-index: 1;
}

/* ── Cuerpo scroll ── */
.home-sector-subcat-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 14px max(18px, env(safe-area-inset-bottom, 0px));
  background: var(--sector-body-bg, var(--sector-theme-bg, #eef2f6));
}

.home-sector-subcat-body__hint {
  flex-shrink: 0;
  margin: 10px auto 12px;
  padding: 0 8px;
  max-width: 28rem;
  text-align: center;
  font-family: Poppins, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: rgba(30, 30, 30, 0.62);
}

/* ── Grid tarjetas verticales ── */
.home-sector-subcat-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0 2px 10px;
  width: 100%;
  max-width: 520px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  align-content: start;
}

@media (min-width: 520px) {
  .home-sector-subcat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 640px;
  }
}

.home-sector-subcat-card {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 14px;
  background: var(--tile-bg, #f5f5f5);
  box-shadow:
    0 4px 14px rgba(15, 23, 42, 0.08),
    0 1px 3px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  text-align: center;
  font-family: Poppins, system-ui, sans-serif;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.home-sector-subcat-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.home-sector-subcat-card.is-selected {
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow:
    0 0 0 2px rgba(233, 30, 99, 0.22),
    0 6px 18px rgba(15, 23, 42, 0.14);
}

.home-sector-subcat-card__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 8px;
  background: rgba(255, 255, 255, 0.38);
  line-height: 0;
}

.home-sector-subcat-card__img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: 8px;
}

.home-sector-subcat-card__img--empty {
  width: 56%;
  height: 56%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}

.home-sector-subcat-card__visual .home-sector-subcat-tile__media {
  width: 72%;
  height: 72%;
  flex: 0 0 auto;
  border-radius: 14px;
}

.home-sector-subcat-card__visual .home-sector-subcat-tile__icon-svg {
  width: 100%;
  height: 100%;
  max-width: 52px;
  max-height: 52px;
}

.home-sector-subcat-card__label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 10px 10px;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: #2a2030;
  text-align: center;
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;
}

.home-modal--sector-subcat-premium.home-modal--sector-fullscreen {
  background: var(--sector-theme-bg, #eef2f6) !important;
}