/* ==========================================================================
   Header - La Estación  ·  La Estación Essentials Web (Cloudari)

   Una sola línea siempre. header.js mide el espacio y añade clases de estado
   a .lesw-header; esta hoja solo describe cada estado:
     .is-compact-logo   logo compacto en lugar del completo
     .is-collapsed      menú plegado tras el botón «Menú»
     .is-toggle-icon    botón «Menú» sin texto visible (lo conserva para lectores)
     .is-cta-in-panel   el botón de compra pasa al panel desplegable
     .is-open           panel del menú plegado abierto

   Contraste (WCAG 2.1 AA) con los valores por defecto. El blanco directamente
   sobre el azul de marca #009AD8 solo da 3,18:1 (no llega al 4,5:1 del texto
   normal), así que el menú va sobre una cápsula en azul profundo #00618A:
     blanco sobre la cápsula #00618A ........... 6,83:1
     blanco sobre la cápsula en hover (#24779A)  5,02:1
     #00618A sobre la píldora blanca (actual) .. 6,83:1
     #0B2A3A sobre tarjeta/panel blanco ........ 14,93:1
     #00618A sobre hover de tarjeta #E6F4FB .... 6,08:1
     blanco sobre #D14100 (compra; y al revés) . 4,70:1
   La página actual no se marca solo con color: píldora rellena en la barra y
   un punto delante del texto en desplegables y panel.
   ========================================================================== */

.elementor-widget-lesw-header {
  width: 100%;
  max-width: 100%;
  flex: 1 1 100%;
}

