/* El menu movil
 *
 * Estaba EN LINEA dentro de templates/mobile-menu.php, o sea que viajaba entero
 * en el HTML de todas las paginas y en todas las visitas. Aqui el navegador
 * lo guarda una vez: la regla de cache de .htaccess da un ano a los .css y .js.
 *
 * Se movio tal cual, sin tocar una linea. Si hay que cambiarlo, se cambia aqui.
 */
#slider-container {
    position: relative;
    height: 45px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;

    text-align: center;

    /* Color de fondo predeterminado del slider (el mismo que el primer slide o un neutro) */
    background-color: #7793b7;
  }

  .slider-item {
    position: absolute;
    width: 100%;
    height: 45px;
    opacity: 0;
    animation: slideFade 8s infinite;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0.4rem;
    color: white;
    /* Asegura que el texto se vea sobre el fondo */
  }

  #slide-1 {
    background-color: #7793b7;
    animation-delay: 0s;
  }

  #slide-2 {
    background-color: #b386c2;
    animation-delay: 4s;
  }

  @keyframes slideFade {
    0% {
      opacity: 0;
    }

    5% {
      opacity: 1;
    }

    45% {
      opacity: 1;
    }

    50% {
      opacity: 0;
    }

    100% {
      opacity: 0;
    }
  }

  .slider-item p {
    margin: 0 !important;
    text-align: center !important;
  }

  .slider-item a {
    font-weight: lighter;
    text-decoration: none;
    color: inherit;
    margin-left: 5px;
  }




/* --- HEADER COMO GRID: [IZQ] [CENTRO] [DER] --- */
.header-bar{
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* lados flexibles, centro al tamaño del logo */
  align-items: center;
  column-gap: 10px;
  min-height: 48px; /* opcional */
  position: relative;
}

/* Zonas */
.nav-left{ 
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav-center{
  justify-self: center;
  display: inline-flex;
  align-items: center;
  /* quita el margin auto si lo tenías */
  margin: 0; 
}

.nav-right{
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0px;
}

/* Logo centrado limpio */
.nav-center img{
  display: block;
  height: 25px;
  width: auto;
}

/* Botones/iconos consistentes */
.navmenu-icon,
.iconheader,
.padding-1,
.padding-h-05{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 2;
}

/* Badges/bolitas posicionables si los necesitas superpuestos */
.navmenu-icon{ position: relative; }
.badge_menu_item,
.bulletNotice{
  position: absolute;
  top: -4px;
  right: -4px;
}

/* (opcional) área clicable del logo un poco más cómoda */
.nav-center{ padding: 6px 0; }


  /* Carga la fuente (si no la tienes ya) */
  @font-face {
    font-family: "MullerNextExpanded";
    src: url("https://www.8888home.com/MullerNextExpandedTrial-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  /* Variable de comodidad */
  :root {
    --font-muller: "MullerNextExpanded", -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  }

  /* SOLO dentro del contenedor con .muller-only  */
  .muller-only,
  .muller-only *:not([class*="icon"]):not(osgo-icon):not(code):not(pre) {
    font-family: var(--font-muller) !important;
  }

  .mobile-menu.open .mobile-menu-subsection.open,
  .mobile-menu.open .mobile-menu-subsection.open * {
    pointer-events: all;
    font-size: 16px;
  }
  .ui\:filters-m {
    
    background-color: #EAEAEA !important;
    
}


.padding-l-1 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}
.layerOverlay, .mobile-menu-backdrop {
    opacity: 0;
    position: fixed;
    top: 0;
    left: -100%;
    z-index: 25;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 100%;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: opacity 0.2s;
    background-color: #F2F2F2;
}
.mobile-menu.open .mobile-menu-subsection.open, .mobile-menu.open .mobile-menu-subsection.open * {
    pointer-events: all;
    font-size: 16px;
    background-color: #F2F2F2;
}
/* ===== Header icons: mismo tamaño y centrados ===== */
.header-bar .nav-right{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px !important;
}

/* Cada icono (a/span) ocupa el mismo cuadro clicable */
.header-bar .nav-right > a,
.header-bar .nav-right > span{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;          /* mata diferencias de padding */
  margin: 0 !important;
  line-height: 1 !important;
  position: relative;             /* para badges */
}

/* Evita que la imagen “descentre” por line-height */
.header-bar .nav-right img{
  display: block !important;
}

/* Badge consistente */
.header-bar .nav-right .badge_menu_item,
.header-bar .nav-right .bulletNotice{
  top: 6px !important;
  right: 6px !important;
}
.mobile-menu-container{
    /* width: 50%; */
    margin: 0 auto;
  }
  /* Desktop: el contenedor mobile no debe afectar */
@media (min-width: 1024px){
  #mobile-menu{
    display: none !important;
  }
}

/* Mobile: aquí sí aplica */
@media (max-width: 1023.98px){
  #mobile-menu{
    display: block;
  }
}
/* =========================================
   LO NUEVO (ARRIVALS) - LISTA LIMPIA PRO
   ========================================= */

   #newmenu__arrivals{
  background: #F2F2F2;
}

