/* ==========================================================================
   OVERRIDES: Mobile Menu & Icon Fixes (Clean clone)
   ========================================================================== */

/* -- Icon font exclusions: force sans-serif on icons to avoid serif inheritance -- */
/* More specific to override Elementor/FA */
.elementor .fa, .elementor .fas, .elementor .far, .elementor .fab, .elementor .fal, .elementor .fad,
.elementor [class*="fa-"],
.elementor .elementor-icon, .elementor .elementor-icon *,
.elementor svg, .elementor svg *,
#menu-main-menu .fa, #menu-main-menu .elementor-icon, #menu-main-menu svg {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* -- Mobile menu: allow clicking the text and using existing toggle (non-aggressive) -- */
@media (max-width: 767px) {
  /* make parent item a flex container */
  #menu-main-menu > li.menu-item-has-children {
      position: relative;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
  }

  /* link occupies available space but leaves room for toggle */
  #menu-main-menu > li.menu-item-has-children > a {
      flex: 1;
      pointer-events: auto !important;
      cursor: pointer !important;
      width: auto !important;
      padding-right: 0 !important;
      max-width: calc(100% - 50px);
  }

  /* place existing toggles to the right (cover common names and Elementor buttons) */
  #menu-main-menu > li.menu-item-has-children > .submenu-toggle,
  #menu-main-menu > li.menu-item-has-children > button,
  #menu-main-menu > li.menu-item-has-children > .menu-toggle,
  #menu-main-menu button[aria-label*="submenú"],
  #menu-main-menu .submenu-toggle {
      position: absolute !important;
      right: 0 !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      pointer-events: auto !important;
      z-index: 10 !important;
      width: 45px !important;
      height: 45px !important;
      background: transparent !important;
      border: none !important;
  }

  /* ensure pseudo-elements don't block clicks */
  #menu-main-menu > li.menu-item-has-children::before,
  #menu-main-menu > li.menu-item-has-children::after {
      pointer-events: none !important;
  }

  /* submenu occupies full row */
  #menu-main-menu > li.menu-item-has-children > ul.sub-menu {
      flex-basis: 100%;
      width: 100%;
  }

  /* small spacing adjustment on parent to avoid overlap */
  #menu-main-menu > li.menu-item-has-children { padding-right: 50px !important; }
  #menu-main-menu > li.menu-item-has-children > a { padding-right: 10px !important; }
}

/* -- Aggressive fallback (commented). Use only if the non-aggressive rules don't fix every case. -- */
/*
@media (max-width: 767px) {
  #menu-main-menu > li.menu-item-has-children {
      position: relative !important;
      display: block !important;
  }

  #menu-main-menu > li.menu-item-has-children > a {
      display: inline-block !important;
      width: calc(100% - 50px) !important;
      pointer-events: auto !important;
      cursor: pointer !important;
      padding-right: 10px !important;
  }

  #menu-main-menu > li.menu-item-has-children > *:not(a):not(ul) {
      position: absolute !important;
      right: 0 !important;
      top: 0 !important;
      width: 50px !important;
      height: 100% !important;
      pointer-events: auto !important;
      cursor: pointer !important;
  }

  #menu-main-menu > li.menu-item-has-children::before,
  #menu-main-menu > li.menu-item-has-children::after { pointer-events: none !important; }

  #menu-main-menu > li.menu-item-has-children > ul.sub-menu {
      position: relative !important;
      width: 100% !important;
      clear: both !important;
  }
}
*/

/* ========================================================================
   MENÚ MÓVIL - SUBMENU Y FLECHAS FUNCIONALES (TABLET/MOBILE hasta 1023px)
   ======================================================================== */

