/**
 * Culture Racing — Header Styles
 *
 * Diseño visual del header (fondo negro sólido, logo blanco, nav horizontal
 * centrado, botón AGENDAR + zona de iconos a la derecha) + topbar rojo y
 * estados scroll-aware. Todo el look-and-feel del header vive acá.
 *
 * Estructura del DOM (configurada en Elementor):
 *
 *   header#cr-site-header       ← el JS convierte div→header
 *   ├── #cr-topbar-wrapper
 *   └── #cr-header-nav
 *       ├── .cr-hamburger   (widget Mega Menu Trigger) — order: 1
 *       ├── .cr-logo        (widget Imagen)            — order: 2
 *       ├── .cr-nav         (widget Nav Menu)          — order: 3
 *       ├── .cr-cta         (widget Botón AGENDAR)     — order: 4
 *       └── #cr-header-icons (container con 3 iconos)  — order: 5
 *
 * IMPORTANTE: #cr-header-icons DEBE ser hijo de #cr-header-nav, no hermano.
 * Si está como hermano, los selectores de especificidad no aplican y los
 * iconos se descuadran (aparecen en columna a la izquierda con bordes visibles).
 *
 * ─────────────────────────────────────────────────────────────────────────
 * ÍNDICE
 *   §1  Header shell      → #cr-site-header (bg negro + flex column)
 *   §2  Topbar            → #cr-topbar-wrapper (rojo + textura + mensaje)
 *   §3  Nav container     → #cr-header-nav (flex row + línea inferior)
 *   §4  Item ordering     → order de hamburger / logo / nav / cta / icons
 *   §5  Logo              → .cr-logo (imagen blanca)
 *   §6  Hamburger         → .cr-hamburger (trigger del mega menu)
 *   §7  Nav menu          → .cr-nav (links horizontales)
 *   §8  CTA AGENDAR       → .cr-cta (botón rojo + textura)
 *   §9  Header icons      → #cr-header-icons (search/user/cart + badge)
 *   §10 Header states     → transparent / hidden / drawer-open
 *   §11 Widget resets     → márgenes/padding de wrappers Elementor del nav
 *   §12 Nav mega          → .zenth-nav-mega (variables + hover)
 *   §13 Responsive        → TODOS los @media consolidados acá
 * ─────────────────────────────────────────────────────────────────────────
 * BREAKPOINTS usados acá:  1199 (pre-tablet) · 640 (mobile) · 420 (mobile-xs)
 *   Desktop es la base (sin media query). En §13, primero los max-width de
 *   más ancho a más angosto (1199 → 640 → 420) y al final una media de
 *   min-width: 1200 (desktop-up: restaura overflow visible para mega-paneles).
 *   No hay medias de accesibilidad (prefers-reduced-motion / hover / print).
 * ─────────────────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════════════════
   §1 · HEADER SHELL — #cr-site-header (bg negro + flex column)
   ═══════════════════════════════════════════════════════════════════════ */

#cr-site-header.e-con,
#cr-site-header.elementor-element,
header#cr-site-header {
	background-color: var(--cr-color-black) !important;
	background-image: none !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

#cr-site-header {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §2 · TOPBAR — #cr-topbar-wrapper (rojo + textura + mensaje)
   ═══════════════════════════════════════════════════════════════════════ */

#cr-topbar-wrapper.e-con,
#cr-topbar-wrapper.elementor-element,
#cr-topbar-wrapper {
	position: relative !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	background-color: var(--cr-color-primary) !important;
	background-image: none !important;
	min-height: var(--cr-topbar-height) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
}

/* Textura concrete sobre el rojo del topbar (sutil, no compite con el mensaje) */
#cr-topbar-wrapper::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--cr-texture-url, url('../img/texture-concrete.webp'));
	background-size: var(--cr-texture-size-small, 180px 180px);
	background-repeat: repeat;
	mix-blend-mode: multiply;
	opacity: 1;
	pointer-events: none;
	z-index: 0;
}

/* Asegurar que el contenido del topbar quede encima de la textura */
#cr-topbar-wrapper > * {
	position: relative;
	z-index: 1;
}

