/*
 * Tema Macar: hoja única (Plan 2 · Tarea 2). Valores sacados del kit de Elementor del sitio actual (colores, tipografías,
 * fondo) y de su CSS adicional; qué se copió y qué no, regla a regla, en docs/macar-2026-10/PAGINAS-PLAN2.md.
 * Sin importaciones ni URL externas: la fuente está en assets/fonts/ (Google Fonts, SIL OFL 1.1; origen en ese documento).
 */

/* Solo los pesos que usa el diseño (400 texto, 500 secundario, 600 principal, 700 títulos y precio) y solo latino y
   latino extendido (español, catalán, portugués…): sin el subconjunto vietnamita, que ningún texto de la web necesita. */
@font-face {
	font-family: "Encode Sans Semi Expanded";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/encode-sans-semi-expanded-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Encode Sans Semi Expanded";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/encode-sans-semi-expanded-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Encode Sans Semi Expanded";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/encode-sans-semi-expanded-500-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Encode Sans Semi Expanded";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/encode-sans-semi-expanded-500-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Encode Sans Semi Expanded";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/encode-sans-semi-expanded-600-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Encode Sans Semi Expanded";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/encode-sans-semi-expanded-600-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Encode Sans Semi Expanded";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/encode-sans-semi-expanded-700-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Encode Sans Semi Expanded";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/encode-sans-semi-expanded-700-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Colores del kit: «Vino», «Licor», «Gourmet» y «Otros» son los nombres que les da el kit. */
	--macar-vino: #862757;
	--macar-licor: #e73458;
	--macar-gourmet: #454545;
	--macar-otros: #b98344;
	--macar-oscuro: #000;
	--macar-blanco: #fff;
	--macar-gris: #d5d5d5;
	--macar-fondo: #f2f2f2;
	--macar-pie: #212121;
	/* Error y rebaja: el rojo puro del CSS actual (`red`) da 3,6:1 sobre el fondo y no pasa AA; este da 5,6:1 sobre #f2f2f2 y 6,3:1 sobre blanco. */
	--macar-rebaja: #c40000;
	/* Enlaces dentro de un texto sobre el fondo gris (textos legales): el #cc3366 de hoy da 4,43:1 sobre #f2f2f2 y no pasa AA; este,
	   el cambio más pequeño que pasa, 4,51:1 sobre #f2f2f2, 5,05:1 sobre blanco y 4,16:1 frente al texto negro (además van subrayados).
	   No es --macar-licor-texto (#d81940, Tarea 5): ese es el rosa del kit oscurecido; este conserva el tono de los legales de hoy. */
	--macar-enlace-texto: #ca3265;

	--macar-fuente: "Encode Sans Semi Expanded", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	/* Tamaños del kit: texto 14, secundario 16, principal 18, pequeño 12, título de producto y precio 26. */
	--macar-t-pequeno: 0.75rem;
	--macar-t-texto: 0.875rem;
	--macar-t-secundario: 1rem;
	--macar-t-principal: 1.125rem;
	--macar-t-titulo: 1.625rem;

	--macar-ancho: 1140px;
	--macar-e1: 0.5rem;
	--macar-e2: 1rem;
	--macar-e3: 1.5rem;
	--macar-e4: 3rem;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--macar-fondo);
	color: var(--macar-oscuro);
	font-family: var(--macar-fuente);
	font-size: var(--macar-t-texto);
	font-weight: 400;
	line-height: 2;
	/* Una palabra o URL larga no ensancha la página en móvil (390 px). */
	overflow-wrap: break-word;
}
img, video, svg { max-width: 100%; height: auto; }
a { color: var(--macar-vino); }
a:hover { color: var(--macar-licor); }
h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--macar-e2); color: var(--macar-oscuro); font-weight: 700; line-height: 1.2; }
h1 { font-size: 2rem; text-transform: uppercase; }
h2 { font-size: var(--macar-t-titulo); }
h3 { font-size: 1.25rem; }
h4, h5, h6 { font-size: var(--macar-t-principal); font-weight: 600; }
p { margin: 0 0 var(--macar-e2); }
input, select, textarea, button { font-family: inherit; font-size: var(--macar-t-secundario); max-width: 100%; }

/* Foco visible en todo lo interactivo (WCAG 2.4.7): el contorno por defecto se pierde sobre el fondo gris y el vino. */
:focus-visible { outline: 3px solid var(--macar-licor); outline-offset: 2px; }

/* Contenedor y página genérica */
.macar-contenedor, .macar-pagina { width: 100%; max-width: calc(var(--macar-ancho) + 2 * var(--macar-e2)); margin-inline: auto; padding: var(--macar-e4) var(--macar-e2); }
.macar-pagina__titulo { margin-bottom: var(--macar-e3); }
.macar-contenido > :last-child { margin-bottom: 0; }
.macar-contenido img { height: auto; }
.macar-contenido table, .macar-pagina table { width: 100%; border-collapse: collapse; }
.macar-contenido figure { margin: 0 0 var(--macar-e2); }
.alignleft { float: left; margin: 0 var(--macar-e2) var(--macar-e1) 0; }
.alignright { float: right; margin: 0 0 var(--macar-e1) var(--macar-e2); }
.aligncenter { display: block; margin-inline: auto; }
.macar-saltar { position: absolute; left: var(--macar-e1); top: -4rem; z-index: 100; padding: var(--macar-e1) var(--macar-e2); background: var(--macar-blanco); color: var(--macar-oscuro); }
.macar-saltar:focus { top: var(--macar-e1); }

/* Formularios (campos de caja, carrito, Mi cuenta y los que traigan las tareas siguientes) */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], select, textarea {
	width: 100%;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--macar-gourmet);
	border-radius: 3px;
	background: var(--macar-blanco);
	color: var(--macar-oscuro);
	line-height: 1.5;
}
input[type="number"] { width: auto; min-width: 4rem; }
input[type="checkbox"], input[type="radio"] { width: auto; }
label { font-weight: 500; }

/* Botones: los de WooCommerce y los de las plantillas del tema comparten aspecto. Gris «Gourmet» por defecto; el vino
   para actualizar carrito y añadir al carrito, como en el sitio actual (.cart .button). */
.button, button.button, input.button, a.button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .macar-boton {
	display: inline-block;
	padding: 0.7rem 1.4rem;
	border: 0;
	border-radius: 0;
	background: var(--macar-gourmet);
	color: var(--macar-blanco);
	font-family: inherit;
	font-size: var(--macar-t-principal);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.button:hover, .macar-boton:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--macar-oscuro); color: var(--macar-blanco); }
/* Los botones «.alt» de WooCommerce («Proceder al pago», «Comprar y pagar») traen su propio morado y hay que pisarlo:
   en el sitio actual son Gourmet, como «Aplicar el cupón». */
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt, #place_order {
	background: var(--macar-gourmet); color: var(--macar-blanco);
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, #place_order:hover { background: var(--macar-oscuro); color: var(--macar-blanco); }
/* El vino se limita al «Actualizar el carrito» y al añadir al carrito de la ficha (form.cart): «Proceder al pago», «Aplicar el
   cupón» y «Comprar y pagar» son Gourmet. */
form.cart .button, .woocommerce form.cart .button, button[name="update_cart"], .woocommerce button.button[name="update_cart"] { background: var(--macar-vino); color: var(--macar-blanco); }
form.cart .button:hover, .woocommerce form.cart .button:hover, button[name="update_cart"]:hover, .woocommerce button.button[name="update_cart"]:hover { background: var(--macar-licor); }
/* Desactivado (p. ej. «Actualizar el carrito» sin cambios): atenuado pero con texto blanco. WooCommerce lo deja con
   `color: inherit` (negro) y un relleno menor; medido en navegador, el texto salía negro sobre el vino. */
.button:disabled, .button.disabled, button[disabled], .woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled] {
	color: var(--macar-blanco); padding: 0.7rem 1.4rem; opacity: 0.6; cursor: not-allowed;
}
/* Botón de añadir al carrito de las tarjetas: más pequeño y centrado (CSS actual: 12 px, flex centrado). */
.add_to_cart_button { display: flex; align-items: center; justify-content: center; font-size: var(--macar-t-pequeno); }
/* «Ver carrito» que WooCommerce añade tras añadir por AJAX: el sitio actual lo oculta (se ve el carrito en la cabecera). */
.added_to_cart { display: none; }

/* Precios: la regla del CSS adicional, tal cual (solo carrito y .product-price). El «Precio» del kit (26 px, 700) lo aplican
   las plantillas de tarjeta y ficha (Tareas 4 y 5). */
.product-price, .woocommerce-cart .product-price, .woocommerce-cart td, .woocommerce-cart th, .woocommerce-cart .amount { color: var(--macar-oscuro); font-weight: 500; }
.price del { color: var(--macar-rebaja); font-size: var(--macar-t-principal); }
.price ins { text-decoration: none; }

/* Avisos de WooCommerce: cajas blancas sin icono ni borde, como en el sitio actual. */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	max-width: var(--macar-ancho);
	margin: var(--macar-e3) auto;
	padding: 10px 15px;
	border: 0;
	background: var(--macar-blanco);
	color: var(--macar-oscuro);
	font-weight: 500;
	list-style: none;
}
.woocommerce-error { border-left: 4px solid var(--macar-rebaja); }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; }
.woocommerce-message strong, .woocommerce-info strong { color: var(--macar-oscuro); }
.woocommerce-message .button, .woocommerce-info .button { float: right; margin-left: var(--macar-e2); }

/* Carrito, caja y Mi cuenta: tarjetas blancas (plantillas de compra de la Tarea 1) */
.macar-pagina table.shop_table { background: var(--macar-blanco); border: 1px solid var(--macar-gris); }
.macar-pagina table.shop_table th, .macar-pagina table.shop_table td { padding: 0.6rem 0.8rem; text-align: left; vertical-align: middle; border-top: 1px solid var(--macar-gris); }
.macar-pagina table.shop_table img { width: 64px; }
.macar-pagina .cart_totals, .macar-pagina .woocommerce-checkout-review-order, .macar-pagina .woocommerce-MyAccount-content { background: var(--macar-blanco); padding: var(--macar-e2); }
.macar-pagina .cart_totals h2 { text-transform: uppercase; }
.macar-pagina .woocommerce-cart-form, .macar-pagina .cart-collaterals, .macar-pagina .coupon { margin-bottom: var(--macar-e3); }
.macar-pagina .coupon { display: flex; flex-wrap: wrap; gap: var(--macar-e1); background: var(--macar-blanco); padding: var(--macar-e2); }
.macar-pagina .coupon input[type="text"] { flex: 1 1 12rem; width: auto; }
.macar-pagina .wc-proceed-to-checkout .button { display: block; width: 100%; }
/* Cuenta: menú y contenido en columnas desde tablet; en móvil, apilados. */
.woocommerce-MyAccount-navigation ul { margin: 0 0 var(--macar-e3); padding: 0; list-style: none; }
.woocommerce-MyAccount-navigation a { display: block; padding: 0.3rem 0; font-weight: 600; text-decoration: none; }
.woocommerce-MyAccount-navigation .is-active a { color: var(--macar-oscuro); }
@media (min-width: 768px) {
	.macar-pagina .woocommerce:has(.woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: 14rem 1fr; gap: var(--macar-e3); }
	.macar-pagina .woocommerce-cart-form { width: 100%; }
}
/* Caja y pedido recibido */
.woocommerce-order-details__title { margin-top: 60px; }
.woocommerce-table--order-details { margin-top: 40px; padding: 20px; background: var(--macar-blanco); }
.woocommerce-customer-details { margin-top: 60px; }
.woocommerce-columns--addresses address { margin-top: 40px; padding: 20px; border-radius: 0; background: var(--macar-blanco); }
.woocommerce-thankyou-order-details { padding: 20px; background: var(--macar-blanco); }
.woocommerce-checkout .col2-set, .woocommerce-checkout #order_review { margin-bottom: var(--macar-e3); }
.form-row { margin: 0 0 var(--macar-e2); }
.woocommerce-checkout #payment { background: var(--macar-blanco); padding: var(--macar-e2); }
.woocommerce-checkout #payment ul.payment_methods { margin: 0; padding: 0; list-style: none; }

/* Clase de las plantillas de ficha «Vino Single» y «Destilados Single» (CSS adicional, tal cual). La Tarea 5 decide dónde va. */
.max-33 { max-width: 33%; }

/* Lupa de la galería de ficha: oculta en el sitio actual. */
.woocommerce-product-gallery__trigger { display: none; }

/* Paginación de listados: oculta en el sitio actual (su CSS adicional escondía la del widget de Elementor). Se conserva
   oculta; las plantillas de listado que la pinten usarán esta clase. */
.macar-paginacion { display: none; }

/* Autor de las entradas: oculto en el sitio actual. */
.post-author { display: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Cabecera y pie (Plan 2 · Tarea 3) */
/* Texto solo para lectores de pantalla: la única clase (la de WordPress). Va aquí, al principio de «Cabecera y pie», que es donde estaba
   la clase propia que había (antes de casi todos los componentes; los usos de .screen-reader-text de la entrada pasan a leerla desde aquí). Une las dos reglas que había (clip-path y clip, y borde 0): oculta igual en todos los navegadores. */
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.macar-cabecera { background: var(--macar-blanco); border-bottom: 1px solid var(--macar-gris); position: relative; z-index: 20; }
.macar-cabecera__aviso { margin: 0; padding: 0.15rem var(--macar-e2); background: var(--macar-vino); color: var(--macar-blanco); text-align: center; text-transform: uppercase; font-size: var(--macar-t-pequeno); font-weight: 600; line-height: 1.6; }
.macar-cabecera__fila.macar-contenedor { display: flex; flex-wrap: wrap; align-items: center; gap: var(--macar-e2); padding-block: var(--macar-e2); }
.macar-cabecera__logo { display: block; flex: 0 0 auto; }
.macar-cabecera__logo img { display: block; width: 220px; max-width: 100%; height: auto; }
.macar-buscador { display: flex; flex: 1 1 14rem; max-width: 22rem; margin-inline: auto; border: 1px solid var(--macar-gris); border-radius: 5px; background: var(--macar-blanco); }
.macar-buscador input[type="search"] { flex: 1; min-width: 0; border: 0; background: transparent; padding: 5px 11px 5px 10px; font-size: var(--macar-t-texto); }
.macar-buscador__enviar { order: -1; width: 2.25rem; border: 0; background: none; cursor: pointer; color: var(--macar-gourmet); }
.macar-icono { display: inline-block; vertical-align: -0.125em; fill: currentColor; }
.macar-buscador__enviar .macar-icono { width: 1rem; height: 1rem; }
.macar-cabecera__cuenta { padding: 0.45rem 1.5rem; border: 1px solid var(--macar-gris); border-radius: 5px; color: var(--macar-gourmet); font-size: var(--macar-t-pequeno); text-decoration: none; }
.macar-cabecera__cuenta:hover { background: var(--macar-fondo); }
.macar-carrito .macar-icono { margin-right: 0.45rem; }
.macar-carrito { position: relative; margin-left: auto; padding: 0.5rem 0.9rem; border-radius: 5px; background: var(--macar-vino); color: var(--macar-blanco); text-decoration: none; font-size: var(--macar-t-texto); }
.macar-carrito:hover { background: var(--macar-licor); color: var(--macar-blanco); }
.macar-carrito__n { position: absolute; top: -0.45rem; right: -0.45rem; min-width: 1.15rem; padding: 0 0.25rem; border-radius: 999px; background: var(--macar-licor); color: var(--macar-blanco); font-size: 0.7rem; line-height: 1.15rem; text-align: center; }
.macar-menu-boton { display: none; }
.macar-menu-boton .macar-icono { width: 1.5rem; height: 1.5rem; }
.macar-menu-boton .macar-menu-boton__cerrar, .macar-menu-boton[aria-expanded="true"] .macar-menu-boton__abrir { display: none; }
.macar-menu-boton[aria-expanded="true"] .macar-menu-boton__cerrar { display: inline-block; }
.macar-nav { border-top: 1px solid var(--macar-gris); }
.macar-nav__lista { display: flex; justify-content: center; gap: 2.5rem; margin: 0; padding: 0; list-style: none; }
.macar-nav__item { position: static; display: flex; align-items: center; }
.macar-nav__enlace { padding: 0.9rem 0; color: var(--macar-oscuro); font-size: var(--macar-t-principal); font-weight: 600; text-decoration: none; }
.macar-nav__abrir { width: 1.75rem; height: 1.75rem; border: 0; background: none; cursor: pointer; }
.macar-nav__abrir::before { content: ""; display: block; width: 0; height: 0; margin: auto; border: 0.3rem solid transparent; border-top-color: var(--macar-oscuro); border-bottom-width: 0; }
.macar-nav__abrir[aria-expanded="true"]::before { transform: rotate(180deg); }
.macar-panel { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--macar-blanco); border-top: 1px solid var(--macar-gris); box-shadow: 0 12px 24px rgb(0 0 0 / 0.12); }
.macar-nav__abrir[aria-expanded="true"] + .macar-panel { display: block; }
.macar-panel__interior { display: flex; flex-wrap: wrap; gap: var(--macar-e4); max-width: calc(var(--macar-ancho) + 2 * var(--macar-e2)); margin-inline: auto; padding: var(--macar-e3) var(--macar-e2); }
.macar-panel__titulo { margin-bottom: var(--macar-e1); font-weight: 600; font-size: var(--macar-t-principal); }
.macar-panel ul { margin: 0; padding: 0; list-style: none; }
.macar-panel li a { display: block; padding: 0.2rem 0; color: var(--macar-gourmet); text-decoration: none; }
.macar-panel li a:hover { color: var(--macar-licor); text-decoration: underline; }
.macar-panel__imagen { margin-left: auto; }
.macar-panel__imagen img { display: block; width: 270px; max-width: 100%; height: 270px; object-fit: cover; }