.lesw-header {
  /* Tokens. Los controles del widget sobrescriben estas variables. */
  --lesw-bar-bg: var(--e-global-color-primary, #009ad8);
  --lesw-bar-h: clamp(64px, 48px + 4vw, 88px);
  --lesw-pad-x: clamp(16px, 1.8vw, 40px);
  --lesw-gap: clamp(16px, 1.5vw, 40px);

  --lesw-logo-h: clamp(30px, 2.5vw, 52px);
  --lesw-logo-compact-h: clamp(40px, 3.4vw, 56px);

  --lesw-font: "Poppins", var(--e-global-typography-primary-font-family, sans-serif), sans-serif;
  --lesw-menu-size: clamp(13px, 7.6px + 0.4vw, 15px);
  --lesw-menu-gap: 2px;
  --lesw-item-pad-x: clamp(10px, 1.6vw - 9px, 18px);
  --lesw-track-bg: #00618a;
  --lesw-track-pad: 4px;
  --lesw-menu-color: #fff;
  --lesw-item-bg-hover: rgb(255 255 255 / 0.14);
  --lesw-item-bg-active: #fff;
  --lesw-item-color-active: #00618a;

  --lesw-sub-bg: #fff;
  --lesw-sub-color: #0b2a3a;
  --lesw-sub-bg-hover: #e6f4fb;
  --lesw-sub-color-hover: #00618a;
  --lesw-sub-radius: 14px;

  --lesw-cta-color: #fff;
  --lesw-cta-bg: #d14100;
  --lesw-cta-border: var(--lesw-cta-bg);
  --lesw-cta-color-hover: var(--lesw-cta-bg);
  --lesw-cta-bg-hover: #fff;
  --lesw-cta-border-hover: var(--lesw-cta-bg);
  --lesw-cta-radius: 999px;
  --lesw-cta-icon: 1.05em;

  --lesw-toggle-bg: var(--lesw-track-bg);
  --lesw-toggle-color: #fff;
  --lesw-panel-bg: #fff;
  --lesw-panel-color: #0b2a3a;
  --lesw-panel-band: #f2f8fb;
  --lesw-divider: #e3eef4;

  --lesw-focus: #000;
  --lesw-ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;
  z-index: 100;
  width: 100%;
  font-family: var(--lesw-font);
  color: var(--lesw-menu-color);
  background: var(--lesw-bar-bg);
}

.lesw-header *,
.lesw-header *::before,
.lesw-header *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Barra: logo | menú | compra | «Menú». La columna del menú puede encogerse
   hasta 0; el script detecta cuándo el menú ya no cabe en ella.
   El HTML va en orden de foco (logo, «Menú», menú, compra) y la rejilla
   coloca cada pieza en su sitio; por eso las separaciones son márgenes y no
   column-gap, que dejaría huecos en las columnas vacías.
   -------------------------------------------------------------------------- */
/* Antes de la primera medición, nada puede desbordar la pantalla. */
.lesw-header:not(.is-ready) .lesw-header__bar {
  overflow: hidden;
}

.lesw-header__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  min-height: var(--lesw-bar-h);
  padding-inline: var(--lesw-pad-x);
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */
.lesw-header .lesw-header__brand {
  grid-row: 1;
  grid-column: 1;
  justify-self: start;
  margin-inline-end: var(--lesw-gap);
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
  border-radius: 4px;
}

.lesw-header__logo {
  display: block;
  width: auto;
  max-width: none;
  height: var(--lesw-logo-h);
  aspect-ratio: var(--lesw-ratio, auto);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.lesw-header__logo--compact {
  display: none;
  height: var(--lesw-logo-compact-h);
}

.lesw-header.is-compact-logo .lesw-header__logo--full {
  display: none;
}

.lesw-header.is-compact-logo .lesw-header__logo--compact {
  display: block;
}

/* Último recurso en pantallas diminutas: el logo encoge antes que desbordar. */
.lesw-header.is-cta-in-panel .lesw-header__logo {
  max-width: 100%;
  height: auto;
  max-height: var(--lesw-logo-h);
}

.lesw-header.is-cta-in-panel.is-compact-logo .lesw-header__logo {
  max-height: var(--lesw-logo-compact-h);
}

.lesw-header__site-name {
  font-weight: 700;
  font-size: 1.125rem;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Menú (barra)
   -------------------------------------------------------------------------- */
.lesw-header__nav {
  grid-row: 1;
  grid-column: 2;
  margin-inline-end: var(--lesw-gap);
  display: flex;
  justify-content: center;
  min-width: 0;
}

.lesw-header .lesw-menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--lesw-menu-gap);
  margin: 0;
  padding: var(--lesw-track-pad);
  list-style: none;
  background: var(--lesw-track-bg);
  border-radius: 999px;
}

.lesw-header .lesw-menu > li {
  position: relative;
  flex: none;
  margin: 0;
  padding: 0;
}

.lesw-header .lesw-menu__split {
  display: inline-flex;
  align-items: center;
}

/* Reinicio común de enlaces y botones: el tema pinta los enlaces en blanco y
   los <button> de rosa en hover/foco; aquí se fija todo de forma explícita. */
.lesw-header .lesw-menu__link,
.lesw-header .lesw-menu__caret-btn,
.lesw-header .lesw-header__toggle {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  /* Hello Elementor pone «transition: all .3s» a todos los botones; con eso el
     relleno animaría y header.js mediría anchos a mitad de transición. */
  transition: background-color 0.2s var(--lesw-ease), color 0.2s var(--lesw-ease);
}

.lesw-header .lesw-menu__link--top {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0 var(--lesw-item-pad-x);
  font-family: var(--lesw-font);
  font-size: var(--lesw-menu-size);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--lesw-menu-color);
  border-radius: 999px;
}

.lesw-header .lesw-menu__link--top:hover,
.lesw-header .lesw-menu__link--top[aria-expanded="true"],
.lesw-header .lesw-menu__split:hover,
.lesw-header .lesw-menu > li.is-open > .lesw-menu__split {
  background: var(--lesw-item-bg-hover);
  color: var(--lesw-menu-color);
}

/* Página actual (o sección que la contiene): píldora rellena. Es el indicador
   no cromático: cambia la forma, no solo el tono. */
.lesw-header .lesw-menu > li.is-current > .lesw-menu__link--top,
.lesw-header .lesw-menu > li.is-current > .lesw-menu__split {
  background: var(--lesw-item-bg-active);
  color: var(--lesw-item-color-active);
}

.lesw-header .lesw-menu > li.is-current > .lesw-menu__split .lesw-menu__link--top,
.lesw-header .lesw-menu > li.is-current > .lesw-menu__split .lesw-menu__caret-btn {
  color: var(--lesw-item-color-active);
}

.lesw-header .lesw-menu__split {
  border-radius: 999px;
  transition: background-color 0.2s var(--lesw-ease);
}

.lesw-header .lesw-menu__split .lesw-menu__link--top {
  padding-inline-end: 4px;
  background: transparent;
}