#cr-topbar-wrapper .zenth-topbar-wrapper {
	width: 100%;
	max-width: var(--cr-container-max);
	margin: 0 auto;
}

#cr-topbar-wrapper .zenth-topbar__message {
	color: var(--cr-color-white);
	font-family: var(--cr-font-body);
	font-size: 10px;
	margin-bottom: -4px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}


/* ═══════════════════════════════════════════════════════════════════════
   §3 · NAV CONTAINER — #cr-header-nav (flex row + línea inferior)
   ═══════════════════════════════════════════════════════════════════════ */

#cr-header-nav.e-con,
#cr-header-nav.elementor-element,
#cr-header-nav {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 0 !important;
	width: 100% !important;
	max-width: var(--cr-container-max) !important;
	margin: 0 auto !important;
	padding: 0 var(--cr-container-pad) !important;
	min-height: var(--cr-header-height) !important;
	box-sizing: border-box !important;
	background-color: transparent !important;
	background-image: none !important;
	position: relative !important;
}

/* Línea blanca de 1px al borde inferior del nav.
   El nav tiene max-width: var(--cr-container-max), así que para
   que la línea cubra todo el viewport usamos left/right calculados
   con margin negativo. La opacidad 0.3 la hace sutil — separa sin
   competir con el contenido del header. */
#cr-header-nav::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	height: 1px;
	background-color: rgba(255, 255, 255, 0.3);
	z-index: 5;
	pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   §4 · ITEM ORDERING — order de hamburger / logo / nav / cta / icons
   ═══════════════════════════════════════════════════════════════════════ */

#cr-header-nav > .cr-hamburger,
#cr-header-nav .cr-hamburger {
	order: 1;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	margin: 0;
}

#cr-header-nav > .cr-logo,
#cr-header-nav .cr-logo {
	order: 2;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	margin: 0 0 0 20px;
}

#cr-header-nav > .cr-nav,
#cr-header-nav .cr-nav,
#cr-header-nav > .elementor-widget-shortcode:has(.zenth-nav-mega),
#cr-header-nav .elementor-widget-shortcode:has(.zenth-nav-mega) {
	order: 3;
	flex: 1 1 auto;
	display: flex !important;
	justify-content: center;
	align-items: center;
	min-width: 0;
	margin: 0 32px;
}

#cr-header-nav > .cr-cta,
#cr-header-nav .cr-cta {
	order: 4;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	margin: 0 16px 0 0;
}

#cr-header-nav > #cr-header-icons,
#cr-header-nav #cr-header-icons {
	order: 5;
	flex: 0 0 auto;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	min-width: 0 !important;
	width: auto !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §5 · LOGO — .cr-logo (imagen blanca)
   ═══════════════════════════════════════════════════════════════════════ */

#cr-header-nav .cr-logo a,
#cr-header-nav .cr-logo .elementor-widget-container {
	display: flex;
	align-items: center;
	line-height: 0;
	padding: 0 !important;
	margin: 0 !important;
}

#cr-header-nav .cr-logo img {
	display: block;
	width: auto;
	height: 36px;
	max-height: 36px;
	transition: height var(--cr-transition-base), opacity var(--cr-transition-base);
	filter: brightness(0) invert(1); /* Fuerza el logo a blanco */
}

#cr-header-nav .cr-logo a:hover img {
	opacity: 0.85;
}


/* ═══════════════════════════════════════════════════════════════════════
   §6 · HAMBURGER — .cr-hamburger (trigger del mega menu)
   ═══════════════════════════════════════════════════════════════════════ */

#cr-header-nav .cr-hamburger .zenth-mm-trigger {
	color: var(--cr-color-white);
	padding: 8px;
	margin: -8px;
	background: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	box-shadow: none;
}

#cr-header-nav .cr-hamburger .zenth-mm-trigger:hover {
	color: var(--cr-color-primary);
}

#cr-header-nav .cr-hamburger .zenth-mm-trigger:focus-visible {
	outline: 2px solid var(--cr-color-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

#cr-header-nav .cr-hamburger .zenth-mm-trigger__bar {
	background-color: currentColor;
	height: 2px;
	display: block;
}

#cr-header-nav .cr-hamburger .zenth-mm-trigger__icon {
	width: 24px;
	height: 18px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}