/* wrapper */
#newmenu__arrivals .desktop-menu-sections{
  display: block !important;
  width: 100%;
}

/* bloque de items */
#newmenu__arrivals .desktop-menu-sections-item{
  width: 100%;
  padding: 10px 16px 22px;
}

/* Header (sticky) */
#newmenu__arrivals .mobile-menu-subsection-close{
  background: #F2F2F2 !important;
  position: sticky;
  top: 0;
  z-index: 5;
}

/* Botón back (bonito + consistente) */
#newmenu__arrivals .mobile-menu-subsection-close .button_icon{
  width: 56px;              /* más ancho que alto */
  height: 40px;
  border-radius: 9999px;    /* óvalo tipo pill */

  background: #f2f2f2;
  border: 1px solid #000;
  box-shadow: none !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  line-height: 1;

  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, transform .15s ease;
}

#newmenu__arrivals .mobile-menu-subsection-close .button_icon osgo-icon{
  color: #000 !important;
}
@media (hover:hover){
  #newmenu__arrivals .mobile-menu-subsection-close .button_icon:hover{
    background:#dedede;
    transform: translateY(-1px);
  }
}
#newmenu__arrivals .mobile-menu-subsection-close .button_icon:active{
  transform: scale(.96);
}

/* --------
   FILA TIPO LISTA
   -------- */
#newmenu__arrivals a.arrivals-row{
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  width: 100% !important;
  min-height: 54px;
  padding: 17px 20px;

  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.10);

  color: #000 !important;
  text-decoration: none !important;

  -webkit-tap-highlight-color: transparent;
  transition: background-color .12s ease;
}

/* feedback touch */
#newmenu__arrivals a.arrivals-row:active{
  background: rgba(0,0,0,.04) !important;
}

/* Label centrado perfecto */
#newmenu__arrivals a.arrivals-row .arrivals-label{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 130px); /* deja espacio para la flecha */
  text-align: center;
  font-weight: 500;
  line-height: 1.2;
  pointer-events: none;
}

/* Flecha derecha */
#newmenu__arrivals a.arrivals-row .arrivals-chev{
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(0,0,0,.55);
  border-bottom: 2px solid rgba(0,0,0,.55);
  transform: rotate(-45deg);
  opacity: .9;
  margin-left: auto;
  flex: 0 0 auto;
}

/* CTA final = igual que los demás */
#newmenu__arrivals a.arrivals-row.is-primary{
  margin-top: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #000 !important;
  justify-content: space-between !important;
}

#newmenu__arrivals a.arrivals-row.is-primary .arrivals-label{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 72px) !important;
  text-align: center !important;
  font-weight: 500 !important;
}

#newmenu__arrivals a.arrivals-row.is-primary .arrivals-chev{
  display: block !important;
}
/* =====================================================
   MUEBLES (FURNITURE) - LISTA BONITA + FLECHITA
   (sin cambiar HTML)
   ===================================================== */

   #newmenu__furniture{
}

/* Botón back ovalado igual que arrivals */
#newmenu__furniture .mobile-menu-subsection-close .button_icon{
  width: 56px;
  height: 40px;
  border-radius: 9999px;
  background: #;
  border: 1px solid #000;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Títulos principales (Sala, Comedor, etc) */
#newmenu__furniture p[onclick="toggleMobileSubcategories(this)"]{
  position: relative;
  width: 100% !important;
  min-height: 56px;
  margin-top: 10px !important;
  padding: 14px 16px !important;

  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  -webkit-tap-highlight-color: transparent;
}

/* Texto centrado */
#newmenu__furniture p[onclick="toggleMobileSubcategories(this)"] span{
  font-weight: 600;
}

/* Flechita derecha en los títulos */
#newmenu__furniture p[onclick="toggleMobileSubcategories(this)"]::after{
  content:"";
  position:absolute;
  right: 18px;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(0,0,0,.45);
  border-bottom: 2px solid rgba(0,0,0,.45);
  transform: rotate(-45deg);
  opacity: .85;
}

/* Subcategorías: que no queden “raras” */
#newmenu__furniture .slide_items_render a.hover_link_menu{
  display:flex !important;
  align-items:center !important;
  justify-content: space-between !important;

  width: 100% !important;
  min-height: 52px;
  padding: 14px 16px !important;

  background: transparent !important;
  border-bottom: 1px solid rgba(0,0,0,.08);

  text-decoration: none !important;
  color: #000 !important;
}