/* Minicarrito: cajón a la derecha. El estado abierto es una clase del <html> (ver mini-carrito.php). */
.macar-minicarrito { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(24rem, 100vw); padding: 3.5rem var(--macar-e3) var(--macar-e3); overflow-y: auto; background: var(--macar-blanco); transform: translateX(100%); visibility: hidden; transition: transform 0.25s, visibility 0.25s; }
.macar-minicarrito-abierto .macar-minicarrito { transform: none; visibility: visible; }
.macar-minicarrito__cerrar { position: absolute; top: 0.5rem; right: 0.9rem; border: 0; background: none; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--macar-oscuro); }
.macar-minicarrito__lista { margin: 0; padding: 0; list-style: none; }
.macar-minicarrito__linea { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: var(--macar-e2); align-items: center; padding: var(--macar-e2) 0; border-bottom: 1px solid var(--macar-gris); }
.macar-minicarrito__foto img { display: block; width: 100%; height: auto; }
.macar-minicarrito__datos { display: grid; gap: 0.4rem; }
.macar-minicarrito__nombre, .macar-minicarrito__precio { color: var(--macar-oscuro); }
.macar-minicarrito__quitar { color: var(--macar-gourmet); font-size: 1.4rem; line-height: 1; text-decoration: none; }
.macar-minicarrito__subtotal { margin: var(--macar-e2) 0; text-align: center; font-size: var(--macar-t-principal); }
.macar-minicarrito__botones { display: flex; gap: var(--macar-e1); }
.macar-minicarrito__boton { flex: 1; padding: 0.7rem 0.5rem; background: var(--macar-gourmet); color: var(--macar-blanco); text-align: center; text-decoration: none; }
.macar-minicarrito__boton:hover { background: var(--macar-oscuro); color: var(--macar-blanco); }
.macar-velo { position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / 0.45); visibility: hidden; opacity: 0; transition: opacity 0.25s, visibility 0.25s; }
.macar-minicarrito-abierto .macar-velo { visibility: visible; opacity: 1; }

.macar-pie { background: var(--macar-pie); color: var(--macar-blanco); font-size: var(--macar-t-texto); }
.macar-pie a, .macar-pie h2 { color: var(--macar-blanco); }
.macar-pie__rejilla.macar-contenedor { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--macar-e3); }
.macar-pie__titulo { margin: 0 0 var(--macar-e1); font-size: var(--macar-t-secundario); font-weight: 600; }
.macar-pie__col .macar-pie__titulo:not(:first-child) { margin-top: var(--macar-e3); }
.macar-pie__lista, .macar-pie__tarjetas, .macar-pie__redes { margin: 0; padding: 0; list-style: none; }
.macar-pie__lista a { display: inline-block; padding: 0.15rem 0; text-decoration: none; opacity: 0.85; }
.macar-pie__lista a:hover { text-decoration: underline; opacity: 1; }
.macar-pie__tel { text-decoration: none; }
.macar-pie__tarjetas, .macar-pie__redes { display: flex; flex-wrap: wrap; gap: var(--macar-e1); }
.macar-pie__tarjetas .macar-icono { width: 2.25rem; height: 1.75rem; vertical-align: top; }
.macar-pie__redes .macar-icono { width: 1.1rem; height: 1.1rem; }
.macar-pie__redes a { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; text-decoration: none; }
.macar-pie__redes a:hover { color: var(--macar-licor); }
.macar-pie__legal.macar-contenedor { padding-top: 0; text-align: center; font-size: var(--macar-t-pequeno); }
.macar-pie__marca img { display: block; width: 110px; height: auto; }
/* En móvil el foco de la cabecera, el pie y los cajones se ve sobre fondo oscuro también. */
.macar-pie :focus-visible { outline-color: var(--macar-blanco); }

@media (max-width: 1024px) {
	.macar-pie__rejilla.macar-contenedor { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.macar-cabecera__fila.macar-contenedor { padding-block: var(--macar-e1); gap: var(--macar-e1); }
	.macar-cabecera__logo { flex: 1 1 100%; }
	.macar-cabecera__logo img { margin-inline: auto; }
	.macar-buscador { flex: 1 1 100%; max-width: none; order: 3; }
	.macar-cabecera__cuenta { order: 4; }
	.macar-carrito { order: 5; margin-left: auto; }
	.macar-menu-boton { display: block; order: 6; padding: 0.4rem 0.6rem; border: 1px solid var(--macar-gris); border-radius: 5px; background: var(--macar-blanco); cursor: pointer; color: var(--macar-oscuro); }
	.macar-nav { display: none; }
	.macar-nav.macar-nav--abierto { display: block; }
	.macar-nav__lista { flex-direction: column; gap: 0; align-items: stretch; }
	.macar-nav__item { flex-wrap: wrap; justify-content: center; }
	.macar-panel { position: static; flex: 1 1 100%; box-shadow: none; }
	.macar-panel__interior { gap: var(--macar-e2); }
	.macar-panel__imagen { display: none; }
	.macar-pie__rejilla.macar-contenedor { grid-template-columns: 1fr; }
}
/* Sin JS el menú móvil no se podría abrir: se muestra siempre. */
html:not(.js) .macar-nav { display: block; }
/* Sin JS no hay botones que abrir: el menú se ve y los botones de despliegue y de menú sobran. */
html:not(.js) .macar-menu-boton, html:not(.js) .macar-nav__abrir { display: none; }
@media (prefers-reduced-motion: reduce) { .macar-minicarrito, .macar-velo { transition: none; } }

/* Popups: verificación de edad y «Regístrate» (Plan 2 · Tarea 4) */
.macar-popup { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--macar-e2); overflow-y: auto; background: rgba(0, 0, 0, 0.8); }
/* `hidden` manda sobre el display:flex de arriba: sin esta regla el popup se vería aunque lleve el atributo. */
.macar-popup[hidden] { display: none; }
.macar-popup__caja { position: relative; width: min(34rem, 100%); max-height: 100%; margin: auto; padding: var(--macar-e3); overflow-y: auto; background: var(--macar-blanco); color: var(--macar-oscuro); text-align: center; }
.macar-popup__titulo { margin: 0 0 var(--macar-e2); color: var(--macar-vino); font-size: var(--macar-t-titulo); }
.macar-popup__texto { margin: 0 0 var(--macar-e2); line-height: 1.5; }
.macar-popup__pregunta { margin: 0 0 var(--macar-e2); font-size: var(--macar-t-principal); font-weight: 700; }
.macar-popup__botones { display: flex; justify-content: center; gap: var(--macar-e2); margin-bottom: var(--macar-e2); }
.macar-popup__botones .macar-boton { min-width: 6rem; background: var(--macar-vino); }
.macar-popup__botones .macar-boton--secundario { background: var(--macar-gourmet); }
.macar-popup__botones .macar-boton:hover { background: var(--macar-oscuro); }
/* #c40000 sobre blanco: 6,3:1 (AA). */
.macar-popup__aviso { margin: 0 0 var(--macar-e2); color: var(--macar-rebaja); font-weight: 600; line-height: 1.5; }
.macar-popup__aviso[hidden] { display: none; }
.macar-popup__legal { margin: 0 0 var(--macar-e1); font-size: var(--macar-t-pequeno); line-height: 1.5; }
.macar-popup__cerrar { position: absolute; top: 0.5rem; right: 0.5rem; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; background: none; color: var(--macar-oscuro); cursor: pointer; }
.macar-popup__cerrar .macar-icono { width: 1.25rem; height: 1.25rem; }
/* Edad abierta: la página de detrás no se desplaza. Lo quita macar.js al decir «SI». */
html.macar-popup-bloqueo { overflow: hidden; }
@media (max-width: 480px) {
	.macar-popup__titulo { font-size: var(--macar-t-principal); }
}

/* Portada (Plan 2 · Tarea 5) */
:root {
	/* Variantes de texto, el cambio más pequeño que pasa AA (4,5:1) sobre el fondo REAL de cada uso: el Otros del kit #b98344
	   da 3,28:1 sobre la tarjeta blanca (nuevo #9a6d39: 4,54:1) y el Licor #e73458 da 3,73:1 sobre el fondo #f2f2f2 de las
	   noticias (nuevo #d81940: 4,54:1). Los del kit se siguen usando en iconos, fondos y botones. */
	--macar-otros-texto: #9a6d39;
	--macar-licor-texto: #d81940;
}
.macar-contenedor--ancho { max-width: calc(1300px + 2 * var(--macar-e2)); padding-block: 0; margin-block: 60px; }
.macar-portada-intro { padding-block: 0; margin-top: 60px; text-align: center; }
/* El h1 de la portada se estila como el párrafo de presentación de hoy (16 px, peso 300, interlineado 1,9). */
.macar-portada-intro__h1 { margin: 0 0 var(--macar-e3); font-size: var(--macar-t-secundario); font-weight: 300; line-height: 1.9; text-transform: none; }
.macar-portada-intro__h1 b { font-weight: 700; }
.macar-portada-titulo { margin: 0 0 var(--macar-e2); font-size: var(--macar-t-titulo); font-weight: 700; line-height: 1.2; text-align: center; text-transform: uppercase; }
.macar-portada-subtitulo { margin: 0 0 var(--macar-e1); font-size: 0.9375rem; line-height: 1.2; text-align: center; }

/* Carrusel */
.macar-slider { position: relative; overflow: hidden; background: var(--macar-gourmet); color: var(--macar-blanco); }
.macar-slider.macar-contenedor { padding-inline: 0; }
.macar-slider__pista { position: relative; height: 400px; }
.macar-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0.5s; }
.macar-slide.is-activa { opacity: 1; visibility: visible; }
/* Solo la del carrusel: la <picture> con la <source> vacía de móvil (partes/portada-slider.php). Global, afectaría a las <picture>
   que Imagify añade a las imágenes de toda la web mientras siga activo (display_webp = 1 en el volcado de producción). */
.macar-slide picture { display: contents; }
.macar-slide__imagen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.macar-slide__velo { position: absolute; inset: 0; background: rgba(0, 0, 0, var(--velo, 0.4)); }
.macar-slide__contenido { position: relative; width: 66%; max-width: 100%; padding: 0 var(--macar-e4); text-align: center; }
.macar-slider--hero .macar-slide__contenido { width: 35%; min-width: 22rem; }
.macar-slide--izq .macar-slide__contenido { text-align: left; }
.macar-slide__titulo { margin: 0 0 var(--macar-e2); color: var(--macar-blanco); font-size: 1.875rem; font-weight: 700; line-height: 1.2; text-transform: uppercase; }
.macar-slider--hero .macar-slide__titulo { font-size: var(--macar-t-titulo); }
.macar-slide__texto { margin: 0 0 var(--macar-e3); font-size: var(--macar-t-secundario); font-weight: 500; line-height: 1.2; }
.macar-slider--hero .macar-slide__texto { margin-bottom: 31px; font-size: var(--macar-t-principal); font-weight: 600; line-height: 1.4; }
.macar-slide__boton { display: inline-block; padding: 0.75rem 1.5rem; border: 2px solid var(--macar-blanco); color: var(--macar-blanco); font-size: var(--macar-t-principal); font-weight: 600; line-height: 1.2; text-decoration: none; }
.macar-slider--hero .macar-slide__boton { font-weight: 700; text-transform: uppercase; }
.macar-slide__boton:hover { background: var(--macar-blanco); color: var(--macar-oscuro); }
.macar-slide__boton:focus-visible { outline-color: var(--macar-blanco); }
/* Ken Burns de Elementor: un acercamiento lento de la diapositiva activa. */
@media (prefers-reduced-motion: no-preference) {
	.macar-slide.is-activa .macar-slide__imagen { animation: macar-zoom 8s ease-out both; }
}
@keyframes macar-zoom { from { transform: scale(1); } to { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .macar-slide { transition: none; } }
.macar-slider__mandos[hidden] { display: none; }
html:not(.js) .macar-slider__mandos { display: none; }
.macar-slider__flecha { position: absolute; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; padding: 0; transform: translateY(-50%); border: 0; background: rgba(0, 0, 0, 0.35); color: var(--macar-blanco); cursor: pointer; }
.macar-slider__flecha:hover { background: rgba(0, 0, 0, 0.7); }
.macar-slider__flecha:focus-visible, .macar-slider__punto:focus-visible, .macar-slider__pausa:focus-visible { outline-color: var(--macar-blanco); }
.macar-slider__flecha--ant { left: 0; }
.macar-slider__flecha--sig { right: 0; }
.macar-slider__puntos { position: absolute; bottom: 0.75rem; left: 50%; z-index: 2; display: flex; gap: 0.25rem; margin: 0; padding: 0; transform: translateX(-50%); list-style: none; }
/* Cada punto mide 24 px de zona de pulsación aunque se vea de 10. */
.macar-slider__punto { position: relative; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; background: none; cursor: pointer; }
.macar-slider__punto::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--macar-blanco); border-radius: 50%; background: transparent; }
.macar-slider__punto[aria-current="true"]::before { background: var(--macar-blanco); }
.macar-slider__pausa { position: absolute; right: 0.75rem; bottom: 0.5rem; z-index: 2; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--macar-blanco); border-radius: 50%; background: rgba(0, 0, 0, 0.35); color: var(--macar-blanco); cursor: pointer; }
.macar-slider__pausa .macar-icono { width: 0.75rem; height: 0.75rem; }
/* El carrusel principal solo sale en pantallas de más de 1024 px, como hoy (hide_tablet y hide_mobile). */
@media (max-width: 1024px) { .macar-slider--hero { display: none; } }
@media (max-width: 767px) {
	.macar-slider__pista { height: 677px; }
	.macar-slider--banner .macar-slider__pista { height: 400px; }
	.macar-slide__contenido, .macar-slider--hero .macar-slide__contenido { width: 100%; min-width: 0; padding: 0 3.5rem; }
	.macar-slide__titulo { font-size: var(--macar-t-secundario); }
	.macar-slide__texto { font-size: var(--macar-t-texto); }
}

/* Tres accesos */
.macar-portada-accesos__lista { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; padding: 0; list-style: none; }
.macar-portada-accesos__lista li { flex: 1 1 0; min-width: 0; }
.macar-acceso { position: relative; display: flex; align-items: center; justify-content: center; min-height: 300px; overflow: hidden; border-radius: 10px; background: var(--macar-oscuro); color: var(--macar-blanco); text-decoration: none; }
.macar-acceso__imagen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.macar-acceso__velo { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.66); }
.macar-acceso__texto { position: relative; padding: var(--macar-e2); text-align: center; }
.macar-acceso__titulo { margin: 0; color: var(--macar-blanco); font-size: var(--macar-t-titulo); font-weight: 700; }
.macar-acceso__lema { display: block; margin-top: 10px; font-size: var(--macar-t-secundario); font-weight: 500; line-height: 1.2; } /* 16/500, medido con el tema antiguo en la portada y en /tienda/ (era 18) */
.macar-acceso:hover .macar-acceso__velo { background: rgba(0, 0, 0, 0.5); }
.macar-acceso:focus-visible { outline-color: var(--macar-licor); outline-offset: 3px; }
@media (max-width: 1024px) {
	.macar-portada-accesos__lista li { flex-basis: 100%; }
	.macar-acceso { min-height: 120px; }
}

/* Tarjetas de producto: plantillas 188 (vino), 289 (licor) y 282 (gourmet) de Elementor, copiadas a la medida (Plan 3 · Tarea 7; medidas del tema
   antiguo con `herramientas/tarjetas-medir-antiguo.py`, comparadas en `pruebas/tarjetas.sh`). Cada número de abajo es una medida de hoy.
   El ancho lo manda la rejilla que la contiene: aquí solo se copia lo de dentro. La tarjeta es una pila de tres filas (alta, compra y valoración); la
   alta es la imagen (42 % del ancho útil) y una columna de texto. Fuente de 16 px / 24 px de línea en la tarjeta: es el «puntal» que fija la altura de
   los títulos (24 px por línea aunque el enlace sea de 18 px), como los widgets de Elementor. */