/* ═══════════════════════════════════════════════════════════════════════
   §7 · NAV MENU — .cr-nav (links horizontales)
   ═══════════════════════════════════════════════════════════════════════ */

#cr-header-nav .cr-nav .zenth-nav-wrapper {
	--zenth-nav-text: var(--cr-color-white);
	--zenth-nav-text-hover: var(--cr-color-primary);
	--zenth-nav-text-current: var(--cr-color-primary);
	--zenth-nav-gap: 32px;
	--zenth-nav-font-size: 14px;
	--zenth-nav-font-weight: 500;
	--zenth-nav-letter-spacing: 0.5px;
}

#cr-header-nav .cr-nav .zenth-nav__link {
	color: var(--cr-color-white) !important;
	text-decoration: none !important;
	transition: color var(--cr-transition-fast);
}

#cr-header-nav .cr-nav .zenth-nav__link:hover {
	color: var(--cr-color-primary) !important;
}

#cr-header-nav .cr-nav .zenth-nav__item--current > .zenth-nav__link {
	color: var(--cr-color-primary) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §8 · CTA AGENDAR — .cr-cta (botón rojo + textura)
   ═══════════════════════════════════════════════════════════════════════ */

#cr-header-nav .cr-cta .elementor-button,
#cr-header-nav .cr-cta a.elementor-button-link,
#cr-header-nav .cr-cta a {
	position: relative;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0 !important;
	padding: 12px 28px !important;
	background-color: var(--cr-color-primary) !important;
	color: var(--cr-color-white) !important;
	font-family: var(--cr-font-body) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 1.2px !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	border: none !important;
	border-radius: 100px !important;
	cursor: pointer;
	transition: background-color var(--cr-transition-fast),
				transform var(--cr-transition-fast),
				box-shadow var(--cr-transition-fast) !important;
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
}

/* Textura concrete sobre el botón AGENDAR — sutil para no competir con el texto */
#cr-header-nav .cr-cta .elementor-button::before,
#cr-header-nav .cr-cta a.elementor-button-link::before,
#cr-header-nav .cr-cta a::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--cr-texture-url, url('../img/texture-concrete.webp'));
	background-size: var(--cr-texture-size-small, 180px 180px);
	background-repeat: repeat;
	mix-blend-mode: multiply;
	opacity: 1;
	pointer-events: none;
	z-index: 0;
	border-radius: inherit;
}

/* Content wrapper encima de la textura */
#cr-header-nav .cr-cta .elementor-button-content-wrapper,
#cr-header-nav .cr-cta .elementor-button-text {
	position: relative;
	z-index: 1;
}

#cr-header-nav .cr-cta .elementor-button:hover,
#cr-header-nav .cr-cta a.elementor-button-link:hover,
#cr-header-nav .cr-cta a:hover {
	background-color: var(--cr-color-primary-hover) !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(192, 0, 0, 0.4);
}

#cr-header-nav .cr-cta .elementor-button:active,
#cr-header-nav .cr-cta a.elementor-button-link:active {
	transform: translateY(0);
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

#cr-header-nav .cr-cta .elementor-button-text {
	color: inherit !important;
	font: inherit !important;
	letter-spacing: inherit !important;
	text-transform: inherit !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §9 · HEADER ICONS — #cr-header-icons (search/user/cart + badge)
   ═══════════════════════════════════════════════════════════════════════ */

#cr-header-nav #cr-header-icons .elementor-widget,
#cr-header-nav #cr-header-icons .elementor-widget-container {
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	box-shadow: none !important;
}

#cr-header-nav #cr-header-icons .cr-header-icon,
#cr-header-nav #cr-header-icons .zenth-header-icon {
	/* Layout */
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px;
	height: 40px;
	padding: 0 !important;
	margin: 0 !important;

	/* Color y tipografía */
	color: var(--cr-color-white) !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;

	/* Reset de bordes / outlines / shadows heredados */
	border: none !important;
	border-radius: 50% !important;
	outline: none !important;
	box-shadow: none !important;
	text-decoration: none !important;

	/* Comportamiento */
	cursor: pointer;
	position: relative;
	transition: background-color var(--cr-transition-fast),
				color var(--cr-transition-fast);
	-webkit-appearance: none;
	appearance: none;
}

