/* ============================================================================
   CABECERA — Mis Amigos Los Animalitos
   Barra de confianza, cabecera pegajosa, navegación por especie y panel móvil.

   Reglas de la dirección visual que manda este archivo:
   · El blanco manda. Las separaciones son líneas de 1 px, nunca fondos grises.
   · Un solo color de acción: --ma-teal-600.
   · Nada de sombras duras: --ma-sh-soft y --ma-sh-lift.
   · Movimiento con var(--ma-ease). Nunca linear ni ease-in-out.
   · Cero !important y cero estilos en línea.

   Depende de base.css (tokens, botones, utilidades) y no redefine ningún token.
   ========================================================================== */

/* ============================================================================
   1. BARRA DE CONFIANZA (la imprime ma_the_trust_bar())
   Tinta oscura a sangre. No es pegajosa: al bajar desaparece y deja la
   cabecera blanca sola.
   ========================================================================== */
.ma-confianza {
	background: var(--ma-ink-900);
	color: var(--ma-paper);
	font-size: var(--ma-fs-xs);
	line-height: 1.4;
}

.ma-confianza__interior {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1.6rem;
	min-height: 2.15rem;
	padding-block: 0.32rem;
}

.ma-confianza__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	white-space: nowrap;
	letter-spacing: 0.01em;
}

.ma-confianza__item .ma-icon {
	color: var(--ma-teal-300);
	opacity: 0.95;
}

/* Pantallas chicas: una sola tira, sin partir palabras ni encoger el texto. */
@media (max-width: 44rem) {
	.ma-confianza {
		font-size: 0.6875rem;
		overflow: hidden;
	}

	.ma-confianza__interior {
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-block: 0.4rem;
	}

	.ma-confianza__interior::-webkit-scrollbar { display: none; }
}

/* ============================================================================
   2. CABECERA PEGAJOSA
   Fondo blanco translúcido con desenfoque de lo que pasa por debajo. El estado
   `--pegada` lo pone header.js cuando la barra de confianza ya salió de vista;
   nunca se anima con scroll escuchado píxel a píxel, solo se alterna una clase.
   ========================================================================== */
.ma-cabecera {
	position: sticky;
	top: 0;
	z-index: var(--ma-z-sticky);
	background: rgba(255, 255, 255, .88);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: var(--ma-line);
	transition: box-shadow var(--ma-t-base) var(--ma-ease);
}

/* Navegadores sin backdrop-filter: sin desenfoque, el blanco tiene que ser
   opaco o el texto quedaría ilegible sobre el contenido que pasa por detrás. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.ma-cabecera { background: var(--ma-paper); }
}

.ma-cabecera--pegada {
	box-shadow: var(--ma-sh-soft);
}

/* --- La fila: marca · buscador · acciones --------------------------------- */
.ma-cabecera__fila {
	display: flex;
	align-items: center;
	gap: clamp(0.85rem, 2.2vw, 2.25rem);
	min-height: 4.5rem;
	padding-block: 0.7rem;
}

/* --- La marca ------------------------------------------------------------- */
.ma-cabecera__marca { flex: none; }

.ma-cabecera__logo,
.ma-marca {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	color: var(--ma-ink-900);
	transition: color var(--ma-t-fast) var(--ma-ease);
}

.ma-cabecera__logo:hover,
.ma-marca:hover { color: var(--ma-teal-700); }

/*
 * La especificidad no es un detalle estético aquí.
 *
 * woocommerce-layout.css trae `.woocommerce img, .woocommerce-page img
 * { height: auto; max-width: 100% }` — especificidad (0,1,1). Una sola clase
 * nuestra, (0,1,0), pierde aunque header.css se cargue después: el empate no
 * existe, gana el plugin. El `height: auto` anula los 2.6rem, el logo se va a
 * su tamaño natural y la cabecera pasa de ~90px a 645px.
 *
 * Consecuencia real y medida: en el carrito y en el checkout (body con clase
 * `woocommerce-page`) el contenido queda DETRÁS de la cabecera pegajosa y es
 * imposible comprar. Justo la página que da dinero.
 *
 * Las dos variantes cualificadas suben a (0,2,0) y ganan. Se aplican al propio
 * <img>, así cubren los tres sitios donde se imprime la marca —cabecera, panel
 * móvil y pie— sin depender de la clase del contenedor de cada uno.
 */
