/**
 * Cabecera — Automovilismo desde casa
 *
 * Patrones validados en HIVE:
 *  - Sticky que se compacta al bajar, NUNCA se oculta.
 *  - Los iconos en su bloque con margin-left auto y 44 px de área de toque.
 *  - Móvil: hamburguesa, logo centrado, iconos; menú en panel lateral.
 */

:root {
	--hdn-granate: #800f10;
	--hdn-tinta: #1a1a1a;
	--hdn-linea: #e6e6e6;
	/* La barra sube de 84 a 94 px para que quepa un logo claramente más grande
	   sin que roce los bordes. Al compactar baja a 68, que sigue dando aire al
	   logo reducido. */
	--hdn-cab-alto: 94px;
	--hdn-cab-alto-min: 68px;
}

/* ---------- estructura ---------- */
.hdn-cab {
	position: sticky;
	top: 0;
	z-index: 9999;
	background: #fff;
	border-bottom: 1px solid var(--hdn-linea);
	transition: box-shadow .2s ease;
}

.hdn-cab.is-compacta { box-shadow: 0 2px 14px rgba(0, 0, 0, .1); }

/*
 * Tres zonas: logo a la izquierda, menú CENTRADO en la página, iconos a la
 * derecha.
 *
 * Va en rejilla `1fr auto 1fr` y no en flex porque así el menú queda centrado
 * respecto a la PÁGINA, no respecto al hueco que dejan logo e iconos: las
 * columnas laterales miden lo mismo pase lo que pase con el ancho del logo.
 *
 * La barra tiene cuatro hijos, pero solo hay TRES a la vez: en escritorio la
 * hamburguesa está oculta (logo · menú · iconos) y por debajo de 1100 px lo
 * está el menú (hamburguesa · logo · iconos). `display: none` saca el elemento
 * de la rejilla, así que la misma regla resuelve los dos casos y el logo queda
 * centrado en móvil sin posicionamiento absoluto.
 */
.hdn-cab__barra {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 20px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 24px;
	height: var(--hdn-cab-alto);
	transition: height .2s ease;
}

.hdn-cab__barra > .hdn-cab__logo,
.hdn-cab__barra > .hdn-cab__hamburguesa { justify-self: start; }
.hdn-cab__barra > .hdn-cab__nav { justify-self: center; }
.hdn-cab__barra > .hdn-cab__acciones { justify-self: end; }

.hdn-cab.is-compacta .hdn-cab__barra { height: var(--hdn-cab-alto-min); }

/* ---------- logo ---------- */
.hdn-cab__logo { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; }

/*
 * Doble clase OBLIGATORIA aquí. WooCommerce carga `.woocommerce img,
 * .woocommerce-page img { height: auto }` (0,1,1), que le ganaba a
 * `.hdn-cab__logo-img` (0,1,0) — pero SOLO en las páginas de tienda, porque es
 * donde se añade esa clase al body. Resultado: el logo medía 46 px en la home y
 * su tamaño natural, 168 px, en tienda, categoría, producto y carrito, y
 * reventaba la barra. Era el motivo de que la cabecera se viera distinta según
 * la sección.
 *
 * El PNG trae la MITAD de su alto en margen transparente: el dibujo solo ocupa
 * la franja central. Por eso el elemento puede casi llenar la barra sin que
 * nada roce los bordes — ese margen del propio archivo hace de aire. Subirlo de
 * 70 a 92 px casi duplica el logo VISIBLE sin engordar la cabecera.
 *
 * El original es de 2560x1435 y el tema sirve la versión de 300 px de ancho: a
 * 92 px de alto ocupa 164 px, o sea 1,8x de densidad. Sigue siendo nítido en
 * retina; si se quisiera más, habría que servir el tamaño `medium_large`.
 */
.hdn-cab .hdn-cab__logo-img {
	display: block;
	width: auto;
	height: 92px;
	max-width: 330px;
	object-fit: contain;
	transition: height .2s ease;
}

.hdn-cab.is-compacta .hdn-cab__logo-img { height: 64px; }

.hdn-cab__logo-texto { font-weight: 800; font-size: 17px; color: var(--hdn-tinta); text-transform: uppercase; }