.lesw-header .lesw-menu__caret {
  flex: none;
  width: 9px;
  height: 6px;
  opacity: 0.85;
  transition: transform 0.24s var(--lesw-ease);
}

.lesw-header [aria-expanded="true"] > .lesw-menu__caret {
  transform: rotate(180deg);
}

.lesw-header .lesw-menu__caret-btn {
  display: inline-grid;
  place-items: center;
  width: 30px;
  min-height: 44px;
  padding: 0 6px 0 0;
  color: var(--lesw-menu-color);
  border-radius: 0 999px 999px 0;
}

/* --------------------------------------------------------------------------
   Submenú desplegable (barra)
   -------------------------------------------------------------------------- */
.lesw-header .lesw-submenu {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  z-index: 2;
  min-width: 240px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--lesw-sub-bg);
  border-radius: var(--lesw-sub-radius);
  box-shadow: 0 22px 44px -18px rgb(0 40 60 / 0.55), 0 2px 8px rgb(0 40 60 / 0.12);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.18s var(--lesw-ease),
    transform 0.22s var(--lesw-ease),
    visibility 0s linear 0.22s;
}

/* Puente invisible para que el puntero no pierda el submenú al bajar. */
.lesw-header .lesw-submenu::before {
  content: "";
  position: absolute;
  inset: -16px 0 auto;
  height: 16px;
}

.lesw-header .lesw-menu > li.is-flipped > .lesw-submenu {
  left: auto;
  right: 0;
}

.lesw-header .lesw-menu > li.is-open > .lesw-submenu {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity 0.18s var(--lesw-ease),
    transform 0.22s var(--lesw-ease),
    visibility 0s;
}

.lesw-header .lesw-submenu li {
  margin: 0;
  padding: 0;
}

.lesw-header .lesw-submenu .lesw-menu__link {
  display: block;
  padding: 11px 14px;
  min-height: 44px;
  font-family: var(--lesw-font);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--lesw-sub-color);
  border-radius: 10px;
}

.lesw-header .lesw-submenu .lesw-menu__link:hover,
.lesw-header .lesw-submenu .lesw-menu__link:focus-visible {
  background: var(--lesw-sub-bg-hover);
  color: var(--lesw-sub-color-hover);
}

/* Página actual en desplegables y panel: texto en azul, negrita y un punto
   delante (indicador de forma, no solo de color). */
.lesw-header .lesw-submenu .lesw-menu__link[aria-current="page"],
.lesw-header.is-collapsed .lesw-submenu .lesw-menu__link[aria-current="page"],
.lesw-header.is-collapsed .lesw-menu > li > .lesw-menu__link--top[aria-current="page"] {
  color: var(--lesw-sub-color-hover);
  font-weight: 700;
}

.lesw-header .lesw-submenu .lesw-menu__link[aria-current="page"] .lesw-menu__label::before,
.lesw-header.is-collapsed .lesw-menu__link--top[aria-current="page"] .lesw-menu__label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-end: 10px;
  vertical-align: 0.2em;
  border-radius: 50%;
  background: currentColor;
}

.lesw-header .lesw-submenu__nested {
  margin: 0;
  padding: 0 0 0 14px;
  list-style: none;
}

/* --------------------------------------------------------------------------
   Acciones: botón de compra + botón «Menú»
   -------------------------------------------------------------------------- */
.lesw-header .lesw-cta--bar {
  grid-row: 1;
  grid-column: 3;
  justify-self: end;
}

.lesw-header .lesw-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 8px clamp(12px, 1vw, 16px);
  font-family: var(--lesw-font);
  font-size: clamp(15px, 13px + 0.15vw, 16px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--lesw-cta-color);
  background: var(--lesw-cta-bg);
  border: 2px solid var(--lesw-cta-border);
  border-radius: var(--lesw-cta-radius);
  transition:
    background-color 0.2s var(--lesw-ease),
    color 0.2s var(--lesw-ease),
    border-color 0.2s var(--lesw-ease);
}

.lesw-header .lesw-cta:hover,
.lesw-header .lesw-cta:focus-visible {
  color: var(--lesw-cta-color-hover);
  background: var(--lesw-cta-bg-hover);
  border-color: var(--lesw-cta-border-hover);
}

.lesw-header .lesw-cta__icon {
  display: inline-flex;
  flex: none;
  font-size: var(--lesw-cta-icon);
  line-height: 1;
}