.ma-marca__logo,
.woocommerce .ma-marca__logo,
.woocommerce-page .ma-marca__logo {
	width: auto;
	/*
	 * 3.5rem = 56 px. Antes 2.6rem (41,6 px): un 35 % más, dentro del 30-50 %
	 * que pidió el cliente. La marca es lo primero que identifica la tienda y
	 * estaba compitiendo en tamaño con el buscador, que es el protagonista de la
	 * cabecera pero no el dueño de la esquina.
	 *
	 * Cabe sin apretar: la cabecera mide 124 px y el logo 56 px, así que sigue
	 * habiendo aire arriba y abajo sin tocar la altura de la barra.
	 */
	height: 3.5rem;
	border-radius: 0.75rem;
	object-fit: contain;
}

.ma-marca__nombre {
	font-family: var(--ma-font-display);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	max-width: 14ch;
	text-wrap: balance;
}

/* --- El buscador: el protagonista ----------------------------------------- */
.ma-cabecera__busqueda {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 46rem;
	margin-inline: auto;
}

.ma-busqueda {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	width: 100%;
	background: var(--ma-paper);
	border: 1.5px solid var(--ma-ink-200);
	border-radius: var(--ma-pill);
	padding: 0.3rem 0.3rem 0.3rem 1rem;
	transition:
		border-color var(--ma-t-fast) var(--ma-ease),
		box-shadow var(--ma-t-fast) var(--ma-ease);
}

.ma-busqueda:focus-within {
	border-color: var(--ma-teal-500);
	box-shadow: 0 0 0 4px var(--ma-teal-50);
}

.ma-busqueda__lupa {
	display: inline-flex;
	align-items: center;
	flex: none;
	color: var(--ma-ink-400);
	transition: color var(--ma-t-fast) var(--ma-ease);
}

.ma-busqueda:focus-within .ma-busqueda__lupa { color: var(--ma-teal-600); }

.ma-busqueda__campo {
	flex: 1 1 auto;
	min-width: 0;
	height: 2.6rem;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: var(--ma-fs-md);
	color: var(--ma-ink-900);
	appearance: none;
	-webkit-appearance: none;
}

.ma-busqueda__campo:focus { outline: none; }

.ma-busqueda__campo::placeholder { color: var(--ma-ink-400); }

/* Safari dibuja su propia cruz de limpiar; es ruido, se quita. */
.ma-busqueda__campo::-webkit-search-cancel-button,
.ma-busqueda__campo::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.ma-busqueda__boton {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.6rem;
	padding: 0.4rem 1.35rem;
	border: 0;
	border-radius: var(--ma-pill);
	background: var(--ma-teal-600);
	color: var(--ma-paper);
	font-family: var(--ma-font-ui);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
	transition:
		background-color var(--ma-t-fast) var(--ma-ease),
		transform var(--ma-t-fast) var(--ma-ease);
}

.ma-busqueda__boton:hover { background: var(--ma-teal-700); }
.ma-busqueda__boton:active { transform: scale(.97); }

/* --- Las acciones --------------------------------------------------------- */
.ma-cabecera__acciones {
	flex: none;
	display: flex;
	align-items: center;
	gap: 0.2rem;
}

.ma-accion {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--ma-pill);
	color: var(--ma-ink-800);
	text-decoration: none;
	transition:
		background-color var(--ma-t-fast) var(--ma-ease),
		color var(--ma-t-fast) var(--ma-ease);
}

.ma-accion:hover {
	background: var(--ma-teal-50);
	color: var(--ma-teal-700);
}

.ma-accion--carrito .ma-icon { color: var(--ma-teal-700); }

.ma-accion__contador {
	position: absolute;
	top: 0.18rem;
	right: 0.12rem;
	min-width: 1.25rem;
	height: 1.25rem;
	padding-inline: 0.3rem;
	border-radius: var(--ma-pill);
	background: var(--ma-teal-600);
	color: var(--ma-paper);
	font-family: var(--ma-font-ui);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.25rem;
	text-align: center;
}

.ma-accion__contador[hidden] { display: none; }

/* --- Botón de hamburguesa ------------------------------------------------- */
.ma-cabecera__boton-menu {
	display: none;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.85rem;
	height: 2.85rem;
	border: var(--ma-line);
	border-radius: var(--ma-pill);
	background: var(--ma-paper);
	color: var(--ma-ink-900);
	transition:
		background-color var(--ma-t-fast) var(--ma-ease),
		border-color var(--ma-t-fast) var(--ma-ease),
		color var(--ma-t-fast) var(--ma-ease);
}

