/*
 * Cabecera (plantilla 168 de Elementor). Escritorio: barra de 25 px y una fila de 110 px (logo, navegación
 * centrada, iconos) en la caja de 1140 px, con la sombra de hoy. Hasta 1024 px, el corte de tableta de Elementor:
 * logo y botón de menú arriba, iconos en una segunda fila y la navegación desplegable encima.
 * Cotas medidas sobre la web actual: Plan 2, Tarea 4.
 */
.cabecera { position: relative; z-index: 20; }

.cabecera__aviso {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 25px;
	margin: 0;
	padding: 2px 10px;
	background: var(--rosa);
	color: var(--burdeos); /* D10: el blanco daba 3,26:1 con texto de 13 px; el burdeos, 4,55:1 */
	font: 500 13px/20px var(--letra);
	letter-spacing: -.2px;
	text-align: center;
	text-transform: uppercase;
}

.cabecera__barra { box-shadow: var(--sombra); }

.cabecera__fila {
	position: relative;
	display: grid;
	/* Los iconos, en el contenedor del 20 % de Elementor (228 px de 1140, x=1062-1290), y la navegación centrada en lo
	   que queda: la primera entrada en x=407, como hoy. minmax: si no caben, la columna crece en vez de desbordar. */
	grid-template-columns: auto 1fr minmax(20%, auto);
	align-items: center;
	min-height: 110px;
}

.cabecera__logo { display: block; padding-top: 10px; } /* margen superior de 10 px en Elementor */
.cabecera__logo img { width: auto; height: 60px; }

.cabecera__menu { display: none; }

.navegacion__lista { display: flex; justify-content: center; margin: 0; padding: 0; list-style: none; }
.navegacion__item { position: relative; display: flex; align-items: center; }

.navegacion__enlace,
.desplegable__boton {
	display: flex;
	align-items: center;
	gap: 5px;
	min-height: 40px;
	padding: 8px 16px;
	border: 0;
	background: none;
	color: var(--rosa-texto); /* D10: texto de 16 px sobre fondo claro */
	font: 500 16px/24px var(--letra);
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
}
.navegacion__enlace:hover,
.desplegable__boton:hover { color: var(--amarillo); text-decoration: none; }
/* El activo burdeos está configurado en Elementor y hoy no se ve (anexo §8.1). */
.navegacion__enlace[aria-current="page"] { color: var(--burdeos); }
/* CAFÉ: enlace y flecha juntos, como hoy («CAFÉ ▾» mide 93 px). */
.navegacion__item--cafe .navegacion__enlace { padding-right: 0; }
.navegacion__item--cafe .desplegable__boton { min-width: 24px; padding-left: 5px; }
/* La flecha ocupa una caja de 16 px, como hoy; el glifo, de 10×16, va centrado en ella. */
.desplegable__boton .icono { width: 16px; height: 16px; transition: transform .2s; }
.desplegable__boton[aria-expanded="true"] .icono { transform: rotate(180deg); }

/*
 * Paneles: los contenedores «Elemento 1» (CAFÉ) y «Elemento 2» (ESENCIAS) de la plantilla 168. Relleno de 10 px en
 * el panel y en cada columna, y 20 px entre el título y el texto, el espacio entre widgets de Elementor.
 */
.desplegable__panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	display: grid;
	grid-template-columns: repeat(3, 33%); /* CAFÉ: tres columnas del 33 % de 700 px, sin hueco */
	width: 720px;
	padding: 10px;
	background: #fff;
}
.desplegable__panel:not(.abierto) { display: none; }
/* Bajo su entrada: hoy se abre pegado al borde izquierdo y tapa el logo (Plan 2, Tarea 4). Tres columnas iguales,
   con el hueco de 20 px por defecto de los contenedores de Elementor. */
.navegacion__item--esencias .desplegable__panel { grid-template-columns: repeat(3, 1fr); column-gap: 20px; width: 623px; }

.desplegable__terminos { margin: 0; padding: 10px; list-style: none; }
.navegacion__item--cafe .desplegable__terminos { padding: 5px; } /* la columna del listing de CAFÉ lleva 5 px */
/* La rejilla de JetEngine de ESENCIAS, con su hueco por defecto (margin: 0 -10px), corre los términos 10 px a la
   izquierda; la de CAFÉ tiene el hueco a 0. */
