/* =========================================================
   ARAUMA – HEADER + MOBILE MENU (UN SOLO BLOQUE)
   ========================================================= */


/* =========================
   HEADER BASE
   ========================= */
.menu-app{
  position:fixed;
  /*left:0;*/
  width:100%;
  z-index:9999;
  background:transparent !important;
  background-color:transparent !important;
}

/* Quitar margen del toggle */
.hfe-nav-menu__toggle{ margin:0 !important; }

/* Capa visual */
.menu-app::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  background:var(--menu-bg-solid);
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-bottom:1px solid var(--menu-border);
  transition:opacity var(--menu-transition-desktop);
  z-index:0;
  pointer-events:none;
}

.menu-app > *{
  position:relative;
  z-index:1;
}

/* =========================
   CON SCROLL (FONDO BLANCO)
   ========================= */
.menu-app.scrolled::before{ opacity:1; }

/* Texto / iconos */
.menu-app.scrolled a,
.menu-app.scrolled .elementor-button-icon{
  color:var(--menu-text-dark) !important;
}

/* LOGO SVG – color cuando fondo es blanco */
.menu-app.scrolled svg,
.menu-app.scrolled svg *{
  fill:var(--menu-brand-color) !important;
  stroke:var(--menu-brand-color) !important;
}

/* =========================================================
   NUEVO: HOVER EN DESKTOP CUANDO ESTÁ TRANSPARENTE
   - Si NO hay scroll y hacés hover sobre el header,
     el header se vuelve blanco y aplica los mismos estilos
     que en .scrolled.
   ========================================================= */
@media (min-width:1025px){	

  .menu-app:not(.scrolled):hover::before{
    opacity:1;
  }

  .menu-app:not(.scrolled):hover a,
  .menu-app:not(.scrolled):hover .elementor-button-icon{
    color:var(--menu-text-dark) !important;
  }

  .menu-app:not(.scrolled):hover svg,
  .menu-app:not(.scrolled):hover svg *{
    fill:var(--menu-brand-color) !important;
    stroke:var(--menu-brand-color) !important;
  }
}

/* =========================
   MOBILE / TABLET
   ========================= */
@media (max-width:1024px){
  .menu-app::before{
    transition:opacity var(--menu-transition-mobile);
  }

  /* Menú abierto = fondo blanco */
  .menu-app:has(.hfe-nav-menu__toggle[aria-expanded="true"])::before{
    opacity:1;
  }

  /* Texto oscuro */
  .menu-app:has(.hfe-nav-menu__toggle[aria-expanded="true"]) a{
    color:var(--menu-text-dark) !important;
  }

  /* LOGO SVG oscuro (brand color) cuando menú está abierto */
  .menu-app:has(.hfe-nav-menu__toggle[aria-expanded="true"]) svg,
  .menu-app:has(.hfe-nav-menu__toggle[aria-expanded="true"]) svg *{
    fill:var(--menu-brand-color) !important;
    stroke:var(--menu-brand-color) !important;
  }

  /* Panel del menú */
  .menu-app:has(.hfe-nav-menu__toggle[aria-expanded="true"]) nav.hfe-dropdown,
  .menu-app:has(.hfe-nav-menu__toggle[aria-expanded="true"]) nav.hfe-dropdown-expandible{
    background:var(--menu-bg-solid) !important;
  }

  /* Quitar glass */
  .menu-app:has(.hfe-nav-menu__toggle[aria-expanded="true"]) nav.hfe-dropdown::before,
  .menu-app:has(.hfe-nav-menu__toggle[aria-expanded="true"]) nav.hfe-dropdown-expandible::before{
    content:none !important;
  }
}

/* =========================
   DESKTOP – estado transparente
   (Elementor controla color del logo)
   ========================= */
.menu-app:not(.scrolled):not(:has(.hfe-nav-menu__toggle[aria-expanded="true"]))
  .hfe-nav-menu__toggle svg,
.menu-app:not(.scrolled):not(:has(.hfe-nav-menu__toggle[aria-expanded="true"]))
  .hfe-nav-menu__toggle svg *{
  fill:var(--menu-text-light) !important;
  stroke:var(--menu-text-light) !important;
  color:var(--menu-text-light) !important;
}

/* =========================
   ANTI-ELEMENTOR
   ========================= */
.menu-app .elementor-section,
.menu-app .elementor-container,
.menu-app .elementor-element,
.menu-app nav,
.menu-app .hfe-nav-menu{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* =========================
   FIX FINAL: left negativo
   ========================= */
@media (max-width:767px){
  nav.hfe-dropdown.menu-is-active,
  nav.hfe-dropdown-expandible.menu-is-active{
    /*left:0 !important;*/
  }
}

@media (max-width:1024px){

  /* Cada item del menú */
  .menu-app li{
    position:relative;
  }

  /* Borde inferior parcial (80%) */
  .menu-app li:not(:last-child)::after{
    content:"";
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);

    width:93%;
    height:0.5px;
    background:var(--menu-text-dark);
    opacity:0.15;
  }
}