.ma-cabecera__boton-menu:hover {
	background: var(--ma-teal-50);
	border-color: var(--ma-teal-200);
	color: var(--ma-teal-700);
}

/* El icono alterna menu / close con el estado real del botón: el CSS lee
   aria-expanded, así que no hay forma de que el dibujo y el estado se
   desincronicen y no hace falta que el JS reconstruya SVG. */
.ma-cabecera__icono { display: inline-flex; }
.ma-cabecera__icono--cerrar { display: none; }

.ma-cabecera__boton-menu[aria-expanded="true"] .ma-cabecera__icono--menu { display: none; }
.ma-cabecera__boton-menu[aria-expanded="true"] .ma-cabecera__icono--cerrar { display: inline-flex; }

/* ============================================================================
   3. NAVEGACIÓN POR ESPECIE
   Fila propia, separada por una línea de 1 px. Sin menú asignado la pieza
   imprime el enlace de respaldo a la tienda, así que esta fila nunca queda
   vacía.
   ========================================================================== */
.ma-cabecera__navegacion { border-top: var(--ma-line); }

.ma-cabecera__nav { display: flex; }

.ma-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ma-menu a {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.7rem 0.85rem;
	border-radius: var(--ma-r-sm);
	font-family: var(--ma-font-ui);
	font-size: var(--ma-fs-md);
	font-weight: 600;
	color: var(--ma-ink-700);
	text-decoration: none;
	transition:
		color var(--ma-t-fast) var(--ma-ease),
		background-color var(--ma-t-fast) var(--ma-ease);
}

.ma-menu a:hover {
	color: var(--ma-teal-700);
	background: var(--ma-teal-50);
}

.ma-menu .current-menu-item > a,
.ma-menu .current-menu-ancestor > a {
	color: var(--ma-teal-700);
}

/* Submenús de la navegación por especie (profundidad 2). */
.ma-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: var(--ma-z-overlay);
	display: none;
	min-width: 13rem;
	margin: 0;
	padding: 0.4rem;
	list-style: none;
	background: var(--ma-paper);
	border: var(--ma-line);
	border-radius: var(--ma-r-sm);
	box-shadow: var(--ma-sh-lift);
}

.ma-menu--especies > li { position: relative; }

.ma-menu--especies > li:hover > .sub-menu,
.ma-menu--especies > li:focus-within > .sub-menu { display: block; }

.ma-menu .sub-menu a {
	width: 100%;
	padding-block: 0.5rem;
	font-weight: 500;
}

/* ============================================================================
   4. PANEL MÓVIL
   Oculto por defecto en todos los tamaños: solo existe cuando JS lo abre, y
   solo tiene sentido por debajo del punto de corte.
   ========================================================================== */
.ma-panel[hidden] { display: none; }

.ma-panel {
	position: fixed;
	inset: 0;
	z-index: var(--ma-z-modal);
	display: flex;
	justify-content: flex-end;
}

.ma-panel__fondo {
	position: absolute;
	inset: 0;
	background: rgba(6, 34, 46, .42);
	opacity: 0;
	transition: opacity var(--ma-t-base) var(--ma-ease);
}

.ma-panel__caja {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(22rem, 88vw);
	max-width: 100%;
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--ma-paper);
	border-left: var(--ma-line);
	box-shadow: var(--ma-sh-lift);
	transform: translateX(100%);
	transition: transform var(--ma-t-base) var(--ma-ease);
}

.ma-panel.is-abierto .ma-panel__fondo { opacity: 1; }
.ma-panel.is-abierto .ma-panel__caja { transform: none; }

.ma-panel__caja:focus { outline: none; }

.ma-panel__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.9rem 1rem 0.9rem 1.25rem;
	border-bottom: var(--ma-line);
	background: var(--ma-paper);
}

.ma-panel__logo .ma-marca__nombre { font-size: 1.05rem; }
.ma-panel__logo .ma-marca__logo { height: 2.1rem; }

.ma-panel__cerrar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border: var(--ma-line);
	border-radius: var(--ma-pill);
	background: var(--ma-paper);
	color: var(--ma-ink-900);
	transition:
		background-color var(--ma-t-fast) var(--ma-ease),
		color var(--ma-t-fast) var(--ma-ease);
}