.lesw-header .lesw-cta__icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.lesw-header .lesw-cta__icon i {
  font-size: 1em;
}

.lesw-header .lesw-cta__text--short {
  display: none;
}

.lesw-header.is-collapsed .lesw-cta--bar .lesw-cta__text:not(.lesw-cta__text--short) {
  display: none;
}

.lesw-header.is-collapsed .lesw-cta--bar .lesw-cta__text--short {
  display: inline;
}

.lesw-header__panel-cta {
  display: none;
}

.lesw-header .lesw-header__toggle {
  grid-row: 1;
  grid-column: 4;
  margin-inline-start: 10px;
  display: none;
  align-items: center;
  gap: 10px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 16px;
  font-family: var(--lesw-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--lesw-toggle-color);
  background: var(--lesw-toggle-bg);
  border-radius: var(--lesw-cta-radius);
}

.lesw-header .lesw-header__toggle:focus:not(:focus-visible):not(:hover):not([aria-expanded="true"]) {
  background: var(--lesw-toggle-bg);
  color: var(--lesw-toggle-color);
}

.lesw-header .lesw-header__toggle:hover,
.lesw-header .lesw-header__toggle:focus-visible,
.lesw-header .lesw-header__toggle[aria-expanded="true"] {
  background: var(--lesw-toggle-color);
  color: var(--lesw-toggle-bg);
}

.lesw-burger {
  position: relative;
  display: block;
  flex: none;
  width: 20px;
  height: 14px;
}

.lesw-burger > span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.26s var(--lesw-ease), opacity 0.16s linear;
}

.lesw-burger > span:nth-child(1) { top: 0; }
.lesw-burger > span:nth-child(2) { top: 6px; }
.lesw-burger > span:nth-child(3) { top: 12px; }

.lesw-header.is-open .lesw-burger > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.lesw-header.is-open .lesw-burger > span:nth-child(2) { opacity: 0; }
.lesw-header.is-open .lesw-burger > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.lesw-header.is-toggle-icon .lesw-header__toggle {
  padding: 0;
  justify-content: center;
}

.lesw-header.is-toggle-icon .lesw-header__toggle-text,
.lesw-header .lesw-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* --------------------------------------------------------------------------
   Estado plegado: el <nav> se convierte en un panel bajo la barra.
   -------------------------------------------------------------------------- */
.lesw-header.is-collapsed .lesw-header__toggle {
  display: inline-flex;
}

.lesw-header.is-collapsed .lesw-header__nav {
  position: absolute;
  margin: 0;
  top: 100%;
  left: 0;
  right: 0;
  display: block;
  max-height: calc(100vh - var(--lesw-panel-top, var(--lesw-bar-h)));
  max-height: calc(100dvh - var(--lesw-panel-top, var(--lesw-bar-h)));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 0 20px;
  color: var(--lesw-panel-color);
  background: var(--lesw-panel-bg);
  box-shadow: 0 28px 48px -20px rgb(0 40 60 / 0.6);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.2s var(--lesw-ease),
    transform 0.26s var(--lesw-ease),
    visibility 0s linear 0.26s;
}

.lesw-header.is-collapsed.is-open .lesw-header__nav {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity 0.2s var(--lesw-ease),
    transform 0.26s var(--lesw-ease),
    visibility 0s;
}

.lesw-header.is-collapsed .lesw-menu {
  display: block;
  gap: 0;
  padding: 0;
  background: none;
  border-radius: 0;
}

.lesw-header.is-collapsed .lesw-menu > li {
  border-bottom: 1px solid var(--lesw-divider);
}

.lesw-header.is-collapsed .lesw-menu__link--top,
.lesw-header.is-collapsed .lesw-menu__split {
  display: flex;
  width: 100%;
}

.lesw-header.is-collapsed .lesw-menu__link--top {
  justify-content: space-between;
  min-height: 56px;
  padding: 0 var(--lesw-pad-x);
  font-size: 15px;
  color: var(--lesw-panel-color);
  background: transparent;
  border-radius: 0;
  text-align: left;
}

