/* ---------------------------------------------------------------------------
 * Cabecera
 *
 * La barra, el menú de escritorio con sus paneles, el de teléfono con su
 * acordeón, el hueco de acciones y el botón del carrito que va ahí.
 *
 * Salió de insuplagas-site-ui.css, que tenía 2.872 renglones con la cabecera,
 * el carrito, el inicio y dos páginas sueltas adentro. El contenido se mudó tal
 * cual, sin reescribir una regla: lo único nuevo es este encabezado. El orden
 * relativo entre archivos lo fija la cadena de dependencias del encolado, en
 * insuplagas-assets.php.
 * ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
 * Cabecera sobre Hello.
 *
 * Reemplaza a los 112 selectores apuntados al marcado de Goya, que van saliendo
 * a medida que se confirma que nada los necesita. Los valores no son inventados:
 * salen de los theme_mods que rescatamos a docs/tema/theme-mods.json, que son
 * los que tenía el sitio con Goya.
 *
 *   alto 90 px en escritorio / 60 en teléfono
 *   logo 75 px / 50 px
 *   fondo blanco, enlaces #444, activo y hover en negro
 *
 * La fijación al hacer scroll es position: sticky y no position: fixed. Goya
 * usaba fixed, y por eso necesitaba un .header-spacer que reservara el alto en
 * cada plantilla —de ahí los 116 px que aparecían en el CSS del catálogo—. Con
 * sticky la cabecera sigue ocupando su lugar en el flujo y ese andamiaje entero
 * deja de hacer falta.
 * ------------------------------------------------------------------------ */
.insu-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: #fff;
	border-bottom: 1px solid var(--insu-color-border-soft);
}

/*
 * La cabecera va de borde a borde y no encajonada en el ancho del contenido.
 *
 * Antes compartía el contenedor de 1320px con el cuerpo de la página, así que
 * el logo arrancaba a la misma altura que el primer producto y las acciones
 * terminaban a la misma altura que el último. En pantallas anchas eso deja la
 * barra flotando en el medio con dos franjas vacías a los costados.
 *
 * El margen lateral es un clamp y no un ancho fijo: acompaña la pantalla en vez
 * de recortarla.
 */
.insu-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	min-height: 90px;
	margin: 0;
	padding: 0 clamp(1rem, 2.6vw, 2.5rem);
}

.insu-header__marca {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.insu-header__marca .site-logo a,
.insu-header__marca .site-logo img {
	display: block;
}

.insu-header__marca img {
	width: auto;
	height: 75px;
	max-height: 75px;
	object-fit: contain;
}

/* --- menú de escritorio --- */
.insu-header__nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: flex-end;
}

.insu-header__nav ul {
	display: flex;
	align-items: center;
	gap: clamp(.9rem, 1.8vw, 1.9rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.insu-header__nav li {
	position: relative;
	margin: 0;
}

.insu-header__nav a {
	display: block;
	padding: .4rem 0;
	color: #444;
	font-family: var(--insu-font-heading);
	font-size: .95rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s ease;
}

.insu-header__nav a:hover,
.insu-header__nav a:focus-visible,
.insu-header__nav .current-menu-item > a,
.insu-header__nav .current-menu-ancestor > a,
.insu-header__nav .current-product-ancestor > a {
	color: #000;
}

/* Submenús: se abren al pasar por encima, como en Goya. */
.insu-header__nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	display: block;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	min-width: 15rem;
	padding: .5rem 0;
	background: #fff;
	border: 1px solid var(--insu-color-border-soft);
	border-radius: var(--insu-radius-md);
	box-shadow: var(--insu-shadow-soft);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	/*
	 * La demora al cerrar es corta pero no cero: da tiempo a bajar del rótulo
	 * al panel sin que se cierre en el camino.
	 */
	transition: opacity .14s ease .12s, transform .14s ease .12s, visibility .14s .12s;
}

/*
 * Y al abrir hay una espera de 220 ms.
 *
 * Sin ella el panel salta apenas el mouse toca el rótulo, y como estos paneles
 * son anchos —el del catálogo mide más de 500 píxeles— cualquier paso del mouse
 * camino al buscador o al carrito los dispara. Se lee como si el menú se
 * abriera solo. Con la espera hay que quedarse: un roce al pasar no alcanza.
 */
.insu-header__nav li:hover > .sub-menu,
.insu-header__nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: .22s;
}

.insu-header__nav .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}

.insu-header__nav .sub-menu a {
	padding: .5rem 1rem;
	font-size: .9rem;
	white-space: normal;
}

.insu-header__nav .sub-menu a:hover,
.insu-header__nav .sub-menu a:focus-visible {
	background: var(--insu-color-surface-soft);
	color: var(--insu-color-accent);
}

/* --- panel ancho para las ramas con nietos --- */

