/**
 * Header sticky (Elementor Pro)
 *
 * ID: sticky-header. Clase al hacer scroll: .cew-sticky-header--scrolled (sticky-header.js).
 * data-cew-sticky-offset opcional (px, por defecto 12).
 *
 * Oculto sin scroll: fixed + opacity/translate (no display:none → permite transición).
 */

#sticky-header {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	max-height: 100px;
	overflow-x: hidden;
	overflow-y: hidden;
	box-sizing: border-box !important;
	z-index: 99990;
	background-color: #ffffff;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, -100%, 0);
	transition:
		opacity 0.4s ease,
		transform 0.45s cubic-bezier(0.32, 0.72, 0, 1),
		visibility 0s linear 0.45s;
}

/*
 * Barra sticky: 100px en escritorio. En tablet vertical (≤1024px) y móvil: 70px.
 * overflow visible al activarse para que el mega no se recorte.
 */
#sticky-header.cew-sticky-header--scrolled {
	pointer-events: auto;
	opacity: 1;
	visibility: visible;
	transform: translate3d(0, 0, 0);
	height: 100px !important;
	min-height: 100px;
	max-height: 100px !important;
	overflow: visible !important;
	display: flex;
	align-items: center;
	transition:
		opacity 0.4s ease,
		transform 0.45s cubic-bezier(0.32, 0.72, 0, 1),
		visibility 0s linear 0s;
}

#sticky-header.cew-sticky-header--scrolled > * {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	max-height: 100%;
}

#sticky-header.cew-sticky-header--scrolled .e-con,
#sticky-header.cew-sticky-header--scrolled .e-con-inner,
#sticky-header.cew-sticky-header--scrolled .elementor-container {
	overflow: visible !important;
}

body.admin-bar #sticky-header {
	top: 32px !important;
}

@media screen and (max-width: 782px) {
	body.admin-bar #sticky-header {
		top: 46px !important;
	}
}

/* Editor Elementor: visible sin scroll para editar */
body.elementor-editor-active #sticky-header:not(.cew-sticky-header--scrolled),
.elementor-edit-mode #sticky-header:not(.cew-sticky-header--scrolled) {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translate3d(0, 0, 0) !important;
	pointer-events: auto !important;
	transition: none;
}

#sticky-header .cew-nav-mega__link,
#sticky-header .cew-nav-mega__mega-trigger {
	transition:
		color 0.35s ease,
		opacity 0.35s ease;
}

#sticky-header .cew-nav-mega__toggle-bars {
	transition:
		background-color 0.35s ease,
		box-shadow 0.35s ease;
}

body.cew-sticky-header--scrolled .cew-nav-mega {
	--cew-mega-chevron-color: #034840;
}

body.cew-sticky-header--scrolled .cew-nav-mega__chevron,
body.cew-sticky-header--scrolled .cew-nav-mega__mobile-chevron {
	color: #034840 !important;
}

#sticky-header.cew-sticky-header--scrolled .cew-nav-mega__link,
#sticky-header.cew-sticky-header--scrolled .cew-nav-mega__mega-trigger {
	color: #034840 !important;
}

#sticky-header.cew-sticky-header--scrolled .cew-nav-mega__toggle-bars {
	background: #034840;
	box-shadow:
		0 -7px 0 #034840,
		0 7px 0 #034840;
}

/* Intercambio logo / CTA */

#sticky-header .cew-sticky-show-when-active {
	display: none !important;
}

#sticky-header.cew-sticky-header--scrolled .cew-sticky-hide-when-active {
	display: none !important;
}

#sticky-header.cew-sticky-header--scrolled .cew-sticky-show-when-active {
	display: block !important;
}

#sticky-header.cew-sticky-header--scrolled .cew-sticky-show-when-active.cew-sticky--flex {
	display: flex !important;
}

#sticky-header.cew-sticky-header--scrolled .cew-sticky-show-when-active.cew-sticky--inline-flex {
	display: inline-flex !important;
}

/*
 * Mega desktop: con header transparente (sin scroll) el panel no a todo el ancho;
 * con scroll (body.cew-sticky-header--scrolled) se mantiene el diseño ancho completo del widget.
 */
body:not(.cew-sticky-header--scrolled) .cew-nav-mega__mega {
	left: 50% !important;
	right: auto !important;
	width: min(100vw, 1280px);
	max-width: 1280px !important;
	margin-top: 20px;
	transform: translate3d(-50%, -28px, 0);
}

