/**
 * Tema Voedia — carcasa.
 *
 * Solo cabecera, pie y ajustes generales. El contenido de la portada lo peina
 * `voedia-reader/assets/home.css`, y la biblioteca y el visor los suyos: cada
 * pieza trae su hoja para que se pueda mover sin arrastrar estilos ajenos.
 *
 * PALETA: la de la marca, en `assets/marca.css`. AQUÍ NO SE DECLARA NINGÚN
 * COLOR. Los `--v-*` de abajo son alias que apuntan a los `--vm-*` de la marca
 * y existen solo para no reescribir cien reglas; el día que sobren, se quitan.
 *
 * @package Voedia
 */

/* Alias hacia la marca. Ningún valor propio. */
:root {
	--v-azul: var( --vm-azul );
	--v-azul-tinta: var( --vm-azul-tinta );
	--v-azul-osc: var( --vm-azul-osc );
	--v-azul-tinte: var( --vm-azul-tenue );
	--v-tinta: var( --vm-negro );
	--v-texto: var( --vm-texto );
	--v-gris: var( --vm-texto );
	--v-gris-claro: var( --vm-texto-tenue );
	--v-fondo: var( --vm-fondo );
	--v-superficie: var( --vm-blanco );
	--v-borde: var( --vm-borde );
	--v-rosa: var( --vm-rosa );
	--v-rosa-cta: var( --vm-rosa-cta );
	--v-rosa-osc: var( --vm-rosa-osc );

	/* El pie y los bloques oscuros. La marca no tiene azul marino: su superficie
	   oscura es el azul oscuro oficial. */
	--v-profundo: var( --vm-azul-osc );
}

/* TIPOGRAFÍA UN 20 % MAYOR, A PROPÓSITO.
 *
 * El público de Voedia incluye lectores mayores, y el tamaño de texto por
 * defecto de la web se les queda corto. Se sube la base y con ella escala
 * TODO lo que está en `rem`: texto, botones, separaciones y objetivos táctiles.
 * Es el mismo efecto que ampliar con el navegador, pero de serie.
 *
 * Se toca la raíz y no cada tamaño uno a uno: así no queda ningún texto
 * olvidado, y quien amplíe además con el navegador sigue sumando sobre esto.
 * Los anchos de columna van en píxeles en `theme.json`, así que la línea no se
 * alarga: crece la letra, no la medida. */
html { font-size: 120%; }

body { background-color: var( --v-fondo ); }

/* --- Cabecera --------------------------------------------------------- */

/* FIJA ARRIBA, Y DE CRISTAL CUANDO EL CONTENIDO PASA POR DEBAJO.
 *
 * `sticky` y no `fixed` a propósito: `sticky` sigue ocupando su sitio en el
 * flujo, así que el contenido no se mete debajo de la cabecera al cargar y no
 * hace falta compensar con un relleno del alto de la barra —un número que se
 * queda desfasado en cuanto cambia el logotipo o el tamaño de letra.
 *
 * OJO, AQUÍ ESTÁ LA TRAMPA: el `sticky` NO va en `.voedia-cabecera`, va en el
 * `<div class="wp-block-template-part">` que WordPress pone alrededor de cada
 * parte de plantilla. Un elemento pegajoso solo se pega dentro de la caja de su
 * padre, y ese envoltorio mide exactamente lo que la cabecera: puesto en la
 * cabecera, `position: sticky` se aplica —el navegador lo confirma— y aun así
 * la barra se va con el desplazamiento, porque no le queda recorrido dentro de
 * su padre. Se pega el envoltorio, que sí vive dentro de `.wp-site-blocks`.
 *
 * El estado de cristal es una clase que pone el JS (`voedia.js`), no el estado
 * por defecto: si el JS no llega a ejecutarse, la cabecera se queda fija y
 * opaca, que es perfectamente usable. Lo contrario —cristal por defecto— dejaría
 * la barra semitransparente sin desenfoque en un navegador sin JS, y eso sí es
 * ilegible. */
.wp-site-blocks > .wp-block-template-part:has( > .voedia-cabecera ) {
	position: sticky;
	top: 0;
	z-index: 30;
}

