/* =========================================================
   Distribuciones Macar · corporativa + fichas (nov 2026)
   Hoja del handoff de Design (docs/macar-2026-10/handoff-design/macar.css), con UN cambio: el bloque :root, mapeado a las variables
   del tema (y `--macar-velo` pasa a .mc, ver abajo) y la corrección de espaciado de Design
   (docs/macar-2026-10/handoff-design/CORRECCION-ESPACIADO.md). El resto es el original, sin tocar (vocabulario BEM del handoff). Se encola DESPUÉS de macar.css (inc/plantilla.php).
   Todo cuelga de .mc o de :where(.mc): no cambia nada fuera de él (pruebas/diseno-pixeles.py).
   ========================================================= */

:root {
  /* Variables del handoff mapeadas a las del tema (docs/macar-2026-10/handoff-design/MAPA-VARIABLES.md). Las que el tema ya declara con
     el MISMO nombre y valor (vino, licor, gourmet, otros, blanco, gris, fondo, pie, rebaja, ancho) no se repiten aquí: se usan las suyas.
     Las que el tema llama distinto apuntan a ellas, para que un cambio de valor en macar.css llegue también a las piezas nuevas. */
  --macar-negro: var(--macar-oscuro);
  --macar-enlace: var(--macar-enlace-texto);
  --macar-texto-xs: var(--macar-t-pequeno);
  --macar-texto-s: var(--macar-t-texto);
  --macar-texto-m: var(--macar-t-secundario);
  --macar-texto-l: var(--macar-t-principal);
  --macar-texto-xl: var(--macar-t-titulo);
  --macar-esp-1: var(--macar-e1);
  --macar-esp-2: var(--macar-e2);
  --macar-esp-3: var(--macar-e3);
  --macar-esp-4: var(--macar-e4);
  /* NUEVAS: el tema no las tiene (valores del handoff, sin cambios). */
  --macar-licor-oscuro: #b8193f;  /* texto o fondo con texto blanco: 6,5:1. --macar-licor con blanco da 4,2:1 y no pasa AA */
  --macar-otros-oscuro: #8a5a24;  /* idem para «otros»: --macar-otros con blanco da 3,3:1 */
  --macar-texto-suave: #595959;   /* texto secundario: 7:1 sobre blanco, 6,3:1 sobre --macar-fondo */
  --macar-texto-precio: 2.25rem;  /* solo el precio de la ficha */
  --macar-radio: 4px;
}
/* --macar-velo NO va en :root: el tema ya usa ese nombre con otro significado (una OPACIDAD, 0-1, que inc/paginas.php pone en línea en las
   páginas de aviso y macar.css lee con `opacity: var(--macar-velo, 0.5)`). Aquí es un color, y solo lo leen piezas que cuelgan de .mc. */
.mc { --macar-velo: rgba(0, 0, 0, 0.6); /* velo sobre foto con texto blanco */ }

/* ---------- Base ---------- */
.mc { font-family: "Encode Sans Semi Expanded", system-ui, sans-serif; color: var(--macar-negro); background: var(--macar-fondo); font-size: var(--macar-texto-m); line-height: 1.6; }
.mc *, .mc *::before, .mc *::after { box-sizing: border-box; }
.mc img { display: block; max-width: 100%; height: auto; }
/* :where() deja estos reset a especificidad 0, para que cualquier componente los pueda sobrescribir */
:where(.mc) :where(h1, h2, h3, h4, p, figure, dl, dd, blockquote) { margin: 0; }
:where(.mc) :where(p + p) { margin-top: var(--macar-esp-2); }
:where(.mc) a { color: var(--macar-enlace); }
:where(.mc) a:hover { color: var(--macar-vino); }
/* carriles deslizables sin barra visible (se siguen pudiendo arrastrar y recorrer con teclado) */
.mc-carril, .mc-hito__fotos, .mc-subnav ul, .mc-galeria__miniaturas { scrollbar-width: none; }
.mc-carril::-webkit-scrollbar, .mc-hito__fotos::-webkit-scrollbar, .mc-subnav ul::-webkit-scrollbar, .mc-galeria__miniaturas::-webkit-scrollbar { display: none; }
.mc :focus-visible { outline: 3px solid var(--macar-vino); outline-offset: 2px; }
.mc-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mc-wrap { max-width: var(--macar-ancho); margin-inline: auto; padding-inline: var(--macar-esp-2); }
.mc-seccion { padding-block: var(--macar-esp-4); }
.mc-seccion--blanca { background: var(--macar-blanco); }
.mc-pila { display: flex; flex-direction: column; gap: var(--macar-esp-3); }
.mc-icono { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Texto que falta en 2-textos-corporativa */
.mc-falta { background: #fff1a8; color: var(--macar-negro); outline: 1px dashed #7a5d00; padding: 0 0.25rem; font-size: var(--macar-texto-s); font-weight: 600; }

/* ---------- Tipografía de sección (como «DESCRIPCIÓN» de la web) ---------- */
.mc-titulo { font-size: var(--macar-texto-l); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.3; padding-bottom: var(--macar-esp-1); border-bottom: 1px solid var(--macar-gris); margin-bottom: var(--macar-esp-3); }
.mc-titulo--grande { font-size: var(--macar-texto-xl); border-bottom: 0; padding-bottom: 0; margin-bottom: var(--macar-esp-2); }
@media (min-width: 768px) { .mc-titulo--grande { margin-bottom: var(--macar-esp-1); } }
.mc-antetitulo { display: block; font-size: var(--macar-texto-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--macar-vino); margin-bottom: var(--macar-esp-1); }
.mc-entradilla { font-size: var(--macar-texto-l); line-height: 1.5; }
.mc-texto-s { font-size: var(--macar-texto-s); }
.mc-suave { color: var(--macar-texto-suave); }
.mc-centro { text-align: center; }
.mc-ancho-texto { max-width: 62ch; }
.mc-centro.mc-ancho-texto { margin-inline: auto; }

/* ---------- Botones (siempre con texto) ---------- */
.mc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--macar-esp-1); min-height: 44px; padding: 0.625rem var(--macar-esp-3); border: 2px solid var(--macar-vino); border-radius: 2px; background: var(--macar-vino); color: var(--macar-blanco); font: inherit; font-size: var(--macar-texto-m); font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; }
.mc a.mc-btn { color: var(--macar-blanco); }
.mc a.mc-btn:hover, .mc-btn:hover { background: #6d1f47; border-color: #6d1f47; color: var(--macar-blanco); }
.mc-btn--linea, .mc a.mc-btn--linea { background: transparent; color: var(--macar-vino); }
.mc-btn--claro, .mc a.mc-btn--claro { background: var(--macar-blanco); border-color: var(--macar-blanco); color: var(--macar-vino); }
.mc-btn--otros, .mc a.mc-btn--otros { background: var(--macar-otros-oscuro); border-color: var(--macar-otros-oscuro); }
.mc-btn[disabled] { background: var(--macar-gris); border-color: var(--macar-gris); color: var(--macar-negro); cursor: not-allowed; }
.mc-btn--texto { background: none; border: 0; padding: 0.5rem 0; color: var(--macar-enlace); min-height: 44px; }
.mc-btn--texto:hover { background: none; color: var(--macar-vino); }
.mc-btn--bloque { width: 100%; }

/* ---------- Migas de pan ---------- */
.mc-migas ol { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; margin: 0; padding: 0; font-size: var(--macar-texto-xs); }
.mc-migas li + li::before { content: "/"; margin-right: 0.25rem; color: var(--macar-texto-suave); }
.mc-migas a { color: var(--macar-negro); }
.mc-migas [aria-current] { color: var(--macar-texto-suave); }

/* =========================================================
   COMPONENTE 1 · Cabecera de página  .mc-cabecera-pagina
   ========================================================= */
.mc-cabecera-pagina { position: relative; display: grid; min-height: 260px; background: var(--macar-pie); color: var(--macar-blanco); overflow: hidden; }
.mc-cabecera-pagina__img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.mc-cabecera-pagina::after { content: ""; position: absolute; inset: 0; background: var(--macar-velo); }
.mc-cabecera-pagina__cuerpo { position: relative; z-index: 1; align-self: end; width: 100%; padding-block: var(--macar-esp-4) var(--macar-esp-3); }
.mc-cabecera-pagina .mc-migas { margin-bottom: var(--macar-esp-2); }
.mc-cabecera-pagina .mc-migas a, .mc-cabecera-pagina .mc-migas [aria-current], .mc-cabecera-pagina .mc-migas li + li::before { color: var(--macar-blanco); }
.mc-cabecera-pagina .mc-antetitulo { color: var(--macar-blanco); }
.mc-cabecera-pagina__titulo { font-size: var(--macar-texto-xl); font-weight: 700; text-transform: uppercase; line-height: 1.2; letter-spacing: 0.01em; }
.mc-cabecera-pagina__sub { display: block; margin-top: var(--macar-esp-1); font-size: var(--macar-texto-l); font-weight: 400; text-transform: none; letter-spacing: 0; }
.mc-panel--solapa { position: relative; z-index: 2; margin-top: var(--macar-esp-2); }
.mc-cabecera-pagina__acciones { margin-top: var(--macar-esp-3); display: flex; flex-wrap: wrap; gap: var(--macar-esp-2); }

/* =========================================================
   COMPONENTE 2 · Bloque de texto con imagen  .mc-media
   ========================================================= */
.mc-media { display: grid; gap: var(--macar-esp-3); align-items: center; }
.mc-media__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mc-media__img--libre img { aspect-ratio: auto; object-fit: contain; }
.mc-media__texto .mc-btn { margin-top: var(--macar-esp-3); }

/* =========================================================
   COMPONENTE 3 · Tarjeta  .mc-tarjeta  (+ rejilla y carril)
   ========================================================= */
.mc-tarjeta { display: flex; flex-direction: column; background: var(--macar-blanco); min-width: 0; }
.mc-tarjeta__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.mc-tarjeta__img--envase { background: var(--macar-blanco); padding: var(--macar-esp-2) var(--macar-esp-2) 0; }
.mc-tarjeta__img--envase img { aspect-ratio: 3 / 4; object-fit: contain; }
.mc-tarjeta__cuerpo { display: flex; flex-direction: column; gap: var(--macar-esp-1); padding: var(--macar-esp-2); flex: 1; }
.mc-tarjeta__titulo { font-size: var(--macar-texto-l); font-weight: 700; line-height: 1.3; text-transform: uppercase; }
.mc-tarjeta__texto { font-size: var(--macar-texto-s); }
.mc-tarjeta__pie { margin-top: auto; padding-top: var(--macar-esp-1); }
.mc-rejilla { display: grid; gap: var(--macar-esp-2); grid-template-columns: minmax(0, 1fr); }
.mc-carril { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--macar-esp-2); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--macar-esp-1); }
.mc-carril > * { scroll-snap-align: start; }