/* ---------- menú de escritorio ---------- */
.hdn-cab__nav { flex: 1 1 auto; min-width: 0; }

.hdn-menu {
	display: flex;
	align-items: center;
	/* flex-wrap NO: el menú antes se partía en dos líneas y se comía el sitio
	   de los iconos. Si no cabe, se reduce el hueco y a partir de cierto ancho
	   pasa a hamburguesa. */
	flex-wrap: nowrap;
	gap: clamp(10px, 1.6vw, 26px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hdn-menu__item { position: relative; }

.hdn-menu__item > a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 10px 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--hdn-tinta);
	text-decoration: none;
	white-space: nowrap;
}

.hdn-menu__item > a:hover,
.hdn-menu__item > a:focus-visible { color: var(--hdn-granate); }

.hdn-menu__flecha { flex: 0 0 auto; opacity: .5; transition: transform .15s ease; }
.hdn-menu__item--con-hijos:hover .hdn-menu__flecha { transform: rotate(180deg); }

/* Submenú */
.hdn-submenu {
	position: absolute;
	top: 100%;
	left: -14px;
	min-width: 232px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--hdn-linea);
	box-shadow: 0 14px 34px rgba(0, 0, 0, .13);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.hdn-menu__item--con-hijos:hover > .hdn-submenu,
.hdn-menu__item--con-hijos:focus-within > .hdn-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.hdn-submenu .hdn-menu__item > a {
	display: block;
	padding: 9px 18px;
	font-size: 14px;
	white-space: normal;
}

.hdn-submenu .hdn-menu__item > a:hover { background: #faf5f5; }

/* Tercer nivel. El menú del original tiene 16 elementos aquí (por ejemplo
   Tienda › Simuladores Completos › principiantes / intermedio / profesionales).
   Se abre en cascada LATERAL: hacia abajo se saldría de la pantalla, porque el
   segundo nivel ya cuelga de la barra. */
.hdn-submenu .hdn-menu__item { position: relative; }

.hdn-submenu .hdn-submenu {
	top: -9px;
	left: 100%;
}

/* La flecha del segundo nivel apunta a la derecha, que es hacia donde abre.
   El primer selector lleva el `:hover` del ancestro porque la regla de arriba
   (`.hdn-menu__item--con-hijos:hover .hdn-menu__flecha`, 0,3,0) es descendente
   y giraba 180° TODAS las flechas anidadas al pasar por el elemento raíz. */
.hdn-menu__item--con-hijos:hover .hdn-submenu .hdn-menu__flecha,
.hdn-submenu .hdn-menu__flecha { transform: rotate(-90deg); }

/* ---------- iconos ---------- */
/* margin-left auto: el bloque de acciones se queda SIEMPRE pegado a la
   derecha, pase lo que pase con el menú (anti-patrón de iconos amontonados). */
.hdn-cab__acciones {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	flex: 0 0 auto;
}

.hdn-cab__accion,
.hdn-cab .hdn-buscador__abrir {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44 px de área de toque, aunque el icono mida 21. */
	width: 44px;
	height: 44px;
	color: var(--hdn-tinta);
	text-decoration: none;
	position: relative;
	border: 0;
	background: none;
	cursor: pointer;
}

.hdn-cab__accion:hover,
.hdn-cab__accion:focus-visible,
.hdn-cab .hdn-buscador__abrir:hover { color: var(--hdn-granate); }

/* Con el foco puesto, el tono normal de la cabecera. Va con tres clases por lo
   mismo que los demás controles: `.elementor-kit-9 button:focus` (0,2,1) lo
   ponía blanco, y como el buscador devuelve el foco a la lupa al cerrarse, el
   icono se volvía invisible justo después de usarlo. */
.hdn-cab .hdn-buscador__abrir:focus { color: var(--hdn-tinta); }

.hdn-cab__accion svg,
.hdn-cab .hdn-buscador__abrir svg { width: 21px; height: 21px; display: block; }

/* Contador del carrito */
.hdn-cab__contador {
	position: absolute;
	top: 6px;
	right: 4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--hdn-granate);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.hdn-cab__contador.is-vacio { display: none; }

/* ---------- hamburguesa ---------- */
/* El selector va DOBLE (`.hdn-cab .hdn-cab__hamburguesa`, especificidad 0,2,0)
   a propósito. El CSS del cliente trae `.elementor-kit-9 button { background:
   #800f10; padding: 21px }` (0,1,1), que se imprime DESPUÉS de esta hoja: con
   una sola clase empatábamos en peso y perdíamos por orden, y la hamburguesa
   salía como un bloque granate. Con dos clases gana esta regla sin `!important`
   y sin tocar el CSS del cliente, que es suyo y se edita en el personalizador. */
.hdn-cab .hdn-cab__hamburguesa {
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 4px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	/* Astra pinta `box-shadow: 0 1px 2px rgba(0,0,0,.05)` sobre todo `button`.
	   En un botón de fondo transparente eso no es relieve: es un recuadro
	   fantasma alrededor del icono, que los iconos vecinos (que son enlaces) no
	   tienen. */
	box-shadow: none;
	cursor: pointer;
	flex: 0 0 auto;
}

.hdn-cab__hamburguesa-linea {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--hdn-tinta);
	border-radius: 2px;
}