/* Flechita en subcategorías también */
#newmenu__furniture .slide_items_render a.hover_link_menu::after{
  content:"";
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(0,0,0,.45);
  border-bottom: 2px solid rgba(0,0,0,.45);
  transform: rotate(-45deg);
  opacity: .7;
  margin-left: auto;
}

/* Active feedback */
#newmenu__furniture p[onclick="toggleMobileSubcategories(this)"]:active{
  transform: scale(.99);
}
#newmenu__furniture .slide_items_render a.hover_link_menu:active{
  background: rgba(0,0,0,.04) !important;
}
/* =========================================
   MUEBLES – AJUSTE DE FONDOS
   Quita blanco y usa #F2F2F2
   ========================================= */

/* Cada item del listado */
#newmenu__furniture a.menu-row,
#newmenu__furniture a.hover_link_menu,
#newmenu__furniture .desktop-menu-sections-item a{
  box-shadow: none !important;          /* quita elevación blanca */
  border: none !important;              /* sin borde */
}

/* Quita cualquier “tarjeta” blanca interna */
#newmenu__furniture a *{
  background-color: transparent !important;
}

/* Active touch (feedback suave) */
#newmenu__furniture a:active{
}
/* =========================================
   FIX FUERTE: MUEBLES sin tarjetas blancas
   Fondo panel + items #F2F2F2
   ========================================= */

/* Quita “tarjeta” blanca de los links (pill) */
#newmenu__furniture a.desktop-menu-link,
#newmenu__furniture a.hover_link_menu,
#newmenu__furniture .desktop-menu-sections-item a{
  border: none !important;
  box-shadow: none !important;
}

/* Si el blanco viene de spans internos */
#newmenu__furniture a.desktop-menu-link span,
#newmenu__furniture a.hover_link_menu span,
#newmenu__furniture .desktop-menu-sections-item a span{
  background: transparent !important;
}

/* Si hay bordes redondeados tipo “pill”, los dejamos pero sin blanco */
#newmenu__furniture a.desktop-menu-link,
#newmenu__furniture a.hover_link_menu{
  border-radius: 16px !important; /* puedes bajar/subir */
}

/* Feedback al tocar */
#newmenu__furniture a.desktop-menu-link:active,
#newmenu__furniture a.hover_link_menu:active{
}
/* Mata cualquier bloque blanco “tipo botón” dentro de muebles */
#newmenu__furniture .ui\:button,
#newmenu__furniture .backdrop-white,
#newmenu__furniture .button_icon{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* ================================
   MUEBLES: quitar tarjetas blancas
   y usar fondo #F2F2F2 en todo
   ================================ */

   #newmenu__furniture,
#newmenu__furniture *{
  background-color: transparent;
}

/* Fondo del panel */
#newmenu__furniture{
}

/* Cajas/containers que suelen pintar blanco */
#newmenu__furniture .mobile-menu-slide,
#newmenu__furniture .mobile-menu-slide-item,
#newmenu__furniture .mobile-menu-slide-item-box,
#newmenu__furniture .mobile-menu-container,
#newmenu__furniture .desktop-menu-sections-item,
#newmenu__furniture .slide_items_render{
  box-shadow: none !important;
  border: 0 !important;
}

/* Los links que se ven como “botones” */
#newmenu__furniture a.desktop-menu-link,
#newmenu__furniture a.hover_link_menu{
  box-shadow: none !important;
  border: 0 !important;
}

/* Por si hay spans internos que pintan blanco */
#newmenu__furniture a.desktop-menu-link span,
#newmenu__furniture a.hover_link_menu span{
  background-color: transparent !important;
}

/* Feedback al tap */
#newmenu__furniture a.desktop-menu-link:active,
#newmenu__furniture a.hover_link_menu:active{
}
/* Back button de MUEBLES: ovalado + bg #eaeaea */
#newmenu__furniture .mobile-menu-subsection-close .button_icon{
  width: 56px !important;     /* óvalo */
  height: 40px !important;
  border-radius: 9999px !important;
  border: 1px solid #000 !important;
  box-shadow: none !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Quita el fondo negro inline del span */
#newmenu__furniture .mobile-menu-subsection-close .button_icon[style]{
}
#newmenu__furniture .mobile-menu-subsection-close .button_icon osgo-icon{
  color: #000 !important;
}
/* Back button (Furniture): icono "<" en negro */
#newmenu__furniture .mobile-menu-subsection-close .button_icon osgo-icon{
  color: #000 !important;
  fill: #000 !important;
  stroke: #000 !important;
}
/* =========================================
   LO NUEVO (ARRIVALS) -> IGUAL QUE MUEBLES
   Pills blancas + flecha a la derecha
   ========================================= */