#cr-header-nav #cr-header-icons .cr-header-icon:hover,
#cr-header-nav #cr-header-icons .zenth-header-icon:hover {
	background-color: rgba(255, 255, 255, 0.08) !important;
	color: var(--cr-color-primary) !important;
}

/* Focus: nunca visible al click de mouse; solo al navegar por teclado */
#cr-header-nav #cr-header-icons .cr-header-icon:focus,
#cr-header-nav #cr-header-icons .zenth-header-icon:focus {
	outline: none !important;
	box-shadow: none !important;
}

#cr-header-nav #cr-header-icons .cr-header-icon:focus-visible,
#cr-header-nav #cr-header-icons .zenth-header-icon:focus-visible {
	outline: 2px solid var(--cr-color-primary) !important;
	outline-offset: 2px !important;
}

#cr-header-nav #cr-header-icons .cr-header-icon svg,
#cr-header-nav #cr-header-icons .zenth-header-icon svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	pointer-events: none;
}

/* Badge del carrito (refuerzo del estilo de headericons.css) */
#cr-header-nav #cr-header-icons .zenth-cart-icon__badge {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background-color: var(--cr-color-primary);
	color: var(--cr-color-white);
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	border-radius: 100px;
	box-sizing: border-box;
	pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   §10 · HEADER STATES — transparent / hidden / drawer-open
   ───────────────────────────────────────────────────────────────────────
   Estados scroll-aware controlados por clases que el JS (header.js) pone
   en <body>. El transform de ocultar solo se ve si el header es fixed/sticky.
   ═══════════════════════════════════════════════════════════════════════ */

#cr-site-header {
	transition: transform 0.35s ease, background 0.35s ease;
	will-change: transform;
}

/* Estado transparente: solo en home arriba del todo. Gradient sutil
   negro 50% → 0% para que el contenido del header se vea sobre el
   hero sin perder legibilidad. */
body.cr-header-is-transparent #cr-site-header {
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.5) 0%,
		rgba(0, 0, 0, 0) 100%
	) !important;
}

body.cr-header-is-transparent #cr-topbar-wrapper {
	background-color: var(--cr-color-primary) !important;
}

/* Drawer abierto: si el header estaba en estado transparente (home arriba
   del todo), forzamos negro sólido para que tenga contraste con el drawer
   rojo y se lea bien la X del trigger.

   Usamos body:has(.zenth-mm-root.is-open) para reaccionar al estado del
   drawer sin acoplar el plugin al theme. La clase .is-open la pone el JS
   del módulo megamenu del plugin Zenth Toolkit.

   Solo afecta cuando el body ya tiene .cr-header-is-transparent, así que
   en cualquier otra página (donde el header ya es negro de base) esta
   regla no aplica ni cambia nada. */
body.cr-header-is-transparent:has(.zenth-mm-root.is-open) #cr-site-header {
	background: var(--cr-color-black) !important;
}

/* Estado oculto: al scrollear hacia abajo el header se desliza
   fuera de la vista. Reaparece al scrollear hacia arriba.

   NOTA: este transform solo tiene efecto visible si el header
   está con position: fixed o sticky. Si está en flujo normal,
   queda escondido pero deja espacio en blanco en su lugar. */
body.cr-header-is-hidden #cr-site-header {
	transform: translateY(-100%);
}


/* ═══════════════════════════════════════════════════════════════════════
   §11 · WIDGET RESETS — márgenes/padding de wrappers Elementor del nav
   ═══════════════════════════════════════════════════════════════════════ */

#cr-header-nav > .elementor-element,
#cr-header-nav > .elementor-widget {
	margin: 0 !important;
}

#cr-header-nav .elementor-widget-container {
	padding: 0 !important;
	margin: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §12 · NAV MEGA — .zenth-nav-mega (variables + hover)
   ═══════════════════════════════════════════════════════════════════════ */

#cr-header-nav .zenth-nav-mega {
	--zenth-nav-text: #ffffff;
	--zenth-nav-text-muted: rgba(255, 255, 255, 0.65);
	--zenth-nav-accent: #e60000;
	--zenth-nav-hover-bg: rgba(255, 255, 255, 0.05);
}