.lesw-header.is-collapsed .lesw-menu > li.is-current > .lesw-menu__link--top,
.lesw-header.is-collapsed .lesw-menu > li.is-current > .lesw-menu__split,
.lesw-header.is-collapsed .lesw-menu > li.is-open > .lesw-menu__split {
  background: transparent;
  color: var(--lesw-panel-color);
}

.lesw-header.is-collapsed .lesw-menu > li.is-current > .lesw-menu__split .lesw-menu__link--top,
.lesw-header.is-collapsed .lesw-menu > li.is-current > .lesw-menu__split .lesw-menu__caret-btn {
  color: var(--lesw-panel-color);
}

.lesw-header.is-collapsed .lesw-menu__split {
  border-radius: 0;
}

.lesw-header.is-collapsed .lesw-menu > li.is-current > .lesw-menu__link--top[aria-current="page"] {
  color: var(--lesw-sub-color-hover);
}

.lesw-header.is-collapsed .lesw-menu__split .lesw-menu__link--top {
  flex: 1;
  min-width: 0;
}

.lesw-header.is-collapsed .lesw-menu__caret-btn {
  width: 56px;
  min-height: 56px;
  color: var(--lesw-panel-color);
  padding: 0;
  border-left: 1px solid var(--lesw-divider);
  border-radius: 0;
}

.lesw-header.is-collapsed .lesw-menu__link--top:hover,
.lesw-header.is-collapsed .lesw-menu__link--top[aria-expanded="true"],
.lesw-header.is-collapsed .lesw-menu__caret-btn:hover {
  background: var(--lesw-sub-bg-hover);
  color: var(--lesw-sub-color-hover);
}

.lesw-header.is-collapsed .lesw-submenu {
  position: static;
  display: none;
  min-width: 0;
  padding: 4px 0 10px;
  background: var(--lesw-panel-band);
  border-radius: 0;
  box-shadow: none;
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: none;
}

.lesw-header.is-collapsed .lesw-submenu::before {
  content: none;
}

.lesw-header.is-collapsed .lesw-menu > li.is-open > .lesw-submenu {
  display: block;
}

.lesw-header.is-collapsed .lesw-submenu .lesw-menu__link {
  padding: 12px var(--lesw-pad-x) 12px calc(var(--lesw-pad-x) + 16px);
  font-size: 14px;
  white-space: normal;
  color: var(--lesw-panel-color);
  border-radius: 0;
}

.lesw-header.is-collapsed .lesw-submenu .lesw-menu__link:hover,
.lesw-header.is-collapsed .lesw-submenu .lesw-menu__link:focus-visible {
  background: var(--lesw-sub-bg-hover);
  color: var(--lesw-sub-color-hover);
}

.lesw-header.is-cta-in-panel .lesw-cta--bar {
  display: none;
}

.lesw-header.is-cta-in-panel .lesw-header__panel-cta {
  display: block;
  padding: 20px var(--lesw-pad-x) 0;
}

.lesw-header.is-cta-in-panel .lesw-header__panel-cta .lesw-cta {
  width: 100%;
  min-height: 52px;
}

/* --------------------------------------------------------------------------
   Foco visible (2.4.7 / 1.4.11): doble anillo negro + blanco, legible sobre
   el azul, el naranja y el gris. Coincide con el del resto del sitio.
   -------------------------------------------------------------------------- */
.lesw-header a:focus-visible,
.lesw-header button:focus-visible {
  outline: 3px solid var(--lesw-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px #fff;
}

/* Dentro del panel (que tiene scroll) un anillo exterior quedaría recortado:
   se dibuja hacia dentro. !important porque la hoja global de accesibilidad
   del sitio fija el anillo exterior con !important. */
.lesw-header.is-collapsed .lesw-menu a:focus-visible,
.lesw-header.is-collapsed .lesw-menu button:focus-visible,
.lesw-header .lesw-submenu a:focus-visible {
  outline: 3px solid var(--lesw-focus) !important;
  outline-offset: -3px !important;
  box-shadow: inset 0 0 0 6px #fff !important;
}

.lesw-header__notice {
  margin: 0;
  font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .lesw-header *,
  .lesw-header *::before,
  .lesw-header *::after {
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .lesw-header .lesw-cta,
  .lesw-header .lesw-header__toggle {
    border-color: ButtonText;
  }

  .lesw-header .lesw-submenu,
  .lesw-header.is-collapsed .lesw-header__nav {
    border: 1px solid CanvasText;
  }
}