/* Fondo general del panel */
#newmenu__arrivals,
#newmenu__arrivals .mobile-menu-slide,
#newmenu__arrivals .desktop-menu-sections,
#newmenu__arrivals .desktop-menu-sections-item{
  background: #F2F2F2 !important;
}

/* Back button: icono ( < ) negro */
#newmenu__arrivals .mobile-menu-subsection-close .button_icon osgo-icon{
  color: #000 !important;
  stroke: #000 !important;
}

/* Cada opción como “pill blanca” */
#newmenu__arrivals a.arrivals-row{
  position: relative !important;

  width: 100% !important;
  min-height: 56px !important;

  margin-top: 10px !important;
  padding: 14px 16px !important;

  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 14px !important;
  box-shadow: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  text-decoration: none !important;
  color: #000 !important;

  -webkit-tap-highlight-color: transparent;
}

/* Texto centrado dentro de la pill */
#newmenu__arrivals a.arrivals-row .arrivals-label{
  position: static !important;      /* quita el absolute que tenías */
  left: auto !important;
  transform: none !important;
  width: auto !important;
  text-align: center !important;
  font-weight: 600 !important;
  pointer-events: none;
}

/* Flechita derecha (chevron) negra/gris */
#newmenu__arrivals a.arrivals-row .arrivals-chev{
  position: absolute !important;
  right: 18px !important;

  width: 10px !important;
  height: 10px !important;

  border-right: 2px solid rgba(0,0,0,.45) !important;
  border-bottom: 2px solid rgba(0,0,0,.45) !important;

  transform: rotate(-45deg) !important;
  opacity: .85 !important;
  margin: 0 !important;
}

/* Feedback al tap */
#newmenu__arrivals a.arrivals-row:active{
  background: #f2f2f2 !important;
  transform: scale(.99);
}

/* CTA final también como pill */
#newmenu__arrivals a.arrivals-row.is-primary{
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  background: #fff !important;
}
/* Pills un poco más angostas y centradas */
#newmenu__arrivals a.arrivals-row{
  width: calc(100% - 48px) !important; /* reduce ancho */
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Elimina cualquier fondo/box del texto interno */
#newmenu__arrivals a.arrivals-row *,
#newmenu__arrivals a.arrivals-row span{
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* Separación entre el último item y "Ver todas las novedades" */
#newmenu__arrivals a.arrivals-row:not(.is-primary){
  margin-bottom: 10px;
}

/* Un poquito más de aire para el CTA final */
#newmenu__arrivals a.arrivals-row.is-primary{
  margin-top: 16px !important;
}
/* =====================================================
   COLCHONES (NEW MENU MATTRESSES) - PÍLDORAS BLANCAS
   (sin cambiar HTML)
   ===================================================== */

   #newmenu__mattresses{
  background: #F2F2F2 !important;
}

/* Header: botón back ovalado + flecha negra */
#newmenu__mattresses .mobile-menu-subsection-close{
  background: #F2F2F2 !important;
  position: sticky;
  top: 0;
  z-index: 5;
}

#newmenu__mattresses .mobile-menu-subsection-close .button_icon{
  width: 56px !important;
  height: 40px !important;
  border-radius: 9999px !important;
  background: #eaeaea !important;
  border: 1px solid #000 !important;
  box-shadow: none !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* fuerza la flecha a negro (por si se ve gris) */
#newmenu__mattresses .mobile-menu-subsection-close .button_icon osgo-icon{
  color: #000 !important;
  stroke: #000 !important;
  fill: #000 !important;
}

/* Espaciado del contenido como “cards” */
#newmenu__mattresses .mobile-menu-slide{
  padding: 10px 16px 22px !important;
}

/* Pills principales (Tamaño, Firmeza, etc) */
#newmenu__mattresses p[onclick="toggleMobileSubcategories(this)"]{
  position: relative !important;

  /* pill más angosta (no 100%) */
  width: min(92%, 520px) !important;
  min-height: 56px !important;

  margin: 10px auto 0 !important;
  padding: 14px 16px !important;

  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 14px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* Quita el “fondo raro” del texto (lo que parecía imagen) */
#newmenu__mattresses p[onclick="toggleMobileSubcategories(this)"] span{
  background: transparent !important;
  font-weight: 600;
}

/* Flechita derecha en cada pill */
#newmenu__mattresses p[onclick="toggleMobileSubcategories(this)"]::after{
  content:"";
  position:absolute;
  right: 18px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(-45deg);
  opacity: .55;
}

/* “Ver todos los colchones” como pill igual */
#newmenu__mattresses a[noevents][data-index="5"]{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: min(92%, 520px) !important;
  min-height: 56px !important;

  margin: 10px auto 0 !important;
  padding: 20px 16px !important;

  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 14px !important;

  text-decoration: none !important;
  color: #000 !important;
}