body:not(.cew-sticky-header--scrolled) .cew-nav-mega__item--mega.is-open .cew-nav-mega__mega {
	transform: translate3d(-50%, 0, 0);
}

body.cew-sticky-header--scrolled .cew-nav-mega__mega {
	background-color: #ffffff !important;
}

/* Sin hero en la página: header principal sólido desde carga */
body:not(.cew-has-hero-slider) #main-header {
	background: #ffffff !important;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

/* Sin hero: usar variantes de logo/CTA en verde también en header principal */
body:not(.cew-has-hero-slider) #main-header .cew-sticky-hide-when-active {
	display: none !important;
}

body:not(.cew-has-hero-slider) #main-header .cew-sticky-show-when-active {
	display: block !important;
}

body:not(.cew-has-hero-slider) #main-header .cew-sticky-show-when-active.cew-sticky--flex {
	display: flex !important;
}

body:not(.cew-has-hero-slider) #main-header .cew-sticky-show-when-active.cew-sticky--inline-flex {
	display: inline-flex !important;
}

body:not(.cew-has-hero-slider) #main-header img {
	filter: none !important;
}

body:not(.cew-has-hero-slider) #main-header .cew-nav-mega {
	--cew-mega-chevron-color: #034840;
}

body:not(.cew-has-hero-slider) #main-header .cew-nav-mega__link,
body:not(.cew-has-hero-slider) #main-header .cew-nav-mega__mega-trigger,
body:not(.cew-has-hero-slider) #main-header .cew-nav-mega__chevron,
body:not(.cew-has-hero-slider) #main-header .cew-nav-mega__mobile-chevron {
	color: #034840 !important;
}

body:not(.cew-has-hero-slider) #main-header .cew-nav-mega__toggle-bars {
	background: #034840 !important;
	box-shadow:
		0 -7px 0 #034840,
		0 7px 0 #034840 !important;
}

body:not(.cew-has-hero-slider) #main-header #header-cta,
body:not(.cew-has-hero-slider) #main-header #header-cta .elementor-button,
body:not(.cew-has-hero-slider) #main-header #header-cta.elementor-button,
body:not(.cew-has-hero-slider) #main-header #header-cta a.elementor-button,
body:not(.cew-has-hero-slider) #main-header #header-mobile-cta,
body:not(.cew-has-hero-slider) #main-header #header-mobile-cta .elementor-button,
body:not(.cew-has-hero-slider) #main-header #header-mobile-cta.elementor-button,
body:not(.cew-has-hero-slider) #main-header #header-mobile-cta a.elementor-button {
	color: #034840 !important;
	border-color: #034840 !important;
	background-color: #ffffff !important;
}

body:not(.cew-has-hero-slider) #main-header #header-cta svg,
body:not(.cew-has-hero-slider) #main-header #header-cta svg path,
body:not(.cew-has-hero-slider) #main-header #header-mobile-cta svg,
body:not(.cew-has-hero-slider) #main-header #header-mobile-cta svg path {
	fill: #034840 !important;
	stroke: #034840 !important;
}