@media (max-width: 1023px) {

  /* ===== CONTENEDOR DEL ITEM CON SUBMENÚ ===== */
  #menu-main-menu > li.menu-item-has-children,
  .mobile-navigation li.menu-item-has-children {
      position: relative;
      display: block;
      width: 100%;
  }

  /* ===== LINK PRINCIPAL (Texto clickeable para navegar) ===== */
  #menu-main-menu > li.menu-item-has-children > a,
  .mobile-navigation li.menu-item-has-children > a {
      display: inline-block;
      width: calc(100% - 50px);
      padding: 12px 15px;
      pointer-events: auto !important;
      cursor: pointer !important;
      text-decoration: none;
      color: var(--charcoal);
      transition: color 0.3s ease;
  }

  #menu-main-menu > li.menu-item-has-children > a:hover,
  .mobile-navigation li.menu-item-has-children > a:hover {
      color: var(--gold-primary);
  }

  /* ===== BOTÓN TOGGLE (Flecha para abrir/cerrar submenú) ===== */
  #menu-main-menu > li.menu-item-has-children > button,
  #menu-main-menu > li.menu-item-has-children > .submenu-toggle,
  .mobile-navigation li.menu-item-has-children > button,
  .mobile-navigation li.menu-item-has-children > .submenu-toggle {
      position: absolute !important;
      right: 0 !important;
      top: 0 !important;
      width: 50px !important;
      height: 100% !important;
      min-height: 44px !important;
      padding: 0 !important;
      margin: 0 !important;
      background: transparent !important;
      border: none !important;
      cursor: pointer !important;
      pointer-events: auto !important;
      z-index: 10 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      transition: all 0.3s ease;
  }

  /* Icono de la flecha (SVG o contenido generado) */
  #menu-main-menu > li.menu-item-has-children > button svg,
  #menu-main-menu > li.menu-item-has-children > .submenu-toggle svg,
  .mobile-navigation li.menu-item-has-children > button svg,
  .mobile-navigation li.menu-item-has-children > .submenu-toggle svg {
      width: 12px;
      height: 12px;
      fill: var(--grey);
      transition: transform 0.3s ease, fill 0.3s ease;
  }

  /* Flecha usando pseudo-elemento (si no hay SVG) */
  #menu-main-menu > li.menu-item-has-children > button::after,
  #menu-main-menu > li.menu-item-has-children > .submenu-toggle::after,
  .mobile-navigation li.menu-item-has-children > button::after,
  .mobile-navigation li.menu-item-has-children > .submenu-toggle::after {
      content: '›';
      font-size: 24px;
      font-weight: 300;
      color: var(--grey);
      transform: rotate(90deg);
      display: block;
      transition: transform 0.3s ease, color 0.3s ease;
  }

  /* Hover en el botón toggle */
  #menu-main-menu > li.menu-item-has-children > button:hover::after,
  #menu-main-menu > li.menu-item-has-children > .submenu-toggle:hover::after,
  .mobile-navigation li.menu-item-has-children > button:hover::after,
  .mobile-navigation li.menu-item-has-children > .submenu-toggle:hover::after {
      color: var(--gold-primary);
  }

  /* ===== SUBMENÚ (Oculto por defecto) ===== */
  #menu-main-menu > li.menu-item-has-children > ul.sub-menu,
  .mobile-navigation li.menu-item-has-children > ul.sub-menu {
      display: none;
      max-height: 0;
      overflow: hidden;
      width: 100%;
      padding-left: 0;
      margin: 0;
      list-style: none;
      background: rgba(250, 248, 245, 0.5);
      transition: max-height 0.4s ease, padding 0.3s ease;
  }

  /* ===== SUBMENÚ ABIERTO (cuando el padre tiene clase 'submenu-open') ===== */
  #menu-main-menu > li.menu-item-has-children.submenu-open > ul.sub-menu,
  .mobile-navigation li.menu-item-has-children.submenu-open > ul.sub-menu {
      display: block;
      max-height: 500px;
      padding: 10px 0 10px 20px;
      border-left: 2px solid var(--gold-light);
      margin-top: 5px;
  }

  /* Rotar flecha cuando está abierto */
  #menu-main-menu > li.menu-item-has-children.submenu-open > button::after,
  #menu-main-menu > li.menu-item-has-children.submenu-open > .submenu-toggle::after,
  .mobile-navigation li.menu-item-has-children.submenu-open > button::after,
  .mobile-navigation li.menu-item-has-children.submenu-open > .submenu-toggle::after {
      transform: rotate(270deg);
      color: var(--gold-primary);
  }

  #menu-main-menu > li.menu-item-has-children.submenu-open > button svg,
  #menu-main-menu > li.menu-item-has-children.submenu-open > .submenu-toggle svg,
  .mobile-navigation li.menu-item-has-children.submenu-open > button svg,
  .mobile-navigation li.menu-item-has-children.submenu-open > .submenu-toggle svg {
      transform: rotate(180deg);
      fill: var(--gold-primary);
  }

  /* ===== ITEMS DEL SUBMENÚ ===== */
  #menu-main-menu > li.menu-item-has-children > ul.sub-menu > li,
  .mobile-navigation li.menu-item-has-children > ul.sub-menu > li {
      margin: 0;
      padding: 0;
      list-style: none;
  }

  #menu-main-menu > li.menu-item-has-children > ul.sub-menu > li > a,
  .mobile-navigation li.menu-item-has-children > ul.sub-menu > li > a {
      display: block;
      padding: 10px 15px;
      font-size: 14px;
      color: var(--grey);
      text-decoration: none;
      transition: all 0.3s ease;
      position: relative;
      padding-left: 25px;
  }

  /* Viñeta decorativa para items del submenú */
  #menu-main-menu > li.menu-item-has-children > ul.sub-menu > li > a::before,
  .mobile-navigation li.menu-item-has-children > ul.sub-menu > li > a::before {
      content: '—';
      position: absolute;
      left: 8px;
      color: var(--gold-light);
      font-weight: 300;
      transition: color 0.3s ease;
  }

  #menu-main-menu > li.menu-item-has-children > ul.sub-menu > li > a:hover,
  .mobile-navigation li.menu-item-has-children > ul.sub-menu > li > a:hover {
      color: var(--gold-primary);
      padding-left: 30px;
      background: rgba(200, 181, 145, 0.05);
  }

  #menu-main-menu > li.menu-item-has-children > ul.sub-menu > li > a:hover::before,
  .mobile-navigation li.menu-item-has-children > ul.sub-menu > li > a:hover::before {
      color: var(--gold-primary);
  }

  /* ===== EVITAR CONFLICTOS CON PSEUDO-ELEMENTOS ===== */
  #menu-main-menu > li.menu-item-has-children::before,
  #menu-main-menu > li.menu-item-has-children::after,
  .mobile-navigation li.menu-item-has-children::before,
  .mobile-navigation li.menu-item-has-children::after {
      content: none !important;
      display: none !important;
      pointer-events: none !important;
  }

  /* ===== AJUSTES GENERALES DEL MENÚ MÓVIL ===== */
  #menu-main-menu,
  .mobile-navigation ul {
      list-style: none;
      padding: 0;
      margin: 0;
  }

  #menu-main-menu > li,
  .mobile-navigation > ul > li {
      border-bottom: 1px solid rgba(200, 181, 145, 0.15);
      padding: 0;
  }

  #menu-main-menu > li:last-child,
  .mobile-navigation > ul > li:last-child {
      border-bottom: none;
  }
}