/* Tarjeta de producto (recomendados, mismo patrón que la tienda) */
.mc-tarjeta--producto .mc-tarjeta__fila { display: grid; grid-template-columns: 88px 1fr; gap: var(--macar-esp-2); padding: var(--macar-esp-2); }
.mc-tarjeta--producto .mc-tarjeta__fila img { width: 88px; height: 168px; object-fit: contain; }
.mc-tarjeta--producto .mc-tarjeta__titulo { font-size: var(--macar-texto-m); text-transform: none; }
.mc-tarjeta--producto .mc-tarjeta__compra { border-top: 1px solid var(--macar-gris); padding: var(--macar-esp-2); display: flex; flex-direction: column; gap: var(--macar-esp-1); }
.mc-tarjeta--producto .mc-tarjeta__precio { font-size: var(--macar-texto-l); font-weight: 800; }

/* =========================================================
   COMPONENTE 4 · Hito de la línea del tiempo  .mc-hito
   ========================================================= */
.mc-linea { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--macar-esp-4); }
.mc-linea::before { content: ""; position: absolute; top: 12px; bottom: 0; left: 11px; width: 2px; background: var(--macar-vino); }
.mc-hito { display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-areas: "punto anio" "punto cuerpo"; column-gap: var(--macar-esp-2); scroll-margin-top: 6rem; }
.mc-hito__punto { grid-area: punto; position: relative; width: 24px; height: 24px; border-radius: 50%; background: var(--macar-blanco); border: 5px solid var(--macar-vino); margin-top: 6px; }
.mc-hito__anio { grid-area: anio; font-size: var(--macar-texto-xl); font-weight: 800; color: var(--macar-vino); line-height: 1.3; margin-bottom: var(--macar-esp-1); }
.mc-hito__cuerpo { grid-area: cuerpo; background: var(--macar-blanco); padding: var(--macar-esp-3) var(--macar-esp-2); }
.mc-hito__titulo { font-size: var(--macar-texto-l); font-weight: 700; text-transform: uppercase; line-height: 1.3; margin-bottom: var(--macar-esp-2); }
.mc-hito__fotos { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: var(--macar-esp-1); overflow-x: auto; scroll-snap-type: x mandatory; margin-top: var(--macar-esp-3); }
.mc-hito__fotos figure { scroll-snap-align: start; }
.mc-hito__fotos img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.mc-hito__fotos--una { grid-auto-columns: 100%; }
.mc-hito__fotos--una img { aspect-ratio: 16 / 10; }
.mc-anios { display: flex; flex-wrap: wrap; gap: var(--macar-esp-1); list-style: none; margin: 0; padding: 0; }
.mc-anios a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--macar-esp-2); border: 1px solid var(--macar-vino); color: var(--macar-vino); font-weight: 700; text-decoration: none; background: var(--macar-blanco); }
.mc-anios a:hover { background: var(--macar-vino); color: var(--macar-blanco); }

/* =========================================================
   COMPONENTE 5 · Tabla de datos de la ficha  .mc-datos
   (<dl>; una fila sin valor no se pinta)
   ========================================================= */
.mc-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--macar-esp-2) var(--macar-esp-3); }
.mc-datos__fila { min-width: 0; }
.mc-datos dt { font-size: var(--macar-texto-s); font-weight: 700; }
.mc-datos dd { font-size: var(--macar-texto-s); overflow-wrap: anywhere; }
.mc-datos--texto { grid-template-columns: minmax(0, 1fr); }
.mc-datos--compacta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--macar-gris); }
.mc-datos--compacta .mc-datos__fila { padding: var(--macar-esp-1) 0; border-bottom: 1px solid var(--macar-gris); }
.mc-datos--compacta dt { font-size: var(--macar-texto-xs); font-weight: 600; color: var(--macar-texto-suave); text-transform: uppercase; letter-spacing: 0.04em; }
.mc-datos--compacta dd { font-size: var(--macar-texto-m); font-weight: 700; }
.mc-datos__grupo + .mc-datos__grupo { margin-top: var(--macar-esp-4); }

/* =========================================================
   Menú (dentro de la cabecera actual)
   ========================================================= */