/* LA CABECERA ES BLANCA. Lo dice la guía —«Header: fondo blanco sólido con
 * sutil sombra al hacer scroll»— y lo confirma su HTML de referencia, que
 * también la lleva clara. Antes era azul marino `#0f3a52`, un color que no
 * existe en la paleta de Voedia.
 *
 * El `!important` no es pereza: el fondo lo pinta la clase de preajuste
 * `has-profundo-background-color` que WordPress imprime CON `!important` en el
 * propio marcado guardado. Se gana desde aquí y así el cambio funciona aunque
 * la parte de plantilla esté sobrescrita en la base de datos —en un tema de
 * bloques, quien edite la cabecera en el editor del sitio crea una copia en la
 * base de datos que gana al fichero—. */
.voedia-cabecera {
	position: relative;
	background-color: var( --vm-blanco ) !important;
	color: var( --vm-texto ) !important;
	border-bottom: 1px solid var( --vm-borde );
	transition:
		background-color 0.25s ease,
		padding 0.25s ease,
		box-shadow 0.25s ease,
		border-color 0.25s ease;
}

/* La barra de administración de WordPress es fija por encima de los 782 px, así
   que la cabecera tiene que empezar por debajo de ella. Por debajo de ese ancho
   la barra deja de ser fija y se va con el desplazamiento: entonces `top: 0`. */
.admin-bar .wp-site-blocks > .wp-block-template-part:has( > .voedia-cabecera ) { top: 32px; }

@media ( max-width: 782px ) {
	.admin-bar .wp-site-blocks > .wp-block-template-part:has( > .voedia-cabecera ) { top: 0; }
}

/* El lector ocupa la pantalla y tiene sus propios controles: una barra flotando
   encima le robaría alto en cada página y competiría con su interfaz. Ahí la
   cabecera vuelve a comportarse como una cabecera normal. */
body:has( .voedia-visor ) .wp-site-blocks > .wp-block-template-part:has( > .voedia-cabecera ) {
	position: relative;
}

/* El estado de cristal, ahora en claro: cristal esmerilado blanco y la sombra
   suave y difusa que pide la guía —nada de sombras duras—. */
.voedia-cabecera--flotando {
	background-color: rgba( 255, 255, 255, 0.82 ) !important;
	-webkit-backdrop-filter: blur( 14px ) saturate( 1.6 );
	backdrop-filter: blur( 14px ) saturate( 1.6 );
	border-bottom-color: var( --vm-borde );
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.08 );
	padding-top: 0.55rem !important;
	padding-bottom: 0.55rem !important;
}

/* El logotipo encoge con la barra. Es lo que hace que el gesto se lea como
   «la cabecera se aparta para dejar sitio» y no como un salto. */
.voedia-cabecera .wp-block-site-logo img {
	transition: max-width 0.25s ease;
}

.voedia-cabecera--flotando .wp-block-site-logo img { max-width: 142px; }

/* Sin desenfoque, el 72 % de opacidad deja pasar el texto de debajo y la barra
   se vuelve ilegible. En ese caso se sube la opacidad casi a opaco y se conserva
   solo la sombra, que es lo que separa la barra del contenido. */
@supports not ( ( backdrop-filter: blur( 1px ) ) or ( -webkit-backdrop-filter: blur( 1px ) ) ) {
	.voedia-cabecera--flotando { background-color: rgba( 255, 255, 255, 0.97 ) !important; }
}