/* ---------- panel lateral ---------- */
.hdn-panel { position: fixed; inset: 0; z-index: 10000; }
.hdn-panel[hidden] { display: none; }

.hdn-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	transition: opacity .25s ease;
}

.hdn-panel.is-abierto::before { opacity: 1; }

.hdn-panel__caja {
	position: absolute;
	inset: 0 auto 0 0;
	width: min(86vw, 340px);
	background: #fff;
	transform: translateX(-100%);
	transition: transform .25s ease;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.hdn-panel.is-abierto .hdn-panel__caja { transform: translateX(0); }

.hdn-panel__cabeza {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	border-bottom: 1px solid var(--hdn-linea);
}

.hdn-panel__titulo { font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .08em; }

/* Doble clase: mismo motivo que la hamburguesa. Con una sola, el botón de
   cerrar salía como un bloque oscuro con la X aplastada por los 21 px de
   relleno del CSS del cliente. */
.hdn-panel .hdn-panel__cerrar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	cursor: pointer;
	color: var(--hdn-tinta);
}

.hdn-menu-movil,
.hdn-menu-movil__sub { list-style: none; margin: 0; padding: 0; }

.hdn-menu-movil__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid #f2f2f2;
}

.hdn-menu-movil__item > a {
	flex: 1 1 auto;
	padding: 15px 18px;
	font-size: 15px;
	color: var(--hdn-tinta);
	text-decoration: none;
}

/* Doble clase: sin esto los desplegables de submenú salían como bloques
   granates de 21 px de relleno y el menú móvil quedaba ilegible. */
.hdn-menu-movil .hdn-menu-movil__toggle {
	flex: 0 0 auto;
	width: 52px;
	height: 50px;
	padding: 0;
	border: 0;
	border-left: 1px solid #f2f2f2;
	background: none;
	box-shadow: none;
	cursor: pointer;
	color: #666;
}

.hdn-menu-movil__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.hdn-menu-movil__toggle svg { transition: transform .15s ease; }