/* mata el inline style del span dentro del link final */
#newmenu__mattresses a[noevents][data-index="5"] span{
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline !important;
}

/* flechita también para el “ver todos” */
#newmenu__mattresses a[noevents][data-index="5"]::after{
  content:"";
  position:absolute;
  right: 18px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(-45deg);
  opacity: .55;
}

/* Feedback al tap */
#newmenu__mattresses p[onclick="toggleMobileSubcategories(this)"]:active,
#newmenu__mattresses a[noevents][data-index="5"]:active{
  background: #f2f2f2 !important;
  transform: scale(.99);
}
/* =========================================
   COLCHONES – PILLS DELGADAS Y SIMÉTRICAS
   ========================================= */

/* Pills principales */
#newmenu__mattresses p[onclick],
#newmenu__mattresses a[data-index]{
  min-height: 52px !important;   /* mismo alto que el CTA */
  padding: 0px 14px !important; /* más delgado */
  border-radius: 14px !important;
}

/* Texto interno sin “inflar” la pill */
#newmenu__mattresses p[onclick] span,
#newmenu__mattresses a[data-index] span{
  padding: 0 !important;
  background: transparent !important;
}
/* =========================================
   COLCHONES – BOTÓN BACK SIN RECUADRO
   ========================================= */

/* Botón */
#newmenu__mattresses .mobile-menu-subsection-close .button_icon{
  background: #f2f2f2 !important;
  border: 1px solid #000 !important;
  box-shadow: none !important;
}

/* Icono y SVG interno */
#newmenu__mattresses .mobile-menu-subsection-close osgo-icon,
#newmenu__mattresses .mobile-menu-subsection-close svg{
  background: transparent !important;
}

/* Mata cualquier rect blanco del SVG */
#newmenu__mattresses .mobile-menu-subsection-close svg rect{
  fill: transparent !important;
  stroke: transparent !important;
}

/* Flecha negra */
#newmenu__mattresses .mobile-menu-subsection-close osgo-icon{
  color: #000 !important;
}
/* =========================================
   COLCHONES – MISMA TIPOGRAFÍA QUE
   LO NUEVO Y MUEBLES
   ========================================= */

   #newmenu__mattresses,
#newmenu__mattresses *:not(osgo-icon):not(svg):not(path){
  font-family: var(--font-muller) !important;
  font-weight: 500;
}
/* =====================================================
   OFERTAS (SALES) – MISMO LOOK QUE LO NUEVO/MUEBLES
   (pills blancas + flecha derecha + tipografía)
   ===================================================== */

/* Fondo + tipografía */
#newmenu__sales{
  background: #F2F2F2 !important;
}
#newmenu__sales,
#newmenu__sales *:not(osgo-icon):not(svg):not(path){
  font-family: var(--font-muller) !important;
}

/* El contenedor del listado */
#newmenu__sales .desktop-menu-sections-item{
  padding: 10px 16px 22px !important;
  background: transparent !important;
}

/* Cada opción (los <a> que ya tienes) como pill */
#newmenu__sales a.desktop-menu-link.hover_link_menu,
#newmenu__sales a.hover_link_menu{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-height: 56px !important;

  margin: 10px auto 0 !important;
  padding: 14px 16px !important;

  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 14px !important;

  text-decoration: none !important;
  color: #000 !important;

  -webkit-tap-highlight-color: transparent;
}

/* Texto centrado (por si viene con flex raro) */
#newmenu__sales a.desktop-menu-link.hover_link_menu span,
#newmenu__sales a.hover_link_menu span{
  font-weight: 500 !important;
}

/* Flecha derecha tipo los demás */
#newmenu__sales a.desktop-menu-link.hover_link_menu::after,
#newmenu__sales a.hover_link_menu::after{
  content: "";
  position: absolute;
  right: 18px;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(0,0,0,.45);
  border-bottom: 2px solid rgba(0,0,0,.45);
  transform: rotate(-45deg);
  opacity: .85;
}

/* Quita “fondito” raro atrás del texto si viene de spans internos */
#newmenu__sales a.desktop-menu-link.hover_link_menu * ,
#newmenu__sales a.hover_link_menu *{
  background: transparent !important;
}

/* Feedback touch */
#newmenu__sales a.desktop-menu-link.hover_link_menu:active,
#newmenu__sales a.hover_link_menu:active{
  background: #f2f2f2 !important;
  transform: scale(.99);
}
/* =========================================
   OFERTAS – BOTÓN BACK (<)
   Más ovalado + fondo #f2f2f2
   ========================================= */

   #newmenu__sales .mobile-menu-subsection-close .button_icon{
  width: 56px;              /* más ancho que alto → óvalo */
  height: 40px;
  border-radius: 9999px;    /* ovalado tipo pill */

  background: #f2f2f2 !important;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: none !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, transform .15s ease;
}