.ma-panel__cerrar:hover {
	background: var(--ma-teal-50);
	color: var(--ma-teal-700);
}

.ma-panel__cuerpo {
	flex: 1 1 auto;
	padding: 0.75rem 0;
}

.ma-panel__nav { padding-block: 0.15rem; }

/* Dentro del panel el menú se apila: objetivos táctiles altos, texto grande y
   una línea de 1 px entre filas. */
.ma-menu--panel {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding-inline: 0.6rem;
}

.ma-menu--panel > li { border-bottom: var(--ma-line-soft); }
.ma-menu--panel > li:last-child { border-bottom: 0; }

.ma-menu--panel a {
	width: 100%;
	min-height: 3.15rem;
	padding: 0.85rem 0.75rem;
	border-radius: var(--ma-r-sm);
	font-size: var(--ma-fs-base);
	font-weight: 700;
}

.ma-menu--panel .sub-menu {
	position: static;
	display: block;
	min-width: 0;
	padding: 0 0 0.5rem 0.9rem;
	border: 0;
	box-shadow: none;
}

.ma-panel__cuenta {
	margin: 1rem 0 0;
	padding: 0.75rem 0.6rem 0;
	border-top: var(--ma-line);
	list-style: none;
}

.ma-panel__enlace {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	min-height: 3rem;
	padding: 0.7rem 0.75rem;
	border-radius: var(--ma-r-sm);
	color: var(--ma-ink-800);
	font-size: var(--ma-fs-md);
	font-weight: 600;
	text-decoration: none;
	transition:
		background-color var(--ma-t-fast) var(--ma-ease),
		color var(--ma-t-fast) var(--ma-ease);
}

.ma-panel__enlace:hover {
	background: var(--ma-teal-50);
	color: var(--ma-teal-700);
}

.ma-panel__pie {
	padding: 1rem 1.25rem 1.35rem;
	border-top: var(--ma-line);
	background: var(--ma-paper);
}

/* Bloqueo del scroll de fondo mientras el panel está abierto. La clase la pone
   header.js y solo se usa ahí. */
body.ma-sin-scroll { overflow: hidden; }

/* ============================================================================
   5. PUNTOS DE CORTE
   62rem (~992 px): punto en el que marca + buscador + tres acciones + botón
   dejan de caber con holgura. Por debajo, el buscador baja a su propia fila y
   la navegación y las acciones se mudan al panel.
   ========================================================================== */
@media (max-width: 62rem) {
	.ma-cabecera__fila {
		flex-wrap: wrap;
		gap: 0.75rem;
		padding-block: 0.75rem;
	}

	.ma-cabecera__busqueda {
		order: 3;
		flex: 1 0 100%;
		max-width: none;
		margin-inline: 0;
	}

	/* Cuenta y favoritos se mudan al panel: aquí son dos iconos más que
	   apretarían la marca. El carrito, que es hermano de este contenedor, se
	   queda en la barra porque es la acción que más se usa. */
	.ma-cabecera__acciones { display: none; }

	.ma-accion--carrito {
		order: 2;
		margin-left: auto;
	}

	.ma-cabecera__boton-menu {
		display: inline-flex;
		order: 2;
	}

	.ma-cabecera__navegacion { display: none; }

	.ma-busqueda { padding-left: 0.9rem; }
	.ma-busqueda__campo { font-size: var(--ma-fs-base); }
}

/* Franja estrecha: el texto "Buscar" se cambia por una flecha. La cadena sigue
   en el marcado (y por tanto en el nombre accesible del botón), solo deja de
   pintarse. */
@media (max-width: 34rem) {
	.ma-busqueda__boton {
		width: 2.6rem;
		padding-inline: 0;
		font-size: 0;
	}

	.ma-busqueda__boton::before {
		content: "";
		width: 0.95rem;
		height: 0.95rem;
		border-top: 2px solid currentColor;
		border-right: 2px solid currentColor;
		transform: rotate(45deg);
	}

	.ma-marca__nombre { font-size: 1rem; max-width: 10ch; }
}

/* Escritorio: el panel no existe, aunque haya quedado abierto al girar el
   dispositivo. Evita un fondo oscuro fantasma sobre la página. */
@media (min-width: 62.0625rem) {
	.ma-panel { display: none; }
}

/* ============================================================================
   6. MOVIMIENTO REDUCIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.ma-panel__fondo,
	.ma-panel__caja { transition: none; }
}