/* ══════════════════════════════════════════════════════════════════════════
   La cabecera nueva, estilo shop.defelipe.com (26-sep).

   Todo cuelga de dos anclas que solo existen en la cabecera nueva:
     .musas-cab-nav   la clase de sus dos widgets de menu (escritorio y movil)
     #musas-cab       el ID de su fila de escritorio (logo · menu · iconos)
   Con la cabecera de antes activa, ninguna regla encuentra nada: esta hoja
   se carga en toda la web y no cambia nada hasta que se pulsa «Activar».

   Lo que NO se toca: la familia de letra ni el grosor (siguen los del widget,
   Helvetica 500). Lo nativo —tamaño, minuscula, radios del desplegable— va en
   los ajustes del widget, para que la clienta lo vea y lo cambie en Elementor;
   aqui queda solo lo que Elementor no ofrece.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Escritorio: la flecha de las entradas con desplegable ─────────────── */
/* Elementor ya usa el ::after de estos enlaces para sus punteros (absoluto y
   transparente), de ahi que se anulen posicion y opacidad. */
.musas-cab-nav .elementor-nav-menu--main > .elementor-nav-menu > li.menu-item-has-children > a.elementor-item::after{
  content:"";position:static !important;display:inline-block;opacity:1 !important;
  width:6px;height:6px;margin-left:8px;background:none;border:0;
  border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;
  transform:translateY(-3px) rotate(45deg);transition:transform .2s ease;
}
/* Su cabecera no lleva icono de submenu (ajuste vacio), pero Elementor deja el
   hueco del icono: 20 px en blanco entre «Marcas» y su flecha. */
.musas-cab-nav .elementor-nav-menu--main > .elementor-nav-menu > li > a > .sub-arrow{display:none}
.musas-cab-nav .elementor-nav-menu--main > .elementor-nav-menu > li.menu-item-has-children > a.highlighted::after{
  transform:translateY(1px) rotate(-135deg);
}

/* Subrayado fino al pasar y en la pagina actual, como defelipe. */
.musas-cab-nav .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item:hover,
.musas-cab-nav .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item:focus-visible,
.musas-cab-nav .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item.highlighted,
.musas-cab-nav .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item-active,
.musas-cab-nav .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-ancestor > a.elementor-item{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;
}

/* El panel: 250 px como el suyo. SmartMenus escribe el ancho en linea, de ahi
   el !important; la sombra suave separa el blanco de una foto blanca debajo. */
.musas-cab-nav .elementor-nav-menu--main ul.sub-menu{
  min-width:250px !important;
  /* Dos capas, contacto + elevacion (Vera, MENU-1, F-MN-01). */
  box-shadow:0 1px 2px rgba(29,29,27,.06), 0 12px 28px rgba(29,29,27,.07);
}
/* «Todas las marcas» / «Todos los productos» solo hacen falta en el movil: en
   escritorio «Marcas» ya lleva a su pagina con un clic. */
