:root {
  --exlegi-header-background-rgb: 245, 239, 225;
  --exlegi-header-scroll-shadow: 0 8px 30px rgba(31, 41, 46, 0.1);
}

.exlegi-header,
.exlegi-header-sticky-shell {
  position: sticky !important;
  top: 0;
  z-index: 9999;
  width: 100%;
}

.exlegi-header-sticky-shell {
  align-self: auto;
  overflow: visible !important;
}

/*
 * En páginas con transparencia el header debe salir del flujo para que el
 * primer hero quede realmente detrás de él. El JS añade esta clase al wrapper.
 */
.exlegi-header-sticky-shell.exlegi-header-sticky-shell--overlay {
  position: fixed !important;
  right: 0;
  left: 0;
}

.exlegi-header:is(.exlegi-header--opacity-10, .exlegi-header--opacity-20):not(.exlegi-header--uses-sticky-shell) {
  position: fixed !important;
  right: 0;
  left: 0;
}

.exlegi-header {
  isolation: isolate;
  transition:
    background-color 0.28s ease,
    box-shadow 0.28s ease,
    backdrop-filter 0.28s ease,
    -webkit-backdrop-filter 0.28s ease;
}

.exlegi-header .elementor-widget-image img,
.exlegi-header .exlegi-menu .ekit-menu-nav-link,
.exlegi-header .elementskit-menu-hamburger,
.exlegi-header .elementskit-menu-hamburger svg {
  transition: color 0.28s ease, filter 0.28s ease, fill 0.28s ease;
}

/* El JS usa el wrapper de Theme Builder o ElementsKit cuando existe. */
.exlegi-header.exlegi-header--uses-sticky-shell {
  position: relative !important;
  top: auto;
}

body.admin-bar :is(.exlegi-header, .exlegi-header-sticky-shell) {
  top: 32px;
}

body.admin-bar .exlegi-header.exlegi-header--uses-sticky-shell {
  top: auto;
}

/*
 * Los modificadores se añaden por JavaScript cuando la página contiene
 * exlegi-header-opacity-10 o exlegi-header-opacity-20.
 * Solo cambia el fondo; logo, menú y botones permanecen al 100 %.
 */
.exlegi-header.exlegi-header--opacity-10:not(.is-scrolled):not(.is-interacting):not(:hover):not(:focus-within) {
  background-color: rgba(var(--exlegi-header-background-rgb), 0.1) !important;
  box-shadow: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.exlegi-header.exlegi-header--opacity-20:not(.is-scrolled):not(.is-interacting):not(:hover):not(:focus-within) {
  background-color: rgba(var(--exlegi-header-background-rgb), 0.2) !important;
  box-shadow: none;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* Contraste sobre el hero durante el estado translúcido inicial. */
.exlegi-header:is(.exlegi-header--opacity-10, .exlegi-header--opacity-20):not(.is-scrolled):not(.is-interacting):not(:hover):not(:focus-within) .elementor-widget-image img {
  filter: brightness(0) invert(1);
}

.exlegi-header:is(.exlegi-header--opacity-10, .exlegi-header--opacity-20):not(.is-scrolled):not(.is-interacting):not(:hover):not(:focus-within) .exlegi-menu .ekit-menu-nav-link,
.exlegi-header:is(.exlegi-header--opacity-10, .exlegi-header--opacity-20):not(.is-scrolled):not(.is-interacting):not(:hover):not(:focus-within) .exlegi-menu .ekit-menu-nav-link.active,
.exlegi-header:is(.exlegi-header--opacity-10, .exlegi-header--opacity-20):not(.is-scrolled):not(.is-interacting):not(:hover):not(:focus-within) .elementskit-menu-hamburger,
.exlegi-header:is(.exlegi-header--opacity-10, .exlegi-header--opacity-20):not(.is-scrolled):not(.is-interacting):not(:hover):not(:focus-within) .elementskit-menu-hamburger svg {
  color: #fff !important;
  fill: #fff !important;
}

.exlegi-header.exlegi-header--opacity-10:is(.is-scrolled, .is-interacting, :hover, :focus-within),
.exlegi-header.exlegi-header--opacity-20:is(.is-scrolled, .is-interacting, :hover, :focus-within) {
  background-color: rgb(var(--exlegi-header-background-rgb)) !important;
  box-shadow: var(--exlegi-header-scroll-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.exlegi-header:is(.exlegi-header--opacity-10, .exlegi-header--opacity-20):is(.is-scrolled, .is-interacting, :hover, :focus-within) .elementor-widget-image img {
  filter: none;
}

@media (max-width: 782px) {
  body.admin-bar :is(.exlegi-header, .exlegi-header-sticky-shell) {
    top: 46px;
  }

  body.admin-bar .exlegi-header.exlegi-header--uses-sticky-shell {
    top: auto;
  }
}

@media (max-width: 600px) {
  body.admin-bar :is(.exlegi-header, .exlegi-header-sticky-shell) {
    top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .exlegi-header {
    transition: none;
  }
}