/* Bravo – Ajustes del sitio */

:root {
	/* Rojo de marca algo más oscuro para texto blanco sobre rojo (y rojo sobre blanco): contraste ≥ 4,5:1. */
	--bravo-rojo-aa: color-mix(in srgb, var(--accent, #dd3333) 84%, #000);
}

/*
 * 1) Menú principal transparente fuera del inicio.
 * El encabezado "tipo 1" del tema es transparente porque en el inicio la portada pone detrás un fondo
 * blanco y rojo. En el resto de páginas (fichas, categorías, blog, carrito, Mi cuenta, 404) queda
 * encima de la foto oscura: letras azul marino sobre azul oscuro. Aquí se le da desde el principio el
 * mismo aspecto que tiene al bajar (barra blanca con el tramo rojo a la derecha).
 */
body:not(.home) .cs_site_header.cs_style_1.cs_type_1 {
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(2, 0, 181, .1), 0 6px 18px rgba(15, 28, 46, .06);
}
body:not(.home) .cs_site_header.cs_style_1.cs_type_1 .container::before {
	opacity: 1;
}

/*
 * 1b) Título del banner (fichas, categorías, blog…): con este menú el banner empieza detrás del menú fijo,
 * así que el título quedaba pegado arriba (e incluso bajo el menú) y sobraba espacio bajo las migas.
 * Se centra en la parte visible del banner, sin cambiar su alto (380 px). Menú: 110 px ≥1200 px, 90 px abajo.
 */
body:not(.home):has(.cs_site_header.cs_style_1.cs_type_1) .cs_page_heading {
	box-sizing: border-box;
	padding-top: 110px;
}
@media (max-width: 1199px) {
	body:not(.home):has(.cs_site_header.cs_style_1.cs_type_1) .cs_page_heading {
		padding-top: 90px;
	}
}
/* Celular: títulos de 2–3 líneas; el banner crece solo si hace falta para no tapar el título. */
@media (max-width: 767px) {
	body:not(.home):has(.cs_site_header.cs_style_1.cs_type_1) .cs_page_heading {
		height: auto;
		min-height: 380px;
		padding-top: 110px;
		padding-bottom: 30px;
	}
}

/* 2) Franja superior roja ("Bienvenido a Bravo Climatización"): texto blanco legible. */
.cs_site_header.cs_style_1 .cs_top_header .container::before,
.cs_site_header .cs_main_header.cs_accent_bg {
	background-color: var(--bravo-rojo-aa);
}

/* 3) Botón del encabezado ("Trabaja con nosotros"). */
.cs_site_header .cs_btn.cs_style_1:not(.cs_color_1) {
	background-color: var(--bravo-rojo-aa);
}
.cs_site_header .cs_btn.cs_style_1.cs_color_1 {
	color: var(--bravo-rojo-aa);
}

/* 4) Enlace activo / al pasar el mouse en el menú: rojo legible sobre blanco. */
.cs_site_header .cs_nav .cs_nav_list > li:hover > a,
.cs_site_header .cs_nav .cs_nav_list > li.current-menu-item > a,
.cs_site_header .cs_nav .cs_nav_list > li.current-menu-ancestor > a,
.cs_site_header .cs_nav .cs_nav_list ul li:hover > a {
	color: var(--bravo-rojo-aa);
}

/* 5) Foco visible al navegar con teclado. */
.cs_site_header a:focus-visible,
.cs_site_header button:focus-visible,
.cs_menu_toggle:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--primary, #1e73be) 60%, transparent);
	outline-offset: 3px;
	border-radius: 4px;
}