/* Flecha negra */
#newmenu__sales .mobile-menu-subsection-close .button_icon osgo-icon{
  color: #000 !important;
}

/* Hover (desktop) */
@media (hover:hover){
  #newmenu__sales .mobile-menu-subsection-close .button_icon:hover{
    background: #e6e6e6;
    transform: translateY(-1px);
  }
}

/* Active (móvil) */
#newmenu__sales .mobile-menu-subsection-close .button_icon:active{
  transform: scale(.96);
}
/* =========================================
   OFERTAS – HEADER STICKY SIEMPRE AL FRENTE
   ========================================= */

   #newmenu__sales .mobile-menu-subsection-close{
  position: sticky !important;
  top: 0;
  z-index: 20 !important;          /* mayor que cualquier item */
  background-color: #f2f2f2 !important;
}

/* Contenedor interno del título */
#newmenu__sales .mobile-menu-subsection-close > div{
  position: relative;
  z-index: 21;
}

/* Asegura que los items queden por debajo */
#newmenu__sales .desktop-menu-sections-item,
#newmenu__sales a,
#newmenu__sales .hover_link_menu{
  position: relative;
  z-index: 1;
}
/* =====================================================
   CASAS (HOMES) – MISMO LOOK QUE "LO NUEVO"
   Pills blancas + flecha derecha + orden visual
   ===================================================== */

   #newmenu__homes{
  background:#F2F2F2 !important;
}

/* tipografía igual que tus otros submenús */
#newmenu__homes,
#newmenu__homes *:not(osgo-icon):not(svg):not(path){
  font-family: var(--font-muller) !important;
}

/* Header sticky siempre al frente */
#newmenu__homes .mobile-menu-subsection-close{
  position: sticky !important;
  top: 0;
  z-index: 30 !important;
  background:#F2F2F2 !important;
}

/* Back button (ovalado negro -> hover blanco) */
#newmenu__homes .mobile-menu-subsection-close .button_icon{
  width: 56px !important;
  height: 40px !important;
  border-radius: 9999px !important;

  background:#000 !important;
  border: 1px solid #000 !important;
  box-shadow: none !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  transition: background-color .15s ease, transform .15s ease;
}
#newmenu__homes .mobile-menu-subsection-close .button_icon osgo-icon{
  color:#fff !important;
  stroke:#fff !important;
}
@media (hover:hover){
  #newmenu__homes .mobile-menu-subsection-close .button_icon:hover{
    background:#fff !important;
    transform: translateY(-1px);
  }
  #newmenu__homes .mobile-menu-subsection-close .button_icon:hover osgo-icon{
    color:#000 !important;
    stroke:#000 !important;
  }
}
#newmenu__homes .mobile-menu-subsection-close .button_icon:active{
  transform: scale(.96);
}

/* Área de contenido con aire */
#newmenu__homes .mobile-menu-slide{
  padding: 10px 16px 22px !important;
}

/* Switch país (MX/USA) como pill */
#newmenu__homes .mobile-menu-options-item{
  text-decoration:none !important;
}
#newmenu__homes .mobile-menu-options-item > span.ui\:button{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap: 10px;

  background:#fff !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 9999px !important;

  padding: 10px 14px !important;
  min-height: 46px !important;

  box-shadow:none !important;
}
#newmenu__homes .mobile-menu-options-item > span.ui\:button img{
  display:block;
}

/* Título “VER PROPIEDADES POR UBICACIÓN” */
#newmenu__homes h3.padding-2{
  margin: 18px 0 10px !important;
  text-align:center !important;
  letter-spacing:.02em;
  font-weight: 600;
}

/* CONTENEDOR del listado estados/ciudades */
#newmenu__homes ._items_[data-items]{
  padding: 0 !important;
}

/* Título de estado */
#newmenu__homes .state-title{
  margin: 18px 0 8px !important;
  padding: 0 !important;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align:center;
}

/* Links de ciudades -> pills como “Lo nuevo” */
#newmenu__homes ._items_[data-items] > a[href*="/city/"]{
  position: relative;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width: min(92%, 520px) !important;
  min-height: 56px !important;

  margin: 10px auto 0 !important;
  padding: 14px 16px !important;

  background:#fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 14px !important;

  color:#000 !important;
  text-decoration:none !important;

  -webkit-tap-highlight-color: transparent;
}

/* texto sin fondos raros */
#newmenu__homes ._items_[data-items] > a[href*="/city/"] span{
  background: transparent !important;
  font-weight: 600;
}