/* Quien pide menos transparencia en su sistema la pide por un motivo. */
@media ( prefers-reduced-transparency: reduce ) {
	.voedia-cabecera--flotando {
		background-color: var( --vm-blanco ) !important;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.voedia-cabecera,
	.voedia-cabecera .wp-block-site-logo img { transition: none; }
}

/* Un enlace a un ancla dejaría su destino debajo de la barra. */
html { scroll-padding-top: 6.5rem; }

.voedia-cabecera-fila { gap: clamp( 1rem, 3vw, 2.5rem ); }

.voedia-cabecera-marca { gap: 0.55rem; }

.voedia-cabecera .wp-block-site-logo img,
.voedia-pie .wp-block-site-logo img { height: auto; }

/* El logotipo en el pie va sobre azul oscuro, y ahí el rótulo «App» —que en la
   variante clara es azul oscuro— se pierde. Se aclara solo en el pie.
   `brightness(0) invert(1)` deja la silueta en blanco puro: es el mismo gesto
   que usaba el tema antes de cambiar de logotipo, y aquí sí es correcto porque
   el fondo es de color y la guía pide el logotipo blanco encima. */
.voedia-pie .wp-block-site-logo img { filter: brightness( 0 ) invert( 1 ); }

/* --- Menú ------------------------------------------------------------- */

/* Los enlaces del menú, con las medidas de la guía: Figtree 500 a 0,95 rem,
   color de texto normal y azul al pasar por encima. */
.voedia-menu a {
	color: var( --vm-texto );
	font-family: var( --vm-sans );
	font-weight: 500;
	text-decoration: none;
	padding-bottom: 0.35rem;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.voedia-menu a:hover { color: var( --vm-azul-tinta ); text-decoration: none; }

/* La página en la que se está, marcada. Sin esto el menú no dice dónde
   estás, que es la mitad de para lo que sirve un menú. */
.voedia-menu .current-menu-item a,
.voedia-menu .wp-block-navigation-item.current-menu-item > a {
	color: var( --vm-azul-tinta );
	font-weight: 600;
	border-bottom-color: var( --vm-azul );
}

/* El menú desplegable de móvil se abre a pantalla completa y hereda del bloque
   los colores de preajuste guardados —`profundo` de fondo, `superficie` de
   texto—. Con la cabecera en blanco eso seguiría siendo correcto, pero el
   preajuste `profundo` ya no es marino: se fija aquí para que el desplegable
   sea claro como el resto de la cabecera. */
.voedia-menu .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var( --vm-blanco ) !important;
	color: var( --vm-texto ) !important;
}

.voedia-menu .wp-block-navigation__responsive-container.is-menu-open a { color: var( --vm-texto ); }

/* --- Carrito y cuenta -------------------------------------------------- */

.voedia-cabecera-acciones { gap: 0.75rem; }

.voedia-cabecera-acciones .wc-block-mini-cart__button,
.voedia-cabecera-acciones .wc-block-customer-account__link,
.voedia-cabecera-acciones .wc-block-customer-account__toggle {
	color: var( --vm-texto );
	padding: 0.4rem;
	border-radius: var( --vm-r );
}

.voedia-cabecera-acciones .wc-block-mini-cart__button:hover,
.voedia-cabecera-acciones .wc-block-customer-account__link:hover {
	color: var( --vm-azul-tinta );
	background: var( --vm-azul-tenue );
}

/* EL CONTADOR DEL CARRITO, EN ROSA. Es el único sitio de la cabecera donde el
   rosa está justificado: la guía lo reserva para lo que el usuario tiene que
   pulsar, y un carrito con artículos dentro es exactamente eso. Va en la
   variante `--vm-rosa-cta` porque lleva un número blanco encima. */
.voedia-cabecera-acciones .wc-block-mini-cart__badge {
	background: var( --vm-rosa-cta );
	color: #fff;
	font-family: var( --vm-sans );
	font-weight: 700;
}

/* --- Contenido -------------------------------------------------------- */

/* La plantilla de portada no lleva título de página: el destacado empieza
   arriba del todo. Antes se ocultaba por CSS, que era un parche sobre una
   plantilla que no controlábamos. */
.voedia-principal { min-height: 40vh; }

/* Cabecera y héroe, pegados.
   WordPress separa los bloques hermanos con `--wp--style--block-gap`, y ese
   hueco aparecía como una franja blanca entre la barra de menú y el héroe: el
   fondo de la página asomando entre dos bloques. Se anula el margen superior
   del primer elemento de la cadena para que el color sea continuo. */
.voedia-principal,
.voedia-principal > .entry-content,
.voedia-principal > .entry-content > .voedia-home,
.voedia-principal > .entry-content > .voedia-home > .vh-destacado { margin-block-start: 0; }

.voedia-principal > .entry-content { margin-top: 0; }

/* --- Pie -------------------------------------------------------------- */

/* EL PIE PASA DE MARINO A AZUL OSCURO DE MARCA, Y ESO ROMPE LAS OPACIDADES.
 *
 * El texto secundario del pie estaba escrito con blanco al 62 % y el legal al
 * 45 %. Funcionaba sobre el marino `#0f3a52`, que es muy oscuro. Sobre el
 * `#3e7691` de la paleta oficial, que es bastante más claro, NO funciona:
 *
 *   blanco  45 %  →  2,28:1   suspende
 *   blanco  62 %  →  2,97:1   suspende
 *   blanco  90 %  →  4,39:1   sigue suspendiendo
 *   blanco 100 %  →  4,99:1   pasa AA
 *
 * Sobre este fondo NO HAY MARGEN PARA LA TRANSPARENCIA: cualquier velo tira el
 * contraste por debajo del mínimo. La jerarquía se hace con tamaño y peso, que
 * es como se hacía antes de que existiera el canal alfa. */
.voedia-pie-fila { gap: 1.25rem; }

.voedia-pie-nota {
	max-width: 32rem;
	margin: 0;
	color: var( --vm-blanco );
	font-family: var( --vm-sans );
	line-height: 1.6;
}

.voedia-pie-legal {
	margin: 2rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid rgba( 255, 255, 255, 0.22 );
	color: var( --vm-blanco );
	font-family: var( --vm-sans );
}

/* El claim de la marca. La guía lo pide en TODA pieza: «El tagline "El
   conocimiento que transforma." debe aparecer siempre». En una aplicación con
   muchas pantallas, el sitio donde eso se cumple una vez y vale para todas es
   el pie. Va en `parts/footer.html`.

   ⚠️ SE QUEDA EN ESPAÑOL A PROPÓSITO. Un claim de marca no se traduce por
   cuenta de quien maqueta: la guía solo trae la versión española y las otras
   cinco las tiene que dar Juan Manuel. Cuando lleguen, entran en el mapa de
   `Voedia_Idiomas::traducir_bloques()`, que es por donde se traduce el texto
   fijo del tema. */
.voedia-pie-claim {
	margin: 1.5rem 0 0;
	color: var( --vm-blanco );
	font-family: var( --vm-serif );
	font-style: italic;
	text-align: center;
}

/* Los enlaces del pie van sobre color: blanco y subrayados, que es lo único
   que los distingue cuando no se puede jugar con el tono. */
.voedia-pie a {
	color: var( --vm-blanco );
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* --- WooCommerce ------------------------------------------------------ */

/* La tienda hereda el tema pero trae sus propios botones; se alinean con la
   marca para que catálogo, ficha y carrito no parezcan otro sitio.
   EN ROSA, NO EN AZUL: la guía reserva el rosa para lo que convierte, y
   «Añadir al carrito» y «Finalizar compra» es literalmente eso. Es el cambio
   que más se va a notar en la tienda. */
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.wc-block-components-button {
	background-color: var( --vm-rosa-cta ) !important;
	color: #fff !important;
	border-radius: var( --vm-r ) !important;
	font-family: var( --vm-sans ) !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em;
	box-shadow: 0 4px 24px rgba( 194, 86, 120, 0.38 );
	transition: background-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.wc-block-components-button:hover {
	background-color: var( --vm-rosa-osc ) !important;
	box-shadow: 0 6px 32px rgba( 194, 86, 120, 0.50 );
	transform: translateY( -2px );
}

@media ( prefers-reduced-motion: reduce ) {
	.woocommerce .button,
	.woocommerce a.button,
	.wc-block-components-button { transition: none; }

	.woocommerce .button:hover,
	.woocommerce a.button:hover,
	.wc-block-components-button:hover { transform: none; }
}

/* ══ EL ROSA, SOLO DONDE SE DECIDE ═══════════════════════════════════════
 *
 * La regla de la guía —«máximo 1-2 rosas por pieza»— se rompe sola en una
 * tienda: la página de catálogo pinta 16 productos y cada uno trae su
 * «Seleccionar opciones». Dieciséis botones de conversión no son dieciséis
 * conversiones; son ninguna, porque el color deja de destacar nada.
 *
 * En la REJILLA los botones van en fantasma azul. El rosa se queda para la
 * ficha del producto, el carrito y la caja, que es donde de verdad hay una
 * decisión que tomar. Va después de la regla general para poder vencerla sin
 * subir la especificidad a mano. */
.wc-block-product-template .wc-block-components-product-button .wp-block-button__link,
.wc-block-product-template .wp-block-button__link,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.add_to_cart_button {
	background-color: transparent !important;
	color: var( --vm-azul-tinta ) !important;
	border: 1.5px solid var( --vm-azul ) !important;
	box-shadow: none;
}

.wc-block-product-template .wc-block-components-product-button .wp-block-button__link:hover,
.wc-block-product-template .wp-block-button__link:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover {
	background-color: var( --vm-azul-tenue ) !important;
	box-shadow: none;
	transform: none;
}

/* LOS BOTONES SECUNDARIOS NO SON ROSA. La guía permite «máximo 1-2» rosas por
   pieza, y una ficha de producto trae de serie «Añadir al carrito», «Seguir
   comprando», «Actualizar carrito» y «Aplicar cupón». Si todos fueran rosa, el
   rosa dejaría de significar nada. Los de acción secundaria pasan a fantasma. */
.woocommerce a.button.wc-backward,
.woocommerce button[name="update_cart"],
.woocommerce button[name="apply_coupon"],
.wc-block-components-button.is-secondary {
	background-color: transparent !important;
	color: var( --vm-azul-tinta ) !important;
	border: 1.5px solid var( --vm-azul ) !important;
	box-shadow: none;
}

.woocommerce a.button.wc-backward:hover,
.woocommerce button[name="update_cart"]:hover,
.woocommerce button[name="apply_coupon"]:hover,
.wc-block-components-button.is-secondary:hover {
	background-color: var( --vm-azul-tenue ) !important;
	box-shadow: none;
}

/* El precio en Figtree ExtraBold, como manda la guía. */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.wc-block-components-product-price {
	color: var( --vm-negro );
	font-family: var( --vm-sans );
	font-weight: 800;
}

/* --- Rejillas de producto (tienda y relacionados) ---------------------- */

/* WooCommerce pinta los productos con DOS variantes distintas del mismo
 * bloque, y hay que domar las dos:
 *
 *   · la tienda, con `.wc-block-product-template__responsive.columns-3`, que es
 *     una rejilla con `auto-fill`;
 *   · los relacionados de la ficha, con `.is-flex-container.columns-5`, que es
 *     una fila flexible.
 *
 * DOS ERRORES QUE YA SE COMETIERON AQUÍ, para no repetirlos:
 *
 *   1. Sus reglas llevan DOS clases. Una regla de una sola clase no las vence,
 *      por mucho que parezca correcta.
 *   2. Su `calc` de columnas descuenta exactamente SU separación. Cambiar el
 *      hueco sin tocar el cálculo dejó la tienda en dos columnas cuando se
 *      pedían cuatro. Y poner `width: 100%` a las tarjetas —pensando solo en la
 *      rejilla— dejó los relacionados en UNA por fila y enormes.
 *
 * Por eso aquí se unifican: las dos variantes pasan a ser una rejilla con un
 * número EXACTO de columnas, y el hueco se declara pegado a ellas para que los
 * dos valores no se separen nunca.
 */
.wc-block-product-template[class*="columns-"],
.wc-block-product-template.wc-block-product-template__responsive,
.wc-block-product-template.is-flex-container {
	display: grid !important;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) ) !important;
	gap: 2.25rem 1.5rem !important;
}

@media ( max-width: 1100px ) {
	.wc-block-product-template[class*="columns-"],
	.wc-block-product-template.wc-block-product-template__responsive,
	.wc-block-product-template.is-flex-container {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) ) !important;
	}
}