/* Hover/focus state en blanco→rojo */
#cr-header-nav .zenth-nav-mega__link {
	color: #ffffff !important;
}

#cr-header-nav .zenth-nav-mega__link:hover,
#cr-header-nav .zenth-nav-mega__link:focus-visible,
#cr-header-nav .zenth-nav-mega__item--has-panel[data-active="true"] > .zenth-nav-mega__link {
	color: var(--cr-red, #e60000) !important;
}

/* El widget shortcode de Elementor tiene sus propios márgenes
   que podrían romper el alineamiento. Reset. */
#cr-header-nav .elementor-widget-shortcode {
	margin: 0;
}

#cr-header-nav .elementor-widget-shortcode .elementor-widget-container {
	display: flex;
	justify-content: center;
	align-items: center;
}

.cr-logo--mobile {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §13 · RESPONSIVE — todos los @media, de más ancho a más angosto
   ───────────────────────────────────────────────────────────────────────
   Tiers:  pre-tablet (≤1199) → Mobile (≤640) → Mobile-xs (≤420).
   Al final, una media de min-width: 1200 (desktop-up) que NO es parte del
   cascade max-width: restaura overflow visible para los mega-paneles.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────── PRE-TABLET · max-width: 1199px ───────────────── */
@media (max-width: 1199px) {
	/* §7 · Nav horizontal oculto (lo reemplaza el hamburger). */
	#cr-header-nav .cr-nav {
		display: none !important;
	}

	/* ═══════════════════════════════════════════════════════════════════
	   HEADER 3 ZONAS (mobile + tablet)
	   ───────────────────────────────────────────────────────────────────
	     [ ☰  🔍 ]      ·      [  LOGO centrado  ]      ·      [ 👤  🛒 ]
	   ───────────────────────────────────────────────────────────────────
	   El nav horizontal ya está oculto arriba. Acá recomponemos el resto:
	   - #cr-header-icons pasa a display:contents → sus 3 widgets (search,
	     user, cart) "suben" a ser hijos directos del flex de #cr-header-nav,
	     así podemos llevar el SEARCH a la izquierda (junto al hamburger) y
	     dejar user+cart a la derecha.
	   - El logo se centra con flex:1 (absorbe el espacio del medio y centra
	     su imagen). Hamburger y los iconos tienen el mismo ancho (36px) para
	     que los grupos izq/der sean simétricos → logo perfectamente al centro.
	   - El CTA AGENDAR se oculta en esta vista (queda en el drawer del menú).
	   Para REVERTIR esta vista: borrá este sub-bloque (y los ajustes de logo
	   en los @media de 640 y 420).
	   ═══════════════════════════════════════════════════════════════════ */

	/* Contenedor: gap entre iconos de cada grupo + alto para el logo grande. */
	#cr-header-nav {
		gap: 14px !important;
		padding: 0 var(--cr-container-pad) !important;
		min-height: 88px !important;
	}

	/* CTA AGENDAR fuera de la barra en esta vista. */
	#cr-header-nav .cr-cta {
		display: none !important;
	}

	/* "Desarmamos" el grupo de iconos para reordenar sus 3 widgets sueltos.
	   Incluimos el posible .e-con-inner (wrapper interno de los contenedores
	   Elementor "boxed") para que los widgets suban al flex de #cr-header-nav
	   aunque exista ese nivel intermedio. */
	#cr-header-nav #cr-header-icons,
	#cr-header-nav #cr-header-icons > .e-con-inner {
		display: contents !important;
	}

	/* Zona izquierda: hamburger (order 1) + buscar (order 2). */
	#cr-header-nav .cr-hamburger {
		order: 1;
		min-width: 36px;
		justify-content: center;
	}
	#cr-header-nav .elementor-widget-zenth_search_icon {
		order: 2;
	}

	/* Centro: logo CENTRADO ABSOLUTO (dead-center del header, independiente del
	   flex del widget de imagen de Elementor). user+cart se empujan a la derecha
	   con margin-left:auto (ver abajo); hamburger+search quedan a la izquierda. */
	#cr-header-nav .cr-logo {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		margin: 0 !important;
		z-index: 1;
	}
	#cr-header-nav .cr-logo img {
		height: 48px;        /* ← tamaño del logo centrado (ajustable) */
		max-height: 2.4rem;
		width: auto;
		max-width: 50vw;     /* nunca pisa los iconos: si falta espacio, se achica */
	}

	/* Zona derecha: user (order 4) + cart (order 5). El margin-left:auto del user
	   empuja ambos a la derecha; a la izquierda quedan hamburger + search. */
	#cr-header-nav .elementor-widget-zenth_user_icon {
		order: 4;
		margin-left: auto;
	}
	#cr-header-nav .elementor-widget-zenth_cart_icon {
		order: 5;
	}

	/* §9 · Iconos: tamaño (el selector sigue aplicando con display:contents). */
	#cr-header-nav #cr-header-icons .cr-header-icon,
	#cr-header-nav #cr-header-icons .zenth-header-icon {
		width: 36px;
		height: 36px;
	}
	
	.cr-logo--mobile {
	    display: block !important;
	}
	
    .cr-logo--desktop {
        display: none !important;
    }	
}