/* Flechita derecha */
#newmenu__homes ._items_[data-items] > a[href*="/city/"]::after{
  content:"";
  position:absolute;
  right: 18px;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(0,0,0,.45);
  border-bottom: 2px solid rgba(0,0,0,.45);
  transform: rotate(-45deg);
  opacity: .85;
}

/* Feedback tap */
#newmenu__homes ._items_[data-items] > a[href*="/city/"]:active{
  background:#f2f2f2 !important;
  transform: scale(.99);
}

/* CTA final “Ver todo / View all” (tu link hover_link_menu) como pill también */
#newmenu__homes a.desktop-menu-link.hover_link_menu{
  position: relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width: min(92%, 520px) !important;
  min-height: 56px !important;

  margin: 16px auto 0 !important;
  padding: 14px 16px !important;

  background:#fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 14px !important;

  text-decoration:none !important;
  color:#000 !important;
}

/* quita el iconito cuadrado blanco del "Ver todo" para que sea igual que los demás */
#newmenu__homes a.desktop-menu-link.hover_link_menu .button_icon{
  display:none !important;
}

/* flechita también en el CTA */
#newmenu__homes a.desktop-menu-link.hover_link_menu::after{
  content:"";
  position:absolute;
  right: 18px;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(0,0,0,.45);
  border-bottom: 2px solid rgba(0,0,0,.45);
  transform: rotate(-45deg);
  opacity: .85;
}
#newmenu__homes a.desktop-menu-link.hover_link_menu:active{
  background:#f2f2f2 !important;
  transform: scale(.99);
}
/* =====================================================
   CASAS (HOMES) – MEJOR JERARQUÍA: ESTADO vs CIUDADES
   ===================================================== */

/* 1) TITULOS (ESTADOS) que se vean como separadores */
#newmenu__homes .state-title{
  width: min(92%, 520px) !important;
  margin: 22px auto 10px !important;

  text-align: left !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .10em !important;

  opacity: .85;
  position: relative;
}

/* línea separadora debajo del estado */
#newmenu__homes .state-title::after{
  content:"";
  display:block;
  height: 1px;
  width: 100%;
  margin-top: 10px;
  background: rgba(0,0,0,.12);
}

/* 2) CIUDADES como lista entendible: izquierda + flecha derecha */
#newmenu__homes ._items_[data-items] > a[href*="/city/"]{
  justify-content: flex-start !important; /* ya no centrado */
  padding: 14px 44px 14px 16px !important; /* espacio para la flecha */
}

/* texto de ciudad alineado a la izquierda */
#newmenu__homes ._items_[data-items] > a[href*="/city/"] span{
  width: 100%;
  text-align: left !important;
  font-weight: 600 !important;
}

/* flecha derecha bien colocada (ya la tenías, solo la afinamos) */
#newmenu__homes ._items_[data-items] > a[href*="/city/"]::after{
  right: 16px !important;
  opacity: .75 !important;
}

/* 3) Título "VER PROPIEDADES..." un poco más claro como encabezado */
#newmenu__homes h3.padding-2{
  width: min(92%, 520px) !important;
  margin: 16px auto 6px !important;
  text-align: left !important;
  font-size: 13px !important;
  letter-spacing: .08em;
  opacity: .75;
}

/* 4) Aire entre grupos: que el primer item después de un estado respire más */
#newmenu__homes .state-title + a[href*="/city/"]{
  margin-top: 12px !important;
}

/* 5) “Ver todo” igual que lista y alineado a la izquierda */
#newmenu__homes a.desktop-menu-link.hover_link_menu{
  justify-content: flex-start !important;
  padding: 14px 44px 14px 16px !important;
}
#newmenu__homes a.desktop-menu-link.hover_link_menu span{
  width: 100%;
  text-align: left !important;
  font-weight: 700 !important;
}
/* ===============================
   CASAS – BOTÓN PAÍS (USA / MX)
   Quitar gris interno
   =============================== */

   #newmenu__homes .ui\:button,
#newmenu__homes .ui\:button *,
#newmenu__homes .mobile-menu-options-item,
#newmenu__homes .mobile-menu-options-item * {
  background: transparent !important;
  box-shadow: none !important;
}

/* Mantén solo el borde/pill blanco */
#newmenu__homes .mobile-menu-options-item {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 9999px;
  padding: 10px 16px;
}
/* ===============================
   CASAS – BOTÓN "VER TODO"
   Quitar fondo gris interno
   =============================== */

   #newmenu__homes a.desktop-menu-link,
#newmenu__homes a.desktop-menu-link * {
  background: transparent !important;
  box-shadow: none !important;
}

/* El pill real */
#newmenu__homes a.desktop-menu-link{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mata específicamente el backdrop gris */
#newmenu__homes .backdrop-white{
  background: transparent !important;
}
/* ===============================
   CASAS – BOTÓN PAÍS
   QUITAR BORDE EXTERNO
   =============================== */