@media ( max-width: 780px ) {
	.wc-block-product-template[class*="columns-"],
	.wc-block-product-template.wc-block-product-template__responsive,
	.wc-block-product-template.is-flex-container {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
		gap: 1.5rem 1rem !important;
	}
}

/* Las tarjetas ocupan su celda y ya está. El `width: 100%` es seguro AQUÍ
   porque el contenedor es una rejilla; en la fila flexible que tenían los
   relacionados era lo que las hacía ocupar el ancho entero. */
.wc-block-product-template .wc-block-product {
	display: flex;
	flex-direction: column;
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	margin: 0 !important;
	float: none !important;
	flex: initial !important;
}

/* Todas las cubiertas a la MISMA proporción de libro.
   Las portadas llegan con tamaños distintos —unas más apaisadas, otras más
   altas— y sin esto cada tarjeta arranca a una altura, que es lo que hace que
   una parrilla se vea desordenada aunque las columnas estén bien. */
.wc-block-product-template .wc-block-components-product-image,
.wc-block-product-template .wc-block-components-product-image a {
	display: block;
	margin: 0 0 0.75rem;
}

/* La cubierta de la tienda la enmarca ahora el componente compartido del plugin
   (`voedia-reader/assets/portada.css`), que la enseña ENTERA sobre un fondo
   hecho con la propia cubierta desenfocada.
   Aquí se quita el recorte que había —`object-fit: cover` con proporción fija
   estaba comiéndose el nombre del autor en media tienda— y se deja solo la
   sombra, que es cosa de la parrilla y no del marco. */