/* Tablet vertical y móvil (breakpoint Elementor): header principal + sticky a 70px */
@media (max-width: 1024px) {
	#sticky-header {
		max-height: 70px;
	}

	#sticky-header.cew-sticky-header--scrolled {
		height: 70px !important;
		min-height: 70px;
		max-height: 70px !important;
	}

	#main-header {
		--min-height: 70px;
		min-height: 70px !important;
		height: 70px !important;
		max-height: 70px !important;
		box-sizing: border-box;
	}

	/* Header móvil principal: transparente al inicio, blanco al hacer scroll */
	#header-mobile #header-mobile-content {
		background: transparent;
		box-shadow: none !important;
		transition:
		background-color 0.35s ease,
		color 0.35s ease,
		box-shadow 0.35s ease,
		border-color 0.35s ease;
	}

	body.cew-header-mobile--scrolled #header-mobile-content {
		background: #ffffff !important;
		box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
	}

	#header-mobile .cew-nav-mega__link,
	#header-mobile .cew-nav-mega__mega-trigger,
	#header-mobile .cew-nav-mega__toggle,
	#header-mobile .cew-nav-mega__chevron,
	#header-mobile .cew-nav-mega__mobile-chevron {
		color: #ffffff !important;
		transition: color 0.35s ease, opacity 0.35s ease;
	}

	/* Hamburguesa blanca solo con hero (cabecera transparente sobre el slider) */
	#header-mobile .cew-nav-mega__toggle-bars {
		background: #ffffff !important;
		box-shadow:
			0 -7px 0 #ffffff,
			0 7px 0 #ffffff !important;
		transition: background-color 0.35s ease, box-shadow 0.35s ease;
	}

	/* CTA blanco con hero */
	#header-mobile #header-mobile-content:not(.elementor-sticky--active) #header-mobile-cta,
	#header-mobile #header-mobile-content:not(.elementor-sticky--active) #header-mobile-cta .elementor-button,
	#header-mobile #header-mobile-content:not(.elementor-sticky--active) #header-mobile-cta.elementor-button,
	#header-mobile #header-mobile-content:not(.elementor-sticky--active) #header-mobile-cta a.elementor-button {
		color: #ffffff !important;
		border-color: #ffffff !important;
		background-color: transparent !important;
	}

	#header-mobile img {
		filter: brightness(0) invert(1);
		transition: filter 0.35s ease;
	}

	body.cew-header-mobile--scrolled #header-mobile {
		background: #ffffff;
		box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
	}

	body.cew-header-mobile--scrolled #header-mobile .cew-nav-mega__link,
	body.cew-header-mobile--scrolled #header-mobile .cew-nav-mega__mega-trigger,
	body.cew-header-mobile--scrolled #header-mobile .cew-nav-mega__toggle,
	body.cew-header-mobile--scrolled #header-mobile .cew-nav-mega__chevron,
	body.cew-header-mobile--scrolled #header-mobile .cew-nav-mega__mobile-chevron {
		color: #01211d !important;
	}

	body.cew-header-mobile--scrolled #header-mobile .cew-nav-mega__toggle-bars {
		background: #01211d !important;
		box-shadow:
			0 -7px 0 #01211d,
			0 7px 0 #01211d !important;
	}

	body.cew-header-mobile--scrolled #header-mobile #header-mobile-cta,
	body.cew-header-mobile--scrolled #header-mobile #header-mobile-cta .elementor-button,
	body.cew-header-mobile--scrolled #header-mobile #header-mobile-cta.elementor-button,
	body.cew-header-mobile--scrolled #header-mobile #header-mobile-cta a.elementor-button {
		color: #01211d !important;
		border-color: #01211d !important;
		background-color: transparent !important;
	}

	body.cew-header-mobile--scrolled #header-mobile #header-mobile-cta svg,
	body.cew-header-mobile--scrolled #header-mobile #header-mobile-cta svg path {
		fill: #01211d !important;
		stroke: #01211d !important;
	}

	body.cew-header-mobile--scrolled #header-mobile img {
		filter: none;
	}

	/*
	 * Sin hero (cew-no-hero-slider): cabecera móvil blanca; enlaces en verde; CTA verde; menú hamburguesa blanco sobre botón verde si no hay scroll.
	 * Las reglas con .cew-no-hero-slider.cew-header-mobile--scrolled van después para el estado scrolleado.
	 */
	body.cew-no-hero-slider #header-mobile #header-mobile-content {
		background: #ffffff !important;
		box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
	}

	body.cew-no-hero-slider #header-mobile .cew-nav-mega__link,
	body.cew-no-hero-slider #header-mobile .cew-nav-mega__mega-trigger,
	body.cew-no-hero-slider #header-mobile .cew-nav-mega__toggle,
	body.cew-no-hero-slider #header-mobile .cew-nav-mega__chevron,
	body.cew-no-hero-slider #header-mobile .cew-nav-mega__mobile-chevron {
		color: #034840 !important;
	}

	/*
	 * Sin hero + sin scroll: rayas blancas (mismo caso que #header-mobile-cta corregido).
	 * Fondo verde en .cew-nav-mega__toggle para que las tres rayas blancas se vean sobre la cabecera blanca.
	 */
	body.cew-no-hero-slider:not(.cew-header-mobile--scrolled) #header-mobile .cew-nav-mega__toggle {
		background-color: #034840 !important;
		border-radius: 50%;
	}

	body.cew-no-hero-slider:not(.cew-header-mobile--scrolled) #header-mobile .cew-nav-mega__toggle-bars {
		background: #ffffff !important;
		box-shadow:
			0 -7px 0 #ffffff,
			0 7px 0 #ffffff !important;
	}

	/*
	 * CTA verde sin hero, sin scroll: sin depender de :not(.elementor-sticky--active)
	 * (Elementor añade .elementor-sticky--active al cargar y el CTA quedaba en blanco).
	 */
	body.cew-no-hero-slider:not(.cew-header-mobile--scrolled) #header-mobile #header-mobile-content #header-mobile-cta,
	body.cew-no-hero-slider:not(.cew-header-mobile--scrolled) #header-mobile #header-mobile-content #header-mobile-cta .elementor-button,
	body.cew-no-hero-slider:not(.cew-header-mobile--scrolled) #header-mobile #header-mobile-content #header-mobile-cta.elementor-button,
	body.cew-no-hero-slider:not(.cew-header-mobile--scrolled) #header-mobile #header-mobile-content #header-mobile-cta a.elementor-button {
		color: #034840 !important;
		border-color: #034840 !important;
		background-color: #ffffff !important;
	}

	body.cew-no-hero-slider:not(.cew-header-mobile--scrolled) #header-mobile #header-mobile-content #header-mobile-cta svg,
	body.cew-no-hero-slider:not(.cew-header-mobile--scrolled) #header-mobile #header-mobile-content #header-mobile-cta svg path {
		fill: #034840 !important;
		stroke: #034840 !important;
	}

	body.cew-no-hero-slider #header-mobile img {
		filter: none !important;
	}

	body.cew-no-hero-slider.cew-header-mobile--scrolled #header-mobile .cew-nav-mega__link,
	body.cew-no-hero-slider.cew-header-mobile--scrolled #header-mobile .cew-nav-mega__mega-trigger,
	body.cew-no-hero-slider.cew-header-mobile--scrolled #header-mobile .cew-nav-mega__toggle,
	body.cew-no-hero-slider.cew-header-mobile--scrolled #header-mobile .cew-nav-mega__chevron,
	body.cew-no-hero-slider.cew-header-mobile--scrolled #header-mobile .cew-nav-mega__mobile-chevron {
		color: #034840 !important;
	}

	body.cew-no-hero-slider.cew-header-mobile--scrolled #header-mobile .cew-nav-mega__toggle {
		background-color: transparent !important;
	}

	body.cew-no-hero-slider.cew-header-mobile--scrolled #header-mobile .cew-nav-mega__toggle-bars {
		background: #034840 !important;
		box-shadow:
			0 -7px 0 #034840,
			0 7px 0 #034840 !important;
	}

	body.cew-no-hero-slider.cew-header-mobile--scrolled #header-mobile #header-mobile-cta,
	body.cew-no-hero-slider.cew-header-mobile--scrolled #header-mobile #header-mobile-cta .elementor-button,
	body.cew-no-hero-slider.cew-header-mobile--scrolled #header-mobile #header-mobile-cta.elementor-button,
	body.cew-no-hero-slider.cew-header-mobile--scrolled #header-mobile #header-mobile-cta a.elementor-button {
		color: #034840 !important;
		border-color: #034840 !important;
		background-color: #ffffff !important;
	}

	body.cew-no-hero-slider.cew-header-mobile--scrolled #header-mobile #header-mobile-cta svg,
	body.cew-no-hero-slider.cew-header-mobile--scrolled #header-mobile #header-mobile-cta svg path {
		fill: #034840 !important;
		stroke: #034840 !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	#sticky-header {
		transition:
			opacity 0.2s ease,
			visibility 0s linear 0.2s;
	}

	#sticky-header.cew-sticky-header--scrolled {
		transition:
			opacity 0.2s ease,
			visibility 0s linear 0s;
		transform: translate3d(0, 0, 0);
	}

	#sticky-header:not(.cew-sticky-header--scrolled) {
		transform: translate3d(0, 0, 0);
	}

	#sticky-header .cew-nav-mega__link,
	#sticky-header .cew-nav-mega__mega-trigger,
	#sticky-header .cew-nav-mega__toggle-bars {
		transition: none;
	}

	body:not(.cew-sticky-header--scrolled) .cew-nav-mega__mega {
		transform: translate3d(-50%, -28px, 0);
	}

	body:not(.cew-sticky-header--scrolled) .cew-nav-mega__item--mega.is-open .cew-nav-mega__mega {
		transform: translate3d(-50%, 0, 0);
	}
}