/* =========================================================
   EXTENSIÓN – FIX SVG ICONS (Mobile/Tablet)
   ========================================================= */

@media (max-width:1024px){

  /* 1) Evitar que el “logo svg” afecte el icono del toggle */
  .menu-app.scrolled .hfe-nav-menu-icon svg,
  .menu-app.scrolled .hfe-nav-menu-icon svg * ,
  .menu-app:has(.hfe-nav-menu__toggle[aria-expanded="true"]) .hfe-nav-menu-icon svg,
  .menu-app:has(.hfe-nav-menu__toggle[aria-expanded="true"]) .hfe-nav-menu-icon svg *{
    fill: unset !important;
    stroke: unset !important;
  }

  /* 2) Contenedor del icono */
  .menu-app .hfe-nav-menu-icon{
    position:relative;
    width:var(--menu-icon-size);
    height:var(--menu-icon-size);
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  /* 3) Ocultar el SVG inline viejo de Elementor */
  .menu-app .hfe-nav-menu-icon svg{
    opacity:0 !important;
    width:100% !important;
    height:100% !important;
  }

  /* 4) Pintar tu icono usando MASK (permite color por CSS) */
  .menu-app .hfe-nav-menu-icon::before{
    content:"";
    position:absolute;
    inset:0;

    -webkit-mask-image:var(--menu-icon-bars);
    mask-image:var(--menu-icon-bars);
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:contain;
    mask-size:contain;

    background-color:var(--menu-text-light); /* default: BLANCO */
    pointer-events:none;
  }

  /* 5) Si hay scroll -> hamburguesa OSCURA */
  .menu-app.scrolled .hfe-nav-menu-icon::before{
    -webkit-mask-image:var(--menu-icon-bars);
    mask-image:var(--menu-icon-bars);
    background-color:var(--menu-text-dark);
  }

  /* 6) Si el menú está abierto -> CLOSE OSCURO */
  .menu-app:has(.hfe-nav-menu__toggle[aria-expanded="true"])
    .hfe-nav-menu-icon::before{
    -webkit-mask-image:var(--menu-icon-close);
    mask-image:var(--menu-icon-close);
    background-color:var(--menu-text-dark);
  }

  /* 7) Prioridad: si está abierto aunque no haya scroll, debe quedar oscuro */
  .menu-app:not(.scrolled):has(.hfe-nav-menu__toggle[aria-expanded="true"])
    .hfe-nav-menu-icon::before{
    background-color:var(--menu-text-dark);
  }
}

/* =========================================================
   PÁGINAS SIN EFECTO TRANSPARENTE
   Home y Shop arrancan transparente → blanco con scroll.
   Todas las demás páginas: siempre fondo blanco.
   ========================================================= */

body:not(.home):not(.woocommerce-shop) .menu-app::before {
  opacity: 1;
}

body:not(.home):not(.woocommerce-shop) .menu-app a,
body:not(.home):not(.woocommerce-shop) .menu-app .elementor-button-icon {
  color: var(--menu-text-dark) !important;
}

body:not(.home):not(.woocommerce-shop) .menu-app svg,
body:not(.home):not(.woocommerce-shop) .menu-app svg * {
  fill: var(--menu-brand-color) !important;
  stroke: var(--menu-brand-color) !important;
  color: var(--menu-brand-color) !important;
}

@media (max-width: 1024px) {
  body:not(.home):not(.woocommerce-shop) .menu-app .hfe-nav-menu-icon::before {
    background-color: var(--menu-text-dark);
  }

  /* Shop en mobile: sin imagen hero → menú siempre con fondo blanco */
  body.woocommerce-shop .menu-app::before {
    opacity: 1;
  }

  body.woocommerce-shop .menu-app a,
  body.woocommerce-shop .menu-app .elementor-button-icon {
    color: var(--menu-text-dark) !important;
  }

  body.woocommerce-shop .menu-app svg,
  body.woocommerce-shop .menu-app svg * {
    fill: var(--menu-brand-color) !important;
    stroke: var(--menu-brand-color) !important;
  }

  body.woocommerce-shop .menu-app .hfe-nav-menu-icon::before {
    background-color: var(--menu-text-dark);
  }
}

/* =========================================================
   Underline/Pointer del menú: SIEMPRE OSCURO
   ========================================================= */
.hfe-nav-menu-layout:not(.hfe-pointer__framed)
.menu-item.parent a.hfe-menu-item::before,
.hfe-nav-menu-layout:not(.hfe-pointer__framed)
.menu-item.parent a.hfe-menu-item::after{
  background-color: var(--menu-text-dark) !important;
}


.hfe-pointer__underline.hfe-animation__grow .menu-item.parent.current-menu-item a.hfe-menu-item:not(:hover):not(:focus):not(.current-menu-item):not(.highlighted):after {
	opacity: 0;
}