.navegacion__item--esencias .desplegable__terminos { padding-left: 0; }
.desplegable__terminos a {
	display: block;
	padding: 10px 0;
	color: var(--rosa-texto);
	font: 500 14px/20px var(--letra);
	text-transform: uppercase;
}
.desplegable__texto { padding: 10px; }
.desplegable__texto p { margin: 0; color: var(--cuerpo); font: 400 14px/1.2 var(--letra); letter-spacing: -.2px; }
.desplegable__texto .desplegable__titulo { margin-bottom: 20px; color: var(--enfasis); font: 600 16px/20px var(--letra); letter-spacing: 0; text-transform: uppercase; }
/* El widget de imagen en su columna de 10 px de relleno: a todo el ancho en CAFÉ (211×158) y al 72 %, centrado, en
   ESENCIAS. */
.desplegable__imagen { width: calc(100% - 20px); height: auto; margin: 10px; }
.navegacion__item--esencias .desplegable__imagen { width: calc((100% - 20px) * .72); margin: 10px auto; }

.cabecera__iconos {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	min-height: 52px; /* el contenedor de iconos de Elementor */
	padding: 10px;
}
.cabecera__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px; /* WCAG 2.5.8: 24 px de objetivo alrededor del icono de 20 px de hoy */
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--rosa); /* 3,26:1: basta para un icono (WCAG 1.4.11 pide 3:1) */
	cursor: pointer;
}
.cabecera__icono .icono { width: 20px; height: 20px; }

.buscador { padding: 10px; }
.buscador:not(.abierto) { display: none; }
.buscador__formulario { max-width: 450px; margin: 0 auto; }
/* Con la clase del contenedor: input[type="search"] de base.css (0,1,1) ganaba a la clase sola y su font abreviado
   dejaba el peso en 400 y el color en negro. */