.wc-block-product-template .wc-block-components-product-image .voedia-portada {
	box-shadow: 0 6px 18px rgba( 18, 36, 46, 0.10 );
}

.wc-block-product-template .wc-block-components-product-image img {
	width: 100%;
}

.wc-block-product-template .wc-block-components-product-title {
	margin: 0 0 0.2rem;
	font-size: 0.95rem;
	line-height: 1.3;
}

.wc-block-product-template .wc-block-components-product-price { margin-bottom: 0.6rem; }

/* El botón se pega abajo: con títulos de distinto largo, si no, cada botón
   queda a una altura y la fila se ve rota. */
.wc-block-product-template .wp-block-button,
.wc-block-product-template .wc-block-components-product-button { margin-top: auto; }

.wc-block-product-template .wc-block-components-product-button .wp-block-button__link { width: 100%; }

/* El titular de «Productos relacionados» venía a tamaño de titular de página. */
.wp-block-woocommerce-related-products > h2,
.wc-block-related-products > h2 {
	font-size: 1.35rem;
	margin-bottom: 1.25rem;
}

/* La navegación de «Mi cuenta», con el mismo lenguaje que el resto. */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.6rem 0.75rem;
	border-radius: 0.4rem;
	color: var( --v-tinta );
	text-decoration: none;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
	background: var( --v-azul-tinte );
	color: var( --v-azul-osc );
	font-weight: 600;
}