.mc-barra-envio { background: var(--macar-vino); color: var(--macar-blanco); font-size: var(--macar-texto-xs); font-weight: 700; text-align: center; padding: 0.25rem var(--macar-esp-2); }
.mc-cabecera { background: var(--macar-blanco); border-bottom: 1px solid var(--macar-gris); }
.mc-cabecera__fila { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "logo carrito menu" "buscar buscar buscar"; gap: var(--macar-esp-1) var(--macar-esp-1); align-items: center; padding-block: var(--macar-esp-1); }
.mc-cabecera__logo { grid-area: logo; }
.mc-cabecera__logo img { width: 150px; }
.mc-cabecera__buscar { grid-area: buscar; display: flex; align-items: center; gap: var(--macar-esp-1); border: 1px solid var(--macar-gris); padding: 0 var(--macar-esp-1); min-height: 44px; }
.mc-cabecera__buscar input { border: 0; font: inherit; font-size: var(--macar-texto-s); flex: 1; min-width: 0; background: transparent; }
.mc-cabecera__cuenta { display: none; }
.mc-cabecera__carrito { grid-area: carrito; }
.mc-menu-btn { grid-area: menu; }
.mc-nav { border-top: 1px solid var(--macar-gris); }
.mc-nav[hidden] { display: none; } /* móvil: plegado hasta pulsar «Menú» (macar.js) */
.mc-nav__lista { list-style: none; margin: 0; padding: 0; }
.mc-nav__item { border-bottom: 1px solid var(--macar-gris); }
.mc-nav__boton { display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 var(--macar-esp-2); background: none; border: 0; font: inherit; font-weight: 700; color: var(--macar-negro); cursor: pointer; text-align: left; }
.mc-nav__boton .mc-icono { transition: none; }
.mc-nav__boton[aria-expanded="true"] { color: var(--macar-vino); }
.mc-nav__boton[aria-expanded="true"] .mc-icono { transform: rotate(180deg); }
.mc-nav__sub { list-style: none; margin: 0; padding: 0 0 var(--macar-esp-1); background: var(--macar-fondo); }
.mc-nav__sub[hidden] { display: none; }
.mc-nav__sub a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--macar-esp-2) 0 var(--macar-esp-4); color: var(--macar-negro); text-decoration: none; }
.mc-nav__sub a:hover { color: var(--macar-vino); text-decoration: underline; }
.mc-nav__sub a[aria-current="page"] { color: var(--macar-vino); font-weight: 700; }

/* =========================================================
   Ficha de producto
   ========================================================= */
/* Regla de líneas: dentro de la ficha solo separan las filas de tabla (border-bottom)
   y el borde de la subnavegación. Ningún bloque lleva borde arriba y abajo a la vez. */
.mc-ficha { --mc-acento: var(--macar-vino); padding-top: var(--macar-esp-2); }
.mc-ficha .mc-migas { margin-bottom: var(--macar-esp-2); }
.mc-panel { background: var(--macar-blanco); padding: var(--macar-esp-3) var(--macar-esp-2); }
.mc-ficha__alto { display: grid; gap: var(--macar-esp-3); background: var(--macar-blanco); padding: var(--macar-esp-2); }