.macar-tarjetas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; margin: 40px 0 0; padding: 0; list-style: none; }
.macar-tarjeta { display: flex; flex-direction: column; min-width: 0; background: var(--macar-blanco); font-size: 1rem; line-height: 1.5; }
.macar-tarjeta__alta { display: flex; min-height: 270px; padding: 0 10px; }
/* Imagen: hoy un fondo de 250 px de ancho (180 en gourmet) centrado y sin repetir en un contenedor de 42 %: un recorte del centro. */
.macar-tarjeta__imagen { position: relative; display: block; flex: none; width: 42%; overflow: hidden; }
.macar-tarjeta__imagen img { position: absolute; top: 50%; left: 50%; display: block; width: 250px; max-width: none; height: auto; transform: translate(-50%, -50%); }
.macar-tarjeta[data-variante="gourmet"] .macar-tarjeta__imagen img { width: 180px; }
/* Columna de texto: 15 px por arriba y 10 por la derecha; el corazón es su primera fila (en el marcado va al final: el enlace del título se lee antes). */
.macar-tarjeta__texto { display: flex; flex: 1 1 0; flex-direction: column; gap: 10px; min-width: 0; padding: 15px 10px 0 0; }
.macar-tarjeta__corazon { order: -1; display: flex; justify-content: flex-end; height: 20px; }
.macar-tarjeta__contenido { display: flex; flex-direction: column; gap: 10px; padding: 10px; }
.macar-tarjeta__origen, .macar-tarjeta__region, .macar-tarjeta__formato, .macar-tarjeta__liquido, .macar-tarjeta__piezas, .macar-tarjeta__peso { margin: 0; color: #4e4e4e; font-size: var(--macar-t-pequeno); line-height: 1.2; }
.macar-tarjeta__origen, .macar-tarjeta__region, .macar-tarjeta__formato { text-transform: capitalize; }
.macar-tarjeta__formato { margin-top: 30px; }
.macar-tarjeta__titulo { margin: 0; font-size: 1rem; font-weight: 400; line-height: 1.5; text-transform: none; }
.macar-tarjeta__titulo a { color: var(--macar-oscuro); font-size: var(--macar-t-principal); font-weight: 700; line-height: 1.2; text-decoration: none; }
.macar-tarjeta__titulo a:hover { color: var(--macar-vino); }
.macar-tarjeta__anada, .macar-tarjeta__tipo { margin: 0; line-height: 1.2; }
.macar-tarjeta__anada { font-size: var(--macar-t-principal); font-weight: 700; }
.macar-tarjeta__tipo { font-size: var(--macar-t-secundario); font-weight: 600; }
.macar-tarjeta__anada a, .macar-tarjeta__tipo a, .macar-tarjeta__formato a { color: inherit; text-decoration: none; }
/* Gourmet: la columna de texto empieza 10 px a la derecha de la imagen, sin relleno a su izquierda, y el título es de 16 px. */
.macar-tarjeta[data-variante="gourmet"] .macar-tarjeta__texto { margin-left: 10px; padding: 0 2px 0 0; }
.macar-tarjeta[data-variante="gourmet"] .macar-tarjeta__contenido { padding: 15px 10px 0 0; }
.macar-tarjeta[data-variante="gourmet"] .macar-tarjeta__titulo a { font-size: var(--macar-t-secundario); line-height: 1.2; }
.macar-tarjeta__bloque-titulo { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.macar-tarjeta__marca { align-self: flex-start; margin: 5px 0 0; color: var(--macar-vino); font-size: 0.875rem; font-weight: 600; line-height: 1.2; }
.macar-tarjeta__marca a { color: inherit; text-decoration: none; }
.macar-tarjeta__bloque-formato { display: flex; flex-direction: row; align-items: flex-start; gap: 20px; }
.macar-tarjeta__liquido, .macar-tarjeta__piezas { font-weight: 500; }
.macar-tarjeta__piezas--max { margin-left: -16px; }
.macar-tarjeta__bloque-peso { display: flex; align-items: flex-start; margin-top: 8px; }
.macar-tarjeta__peso { font-size: 0.6875rem; font-weight: 500; line-height: 1.2; }
/* Compra: filete arriba y abajo, 20 px de relleno vertical; precio y fila de cantidad + botón a 20 px del borde. */
.macar-tarjeta__compra { display: flex; flex-direction: column; padding: 20px 0; border-block: 1px solid var(--macar-gris); }
.macar-tarjeta .price { margin: 0 0 14.4px 20px; color: var(--macar-oscuro); font-size: 1.4375rem; font-weight: 700; line-height: 1.5; }
/* WooCommerce pone `del` a media opacidad y color heredado (la nota de la Tarea 2): aquí vuelve el rojo AA. */
.macar-tarjeta .price del { color: var(--macar-rebaja); font-size: var(--macar-t-principal); opacity: 1; }
.macar-tarjeta .price ins { background: none; text-decoration: none; }
.macar-tarjeta__form { display: flex; margin: 0 20px; }
.macar-tarjeta .quantity { flex: none; }
.macar-tarjeta .quantity .qty { box-sizing: border-box; width: 58.1px; min-width: 0; height: 100%; padding: 8px 16px; border: 1px solid #666; border-radius: 3px; background: var(--macar-blanco); font-size: 1rem; line-height: 24px; text-align: center; }
/* `a.button` y `button.button` (0,2,1): el grupo global de arriba lleva `.woocommerce a.button` (0,2,1) y `body.woocommerce` está en las fichas y en los archivos de tipo de producto;
   con `.macar-tarjeta .button` (0,2,0) el botón de la tarjeta saldría a 18 px, cuadrado y de otro peso (Tarea 8). Aquí, más abajo en el fichero, gana el de la tarjeta. */
.macar-tarjeta a.button, .macar-tarjeta button.button { background: var(--macar-vino); border-radius: 3px; font-weight: 700; }
/* 10 px a la izquierda del botón, con o sin campo de cantidad (se vende de uno en uno: el campo es oculto y el botón conserva sus 10 px, como hoy). */
.macar-tarjeta a.add_to_cart_button, .macar-tarjeta button.add_to_cart_button { display: flex; align-items: center; justify-content: center; flex: 1; margin-left: 10px; padding: 7.416px 12px; font-size: var(--macar-t-pequeno); line-height: 12px; text-align: center; }
/* «Read more» / «Select options» (agotado, variable): el mismo botón, a 16 px, como hoy. */
.macar-tarjeta .button:not(.add_to_cart_button) { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 38px; padding: 9.888px 16px; font-size: var(--macar-t-secundario); line-height: 16px; text-align: center; }
/* Valoración: estrellas a la izquierda (45,128 % del ancho útil) y el recuento a la derecha, 10 px de relleno por fuera y por dentro. */
.macar-tarjeta__valoracion { display: flex; padding: 10px; }
.macar-tarjeta__estrellas, .macar-tarjeta__cuenta { display: flex; align-items: center; min-height: 44px; padding: 10px; }
.macar-tarjeta__estrellas { flex: none; width: 45.128%; }
.macar-tarjeta__cuenta { flex: 1; justify-content: flex-end; gap: 5px; margin: 0; color: var(--macar-otros-texto); font-size: var(--macar-t-pequeno); line-height: 1.2; }
.macar-tarjeta__cuenta .macar-icono { flex: none; width: 12px; height: 12px; margin-block: 6px; color: var(--macar-otros); }
/* Estrellas nativas de WooCommerce con los colores de la plantilla: en vino, marcadas en vino y sin marcar al 40 %; en licor y gourmet, en #454545 y
   #d5d5d5. El CSS de WooCommerce las define solo bajo `.woocommerce` (clase del body en sus páginas, no en las listas): se repite aquí la geometría
   con su fuente (WooCommerce.woff2, que ya sirve el propio plugin). Las sin marcar son estrellas SÓLIDAS (glifo «S» de la fuente, no el contorno «s»), como las de hoy. Cinco de 15 px de paso (75 px, como las de hoy): 5,4 em = 75 px. */
.macar-tarjeta .star-rating { position: relative; float: none; width: 75px; height: 15px; margin: 0; overflow: hidden; font-family: WooCommerce; font-size: 13.8889px; line-height: 1; }
.macar-tarjeta .star-rating::before { content: "\53\53\53\53\53"; position: absolute; top: 0; left: 0; float: left; color: rgba(134, 39, 87, 0.4); }
.macar-tarjeta .star-rating span { position: absolute; top: 0; left: 0; float: left; padding-top: 1.5em; overflow: hidden; }
.macar-tarjeta .star-rating span::before { content: "\53\53\53\53\53"; position: absolute; top: 0; left: 0; color: var(--macar-vino); }
.macar-tarjeta[data-variante="licor"] .star-rating::before, .macar-tarjeta[data-variante="gourmet"] .star-rating::before { color: var(--macar-gris); }
.macar-tarjeta[data-variante="licor"] .star-rating span::before, .macar-tarjeta[data-variante="gourmet"] .star-rating span::before { color: var(--macar-gourmet); }
.macar-tarjeta[data-variante="licor"] .macar-tarjeta__cuenta, .macar-tarjeta[data-variante="gourmet"] .macar-tarjeta__cuenta,
.macar-tarjeta[data-variante="licor"] .macar-tarjeta__cuenta .macar-icono, .macar-tarjeta[data-variante="gourmet"] .macar-tarjeta__cuenta .macar-icono { color: var(--macar-vino); }
@media (max-width: 1024px) { .macar-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 767px) {
	.macar-tarjetas { grid-template-columns: minmax(0, 1fr); }
	/* En móvil la tarjeta se apila (imagen de 250 px a todo el ancho útil y el texto debajo), como la de hoy. */
	.macar-tarjeta__alta { flex-direction: column; }
	.macar-tarjeta__imagen { width: auto; height: 250px; }
	.macar-tarjeta__texto { padding-right: 15px; padding-bottom: 15px; }
	.macar-tarjeta__contenido { padding: 10px 10px 10px 30px; }
	.macar-tarjeta[data-variante="gourmet"] .macar-tarjeta__texto { margin-left: 0; padding: 0 2px 15px 0; }
	.macar-tarjeta[data-variante="gourmet"] .macar-tarjeta__contenido { padding: 15px 15px 0 20px; }
}

/* Noticias */
.macar-noticias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 30px 0; padding: 0; list-style: none; }
.macar-noticia__imagen { display: block; margin-bottom: var(--macar-e2); aspect-ratio: 3 / 2; overflow: hidden; }
.macar-noticia__imagen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.macar-noticia__titulo { margin: 0 0 15px; font-size: var(--macar-t-principal); line-height: 1.2; }
.macar-noticia__titulo a { color: var(--macar-licor-texto); text-decoration: none; }
.macar-noticia__titulo a:hover { color: var(--macar-vino); text-decoration: underline; }
.macar-noticia__extracto { margin: 0; color: #4e4e4e; font-size: var(--macar-t-pequeno); line-height: 1.4; }
.macar-portada-folly { margin-top: var(--macar-e3); text-align: center; }
.macar-portada-folly p { margin: 0 0 5px; font-size: 0.9375rem; line-height: 1.8; }
.macar-portada-folly__enlace { color: var(--macar-oscuro); font-weight: 700; }
@media (max-width: 1024px) { .macar-noticias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .macar-noticias { grid-template-columns: minmax(0, 1fr); } }

/* Hazte socio */
.macar-portada-socio { margin: 80px 0; padding: 80px 0; background: var(--macar-gourmet); color: var(--macar-blanco); text-align: center; }
.macar-portada-socio .macar-contenedor { padding-block: 0; }
.macar-portada-socio__titulo { margin: 0 0 var(--macar-e2); color: var(--macar-blanco); font-size: 2.5rem; font-weight: 700; line-height: 1.2; }
.macar-portada-socio__texto { margin: 0 0 var(--macar-e2); font-size: var(--macar-t-secundario); font-weight: 500; line-height: 1.2; }
.macar-portada-socio__aviso { margin: 0; padding: var(--macar-e2); border: 1px dashed var(--macar-blanco); }

/* Añadir: con JS vale el botón AJAX del bucle de WooCommerce; sin JS, el botón del formulario POST. */
html.js .macar-tarjeta__sin-js, html:not(.js) .macar-tarjeta .ajax_add_to_cart, html:not(.js) .macar-deseos-item__form .ajax_add_to_cart { display: none; }
.macar-deseos-item__form { margin: 0; }
.macar-tarjeta .added_to_cart { display: none; }
.macar-tarjeta a.add_to_cart_button.loading { opacity: 0.6; }
.macar-tarjeta a.add_to_cart_button.loading::after { content: none; }
/* Avisos de WooCommerce en la portada (éxito sin JS, o error al añadir). */
.macar-portada-avisos { margin-block: var(--macar-e2) 0; }

/* Páginas informativas (Plan 2 · Tarea 6): empresa, historia y las tres de lienzo (responsabilidad, gracias, confirmación). */
.macar-info__titulo { margin: 0 0 var(--macar-e4); font-size: var(--macar-t-titulo); font-weight: 700; line-height: 1.2; text-align: center; text-transform: none; }
.macar-info__subtitulo { margin: 0 0 var(--macar-e4); font-size: var(--macar-t-principal); font-weight: 700; line-height: 1.2; text-align: center; }
.macar-info__texto { text-align: justify; }
.macar-info__texto a { color: var(--macar-licor-texto); text-decoration: none; }
.macar-info__texto a:hover { color: var(--macar-vino); }
/* El texto de Empresa es #7A7A7A a 13 px sobre #f2f2f2: 3,8:1, no pasa AA. #6e6e6e es el cambio más pequeño que llega a 4,5:1
   (4,6:1 sobre ese fondo real). Decisión pendiente de Darío (PAGINAS-PLAN2.md, Tarea 6). */
.macar-info__texto--tenue { color: #6e6e6e; font-size: 0.8125rem; line-height: 1.55; }
.macar-empresa__intro { margin-top: 80px; padding-bottom: 100px; padding-top: 0; }
.macar-empresa__banda { min-height: 420px; background-position: center; background-size: cover; background-attachment: fixed; }
/* iOS ignora el fondo fijo y lo estira: en móvil la banda se mueve con la página. */
@media (max-width: 1024px) { .macar-empresa__banda { background-attachment: scroll; min-height: 300px; } }
.macar-clientes { padding: 50px 0; background: var(--macar-blanco); }
.macar-clientes .macar-contenedor { padding-block: 0; }
.macar-clientes__titulo { margin-bottom: 52px; font-size: var(--macar-t-titulo); text-transform: none; }
.macar-clientes__lista { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: center; justify-items: center; margin: 0; padding: 20px 0; list-style: none; }
.macar-clientes__lista img { width: auto; max-width: min(100%, 100px); max-height: 100px; height: auto; object-fit: contain; }
@media (max-width: 767px) { .macar-clientes__lista { grid-template-columns: repeat(2, 1fr); } .macar-clientes__titulo { margin-bottom: 30px; } }
.macar-historia__intro { padding-bottom: 0; }
.macar-historia__foto { padding-block: var(--macar-e4); text-align: center; }
.macar-historia__foto img { max-width: 800px; width: 100%; height: auto; }
.macar-historia__anio { margin-bottom: var(--macar-e1); }
.macar-historia__cuerpo .macar-info__subtitulo { margin-bottom: var(--macar-e4); }
/* «Hazte socio» de estas dos páginas va en blanco, con el título en negro; el de la portada, en gris Gourmet. */
.macar-socio-claro { margin: 80px 0 160px; }
.macar-socio-claro .macar-portada-socio { margin: 0; background: var(--macar-blanco); color: var(--macar-oscuro); }
.macar-socio-claro .macar-portada-socio__titulo { color: var(--macar-oscuro); }

/* Lienzo: imagen a pantalla completa, velo oscuro y la caja de texto en la mitad izquierda. */
.macar-aviso { margin: 0; background: var(--macar-oscuro); }
.macar-aviso__fondo { position: relative; display: flex; align-items: flex-start; min-height: 100vh; background-position: center right; background-repeat: no-repeat; background-size: cover; }
.macar-aviso__fondo::before { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--macar-velo, 0.5); }
.macar-aviso__caja { position: relative; width: 100%; padding: 105px var(--macar-e2) 40px max(var(--macar-e2), calc((100% - var(--macar-ancho)) / 2 + var(--macar-e2))); color: var(--macar-blanco); }
.macar-aviso__logo { display: inline-block; }
.macar-aviso__logo img { display: block; width: 100px; height: auto; }
.macar-aviso__titulo { margin: var(--macar-e2) 0 var(--macar-e2); font-size: var(--macar-t-titulo); font-weight: 700; line-height: 1.2; color: var(--macar-blanco); text-transform: uppercase; }
.macar-aviso__texto { margin: 0 0 var(--macar-e3); font-size: var(--macar-t-secundario); font-weight: 500; line-height: 1.2; text-transform: uppercase; }
.macar-aviso__boton { display: inline-block; font-size: var(--macar-t-secundario); background: var(--macar-vino); color: var(--macar-blanco); font-weight: 600; text-transform: uppercase; text-decoration: none; }
.macar-aviso__boton:hover { background: var(--macar-oscuro); }
@media (max-width: 767px) { .macar-aviso__caja { width: 100%; padding: 110px 30px 40px; } .macar-aviso__boton { padding: 0.9rem 1.5rem; } }

/* FAQs, contacto, blog y 404 (Plan 2 · Tarea 7). Medidas contra el HTML renderizado de hoy a 1440 y 390 px. */

/* FAQs: tres grupos en rejilla 1fr 3fr con 100 px de hueco y caja de 1290 px (columna de la imagen a la izquierda). */
.macar-faq { display: grid; grid-template-columns: 1fr 3fr; gap: 100px; width: min(1290px, 100%); margin-inline: auto; padding: 40px 0 120px; }
.macar-faq--primero { padding-top: 120px; }
.macar-faq__imagen { grid-column: 1; align-self: start; }
.macar-faq__imagen img { display: block; width: 100%; max-width: 300px; height: auto; }
.macar-faq__cuerpo { grid-column: 2; min-width: 0; }
.macar-faq__titulo { margin: 0 0 var(--macar-e3); font-size: 1.625rem; font-weight: 700; line-height: 1.2; text-transform: uppercase; }
.macar-faq__intro { margin: 0 0 var(--macar-e3); }
.macar-faq__item { border-bottom: 1px solid #d8d8d8; }
.macar-faq__item summary { position: relative; display: block; padding: 20px 2.5rem 20px 0; font-size: var(--macar-t-principal); font-weight: 600; line-height: 1.2; list-style: none; cursor: pointer; }
.macar-faq__item summary::-webkit-details-marker { display: none; }
/* Más / menos sin iconos ni imágenes: dos barras con degradados, la vertical solo con el grupo cerrado. */
.macar-faq__item summary::after { content: ""; position: absolute; right: 0; top: 50%; width: 14px; height: 14px; transform: translateY(-50%);
	background: linear-gradient(currentColor, currentColor) center / 100% 3px no-repeat, linear-gradient(currentColor, currentColor) center / 3px 100% no-repeat; }
.macar-faq__item[open] summary { border-bottom: 1px solid #d8d8d8; }
.macar-faq__item[open] summary::after { background: linear-gradient(currentColor, currentColor) center / 100% 3px no-repeat; }
.macar-faq__respuesta { padding: 30px 0; }
/* La respuesta de hoy es #9f9f9f sobre #f2f2f2 (2,6:1, no pasa AA); #6e6e6e da 4,6:1: el cambio más pequeño que llega (PAGINAS-PLAN2.md). */
.macar-faq__respuesta p { margin: 0; color: #6e6e6e; line-height: 2; }
.macar-faq__respuesta p + p { margin-top: var(--macar-e2); }
@media (max-width: 1024px) {
	.macar-faq { grid-template-columns: 1fr; gap: var(--macar-e3); padding: 40px var(--macar-e2) 60px; }
	.macar-faq--primero { padding-top: 60px; }
	.macar-faq__imagen, .macar-faq__cuerpo { grid-column: 1; }
}

/* Contacto */
/* El texto blanco de hoy va directo sobre la foto de madera. Medido por píxeles con el texto oculto (pruebas/contraste-banner.py), el
   fondo más claro detrás de cada línea daba entre 1,5:1 y 3,6:1 según la anchura, por debajo de los 3:1 que AA pide al texto
   grande (el título es de 30-36 px). Un degradado negro en la franja baja, donde está el título, sube el MÍNIMO por línea y
   anchura sobre 3:1 (cifras en PAGINAS-PLAN2.md); lo alto de la foto no se toca. Decisión pendiente de Darío. */
.macar-contacto__banner { position: relative; display: flex; align-items: flex-end; min-height: 550px; padding: 20px max(var(--macar-e2), calc((100% - 1280px) / 2 + 68px)) 60px; background-position: center; background-repeat: no-repeat; background-size: cover; }
.macar-contacto__banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0) 90%); }
.macar-contacto__titulo { position: relative; margin: 0; color: var(--macar-blanco); font-size: 2.25rem; line-height: 42px; text-transform: none; }
.macar-contacto__titulo-1 { display: block; font-weight: 200; letter-spacing: 1px; }
.macar-contacto__titulo-2 { display: block; font-weight: 400; letter-spacing: 2px; }
.macar-contacto__h2 { margin: 0 0 10px; font-size: 1.625rem; font-weight: 700; line-height: 1.2; text-align: center; text-transform: uppercase; }
.macar-contacto__h3 { margin: 0 0 10px; font-size: var(--macar-t-secundario); font-weight: 500; line-height: 1.2; text-align: center; }
.macar-contacto__texto { color: #3a3a3a; text-align: center; }
.macar-contacto__texto a { color: var(--macar-licor-texto); text-decoration: none; }
.macar-contacto__texto a:hover { text-decoration: underline; }
.macar-contacto__ayuda { padding-block: 25px; }
.macar-contacto__datos { padding-top: 0; padding-bottom: 65px; }
.macar-contacto__caja { width: min(1100px, 100%); margin: var(--macar-e3) auto 0; }
.macar-contacto__formulario { padding: 0 10px; background: var(--macar-blanco); }
.macar-contacto__ficha { margin-top: 10px; padding: 10px; background: #fafafa; color: #0a0a0a; font-size: 0.8125rem; line-height: 22px; text-align: center; }
.macar-contacto__ficha p { margin: 0 0 14.4px; }
.macar-contacto__ficha a { color: #000; text-decoration: none; }
.macar-contacto__ficha a:hover { text-decoration: underline; }
.macar-contacto__h3-ficha { margin: 0 0 10px; font-size: 0.9375rem; font-weight: 500; line-height: 21px; letter-spacing: 1px; }
.macar-contacto__h2--mapa { margin-bottom: 20px; font-size: 1.875rem; line-height: 45px; text-transform: none; }
.macar-contacto__mapa { padding-top: 20px; }
/* Filtro de hoy sobre el mapa: gris, algo más oscuro y menos contraste (brillo 86, contraste 93, saturación 0, tono 10). */
.macar-contacto__iframe { display: block; width: 100%; height: 450px; border: 0; filter: brightness(86%) contrast(93%) saturate(0%) hue-rotate(10deg); }
/* El marcador ocupa lo que el mapa (450 px, todo el ancho) para que la página no cambie de alto al cargarlo. Texto #212121 sobre #d5d5d5. */
.macar-contacto__mapa-marcador { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 450px; padding: var(--macar-e2); background: var(--macar-gris); color: var(--macar-pie); text-align: center; }
.macar-contacto__mapa-accion[hidden] { display: none; }
.macar-contacto__mapa-marcador .macar-boton { min-height: 44px; }
.macar-contacto__mapa-aviso { max-width: 32rem; margin: var(--macar-e2) 0 0; font-size: var(--macar-t-texto); line-height: 1.5; }
.macar-contacto__mapa-aviso a { color: inherit; text-decoration: underline; }
@media (max-width: 767px) {
	.macar-contacto__banner { min-height: 400px; justify-content: center; padding-inline: var(--macar-e2); }
	.macar-contacto__titulo { font-size: 1.875rem; text-align: center; }
	.macar-contacto__ayuda { padding: 70px 10px; }
	.macar-contacto__datos { padding: 0 10px 70px; }
	.macar-contacto__h2--mapa { line-height: 38px; }
}

/* Blog: actualidad, entrada y archivos (fondo blanco, como hoy). */
/* flow-root: los márgenes del «Hazte socio» y de los recuadros quedan DENTRO del fondo blanco (sin él, se colapsan hacia fuera y sale una franja gris). */
.macar-blog { display: flow-root; background: var(--macar-blanco); }
.macar-blog-hero { padding: 0 8%; }
.macar-blog-hero__caja { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 520px; padding: 10%; background-color: #f3f5f8; background-position: bottom right; background-repeat: no-repeat; background-size: cover; text-align: center; }
.macar-blog-hero__caja::before { content: ""; position: absolute; inset: 0; background: #000; opacity: 0.5; }
.macar-blog-hero__titulo, .macar-blog-hero__texto { position: relative; max-width: 650px; color: var(--macar-blanco); }
.macar-blog-hero__titulo { margin: 0 0 20px; font-size: clamp(2.25rem, 10vw, 3.75rem); line-height: 1.2; text-transform: uppercase; }
.macar-blog-hero__texto { margin: 0; font-size: 1.375rem; font-weight: 500; line-height: 1.6; }
.macar-blog__intro { padding-top: 40px; padding-bottom: 0; }
.macar-blog__intro p { margin: 0 0 14.4px; font-size: 0.9375rem; line-height: 1.4; }
.macar-blog__h2, .macar-blog__h3 { margin: 8px 0 16px; font-weight: 500; line-height: 1.2; }
.macar-blog__h2 { font-size: 1.75rem; }
.macar-blog__h3 { font-size: 1.5rem; }
.macar-blog__listado { width: min(100% - 16%, 1210px); margin: 8px auto 0; padding: 80px 0 80px; }
.macar-blog__tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 80px 60px; }
.macar-blog__vacio { text-align: center; }
.macar-tarjeta-noticia__imagen { position: relative; display: block; height: 0; padding-bottom: calc(var(--macar-ratio, 0.8) * 100%); overflow: hidden; }
.macar-tarjeta-noticia__imagen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.macar-tarjeta-noticia__texto { margin-top: 20px; }
.macar-tarjeta-noticia__titulo { margin: 0 0 8px; font-size: 1.375rem; font-weight: 600; line-height: 1.2; text-transform: capitalize; }
.macar-tarjeta-noticia__titulo a { color: #1c244b; text-decoration: none; }
.macar-tarjeta-noticia__titulo a:hover { text-decoration: underline; }
/* El extracto de hoy es #777 (4,48:1 sobre blanco: se queda a una décima de AA); #767676 da 4,54:1. */
.macar-tarjeta-noticia__extracto { margin: 0; color: #767676; line-height: 1.5; font-size: var(--macar-t-secundario); }
/* «Read More» de hoy: #467ff7 cursiva y subrayado, 3,7:1 sobre blanco. #2b6cf6 da 4,6:1, el cambio más pequeño que llega a AA. */
.macar-tarjeta-noticia__leer { display: inline-block; margin-top: 20px; color: #2b6cf6; font-size: var(--macar-t-secundario); font-style: italic; line-height: 1; text-decoration: underline; text-transform: capitalize; }
@media (max-width: 1024px) { .macar-blog__tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 71px; } }
@media (max-width: 767px) {
	.macar-blog-hero { padding: 0 20px; }
	.macar-blog-hero__caja { min-height: 260px; padding: 20px; }
	.macar-blog__listado { width: min(100% - 40px, 1210px); padding: 40px 0; }
	.macar-blog__tarjetas { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.macar-tarjeta-noticia__titulo { font-size: var(--macar-t-principal); }
	.macar-tarjeta-noticia__extracto, .macar-tarjeta-noticia__leer { font-size: var(--macar-t-texto); }
}
/* «Hazte socio» gris del blog: banda #f0f0f0 con el título pequeño de hoy (18 px, 600). */
.macar-socio-gris { margin: 0 0 80px; }
.macar-socio-gris .macar-portada-socio { margin: 0; background: #f0f0f0; color: var(--macar-oscuro); }
.macar-socio-gris .macar-portada-socio__titulo { color: var(--macar-oscuro); font-size: var(--macar-t-principal); font-weight: 600; }
/* Recuadros finales: dos imágenes de 560 px con el título enlazado encima. */
.macar-blog-recuadros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; width: min(1140px, 100% - 2 * var(--macar-e2)); margin: 0 auto; padding: 10px 0 160px; }
.macar-blog-recuadro { display: flex; align-items: center; justify-content: center; min-height: 145px; padding: 10px; background-position: center; background-size: cover; color: var(--macar-blanco); font-size: 1.375rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; text-transform: uppercase; }
.macar-blog-recuadro:hover { color: var(--macar-blanco); text-decoration: underline; }
@media (max-width: 767px) { .macar-blog-recuadros { grid-template-columns: minmax(0, 1fr); padding-bottom: 80px; } }

/* Entrada */
.macar-entrada__articulo { width: min(970px, 100% - 2 * var(--macar-e2)); margin: 0 auto; padding-top: 2px; }
.macar-entrada__cabecera { padding-top: 28px; }
.macar-entrada__titulo { margin: 0; color: #1c244b; font-size: clamp(1.75rem, 6vw, 2.625rem); font-weight: 600; line-height: 1.2; text-align: center; text-transform: none; }
.macar-entrada__meta { display: flex; justify-content: center; margin: 15px 0 0; padding: 0; color: #707070; list-style: none; }
.macar-entrada__meta li + li { margin-left: 31px; padding-left: 31px; border-left: 1px solid #1c244b; }
.macar-entrada__meta a { color: #707070; text-decoration: none; }
.macar-entrada__meta a:hover { text-decoration: underline; }
.macar-entrada__imagen { margin-top: 20px; }
.macar-entrada__imagen img { display: block; width: 100%; height: auto; }
.macar-entrada__contenido { margin-top: 50px; color: #454545; line-height: 2; }
/* Enlaces del cuerpo: #cc3366 de hoy (4,96:1 sobre blanco, ya pasa AA: no se toca). */
.macar-entrada__contenido a { color: #cc3366; }
.macar-entrada__navegacion { display: flex; justify-content: space-between; margin-top: 50px; padding-top: 30px; border-top: 1px solid #1c244b; }
.macar-entrada__navegacion a { color: #1c244b; font-weight: 700; text-decoration: none; text-transform: uppercase; }
.macar-entrada__navegacion a:hover { text-decoration: underline; }
.macar-entrada__compartir { display: flex; align-items: center; gap: 30px; margin-top: 50px; color: #324a6d; }
.macar-entrada__compartir a { color: #000; line-height: 1; }
.macar-entrada__compartir .macar-icono { width: 22px; height: 22px; }
.macar-entrada__relacionadas { width: min(970px, 100% - 2 * var(--macar-e2)); margin: 3px auto 0; padding-top: 50px; }
.macar-entrada__relacionadas-titulo { margin: 0 0 100px; color: #131313; font-size: clamp(2rem, 7vw, 2.8125rem); font-weight: 600; line-height: 1; text-align: center; }
.macar-blog__tarjetas--relacionadas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.macar-blog__tarjetas--relacionadas .macar-tarjeta-noticia__titulo { font-size: var(--macar-t-principal); text-transform: none; }
.macar-blog__tarjetas--relacionadas .macar-tarjeta-noticia__extracto { display: none; }
.macar-blog__tarjetas--relacionadas .macar-tarjeta-noticia__leer { margin-top: 0; color: #454545; font-size: var(--macar-t-texto); font-style: normal; font-weight: 500; text-decoration: none; text-transform: uppercase; }
.macar-entrada .macar-socio-claro, .macar-entrada .macar-socio-claro + * { margin-top: 0; }
@media (max-width: 767px) { .macar-blog__tarjetas--relacionadas { grid-template-columns: minmax(0, 1fr); } .macar-entrada__relacionadas-titulo { margin-bottom: 20px; } }

/* Paginación de los archivos y la búsqueda (con enlaces: no necesita JS). */
.macar-archivo__paginas .nav-links { display: flex; justify-content: center; gap: var(--macar-e2); margin-top: var(--macar-e4); }
.macar-archivo__paginas a, .macar-archivo__paginas .current { padding: 0.4rem 0.8rem; }
.macar-archivo__paginas .current { font-weight: 700; }

/* 404 */
.macar-404 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; min-height: 75vh; margin-bottom: 80px; padding: var(--macar-e4) var(--macar-e2); background-position: center; background-repeat: no-repeat; background-color: var(--macar-oscuro); color: var(--macar-blanco); text-align: center; }
.macar-404__titulo { margin: 0; color: var(--macar-blanco); font-size: clamp(3rem, 16vw, 4.375rem); line-height: 1; text-transform: none; }
.macar-404__texto { margin: 0; font-size: clamp(1.25rem, 6vw, 1.625rem); font-weight: 600; line-height: 1; }
.macar-404__boton { margin-top: 30px; padding: 12px 24px; background: var(--macar-vino); font-size: var(--macar-t-principal); text-transform: uppercase; }

/* --- Textos legales (Plan 2 · Tarea 8, plantilla-legal.php) ----------------------------------------------------------------------
   Medido en las seis páginas de hoy (Elementor, 390 y 1440 px): fondo #f2f2f2 del cuerpo, texto negro 14 px con interlineado 21 px
   (28 en privacidad), justificado; secciones en h2 de 18 px, peso 600 y mayúsculas; el título, un h2 de 32 px peso 500 (aviso legal)
   o de 26 px en negrita y mayúsculas (cookies): aquí uno solo para las seis, el del aviso legal, y como h1; enlaces #cc3366 sin
   subrayar. Cambios (PAGINAS-PLAN2.md, Tarea 8): medida de lectura de 75 caracteres centrada (hoy, 1140 px: ~180 caracteres por
   línea), texto alineado a la izquierda (el justificado abre huecos en móvil), interlineado 1,6, y enlaces subrayados en
   --macar-enlace-texto (#ca3265; contraste medido en :root). Correos y URL largas se parten para no desbordar a
   390 px. */
.macar-legal__texto, .macar-legal__otros { max-width: calc(75ch + 2 * var(--macar-e2)); line-height: 1.6; overflow-wrap: anywhere; }
.macar-legal__texto { padding-bottom: 0; }
.macar-legal__titulo { margin-bottom: var(--macar-e4); font-size: clamp(1.625rem, 5vw, 2rem); font-weight: 500; line-height: 1.25; text-transform: none; }
.macar-legal__texto h2, .macar-legal__otros-titulo { margin: var(--macar-e4) 0 var(--macar-e2); font-size: var(--macar-t-principal); font-weight: 600; text-transform: uppercase; }
.macar-legal__titulo + h2, .macar-legal__titulo + p { margin-top: 0; }
.macar-legal__texto h3 { margin: var(--macar-e3) 0 var(--macar-e1); font-size: var(--macar-t-secundario); font-weight: 600; }
.macar-legal__texto ul, .macar-legal__texto ol, .macar-legal__otros ul { margin: 0 0 var(--macar-e2); padding-left: 1.5rem; }
.macar-legal__texto li + li { margin-top: 0.35rem; }
.macar-legal__texto a, .macar-legal__otros a { color: var(--macar-enlace-texto); text-decoration: underline; text-underline-offset: 0.15em; }
.macar-legal__texto a:hover, .macar-legal__otros a:hover { color: var(--macar-vino); }
/* Modelo de formulario de desistimiento (devoluciones): recuadro para distinguirlo del texto y poder copiarlo. */
.macar-legal__formulario { padding: var(--macar-e3); border: 1px solid var(--macar-gris); background: var(--macar-blanco); }
.macar-legal__formulario > :last-child { margin-bottom: 0; }
.macar-legal__otros { padding-top: var(--macar-e2); }
/* La lista final es de enlaces sueltos (no van dentro de una frase): cada uno con al menos 24 px de alto (WCAG 2.5.8). */
.macar-legal__otros li a { display: inline-block; padding: 0.15rem 0; }

/* --- Ficha de producto de vino (Plan 3 · Tarea 3, partes/ficha-vino.php y bodega.php) ---------------------------------------------
   Medidas de la plantilla 26 de hoy a 1440 px (caja blanca de 1140, imagen al 40 % y resumen con 40 px de margen, títulos de sección
   de 18/600 con filete gris, datos en tres columnas, cata en cuatro) y a 390. Dos cosas que NO se copian: a 900 px la web de hoy se
   desborda (el recuadro de la bodega queda fuera de la pantalla), aquí las dos columnas se apilan por debajo de 1025 px; y la bodega
   mide 436 px y no 445 (la de hoy sobresale 9 px de la caja). */
.macar-ficha__contenedor { display: flex; flex-direction: column; gap: 20px; max-width: calc(var(--macar-ancho) + 20px); padding: 20px 10px 0; } /* contenido de 1140 como hoy: el máximo de .macar-contenedor suma 2rem y este relleno resta solo 20 px */
.macar-ficha__caja { display: flex; flex-direction: column; gap: 20px; padding: 30px; background: var(--macar-blanco); }
.macar-ficha__producto { flex-direction: row; padding: 10px; }
.macar-ficha__imagen { flex: 0 0 40%; padding: 10px; text-align: center; }
.macar-ficha__imagen img { display: block; width: 100%; height: auto; }
/* Imagen con lupa y ampliación (partes/imagen-zoom.php). La lupa: 20×20 blanca arriba a la derecha, siempre visible, como la de hoy
   (esa va en #a1a2a4, 2,5:1 sobre blanco, por debajo de los 3:1 de un icono de interfaz: aquí #767676, 4,5:1). */
/* `.macar-zoom .macar-zoom__grande`: más específico que `.woocommerce img { max-width: 100% }`, que si no encogería la imagen ampliada. */
.macar-zoom { position: relative; overflow: hidden; }
.macar-zoom__lupa { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: var(--macar-blanco); color: #767676; }
.macar-zoom__lupa:hover { color: var(--macar-oscuro); }
.macar-zoom__lupa .macar-icono { width: 13px; height: 13px; }
.macar-zoom .macar-zoom__grande { position: absolute; top: 0; left: 0; z-index: 1; display: block; max-width: none; pointer-events: none; }
.macar-zoom .macar-zoom__grande[hidden] { display: none; }
.macar-ficha__resumen { display: flex; flex: 1 1 0; flex-direction: column; justify-content: space-between; gap: 20px; min-width: 0; padding: 40px; color: #4e4e4e; }
.macar-ficha__cabecera { display: flex; flex-direction: column; gap: 20px; }
.macar-ficha__cabecera p, .macar-ficha__compra p { margin: 0; }
.macar-ficha__lugar { display: flex; align-items: baseline; gap: 3px; font-size: var(--macar-t-texto); font-weight: 500; line-height: 1.2; }
.macar-ficha__pais { font-size: var(--macar-t-pequeno); font-weight: 400; }
.macar-ficha__titulos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 5px; }
.macar-ficha__titulo, .macar-ficha__envejecimiento, .macar-ficha__ano { margin: 0; color: var(--macar-oscuro); font-size: var(--macar-t-titulo); font-weight: 700; line-height: 1.2; text-transform: uppercase; }
.macar-ficha__subcabecera { display: flex; flex-wrap: wrap; align-items: flex-end; }
.macar-ficha__variedad { font-size: 1.375rem; font-weight: 600; line-height: 1.2; text-transform: capitalize; }
.macar-ficha__variedad a { color: var(--macar-oscuro); text-decoration: none; }
.macar-ficha__variedad a:hover { color: var(--macar-licor); }
.macar-ficha__anada { margin: 0 0 1px 14px; font-size: var(--macar-t-principal); font-weight: 600; line-height: 1.2; }
.macar-ficha__formato { font-size: 0.9375rem; font-weight: 500; line-height: 1.2; }
.macar-ficha__compra { display: flex; flex-direction: column; gap: 20px; padding-top: 2px; border-top: 1px solid var(--macar-gris); }
.macar-ficha__linea-precio { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
/* Precio de la ficha: 45/700 negro. `del` con la opacidad y el color de WooCommerce anulados (rebaja en rojo con contraste, tabla en :root). */
.macar-ficha__precio { color: var(--macar-oscuro); font-size: 2.8125rem; font-weight: 700; line-height: 1.2; }
.macar-ficha .price del { color: var(--macar-rebaja); font-size: var(--macar-t-principal); opacity: 1; }
.macar-ficha .price ins { background: none; text-decoration: none; }
.macar-ficha__iva { font-size: 0.9375rem; font-weight: 600; line-height: 1.2; }
.macar-ficha__carrito { margin-left: 26px; }
@media (max-width: 767px) { .macar-ficha__carrito { margin-left: 0; } }
.macar-ficha__carrito form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0; }
.macar-ficha__carrito .quantity .qty { width: 3.625rem; height: 2.75rem; padding: 0.25rem; text-align: center; border: 1px solid var(--macar-gris); background: var(--macar-blanco); }
.macar-ficha__carrito .single_add_to_cart_button { height: 2.75rem; padding: 0 1.1rem; font-size: var(--macar-t-principal); font-weight: 600; }
/* Destilado y gourmet entre 768 y 1024 px: precio y carrito en UNA fila, 198 + 20 + 198 como hoy (medido a 900: caja del producto 512,9 en el gourmet, 554 el destilado). Hoy el IVA
   se pisa con el «€» (el precio de 45 px desborda su caja de 133); aquí el precio baja a 30 px para que no se pisen, y el botón a 14 px para que quepa «Añadir al carrito» en 198.
   Sin esto el carrito salta a otra línea y la caja crece 22 px (hallado al añadir la fila de valoración, Tarea 8). El vino hoy SÍ salta de línea (caja de 662): no se toca. */
@media (min-width: 768px) and (max-width: 1024px) {
	.macar-ficha--destilado .macar-ficha__linea-precio, .macar-ficha--gourmet .macar-ficha__linea-precio { display: grid; grid-template-columns: 198px minmax(0, 1fr); align-items: center; gap: 0 20px; min-height: 54px; }
	.macar-ficha--destilado .macar-ficha__precio, .macar-ficha--gourmet .macar-ficha__precio { grid-area: 1 / 1; font-size: 1.875rem; }
	.macar-ficha--destilado .macar-ficha__iva, .macar-ficha--gourmet .macar-ficha__iva { grid-area: 1 / 1; justify-self: end; }
	.macar-ficha--destilado .macar-ficha__carrito, .macar-ficha--gourmet .macar-ficha__carrito { grid-area: 1 / 2; margin-left: 0; min-width: 0; }
	.macar-ficha--destilado .macar-ficha__carrito form.cart, .macar-ficha--gourmet .macar-ficha__carrito form.cart { flex-wrap: nowrap; gap: 10px; }
	.macar-ficha--destilado .macar-ficha__carrito .single_add_to_cart_button, .macar-ficha--gourmet .macar-ficha__carrito .single_add_to_cart_button { padding: 0 12px; font-size: var(--macar-t-texto); }
	/* Gourmet: el divisor de hoy mide 5 y deja 20 hasta la fila (aquí 3: borde y relleno), y el aviso de envío lleva 10 de margen; a 1440 la imagen manda y la holgura lo absorbe. */
	.macar-ficha--gourmet .macar-ficha__compra { padding-top: 24px; }
	.macar-ficha--gourmet .macar-ficha__envio { margin-top: 10px; }
}
.macar-ficha__agotado { margin: 0; color: var(--macar-rebaja); font-size: var(--macar-t-principal); font-weight: 700; }
.macar-ficha__formato--compra { font-size: var(--macar-t-texto); font-weight: 400; line-height: 2; }
.macar-ficha__envio { margin: 0; padding: 0; list-style: none; font-size: var(--macar-t-pequeno); line-height: 1.2; }
.macar-ficha__envio li { display: flex; align-items: center; gap: 0.5rem; }
.macar-ficha__envio .macar-icono { flex: 0 0 auto; width: 14px; height: 14px; fill: #4e4e4e; }
/* Secciones */
.macar-ficha__seccion { margin: 0 0 10px; padding-bottom: 1px; border-bottom: 1px solid var(--macar-gris); font-size: var(--macar-t-principal); font-weight: 600; line-height: 1.2; }
.macar-ficha__seccion--mayusculas { text-transform: uppercase; }
.macar-ficha__descripcion { text-align: justify; line-height: 2; }
.macar-ficha__descripcion > :last-child { margin-bottom: 0; }
.macar-ficha__fila { display: grid; grid-template-columns: minmax(0, 60%) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.macar-ficha__info, .macar-ficha__bodega { margin: 0; }
.macar-ficha__datos { display: flex; flex-wrap: wrap; gap: 10px; text-align: left; }
.macar-ficha__dato { flex: 0 0 calc((100% - 20px) / 3); padding: 10px; line-height: 2; }
.macar-ficha__datos--cata .macar-ficha__dato { flex-basis: calc((100% - 30px) / 4); }
.macar-ficha__dato b { font-weight: 600; }
.macar-ficha__bodega { gap: 10px; }
.macar-ficha__bodega-nombre { margin: 10px 0 0; font-size: var(--macar-t-principal); line-height: 1.2; text-transform: uppercase; }
.macar-ficha__bodega-linea { margin: 0; font-size: var(--macar-t-pequeno); line-height: 1.8; }
.macar-ficha__bodega-imagen img { display: block; width: 100%; height: auto; }
.macar-ficha__bodega-descripcion { font-size: var(--macar-t-pequeno); line-height: 2.2; text-align: justify; }
.macar-ficha__bodega-boton { margin: 10px 0 0; }
.macar-ficha__bodega-boton .macar-boton { display: inline-block; background: var(--macar-vino); text-transform: none; }
.macar-ficha__bodega-boton .macar-boton:hover { background: var(--macar-oscuro); }
/* Enlaces de la descripción: el #cc3366 de hoy (4,96:1 sobre blanco, ya pasa AA), pero subrayados: sin el subrayado solo los distingue el color
   (≈1,7:1 frente al texto negro, WCAG 1.4.1). */
.macar-ficha__descripcion a { color: #cc3366; text-decoration: underline; }
.macar-ficha__cata .macar-ficha__seccion { margin-top: 0; }
.macar-ficha__maridaje { display: flex; flex-wrap: wrap; gap: 20px; padding: 10px 0; }
/* Carrusel de platos: una imagen cada vez al ancho del carrusel (212 px en escritorio, 310 en móvil: lo medido en la web de hoy, donde la
   imagen de 200×200 se amplía al ancho de su columna), con bucle y puntos de 6 px (#fbffbc). Sin JS, tira desplazable. */
.macar-platos { position: relative; flex: 0 0 212px; min-width: 0; max-width: 100%; }
.macar-platos__pista { overflow-x: auto; scroll-snap-type: x mandatory; }
.macar-platos__pista ul { display: flex; margin: 0; padding: 0; list-style: none; transition: transform 0.4s ease; }
.macar-platos__pista li { flex: 0 0 100%; scroll-snap-align: start; }
.macar-platos img { display: block; width: 100%; height: auto; }
.macar-platos__puntos { display: none; }
.macar-platos.is-activo .macar-platos__pista { overflow: hidden; }
.macar-platos.is-activo .macar-platos__puntos { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; }
.macar-platos__punto { position: relative; width: 18px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; }
.macar-platos__punto::before { content: ""; position: absolute; top: 6px; left: 6px; width: 6px; height: 6px; border-radius: 50%; background: #fbffbc; opacity: 0.55; }
.macar-platos__punto[aria-current="true"]::before { opacity: 1; }
.macar-platos__punto:focus-visible { outline-color: var(--macar-blanco); box-shadow: 0 0 0 2px var(--macar-oscuro); }
@media (prefers-reduced-motion: reduce) { .macar-platos__pista ul { transition: none; } }
@media (max-width: 767px) { .macar-platos { flex-basis: 100%; } }
.macar-ficha__texto-maridaje { flex: 1 1 18rem; font-size: 0.8125rem; line-height: 1.7; }
.macar-ficha__critica { text-align: justify; line-height: 2; }
.macar-ficha .macar-socio-claro { margin: 80px 0 0; }
.macar-ficha__recuadros { padding: 90px 0; }
.macar-ficha__recuadros .macar-blog-recuadro { gap: 1rem; }
.macar-ficha__ig { width: 3.25rem; height: 3.25rem; flex: 0 0 auto; }
@media (max-width: 1024px) { .macar-ficha__fila { grid-template-columns: minmax(0, 1fr); } .macar-ficha__datos--cata .macar-ficha__dato { flex-basis: calc((100% - 10px) / 2); } }
@media (max-width: 767px) {
	.macar-ficha__producto { flex-direction: column; }
	.macar-ficha__imagen { flex: 0 0 auto; }
	.macar-ficha__datos--cata .macar-ficha__dato { flex-basis: 100%; }
	.macar-ficha__recuadros { padding: 60px 10px; }
}
/* Ficha mínima (red de seguridad del despachador) */
.macar-ficha--minima { padding-block: var(--macar-e3); }
.macar-ficha--minima .macar-ficha__caja { margin-bottom: 20px; }
/* Ficha de destilado (partes/ficha-destilado.php). Todo medido en la plantilla 42 de hoy con hello-elementor (Plan 3 · Tarea 4):
   1440 px: caja izquierda 778 y destilería 342 de ancho, la destilería no se estira (a 900 px: 600 y 260; apiladas en móvil);
   tipo 18/600 mayúsculas #454545, destilería de la cabecera 26/700 como el título. */
.macar-ficha__fila--destilado { grid-template-columns: minmax(0, 778fr) minmax(0, 342fr); align-items: start; }
.macar-ficha__tipo { color: #454545; font-size: var(--macar-t-principal); font-weight: 600; line-height: 1.2; text-transform: uppercase; }
.macar-ficha__destileria { color: var(--macar-oscuro); font-size: var(--macar-t-titulo); font-weight: 700; line-height: 1.2; text-transform: uppercase; }
/* Caja izquierda: 100 px entre bloques (medido: del final de uno al encabezado del siguiente), 53 px del encabezado al contenido y 70 de
   relleno inferior. El encabezado mide 23,6 (línea, relleno y raya): el margen que falta hasta 53 es 29. */
.macar-ficha__principal { gap: 100px; padding-bottom: 70px; }
.macar-ficha__bloque { display: flex; flex-direction: column; }
.macar-ficha--destilado .macar-ficha__bloque > .macar-ficha__seccion { margin-bottom: 29px; }
/* El tipo de la ficha técnica va enlazado, pero hoy se ve como texto (medido en la captura de referencia): sin color de enlace ni subrayado. */
.macar-ficha__dato a { color: inherit; text-decoration: none; }
.macar-ficha__dato a:hover { color: var(--macar-licor); }
/* Cata de la plantilla 42: dos columnas separadas 40 px (también en móvil: 135 px de columna a 390), filas a 40 px, sin relleno en los
   datos, y un dato que queda solo en su fila ocupa todo el ancho. */
.macar-ficha__cata-acf { display: contents; }
.macar-ficha--destilado .macar-ficha__datos--cata { gap: 40px; }
.macar-ficha--destilado .macar-ficha__datos--cata .macar-ficha__dato { flex: 1 1 calc((100% - 40px) / 2); padding: 0; }
/* «La destilería» (medido a 1440 px, caja de 342 con 30 de relleno): título 16/500; nombre 18/600 mayúsculas con raya, a 21 px; país
   12/400 #4e4e4e, a 29; imagen centrada, a 31; año y descripción 14/28 en negro (la descripción justificada) con 20 de relleno superior;
   botón 16/500 con relleno 12 24, a 30 de la descripción. */
.macar-ficha__bodega--destileria { gap: 0; }
.macar-ficha__bodega--destileria .macar-ficha__seccion { margin: 0; padding: 0; border-bottom: 0; color: #000; font-size: var(--macar-t-secundario); font-weight: 500; line-height: 1.2; }
.macar-ficha__bodega--destileria .macar-ficha__bodega-nombre { margin: 21px 0 0; padding: 0; border-bottom: 1px solid var(--macar-gris); font-size: var(--macar-t-principal); font-weight: 600; line-height: 1.2; }
.macar-ficha__bodega--destileria .macar-ficha__bodega-linea { margin: 29px 0 0; color: #4e4e4e; font-size: var(--macar-t-pequeno); line-height: 1.2; }
.macar-ficha__bodega--destileria .macar-ficha__bodega-imagen { margin-top: 31px; text-align: center; }
.macar-ficha__bodega--destileria .macar-ficha__bodega-imagen img { display: inline-block; max-width: 100%; }
.macar-ficha__bodega--destileria [data-ficha="destileria.fundacion"] { margin: 31px 0 0; padding-top: 20px; color: #000; font-size: var(--macar-t-texto); line-height: 2; }
.macar-ficha__bodega--destileria .macar-ficha__bodega-imagen + [data-ficha="destileria.fundacion"] { margin-top: 0; }
.macar-ficha__bodega--destileria .macar-ficha__bodega-descripcion { padding-top: 20px; color: #000; font-size: var(--macar-t-texto); line-height: 2; }
.macar-ficha__bodega--destileria [data-ficha="destileria.fundacion"] + .macar-ficha__bodega-descripcion { margin-top: 0; }
.macar-ficha__bodega--destileria .macar-ficha__bodega-boton { margin-top: 30px; }
.macar-ficha__bodega--destileria .macar-boton { padding: 12px 24px; font-size: var(--macar-t-secundario); font-weight: 500; line-height: 1.2; white-space: nowrap; } /* a 900 px la caja deja 200 y el botón mide 215: hoy también sobresale de la columna, sin partirse */
@media (max-width: 767px) { .macar-ficha__fila--destilado { grid-template-columns: minmax(0, 1fr); } }

/* --- Ficha de producto gourmet (Plan 3 · Tarea 5, partes/ficha-gourmet.php) ----------------------------------------------------------
   Medidas de la plantilla 14952 de hoy (Aceite Elizondo Nº 3, La Brújula, La Catedral) a 390, 900 y 1440 px, con anchos y huecos absolutos
   (los comprueba pruebas/ficha-paridad.py). La caja de la imagen y el resumen son las de vino. Tres cajas a todo el ancho, 20 px entre
   ellas: INFORMACIÓN DETALLADA (30 de relleno), PRODUCTOR (cabecera con 30, fila con imagen al 28 % y texto al 72 %, botón) y DESCRIPCIÓN.
   Lo que la plantilla de hoy imprime con las tres filas de la cabecera vacías (20 px de hueco cada una) se conserva: las filas salen siempre. */
.macar-ficha--gourmet .macar-ficha__seccion { margin: 0 0 10px; padding-bottom: 0; border-bottom: 1px solid var(--macar-gris); }
.macar-ficha__marca { color: #4e4e4e; font-size: var(--macar-t-principal); font-weight: 600; line-height: 1.2; }
.macar-ficha__fila-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.macar-ficha__origen-g { color: #4e4e4e; font-size: var(--macar-t-texto); font-weight: 400; line-height: 1.2; text-transform: capitalize; }
.macar-ficha__dato-cab { color: #4e4e4e; font-size: var(--macar-t-pequeno); font-weight: 500; line-height: 1.2; }
.macar-ficha__cabecera .macar-ficha__dato-cab--vuelto { margin-left: -16px; } /* la plantilla de hoy los pone 16 px a la izquierda de la columna (medido, también a 390) */
.macar-ficha__peso { color: #4e4e4e; font-size: var(--macar-t-texto); font-weight: 500; line-height: 1.2; }
/* Información detallada: cuatro columnas iguales sin hueco (la cuarta es la de «D.O.P.», casi siempre vacía) y una sola en móvil. */
.macar-ficha--gourmet .macar-ficha__info .macar-ficha__seccion { margin-bottom: 5px; }
.macar-ficha__datos--gourmet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.macar-ficha__datos--gourmet .macar-ficha__dato { padding: 0; text-transform: capitalize; } /* los valores se guardan en minúscula («conserva-de-pescado») y se muestran capitalizados, como hoy */
.macar-ficha__datos--gourmet .macar-ficha__dato b { font-weight: 700; }
/* Productor. */
.macar-ficha__productor { gap: 0; padding: 0; }
.macar-ficha__productor-cab { display: flex; flex-direction: column; gap: 10px; padding: 30px; }
.macar-ficha__productor-nombre { margin: 0; color: #000; font-size: 1.25rem; font-weight: 700; line-height: 1.2; } /* 20 px medidos: el h3 base, sin token propio en la escala */
.macar-ficha__productor-fundacion { margin: 10px 0 0; color: #000; font-size: var(--macar-t-pequeno); font-weight: 500; line-height: 1.2; }
.macar-ficha__productor-fundacion b { font-weight: 700; }
.macar-ficha__productor-localizacion { margin: -4px 0 0; color: #4e4e4e; font-size: var(--macar-t-pequeno); font-weight: 400; line-height: 1.2; }
.macar-ficha__productor-fila { display: grid; grid-template-columns: minmax(0, 28fr) minmax(0, 72fr); gap: 20px; padding: 0 30px 10px; }
.macar-ficha__productor-imagen { text-align: center; }
.macar-ficha__productor-imagen img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.macar-ficha__productor-descripcion { color: #000; font-size: var(--macar-t-texto); line-height: 2; text-align: justify; }
.macar-ficha__productor-boton { margin: 10px 0 30px 30px; }
.macar-ficha__productor-boton .macar-boton { padding: 12px 24px; border-radius: 3px; background: var(--macar-otros); font-size: var(--macar-t-secundario); font-weight: 500; line-height: 1.2; }
.macar-ficha__productor-boton .macar-boton:hover { background: var(--macar-oscuro); }
/* Descripción: 20 px bajo el título (el hueco de la caja), 40 de margen y el margen del último párrafo (14,4) antes de los 30 de relleno. */
.macar-ficha--gourmet .macar-ficha__descripcion-caja .macar-ficha__seccion { margin-bottom: 0; }
.macar-ficha--gourmet .macar-ficha__descripcion { margin-bottom: 40px; }
.macar-ficha--gourmet .macar-ficha__descripcion > :last-child { margin-bottom: 14.4px; }
/* Imagen del producto: la galería de escritorio de la plantilla 14952 reserva a la izquierda 125 px para las miniaturas verticales (`thumbnails_vertical_width`),
   aunque no haya miniaturas: imagen de 303 px en una galería de 428 (1440) y de 199 en una de 324 (900), medido. Con UA de móvil, Jet pinta la galería «flip» a
   todo el ancho y sin zoom; por eso el raíl solo a partir de 768 px (los móviles reales, por debajo, la ven a todo el ancho). */
@media (min-width: 768px) { .macar-ficha--gourmet .macar-ficha__imagen .macar-zoom { margin-left: 125px; } }
@media (max-width: 767px) {
	.macar-ficha__datos--gourmet { grid-template-columns: minmax(0, 1fr); }
	.macar-ficha__productor-fila { grid-template-columns: minmax(0, 1fr); }
}

/* Lista de deseos (Plan 3 · Tarea 6). Medidas del tema antiguo en PAGINAS-PLAN3.md, «Tarea 6». */
.macar-deseos { margin: 0; }
.macar-deseos__boton { display: flex; align-items: center; margin: 0; padding: 10px 15px; border: 0; border-radius: 0; background: none; color: #c36; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; text-align: left; cursor: pointer; }
.macar-deseos__boton svg { flex: none; margin: 0 5px; font-size: 20px; }
.macar-deseos__boton:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* Dos corazones y dos textos en el marcado; el estado (data-en-lista) enseña uno. «Añadido»: corazón de 14 px y #e73458, como hoy. */
.macar-deseos__lleno, .macar-deseos__texto--anadido { display: none; }
.macar-deseos__boton[data-en-lista="1"] { color: var(--macar-licor); }
.macar-deseos__boton[data-en-lista="1"] .macar-deseos__vacio, .macar-deseos__boton[data-en-lista="1"] .macar-deseos__texto--anadir { display: none; }
.macar-deseos__boton[data-en-lista="1"] .macar-deseos__lleno, .macar-deseos__boton[data-en-lista="1"] .macar-deseos__texto--anadido { display: inline; }
.macar-deseos__boton[data-en-lista="1"] svg { font-size: 14px; }
/* En la ficha va 20 px a la izquierda de la columna de texto: el icono (15 de relleno + 5 de margen) queda alineado con ella. */
.macar-ficha__cabecera .macar-deseos--texto { margin-left: -20px; }
/* Solo icono (tarjetas, Tarea 7): enlace de 30×20, sin relleno. */
.macar-deseos--icono .macar-deseos__boton { padding: 0; }
.macar-deseos--icono .macar-deseos__boton[data-en-lista="1"] svg { font-size: 20px; }

.macar-deseos-pagina { width: 100%; max-width: calc(1140px + 20px); margin-inline: auto; padding: 40px 10px 0; }
.macar-deseos-pagina__titulo { margin: 0 0 30px; font-size: var(--macar-t-titulo); font-weight: 700; line-height: 1.2; text-align: center; text-transform: uppercase; }
.macar-deseos-pagina__cuerpo { padding-block: 10px; }
.macar-deseos-vacio { margin: 8px 0 16px; font-size: 20px; font-weight: 500; line-height: 1.2; }
.macar-deseos-rejilla { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 0; padding: 10px 0; list-style: none; }
@media (min-width: 768px) { .macar-deseos-rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .macar-deseos-rejilla { grid-template-columns: repeat(3, 1fr); } }
.macar-deseos-item { display: flex; flex-direction: column; min-width: 0; min-height: 474px; background: var(--macar-blanco); }
.macar-deseos__quitar { display: flex; justify-content: center; align-items: center; width: 100%; height: 24px; margin: 0; padding: 0; border: 0; background: none; color: var(--macar-licor); cursor: pointer; }
.macar-deseos__quitar svg { font-size: 12px; }
.macar-deseos__quitar:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.macar-deseos-item__imagen { display: flex; justify-content: center; align-items: center; height: 300px; }
.macar-deseos-item__imagen img { display: block; width: auto; max-width: 100%; height: auto; max-height: 300px; }
.macar-deseos-item__titulo { margin: 8px 0 16px; font-size: 28px; font-weight: 500; line-height: 1.2; text-align: center; text-transform: none; }
.macar-deseos-item__titulo a { color: #c36; font-size: 16px; font-weight: 600; text-decoration: none; }
.macar-deseos-item__precio { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.2; text-align: center; color: #000; }
.macar-deseos-item__carrito { margin-top: 10px; }
.macar-deseos-item__carrito .button { display: flex; justify-content: center; align-items: center; box-sizing: border-box; width: 100%; height: 32px; margin: 0; padding: 10px 0; border-radius: 0; background: var(--macar-vino); font-size: 12px; font-weight: 700; line-height: 1; }
.macar-deseos-item__carrito .button:hover { background: var(--macar-oscuro); }
.macar-deseos-item__estrellas { display: flex; align-items: center; gap: 2px; height: 24px; }
.macar-deseos-item__estrella { display: block; font-size: 16px; line-height: 0; color: #a1a2a4; }
.macar-deseos-item__estrella.is-activa { color: #fdbc32; }

/* --- Valoraciones, opiniones y recomendaciones de la ficha (Plan 3 · Tarea 8) ---------------------------------------------------------
   Medido con el plugin Customer Reviews y Elementor de hoy (herramientas/resenas-medir-antiguo.py; números en PAGINAS-PLAN3.md). Colores que cambian
   por contraste: estrellas (contorno #8a6500, 5,1:1; el relleno #FFD700 se conserva), botón verde #31856c → #2f8068 (blanco 4,47 → 4,76:1). */
.macar-estrellas { position: relative; display: block; flex: none; width: 100px; height: 20px; line-height: 0; }
.macar-estrellas__base, .macar-estrellas__llenas { display: flex; height: 20px; }
.macar-estrellas__llenas { position: absolute; top: 0; left: 0; overflow: hidden; }
.macar-estrellas svg { flex: none; width: 20px; height: 20px; stroke: #8a6500; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.macar-estrellas__base svg { fill: none; }
.macar-estrellas__llenas svg { fill: #b8860b; } /* 3,2:1 sobre blanco: la estrella llena se distingue de la vacía por el relleno (WCAG 1.4.11); el #FFD700 de hoy da 1,4:1 */

/* Fila de valoración junto al título: 20 de margen y 20 de hueco con la fila anterior (40) y 20 hasta el corazón (hoy 80 entre formato y corazón). */
.macar-ficha__valoracion { display: flex; align-items: center; column-gap: 13px; margin-top: 20px; font-size: 15px; font-weight: 500; line-height: 20px; color: #333; }
.macar-ficha__valoracion-enlace { color: #333; text-decoration: none; }
.macar-ficha__valoracion-enlace:hover { text-decoration: underline; }
.macar-ficha__valoracion-enlace:focus-visible, .macar-opiniones a:focus-visible, .macar-opiniones button:focus-visible, .macar-opiniones select:focus-visible, .macar-recom button:focus-visible, .macar-recom__vista:focus-visible { outline: 2px solid var(--macar-oscuro); outline-offset: 2px; }

/* OPINIÓN DE NUESTROS CLIENTES */
.macar-opiniones { margin: 80px 0; background: var(--macar-blanco); color: #000; }
.macar-opiniones__interior { box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; width: min(1140px, 100% - 40px); margin-inline: auto; padding-block: 80px; }
.macar-opiniones__titulo { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.2; text-align: center; text-transform: none; }
.macar-opiniones__cuerpo { margin-top: 20px; }
.macar-opiniones__aviso { margin: 0 0 20px; padding: 12px; background: #f9f9f9; border-left: 4px solid #2f8068; color: #0e252c; font-size: 14px; line-height: 21px; }
.macar-opiniones__resumen { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 2px; background: #f9f9f9; }
.macar-opiniones__lado { flex: 1 1 auto; }
.macar-opiniones__media, .macar-opiniones__anadir { display: flex; flex: 0 0 auto; flex-direction: column; justify-content: center; align-items: center; padding: 10px; border-radius: 4px; }
.macar-opiniones__media-n { font-size: 36px; font-weight: 700; line-height: 50px; color: #0e252c; }
.macar-opiniones__media-estrellas { height: 25px; padding-top: 5px; }
.macar-opiniones__media-total { font-size: 14px; line-height: 25px; color: #0e252c; }
.macar-opiniones__separador { display: flex; flex: 2 2 auto; justify-content: center; align-items: center; height: 40px; }
.macar-opiniones__separador div { width: 2px; height: 40px; background: #bcccd4; }
.macar-opiniones__reparto { flex: 1 0 35%; box-sizing: border-box; padding: 10px; border-radius: 4px; font-size: 14px; line-height: 21px; }
.macar-histograma { display: flex; flex-direction: column; gap: 6.4px; width: 320px; max-width: 100%; margin: 0 auto; padding: 0; list-style: none; font-size: 12.6px; line-height: 18.9px; color: #0e252c; }
.macar-histograma__fila { display: grid; grid-template-columns: 58px minmax(0, 1fr) 42px; align-items: center; column-gap: 4.8px; margin: 0; }
.macar-histograma__etiqueta { white-space: nowrap; }
.macar-histograma__medidor { display: block; height: 22px; overflow: hidden; background: linear-gradient(to bottom, #eee, #f6f6f6) #f3f3f3; border-radius: 1px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.macar-histograma__barra { display: block; height: 100%; background: #454545; border-radius: 1px; }
.macar-histograma__pct { text-align: right; white-space: nowrap; }
.macar-opiniones__boton, .macar-opiniones__enviar { box-sizing: border-box; display: block; padding: 10px 20px; border: 0; border-radius: 3px; background: #2f8068; color: #fff; font: inherit; font-size: 15px; line-height: 20px; text-align: center; text-decoration: none; cursor: pointer; }
.macar-opiniones__boton:hover, .macar-opiniones__enviar:hover { background: #276a56; }
.macar-opiniones__recuento { display: flex; justify-content: space-between; align-items: center; min-height: 45px; box-sizing: border-box; margin: 24px 0; padding: 10px 12px; background: #f9f9f9; font-size: 12px; line-height: 18px; color: #0e252c; }
.macar-opiniones__orden { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0; }
.macar-opiniones__orden select { height: 25px; padding: 4px; border: 0; border-radius: 3px; background: transparent; color: #0e252c; font: inherit; font-size: 12px; font-weight: 500; }
.macar-opiniones__ordenar { height: 25px; margin: 0; padding: 0 8px; border: 1px solid #d8e2e7; border-radius: 3px; background: #fff; color: #0e252c; font: inherit; font-size: 12px; cursor: pointer; }
.macar-opiniones__vacio { margin: 0 0 24px; font-size: 16px; line-height: 24px; text-align: center; }
.macar-opiniones__lista { margin: 0; padding: 0 0 24px; list-style: none; }
.macar-resena { position: relative; margin: 0 0 30px; }
.macar-resena__avatar { position: absolute; top: 0; left: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border: 1px solid #e4e1e3; border-radius: 25px; background: #ccd1d4; color: #4d5d64; font-size: 25px; line-height: 1; }
.macar-resena__texto { margin-left: 70px; padding-bottom: 16px; border-bottom: 1px solid #e4e1e3; }
.macar-resena__meta { display: flex; justify-content: space-between; align-items: baseline; color: #767676; }
.macar-resena__quien { display: flex; flex-direction: column; }
.macar-resena__autor { font-size: 16px; font-weight: 500; line-height: 24px; color: #0e252c; }
.macar-resena__rol { font-size: 14px; line-height: 21px; color: #4d5d64; }
.macar-resena__fecha { font-size: 16px; line-height: 24px; color: #767676; }
.macar-resena__puntos { display: flex; align-items: center; gap: 20px; padding-block: 7.5px; }
.macar-resena__producto { display: flex; align-items: center; color: #0e252c; font-size: 14px; line-height: 21px; text-decoration: none; }
.macar-resena__producto img { display: block; width: 20px; height: 20px; margin-right: 12px; border-radius: 3px; object-fit: cover; }
.macar-resena__producto:hover span { text-decoration: underline; }
.macar-resena__contenido { font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.macar-resena__contenido p { margin: 16px 0; text-align: left; }

/* Formulario: sin JavaScript va debajo de la lista; con él sustituye al contenido (como el plugin de hoy). */
.macar-opiniones__alta { margin-top: 20px; }
.js .macar-opiniones__alta { display: none; }
.js .macar-opiniones.is-alta .macar-opiniones__contenido { display: none; }
.js .macar-opiniones.is-alta .macar-opiniones__alta { display: block; margin-top: 0; }
.macar-opiniones__alta-nav { display: flex; justify-content: space-between; align-items: center; min-height: 50px; box-sizing: border-box; border-block: 1px solid #e5e9eb; }
.macar-opiniones__alta-titulo { margin: 0 0 0 33px; font-size: 16px; font-weight: 400; line-height: 24px; color: #0e252c; text-transform: none; }
.macar-opiniones__alta-cerrar { display: none; width: 28px; height: 28px; padding: 6px; border: 0; background: none; color: #0e252c; cursor: pointer; }
.js .macar-opiniones__alta-cerrar { display: block; }
.macar-opiniones__alta-producto, .macar-opiniones__form { width: min(500px, 100%); margin-inline: auto; }
.macar-opiniones__alta-producto { box-sizing: border-box; display: flex; align-items: center; padding-block: 30px; border-bottom: 1px solid #e5e9eb; font-size: 22px; font-weight: 500; line-height: 33px; color: #0e252c; }
.macar-opiniones__alta-producto img { display: block; width: 60px; height: 60px; margin-right: 20px; }
.macar-opiniones__puntuar { margin: 16px auto 24px; padding: 0; border: 0; min-width: 0; }
.macar-opiniones__puntuar legend { padding: 0; font-size: 14px; line-height: 24px; color: #0e252c; }
.macar-opiniones__req { margin-left: 3px; color: #ce2b37; }
.macar-opiniones__estrellas-input { display: flex; align-items: center; padding-block: 5px; }
.macar-opiniones__estrellas-input input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.macar-opiniones__estrellas-input label { height: 30px; padding: 0 5px; line-height: 0; cursor: pointer; }
.macar-opiniones__estrellas-input label:first-of-type { padding-left: 0; }
.macar-opiniones__estrellas-input svg { width: 33px; height: 30px; fill: #fff; stroke: #8a6500; stroke-width: 1; stroke-linejoin: round; } /* hoy 33×30 sólidas #DFE4E7 a paso de 43: se conservan tamaño y paso; el interior pasa a blanco con contorno para que marcada y sin marcar difieran 3,25:1 (con el gris, 2,5:1) (decisión 10) */
.macar-opiniones__estrellas-input input:checked + label svg { fill: #b8860b; }
.macar-opiniones__estrellas-input input:focus-visible + label { outline: 2px solid var(--macar-oscuro); outline-offset: 1px; }
.macar-opiniones__estrellas-input[data-puntos="1"] label:nth-of-type(-n+1) svg, .macar-opiniones__estrellas-input[data-puntos="2"] label:nth-of-type(-n+2) svg, .macar-opiniones__estrellas-input[data-puntos="3"] label:nth-of-type(-n+3) svg, .macar-opiniones__estrellas-input[data-puntos="4"] label:nth-of-type(-n+4) svg, .macar-opiniones__estrellas-input[data-puntos="5"] label:nth-of-type(-n+5) svg { fill: #b8860b; }
.macar-opiniones__puntos-n { margin-left: 10px; font-size: 18px; line-height: 30px; }
.macar-opiniones__campo { position: relative; padding-bottom: 20px; }
.macar-opiniones__campo label { position: absolute; top: -7px; left: 11px; z-index: 1; padding: 0 5px; background: #fff; font-size: 12px; line-height: 12px; color: #4d5d64; }
.macar-opiniones__campo input, .macar-opiniones__campo textarea { box-sizing: border-box; display: inline-block; width: 100%; padding: 12px 16px; border: 1px solid #d8e2e7; border-radius: 3px; background: #fff; color: #0e252c; font: inherit; font-size: 14px; line-height: 21px; }
.macar-opiniones__campo textarea { display: block; height: 131px; resize: vertical; }
.macar-opiniones__campo--texto { padding-bottom: 26px; } /* hoy 157 de alto con el cuadro de 131 */
.macar-opiniones__ne { display: flex; gap: 10px; }
.macar-opiniones__ne .macar-opiniones__campo { flex: 1 1 0; min-width: 0; }
.macar-opiniones__error { margin: 4px 0 0; color: #ce2b37; font-size: 12px; line-height: 18px; }
.macar-opiniones__campo .macar-opiniones__error { position: absolute; bottom: 0; left: 0; margin: 0; }
.macar-opiniones__privacidad { margin: 0 0 12px; font-size: 12px; line-height: 18px; color: #4d5d64; }
.macar-opiniones__botones { display: flex; gap: 10px; padding-bottom: 30px; }
.macar-opiniones__botones > * { flex: 1 1 calc(50% - 5px); min-width: 0; box-sizing: border-box; height: 40px; padding: 0 10px; }
.macar-opiniones__cancelar { display: none; box-sizing: border-box; padding: 10px; border: 1px solid #d8e2e7; border-radius: 3px; background: #fff; color: #0e252c; font: inherit; font-size: 15px; line-height: 20px; cursor: pointer; }
.js .macar-opiniones__cancelar { display: block; }

@media (max-width: 500px) {
	.macar-opiniones__media, .macar-opiniones__reparto, .macar-opiniones__anadir { width: 100%; flex: 0 0 100%; }
	.macar-opiniones__separador { width: 100%; }
	.macar-opiniones__separador div { width: 50px; height: 2px; }
	.macar-opiniones__lado { display: none; }
	.macar-opiniones__anadir { box-sizing: border-box; }
	.macar-resena__puntos { flex-direction: column; align-items: flex-start; gap: 16px; padding-block: 0; }
}

/* NUESTRAS RECOMENDACIONES: tres tarjetas por vista, dos hasta 1024 px y una hasta 767 (los cortes de Elementor), flechas fuera. La tira recorta
   su desbordamiento (hoy el carrusel se sale de la pantalla a 390 y 900 px: decisión 6 de la Tarea 5). */
.macar-recom { margin: 80px 0; padding-inline: 10px; }
.macar-recom__interior { box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; width: min(1140px, 100%); margin-inline: auto; padding-block: 10px; text-align: center; }
.macar-recom__titulo { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.2; text-transform: none; }
.macar-recom__subtitulo { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.2; }
.macar-recom__carrusel { position: relative; min-width: 0; margin-top: 40px; text-align: left; }
.macar-recom__vista { position: relative; min-width: 0; margin-inline: 30px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.macar-recom__vista::-webkit-scrollbar { display: none; }
.macar-recom__pista { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; }
.macar-recom__pista > .macar-tarjeta { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; }
.macar-recom__flecha { position: absolute; top: calc(50% - 30.5px); z-index: 2; display: none; box-sizing: border-box; width: 31px; height: 31px; padding: 8px; border: 0; border-radius: 500px; background: var(--macar-gourmet); color: #fff; font-size: 15px; cursor: pointer; }
.js .macar-recom__flecha { display: flex; align-items: center; justify-content: center; }
.js .macar-recom__flecha[hidden] { display: none; }
.macar-recom__flecha--ant { left: 0; }
.macar-recom__flecha--sig { right: 0; }
.macar-recom__flecha .macar-icono { width: 15px; height: 15px; }
@media (max-width: 1024px) { .macar-recom__pista > .macar-tarjeta { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 767px) { .macar-recom__pista > .macar-tarjeta { flex-basis: 100%; } }
@media (prefers-reduced-motion: no-preference) { .macar-recom__vista { scroll-behavior: smooth; } }

/* Archivos de producto (Plan 3 · Tarea 9). Medido en las plantillas 70, 294 y 302 de hoy con hello-elementor (`herramientas/archivos-medir-antiguo.py`,
   firma en `firmas/plan3/archivos-antiguo.json`): franja de título con 50 px por encima y 40 por debajo, título de 32/700 y subtítulo de 16 centrados; debajo, un
   contenedor de 1300 px con la columna de filtros (260 px con 10 de margen, solo desde 1025 px) y la de la rejilla (1020 px, 10 de relleno, 20 de hueco). La rejilla
   son 3 columnas de 320 px con 20 de hueco (2 hasta 1024 px, 1 hasta 767) y la paginación va centrada 20 px debajo. */
.macar-tienda__cabecera { margin: 50px 0 40px; padding: 0 10px; }
.macar-tienda__cabecera-in { display: flex; flex-direction: column; gap: 20px; max-width: 1140px; margin: 0 auto; padding: 10px 0; }
.macar-tienda__titulo { margin: 0; font-size: 32px; font-weight: 700; line-height: 32px; text-align: center; }
.macar-tienda__subtitulo { margin: 0; font-size: 16px; line-height: 16px; text-align: center; }
.macar-tienda__contenido { display: flex; max-width: 1320px; margin: 0 auto; padding: 10px 10px; }
/* La columna de la rejilla se queda a la derecha aunque no haya filtros: su sitio está reservado (la Tarea 11 imprime ahí los filtros). */
.macar-tienda__lista { display: flex; flex: 0 1 1020px; flex-direction: column; gap: 20px; min-width: 0; padding: 10px; }
.macar-tienda__filtros, .macar-tienda__hueco { display: none; }
/* La columna de filtros solo se ve desde 1025 px, como hoy (la de Elementor lleva `hidden-tablet` y `hidden-mobile`). Ocupa los mismos 280 px que reservaba el
   hueco (260 de panel y 10 de margen a cada lado). */
@media (min-width: 1025px) {
	.macar-tienda__filtros { display: block; flex: 0 0 280px; padding: 10px; }
	.macar-tienda__hueco { display: block; flex: 0 0 280px; }
}
/* Gourmet (plantilla 302): la columna de la rejilla mide el 70 % del contenedor (910 px a 1440, 616 a 900; en móvil, entera) y su paginación es de 14 px,
   interlineado 1,2 y color licor (alto 36,8 px). */
.macar-tienda[data-familia="gourmet"] .macar-tienda__lista { flex: 0 1 70%; }
@media (max-width: 767px) { .macar-tienda[data-familia="gourmet"] .macar-tienda__lista { flex-basis: 100%; } }
.macar-tienda[data-familia="gourmet"] .macar-tienda__pag { color: var(--macar-licor); font-size: 14px; line-height: 16.8px; }
.macar-tienda .macar-tienda__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; }
@media (max-width: 1024px) { .macar-tienda .macar-tienda__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .macar-tienda .macar-tienda__rejilla { grid-template-columns: minmax(0, 1fr); } }
.macar-tienda__vacio { margin: 0; }
/* Paginación: «Anterior 1 2 3 … Siguiente», centrada, texto negro de 16 px sobre botones de 10 px de relleno (44 px de alto en total). Lo que hoy no distingue la
   página actual lo distingue aquí la negrita (y `aria-current`). */
.macar-tienda__paginas ul { display: flex; flex-wrap: wrap; justify-content: center; margin: -3px; padding: 0; list-style: none; }
.macar-tienda__paginas li { margin: 3px; }
.macar-tienda__pag { display: block; padding: 10px; color: var(--macar-oscuro); font-size: 16px; line-height: 24px; text-decoration: none; }
.macar-tienda__pag--actual { font-weight: 700; }
a.macar-tienda__pag:hover { color: var(--macar-vino); }
/* Con una sola página hoy queda igualmente el hueco de 20 px de la paginación vacía bajo la rejilla. */
.macar-tienda__rejilla:last-child { margin-bottom: 20px; }
/* En móvil (una columna) todas las tarjetas de la página miden lo mismo que la más alta (medido: 678,9 de alto en cada licor aunque unas lleven una línea
   menos de texto, 728,3 en los vinos de una página con Parker). En la portada no pasa: allí cada tarjeta mide lo suyo. */
@media (max-width: 767px) { .macar-tienda .macar-tienda__rejilla { grid-auto-rows: 1fr; } }
/* Los 80 px entre la paginación (con los 20 de relleno de los contenedores) y el pie: hoy van dentro del pie (su primer contenedor empieza 100 px bajo la
   paginación, medido a 1440, 900 y 390). */
.macar-tienda { padding-bottom: 80px; }
/* /tienda/ (page-tienda.php) no es un archivo: no lleva los 80 px de arriba. Bajo su última sección el pie de hoy deja 100–101 px de blanco (1440 y 900) y 103–104 (390), medidos por píxeles
   (herramientas/tienda-huecos.py); con 40 px de relleno salen 101, 101 y 102–103. Con los 80 del archivo salían 141 (+40 px de más, hallazgo M1 de la revisión final). */
.macar-pagina-tienda { padding-bottom: 40px; }
/* Archivos sin diseño de familia (etiqueta, marca, /shop/): sin columna de filtros, la rejilla ocupa todo el ancho, en 4 columnas desde 1025 px (hoy 4 de 251 px
   en un contenedor de 1140; a 900 y 390 hoy 4 y 2 columnas de 132 y 177 px, que aquí son 2 y 1). */
.macar-tienda--completo .macar-tienda__lista { flex: 1 1 100%; margin-left: 0; }
@media (min-width: 1025px) { .macar-tienda--completo .macar-tienda__rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------
   Columna de filtros (Plan 3 · Tarea 11). Copia de la de hoy (JetSmartFilters dentro de un contenedor de Elementor), medida con hello-elementor
   (herramientas/filtros-ui-medir-antiguo.py): panel blanco de 260 px con 30 de relleno, título en negrita de 16 px con filete de 1 px, listas de casillas de 14 px
   con scroll interno de 290 px y deslizador de precio de dos pulgares de 16 px. Lo que cambia respecto a hoy está numerado en PAGINAS-PLAN3.md (Tarea 11):
   casillas alcanzables con el teclado y con foco visible, «Quitar», botón para quien no usa JavaScript y «Más/Menos» solo con JavaScript.
   --------------------------------------------------------------------------------------------------------------------------------------------------------- */
[hidden] { display: none !important; }
.macar-filtros { --fila: 6px; display: block; width: 100%; padding: 30px; background: var(--macar-blanco); font-size: 16px; font-weight: 400; line-height: 24px; }
.macar-filtros[data-familia="gourmet"] { --fila: 4px; }
.macar-filtros__grupo { position: relative; min-width: 0; margin: 0 0 20px; }
.macar-filtros__conjunto { min-width: 0; margin: 0; padding: 0; border: 0; }
/* De la columna de hoy: entre el título y su contenido hay 40 px (20 de margen del título y 20 de separación entre widgets de Elementor); de una lista al título
   siguiente, 60 (los 40 de margen del widget de la lista más esos 20). Aquí son dos márgenes. */
.macar-filtros__titulo { display: block; width: 100%; margin: 0 0 40px; padding: 0; border-bottom: 1px solid var(--macar-gris); font-size: 16px; font-weight: 700; line-height: 16px; }
.macar-filtros__titulo-texto { display: block; }
.macar-filtros__quitar { position: absolute; top: 0; right: 0; font-size: 12px; line-height: 16px; color: var(--macar-vino); text-decoration: underline; }
.macar-filtros__quitar:hover { color: var(--macar-oscuro); }
/* Listas de casillas. Las de vino llevan el título en 600 con interlineado 1,2 (los de licor y gourmet, en 700); el tamaño del texto de las opciones es de 14 px, de 15
   en licor y en «Formato / Volumen» de vino; y las filas de gourmet van más juntas. Todo medido en los widgets de hoy, uno a uno. */
.macar-filtros__grupo--lista { margin-bottom: 60px; }
/* El widget de Origen de gourmet (276) deja 20 px más que los demás (medido), y el último grupo de la columna no lleva el espacio de después (30 de relleno del panel). */
.macar-filtros__grupo[data-filtro-id="276"] { margin-bottom: 80px; }
.macar-filtros__grupo:last-of-type { margin-bottom: 40px; }
.macar-filtros[data-familia="vino"] .macar-filtros__grupo--lista .macar-filtros__titulo { font-weight: 600; line-height: 19.2px; }
.macar-filtros__scroll { overflow-x: hidden; overflow-y: auto; max-height: 290px; }
.macar-filtros__opciones { margin: calc(var(--fila) * -1) -2.5px; }
.macar-filtros__fila { display: block; margin: 0 2.5px var(--fila); padding-top: var(--fila); }
.macar-filtros__opcion { position: relative; display: flex; align-items: center; margin: 0; font-weight: 400; cursor: pointer; line-height: 16px; }
/* La casilla de verdad existe y recibe el foco (hoy es `display:none`: ninguna opción se alcanza con el teclado); se oculta a la vista, no al lector. */
.macar-filtros__entrada { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.macar-filtros__boton { display: flex; width: 100%; border: 0 solid #ccc; }
.macar-filtros__marca { position: relative; flex: 0 0 16px; width: 16px; height: 16px; min-width: 16px; min-height: 16px; margin: 3px 5px 0 0; border: 1px solid #949494; border-radius: 3px; } /* #ccc de hoy (1,6:1) → #949494, el mínimo de 3:1 de WCAG 1.4.11: decisión 7 de la Tarea 11 */
.macar-filtros__tic { position: absolute; top: 50%; left: 50%; width: 1em; height: 1em; transform: translate(-50%, -50%); opacity: 0; font-size: 12px; font-style: normal; line-height: 0; color: #fff; }
.macar-filtros__tic svg { display: block; width: 1em; height: 1em; }
.macar-filtros__tic svg path { fill: currentColor; }
.macar-filtros__entrada:checked + .macar-filtros__boton .macar-filtros__marca { background: #949494; } /* ídem: la casilla es la única señal del estado */
.macar-filtros__entrada:checked + .macar-filtros__boton .macar-filtros__tic { opacity: 1; }
.macar-filtros__nombre { align-self: center; font-size: 14px; line-height: 14px; }
.macar-filtros[data-familia="licor"] .macar-filtros__nombre, .macar-filtros__grupo[data-filtro-id="160"] .macar-filtros__nombre { font-size: 15px; line-height: 15px; }
.macar-filtros__entrada:focus-visible + .macar-filtros__boton { outline: 2px solid #0b57d0; outline-offset: -2px; } /* hacia dentro: el contenedor con scroll recortaría un contorno exterior */
.macar-filtros__masmenos { padding-top: 10px; }
.macar-filtros__masmenos-boton { display: inline-block; margin: 0; padding: 0; border: 0; background: none; color: var(--macar-oscuro); font: inherit; line-height: 24px; cursor: pointer; }
.macar-filtros__masmenos-boton:focus-visible { outline: 2px solid #0b57d0; outline-offset: 2px; }
/* Precio */
.macar-filtros__grupo--precio { margin-bottom: 20px; }
.macar-filtros__precio { position: relative; margin: 0 0 20px; }
.macar-filtros__pista { position: relative; height: 4px; color: #d0d0d0; background: #f9f9f9; }
.macar-filtros__pista-rango { position: absolute; inset: 0; background: linear-gradient(90deg, transparent var(--low, 0%), currentColor 0, currentColor var(--high, 100%), transparent 0) no-repeat 0 100% / 100% 100%; }
.macar-filtros__rango { position: absolute; top: 50%; left: 0; width: 100%; height: 16px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; outline: none; transform: translateY(-50%); appearance: none; -webkit-appearance: none; pointer-events: none; }
.macar-filtros__rango--min { z-index: 21; }
.macar-filtros__rango--max { z-index: 20; }
.macar-filtros__rango::-webkit-slider-runnable-track { height: initial; border: none; background: none; box-shadow: none; -webkit-appearance: none; }
.macar-filtros__rango::-webkit-slider-thumb { width: 16px; height: 16px; margin: 0; padding: 0; border: 0; border-radius: 50%; background-color: #858585; cursor: pointer; pointer-events: auto; -webkit-appearance: none; appearance: none; }
.macar-filtros__rango::-moz-range-track { height: initial; border: none; background: none; box-shadow: none; }
.macar-filtros__rango::-moz-range-thumb { width: 16px; height: 16px; margin: 0; padding: 0; border: 0; border-radius: 50%; background-color: #858585; cursor: pointer; pointer-events: auto; }
.macar-filtros__rango:focus-visible::-webkit-slider-thumb { outline: 2px solid #0b57d0; outline-offset: 2px; }
.macar-filtros__rango:focus-visible::-moz-range-thumb { outline: 2px solid #0b57d0; outline-offset: 2px; }
.macar-filtros__valores { margin: 0; text-align: center; font-size: 16px; line-height: 24px; }
/* Botón de envío: visible sin JavaScript; con él, solo al recibir el foco (el ratón envía al marcar). */
.macar-filtros__aplicar { display: block; width: 100%; margin: 0 0 20px; padding: 10px; border: 1px solid var(--macar-oscuro); border-radius: 0; background: var(--macar-blanco); color: var(--macar-oscuro); font: inherit; font-size: 14px; cursor: pointer; }
.macar-filtros__aplicar:hover { background: var(--macar-oscuro); color: var(--macar-blanco); }
.macar-filtros--js .macar-filtros__aplicar:not(:focus) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap; }

/* /tienda/ (page-tienda.php): copia de la portada con otros rótulos. Medido con el tema antiguo (Plan 3 · Tarea 12): sus subtítulos de
   sección son 18/600 (los de la portada, 15/400) y la descripción del carrusel principal lleva interlineado 1,2 (la de la portada, 1,4). */
.macar-pagina-tienda .macar-portada-subtitulo { font-size: var(--macar-t-principal); font-weight: 600; }
.macar-pagina-tienda .macar-slider--hero .macar-slide__texto { line-height: 1.2; }

/* Imagen ausente: la web de hoy enseña un gris liso (medido en la referencia de producción a 1440 y 390 px: tarjeta CAFÉ rgb(162,162,162),
   primera diapositiva de Navidad rgb(150,150,150)) y el texto blanco sobre él no llega a AA (2,55:1 y 2,96:1: ni 3:1). Cambio mínimo: #767676, el gris
   más claro con el que el texto blanco de 16 px llega a 4,5:1 (4,54:1). Si algún día existe la imagen, esto deja de aplicarse solo. */
.macar-acceso--sin-imagen { background: #767676; }
.macar-acceso--sin-imagen .macar-acceso__velo, .macar-slide--sin-imagen .macar-slide__velo { display: none; }
.macar-slide--sin-imagen { background: #767676; }

/* Carrusel de Navidad de /tienda/: la franja de hoy es un contenedor de 1320 px con 10 px de relleno, o sea 1300 px de carrusel a 1440 (x 70–1369) y
   el ancho menos 10 px a cada lado en pantallas menores (medido en la referencia, 1440 y 390 px). */
.macar-slider--tienda { width: calc(100% - 20px); max-width: 1300px; margin: 60px auto; }

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------
   Búsqueda de producto (Plan 3 · Tarea 13). Medido con hello-elementor y el snippet 5 activo (herramientas/busqueda-medir-antiguo.py).
   Dos páginas: la de `/?s=…&post_type=product` (archive-product.php: migas, h1, recuento y orden, rejilla de 4; no la enlaza nada) y la de `/?s=…` (search.php, la del buscador de la cabecera:
   la plantilla 870: encabezado centrado y rejilla de 3 con la tarjeta de búsqueda 15984).
   --------------------------------------------------------------------------------------------------------------------------------------------------------- */
.macar-busqueda-cab { width: calc(100% - 20px); max-width: 1140px; margin: 0 auto; }
.macar-busqueda-cab .woocommerce-breadcrumb { margin: 0 0 14.72px; color: #767676; font-size: 0.92rem; line-height: 1.5; }
.macar-busqueda-cab .woocommerce-breadcrumb a { color: inherit; text-decoration: none; }
.macar-busqueda-cab__titulo { margin: 8px 0 16px; font-size: 40px; font-weight: 500; line-height: 48px; text-transform: none; }
.macar-busqueda-cab__barra { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0 20px; }
.macar-busqueda-cab .woocommerce-result-count { float: none; margin: 0 0 16px; font-size: 16px; line-height: 24px; }
.macar-busqueda-cab .woocommerce-ordering { float: none; margin: 0 0 16px; }
.macar-busqueda-cab .woocommerce-ordering select { box-sizing: border-box; width: 243px; height: 40px; padding: 8px 16px; border: 1px solid #666; border-radius: 3px; background: #efefef; color: #000; font-size: 16px; }
@media (max-width: 767px) { .macar-busqueda-cab__barra { flex-direction: column; align-items: stretch; } .macar-busqueda-cab .woocommerce-ordering { align-self: flex-end; } }
/* El archivo sin familia mide 1320 con 20 de relleno; el de la búsqueda, como hoy, 1140 (la rejilla de 4 columnas de 251 px). */
.macar-tienda--busqueda .macar-tienda__contenido { max-width: 1160px; padding: 0 10px; }
.macar-tienda--busqueda .macar-tienda__lista { padding: 0; }
.macar-tienda--busqueda .woocommerce-info { margin: 30px 0; }

/* /?s=… a secas: el encabezado de la 870 (32 px, centrado) a 50 + 10 px del pie de la cabecera y 40 px sobre la rejilla (20 de su margen y 20 del hueco del bucle). */
/* 130 px bajo la rejilla: de la última tarjeta (visible) al pie hoy hay 140 px a 1440 (medido por píxeles sobre la captura de hoy; son 10 de margen de la tarjeta y 130 de aquí). */
.macar-busqueda { width: calc(100% - 20px); max-width: 1140px; margin: 0 auto; padding: 60px 0 130px; }
.macar-busqueda__titulo { margin: 0 0 40px; font-size: 32px; font-weight: 500; line-height: 32px; text-align: center; text-transform: none; }
.macar-busqueda .macar-busqueda__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin: 0; }
@media (max-width: 1024px) { .macar-busqueda .macar-busqueda__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .macar-busqueda .macar-busqueda__rejilla { grid-template-columns: minmax(0, 1fr); } }
/* La celda mide 360 y la tarjeta blanca 340: 10 px de margen alrededor (el relleno del contenedor de la plantilla). */
.macar-busqueda .macar-tarjeta { margin: 10px; }
.macar-busqueda__vacio { margin: 0; padding: 30px 0; text-align: center; }
/* La imagen de la tarjeta de búsqueda: vino, caja de 115 px con la botella a 250 (un recorte del centro); licor, la caja del 42 % con la imagen a 175 px; gourmet, la
   imagen entera dentro de su caja. */
.macar-tarjeta[data-busqueda][data-variante="vino"] .macar-tarjeta__imagen { width: 115px; }
.macar-tarjeta[data-busqueda][data-variante="licor"] .macar-tarjeta__imagen img { width: 175px; }
.macar-tarjeta[data-busqueda][data-variante="gourmet"] .macar-tarjeta__imagen img { top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; transform: none; }
@media (max-width: 767px) { .macar-tarjeta[data-busqueda][data-variante="vino"] .macar-tarjeta__imagen { width: auto; } }
/* El texto de la tarjeta de búsqueda no es el de las tarjetas de los archivos (medido): el origen es de 13 px en negrita y NINGÚN texto va en mayúscula inicial
   («Ribera del duero», «Botella de 75 cl»); el formato no lleva los 30 px de margen y el del vino es negro. El licor y el gourmet empiezan la imagen en el borde
   izquierdo de la tarjeta (el vino, a 10 px) y la caja mide el 42 % de los 340 px enteros. */
.macar-tarjeta[data-busqueda] .macar-tarjeta__origen { font-size: 13px; font-weight: 700; text-transform: none; }
.macar-tarjeta[data-busqueda] .macar-tarjeta__formato { margin-top: 0; text-transform: none; }
.macar-tarjeta[data-busqueda][data-variante="vino"] .macar-tarjeta__formato a { color: #000; }
.macar-tarjeta[data-busqueda][data-variante="licor"] .macar-tarjeta__alta, .macar-tarjeta[data-busqueda][data-variante="gourmet"] .macar-tarjeta__alta { padding: 0; }
.macar-tarjeta[data-busqueda][data-variante="licor"] .macar-tarjeta__formato { line-height: 1; }
.macar-tarjeta[data-busqueda][data-variante="licor"] .macar-tarjeta__texto { padding-right: 2px; }
/* En móvil el texto del licor empieza 5 px más abajo y deja 18 más al final (los contenedores vacíos del formato líquido y del peso que la plantilla lleva siempre). */
@media (max-width: 767px) { .macar-tarjeta[data-busqueda][data-variante="licor"] .macar-tarjeta__contenido { padding: 20px 15px 18px 20px; } }
/* Puntuación Parker de los vinos que la tienen: casilla gris con el número y, al lado, la palabra. */
.macar-tarjeta__parker { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.macar-tarjeta__parker-n { padding: 5px; border-radius: 3px; background: var(--macar-gris); color: #000; font-size: 14px; font-weight: 700; line-height: 14px; }
.macar-tarjeta__parker-txt { color: #4e4e4e; font-size: 14px; line-height: 14px; }

/* Formularios (Plan 4 · Tarea 4). El de contacto copia el WPForms de hoy (`wpforms-render-modern`, medido en el HTML de producción del 2026-10-31).
   Las variables de la hoja inline y las del widget de Elementor (#7a4977e) dan, tal cual: botón #AB0663 con texto blanco, 17 px, 41 px de alto, 15 px de
   relleno lateral y 10 px de margen superior; campos de 31 px de alto con letra de 14 px (línea de 17) y 9 px de relleno lateral; 10 px entre campos;
   etiquetas de 16 px (línea de 19); subetiquetas de 14 px (línea de 17) a 5 px del campo. Lo que el HTML no trae (colores de texto y de borde, 60 % de ancho
   de un campo «medium», 120 px del textarea, hueco entre las dos mitades del nombre y el punto de corte móvil) son los valores base de WPForms modern
   recordados, SIN medir: el plugin y su hoja `wpforms-full.css` no están en la copia (PAGINAS-PLAN4.md, Tarea 4). */
.macar-formulario { padding: 10px 0; text-align: left; }
.macar-formulario__campo { margin: 0 0 10px; }
.macar-formulario fieldset { min-width: 0; margin: 0 0 10px; padding: 0; border: 0; }
.macar-formulario label, .macar-formulario legend { display: block; margin: 0 0 4px; padding: 0; color: rgba(0, 0, 0, 0.85); font-size: 1rem; font-weight: 700; line-height: 19px; }
.macar-formulario__obligatorio { color: #d63637; }
.macar-formulario__fila { display: flex; justify-content: space-between; width: 60%; max-width: 100%; }
.macar-formulario__mitad { width: calc(50% - 10px); }
.macar-formulario__mitad input { width: 100% !important; }
.macar-formulario .macar-formulario__mitad label { margin: 5px 0 0; color: rgba(0, 0, 0, 0.75); font-size: 0.875rem; font-weight: 400; line-height: 17px; }
.macar-formulario input[type="text"], .macar-formulario input[type="email"], .macar-formulario textarea { display: block; box-sizing: border-box; width: 60%; max-width: 100%; padding: 0 9px; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 3px; background: var(--macar-blanco); color: rgba(0, 0, 0, 0.7); font-size: 0.875rem; line-height: 17px; }
.macar-formulario input[type="text"], .macar-formulario input[type="email"] { height: 31px; }
.macar-formulario textarea { height: 120px; padding-block: 6px; resize: vertical; }
.macar-formulario input:focus-visible, .macar-formulario textarea:focus-visible, .macar-formulario__boton:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }
.macar-formulario__privacidad { margin: 0 0 10px; color: #3a3a3a; font-size: 0.875rem; line-height: 1.4; }
.macar-formulario__privacidad a { color: var(--macar-licor-texto); text-decoration: underline; }
.macar-formulario__acciones { margin: 10px 0 0; }
.macar-formulario__boton { height: 41px; padding: 0 15px; border: 0; border-radius: 3px; background: #ab0663; color: var(--macar-blanco); font-size: 1.0625rem; line-height: 1; cursor: pointer; }
.macar-formulario__boton:hover { background: #8a0551; }
/* La región viva SIEMPRE está en el árbol de accesibilidad (sin display:none aunque esté vacía): varios lectores no anuncian lo que entra en un nodo
   que no existía. El margen va en el mensaje, no en la región, para que vacía no ocupe sitio. */
.macar-formulario__mensaje { margin: 20px 0 0; padding: 10px 14px; border: 1px solid; border-radius: 3px; font-size: 1rem; line-height: 1.4; }
.macar-formulario__mensaje--ok { border-color: #b8dfc4; background: #e3f4e8; color: #0a5e2c; }
.macar-formulario__mensaje--error { border-color: #e6b3b3; background: #fbe4e4; color: #a30c0c; }
/* La trampa del antispam: fuera de la vista, sin ocupar sitio. */
.macar-formulario__trampa { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px) {
	.macar-formulario input[type="text"], .macar-formulario input[type="email"], .macar-formulario textarea, .macar-formulario__fila { width: 100%; }
}

/* «Hazte socio» (Plan 4 · Tarea 5). Medido en la copia con el formulario de Elementor de hoy (herramientas/socio-medir-antiguo.py,
   firmas/plan4/socio-antiguo.json): a 1440 px, campos de 40 px en una fila de 25 % / 50 % / 25 % con 10 px entre ellos (616 px en
   empresa, historia, FAQs y portada, 550 px en actualidad); a 390 px, los tres uno bajo otro. Campos con borde #69727d, 3 px de
   radio, 15 px de letra y 8 px 16 px de relleno; botón #862757 con letra blanca de 18 px y peso 600. Las medidas de la fila replican
   las de Elementor: un contenedor con -5 px de margen y celdas con 5 px de relleno. Sin etiquetas visibles, como hoy: la <label>
   es solo para lectores de pantalla. */
/* 18 px de relleno arriba: el hueco de hoy entre el párrafo y la fila (34 px frente a los 16 del tema), medido en la caja del formulario. Relleno y no margen: el margen se fundiría con el del párrafo. */
.macar-formulario--socio { max-width: 616px; margin: 0 auto; padding: 18px 0 0; }
.macar-socio-gris .macar-formulario--socio { max-width: 550px; }
.macar-formulario__socio-campos { display: flex; flex-wrap: wrap; margin: 0 -5px; }
.macar-formulario__socio-campo { box-sizing: border-box; margin: 0 0 10px; padding: 0 5px; }
.macar-formulario__socio-campo--nombre, .macar-formulario__socio-campo--boton { width: 25%; }
.macar-formulario__socio-campo--correo { width: 50%; }
.macar-formulario--socio input[type="text"], .macar-formulario--socio input[type="email"] { box-sizing: border-box; width: 100%; height: 40px; padding: 8px 16px; border: 1px solid #69727d; border-radius: 3px; background: var(--macar-blanco); color: #1f2124; font: inherit; font-size: 0.9375rem; line-height: 21px; }
.macar-formulario--socio .macar-formulario__boton { width: 100%; height: 40px; padding: 0 24px; background: #862757; font: inherit; font-size: 1.125rem; font-weight: 600; line-height: 1.2; }
/* El foco, visible sobre cada fondo: oscuro sobre el blanco y el gris, blanco sobre el gris Gourmet de la portada (#454545). */
.macar-formulario--socio input:focus-visible, .macar-formulario--socio .macar-formulario__boton:focus-visible { outline: 2px solid var(--macar-blanco); outline-offset: 2px; }
.macar-socio-claro .macar-formulario--socio input:focus-visible, .macar-socio-claro .macar-formulario--socio .macar-formulario__boton:focus-visible,
.macar-socio-gris .macar-formulario--socio input:focus-visible, .macar-socio-gris .macar-formulario--socio .macar-formulario__boton:focus-visible { outline-color: #1a1a1a; }
/* El aviso «Este campo es obligatorio.» de formularios.js: sobre fondo propio, para que se lea en el blanco, el gris y el gris Gourmet. */
.macar-formulario__error { display: block; margin-top: 4px; padding: 3px 8px; border-radius: 3px; background: #fbe4e4; color: #a30c0c; font-size: 0.875rem; line-height: 1.4; text-align: left; }
.macar-formulario--socio .macar-formulario__mensaje { margin-top: 10px; text-align: left; }
/* El :hover del botón de hoy es el mismo color (medido: firmas/plan4/socio-antiguo.json, `hover`, #862757 con la letra blanca). Se dice aquí, y no se deja
   al orden de las reglas, porque `.macar-formulario__boton:hover` del contacto (#8a0551) tiene la misma especificidad que la regla del socio. */
.macar-formulario--socio .macar-formulario__boton:hover { background: #862757; }
/* De 768 a 1024 px (la «tableta» de Elementor, medido a 900 px) el bloque gris de actualidad y de los archivos del blog pasa a un formulario de 430 px con
   el botón de 120 px que sobresale 20 px del cuadro: nombre 25 %, correo 50 % y el botón 130 px, sin saltar de línea. El blanco y la portada no cambian.
   El corte de 1024 px es el de Elementor y no se midió entre 901 y 1024 [E]. */
@media (min-width: 768px) and (max-width: 1024px) {
	.macar-socio-gris .macar-formulario--socio { max-width: 430px; }
	.macar-socio-gris .macar-formulario__socio-campos { flex-wrap: nowrap; }
	.macar-socio-gris .macar-formulario__socio-campo { flex: none; }
	.macar-socio-gris .macar-formulario__socio-campo--boton { width: 130px; }
}
/* Hasta 767 px los tres campos uno bajo otro. El formulario de hoy llega a 10 px del borde (370 px a 390) y el contenedor del tema deja 16: -6 px. */
@media (max-width: 767px) {
	.macar-formulario--socio { margin-inline: -6px; }
	.macar-formulario__socio-campo--nombre, .macar-formulario__socio-campo--correo, .macar-formulario__socio-campo--boton { width: 100%; }
}

/* Aviso de cookies (Plan 4 · Tarea 7). El aspecto del de producción (simple-cookie-banner.php, render_banner()): ventana
   centrada de 600 px con velo, y a pantalla completa hasta 600 px. Cambios, todos para cumplir los requisitos del plan:
   - la descripción pasa de #777 a #595959 (4,2:1 sobre el gris #f8f9fa de hoy; este da 6,5:1);
   - «Rechazar todas» pasa de enlace subrayado a botón con el mismo relieve que «Aceptar todas» (AEPD: mismo peso);
   - los tres botones miden lo mismo (flex 1 1 0), no lo que mide su texto;
   - foco visible, que el de hoy no definía. */
.macar-cookies { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; font-family: var(--macar-fuente); }
.macar-cookies[hidden] { display: none; }
.macar-cookies__velo { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
.macar-cookies__caja { position: relative; width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; border-radius: 10px; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); animation: macar-cookies-entrada 0.3s ease-out; }
.macar-cookies__caja:focus { outline: none; }
@keyframes macar-cookies-entrada { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .macar-cookies__caja { animation: none; } }
.macar-cookies__contenido { padding: 30px; }
.macar-cookies__titulo { margin: 0 0 20px; color: #333; font-size: 24px; text-transform: none; }
.macar-cookies__contenido p { margin: 0 0 20px; color: #666; line-height: 1.6; }
.macar-cookies__grupos { margin: 25px 0; padding: 20px; border-radius: 8px; background: #f8f9fa; }
.macar-cookies__grupo { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #e0e0e0; }
.macar-cookies__grupo:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.macar-cookies__grupo label { display: flex; align-items: center; margin-bottom: 8px; cursor: pointer; color: #333; }
.macar-cookies__grupo input[type="checkbox"] { width: 18px; height: 18px; margin: 0 10px 0 0; cursor: pointer; }
.macar-cookies__grupo input[type="checkbox"]:disabled { cursor: not-allowed; }
.macar-cookies__contenido .macar-cookies__descripcion { margin: 0 0 0 28px; font-size: 14px; color: #595959; }
.macar-cookies__enlaces { margin: 20px 0; text-align: center; font-size: 14px; color: #666; }
.macar-cookies__enlaces a { color: #2271b1; text-decoration: none; }
.macar-cookies__enlaces a:hover { text-decoration: underline; }
.macar-cookies__contenido .macar-cookies__error { color: var(--macar-rebaja); font-weight: 600; }
.macar-cookies__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.macar-cookies__boton { flex: 1 1 0; min-width: 0; padding: 12px 24px; border: 0; border-radius: 5px; font: inherit; font-size: 16px; line-height: 1.3; cursor: pointer; transition: all 0.3s ease; }
.macar-cookies__boton--principal { background: #2271b1; color: #fff; }
.macar-cookies__boton--principal:hover { background: #135e96; }
.macar-cookies__boton--secundario { background: #f0f0f1; color: #333; }
.macar-cookies__boton--secundario:hover { background: #e0e0e0; }
.macar-cookies :focus-visible { outline: 3px solid #135e96; outline-offset: 2px; }
.macar-cookies__boton--principal:focus-visible { outline-color: #000; }
@media (max-width: 600px) {
	.macar-cookies__caja { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
	.macar-cookies__contenido { padding: 20px; }
	.macar-cookies__botones { flex-direction: column; }
	.macar-cookies__boton { flex: 0 0 auto; width: 100%; }
}
/* «Configurar cookies» del pie: un botón con aspecto de enlace; sale con JavaScript. */
.macar-pie__cookies { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.macar-pie__cookies[hidden] { display: none; }