.hdn-menu-movil__sub { flex: 1 0 100%; background: #fafafa; }
.hdn-menu-movil__sub[hidden] { display: none; }
.hdn-menu-movil__sub .hdn-menu-movil__item > a { padding-left: 34px; font-size: 14px; }
/* Tercer nivel: se sangra más para que se vea de quién cuelga. */
.hdn-menu-movil__sub .hdn-menu-movil__sub .hdn-menu-movil__item > a { padding-left: 52px; }
.hdn-menu-movil__sub .hdn-menu-movil__sub { background: #f4f4f4; }

body.hdn-menu-abierto { overflow: hidden; }

/* -------------------------------------------------------------------------
 * Estados de ratón y foco de los controles propios
 *
 * El CSS del cliente trae `.elementor-kit-9 button:hover, :focus {
 * background-color: var(--e-global-color-secondary) }` — negro — con
 * especificidad (0,2,1), que gana a las reglas base de arriba (0,2,0). Y el
 * panel mueve el foco al botón de cerrar en cuanto se abre (correcto para
 * accesibilidad), así que el botón salía NEGRO al abrir el menú. Con tres
 * clases (0,3,0) ganan estas, sin `!important` y sin tocar el CSS del cliente.
 * ---------------------------------------------------------------------- */
.hdn-cab .hdn-cab__hamburguesa:hover,
.hdn-cab .hdn-cab__hamburguesa:focus,
.hdn-panel .hdn-panel__cerrar:hover,
.hdn-panel .hdn-panel__cerrar:focus,
.hdn-menu-movil .hdn-menu-movil__toggle:hover,
.hdn-menu-movil .hdn-menu-movil__toggle:focus {
	background: none;
	box-shadow: none;
	padding: 0;
}

/* Y el color, que hay que devolverlo control por control porque cada uno tiene
   el suyo. Sin esto, el `color: white` del kit del cliente se aplicaba al
   pulsar: la flecha del desplegable se volvía blanca sobre fondo claro y
   desaparecía justo después de tocarla. */
.hdn-cab .hdn-cab__hamburguesa:hover,
.hdn-cab .hdn-cab__hamburguesa:focus,
.hdn-panel .hdn-panel__cerrar:hover,
.hdn-panel .hdn-panel__cerrar:focus { color: var(--hdn-tinta); }

.hdn-menu-movil .hdn-menu-movil__toggle:hover,
.hdn-menu-movil .hdn-menu-movil__toggle:focus { color: #666; }

/* Ese fondo negro estaba haciendo de indicador de foco por accidente. Al
   quitarlo hay que poner uno de verdad, o se navega a ciegas con el teclado.
   Va en `:focus-visible` a propósito: con el dedo o el ratón no aparece, con
   el teclado sí. Mismo anillo que ya usa la lupa del buscador. */
.hdn-cab .hdn-cab__hamburguesa:focus-visible,
.hdn-panel .hdn-panel__cerrar:focus-visible,
.hdn-menu-movil .hdn-menu-movil__toggle:focus-visible {
	outline: 2px solid var(--hdn-granate);
	outline-offset: -2px;
}

/* ---------- puntos de ruptura ---------- */
/* 1100 px: por debajo, el menú horizontal ya no cabe sin partirse. Antes de
   llegar ahí se pasa a hamburguesa, que es mejor que un menú roto. */
@media (max-width: 1100px) {
	/* Doble clase igual que la regla base: un media query NO suma especificidad,
	   así que con una sola clase esta regla perdía contra la base (0,2,0) y la
	   hamburguesa se quedaba en `display: none` también en móvil. */
	.hdn-cab .hdn-cab__hamburguesa { display: inline-flex; }
	.hdn-cab__nav { display: none; }
	/* El logo pasa a la columna del centro él solo: al ocultarse el menú, los
	   tres hijos que quedan son hamburguesa · logo · iconos. */
	.hdn-cab__barra > .hdn-cab__logo { justify-self: center; }
}

@media (max-width: 782px) {
	:root { --hdn-cab-alto: 70px; --hdn-cab-alto-min: 58px; }

	.hdn-cab__barra { padding: 0 12px; gap: 8px; }

	/* En móvil el tope no es la altura, es el ANCHO: con la rejilla `1fr auto 1fr`
	   las columnas laterales miden lo mismo, y si el logo crece de 82 px de ancho
	   la columna de los iconos (126 px = 3 x 42) deja de caber y el logo se
	   descentra. 46 px de alto son 82 px de ancho: el máximo que queda centrado
	   exacto sin recortar el área de toque de los iconos. */
	.hdn-cab .hdn-cab__logo-img { height: 46px; max-width: 82px; }
	.hdn-cab.is-compacta .hdn-cab__logo-img { height: 40px; }

	.hdn-cab__acciones { gap: 0; }
	.hdn-cab__accion,
	.hdn-cab .hdn-buscador__abrir { width: 42px; height: 42px; }

	/* La lista de deseos se deja fuera en móvil: con cuatro iconos no queda
	   área de toque suficiente, que es el defecto registrado en HIVE. */
	.hdn-cab__acciones .hdn-cab__accion:nth-child(3) { display: none; }
}

/* La cabecera de Astra y la de Elementor no deben pintarse: manda esta. */
.ast-above-header,
.ast-main-header-wrap,
.site-header .main-header-bar-wrap,
.elementor-location-header { display: none !important; }