/* ========================================================================
   MENÚ MÓVIL - OPTIMIZADO PARA FUNCIONAR CON JS
   ======================================================================== */

@media (max-width: 1023px) {

  /* Contenedor del item */
  #menu-main-menu li.menu-item-has-children,
  .mobile-navigation li.menu-item-has-children {
      position: relative !important;
      display: block !important;
      width: 100%;
  }

  /* Link principal - SIEMPRE clickeable */
  #menu-main-menu li.menu-item-has-children > a,
  .mobile-navigation li.menu-item-has-children > a {
      display: inline-block !important;
      width: calc(100% - 55px) !important;
      padding: 14px 10px !important;
      pointer-events: auto !important;
      cursor: pointer !important;
      color: var(--charcoal);
      transition: color 0.3s ease;
      text-decoration: none;
      position: relative;
      z-index: 1;
  }

  #menu-main-menu li.menu-item-has-children > a:hover,
  .mobile-navigation li.menu-item-has-children > a:hover {
      color: var(--gold-primary);
  }

  /* Botón Toggle - Posicionado a la derecha */
  #menu-main-menu li.menu-item-has-children > button,
  #menu-main-menu li.menu-item-has-children > .submenu-toggle,
  .mobile-navigation li.menu-item-has-children > button,
  .mobile-navigation li.menu-item-has-children > .submenu-toggle {
      position: absolute !important;
      right: 0 !important;
      top: 0 !important;
      width: 50px !important;
      height: 100% !important;
      min-height: 48px !important;
      padding: 0 !important;
      margin: 0 !important;
      background: transparent !important;
      border: none !important;
      cursor: pointer !important;
      pointer-events: auto !important;
      z-index: 10 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      transition: background 0.3s ease;
  }

  #menu-main-menu li.menu-item-has-children > button:hover,
  #menu-main-menu li.menu-item-has-children > .submenu-toggle:hover,
  .mobile-navigation li.menu-item-has-children > button:hover,
  .mobile-navigation li.menu-item-has-children > .submenu-toggle:hover {
      background: rgba(200, 181, 145, 0.1) !important;
  }

  /* Icono de flecha (usando ::after) */
  #menu-main-menu li.menu-item-has-children > button::after,
  #menu-main-menu li.menu-item-has-children > .submenu-toggle::after,
  .mobile-navigation li.menu-item-has-children > button::after,
  .mobile-navigation li.menu-item-has-children > .submenu-toggle::after {
      content: '›' !important;
      font-size: 28px;
      font-weight: 300;
      color: var(--grey);
      transform: rotate(90deg);
      display: block;
      transition: transform 0.3s ease, color 0.3s ease;
      line-height: 1;
  }

  /* Flecha cuando está abierto */
  #menu-main-menu li.submenu-open > button::after,
  #menu-main-menu li.submenu-open > .submenu-toggle::after,
  .mobile-navigation li.submenu-open > button::after,
  .mobile-navigation li.submenu-open > .submenu-toggle::after {
      transform: rotate(270deg) !important;
      color: var(--gold-primary) !important;
  }

  /* Submenú - Oculto por defecto */
  #menu-main-menu li.menu-item-has-children > ul.sub-menu,
  .mobile-navigation li.menu-item-has-children > ul.sub-menu {
      display: none;
      width: 100%;
      padding-left: 0;
      margin: 0;
      list-style: none;
      background: rgba(250, 248, 245, 0.5);
      border-left: 2px solid var(--gold-light);
      padding: 8px 0 8px 15px;
      margin-top: 5px;
  }

  /* Submenú visible */
  #menu-main-menu li.submenu-open > ul.sub-menu,
  .mobile-navigation li.submenu-open > ul.sub-menu {
      display: block !important;
  }

  /* Items del submenú */
  #menu-main-menu li.menu-item-has-children > ul.sub-menu > li > a,
  .mobile-navigation li.menu-item-has-children > ul.sub-menu > li > a {
      display: block;
      padding: 10px 15px 10px 25px;
      font-size: 14px;
      color: var(--grey);
      text-decoration: none;
      transition: all 0.3s ease;
      position: relative;
  }

  #menu-main-menu li.menu-item-has-children > ul.sub-menu > li > a::before,
  .mobile-navigation li.menu-item-has-children > ul.sub-menu > li > a::before {
      content: '—';
      position: absolute;
      left: 8px;
      color: var(--gold-light);
  }

  #menu-main-menu li.menu-item-has-children > ul.sub-menu > li > a:hover,
  .mobile-navigation li.menu-item-has-children > ul.sub-menu > li > a:hover {
      color: var(--gold-primary);
      padding-left: 30px;
      background: rgba(200, 181, 145, 0.08);
  }

  /* Eliminar pseudo-elementos que puedan interferir */
  #menu-main-menu li.menu-item-has-children::before,
  #menu-main-menu li.menu-item-has-children::after,
  .mobile-navigation li.menu-item-has-children::before,
  .mobile-navigation li.menu-item-has-children::after {
      display: none !important;
  }
}