/* Iconos de la ficha: máscara SVG, toman el color del texto o del acento */
.mc-ico { display: inline-block; flex: none; width: 24px; height: 24px; background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.mc-ico--uva { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='10' r='2.5'/%3E%3Ccircle cx='15' cy='10' r='2.5'/%3E%3Ccircle cx='12' cy='14.5' r='2.5'/%3E%3Ccircle cx='12' cy='19.5' r='2'/%3E%3Cpath d='M12 7.5V3l3 1.5'/%3E%3C/svg%3E"); }
.mc-ico--calendario { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.mc-ico--termometro { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14V5a2 2 0 0 1 4 0v9a4 4 0 1 1-4 0z'/%3E%3Cpath d='M12 9v6'/%3E%3C/svg%3E"); }
.mc-ico--botella { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2h4v4l2 3v12a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V9l2-3z'/%3E%3Cpath d='M8 13h8'/%3E%3C/svg%3E"); }
.mc-ico--grados { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5 5 19'/%3E%3Ccircle cx='7' cy='7' r='2.5'/%3E%3Ccircle cx='17' cy='17' r='2.5'/%3E%3C/svg%3E"); }
.mc-ico--etiqueta { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V3h9l9 9-9 9z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E"); }
.mc-ico--peso { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M6 21h12M5 7h14M5 7l-3 6a3 3 0 0 0 6 0zM19 7l-3 6a3 3 0 0 0 6 0z'/%3E%3C/svg%3E"); }
.mc-ico--piezas { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E"); }
.mc-ico--vista { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.mc-ico--nariz { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8c2-2 4 2 6 0s4 2 6 0 4 2 6 0M3 13c2-2 4 2 6 0s4 2 6 0 4 2 6 0M3 18c2-2 4 2 6 0s4 2 6 0'/%3E%3C/svg%3E"); }
.mc-ico--boca { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 7 6 11a6 6 0 0 1-12 0c0-4 6-11 6-11z'/%3E%3C/svg%3E"); }
.mc-ico--cubiertos { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v8a2 2 0 0 0 2 2v8M5 3v5M9 3v5M17 3c-2 2-2 6 0 8v10'/%3E%3C/svg%3E"); }
.mc-ico--camion { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v9H3zM14 9h4l3 3v3h-7'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E"); }
.mc-ico--regalo { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h18v4H3zM5 12v8h14v-8M12 8v12M12 8c-2-4-6-3-5 0M12 8c2-4 6-3 5 0'/%3E%3C/svg%3E"); }
.mc-ico--corazon { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E"); }
.mc-ico--lupa { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E"); }
.mc-ico--flecha { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }

/* Galería */
.mc-galeria { display: grid; gap: var(--macar-esp-1); min-width: 0; }
.mc-galeria__principal { position: relative; display: grid; place-items: center; min-height: 320px; padding: var(--macar-esp-3) var(--macar-esp-2); background: var(--macar-fondo); }
.mc-galeria__principal img { width: auto; max-width: 100%; max-height: 280px; object-fit: contain; }
.mc-galeria__zoom { position: absolute; right: var(--macar-esp-1); bottom: var(--macar-esp-1); display: inline-flex; align-items: center; gap: 0.375rem; min-height: 44px; padding: 0 0.75rem; background: var(--macar-blanco); border: 0; font: inherit; font-size: var(--macar-texto-xs); font-weight: 700; color: var(--macar-negro); cursor: zoom-in; }
.mc-galeria__zoom .mc-ico { width: 18px; height: 18px; }
.mc-sello { position: absolute; top: var(--macar-esp-1); left: var(--macar-esp-1); background: var(--macar-negro); color: var(--macar-blanco); font-size: var(--macar-texto-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.25rem var(--macar-esp-1); }
.mc-sello--rebaja { background: var(--macar-rebaja); }
.mc-galeria__miniaturas { display: flex; gap: var(--macar-esp-1); list-style: none; margin: 0; padding: 0; overflow-x: auto; }
.mc-galeria__miniaturas button { display: block; width: 64px; height: 64px; padding: 4px; background: var(--macar-fondo); border: 2px solid transparent; cursor: pointer; }
.mc-galeria__miniaturas button[aria-current="true"] { border-color: var(--mc-acento); }
.mc-galeria__miniaturas img { width: 100%; height: 100%; object-fit: contain; }
.mc-galeria__hueco { display: grid; place-items: center; width: 64px; height: 64px; border: 1px dashed var(--macar-texto-suave); font-size: var(--macar-texto-xs); color: var(--macar-texto-suave); text-align: center; line-height: 1.2; }

/* Columna de compra */
.mc-compra { display: flex; flex-direction: column; gap: var(--macar-esp-2); min-width: 0; }
.mc-etiqueta { display: inline-flex; align-items: center; gap: var(--macar-esp-1); font-size: var(--macar-texto-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mc-acento); }
.mc-etiqueta::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--mc-acento); }
.mc-ficha__titulo { font-size: var(--macar-texto-xl); font-weight: 800; text-transform: uppercase; line-height: 1.15; margin-top: 0.25rem; }
.mc-ficha__sub { font-size: var(--macar-texto-l); font-weight: 600; margin-top: 0.25rem; }
.mc-ficha__sub span { color: var(--macar-texto-suave); }
.mc-valoracion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--macar-esp-1); font-size: var(--macar-texto-s); }
.mc-estrellas { display: inline-flex; gap: 2px; color: var(--macar-otros-oscuro); }
.mc-estrellas svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mc-estrellas .llena { fill: currentColor; }
.mc-esencial { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--macar-esp-1); list-style: none; margin: 0; padding: 0; }
.mc-esencial li { display: flex; align-items: center; gap: 0.75rem; min-width: 0; padding: 0.75rem; background: var(--macar-fondo); }
.mc-esencial .mc-ico { color: var(--mc-acento); }
.mc-esencial__k { display: block; font-size: var(--macar-texto-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--macar-texto-suave); }
.mc-esencial__v { display: block; font-size: var(--macar-texto-m); font-weight: 700; line-height: 1.3; }
.mc-precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem var(--macar-esp-2); }
.mc-precio__importe { font-size: var(--macar-texto-precio); font-weight: 800; line-height: 1; }
.mc-precio__iva { font-size: var(--macar-texto-s); font-weight: 600; color: var(--macar-texto-suave); }
.mc-precio__kilo { flex-basis: 100%; font-size: var(--macar-texto-s); color: var(--macar-texto-suave); }
.mc-comprar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--macar-esp-1); }
.mc-cantidad { display: flex; align-items: stretch; border: 1px solid var(--macar-texto-suave); background: var(--macar-blanco); }
.mc-cantidad button { width: 44px; min-height: 50px; border: 0; background: none; font: inherit; font-size: var(--macar-texto-l); font-weight: 700; color: var(--macar-negro); cursor: pointer; }
.mc-cantidad input { width: 2.75rem; border: 0; font: inherit; font-weight: 700; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.mc-cantidad input::-webkit-inner-spin-button, .mc-cantidad input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.mc-comprar .mc-btn { min-height: 52px; padding-inline: 0.75rem; white-space: nowrap; }
.mc-btn--deseos, .mc a.mc-btn--deseos { background: var(--macar-blanco); border: 1px solid var(--macar-gris); color: var(--macar-vino); }
.mc-btn--deseos:hover { background: var(--macar-fondo); border-color: var(--macar-gris); color: var(--macar-vino); }
.mc-btn--deseos .mc-ico { width: 20px; height: 20px; }
.mc-envio { list-style: none; margin: 0; padding: 0.75rem var(--macar-esp-2); display: grid; gap: var(--macar-esp-1); font-size: var(--macar-texto-s); background: var(--macar-fondo); }
.mc-envio li { display: flex; gap: var(--macar-esp-1); align-items: center; }
.mc-envio .mc-ico { width: 20px; height: 20px; color: var(--macar-vino); }

/* Subnavegación de la ficha */
.mc-subnav { position: sticky; top: 0; z-index: 5; margin-top: var(--macar-esp-2); background: var(--macar-blanco); border-bottom: 1px solid var(--macar-gris); }
.mc-subnav ul { display: flex; gap: var(--macar-esp-3); overflow-x: auto; list-style: none; margin: 0; padding: 0 var(--macar-esp-2); }
.mc-subnav a { display: flex; align-items: center; min-height: 48px; white-space: nowrap; color: var(--macar-negro); text-decoration: none; font-size: var(--macar-texto-s); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.mc-subnav a:hover { color: var(--macar-vino); }
.mc-subnav a[aria-current="true"] { border-bottom-color: var(--mc-acento); }

/* Cuerpo: secciones plegables en móvil, paneles abiertos en escritorio */
.mc-ficha__cuerpo { display: grid; gap: var(--macar-esp-1); margin-top: var(--macar-esp-1); }
.mc-ficha__col { display: grid; gap: var(--macar-esp-1); align-content: start; min-width: 0; }
.mc-acordeon { background: var(--macar-blanco); scroll-margin-top: 4rem; }
.mc-acordeon > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--macar-esp-2); min-height: 56px; padding: 0 var(--macar-esp-2); cursor: pointer; list-style: none; }
.mc-acordeon > summary::-webkit-details-marker { display: none; }
.mc-acordeon__titulo { font-size: var(--macar-texto-m); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.mc-acordeon > summary .mc-ico { width: 20px; height: 20px; }
.mc-acordeon[open] > summary .mc-ico { transform: rotate(180deg); }
.mc-acordeon__cuerpo { padding: 0 var(--macar-esp-2) var(--macar-esp-3); }
.mc-acordeon__cuerpo > * + * { margin-top: var(--macar-esp-3); }
.mc-acordeon__cuerpo p + p { margin-top: var(--macar-esp-2); }

/* Tabla técnica: una sola línea entre filas */
.mc-tabla__grupo { font-size: var(--macar-texto-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mc-acento); margin-bottom: 0.25rem; }
.mc-tabla { display: grid; grid-template-columns: minmax(0, 1fr); }
.mc-tabla__fila { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.75rem; padding: 0.625rem 0; border-bottom: 1px solid var(--macar-gris); }
.mc-tabla dt { font-size: var(--macar-texto-s); font-weight: 700; }
.mc-tabla dd { font-size: var(--macar-texto-s); margin: 0; overflow-wrap: anywhere; }

/* Cata */
.mc-cata { display: grid; gap: var(--macar-esp-1); list-style: none; margin: 0; padding: 0; }
.mc-cata li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0.75rem; padding: var(--macar-esp-2); background: var(--macar-fondo); }
.mc-cata .mc-ico { width: 28px; height: 28px; color: var(--mc-acento); }
.mc-cata h3 { font-size: var(--macar-texto-m); font-weight: 700; margin-bottom: 0.25rem; }
.mc-cata p, .mc-cata__texto { font-size: var(--macar-texto-s); }
.mc-servicio { display: flex; align-items: center; gap: 0.75rem; font-size: var(--macar-texto-s); }
.mc-servicio .mc-ico { color: var(--mc-acento); }
.mc-subtitulo { font-size: var(--macar-texto-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--macar-esp-1); }
.mc-maridaje { display: flex; flex-wrap: wrap; gap: var(--macar-esp-1); list-style: none; margin: 0; padding: 0; }
.mc-maridaje li { display: inline-flex; align-items: center; gap: 0.375rem; background: var(--macar-blanco); border: 1px solid var(--macar-gris); padding: 0.375rem 0.75rem; font-size: var(--macar-texto-s); font-weight: 600; }
.mc-maridaje .mc-ico { width: 16px; height: 16px; color: var(--mc-acento); }

/* Crítica: cita destacada */
.mc-cita { background: var(--macar-pie); color: var(--macar-blanco); padding: var(--macar-esp-3) var(--macar-esp-2); }
.mc-cita__titulo { font-size: var(--macar-texto-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--macar-esp-2); }
.mc-cita blockquote { font-size: var(--macar-texto-l); line-height: 1.5; }
.mc-cita blockquote::before { content: "\201C"; display: block; font-size: var(--macar-texto-precio); font-weight: 800; line-height: 0.8; color: var(--macar-licor); }
.mc-nota { display: inline-flex; align-items: baseline; gap: var(--macar-esp-1); border: 2px solid currentColor; padding: 0.25rem 0.75rem; margin-bottom: var(--macar-esp-2); }
.mc-nota strong { font-size: var(--macar-texto-xl); line-height: 1.1; }
.mc-nota span { font-size: var(--macar-texto-s); font-weight: 600; }

/* Productor */
.mc-productor__nombre { font-size: var(--macar-texto-l); font-weight: 800; text-transform: uppercase; }
.mc-productor img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.mc-productor img.mc-productor__logo { aspect-ratio: auto; object-fit: contain; }

/* Opiniones */
.mc-opiniones { margin-top: var(--macar-esp-4); background: var(--macar-blanco); padding: var(--macar-esp-3) var(--macar-esp-2); scroll-margin-top: 4rem; }
.mc-opiniones__vacio { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--macar-esp-2); }
.mc-resenas__resumen { display: grid; gap: var(--macar-esp-3); align-items: center; background: var(--macar-fondo); padding: var(--macar-esp-3) var(--macar-esp-2); }
.mc-resenas__media { text-align: center; }
.mc-resenas__media strong { display: block; font-size: var(--macar-texto-precio); font-weight: 800; line-height: 1; }
.mc-resenas__nota { display: flex; align-items: baseline; justify-content: center; gap: 0.375rem; }
.mc-resenas__nota strong { display: inline; }
.mc-resenas__total { display: block; margin-top: var(--macar-esp-1); }
.mc-barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; font-size: var(--macar-texto-xs); }
.mc-barras li { display: grid; grid-template-columns: 5.5rem 1fr 2.5rem; gap: var(--macar-esp-1); align-items: center; }
.mc-barras__pista { height: 10px; background: var(--macar-blanco); border: 1px solid var(--macar-gris); }
.mc-barras__pista span { display: block; height: 100%; background: var(--macar-otros-oscuro); }
.mc-cabecera-seccion { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--macar-esp-2); margin-bottom: var(--macar-esp-3); }
.mc-cabecera-seccion .mc-titulo { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }

/* Barra de compra fija en móvil (se oculta en escritorio) */
.mc-barra-compra { position: sticky; bottom: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: var(--macar-esp-2); margin-inline: calc(var(--macar-esp-2) * -1); padding: var(--macar-esp-1) var(--macar-esp-2); background: var(--macar-blanco); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12); }
.mc-barra-compra__precio { font-size: var(--macar-texto-l); font-weight: 800; line-height: 1.1; }
/* Ronda 2 de la Tarea 4 (I2): la regla del handoff era `.mc-barra-compra__precio span`, pensada para «IVA incl.», y también alcanzaba al guion del rango de un producto
   variable (`<span aria-hidden="true">` de wc_format_price_range): salía en bloque y el precio en tres líneas. Ahora solo el span de «IVA incl.» (clase propia). */
.mc-barra-compra__precio .mc-barra-compra__iva { display: block; font-size: var(--macar-texto-xs); font-weight: 600; color: var(--macar-texto-suave); }

@media (min-width: 768px) {
  .mc-ficha__alto { padding: var(--macar-esp-3); }
  .mc-galeria__principal { min-height: 440px; }
  .mc-galeria__principal img { max-height: 400px; }
  .mc-esencial { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mc-cata { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mc-cata li { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .mc-tabla { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--macar-esp-4); }
  .mc-tabla--texto { grid-template-columns: minmax(0, 1fr); }
  .mc-tabla__fila { grid-template-columns: 10rem minmax(0, 1fr); }
  .mc-opiniones { padding: var(--macar-esp-4); }
}
@media (min-width: 1024px) {
  .mc-ficha__alto { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--macar-esp-4); padding: var(--macar-esp-4); align-items: start; }
  .mc-galeria { grid-template-columns: 72px minmax(0, 1fr); align-items: start; }
  .mc-galeria__miniaturas { flex-direction: column; order: -1; overflow: visible; }
  .mc-galeria__principal { min-height: 600px; }
  .mc-galeria__principal img { max-height: 540px; }
  .mc-compra { position: sticky; top: var(--macar-esp-2); }
  .mc-esencial { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-subnav ul { padding: 0 var(--macar-esp-4); gap: var(--macar-esp-4); }
  .mc-ficha__cuerpo { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--macar-esp-2); margin-top: var(--macar-esp-2); align-items: start; }
  .mc-ficha__col { gap: var(--macar-esp-2); }
  .mc-acordeon > summary { pointer-events: none; min-height: 0; padding: var(--macar-esp-4) var(--macar-esp-4) var(--macar-esp-3); }
  .mc-acordeon > summary .mc-ico { display: none; }
  .mc-acordeon__titulo { font-size: var(--macar-texto-l); }
  .mc-acordeon__cuerpo { padding: 0 var(--macar-esp-4) var(--macar-esp-4); }
  .mc-ficha__col--lado .mc-acordeon > summary { padding-inline: var(--macar-esp-3); }
  .mc-ficha__col--lado .mc-acordeon__cuerpo { padding-inline: var(--macar-esp-3); }
  .mc-cita { padding: var(--macar-esp-4) var(--macar-esp-3); }
  .mc-barra-compra { display: none; }
}

/* =========================================================
   Franja corporativa de portada
   ========================================================= */
.mc-franja { position: relative; display: grid; background: var(--macar-pie); color: var(--macar-blanco); }
.mc-franja__img img { width: 100%; height: 160px; object-fit: cover; object-position: 85% center; }
.mc-franja__texto { position: relative; padding: var(--macar-esp-3) var(--macar-esp-2); }
.mc-franja__texto .mc-antetitulo { color: var(--macar-blanco); }
.mc-franja a:not(.mc-btn) { color: var(--macar-blanco); }
.mc-franja__titulo { font-size: var(--macar-texto-xl); font-weight: 700; line-height: 1.25; margin-bottom: var(--macar-esp-2); }
.mc-franja__dato { display: flex; align-items: baseline; gap: var(--macar-esp-1); margin-bottom: var(--macar-esp-2); }
.mc-franja__dato strong { font-size: var(--macar-texto-precio); font-weight: 800; line-height: 1; }
.mc-contexto { border: 2px dashed var(--macar-gris); color: var(--macar-texto-suave); font-size: var(--macar-texto-s); font-weight: 600; text-align: center; padding: var(--macar-esp-4) var(--macar-esp-2); }

/* Banda final con foto */
.mc-banda { position: relative; display: grid; min-height: 240px; place-items: center; text-align: center; color: var(--macar-blanco); background: var(--macar-pie); overflow: hidden; }
.mc-banda > img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.mc-banda::after { content: ""; position: absolute; inset: 0; background: var(--macar-velo); }
.mc-banda__cuerpo { position: relative; z-index: 1; padding: var(--macar-esp-4) var(--macar-esp-2); }

/* =========================================================
   ≥ 768 px
   ========================================================= */
@media (min-width: 768px) {
  .mc-wrap { padding-inline: var(--macar-esp-3); }
  .mc-cabecera-pagina { min-height: 360px; }
  .mc-panel--solapa { margin-top: -24px; }
  .mc-cabecera-pagina__cuerpo { padding-bottom: var(--macar-esp-4); }
  .mc-media { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--macar-esp-4); }
  .mc-media--invertido .mc-media__img { order: 2; }
  .mc-rejilla--2, .mc-rejilla--3, .mc-rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-carril { grid-auto-columns: 45%; }
  .mc-panel, .mc-hito__cuerpo { padding: var(--macar-esp-4) var(--macar-esp-4); }
  .mc-datos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mc-datos--texto { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mc-datos--compacta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mc-datos--compacta .mc-datos__fila { padding-right: var(--macar-esp-2); }
  .mc-hito__fotos { grid-auto-flow: row; grid-template-columns: 2fr 1fr; grid-auto-columns: auto; overflow: visible; }
  .mc-hito__fotos figure:first-child { grid-row: span 2; }
  .mc-hito__fotos--una { grid-template-columns: 1fr; }
  .mc-hito__fotos--una figure:first-child { grid-row: auto; }
  .mc-resenas__resumen { grid-template-columns: 10rem 1fr auto; }
  .mc-franja { grid-template-columns: 1fr; min-height: 320px; }
  .mc-franja__img { position: absolute; inset: 0; }
  .mc-franja__img img { height: 100%; object-position: right center; }
  .mc-franja__texto { padding: var(--macar-esp-4); max-width: 60%; }
  .mc-banda { min-height: 320px; }
}

/* =========================================================
   ≥ 1024 px
   ========================================================= */
@media (min-width: 1024px) {
  .mc-cabecera-pagina { min-height: 400px; }
  .mc-cabecera-pagina__cuerpo { padding-block: var(--macar-esp-4); }
  .mc-rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mc-rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mc-carril--rejilla { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; gap: var(--macar-esp-3) var(--macar-esp-2); }
  .mc-carril--3 { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; }
  /* línea del tiempo: año | punto | cuerpo */
  .mc-linea::before { left: calc(160px + var(--macar-esp-3) + 11px); }
  .mc-hito { grid-template-columns: 160px 24px minmax(0, 1fr); grid-template-areas: "anio punto cuerpo"; column-gap: var(--macar-esp-3); }
  .mc-hito__anio { font-size: var(--macar-texto-precio); text-align: right; }
  .mc-hito__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--macar-esp-4); align-items: start; }
  .mc-hito__cuerpo > .mc-hito__fotos { margin-top: 0; }
  /* cabecera de la tienda en escritorio */
  .mc-cabecera__fila { grid-template-columns: 1fr minmax(0, 340px) auto auto; grid-template-areas: "logo buscar cuenta carrito"; gap: var(--macar-esp-3); padding-block: var(--macar-esp-2); }
  .mc-cabecera__logo img { width: 190px; }
  .mc-cabecera__cuenta { display: inline-flex; grid-area: cuenta; }
  .mc-menu-btn { display: none; }
  .mc-nav__lista { display: flex; justify-content: center; gap: var(--macar-esp-3); }
  .mc-nav__item { position: relative; border-bottom: 0; }
  .mc-nav__boton { gap: 0.375rem; padding: 0 var(--macar-esp-1); }
  .mc-nav__sub { position: absolute; top: 100%; left: 0; z-index: 10; min-width: 15rem; padding: var(--macar-esp-1) 0; background: var(--macar-blanco); border: 1px solid var(--macar-gris); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); }
  .mc-nav__sub a { padding: 0 var(--macar-esp-3); }
  .mc-datos--texto { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mc-franja__texto { max-width: 52%; }
}

/* =========================================================
   ADAPTACIONES DE LA FICHA AL MARCADO REAL (Plan 6 · Tarea 3). NO son del handoff: es lo que hace falta para que el HTML que
   imprimen WooCommerce y las partes de hoy (formulario de compra, deseos, reseñas, recomendados) case con el diseño. Cada regla dice
   por qué. Sin `!important`. La cantidad (.mc-cantidad) y la galería nativa son de la Tarea 4 (más abajo).
   ========================================================= */
.mc-comprar .single_add_to_cart_button { width: 100%; }
/* Precio de WooCommerce: <del>/<ins> y el importe heredan el tamaño del diseño */
.mc-precio__importe .woocommerce-Price-amount { font: inherit; }
.mc-precio__importe del { font-size: var(--macar-texto-l); font-weight: 600; color: var(--macar-texto-suave); }
/* m1 (revisión r0): `.macar-ficha .price del` de macar.css (0,2,1) pintaba el tachado con el color de rebaja; el diseño lo quiere atenuado y solo `ins` en rebaja */
.mc-ficha .mc-precio__importe del { color: var(--macar-texto-suave); }
.mc-precio__importe ins { color: var(--macar-rebaja); text-decoration: none; }
.mc-barra-compra__precio ins { color: var(--macar-rebaja); text-decoration: none; }
/* Deseos: el botón de la parte del tema lleva dos corazones y dos textos que se alternan por data-en-lista */
.macar-deseos--ficha { margin: 0; }
.macar-deseos--ficha .macar-deseos__boton { padding: 0.625rem var(--macar-esp-3); border: 1px solid var(--macar-gris); border-radius: 2px; font-size: var(--macar-texto-m); color: var(--macar-vino); background: var(--macar-blanco); }
.macar-deseos--ficha .macar-deseos__boton svg { margin: 0; font-size: 20px; }
.macar-deseos--ficha .macar-deseos__boton[data-en-lista="1"] { color: var(--macar-licor-oscuro); }
.macar-deseos--ficha .macar-deseos__boton[data-en-lista="1"] svg { font-size: 20px; }
.macar-deseos--ficha .macar-deseos__boton[data-en-lista="1"] .macar-deseos__texto--anadido { display: inline; }
.macar-deseos--ficha .macar-deseos__texto { margin-left: var(--macar-esp-1); }
/* Productor: la tabla pequeña del handoff (en el HTML de referencia va en línea) */
.mc-tabla--productor { grid-template-columns: minmax(0, 1fr); margin-top: var(--macar-esp-1); }
.mc-tabla--productor .mc-tabla__fila { grid-template-columns: 7rem minmax(0, 1fr); }
/* Sin columna lateral (sin crítica ni productor) la columna principal ocupa todo el ancho */
@media (min-width: 1024px) { .mc-ficha__cuerpo--solo { grid-template-columns: minmax(0, 1fr); } }
/* Maridaje: texto del cliente (lleva <b>, <br> y <p>) bajo las imágenes de platos */
.mc-maridaje-texto { font-size: var(--macar-texto-s); }
.mc-maridaje-texto > * + * { margin-top: var(--macar-esp-1); }
/* Recomendados de hoy dentro de la ficha: sin el margen de página completa */

.mc-ficha .macar-recom { margin: var(--macar-esp-4) 0; padding-inline: 0; }
.mc-barra-compra__precio .woocommerce-Price-amount { white-space: nowrap; }
/* I1 (revisión r0): `.mc-barra-compra__precio span` (handoff, pensada para el span «IVA incl.») alcanzaba a los <span> del precio de WooCommerce y
   lo partía en 3-4 líneas pequeñas y grises. El importe y lo que lleva dentro son en línea y heredan el tamaño y el color del contenedor; el tachado
   se atenúa. Solo toca el importe: «IVA incl.» sigue siendo el span en bloque del handoff. */
.mc-barra-compra__precio .woocommerce-Price-amount, .mc-barra-compra__precio .woocommerce-Price-amount * { display: inline; font: inherit; color: inherit; }
.mc-barra-compra__precio del { font-size: var(--macar-texto-s); font-weight: 600; color: var(--macar-texto-suave); }
.mc-barra-compra__precio del .woocommerce-Price-amount, .mc-barra-compra__precio del .woocommerce-Price-amount * { color: inherit; }
/* I2 (revisión r0): `h1…h6 { color: var(--macar-oscuro) }` del tema (0,0,1) ganaba al blanco heredado de los fondos oscuros del diseño:
   el título de la crítica salía negro sobre #212121 (1,3:1). Los títulos que van sobre fondo oscuro heredan el color de su pieza. */
.mc-cita__titulo, .mc-cabecera-pagina__titulo, .mc-franja__titulo, .mc-banda .mc-titulo, .mc-banda__cuerpo h2 { color: inherit; }

/* =========================================================
   TAREA 4 (Plan 6): galería nativa, cantidad, variaciones, opiniones. NO son del handoff: adaptan el marcado real de WooCommerce y del tema
   a las clases del diseño. Sin `!important`.
   ========================================================= */
/* Galería NATIVA de WooCommerce (woocommerce/single-product/product-image.php) con el aspecto de `.mc-galeria`: fondo --macar-fondo, miniaturas de
   64 px con borde --mc-acento en la activa, botón «Ampliar» con texto. La imagen principal, la tira (que crea flexslider con JS), el sello y el botón de
   ampliar comparten la rejilla de `.mc-galeria`: el sello y el botón son absolutos DENTRO de la celda de la imagen (una abspos hija de una rejilla
   toma su área como bloque contenedor). */
.mc-galeria { position: relative; } /* bloque contenedor del sello y del botón «Ampliar» (absolutos dentro de la celda de la imagen) */
.mc-galeria .woocommerce-product-gallery__wrapper, .mc-galeria .flex-viewport { grid-area: 1 / 1; min-width: 0; margin: 0; }
.mc-galeria .mc-sello, .mc-galeria .woocommerce-product-gallery__trigger { grid-area: 1 / 1 / 2 / 2; z-index: 2; } /* líneas finales explícitas: con `auto`, un hijo absoluto de la rejilla se coloca respecto a TODA ella y «Ampliar» caía bajo la tira (m1) */
.mc-galeria .woocommerce-product-gallery__image { background: var(--macar-fondo); text-align: center; }
.mc-galeria .woocommerce-product-gallery__image a { display: block; padding: var(--macar-esp-3) var(--macar-esp-2); } /* el relleno va en el enlace y no en la diapositiva: flexslider da al visor el .height() de la diapositiva (sin relleno) y recortaba 48 px de la foto (Tarea 7, ronda 1) */
.mc-galeria .woocommerce-product-gallery__image img { display: block; width: 100%; height: 280px; object-fit: contain; }
.mc-galeria .woocommerce-product-gallery__trigger { position: absolute; right: var(--macar-esp-1); bottom: var(--macar-esp-1); display: inline-flex; align-items: center; gap: 0.375rem; min-height: 44px; padding: 0 0.75rem; background: var(--macar-blanco); font-size: var(--macar-texto-xs); font-weight: 700; color: var(--macar-negro); text-decoration: none; cursor: zoom-in; }
.mc-galeria .woocommerce-product-gallery__trigger > span { display: none; } /* la lupa en emoji de WooCommerce: se sustituye por el icono y el texto del diseño */
.mc-galeria .woocommerce-product-gallery__trigger::before { content: ""; width: 18px; height: 18px; background-color: currentColor; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E"); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.mc-galeria .woocommerce-product-gallery__trigger::after { content: "Ampliar"; }
.mc-galeria .flex-control-thumbs { grid-area: 2 / 1; display: flex; gap: var(--macar-esp-1); list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.mc-galeria .flex-control-thumbs::-webkit-scrollbar { display: none; }
.mc-galeria .flex-control-thumbs li { flex: none; float: none; width: auto; margin: 0; }
.mc-galeria .flex-control-thumbs img { display: block; box-sizing: border-box; width: 64px; height: 64px; padding: 4px; background: var(--macar-fondo); border: 2px solid transparent; object-fit: contain; opacity: 1; cursor: pointer; }
.mc-galeria .flex-control-thumbs img.flex-active { border-color: var(--mc-acento); }
@media (min-width: 768px) { .mc-galeria .woocommerce-product-gallery__image img { height: 400px; } }
@media (min-width: 1024px) {
  .mc-galeria .woocommerce-product-gallery__image img { height: 540px; }
  /* una sola foto: sin tira, la imagen ocupa toda la columna (la rejilla de 72 px + 1fr del handoff es para la tira lateral) */
  .mc-galeria:not(.mc-galeria--tira) { grid-template-columns: minmax(0, 1fr); }
  /* varias fotos: la tira va en la columna de 72 px aunque flexslider aún no la haya creado (sin salto de maquetación al hidratar) */
  .mc-galeria--tira .woocommerce-product-gallery__wrapper, .mc-galeria--tira .flex-viewport, .mc-galeria--tira .mc-sello, .mc-galeria--tira .woocommerce-product-gallery__trigger { grid-area: 1 / 2 / 2 / 3; }
  .mc-galeria--tira .flex-control-thumbs { grid-area: 1 / 1; flex-direction: column; overflow: visible; }
}
/* Cantidad con − y + (woocommerce/global/quantity-input.php): el campo ya lo estiliza `.mc-cantidad`; aquí solo el foco y que el botón de compra rellene la fila */
.mc-cantidad input, .mc-cantidad.quantity input.qty { box-sizing: border-box; width: 2.75rem; min-width: 0; padding: 0; } /* `input[type="number"] { width: auto; min-width: 4rem }` y el relleno de macar.css y `.woocommerce .quantity .qty { width: 3.631em }` de WooCommerce ensanchaban el campo a 58-64 px (el diseño: 2,5 rem; 2,75 rem = 44 px de objetivo táctil, Plan 6 · Tarea 7) */
.mc-cantidad button:focus-visible, .mc-cantidad input:focus-visible { outline: 3px solid var(--macar-vino); outline-offset: -3px; } /* el foco del handoff (10: «no lo quites»), hacia dentro porque la caja tiene borde y el contorno exterior chocaría con el botón de al lado */
/* Producto VARIABLE: el formulario de variaciones de WooCommerce (tabla de opciones + botón) con el aspecto del diseño */
.mc-ficha .variations_form table.variations { width: 100%; margin: 0 0 var(--macar-esp-1); border-collapse: collapse; }
.mc-ficha .variations_form table.variations th, .mc-ficha .variations_form table.variations td { display: block; padding: 0; text-align: left; }
.mc-ficha .variations_form table.variations label { display: block; margin-bottom: 0.25rem; font-size: var(--macar-texto-s); font-weight: 700; }
.mc-ficha .variations_form select { width: 100%; min-height: 50px; padding: 0 0.75rem; border: 1px solid var(--macar-texto-suave); background: var(--macar-blanco); font: inherit; color: var(--macar-negro); }
.mc-ficha .variations_form .reset_variations { display: inline-block; margin-top: 0.25rem; font-size: var(--macar-texto-s); }
.mc-ficha .variations_form .woocommerce-variation-price { margin-bottom: var(--macar-esp-1); font-weight: 700; }
.mc-ficha .variations_form .woocommerce-variation-add-to-cart { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--macar-esp-1); }
.mc-ficha .variations_form .woocommerce-variation-add-to-cart .mc-btn { min-height: 52px; padding-inline: 0.75rem; white-space: nowrap; }
.mc-ficha .variations_form .single_add_to_cart_button.disabled { opacity: 0.55; cursor: not-allowed; }
/* Opiniones (partes/resenas.php): la sección es `.mc-opiniones` del handoff; el contenedor interior de hoy deja de aportar ancho y relleno propios */
.mc-ficha .mc-opiniones { margin-top: var(--macar-esp-4); }
.mc-opiniones .macar-opiniones__interior { display: block; width: 100%; padding: 0; }
.mc-opiniones .macar-opiniones__cuerpo { margin-top: 0; }
.mc-opiniones__vacio p { margin: 0; }
.mc-resenas__resumen .mc-btn { justify-self: start; }
.mc-opiniones .macar-opiniones__recuento { margin-top: var(--macar-esp-3); }

/* =========================================================
   ADAPTACIONES DEL MENÚ «EMPRESA» Y DE LAS PIEZAS DE PORTADA/EMPRESA AL MARCADO REAL (Plan 6 · Tarea 5). NO son del handoff.
   El handoff trae su propia cabecera (`.mc-nav`, `.mc-menu-btn`); la real es `.macar-nav` con su propio botón «Menú» (macar.css, ≤ 767 px), así que aquí
   solo se viste el desplegable dentro de esa navegación y NO hay segundo botón «Menú» (HANDOFF 6.6). Sin `!important`.
   ========================================================= */
/* Escritorio y tableta (≥ 768 px, donde la navegación de macar.css va en fila): el botón se parece a los enlaces de al lado y la lista flota debajo */
.macar-nav .mc-nav__boton { width: auto; min-height: 0; justify-content: center; gap: 0.375rem; padding: 0.9rem 0; color: var(--macar-oscuro); font-size: var(--macar-t-principal); font-weight: 600; }
.macar-nav .mc-nav__boton .mc-nav__flecha { display: block; width: 0; height: 0; border: 0.3rem solid transparent; border-top-color: var(--macar-oscuro); border-bottom-width: 0; } /* el mismo triángulo que `.macar-nav__abrir::before` (macar.css) */
.macar-nav .mc-nav__boton[aria-expanded="true"] .mc-nav__flecha { transform: rotate(180deg); }
.macar-nav .mc-nav__boton[aria-expanded="true"] { color: var(--macar-vino); }
.macar-nav__item--empresa { position: relative; }
.macar-nav__item--empresa .mc-nav__sub { position: absolute; top: 100%; left: 50%; z-index: 10; min-width: 15rem; padding: var(--macar-esp-1) 0; background: var(--macar-blanco); border: 1px solid var(--macar-gris); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); transform: translateX(-50%); }
.macar-nav__item--empresa .mc-nav__sub a { padding: 0 var(--macar-esp-3); }
/* Móvil (≤ 767 px): dentro del panel del menú de siempre, como «Vinos», «Licores» y «Gourmet» (lista en flujo, centrada) */
@media (max-width: 767px) {
  .macar-nav .mc-nav__boton { padding: 0.9rem 0; }
  .macar-nav__item--empresa .mc-nav__sub { position: static; flex: 1 1 100%; min-width: 0; padding: 0 0 var(--macar-esp-1); border: 0; box-shadow: none; background: var(--macar-fondo); transform: none; }
  .macar-nav__item--empresa .mc-nav__sub a { justify-content: center; padding: 0 var(--macar-esp-2); }
}
/* Sin JS el botón no abriría nada: se oculta y se leen los cuatro enlaces del <noscript> (el `hidden` de la lista lo gana `[hidden] { display: none !important }` de macar.css,
   así que la lista del botón no se puede enseñar sin JS; por eso el <noscript> lleva la suya) */
html:not(.js) .macar-nav .mc-nav__boton { display: none; }
.mc-nav__sub--sin-js { display: flex; flex-wrap: wrap; gap: var(--macar-esp-2); margin: 0; padding: 0; list-style: none; }
.mc-nav__sub--sin-js a { display: block; padding: 0.9rem 0; color: var(--macar-oscuro); font-weight: 600; text-decoration: none; }

/* Franja de portada: lo que la referencia ponía en `style` en línea, como clases (el handoff dice «mismas clases»; el estilo en línea era de la demo) */
.mc-seccion--franja { padding-bottom: 0; }
.mc-franja__accion { margin-top: var(--macar-esp-3); }
.mc-entradilla--fuerte { font-weight: 600; }
.mc-rejilla__centro { align-self: center; }
.mc-tarjeta__cuerpo .mc-antetitulo--sin-margen { margin: 0; }
/* Franja a 768-1023 px: la hoja da al texto el 60 % y el vaso y la botella de la foto quedan DETRÁS de la entradilla (visto en captura); el 52 % de
   ≥ 1024 px lo deja a la izquierda de la copa. En 768-1023 px ni así: la copa sigue bajo el texto, y se le da un degradado oscuro por detrás (el fondo de la franja
   es --macar-pie) que se desvanece hacia la foto. Solo afecta a ese tramo. */
@media (min-width: 768px) and (max-width: 1023px) {
  .mc-franja__texto { max-width: 56%; background: linear-gradient(90deg, rgba(34, 34, 34, 0.88) 78%, rgba(34, 34, 34, 0)); }
}

/* Ronda 2 de la Tarea 4 (m7): macar.css deja `.macar-opiniones { margin: 80px 0 }` (la banda de hoy); en la ficha nueva la sección va dentro de .mc-wrap con su propio ritmo
   (--macar-esp-4 = 48 px) y 80 px antes de las recomendaciones eran un hueco de más. Regla estrecha: solo la sección .mc-opiniones. */
.mc-opiniones.macar-opiniones { margin-bottom: var(--macar-esp-4); } /* solo el inferior: el superior (48 px) es el de `.mc-ficha .mc-opiniones` y esta regla, de la misma especificidad y más abajo, no puede anularlo (ronda 1 de la T5, I1) */
/* Ronda 2 de la Tarea 4 (I1): con una unidad en existencias la cantidad es la plantilla original de WooCommerce (`div.quantity` con un `input type="hidden"`: no lleva clase `hidden`). Sigue siendo un hijo de la
   rejilla `.mc-comprar` y deja un hueco de `gap` delante del botón: se quita de la maquetación; el campo se envía igual (display:none no lo saca del formulario). */
.mc-comprar > .quantity:has(> input[type="hidden"]) { display: none; }
.mc-comprar:has(> .quantity > input[type="hidden"]) .single_add_to_cart_button { grid-column: 1 / -1; } /* sin cantidad, el botón pasa a ocupar la fila (la rejilla es «auto 1fr») */

/* =========================================================
   HISTORIA, SERVICIOS Y CAFÉS LA CARIBEÑA (Plan 6 · Tarea 6). NO son del handoff: lo que la referencia ponía en `style` en línea, como clases (el handoff dice
   «mismas clases»; el estilo en línea era de la demo). Sin `!important`.
   ========================================================= */
.mc-anios-nav { margin-top: var(--macar-esp-3); display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.mc-anios-nav__etiqueta { font-weight: 600; }
.mc-hito__fotos .mc-hito__foto--logo img { object-fit: contain; background: var(--macar-blanco); }
.mc-media--arriba { align-items: start; }
.mc-media--aire { margin-bottom: var(--macar-esp-4); }
.mc-media--aire-s { margin-bottom: 2rem; } /* 32 px: la referencia (03-cafes-la-caribena.html), que no cae en la escala de espaciado (24 / 48) */
.mc-bloque-aire { margin-bottom: 2rem; } /* 32 px, como la referencia */
.mc-accion { margin-top: var(--macar-esp-3); }
.mc-carril--lista { list-style: none; margin: 0; padding: 0 0 var(--macar-esp-1); }
.mc-carril--lista > li { display: flex; position: relative; } /* position: relative: el «Comprar <nombre>» de .mc-sr es absoluto y, sin un antecesor posicionado DENTRO del carril, no lo recorta y el móvil ensancha la página (medido: 1.928 px de scroll a 390 px) */
.mc-carril--lista .mc-tarjeta { width: 100%; }
.mc-tarjeta--gris { background: var(--macar-fondo); }
.mc-tarjeta__texto--fuerte { font-weight: 700; }

/* Plan 6 · Tarea 7 (accesibilidad). Sin `!important`. */
/* Foco blanco donde el fondo es oscuro (foto de cabecera, franja, banda): el contorno vino medía 1,0-2,2:1 contra la foto (pruebas/diseno-accesibilidad.py) */
.mc-cabecera-pagina :focus-visible, .mc-franja :focus-visible, .mc-banda :focus-visible, .mc-cita :focus-visible { outline-color: var(--macar-blanco); }
/* El resumen del acordeón limita arriba con la cita oscura: el contorno va hacia dentro, sobre el blanco del propio acordeón */
.mc-acordeon > summary:focus-visible { outline-offset: -3px; }
/* Región con desplazamiento enfocable (la pone macar-diseno.js solo donde desplaza) */
.mc-hito__fotos:focus-visible { outline-offset: -3px; }
/* La barra de compra móvil es pegajosa: al enfocar con Tab el control no puede quedar debajo (WCAG 2.4.11) */
html:has(.mc-barra-compra) { scroll-padding-bottom: 6rem; }
/* Objetivo táctil de 44 px sin mover el diseño: el área que recibe el toque crece con un pseudoelemento (enlaces sueltos de 15-23 px de alto) */
.mc-migas a, .mc-tarjeta__pie a, .mc-valoracion a, .mc-hito__cuerpo p > a, .mc .macar-resena__producto { position: relative; }
.mc-migas a::after, .mc-tarjeta__pie a::after, .mc-valoracion a::after, .mc-hito__cuerpo p > a::after, .mc .macar-resena__producto::after {
  content: ""; position: absolute; top: 50%; left: -2px; right: -2px; height: max(100%, 44px); transform: translateY(-50%);
}
.mc .flex-control-thumbs img:focus-visible { outline-offset: -3px; } /* hacia dentro: la tira recorta lo que sale por fuera */

/* Ronda 1 de la Tarea 7 (I7, m2 de la Tarea 4): fotos apiladas antes del JS. Hasta que flexslider arranca, las 3 fotos de una galería salen una debajo de otra, y durante ~80 ms del
   arranque (ya con .flex-viewport pero sin el ancho de la pista) también: la ficha saltaba 0,21 de CLS (medido con ?fotos=1, CPU ×4 y 4G lenta). El contenedor de las diapositivas no
   pasa del alto de UNA foto (relleno incluido: --mc-gal-h) y recorta el resto; por debajo de 1024 px se reserva además el alto de la tira de miniaturas, que aún no existe. */
.mc-galeria { --mc-gal-h: calc(280px + 2 * var(--macar-esp-3)); }
@media (min-width: 768px) { .mc-galeria { --mc-gal-h: calc(400px + 2 * var(--macar-esp-3)); } }
@media (min-width: 1024px) { .mc-galeria { --mc-gal-h: calc(540px + 2 * var(--macar-esp-3)); } }
/* Solo con JS (`html.js`, partes/head.php): sin él no hay flexslider ni tira, las fotos 2..n se verían apiladas y no se recortan (si no, quedarían escondidas con sus enlaces en el orden del Tab: ronda 2, N3). */
html.js .mc-galeria .woocommerce-product-gallery__wrapper { max-height: var(--mc-gal-h); overflow: hidden; }
@media (max-width: 1023px) {
  html.js .mc-galeria--tira:not(:has(.flex-control-thumbs)) { padding-bottom: calc(64px + var(--macar-esp-1)); }
}
/* Sin JS la barra de compra móvil no puede hacer nada (el botón se conecta con macar-diseno.js): fuera (mejora progresiva, handoff). */
html:not(.js) .mc-barra-compra { display: none; }