/**
 * Nav compartido de los carruseles: flechas + pasos de progreso.
 * Lo usan el acordeon de servicios y el carrusel de industrias.
 */

/* ---------------------------------------------------------------
   Hello Elementor (reset.css) pinta TODOS los <button>:
     button { border:1px solid #c36; color:#c36 }
     button:hover, button:focus { background:#c36; color:#fff }
   El #c36 es fucsia. Ojo con :focus, no solo :hover: al hacer click con el
   mouse el boton queda enfocado y se pinta igual.
   --------------------------------------------------------------- */

.scala-nav button,
.scala-nav button:hover,
.scala-nav button:focus,
.scala-nav button:active {
  border: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  text-decoration: none;
}

.scala-nav {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* El SVG del diseno ya trae el circulo y sus colores: el boton no lleva fondo
   propio. Sin cambio al pasar el mouse, por pedido del cliente. */
.scala-nav .scala-nav__flecha,
.scala-nav .scala-nav__flecha:hover,
.scala-nav .scala-nav__flecha:focus,
.scala-nav .scala-nav__flecha:active {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.scala-nav .scala-nav__flecha svg { width: 32px; height: 32px; display: block; }

.scala-nav__pasos { display: flex; align-items: center; gap: 8px; }

/* El reset del tema declara button{display:inline-block}, y eso pisa el
   [hidden]{display:none} del navegador: sin esta regla los pasos que el JS
   oculta (paginas que no existen) se seguirian viendo. */
.scala-nav .scala-nav__paso[hidden] { display: none; }

.scala-nav .scala-nav__paso,
.scala-nav .scala-nav__paso:hover,
.scala-nav .scala-nav__paso:focus,
.scala-nav .scala-nav__paso:active {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  cursor: pointer;
  background: var(--e-global-color-borgonas_light_active, #D1BBCB);
  transition: width .9s cubic-bezier(.16, 1, .3, 1), background .5s ease;
}

.scala-nav .scala-nav__paso.is-activo,
.scala-nav .scala-nav__paso.is-activo:hover,
.scala-nav .scala-nav__paso.is-activo:focus {
  width: 68px;
  background: var(--e-global-color-primary, #692556);
}

/* Foco visible solo por teclado. */
.scala-nav .scala-nav__flecha:focus-visible,
.scala-nav .scala-nav__paso:focus-visible {
  outline: 2px solid var(--e-global-color-primary, #692556);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .scala-nav .scala-nav__paso { transition: none; }
}

/* ---------- panel desplegable de Servicios ----------
   El panel vive DENTRO de la capsula del header, como ultima linea de esa fila
   flex. No va posicionado en absoluto ni con fondo propio: cuando se abre, la
   capsula crece y el header entero se expande hacia abajo, que es lo que pide
   el diseno. Cerrado no se muestra, asi que el header conserva su altura.

   Se abre al pasar el cursor por el item "Servicios" y se queda mientras el
   cursor este sobre el panel: eso lo hace :has(), sin JS. Con el teclado abre
   al enfocar ese item.

   El item se identifica por .menu-item-has-children, la clase que pone
   WordPress en el que tiene submenu. Si "Servicios" deja de tener hijos, hay
   que cambiar este selector por su id de item. */

/* ---------- el panel es la tarjeta ----------
   Cerrado, el header es la pastilla de siempre (fondo, sombra y radio de la
   capsula). Abierto, la tarjeta la dibuja EL PANEL: se extiende desde el borde
   superior del header hacia abajo, con un solo radio y una sola sombra, y la
   capsula se vuelve transparente y sin sombra. Asi no hay dos cajas que unir
   —ni costuras, ni esquinas que aparezcan, ni bordes que ocultar— y el
   contenido del header (logo, menu, botones) queda sobre esa tarjeta.

   El panel arranca en top:0 y su relleno superior salta el alto de la capsula,
   que publica header.js en --scala-capsula: ese alto cambia con el ancho de la
   ventana y no se puede fijar aqui.

   Va en posicion ABSOLUTA y DETRAS de la capsula (z-index menor, y por eso
   tiene que ser hermano y no hijo: el fondo de un contenedor se pinta siempre
   por debajo de sus descendientes). Absoluto para que el header no cambie de
   alto: dentro del flujo empujaba la pagina y el scroll saltaba al bajar a
   elegir un servicio.

   Nota de especificidad: esta hoja se encola ANTES que frontend.css de
   Elementor, que declara .e-con{position:var(--position);width:var(--width)}
   con la misma especificidad. De ahi el prefijo body + .elementor-element. */

body .elementor-element.scala-mega {
  position: absolute;
  /* Arranca donde arranca la capsula (lo publica header.js): la caja contra la
     que se posiciona incluye el relleno superior de la barra, asi que con 0 la
     tarjeta quedaba pegada al navegador. */
  top: var(--scala-capsula-top, 0px);
  /* 24px a cada lado: la capsula mide calc(100% - 48px) centrada dentro de la
     misma caja, asi que el panel calza exactamente con ella. */
  left: 24px;
  right: 24px;
  z-index: 1;
  width: auto !important;
  overflow: hidden;
  /* Cerrado mide justo el alto de la capsula y no se ve: sin fondo ni sombra.
     Empezar en ese alto (y no en 0) evita que al abrir el nav se quede un
     instante sin tarjeta debajo. */
  max-height: var(--scala-capsula, 0px);
  border-radius: 24px;
  /* Transicion del CIERRE (la de apertura esta en la regla del estado
     abierto). Solo el alto: animar el relleno hacia que el bloque de color
     perdiera sus margenes y se viera un cuadrado sobrepuesto. */
  /* La sombra va en el panel y NO en el pseudo-elemento de la tarjeta: el
     panel tiene overflow:hidden (lo necesita para recortar el alto) y ahi la
     sombra del pseudo quedaba recortada, con lo que la tarjeta se veia sin
     borde. La del elemento propio no se recorta. Se desvanece con transicion
     para que no quede una banda gris cuando esta cerrado. */
  box-shadow: none;
  /* La sombra no se desvanece en paralelo al recogido: se apaga de golpe
     cuando el alto ya llego a 0 (de ahi el retardo, que debe coincidir con la
     duracion del cierre). Desvaneciendola se veia desaparecer la tarjeta antes
     que el texto. */
  transition: max-height 1.2s cubic-bezier(.4, 0, .2, 1), box-shadow 0s linear 1.2s;
}

/* El fondo de la tarjeta se pinta en un pseudo-elemento y se desvanece.
   Estaba como fondo del propio panel dentro del estado abierto, y ese estado
   se quita al EMPEZAR a cerrar: la tarjeta desaparecia de golpe y el texto se
   recogia despues, sin fondo. Ahora el desvanecido acompaña al recogido.
   No puede ir como fondo del panel siempre: cerrado, el panel mide el alto de
   la capsula y sus esquinas de 24px asomarian por fuera de la pastilla. */
body .elementor-element.scala-mega::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: var(--e-global-color-lino_claro_light, #FEFEFD);
  opacity: 0;
  /* Igual que la sombra: el fondo se mantiene durante todo el recogido y se
     apaga recien al final, cuando ya no se ve. Asi tarjeta y texto se van
     juntos. */
  transition: opacity 0s linear 1.2s;
  pointer-events: none;
}

body.scala-mega-abierto .scala-mega::after {
  opacity: 1;
  transition: opacity 0s;
}

body.scala-mega-abierto .scala-mega {
  /* Apertura lenta, creciendo hacia abajo; la sombra entra de inmediato.
     El techo suma el alto de la capsula (el panel empieza en el borde superior
     del header) MAS el contenido: si queda corto, el bloque del servicio se ve
     cortado por abajo.
     La curva es de entrada y salida suaves (.4,0,.2,1): la anterior
     (.16,1,.3,1) arrancaba de golpe y frenaba largo, y esa salida brusca era
     lo que se notaba al bajar. */
  transition: max-height 1.8s cubic-bezier(.4, 0, .2, 1), box-shadow 0s;
  max-height: calc(var(--scala-capsula, 68px) + 460px);
  /* Sombra despegada hacia abajo y mas suave que la de la capsula: centrada y
     al 50% de opacidad se derramaba hacia arriba y oscurecia el aire entre el
     navegador y el header. */
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}

/* La capsula: por encima del panel, y mientras el panel esta desplegado (o
   recogiendose) sin fondo ni sombra, porque la tarjeta ya la pinta el panel.
   Su radio NO cambia nunca: al ser transparente, deja de verse. */
body .elementor-element.elementor-element-bd9777b {
  position: relative;
  z-index: 2;
}

body.scala-mega-abierto .elementor-element.elementor-element-bd9777b,
body.scala-mega-cerrando .elementor-element.elementor-element-bd9777b {
  background-color: transparent;
  box-shadow: none;
  transition: none;
}

/* El ancla del panel es la CAJA INTERIOR de la barra flotante. La barra es un
   contenedor "boxed" y ya viene con position:relative de Elementor, asi que
   sin esta regla el absoluto se calculaba contra la barra completa y el panel
   salia a ancho de pantalla. */
body .elementor-element.elementor-element-dc35efc > .e-con-inner {
  position: relative;
}

/* Se abre solo al pasar por "Servicios": el estado lo pone header.js en el
   <body>. Con :has(:hover) el panel se cerraba en el salto del cursor entre el
   enlace y el panel; el JS agrega un margen de gracia. */

/* ---------- header en pantallas intermedias ----------
   Entre el ancho completo y el punto en que el menu pasa a hamburguesa, el
   menu, el boton y el selector de idioma no caben juntos: la zona de acciones
   se encogia por debajo de su contenido y el "ES" terminaba montado sobre el
   boton. Se le prohibe encogerse a las acciones y se le da holgura al menu,
   que es el que tiene margenes de sobra. */
@media (max-width: 1280px) {
  body .elementor-element.scala-header-actions {
    flex-shrink: 0;
  }

  body .elementor-element.scala-header-nav {
    min-width: 0;
  }

  body .elementor-element.scala-header-nav .elementor-nav-menu > li > a {
    padding-inline: 10px;
    font-size: 14px;
  }

  body .elementor-element.scala-header-actions .elementor-button {
    padding: 12px 18px;
  }
}

/* Por debajo de 1200px el menu ya no cabe junto al logo, el boton y el idioma:
   pasa a hamburguesa, que es el mismo mecanismo que usa Elementor en movil (el
   boton y el desplegable ya estan en el marcado; aqui solo se cambia cual se
   ve). Apretar tipografias no alcanzaba: el ancho del menu lo fija Elementor
   por elemento y gana a cualquier regla de esta hoja. */
@media (max-width: 1200px) {
  body .elementor-element.scala-header-nav .elementor-nav-menu--main {
    display: none;
  }

  body .elementor-element.scala-header-nav .elementor-menu-toggle {
    display: flex;
  }

  /* El panel de Servicios es de escritorio: en hamburguesa manda el
     desplegable del menu. */
  body .elementor-element.scala-mega {
    display: none;
  }
}

/* El submenu nativo de WordPress sobra: su contenido vive en el panel. El
   selector se limita a la navegacion principal para no tocar el de idiomas. */
.scala-header-nav .elementor-nav-menu .sub-menu {
  display: none !important;
}

/* El respiro del panel vive aqui y no en el contenedor: el contenedor es la
   caja que se anima, y cualquier relleno suyo se sumaria al alto del header
   cerrado o tendria que animarse (con el efecto de cuadrado sobrepuesto). Los
   30px laterales son el mismo relleno de la capsula, para que la lista alinee
   con el logo y el menu. */
body .elementor-element.scala-mega__tabs {
  /* Salta el alto de la capsula (lo publica header.js) y deja 14px de aire.
     El relleno vive aqui y no en el panel porque el panel es la caja que se
     anima: cualquier relleno suyo tendria que animarse tambien. */
  padding: calc(var(--scala-capsula, 68px) + 14px) 30px 20px !important;
}

/* Los fondos de las pestañas se apagan por variable, que es como los aplica el
   widget (--n-tabs-title-background-color*). Poner background en la pestaña no
   alcanza: el estado activo lo pinta otra regla propia del widget. */
body .elementor-element.scala-mega__tabs {
  --n-tabs-title-background-color: transparent;
  --n-tabs-title-background-color-hover: transparent;
  --n-tabs-title-background-color-active: transparent;
}

/* Lista de servicios: texto plano, sin cajas. El widget pinta un fondo gris y
   un radio en cada pestaña, y el diseno no los lleva. */
/* body + .elementor-element por especificidad: el widget escribe el fondo de
   cada pestaña con (0,3,0) y la clase sola perdia. */
body .elementor-element.scala-mega__tabs .e-n-tab-title {
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: none;
  font-family: var(--e-global-typography-s_b-font-family, Inter), sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #250D1E;
  text-align: left;
}

/* La flecha del diseño (SVG de la mediateca). Va como mascara y no como
   imagen para que tome el color del texto de la pestaña. La url llega en
   --scala-flecha, que imprime cpt-servicio.php; si faltara, queda la flecha
   tipografica de respaldo. */
body .elementor-element.scala-mega__tabs .e-n-tab-title::after {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 10px;
  background-color: currentColor;
  -webkit-mask: var(--scala-flecha) no-repeat center / contain;
  mask: var(--scala-flecha) no-repeat center / contain;
  opacity: 0;
  transition: opacity .15s ease;
}

body .elementor-element.scala-mega__tabs .e-n-tab-title[aria-selected="true"]::after,
body .elementor-element.scala-mega__tabs .e-n-tab-title:hover::after {
  opacity: 1;
}

body .elementor-element.scala-mega__tabs .e-n-tab-title[aria-selected="true"],
body .elementor-element.scala-mega__tabs .e-n-tab-title:hover {
  background-color: transparent;
  background-image: none;
  color: #250D1E;
}

/* En movil el panel no aplica: ahi manda el menu desplegable del header. */
@media (max-width: 1024px) {
  .scala-mega {
    display: none;
  }
}

/* Boton "Explorar servicio" del panel: es un enlace, no una pieza con fondo.
   La clase del boton va repetida a proposito: el documento escribe su fondo y
   su tipografia con .elementor-40 .elementor-element.elementor-element-XXX
   .elementor-button, que son cuatro clases; repetirla sube esta regla a cinco.
   El hover entra en el mismo selector porque el documento tambien lo pinta. */
body .elementor-element.scala-mega__boton .elementor-button.elementor-button,
body .elementor-element.scala-mega__boton .elementor-button.elementor-button:hover {
  background-color: transparent;
  background-image: none;
  padding: 0;
  font-family: var(--e-global-typography-text-font-family, Inter), sans-serif;
  font-size: 16px;
  font-weight: 700;
}

/* Textos del panel. La clase va repetida para ganarle al documento del header,
   que escribe la tipografia de cada widget con cuatro clases. El color no va
   aqui: lo pone cpt-servicio.php con el "Color del texto" de cada servicio. */
body .elementor-element.scala-mega__antetitulo .elementor-heading-title.elementor-heading-title {
  font-family: var(--e-global-typography-text-font-family, Inter), sans-serif;
  font-size: 15px;
  font-weight: 400;
}

body .elementor-element.scala-mega__titulo .elementor-heading-title.elementor-heading-title {
  font-family: var(--e-global-typography-primary-font-family, "Playfair Display"), serif;
  font-size: 20px;
  font-weight: 700;
}

body .elementor-element.scala-mega__texto.scala-mega__texto {
  font-family: var(--e-global-typography-text-font-family, Inter), sans-serif;
  font-size: 16px;
  font-weight: 400;
  --width: 50%;
  width: 50%;
}

/* Bajo 1200 el menu principal se cambia por el boton de hamburguesa, pero la
   zona de navegacion conservaba el ancho del menu y, sumada al logo y a las
   acciones, sacaba la capsula de la pantalla (777px de contenido en 768 de
   viewport). Aqui la zona se ajusta a su contenido y la capsula aprieta su
   padding y su separacion. */
@media (max-width: 1200px) {
  body .elementor-element.scala-header-nav {
    --width: auto;
    width: auto;
    --padding-left: 0px;
    --padding-right: 0px;
  }

  body .elementor-element.scala-header-nav .elementor-widget-nav-menu {
    width: auto;
  }

  body .elementor-element.elementor-element-bd9777b {
    --padding-left: 16px;
    --padding-right: 16px;
    --gap: 12px;
    --column-gap: 12px;
  }
}

/* =========================================================================
   MENU MOVIL (<= 767px) — la capsula se convierte en la tarjeta del diseño
   =========================================================================
   El desplegable de Elementor ya cuelga del widget del menu, dentro de la zona
   de navegacion (la de la izquierda). Para que ocupe el ancho completo de la
   tarjeta y quede DEBAJO de la fila superior, las zonas de navegacion y de
   acciones se disuelven con display:contents: sus hijos —boton hamburguesa,
   desplegable, CTA y selector de idioma— pasan a ser hijos directos de la
   capsula y se ordenan con `order`, con la capsula envolviendo lineas.

   Asi la tarjeta es UNA sola caja (la capsula) y no hay que unir dos cajas ni
   medir alturas con JS, como si hace el panel de escritorio.

   Orden resultante: hamburguesa | logo | ES  /  lista  /  CTA

   OJO con el selector: .elementor-nav-menu--dropdown NO identifica al panel.
   SmartMenus le pone esa misma clase a cada <ul class="sub-menu"> del menu de
   escritorio, asi que las reglas se colaban en el submenu equivocado (que esta
   oculto) y el panel se quedaba sin estilos. El panel es el <nav>:
   nav.elementor-nav-menu__container.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* La clase del widget va repetida a proposito: Elementor declara
     .elementor-widget-nav-menu:not(:has(.elementor-widget-container)):not([class*=elementor-hidden-])
     {display:flex;flex-direction:column} — tres clases. Sin repetir, el widget
     seguia siendo una columna flex y el desplegable era hijo suyo, no de la
     capsula: la lista salia ARRIBA del logo y los `order` no servian de nada. */
  body .elementor-element.scala-header-nav,
  body .elementor-element.scala-header-actions,
  body .scala-header-nav .elementor-widget-nav-menu.elementor-widget-nav-menu,
  body .scala-header-nav .elementor-widget-nav-menu > .elementor-widget-container {
    display: contents;
  }

  /* align-content: el panel cerrado sigue siendo un hijo de 100% de ancho (mide
     0 de alto, pero ocupa su propia linea). Sin centrar las LINEAS, la fila del
     logo se apoyaba arriba y el contenido quedaba descentrado en la pastilla. */
  body .elementor-element.elementor-element-bd9777b {
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    /* La separacion entre lineas va por la variable: Elementor escribe
       row-gap:var(--row-gap) por elemento y le gana a un row-gap suelto. Con
       el menu cerrado el panel mide 0, pero su linea seguia sumando el gap y
       la fila del logo quedaba 9px por encima del centro de la pastilla. */
    --row-gap: 0px;
    row-gap: 0;
    /* Un solo radio para los dos estados. La pastilla de 100px se recorta sola
       a la mitad del alto mientras el header esta cerrado, pero al crecer la
       tarjeta ese tope desaparece y las esquinas se abren hasta 100px durante
       toda la animacion: el radio parecia inflarse. Con un valor fijo no hay
       nada que animar y la apertura queda limpia. */
    border-radius: 30px;
    transition: padding .5s ease;
  }

  body .scala-header-nav .elementor-menu-toggle { order: 1; }
  body .elementor-element.scala-header-logo     { order: 2; }
  body .scala-header-actions .elementor-widget-nav-menu { order: 3; }
  body .scala-header-nav nav.elementor-nav-menu__container { order: 4; }
  body .elementor-element.scala-header-cta      { order: 5; }

  /* Cerrado: ni lista ni CTA. El CTA con texto no cabe en la capsula. */
  body .elementor-element.scala-header-cta { display: none; }

  /* Abierto: la pastilla pasa a tarjeta. El estado lo da el propio boton de
     Elementor (aria-expanded), sin JS ni clases nuevas. */
  body .elementor-element.elementor-element-bd9777b:has( .scala-header-nav .elementor-menu-toggle.elementor-active ) {
    padding: 14px 18px 18px;
    --row-gap: 6px;
    row-gap: 6px;
  }

  body .elementor-element.elementor-element-bd9777b:has( .scala-header-nav .elementor-menu-toggle.elementor-active ) .scala-header-cta {
    display: block;
    width: 100%;
  }

  body .elementor-element.scala-header-cta .elementor-button {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 18px 24px;
  }

  /* ---------- el panel ----------
     El widget trae "estirar a ancho completo", que lo pone en absoluto; aqui
     tiene que ocupar su linea dentro de la capsula. */
  body .scala-header-nav nav.elementor-nav-menu__container {
    position: static;
    width: 100%;
    flex: 0 0 100%;
    background: transparent;
    /* Elementor abre el desplegable en .3s con max-height MAS un scaleY, que a
       velocidad lenta se nota como un estiramiento del texto. Aqui el escalado
       se anula y queda solo el recorte de alto, con la curva suave de entrada
       y salida del panel de escritorio.

       El techo (--menu-height) lo pone Elementor en 100vh: como el contenido
       mide bastante menos, la animacion terminaba mucho antes de su duracion
       declarada y se percibia brusca. Un techo cercano al contenido hace que
       el tiempo sea el real. Si se agregan entradas al menu, subirlo. */
    --menu-height: 560px;
    opacity: 0;
    transform: none;
    transition:
      max-height 1.1s cubic-bezier(.4, 0, .2, 1),
      opacity .35s ease;
  }

  body .elementor-element.elementor-element-bd9777b:has( .scala-header-nav .elementor-menu-toggle.elementor-active ) nav.elementor-nav-menu__container {
    opacity: 1;
    transform: none;
    transition:
      max-height 1.1s cubic-bezier(.4, 0, .2, 1),
      opacity .5s ease .25s;
  }

  /* El CTA acompaña a la lista: sin esto aparecia de golpe al final. */
  body .elementor-element.scala-header-cta {
    opacity: 0;
    transition: opacity .5s ease;
  }

  body .elementor-element.elementor-element-bd9777b:has( .scala-header-nav .elementor-menu-toggle.elementor-active ) .scala-header-cta {
    opacity: 1;
    transition: opacity .5s ease .45s;
  }

  @media (prefers-reduced-motion: reduce) {
    body .scala-header-nav nav.elementor-nav-menu__container,
    body .elementor-element.scala-header-cta,
    body .elementor-element.elementor-element-bd9777b {
      transition: none;
    }
  }

  /* El boton de la hamburguesa/X viene con fondo gris propio de Elementor. */
  body .scala-header-nav .elementor-menu-toggle,
  body .scala-header-nav .elementor-menu-toggle:hover,
  body .scala-header-nav .elementor-menu-toggle:focus {
    background: transparent;
    padding: 0;
  }

  body .scala-header-nav nav.elementor-nav-menu__container a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 2px;
    background: transparent;
    font-family: var(--e-global-typography-text-font-family, Inter), sans-serif;
    font-size: 17px;
    color: var(--e-global-color-text, #250D1E);
  }

  /* Flecha del diseño (la misma mascara del panel de escritorio).
     La flecha se dibuja en el ::after del enlace, el mismo pseudo que usan los
     "pointers" de Elementor (subrayados animados): hay que devolverlo al flujo
     y a opacidad 1, porque el pointer lo deja absoluto y transparente. */
  /* La clase va repetida para ganarle a la regla del pointer, que apaga ese
     pseudo con cinco clases
     (.elementor-item:not(:hover):not(:focus):not(.elementor-item-active):not(.highlighted):after).
     Sin esto, los enlaces de primer nivel se quedaban sin flecha. */
  body .scala-header-nav nav.elementor-nav-menu__container a.elementor-item.elementor-item.elementor-item::after,
  body .scala-header-nav nav.elementor-nav-menu__container a::after {
    content: "";
    position: static;
    opacity: 1;
    transform: none;
    transition: none;
    flex: 0 0 auto;
    width: 16px;
    height: 12px;
    background-color: currentColor;
    -webkit-mask: var(--scala-flecha) no-repeat center / contain;
    mask: var(--scala-flecha) no-repeat center / contain;
  }

  /* Sin realce rosa. El fondo lo pinta el widget en :hover y en la pagina
     actual (color_dropdown_item_hover / background_color_dropdown_item_hover,
     mas la regla propia de Elementor para .elementor-item-active), y el diseño
     lista todo en el mismo tono. Clases repetidas para ganarle al documento,
     que escribe esos fondos con cuatro clases. */
  body .scala-header-nav nav.elementor-nav-menu__container a.elementor-item.elementor-item,
  body .scala-header-nav nav.elementor-nav-menu__container a.elementor-item.elementor-item:hover,
  body .scala-header-nav nav.elementor-nav-menu__container a.elementor-item.elementor-item:focus,
  body .scala-header-nav nav.elementor-nav-menu__container a.elementor-item.elementor-item.elementor-item-active,
  body .scala-header-nav nav.elementor-nav-menu__container a.elementor-sub-item.elementor-sub-item,
  body .scala-header-nav nav.elementor-nav-menu__container a.elementor-sub-item.elementor-sub-item:hover,
  body .scala-header-nav nav.elementor-nav-menu__container a.elementor-sub-item.elementor-sub-item:focus,
  body .scala-header-nav nav.elementor-nav-menu__container a.elementor-sub-item.elementor-sub-item.elementor-item-active {
    background-color: transparent;
    background-image: none;
    color: var(--e-global-color-text, #250D1E);
  }

  /* Separador entre las entradas de primer nivel (no entre los servicios). */
  body .scala-header-nav nav.elementor-nav-menu__container > ul > li + li > a.elementor-item {
    border-top: 1px solid var(--e-global-color-lino_claro_normal_active, #E7E3DE);
  }

  /* "Servicios" es un rotulo de seccion, no un destino: ni flecha, ni
     separador, ni el chevron del submenu. El submenu nativo, que en escritorio
     esta oculto, aqui es la lista. */
  body .scala-header-nav nav.elementor-nav-menu__container > ul > li.menu-item-has-children > a.elementor-item {
    padding: 4px 2px 6px;
    font-size: 13px;
    color: var(--e-global-color-text, #250D1E);
    opacity: .55;
    pointer-events: none;
  }

  body .scala-header-nav nav.elementor-nav-menu__container > ul > li.menu-item-has-children > a.elementor-item::after,
  body .scala-header-nav nav.elementor-nav-menu__container .sub-arrow {
    display: none;
  }

  body .scala-header-nav nav.elementor-nav-menu__container .sub-menu {
    display: block !important; /* la regla de escritorio lo oculta */
    padding: 0;
    position: static;
    width: auto;
  }

  body .scala-header-nav nav.elementor-nav-menu__container .sub-menu li { position: relative; }

  body .scala-header-nav nav.elementor-nav-menu__container .sub-menu a {
    padding: 13px 2px 13px 22px;
    border: 0;
    font-weight: 500;
    font-size: 16px;
  }

  /* El punto de color de cada servicio. El color lo escribe cpt-servicio.php
     desde el CPT (nth-child), asi que sigue saliendo del contenido. */
  body .scala-header-nav nav.elementor-nav-menu__container .sub-menu a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -4px;
    width: 9px;
    height: 9px;
    border-radius: 99px;
    background: var(--scala-punto, var(--e-global-color-primary, #692556));
  }

  /* Ultima linea antes del CTA. */
  body .scala-header-nav nav.elementor-nav-menu__container > ul > li:last-child > a.elementor-item {
    padding-bottom: 20px;
  }
}

/* ---------- selector de idioma (Weglot) ----------
   El submenu es el nativo del widget Nav Menu: SmartMenus lo abre poniendo
   display y left/min-width en linea, de ahi los !important. Se dibuja como
   una tarjeta chica centrada bajo "ES", con la misma sombra de la capsula. */
body .scala-header-actions .menu-item-weglot > a .sub-arrow svg {
  transition: transform .25s ease;
}

body .scala-header-actions .menu-item-weglot > a.highlighted .sub-arrow svg {
  transform: rotate(180deg);
}

body .scala-header-actions .menu-item-weglot > .sub-menu {
  left: 50% !important;
  min-width: 0 !important;
  margin-top: 10px !important;
  padding: 6px;
  border-radius: 14px;
  background: var(--e-global-color-lino_claro_light, #FEFEFD);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  transform: translateX(-50%);
  animation: scala-idioma-abrir .2s ease;
}

body .scala-header-actions .menu-item-weglot > .sub-menu a.elementor-sub-item,
body .scala-header-actions .menu-item-weglot > .sub-menu a.elementor-sub-item:focus {
  justify-content: center;
  padding: 8px 18px;
  border-radius: 10px;
  font-weight: 500;
  color: var(--e-global-color-primary, #692556);
  background: transparent;
}

body .scala-header-actions .menu-item-weglot > .sub-menu a.elementor-sub-item:hover {
  color: var(--e-global-color-primary, #692556);
  background: var(--e-global-color-borgonas_light, #F0E9EE);
}

body .scala-header-actions .menu-item-weglot > .sub-menu a.elementor-sub-item:focus-visible {
  outline: 2px solid var(--e-global-color-primary, #692556);
  outline-offset: 2px;
}

@keyframes scala-idioma-abrir {
  from { opacity: 0; transform: translate(-50%, -4px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  body .scala-header-actions .menu-item-weglot > .sub-menu { animation: none; }
}