/**
 * Header fixed transparente con cambio en scroll – Grupo Herrera.
 * Banner + Header como una sola unidad; transición suave al hacer scroll.
 */

/* Tokens del bloque fixed (override con CSS custom properties si se desea) */
.ast-fixed-header-wrap {
	--ast-fixed-header-bg: transparent;
	--ast-fixed-header-bg-scrolled: #ffffff;
	--ast-fixed-header-text: rgba(255, 255, 255, 0.95);
	--ast-fixed-header-text-scrolled: #1e293b;
	--ast-fixed-header-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	--ast-fixed-header-transition: 0.25s ease;
}

/* Hero/carrusel: sube bajo el header para quitar el hueco (margin-top negativo) */
body.ast-fixed-header-enabled .grupo-hero-principal {
	margin-top: calc(-1 * var(--ast-fixed-header-height, 80px));
}

/* Contenedor único: fixed, ancho completo, z-index alto */
#ast-fixed-header.ast-fixed-header-wrap {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	background: var(--ast-fixed-header-bg);
	transition: background-color var(--ast-fixed-header-transition),
		box-shadow var(--ast-fixed-header-transition);
}

/* Estado scrolled: fondo sólido y sombra sutil (estilo SaaS) */
#ast-fixed-header.ast-fixed-header-wrap.scrolled {
	background: var(--ast-fixed-header-bg-scrolled);
	box-shadow: var(--ast-fixed-header-shadow);
}

/* Header interno (#masthead): sin margen negativo; hereda el bloque como contenedor */
#ast-fixed-header .site-header {
	transition: background-color var(--ast-fixed-header-transition);
}

#ast-fixed-header .site-header,
#ast-fixed-header .ast-hfb-header .site-header {
	background: transparent !important;
}

/* Sin scroll: toda la cabecera transparente (barras, wraps) para que se vea el carrusel detrás */
#ast-fixed-header.ast-fixed-header-wrap:not(.scrolled) .main-header-bar-wrap,
#ast-fixed-header.ast-fixed-header-wrap:not(.scrolled) [class*="header-bar"],
#ast-fixed-header.ast-fixed-header-wrap:not(.scrolled) .site-header > * {
	background: transparent !important;
}

#ast-fixed-header.scrolled .site-header,
#ast-fixed-header.scrolled .ast-hfb-header .site-header {
	background: transparent !important;
}

/* Menú y enlaces: visibles sobre transparente (claro) y sobre blanco (oscuro al scrolled) */
#ast-fixed-header .main-header-menu .menu-link,
#ast-fixed-header .main-header-menu a,
#ast-fixed-header .main-navigation a,
#ast-fixed-header .ast-site-identity a,
#ast-fixed-header .site-title a,
#ast-fixed-header .site-description,
#ast-fixed-header .ast-builder-menu a,
#ast-fixed-header .site-header-section a {
	color: var(--ast-fixed-header-text);
	transition: color var(--ast-fixed-header-transition);
}

#ast-fixed-header .site-description {
	opacity: 0.9;
}

#ast-fixed-header.scrolled .main-header-menu .menu-link,
#ast-fixed-header.scrolled .main-header-menu a,
#ast-fixed-header.scrolled .main-navigation a,
#ast-fixed-header.scrolled .ast-site-identity a,
#ast-fixed-header.scrolled .site-title a,
#ast-fixed-header.scrolled .site-description,
#ast-fixed-header.scrolled .ast-builder-menu a,
#ast-fixed-header.scrolled .site-header-section a {
	color: var(--ast-fixed-header-text-scrolled);
}

#ast-fixed-header.scrolled .main-header-menu .menu-link:hover,
#ast-fixed-header.scrolled .main-header-menu a:hover,
#ast-fixed-header.scrolled .main-navigation a:hover,
#ast-fixed-header.scrolled .ast-builder-menu a:hover {
	color: var(--ast-fixed-header-text-scrolled);
	opacity: 0.85;
}

/* Iconos (carrito, cuenta, etc.) */
#ast-fixed-header .ast-site-header-cart a,
#ast-fixed-header .ast-header-account a,
#ast-fixed-header .ast-search-icon {
	color: var(--ast-fixed-header-text);
	transition: color var(--ast-fixed-header-transition);
}

#ast-fixed-header.scrolled .ast-site-header-cart a,
#ast-fixed-header.scrolled .ast-header-account a,
#ast-fixed-header.scrolled .ast-search-icon {
	color: var(--ast-fixed-header-text-scrolled);
}

/* Botones del header: borde y texto visibles en ambos estados */
#ast-fixed-header .ast-builder-menu .menu-link.ast-custom-button {
	color: var(--ast-fixed-header-text);
	border-color: currentColor;
}

#ast-fixed-header.scrolled .ast-builder-menu .menu-link.ast-custom-button {
	color: var(--ast-fixed-header-text-scrolled);
	border-color: var(--ast-fixed-header-text-scrolled);
}

/* Banner superior dentro del mismo bloque: sin separación visual */
#ast-fixed-header .astra-banner-superior-promocional {
	flex-shrink: 0;
}

/* Sidebar sticky: que llegue al borde superior (sin sumar espacio de cabecera) */
body.ast-fixed-header-enabled.ast-sticky-sidebar #secondary .sidebar-main {
	top: 0 !important;
	max-height: 100vh !important;
}

/* Responsive: mismo comportamiento en móvil/tablet */
@media (max-width: 921px) {
	#ast-fixed-header.ast-fixed-header-wrap {
		position: fixed;
	}
	#ast-fixed-header .main-header-menu-toggle,
	#ast-fixed-header .main-header-menu-toggle .mobile-menu {
		color: var(--ast-fixed-header-text);
	}
	#ast-fixed-header.scrolled .main-header-menu-toggle,
	#ast-fixed-header.scrolled .main-header-menu-toggle .mobile-menu {
		color: var(--ast-fixed-header-text-scrolled);
	}
}