/* =================================================
   POGALUA · HEADER DROPDOWNS
   Versión final refinada
================================================= */

:root {
  --poga-header-text: #4a4a4a;
  --poga-header-accent: #7b4eff;

  --poga-dropdown-bg: rgba(255, 255, 255, 0.82);
  --poga-dropdown-border: rgba(123, 78, 255, 0.12);
  --poga-dropdown-shadow:
    0 16px 34px rgba(109, 76, 182, 0.10),
    0 4px 12px rgba(0, 0, 0, 0.04);

  --poga-dropdown-radius: 24px;
  --poga-item-radius: 18px;

  --poga-hover-1: rgba(223, 208, 255, 0.35);
  --poga-hover-2: rgba(255, 232, 241, 0.22);
  --poga-hover-3: rgba(248, 239, 210, 0.24);
  --poga-hover-4: rgba(226, 246, 241, 0.26);
}

/* ================================================
   [1] LI PADRE DEL MENÚ
================================================ */
.header-navigation .header-menu-container > ul > li,
.kadence-navigation .menu > li {
  position: relative;
}

/* ================================================
   [2] LINKS DEL MENÚ PRINCIPAL
================================================ */
.header-navigation .header-menu-container > ul > li > a,
.kadence-navigation .menu > li > a {
  color: var(--poga-header-text) !important;
  transition: color 0.18s ease !important;
}

.header-navigation .header-menu-container > ul > li:hover > a,
.header-navigation .header-menu-container > ul > li.current-menu-item > a,
.header-navigation .header-menu-container > ul > li.current-menu-ancestor > a,
.kadence-navigation .menu > li:hover > a,
.kadence-navigation .menu > li.current-menu-item > a,
.kadence-navigation .menu > li.current-menu-ancestor > a {
  color: var(--poga-header-accent) !important;
}

/* Flechas */
.header-navigation .dropdown-nav-toggle,
.header-navigation .kadence-svg-iconset,
.kadence-navigation .dropdown-nav-toggle,
.kadence-navigation .kadence-svg-iconset {
  color: inherit !important;
}

/* ================================================
   [3] PUENTE INVISIBLE ENTRE PADRE Y DROPDOWN
================================================ */
.header-navigation .header-menu-container > ul > li.menu-item-has-children::after,
.kadence-navigation .menu > li.menu-item-has-children::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 18px;
  background: transparent;
}

/* ================================================
   [4] CONTENEDOR DROPDOWN
================================================ */
.header-navigation .sub-menu,
.header-navigation .sub-menu .sub-menu,
.kadence-navigation ul ul,
.kadence-navigation ul ul.sub-menu {
  background: var(--poga-dropdown-bg) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--poga-dropdown-border) !important;
  border-radius: var(--poga-dropdown-radius) !important;
  box-shadow: var(--poga-dropdown-shadow) !important;
  padding: 10px !important;
  overflow: hidden;

  /* ancho adaptativo al contenido */
  width: max-content !important;
  min-width: 0 !important;
  max-width: min(92vw, 420px) !important;
  white-space: normal !important;
}

/* Primer nivel: pegado al padre */
.header-navigation .header-menu-container > ul > li > .sub-menu,
.kadence-navigation .menu > li > ul {
  margin-top: 0 !important;
}

/* Subniveles */
.header-navigation .sub-menu .sub-menu,
.kadence-navigation ul ul ul {
  margin-top: 0 !important;
  margin-left: 12px !important;
}

/* ================================================
   [5] ITEMS DEL DROPDOWN
================================================ */
.header-navigation .sub-menu li,
.kadence-navigation ul ul li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border: none !important;
}

.header-navigation .sub-menu a,
.kadence-navigation ul ul a {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 14px 22px !important;
  border-radius: var(--poga-item-radius) !important;
  color: var(--poga-header-text) !important;
  background: transparent !important;
  text-decoration: none !important;
  line-height: 1.3 !important;

  /* clave para que el ancho se adapte al texto */
  white-space: nowrap !important;
  transition:
    background 0.2s ease,
    color 0.2s ease !important;
}

.header-navigation .sub-menu a:visited,
.kadence-navigation ul ul a:visited {
  color: var(--poga-header-text) !important;
}

/* Si algún texto fuese realmente demasiado largo, permite corte controlado */
.header-navigation .sub-menu li.long-item > a,
.kadence-navigation ul ul li.long-item > a {
  white-space: normal !important;
}

/* Hovers suaves y coherentes */
.header-navigation .sub-menu li:nth-child(4n+1) > a:hover,
.header-navigation .sub-menu li:nth-child(4n+1) > a:focus,
.kadence-navigation ul ul li:nth-child(4n+1) > a:hover,
.kadence-navigation ul ul li:nth-child(4n+1) > a:focus {
  background: var(--poga-hover-1) !important;
  color: var(--poga-header-accent) !important;
}

.header-navigation .sub-menu li:nth-child(4n+2) > a:hover,
.header-navigation .sub-menu li:nth-child(4n+2) > a:focus,
.kadence-navigation ul ul li:nth-child(4n+2) > a:hover,
.kadence-navigation ul ul li:nth-child(4n+2) > a:focus {
  background: var(--poga-hover-2) !important;
  color: var(--poga-header-accent) !important;
}

.header-navigation .sub-menu li:nth-child(4n+3) > a:hover,
.header-navigation .sub-menu li:nth-child(4n+3) > a:focus,
.kadence-navigation ul ul li:nth-child(4n+3) > a:hover,
.kadence-navigation ul ul li:nth-child(4n+3) > a:focus {
  background: var(--poga-hover-3) !important;
  color: var(--poga-header-accent) !important;
}