.buscador .buscador__campo { color: #2a2a2a; font-weight: 300; letter-spacing: -.2px; }

@media (max-width: 1024px) {
	.cabecera__fila {
		grid-template-columns: 1fr auto;
		grid-template-areas: "logo menu" "iconos iconos";
		row-gap: 20px;
		min-height: 0;
		padding: 30px 20px 20px;
	}
	.cabecera__logo { grid-area: logo; padding-top: 0; }
	.cabecera__logo img { width: 300px; height: 90px; object-fit: contain; }
	.cabecera__menu {
		grid-area: menu;
		align-self: start; /* la × en y=85-105, como hoy: el desplegable, que empieza en 105, no la tapa */
		margin-top: 18px;
		margin-right: -7px; /* y en x=345-365, como hoy: el botón de 44 px entra 7 px en el relleno de 20 */
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: none;
		color: #201f24;
		cursor: pointer;
	}
	.cabecera__menu .icono { width: 20px; height: 20px; }
	.cabecera__menu[aria-expanded="true"] .icono--menu,
	.cabecera__menu[aria-expanded="false"] .icono--cerrar { display: none; }
	.cabecera__iconos { grid-area: iconos; justify-content: space-evenly; gap: 30px; }
	/* Desplegable sobre la página, justo bajo el icono del menú (y=105), como el de Elementor. */
	.navegacion { position: absolute; top: 80px; left: 0; right: 0; z-index: 25; background: #fff; }
	.navegacion:not(.abierto) { display: none; }
	.navegacion__lista { flex-direction: column; align-items: center; } /* 5 entradas de 40 px: 200 px, como hoy */
	.navegacion__item { flex-wrap: wrap; justify-content: center; }
	.desplegable__panel,
	.navegacion__item--esencias .desplegable__panel {
		position: static;
		flex-basis: 100%;
		width: 100%;
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}
	.navegacion__item--esencias .desplegable__terminos { padding-left: 10px; } /* centrados: sin el corrimiento de JetEngine */
	.desplegable__imagen,
	.navegacion__item--esencias .desplegable__imagen { width: 200px; margin: 10px auto; }
}

/* Pastilla del carrito: rosa con el subtotal y la burbuja burdeos del número. D10: el texto de 14 px pasa de
   blanco (3,26:1) a burdeos (4,55:1). Al pasar el ratón, fondo burdeos y texto blanco, como hoy.
   A la derecha, el hueco del icono de hoy, que está a 1 px (toggle_icon_size) tras 10 px de separación
   (toggle_icon_spacing): 10 + 1 + 10 de relleno. Mide 77×32 con «0,00 €», como hoy; el icono es de la fase B
   (anexo §8.1, «El icono del carrito está a 1 px»). El margen deja el corazón a 20 px, como hoy, y los iconos en
   x=1083, 1123 y 1163: el hueco de 16 px entre iconos más los 2 px de la caja de 24 dejaban 18. */
.cabecera__carrito {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	margin-left: 2px;
	padding: 5px 21px 5px 10px;
	border: 1px solid var(--rosa);
	border-radius: 5px;
	background: var(--rosa);
	color: var(--burdeos);
	font: 600 14px/20px var(--letra);
	text-transform: uppercase;
	cursor: pointer;
}
.cabecera__carrito:hover { border-color: var(--burdeos); background: var(--burdeos); color: #fff; }
.cabecera__carrito-cantidad {
	position: absolute;
	top: -5px;
	right: -10px; /* 4 px por encima y 9 por la derecha de la pastilla, como hoy */
	min-width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--burdeos);
	color: #fff;
	font: 600 10px/16px var(--letra);
	text-align: center;
}

/* Panel lateral del mini-carrito (<dialog>): a la derecha, a toda la altura, sobre la página oscurecida. */
.mini-carrito {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(350px, 90vw);
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	border: 0;
	background: #fff;
}
.mini-carrito::backdrop { background: rgba(0, 0, 0, .25); }
.mini-carrito__dentro { min-height: 100%; padding: 60px 20px 20px; } /* llena el diálogo: solo el fondo cierra */
.mini-carrito__cerrar {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--burdeos);
	cursor: pointer;
}
.mini-carrito__cerrar .icono { width: 20px; height: 20px; }
/* Selectores de tres clases: en las páginas de WooCommerce el body lleva .woocommerce, y sus reglas
   (.woocommerce ul.cart_list li img, .woocommerce a.remove…) ganarían a unas de dos. */
.mini-carrito .woocommerce-mini-cart { margin: 0; padding: 0; list-style: none; }
.mini-carrito .woocommerce-mini-cart .woocommerce-mini-cart-item {
	position: relative;
	min-height: 90px;
	margin: 0 0 20px;
	padding: 0 34px 20px 90px;
	border-bottom: 1px solid #d5d8dc;
}
.mini-carrito .woocommerce-mini-cart .woocommerce-mini-cart-item img {
	position: absolute;
	top: 0;
	left: 0;
	float: none;
	width: 70px;
	height: auto;
	margin: 0;
	box-shadow: none;
}
.mini-carrito .woocommerce-mini-cart .woocommerce-mini-cart-item > a:not(.remove) {
	display: block;
	color: var(--enfasis);
	font: 600 18px/20px var(--letra);
	text-decoration: none;
	text-transform: uppercase;
}
.mini-carrito .woocommerce-mini-cart .woocommerce-mini-cart-item .quantity {
	display: block;
	margin-top: 20px;
	color: var(--burdeos);
	font: 600 16px/20px var(--letra);
}
/* «Eliminar»: hoy un círculo amarillo #E9C151 (1,72:1, anexo §8.6); burdeos (14,8:1) y 24 px de objetivo. */
.mini-carrito .woocommerce-mini-cart .woocommerce-mini-cart-item a.remove {
	position: absolute;
	top: 50%;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 1px solid var(--burdeos);
	border-radius: 50%;
	background: none;
	color: var(--burdeos) !important; /* WooCommerce lo pinta rojo con !important */
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	transform: translateY(-50%);
}
.mini-carrito .woocommerce-mini-cart .woocommerce-mini-cart-item a.remove:hover { background: var(--burdeos); color: #fff !important; }
.mini-carrito .widget_shopping_cart_content .woocommerce-mini-cart__total {
	margin: 0;
	padding: 10px 0 20px;
	border-bottom: 1px solid #d5d8dc;
	font: 400 16px/20px var(--letra);
	text-align: center;
}
.mini-carrito .widget_shopping_cart_content .woocommerce-mini-cart__total strong { font-weight: 600; text-transform: uppercase; }
.mini-carrito .widget_shopping_cart_content .woocommerce-mini-cart__buttons {
	display: flex;
	align-items: flex-start; /* cada uno con su alto, como hoy: «FINALIZAR COMPRA» ocupa dos líneas y el otro no */
	gap: 19px;
	margin: 20px 0 0;
}
.mini-carrito .widget_shopping_cart_content .woocommerce-mini-cart__buttons .button {
	display: inline-flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 5px;
	border: 0;
	border-radius: 5px;
	font: 500 16px/20px var(--letra);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}
/* D10: botón rosa con texto blanco grande y en negrita. */
.mini-carrito .widget_shopping_cart_content .woocommerce-mini-cart__buttons .button:not(.checkout) {
	background: var(--rosa);
	color: #fff;
	font-size: 19px;
	font-weight: 700;
}
.mini-carrito .widget_shopping_cart_content .woocommerce-mini-cart__buttons .checkout { background: var(--burdeos); color: #fff; }
.mini-carrito .widget_shopping_cart_content .woocommerce-mini-cart__empty-message { text-align: center; text-transform: uppercase; }
/* El tema hijo oculta la etiqueta de impuestos (style.css:364): hoy se ve «20,00 €», sin «(incl. impuestos)».
   Aquí, en la pastilla y en el panel; en las páginas de compra, en compra.css. */
.cabecera__carrito .tax_label,
.mini-carrito .tax_label { display: none; }