/* ───────────────────────── MOBILE · max-width: 640px ──────────────────── */
@media (max-width: 640px) {
	/* §3 · Nav: gap y padding mínimos + alto del header 3 zonas. */
	#cr-header-nav {
		gap: 8px !important;
		padding: 0 16px !important;
		min-height: 80px !important;
	}

	/* §5 · Logo centrado (ver bloque 3 zonas en ≤1199): alto para mobile. */
	#cr-header-nav .cr-logo img {
		max-height: 1.8rem;
	}

	/* §8 · CTA compacto */
	#cr-header-nav .cr-cta .elementor-button,
	#cr-header-nav .cr-cta a.elementor-button-link {
		padding: 8px 16px !important;
		font-size: 11px !important;
		letter-spacing: 0.8px !important;
	}

	/* §6 · Hamburger más chico */
	#cr-header-nav .cr-hamburger .zenth-mm-trigger__icon {
		width: 22px;
		height: 16px;
	}

	/* §9 · Header icons: gap + tamaño + svg reducidos */
	#cr-header-nav #cr-header-icons {
		gap: 4px !important;
	}

	#cr-header-nav #cr-header-icons .cr-header-icon,
	#cr-header-nav #cr-header-icons .zenth-header-icon {
		width: 34px;
		height: 34px;
	}

	#cr-header-nav #cr-header-icons .cr-header-icon svg,
	#cr-header-nav #cr-header-icons .zenth-header-icon svg {
		width: 20px;
		height: 20px;
	}
}


/* ──────────────────────── MOBILE-XS · max-width: 420px ────────────────── */
@media (max-width: 420px) {
	/* §8 · CTA ya oculto desde ≤1199 (header 3 zonas); lo reforzamos acá. */
	#cr-header-nav .cr-cta {
		display: none !important;
	}

	/* Logo centrado: un poco más chico en pantallas muy angostas. */
	#cr-header-nav .cr-logo img {
		max-height: 1.8rem;
	}
}

@media (max-width: 360px) {
    #cr-header-nav .cr-logo img {
        max-height: 1.5rem;
    }
}


/* ── DESKTOP-UP · min-width: 1200px (overflow visible para mega-paneles) ── */
@media (min-width: 1200px) {
	/* §1/§3 · Permitir desbordamiento para que los mega-paneles del nav
	   no queden recortados por el overflow del header/nav. */
	#cr-site-header,
	#cr-site-header.e-con,
	#cr-header-nav,
	#cr-header-nav.e-con {
		overflow: visible !important;
	}

	/* §12 · El wrapper del shortcode también debe permitir desbordamiento. */
	#cr-header-nav .elementor-widget-shortcode {
		overflow: visible !important;
	}
	#cr-header-nav .elementor-widget-shortcode .elementor-widget-container {
		overflow: visible !important;
	}

	/* §4/§6 · En desktop (≥1200px) el hamburger SIGUE visible junto con el
	   nav horizontal. Ambos menús coexisten: el hamburger abre el drawer
	   lateral con navegación completa, y el nav horizontal muestra los
	   mega-paneles al hover. */
}