/*
 * "Catálogo" y "Contenido" tienen tres niveles. Con el submenú angosto de
 * arriba, llegar a "CONTROL DE ROEDORES" pedía apoyar el mouse en el primer
 * nivel, correrlo al segundo sin salirse, esperar a que abriera de costado y
 * recién ahí elegir. Ese recorrido en diagonal es el que más se falla, y en una
 * pantalla táctil directamente no existe.
 *
 * Marcados con insu-menu-ancho —lo hace insuplagas_hello_ajustar_menu() leyendo
 * la estructura, no una lista de identificadores—, se abren como un panel de
 * columnas con los nietos ya desplegados. Un solo movimiento hasta el destino.
 */
.insu-header__nav .insu-menu-ancho > .sub-menu {
	left: 50%;
	display: flex;
	/*
	 * La regla general de los submenús deja flex-direction en column, que ahí
	 * no se nota porque están en display:block. Acá sí: sin esta línea las tres
	 * columnas se apilan una debajo de la otra y el panel queda igual de
	 * angosto que el submenú de siempre, sólo que más alto.
	 */
	flex-direction: row;
	gap: 1.75rem;
	min-width: max-content;
	max-width: min(46rem, 88vw);
	padding: 1.35rem 1.6rem;
	transform: translate(-50%, 4px);
}

.insu-header__nav .insu-menu-ancho:hover > .sub-menu,
.insu-header__nav .insu-menu-ancho:focus-within > .sub-menu {
	transform: translate(-50%, 0);
	transition-delay: .22s;
}

.insu-header__nav .insu-menu-ancho > .sub-menu > li {
	flex: 0 1 auto;
	min-width: 9rem;
}

/* El encabezado de cada columna: es un enlace y además rotula lo de abajo. */
.insu-header__nav .insu-menu-ancho > .sub-menu > li > a {
	padding: 0 0 .5rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--insu-color-ink);
	border-bottom: 1px solid var(--insu-color-border-soft);
}

.insu-header__nav .insu-menu-ancho > .sub-menu > li > a:hover,
.insu-header__nav .insu-menu-ancho > .sub-menu > li > a:focus-visible {
	background: none;
	color: var(--insu-color-accent);
}

/*
 * Los nietos dejan de ser un submenú flotante y pasan a ser la columna. En
 * estático el top/left de la regla general no aplica, así que no hay que
 * deshacerlo pieza por pieza.
 */
.insu-header__nav .insu-menu-ancho > .sub-menu .sub-menu {
	position: static;
	min-width: 0;
	padding: .45rem 0 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: none;
}

.insu-header__nav .insu-menu-ancho > .sub-menu .sub-menu a {
	padding: .3rem .5rem .3rem 0;
	font-size: .85rem;
	text-transform: none;
	letter-spacing: 0;
	color: var(--insu-color-text-muted);
}

.insu-header__nav .insu-menu-ancho > .sub-menu .sub-menu a:hover,
.insu-header__nav .insu-menu-ancho > .sub-menu .sub-menu a:focus-visible {
	background: none;
	color: var(--insu-color-accent);
}

/* --- acciones: buscador, carrito de cotización y hamburguesa --- */

/*
 * El orden visual se fija acá y no en el marcado porque las tres piezas no las
 * pone el mismo lado: el buscador lo imprime su mu-plugin en el hook, la
 * hamburguesa la imprime la plantilla, y el carrito lo agrega
 * insuplagas-site-ui.js al final cuando la página ya está dibujada. Ordenar por
 * CSS deja que cada uno siga apareciendo cuando le toca sin que el resultado
 * dependa de quién llegó primero.
 */
.insu-header__acciones {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: .5rem;
}

.insu-header__acciones .insu-buscador__abrir { order: 1; }
.insu-header__acciones .insu-cart-trigger { order: 2; }
.insu-header__acciones .insu-header__hamburguesa { order: 3; }

.insu-header__hamburguesa {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--insu-color-border-control);
	border-radius: var(--insu-radius-md);
	background: #fff;
	/* Nunca tenía color propio, así que heredaba el #c36 de la regla genérica
	   de botones del tema. No se notaba porque las tres rayas están dibujadas
	   con background y no con color, pero el foco sí lo mostraba. */
	color: var(--insu-color-ink);
	cursor: pointer;
}

.insu-header__hamburguesa:hover,
.insu-header__hamburguesa:focus-visible {
	background: var(--insu-color-surface-soft);
	border-color: var(--insu-color-ink-muted);
}

/* Las tres rayas, dibujadas con bordes: sin imagen ni icono externo. */
.insu-header__hamburguesa-icono,
.insu-header__hamburguesa-icono::before,
.insu-header__hamburguesa-icono::after {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--insu-color-ink);
	border-radius: 2px;
}

.insu-header__hamburguesa-icono {
	position: relative;
}

.insu-header__hamburguesa-icono::before,
.insu-header__hamburguesa-icono::after {
	content: '';
	position: absolute;
	left: 0;
}

.insu-header__hamburguesa-icono::before { top: -6px; }
.insu-header__hamburguesa-icono::after { top: 6px; }