.header-navigation .sub-menu li:nth-child(4n+4) > a:hover,
.header-navigation .sub-menu li:nth-child(4n+4) > a:focus,
.kadence-navigation ul ul li:nth-child(4n+4) > a:hover,
.kadence-navigation ul ul li:nth-child(4n+4) > a:focus {
  background: var(--poga-hover-4) !important;
  color: var(--poga-header-accent) !important;
}

/* Item activo */
.header-navigation .sub-menu .current-menu-item > a,
.header-navigation .sub-menu .current_page_item > a,
.header-navigation .sub-menu .current-menu-ancestor > a,
.kadence-navigation ul ul .current-menu-item > a,
.kadence-navigation ul ul .current_page_item > a,
.kadence-navigation ul ul .current-menu-ancestor > a {
  background: rgba(223, 208, 255, 0.28) !important;
  color: var(--poga-header-accent) !important;
}

/* ================================================
   [6] APERTURA SUAVE
================================================ */
.header-navigation .sub-menu,
.kadence-navigation ul ul {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition:
    opacity 0.18s ease,
    transform 0.22s ease,
    visibility 0s linear 0.18s !important;
}

.header-navigation .menu li:hover > .sub-menu,
.header-navigation .menu li.focus > .sub-menu,
.kadence-navigation .menu li:hover > ul,
.kadence-navigation .menu li.focus > ul,
.header-navigation .header-menu-container > ul > li:hover > .sub-menu,
.header-navigation .header-menu-container > ul > li.focus > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity 0.18s ease,
    transform 0.22s ease,
    visibility 0s linear 0s !important;
}

/* ================================================
   [7] AJUSTES FINOS
================================================ */
.header-navigation .sub-menu,
.header-navigation .sub-menu li,
.header-navigation .sub-menu a,
.kadence-navigation ul ul,
.kadence-navigation ul ul li,
.kadence-navigation ul ul a {
  background-clip: padding-box !important;
}

/* Kadence a veces impone left/right o min-width raros */
.header-navigation .sub-menu,
.kadence-navigation ul ul {
  box-sizing: border-box !important;
}

/* ================================================
   [8] RESPONSIVE
================================================ */
@media (max-width: 760px) {
  .header-navigation .sub-menu,
  .header-navigation .sub-menu .sub-menu,
  .kadence-navigation ul ul,
  .kadence-navigation ul ul.sub-menu {
    max-width: min(92vw, 340px) !important;
    border-radius: 22px !important;
    padding: 9px !important;
  }

  .header-navigation .sub-menu a,
  .kadence-navigation ul ul a {
    padding: 14px 18px !important;
    white-space: normal !important;
  }
}

/* =================================================
   POGALUA · ESTABILIZAR HEADER STICKY KADENCE
   Corrección exacta sobre el wrapper sticky real
================================================= */

/* mismo aspecto en ambos estados */
#masthead .site-main-header-wrap.kadence-sticky-header.item-is-fixed.item-at-start,
#masthead .site-main-header-wrap.kadence-sticky-header.item-is-fixed.item-is-stuck {
	background: #fff !important;
	box-shadow: none !important;
	border-bottom: 1px solid rgba(123, 78, 255, 0.22) !important;
	transition: none !important;
	animation: none !important;
}

/* el inner no debe animar ni transformarse al cambiar de estado */
#masthead .site-main-header-wrap.kadence-sticky-header.item-is-fixed.item-at-start .site-header-row-container-inner,
#masthead .site-main-header-wrap.kadence-sticky-header.item-is-fixed.item-is-stuck .site-header-row-container-inner,
#masthead .site-main-header-wrap.kadence-sticky-header.item-is-fixed.item-at-start .site-main-header-inner-wrap,
#masthead .site-main-header-wrap.kadence-sticky-header.item-is-fixed.item-is-stuck .site-main-header-inner-wrap {
	transition: none !important;
	animation: none !important;
	transform: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

/* logo y elementos del header: sin animaciones al entrar en sticky */
#masthead .site-main-header-wrap.kadence-sticky-header.item-is-fixed.item-at-start .custom-logo,
#masthead .site-main-header-wrap.kadence-sticky-header.item-is-fixed.item-is-stuck .custom-logo,
#masthead .site-main-header-wrap.kadence-sticky-header.item-is-fixed.item-at-start .site-header-item,
#masthead .site-main-header-wrap.kadence-sticky-header.item-is-fixed.item-is-stuck .site-header-item,
#masthead .site-main-header-wrap.kadence-sticky-header.item-is-fixed.item-at-start .main-navigation,
#masthead .site-main-header-wrap.kadence-sticky-header.item-is-fixed.item-is-stuck .main-navigation {
	transition: none !important;
	animation: none !important;
}

/* estabilizar render del wrapper sticky exacto */
#masthead .site-main-header-wrap.kadence-sticky-header.item-is-fixed {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
}

/* móvil: mismo tratamiento */
#mobile-header .site-main-header-wrap.kadence-sticky-header.item-is-fixed.item-at-start,
#mobile-header .site-main-header-wrap.kadence-sticky-header.item-is-fixed.item-is-stuck {
	background: #fff !important;
	box-shadow: none !important;
	border-bottom: 1px solid rgba(123, 78, 255, 0.22) !important;
	transition: none !important;
	animation: none !important;
}