/* Wrapper externo */
#newmenu__homes .mobile-menu-options-item{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Botón real (único visible) */
#newmenu__homes .ui\:button{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 9999px;
  padding: 10px 16px;
  box-shadow: none !important;
}
/* =========================================
   CASAS – TÍTULO "VER PROPIEDADES POR UBICACIÓN"
   hacerlo más limpio, centrado y con jerarquía
   ========================================= */

/* Contenedor del bloque de CASAS */
#newmenu__homes .mobile-menu-slide{
  padding-top: 8px !important;
}

/* El título actual (tu h3) */
#newmenu__homes h3.padding-2{
  margin: 14px auto 18px !important;
  padding: 0 !important;
  width: min(92%, 520px);
  text-align: center !important;

  font-size: 14px !important;
  letter-spacing: .12em;
  text-transform: uppercase;

  color: rgba(0,0,0,.65) !important;
  font-weight: 700 !important;

  /* le da “bloque” visual sin verse pesado */
  position: relative;
}

/* una línea sutil debajo para que se sienta sección */
#newmenu__homes h3.padding-2::after{
  content:"";
  display:block;
  width: 72px;
  height: 2px;
  margin: 10px auto 0;
  background: rgba(0,0,0,.12);
  border-radius: 9999px;
}

/* Separación del selector de país con el título */
#newmenu__homes .oh-flex.oh-center-v.padding-h-2{
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}
/* =========================================
   CASAS – BOTÓN BACK color #eaeaea
   ========================================= */

   #newmenu__homes .mobile-menu-subsection-close .button_icon{
  background-color: #f2f2f2 !important; /* mismo fondo */
  border: 1px solid rgba(0,0,0,.35) !important;
  box-shadow: none !important;

  width: 56px !important;
  height: 40px !important;
  border-radius: 9999px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Flecha visible y limpia */
#newmenu__homes .mobile-menu-subsection-close .button_icon osgo-icon{
  color: #000 !important;
  stroke: #000 !important;
  fill: #000 !important;
}

/* Hover (solo desktop) */
@media (hover:hover){
  #newmenu__homes .mobile-menu-subsection-close .button_icon:hover{
    background-color: #f2f2f2 !important;
  }
}

/* Active (móvil) */
#newmenu__homes .mobile-menu-subsection-close .button_icon:active{
  transform: scale(.96);
}
.padding-t-1 {
    padding-top: 2rem;
}
.mobile-menu-subsection {
    position: fixed;
    top: 0;
    left: -100%;
    color: #000000;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    opacity: 0;
    transition: left 0.2s linear, opacity 0.2s linear;
    z-index: 50;
}

/* Bloquear interacción con submenús cerrados.
   En iOS Safari, los <a> dentro de submenús fixed con opacity:0 siguen
   recibiendo touch events y saturan el thread principal cuando hay muchos
   (ej: 15+ links en #newmenu__arrivals). Eso causaba que los filtros del
   catálogo se sintieran lentos o no respondieran en iPhone real.
   El estado .open desactiva esta regla y restaura la interacción. */
.mobile-menu-subsection:not(.open),
.mobile-menu-subsection:not(.open) * {
    pointer-events: none !important;
    visibility: hidden !important;
}
.mobile-menu.open .mobile-menu-subsection.open,
.mobile-menu.open .mobile-menu-subsection.open * {
    visibility: visible !important;
}
/* =========================================
   FIX: bajar SOLO el texto "Filtros" (mobile)
   ========================================= */
   @media (max-width: 1023.98px){

/* El texto (strong) dentro del header de la sección */
.mobile-menu-subsection-close .size\:jumbo > strong{
  display: inline-block;              /* necesario para transform */
  transform: translateY(6px) !important; /* ajusta 4px–10px */
}

/* (Opcional) Si también quieres bajar el ícono/back para que quede alineado */
.mobile-menu-subsection-close .size\:jumbo .button_icon{
  transform: translateY(6px) !important;
}
}
/* Texto del tooltip en negro */
.tooltip_bottom::after,
.tooltip_bottom::before{
    color: #000 !important;
}

/* Si el tooltip usa data-title */
.tooltip_bottom[data-title]::after{
    color: #000 !important;
}
/* =========================================
   ARRIVALS – Ocultar categorías
   Solo dejar "Ver todas las novedades"
   ========================================= */
   #newmenu__arrivals a.arrivals-row:not(.is-primary){
  display: none !important;
}

/* (Opcional) que el CTA respire bien al quedar solo */
#newmenu__arrivals a.arrivals-row.is-primary{
  margin-top: 12px !important;
}