/* --- Pantallas estrechas ---------------------------------------------- */

@media ( max-width: 800px ) {
	.voedia-cabecera-fila { flex-wrap: wrap; gap: 0.75rem; }

	/* En pantalla pequeña la letra ya es bastante: al 120 % de base, el 20 %
	   extra deja poco sitio para la interfaz. Se vuelve al tamaño normal, que
	   sigue siendo legible porque el móvil se sostiene más cerca. */
	html { font-size: 110%; }
}

/* El desplegable de ordenación de la tienda venía sin tocar: un `select` del
   navegador, con su borde gris de sistema, al lado de componentes con el radio
   y la tipografía de la marca. Se le pone el mismo lenguaje que a los campos
   de formulario de la guía. */
.woocommerce .woocommerce-ordering select,
.wc-block-product-sort-select select {
	padding: 0.55rem 0.8rem;
	border: 1.5px solid var( --vm-borde );
	border-radius: var( --vm-r );
	background: var( --vm-blanco );
	color: var( --vm-texto );
	font-family: var( --vm-sans );
	font-size: 0.9rem;
}

.woocommerce .woocommerce-ordering select:focus,
.wc-block-product-sort-select select:focus {
	border-color: var( --vm-azul );
	box-shadow: 0 0 0 3px rgba( 63, 151, 194, 0.15 );
	outline: none;
}

/* La migaja de pan y el recuento de resultados, en Figtree como el resto de
   interfaz: venían en la serif del cuerpo y parecían texto editorial. */
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-result-count {
	font-family: var( --vm-sans );
	font-size: 0.85rem;
	color: var( --vm-texto-tenue );
}

.woocommerce .woocommerce-breadcrumb a { color: var( --vm-azul-tinta ); }

/* ══ LOS TITULARES, EN EL AZUL DE VOEDIA ═════════════════════════════════
 *
 * Encargo de Ernesto (24 de agosto de 2026): los titulares sobre fondo claro
 * van en el azul de la paleta original, no en el gris casi negro.
 *
 * `theme.json` ya lo aplica a h1-h4, y ahí está la trampa: **el azul de marca
 * sobre blanco da 3,27:1**, que WCAG solo acepta en «texto grande» —24 px, o
 * 18,66 px si va en negrita—. La mayoría de titulares del sitio lo son y por eso
 * pasa; los que NO lo son se corrigen aquí uno a uno, con el azul oscuro de la
 * propia paleta. No es otro color: es el mismo azul preparado para llevar texto.
 *
 * Cuál es cuál no se ha decidido a ojo: lo mide `pruebas/home/marca.js` contra
 * el sitio desplegado. */

/* El título de la ficha de producto: 20 px en peso 400. Le faltan cuatro
   píxeles para ser «grande», así que necesita 4,5:1 y el azul de marca no
   llega. */
.wp-block-post-title,
.woocommerce div.product .product_title,
.wc-block-components-product-name {
	color: var( --vm-azul-tinta ) !important;
}

/* Los nombres de producto en la rejilla de la tienda, por lo mismo. */
.wc-block-product-template .wc-block-components-product-title,
.wc-block-product-template .wc-block-components-product-name,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: var( --vm-azul-tinta ) !important;
}

/* El titular del aviso de cookies: 20,2 px en negrita, sí es grande. */
.voedia-cookies-titulo { color: var( --vm-azul ); }

/* PERO NO SOBRE COLOR. En el pie —azul oscuro— y en la cabecera de campaña, un
   titular azul sobre azul no se ve. Ahí manda el blanco. */
.voedia-pie h1,
.voedia-pie h2,
.voedia-pie h3,
.voedia-pie h4 { color: var( --vm-blanco ); }