/* --- menú de teléfono --- */
.insu-header__movil {
	display: block;
	border-top: 1px solid var(--insu-color-border-soft);
	background: #fff;
	max-height: calc(100vh - 60px);
	overflow-y: auto;
}

.insu-header__movil[hidden] {
	display: none;
}

.insu-header__movil ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.insu-header__movil li {
	margin: 0;
	border-bottom: 1px solid var(--insu-color-border-soft);
}

/*
 * Las ramas arrancan cerradas.
 *
 * El menú tiene 27 ítems en tres niveles: dibujados todos abiertos, la lista
 * empieza con siete plagas y cinco videos desplegados y hay que hacer scroll
 * para llegar a "Nosotros". El JS le pone insu-abierto al tocar.
 */
.insu-header__movil .sub-menu {
	display: none;
	border-top: 1px solid var(--insu-color-border-soft);
	background: var(--insu-color-surface-soft);
}

.insu-header__movil .insu-abierto > .sub-menu {
	display: block;
}

/*
 * El ítem con hijos es una fila con dos zonas: el rótulo, que navega o abre, y
 * el botón del triángulo, que sólo abre. Son dos objetivos separados para el
 * dedo, cada uno de 44 píxeles de alto.
 */
.insu-header__movil .insu-tiene-hijos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.insu-header__movil .insu-tiene-hijos > a {
	flex: 1 1 auto;
	min-width: 0;
}

.insu-header__movil .insu-tiene-hijos > .sub-menu {
	flex: 1 1 100%;
}

.insu-header__movil-abrir {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	min-height: 44px;
	align-self: stretch;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--insu-color-border-soft);
	background: none;
	color: var(--insu-color-ink);
	cursor: pointer;
}

/* El triángulo, dibujado con bordes: sin imagen ni fuente de iconos. */
.insu-header__movil-abrir::before {
	content: '';
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	transition: transform .16s ease;
}

.insu-header__movil-abrir[aria-expanded="true"]::before {
	transform: rotate(180deg);
}

.insu-header__movil-abrir:hover,
.insu-header__movil-abrir:focus-visible {
	background: var(--insu-color-surface-soft);
	color: var(--insu-color-accent);
}

.insu-header__movil a {
	display: block;
	min-height: 44px;
	padding: .8rem min(6vw, 1.5rem);
	color: var(--insu-color-ink);
	font-family: var(--insu-font-heading);
	font-size: .95rem;
	line-height: 1.3;
	text-decoration: none;
}

.insu-header__movil .sub-menu a {
	padding-left: min(10vw, 2.5rem);
	font-size: .9rem;
	color: var(--insu-color-ink-soft);
}

@media (max-width: 1024px) {
	.insu-header__inner {
		min-height: 60px;
	}

	.insu-header__marca img {
		height: 50px;
		max-height: 50px;
	}

	.insu-header__nav {
		display: none;
	}

	.insu-header__hamburguesa {
		display: inline-flex;
	}

	/*
	 * Los tres botones de la cabecera al mismo tamaño y no menos de 44.
	 * La lupa y el carrito median 42 y la hamburguesa 44: además de verse
	 * desparejos, 42 queda por debajo del mínimo que recomiendan Apple y
	 * Google para algo que se toca con el dedo.
	 */
	.insu-header__acciones > * {
		min-width: 44px;
		min-height: 44px;
	}
}

/* Con el menú abierto el fondo no se mueve. */
body.insu-menu-movil-abierto {
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Carrito de cotización en la cabecera nueva.
 *
 * Es el mismo botón de siempre, con el mismo diseño; lo único que cambia es de
 * qué cuelga. Estaba escrito bajo #header.site-header, que es el id que le pone
 * Goya a su cabecera —Hello usa #site-header—, así que al cambiar de tema el
 * botón aparecía como una caja vacía. Es la conversión principal del sitio: se
 * mantiene el aspecto exacto y no se aprovecha para rediseñarlo.
 *
 * Las reglas viejas siguen en su lugar mientras el sitio en vivo corra Goya.
 * ------------------------------------------------------------------------ */
.insu-header__acciones .insu-cart-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid rgba(1, 15, 108, 0.2);
	border-radius: 999px;
	color: var(--insu-color-brand-blue);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.82) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}

.insu-header__acciones .insu-cart-trigger:hover,
.insu-header__acciones .insu-cart-trigger:focus-visible {
	transform: translateY(-1px);
	border-color: rgba(164, 44, 23, 0.32);
	color: var(--insu-color-accent);
	background: linear-gradient(180deg, #ffffff 0%, var(--insu-color-accent-soft) 100%);
	box-shadow: 0 8px 18px rgba(1, 15, 108, 0.16);
}

.insu-header__acciones .insu-cart-trigger__icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
}

.insu-header__acciones .insu-cart-trigger__icon svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.insu-header__acciones .insu-cart-count {
	position: absolute;
	top: -4px;
	right: -4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--insu-color-brand-red);
	color: #fff;
	font-family: var(--insu-font-heading);
	font-size: .67rem;
	font-weight: 700;
	line-height: 1;
}