/* ==========================================================================
   OVERRIDES: Mobile Menu & Icon Fixes (Consolidated)
   ========================================================================== */

/* -- Icon font exclusions: force sans-serif on icons to avoid serif inheritance -- */
.elementor .fa, .elementor .fas, .elementor .far, .elementor .fab, .elementor .fal, .elementor .fad,
.elementor [class*="fa-"],
.elementor .elementor-icon, .elementor .elementor-icon *,
.elementor svg, .elementor svg *,
#menu-main-menu .fa, #menu-main-menu .elementor-icon, #menu-main-menu svg {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* ==========================================================================
   MOBILE & TABLET (<=1023px) - Consolidated mobile menu styles
   ========================================================================== */

@media (max-width: 1023px) {

  /* Container & base reset */
  .mobile-navigation,
  nav[class*="mobile"] {
    background: var(--white);
  }

  #menu-main-menu,
  .mobile-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  /* Primary items */
  #menu-main-menu > li {
    border-bottom: 1px solid rgba(200, 181, 145, 0.2);
    position: relative;
  }

  #menu-main-menu > li:last-child { border-bottom: none; }

  /* Items that contain submenus */
  #menu-main-menu > li.menu-item-has-children,
  .mobile-navigation li.menu-item-has-children {
    position: relative;
    display: block;
    width: 100%;
  }

  /* Main link */
  #menu-main-menu > li > a {
    display: block;
    padding: 16px 50px 16px 20px;
    color: var(--charcoal);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
  }

  #menu-main-menu > li > a:hover { color: var(--gold-primary); background: rgba(200, 181, 145, 0.05); }

  /* Toggle button container - aligned and centered (KEY) */
  #menu-main-menu > li.menu-item-has-children > button,
  #menu-main-menu > li.menu-item-has-children > .submenu-toggle,
  .mobile-navigation li.menu-item-has-children > button,
  .mobile-navigation li.menu-item-has-children > .submenu-toggle {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 50px !important;
    height: 100% !important;
    min-height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.3s ease;
  }

  /* Toggle hover */
  #menu-main-menu > li.menu-item-has-children > button:hover,
  #menu-main-menu > li.menu-item-has-children > .submenu-toggle:hover,
  .mobile-navigation li.menu-item-has-children > button:hover,
  .mobile-navigation li.menu-item-has-children > .submenu-toggle:hover {
    background: rgba(200, 181, 145, 0.08) !important;
  }

  /* Arrow (pseudo) - centered via flexbox inside the button (KEY) */
  #menu-main-menu > li.menu-item-has-children > button::after,
  #menu-main-menu > li.menu-item-has-children > .submenu-toggle::after,
  .mobile-navigation li.menu-item-has-children > button::after,
  .mobile-navigation li.menu-item-has-children > .submenu-toggle::after {
    content: '›';
    font-size: 26px; /* normalized size */
    font-weight: 300;
    color: var(--grey);
    transform: rotate(90deg);
    transition: transform 0.3s ease, color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    width: 100%;
    height: 100%;
  }

  /* Arrow rotation when open */
  #menu-main-menu > li.menu-item-has-children.submenu-open > button::after,
  #menu-main-menu > li.menu-item-has-children.submenu-open > .submenu-toggle::after,
  .mobile-navigation li.submenu-open > button::after,
  .mobile-navigation li.submenu-open > .submenu-toggle::after {
    transform: rotate(270deg);
    color: var(--gold-primary);
  }

  /* Submenu - premium style */
  #menu-main-menu > li.menu-item-has-children > ul.sub-menu,
  .mobile-navigation li.menu-item-has-children > ul.sub-menu {
    display: none;
    width: 100%;
    padding: 0;
    margin: 0 0 8px 0;
    list-style: none;
    background: linear-gradient(to bottom, rgba(250, 248, 245, 0.8) 0%, rgba(250, 248, 245, 0.95) 100%);
    border-left: 3px solid var(--gold-light);
    padding: 12px 0 12px 20px;
    box-shadow: inset 3px 0 12px rgba(200, 181, 145, 0.08);
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease, padding 0.25s ease, opacity 0.25s ease;
  }

  /* Submenu visible */
  #menu-main-menu > li.menu-item-has-children.submenu-open > ul.sub-menu,
  .mobile-navigation li.submenu-open > ul.sub-menu {
    display: block;
    max-height: 500px;
    opacity: 1;
    animation: slideDown 0.28s ease-out;
  }

  @keyframes slideDown {
    from { opacity: 0; max-height: 0; transform: translateY(-6px); }
    to { opacity: 1; max-height: 500px; transform: translateY(0); }
  }

  /* Submenu items */
  #menu-main-menu > li.menu-item-has-children > ul.sub-menu > li,
  .mobile-navigation li.menu-item-has-children > ul.sub-menu > li { list-style: none; margin: 0; padding: 0; }

  #menu-main-menu > li.menu-item-has-children > ul.sub-menu > li > a,
  .mobile-navigation li.menu-item-has-children > ul.sub-menu > li > a {
    display: block;
    padding: 12px 15px 12px 30px;
    color: var(--grey);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    letter-spacing: 0.01em;
  }

  /* Submenu decorative bullet */
  #menu-main-menu > li.menu-item-has-children > ul.sub-menu > li > a::before,
  .mobile-navigation li.menu-item-has-children > ul.sub-menu > li > a::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: var(--gold-light);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    transition: all 0.3s ease;
    opacity: 0.7;
  }

  /* Hover/active */
  #menu-main-menu > li.menu-item-has-children > ul.sub-menu > li > a:hover { color: var(--gold-primary); padding-left: 35px; background: rgba(200, 181, 145, 0.12); }
  #menu-main-menu > li.menu-item-has-children > ul.sub-menu > li > a:hover::before { background: var(--gold-primary); opacity: 1; transform: translateY(-50%) rotate(90deg) scale(1.2); }

  /* Current/active item */
  #menu-main-menu > li.menu-item-has-children > ul.sub-menu > li.current-menu-item > a,
  #menu-main-menu > li.menu-item-has-children > ul.sub-menu > li > a[aria-current="page"] {
    color: var(--gold-primary);
    font-weight: 500;
    background: rgba(200, 181, 145, 0.15);
  }

  #menu-main-menu > li.menu-item-has-children > ul.sub-menu > li.current-menu-item > a::before { background: var(--gold-primary); opacity: 1; }

  /* Subtle separators */
  #menu-main-menu > li.menu-item-has-children > ul.sub-menu > li:not(:last-child) { border-bottom: 1px solid rgba(200, 181, 145, 0.08); }

  /* Remove interfering pseudo-elements */
  #menu-main-menu li.menu-item-has-children::before,
  #menu-main-menu li.menu-item-has-children::after,
  .mobile-navigation li.menu-item-has-children::before,
  .mobile-navigation li.menu-item-has-children::after { display: none !important; }

}

/* Optional: diagnostic helper (commented) - enable only when needed */
/*
body.diagnose-menus #menu-main-menu .sub-menu { display:block !important; background: rgba(255,0,0,0.06) !important; border: 1px solid rgba(255,0,0,0.15) !important; }
*/