.musas-cab-nav .elementor-nav-menu--main li.musas-menu-todas{display:none}
/* «Todos los productos», la última línea de Cosmética, en caldera (2-oct). */
.musas-cab-nav li.musas-menu-todos{border-top:1px solid #ece5de;margin-top:4px}
.musas-cab-nav li.musas-menu-todos > a.elementor-sub-item,
.musas-cab-nav li.musas-menu-todos > a{color:#BE573A !important;font-weight:600 !important}
.musas-cab-nav li.musas-menu-todos > a:hover,
.musas-cab-nav li.musas-menu-todos > a:focus-visible{color:#A9472D !important;text-decoration:underline;text-underline-offset:3px}

/* ── «Tratamientos» / «Trat.» segun el ancho ───────────────────────────── */
.musas-cab-nav .musas-m-corto{display:none}
/* Enteros desde 1.536 (el portatil ancho mas comun): a 1.440 faltaba 1 px, y en
   su web los iconos del tema pesan unos pixeles mas que en la replica. */
@media (min-width:1025px) and (max-width:1535px){
  .musas-cab-nav .elementor-nav-menu--main .musas-m-largo{display:none}
  .musas-cab-nav .elementor-nav-menu--main .musas-m-corto{display:inline}
}

/* ── La fila de escritorio ─────────────────────────────────────────────── */
/* Aire entre logo, menu e iconos: su fila no tenia hueco porque cada columna
   llevaba un ancho fijo en %. Ahora que el menu crece, hace falta. */
#musas-cab > .e-con-inner{column-gap:24px}

/* ── En portatiles ─────────────────────────────────────────────────────── */
/* La tarjeta regalo se queda en su icono hasta que hay sitio para el texto. El
   texto no se borra: se oculta a la vista y lo sigue leyendo el lector. */
@media (min-width:1025px) and (max-width:1599px){
  #musas-cab .elementor-widget-button .elementor-button-text{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  #musas-cab .elementor-widget-button .elementor-button-icon{margin:0}
  #musas-cab .elementor-widget-button a.elementor-button{padding:11px 13px}
}
/* Por debajo de 1.366 las 8 entradas solo caben quitando los dos iconos que en
   el movil ya van ocultos (cuenta y favoritos) y juntando un poco las entradas.
   Medido el 26-sep: a 1.280 faltaban 11 px y la fila de iconos saltaba debajo. */
@media (min-width:1025px) and (max-width:1365px){
  #musas-cab .elementor-widget-icon:has(.vamtam-theme-user),
  #musas-cab .elementor-widget-icon:has(.vamtam-theme-fav){display:none}
  .musas-cab-nav .elementor-nav-menu--main{--e-nav-menu-horizontal-menu-item-margin:calc(14px / 2)}
}
@media (min-width:1025px) and (max-width:1279px){
  #musas-cab{--padding-left:24px;--padding-right:24px}
  #musas-cab #musas-cab-logo{--width:120px}
  #musas-cab .elementor-widget-nav-menu.musas-cab-nav{margin-left:0}
  #musas-cab .elementor-widget-nav-menu.musas-cab-nav > .elementor-widget-container{margin-left:0}
  .musas-cab-nav .elementor-nav-menu--main{--e-nav-menu-horizontal-menu-item-margin:calc(10px / 2)}
  /* Los iconos, mas juntos (22 → 12 px): a 1.025 faltaban 19 px. */
  #musas-cab .e-con-inner > .e-con{column-gap:12px}
  #musas-cab > .e-con-inner{column-gap:14px}
}
/* Y en los portatiles mas estrechos, el icono de Instagram se queda para el pie y
   la cabecera del movil: a 1.025 faltaban otros 21 px. */
@media (min-width:1025px) and (max-width:1199px){
  #musas-cab .elementor-widget-icon:has(.fa-instagram){display:none}
}

/* ── Movil y tableta: el panel desplegable, estilo defelipe ────────────── */
/* Dos clases en el widget: los ajustes de Elementor salen con
   `.elementor-<id> .elementor-element.elementor-element-<id> …` (0,4,0) y una
   sola clase nuestra perderia. */
@media (max-width:1024px){
  .elementor-widget-nav-menu.musas-cab-nav .elementor-nav-menu--dropdown a.elementor-item-active{font-weight:600}
  /* Los hijos, un paso mas pequeños y metidos hacia dentro. */
  .elementor-widget-nav-menu.musas-cab-nav .elementor-nav-menu--dropdown ul.sub-menu a.elementor-sub-item{
    font-size:15px;padding-left:34px;border-left:0;
  }
  .elementor-widget-nav-menu.musas-cab-nav .elementor-nav-menu--dropdown li.musas-menu-todas > a.elementor-sub-item{font-weight:600}
  /* Filas de los hijos mas juntas (40 en vez de 50 px): con 11 marcas, la ultima
     quedaba cortada en el borde de un movil de 844 px y no se intuia que habia
     mas (Lidia, MENU-1, F01). */
  .elementor-widget-nav-menu.musas-cab-nav .elementor-nav-menu--dropdown ul.sub-menu a.elementor-sub-item{
    padding-top:10px;padding-bottom:10px;
  }
  /* La flecha de «esto se despliega», dibujada y no de la fuente de iconos del
     tema: esa fuente no carga fuera de su dominio y la flecha desaparecia, que
     era la unica pista de que Marcas y Tipos se abren (Vera, MENU-1, F-MN-03).
     › cerrada, ⌄ abierta, como el panel de defelipe. */
  .elementor-widget-nav-menu.musas-cab-nav .elementor-nav-menu--dropdown a.has-submenu .sub-arrow i,
  .elementor-widget-nav-menu.musas-cab-nav .elementor-nav-menu--dropdown a.has-submenu .sub-arrow svg{display:none}
  /* Al borde derecho, como las flechas del panel de defelipe. */
  .elementor-widget-nav-menu.musas-cab-nav .elementor-nav-menu--dropdown a.has-submenu .sub-arrow{margin-left:auto;padding-right:6px}
  .elementor-widget-nav-menu.musas-cab-nav .elementor-nav-menu--dropdown a.has-submenu .sub-arrow::before{
    content:"";display:block;width:8px;height:8px;
    border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:rotate(-45deg);transition:transform .2s ease;
  }
  .elementor-widget-nav-menu.musas-cab-nav .elementor-nav-menu--dropdown a.has-submenu.highlighted .sub-arrow::before,
  .elementor-widget-nav-menu.musas-cab-nav .elementor-nav-menu--dropdown a.has-submenu[aria-expanded="true"] .sub-arrow::before{
    transform:rotate(45deg);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Menú v2 (29-sep): «Cosmética» con las marcas y, dentro, sus tipos.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── «Cosmética», la pestaña caldera ───────────────────────────────────────
   Lo pidió Lucre en la reunión del 24-sep: que la shop de cosmética se note,
   «con el color caldera de Musas, como una pestañita», para que nadie la confunda
   con los tratamientos. #BE573A es el caldera de su marca (lo usa su propia
   cabecera); texto blanco sobre él: 4,55 de contraste (AA pide 4,5). */
.musas-cab-nav .elementor-nav-menu--main > .elementor-nav-menu > li.musas-auto-cosmetica > a.elementor-item{
  background:#BE573A;color:#fff;border-radius:999px;
  padding:6px 14px !important;margin-block:auto;text-decoration:none;
  transition:background .2s ease;
}
.musas-cab-nav .elementor-nav-menu--main > .elementor-nav-menu > li.musas-auto-cosmetica > a.elementor-item:hover,
.musas-cab-nav .elementor-nav-menu--main > .elementor-nav-menu > li.musas-auto-cosmetica > a.elementor-item.highlighted,
.musas-cab-nav .elementor-nav-menu--main > .elementor-nav-menu > li.musas-auto-cosmetica > a.elementor-item:focus-visible{
  background:#A9472D;color:#fff;text-decoration:none;
}
.musas-cab-nav .elementor-nav-menu--main > .elementor-nav-menu > li.musas-auto-cosmetica > a.elementor-item:focus-visible{
  outline:2px solid #A9472D;outline-offset:3px;
}
/* En el menú del móvil, la misma idea sin pastilla: el nombre en caldera. */
@media (max-width:1024px){
  .elementor-widget-nav-menu.musas-cab-nav .elementor-nav-menu--dropdown li.musas-auto-cosmetica > a.elementor-item{
    color:#BE573A;font-weight:600;
  }
}

/* ── El segundo panel (los tipos de cada marca), a la derecha ───────────── */
.musas-cab-nav .elementor-nav-menu--main ul.sub-menu ul.sub-menu{
  min-width:230px !important;border-radius:20px !important;
  box-shadow:0 1px 2px rgba(29,29,27,.06), 0 12px 28px rgba(29,29,27,.07);
}
/* La flecha › de las marcas que se abren, al borde derecho; el hueco del icono
   de Elementor (vacío en su cabecera) se quita, como en el primer nivel. */
.musas-cab-nav .elementor-nav-menu--main ul.sub-menu .sub-arrow{display:none}
.musas-cab-nav .elementor-nav-menu--main ul.sub-menu > li.menu-item-has-children > a.elementor-sub-item::after{
  content:"";flex:none;width:6px;height:6px;margin-left:auto;padding:0;
  border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;transform:rotate(-45deg);
}
.musas-cab-nav .elementor-nav-menu--main ul.sub-menu > li.menu-item-has-children > a.elementor-sub-item{gap:18px}

/* ── Móvil: el tercer nivel, un paso más adentro ───────────────────────── */
@media (max-width:1024px){
  .elementor-widget-nav-menu.musas-cab-nav .elementor-nav-menu--dropdown ul.sub-menu ul.sub-menu a.elementor-sub-item{
    padding-left:54px;font-size:14px;
  }
}

/* ── Arreglos de toda la web (reunión del 2-oct + MENU-2) ────────────────── */
/* La ilustración del pie medía 518 px en un móvil de 390: toda la web se movía de
   lado (Vera, V-05). */
.elementor-location-footer img{max-width:100% !important;height:auto}
.elementor-location-footer{overflow-x:clip}
/* La cabecera fija se volvía transparente al bajar y el menú negro quedaba sobre
   las fotos (Vera, V-06): fondo blanco siempre. */
.elementor-location-header .elementor-sticky--active,
.elementor-location-header .elementor-sticky--effects,
.elementor-location-header .vamtam-sticky-header,
.elementor-location-header [data-settings*="sticky"].elementor-sticky--active{background-color:#fff !important}