<!-- =========================================================================
     COMPONENTE MAESTRO: INMUEBLES & ESTADOS - GLASSMORPHISM ULTRA-CUSTOMIZABLE
     Desarrollado para Elementor / WordPress (HTML Widget)
     version: 1.2
     ========================================================================= -->
<!-- =========================================================================
     1. ESTILOS GLOBALES Y COMPONENTE STICKY
     📌 PASO 1: Bloque HTML #1 (Ubicación: Arriba de la Página / Header)
     🎨 --inm-sticky-top-mobile: 42px; ajusta Altura movil lo ajuste a: 52px
        --inm-sticky-top-desktop: 58px; ajusta Altura escritorio lo ajuste a: 60px  
        --inm-z-index: 99999; ajustar sobre capa le baje a: 9999
        .inm-wrapper max-width: 1200px; o width: 100%; ajusta ancho total de la barra Solo Escritorio a: 80%
     ========================================================================= -->

  /* =========================================================================
     1. VARIABLES DE PERSONALIZACIÓN CSS (EDITA AQUÍ COLORES, TAMAÑOS Y BORDES)
     ========================================================================= */
  :root {
    /* --- COLORES Y TRANSPARENCIAS GLASSMORPHISM --- */
    --inm-bg-glass: rgba(255, 255, 255, 0.50);          /* Fondo base glassmorphism */
    --inm-bg-glass-hover: rgba(255, 255, 255, 0.85);    /* Fondo al pasar el mouse */
    --inm-bg-subcontainer: rgba(255, 255, 255, 0.12);   /* Fondo contenedor interno semi-transparente */
    --inm-border-glass: rgba(255, 255, 255, 0.45);     /* Color del borde traslúcido */
    --inm-blur-intensity: 14px;                         /* Intensidad del desenfoque (blur) */

    /* --- COLORES DE TEXTO E ÍCONOS --- */
    --inm-text-primary: #1f2937;                        /* Color de títulos principales */
    --inm-text-secondary: #0f172a;                      /* Color de textos secundarios/subcategorías / Estados (Oscuro y legible) */
    --inm-icon-color: #2563eb;                          /* Color de los íconos principal (Azul por defecto) */
    --inm-accent-color: #2563eb;                        /* Color de acento / HOVER */
    --inm-accent-light: rgba(37, 99, 235, 0.12);        /* Fondo claro en hover de subcategorías */

    --inm-icon-color-70: color-mix(in srgb, var(--inm-icon-color) 70%, transparent); /* Ícono al 70% semi-transparente */
    
    /* Variaciones semi-transparentes (Opacidad ajustada) */
    --inm-accent-hover-90: color-mix(in srgb, var(--inm-accent-color) 90%, transparent); /* 90% opaco */
    --inm-accent-hover-85: color-mix(in srgb, var(--inm-accent-color) 85%, transparent); /* 85% opaco (Hover normal) */
    --inm-accent-hover-50: color-mix(in srgb, var(--inm-accent-color) 50%, transparent); /* 50% opaco */
    --inm-accent-hover-20: color-mix(in srgb, var(--inm-accent-color) 20%, transparent); /* 20% opaco (muy suave) */
    --inm-accent-hover-10: color-mix(in srgb, var(--inm-accent-color) 10%, transparent); /* 10% opaco (ideal para backgrounds suaves) */

    --inm-accent-soft-bg: color-mix(in srgb, var(--inm-accent-color) 12%, transparent); /* 12% opaco (Fondo tenue) */

    /* Para el color #2563eb: Usando Hexadecimal con canal Alfa (Notación rápida)
    90% opacidad: #2563ebE6  75% opacidad: #2563ebBF 50% opacidad: #2563eb80 
    25% opacidad: #2563eb40 10% opacidad: #2563eb1A   */

    /* --- TAMAÑOS Y FUENTES --- */
    --inm-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --inm-title-size: 1.05rem;                          /* Tamaño fuente títulos padre */
    --inm-subtitle-size: 0.90rem;                       /* Tamaño fuente subcategorías */
    --inm-icon-size: 22px;                              /* Tamaño de los íconos de categorías */
    --inm-radius-main: 20px;                            /* Curvatura de esquinas contenedores principales */
    --inm-radius-btn: 12px;                             /* Curvatura de esquinas botones/links */

    /* --- COORDENADAS Y POSICIONAMIENTO MÓVIL / ESCRITORIO --- */
    --inm-sticky-top-desktop: 60px;                     /* Altura Y cuando es FIJO en Escritorio: 15px */
    --inm-sticky-top-mobile: 52px;                      /* Altura Y cuando es FIJO en Móvil: 10px */
    --inm-z-index: 9999;                               /* Capa de superposición flotante */

    /* --- SOMBRAS Y TRANSICIONES --- */
    --inm-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
    --inm-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* =========================================================================
     2. ESTILOS DE LA BARRA MODERNA DE NAVEGACIÓN (HEADER GLASSMORPHISM)
     ========================================================================= */
  .inm-wrapper {
    font-family: var(--inm-font-family);
    width: 80%;        /* ← CAMBIAR ESTA LÍNEA para ancho escritorio */
    max-width: 1200px;  /* ← Y/O ESTA LÍNEA */
    margin: 15px auto 0 auto; /* Separación limpia en reposo antes del scroll */
    padding: 10px;
    box-sizing: border-box;
  }

  @media (max-width: 768px) {
    .inm-wrapper {
      margin-top: 10px;
      padding: 6px;
    }
  }

  /* Clase aplicada cuando se activa el MODO FIJO (Sticky / Smart Scroll) */
  body .inm-wrapper.is-sticky-mode {
    position: fixed;
    top: var(--inm-sticky-top-desktop); /* Usa los 55px en scroll para no tapar el menú */
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--inm-z-index);
    transition: transform 0.4s ease, opacity 0.4s ease;
  }

  @media (max-width: 768px) {
    body .inm-wrapper.is-sticky-mode {
      top: var(--inm-sticky-top-mobile); /* Usa los 40px en móvil */
      width: 98%;
    }
  }

  /* Ocultar barra al hacer scroll hacia abajo (Smart Scroll) */
  .inm-wrapper.is-sticky-mode.nav-hidden {
    transform: translate(-50%, -120%);
    opacity: 0;
    pointer-events: none;
  }

  .inm-navbar {
    background: var(--inm-bg-glass);
    backdrop-filter: blur(var(--inm-blur-intensity));
    -webkit-backdrop-filter: blur(var(--inm-blur-intensity));
    border: 1px solid var(--inm-border-glass);
    border-radius: var(--inm-radius-main);
    box-shadow: var(--inm-shadow);
    padding: 8px 12px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
  }

  /* ESTADO NORMAL / REPOSO DE BOTONES PRINCIPALES */
  .inm-nav-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid var(--inm-border-glass);
    border-radius: var(--inm-radius-btn);
    padding: 12px 16px;
    min-height: 48px; /* UX Dedos Gordos Target */
    color: var(--inm-text-primary);
    font-size: var(--inm-title-size);
    font-weight: 700;
    cursor: pointer;
    transition: var(--inm-transition);
    text-decoration: none;
    box-sizing: border-box;
  }

  /* HOVER EN BOTÓN (SOLO MIENTRAS EL CURSOR ESTÁ ENCIMA) */
  .inm-nav-btn:hover {
    background: var(--inm-accent-hover-20);
    border-color: var(--inm-accent-hover-50);
  }

  /* ESTADO ACTIVO (SOLO CUANDO EL PANEL ESTÁ ABIERTO) */
  .inm-nav-btn.is-active {
    background: var(--inm-accent-hover-50) !important;
    color: #ffffff !important;
    border-color: var(--inm-accent-hover-85) !important;
    backdrop-filter: blur(var(--inm-blur-intensity));
  }

  /* ESTADO DE LOS ÍCONOS EN REPOSO */
  .inm-nav-icon {
    width: var(--inm-icon-size);
    height: var(--inm-icon-size);
    fill: var(--inm-icon-color);
    opacity: 0.85; /* 75% opaco en estado normal */
    transition: var(--inm-transition);
    flex-shrink: 0;
  }

  /* ÍCONO CUANDO EL BOTÓN ESTÁ ACTIVO */
  .inm-nav-btn.is-active .inm-nav-icon {
    fill: #ffffff !important;
    opacity: 1 !important;
  }

  /* =========================================================================
     3. PANEL DE CATEGORÍAS TIPO DE INMUEBLE Y ESTADOS (DESPLEGABLE GENERAL)
     ========================================================================= */
  .inm-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
    margin-top: 8px;
  }

  .inm-wrapper.is-insitu-static .inm-panel {
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    margin-top: 0;
  }

  /* PUNTO 4: HABILITAR SCROLL INTERNO SI NO CABE EN PANTALLA MÓVIL */
  .inm-wrapper.panel-open .inm-panel {
    max-height: 75vh; /* Se adapta a un 75% del alto de la pantalla del móvil */
    overflow-y: auto; /* Permite scroll si las categorías sobrepasan el espacio */
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
    padding-right: 4px; /* Margen para la barra de scroll */
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

/* Personalización estilizada de la barra de scroll interna */
  .inm-panel::-webkit-scrollbar {
    width: 5px;
  }
  .inm-panel::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
  }
  .inm-panel::-webkit-scrollbar-thumb {
    background: rgba(37, 99, 235, 0.4);
    border-radius: 10px;
  }

  /* Grid Principal para tarjetas padre de Tipos de Inmuebles */
  .inm-grid-parents {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px; /* PUNTO 2: Reducción de espacio entre tarjetas */
    list-style: none;
    padding: 0;
    margin: 0;
  }

  /* PUNTO 2: Tarjeta Glassmorphism y Fondo Semi-transparente para Categorías */
  .inm-card-parent {
    background: var(--inm-bg-glass); /* Fondo semi-transparente similar a Estados */
    backdrop-filter: blur(var(--inm-blur-intensity));
    -webkit-backdrop-filter: blur(var(--inm-blur-intensity));
    border: 1px solid var(--inm-border-glass);
    border-radius: var(--inm-radius-main);
    box-shadow: var(--inm-shadow);
    overflow: hidden;
    transition: var(--inm-transition);
  }

  .inm-card-parent:hover {
    background: var(--inm-bg-glass-hover);
  }

  /* PUNTO 2: Reducción de padding vertical para compactar en Móvil */
  .inm-parent-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px; /* Reducido de 12px a 6px */
    min-height: 42px;  /* Compactado para adaptarse mejor a móviles */
  }

  .inm-parent-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--inm-text-primary);
    font-weight: 700;
    font-size: var(--inm-title-size);
    text-decoration: none;
    flex: 1;
    min-height: 38px; /* Reducido antes 44px */
  }

  .inm-parent-link:hover {
    color: var(--inm-accent-color);
  }

  /* Botón desplegable de Subcategorías Hijas (Touch Target: 44px x 44px) */
  .inm-toggle-sub-btn {
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid var(--inm-border-glass);
    border-radius: 50%;
    width: 36px; /* Ajustado para ahorro de espacio antes 44px */
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--inm-text-primary);
    transition: var(--inm-transition);
    padding: 0;
    flex-shrink: 0;
  }

  .inm-toggle-sub-btn:hover {
    background: var(--inm-accent-hover-50);
    color: #ffffff;
  }

  .inm-chevron {
    width: 18px;
    height: 18px;
    fill: currentColor;
    transition: transform 0.3s ease;
  }

  .inm-card-parent.sub-open .inm-chevron {
    transform: rotate(180deg);
  }

  /* Contenedor de Subcategorías Hijas (Ocultas por defecto) */
  .inm-sub-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0, 1, 0, 1);
    background: var(--inm-bg-subcontainer);
  }

  .inm-card-parent.sub-open .inm-sub-container {
    max-height: 500px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .inm-sub-list {
    list-style: none;
    padding: 4px 8px 8px 8px; /* Compactado */
    margin: 0;
  }

  .inm-sub-link {
    display: flex;
    align-items: center;
    padding: 6px 10px; /* Reducido para entrar fácilmente en móvil */
    min-height: 36px;  /* Touch target */
    color: var(--inm-text-secondary);
    font-size: var(--inm-subtitle-size);
    font-weight: 700; /* PUNTO 3: Grosor de texto más marcado */
    text-decoration: none;
    border-radius: var(--inm-radius-btn);
    transition: var(--inm-transition);
    margin-top: 2px;
  }

  .inm-sub-link:hover {
    background: var(--inm-accent-light);
    color: var(--inm-accent-color);
    padding-left: 14px;
  }

  /* =========================================================================
     4. GRID ESPECIAL PARA ESTADOS DE MÉXICO
     ========================================================================= */
  .inm-states-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 4px 8px; /* PUNTO 3: Espacios reducidos verticalmente */
    list-style: none;
    padding: 10px;
    margin: 0;
  }

  .inm-states-grid li {
    margin: 0;
    padding: 0;
  }

  .inm-states-grid .inm-sub-link {
    padding: 5px 8px; /* Compactado verticalmente */
    min-height: 32px;
    font-weight: 700; /* PUNTO 3: Grosor aumentado para lectura clara */
    color: var(--inm-text-secondary);
  }

  /* =========================================================================
     5. MEDIA QUERIES (COMPACTACIÓN MÓVIL Y TABLET)
     ========================================================================= */
  @media (max-width: 600px) {
    .inm-wrapper.is-sticky-mode {
      top: var(--inm-sticky-top-mobile);
      width: 98%;
    }
    .inm-nav-btn { font-size: 0.88rem; padding: 8px 6px; min-height: 44px; }
    .inm-grid-parents { grid-template-columns: 1fr; gap: 6px; }
    .inm-parent-header { padding: 4px 10px; min-height: 38px; }
    .inm-parent-link { font-size: 0.95rem; }
    .inm-states-grid { grid-template-columns: repeat(2, 1fr); gap: 2px 6px; padding: 8px; }
    .inm-states-grid .inm-sub-link { font-size: 0.85rem; padding: 4px 6px; min-height: 30px; font-weight: 700; }
  }

/* ==========================================================================
   FIX DE LEGIBILIDAD GLASSMORPHISM Y REDONDEO DE 15PX UNIFICADO
   ========================================================================== */

/* 1. Fondo contenedor del panel desplegado (con overflow: hidden para recortar esquinas) */
body .inm-wrapper .inm-panel {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.60);
  border-radius: 15px;
  overflow: hidden;
  padding: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

/* 2. Tarjetas individuales y cajas dentro del menú (Regla general 15px) */
body .inm-wrapper .inm-card-parent {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.70);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.25s ease;
}

/* Estado Hover en las tarjetas */
body .inm-wrapper .inm-card-parent:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(4, 107, 210, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* 3. Asegurar color oscuro y contraste en los textos para lectura perfecta */
body .inm-wrapper .inm-parent-link {
  color: #0F172A;
  font-weight: 700;
  text-decoration: none;
}

body .inm-wrapper .inm-sub-link {
  color: #1E293B;
  font-weight: 600;
  text-decoration: none;
}