/**
 * Chrome compartido del diseño 2026 — lo cargan TODAS las páginas nuevas.
 * Fuente, base del body, nav, barra de anuncio, trustbar, footer, tarjeta de
 * producto, encabezado de sección. Transcrito 1:1 de _ds_bundle.js.
 * El gutter maestro del diseño: max(56px, calc(50% - 664px)).
 *
 * Menú en dos niveles (design-2026/menu.js): mega-panel de "Objetivos" y
 * desplegables = mpsc-mega-* ; barra y menú móvil (<= 900px) = mpsc-mov-* .
 * El responsive del chrome vive al final del archivo.
 */

@font-face { font-family: "Creato Display"; src: url("../../design-2026/fonts/creato-display/CreatoDisplay-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Creato Display"; src: url("../../design-2026/fonts/creato-display/CreatoDisplay-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Creato Display"; src: url("../../design-2026/fonts/creato-display/CreatoDisplay-Medium.otf") format("opentype"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Creato Display"; src: url("../../design-2026/fonts/creato-display/CreatoDisplay-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Creato Display"; src: url("../../design-2026/fonts/creato-display/CreatoDisplay-ExtraBold.otf") format("opentype"); font-weight: 800; font-display: swap; }

body.mps-2026 {
	margin: 0;
	background: #FFFFFF;
	font-family: "Creato Display", Figtree, "Segoe UI", Arial, sans-serif;
	color: #111111;
}

.mps-2026 * { box-sizing: border-box; }
.mps-2026 em { font-style: normal; }

/* El tema viejo aplica su fuente (MangoGrotesque) directo a los encabezados y
   filtra alineaciones a los botones: se fuerza lo del diseño en todo. */
.mps-2026 h1, .mps-2026 h2, .mps-2026 h3, .mps-2026 h4, .mps-2026 h5, .mps-2026 h6,
.mps-2026 p, .mps-2026 a, .mps-2026 span, .mps-2026 b, .mps-2026 i, .mps-2026 label,
.mps-2026 button, .mps-2026 input, .mps-2026 select, .mps-2026 blockquote, .mps-2026 figcaption {
	font-family: "Creato Display", Figtree, "Segoe UI", Arial, sans-serif;
}
.mps-2026 h1, .mps-2026 h2, .mps-2026 h3 { margin: 0; color: inherit; font-style: normal; }
.mps-2026 button { text-align: center; }
/* El tema viejo apila en columna a los hijos de <section>: los contenedores en fila lo declaran. */
.mpsc-anuncio, .mpsc-nav, .mpsc-links, .mpsc-nav-der, .mpsc-buscar, .mpsc-carrito, .mpsc-trust-item, .mpsc-mega-drop-hijos,
.mpsc-footer-base, .mpsc-card-pie, .mpsc-banner, .mpsc-btn,
.mpsc-mega-item, .mpsc-mega-obj, .mpsc-mega-linea, .mpsc-mega-catalogo, .mpsc-mega-franja,
.mpsc-mov-cab, .mpsc-mov-buscar, .mpsc-mov-fila-btn, .mpsc-mov-sub a, .mpsc-mov-carrito,
.mpsc-cuenta, .mpsc-footer-legal, .mpsc-mov-pie-fila, .mpsc-mov-cuenta { flex-direction: row; }

/* Solo para lectores de pantalla (p. ej. "7 productos" junto al número del menú). */
.mpsc-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Header y footer del tema viejo, fuera */
.mps-2026 #brx-header, .mps-2026 #brx-footer { display: none !important; }

/* ============ Anuncio + nav (SiteNav) ============ */

.mpsc-sticky { position: sticky; top: 0; z-index: 100; }
body.admin-bar .mpsc-sticky { top: 32px; }

.mpsc-anuncio {
	background: #0B0B0B; color: #9A9A9A;
	font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
	display: flex; justify-content: center; align-items: center; gap: 28px;
	padding: 9px max(56px, calc(50% - 664px));
	border-bottom: 1px solid #1E1E1E;
}
.mpsc-anuncio em { color: #C73D2C; }

.mpsc-nav {
	position: relative; /* ancla del mega-panel, que va a todo el ancho bajo la barra */
	background: #0B0B0B;
	display: flex; align-items: center; gap: 24px;
	padding: 0 max(56px, calc(50% - 664px));
	height: 56px; border-bottom: 1px solid #1E1E1E;
}

.mpsc-logo { display: flex; flex-direction: column; flex: none; line-height: 1; text-decoration: none; }
/* Logo real (PNG 258x132 con transparencia). El tema viejo le pone max-width/height:auto a toda
   <img>: se declara la caja completa. El alto manda; el ancho sale de la proporción. */
.mps-2026 .mpsc-logo-img { display: block; width: auto; height: 34px; max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.mps-2026 .mpsc-logo-img-footer { height: 48px; }
/* Logo tipográfico anterior: lo siguen usando las plantillas que todavía no pasan por logo(). */
.mpsc-logo-mps { font-weight: 800; font-size: 21px; letter-spacing: -0.02em; color: #FFFFFF; }
.mpsc-logo-mps span { color: #C73D2C; }
.mpsc-logo-sub { font-size: 6.5px; font-weight: 600; letter-spacing: 0.4em; color: #FFFFFF; margin-top: 2px; }

/* La fila de enlaces ocupa todo el alto de la barra: así el ítem con submenú no deja
   hueco entre la palabra y su panel (el "puente" del hover). */
.mpsc-links { display: flex; gap: 18px; margin-left: 6px; align-self: stretch; align-items: stretch; }
/* Solo los enlaces de primer nivel: los de los paneles llevan su propio estilo. */
.mpsc-links > a, .mpsc-mega-link {
	color: #FFFFFF; text-decoration: none; white-space: nowrap;
	font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
	border-bottom: 2px solid transparent; padding-bottom: 3px; margin-top: 3px;
	transition: color .15s ease;
}
.mpsc-links > a { align-self: center; }
.mpsc-links > a:hover, .mpsc-mega-link:hover { color: #C73D2C; }
.mpsc-links > a.mpsc-activo, .mpsc-mega-link.mpsc-activo { border-bottom-color: #C73D2C; }
/* La misma palabra en dos largos ("Recomendación personalizada" / "Recomendación"): en barras
   angostas se muestra la corta. Heredan todo del enlace. */
.mpsc-l-largo, .mpsc-l-corto { font: inherit; letter-spacing: inherit; color: inherit; }
.mpsc-l-corto { display: none; }

.mpsc-nav-der { margin-left: auto; display: flex; align-items: center; gap: 16px; min-width: 0; }

/* Luis (24-09): con seis palabras, "Comprar ahora" se partía en dos líneas (el navegador lo encogía a
   99 px). Carrito y CTA ya no se encogen nunca; el que cede espacio es el buscador (hasta 110 px). */
.mpsc-buscar { position: relative; display: flex; align-items: center; margin: 0; flex: 0 1 auto; min-width: 110px; }
.mpsc-buscar svg { position: absolute; left: 10px; pointer-events: none; }
.mpsc-buscar input[type="search"] {
	width: 150px; max-width: 100%; height: 34px; padding: 0 12px 0 32px;
	background: #1E1E1E; border: 1px solid #2A2A2A; border-radius: 2px;
	color: #FFFFFF; font-family: inherit; font-size: 12.5px; font-weight: 500; outline: none;
	transition: width .2s ease, border-color .15s ease;
}
.mpsc-buscar input[type="search"]:focus { width: 230px; border-color: #9A9A9A; }
@media (min-width: 1500px) {
	.mpsc-buscar input[type="search"] { width: 220px; }
	.mpsc-buscar input[type="search"]:focus { width: 290px; }
}

.mpsc-carrito {
	display: flex; align-items: center; gap: 8px; text-decoration: none; flex: none; white-space: nowrap;
	color: #FFFFFF; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
}
.mpsc-carrito span {
	min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
	background: #1E1E1E; color: #FFFFFF; font-size: 11px; font-weight: 700;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background-color .2s ease, transform .2s ease;
}
.mpsc-carrito span.mpsc-cart-on { background: #C73D2C; transform: scale(1.08); }

/* Mi cuenta (0.19.1): solo el ícono (el nombre va en .mpsc-sr y en el title). Con seis palabras la barra
   no tiene ancho para otra (ver el responsive de abajo, v0.17.46): medido el 30-09 con scrollbar de 15 px,
   la barra sobraba 27 px desde 1460 y 6 px a 901. Por eso el ícono mide 18 px y se come parte del espacio
   de sus vecinos con márgenes negativos (queda a 11 px del buscador y a 9 del carrito): cuesta 22 px, no
   34. Entre 901 y 1040 el que cede el resto es el buscador (min-width 84px más abajo). */
.mpsc-cuenta {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 18px; height: 34px; margin: 0 -7px 0 -5px;
	color: #FFFFFF; text-decoration: none; transition: color .15s ease;
}
.mpsc-cuenta svg { display: block; }
.mpsc-cuenta:hover { color: #C73D2C; }
.mpsc-cuenta:focus-visible { outline: 2px solid #C73D2C; outline-offset: 2px; }

.mpsc-cta {
	display: inline-flex; align-items: center; height: 36px; padding: 0 16px; flex: none; white-space: nowrap;
	background: #C73D2C; color: #FFFFFF; text-decoration: none;
	font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
	border-radius: 2px; transition: background-color .15s ease;
}
.mpsc-cta:hover { background: #B23425; color: #FFFFFF; }

/* ============ Menú en dos niveles (design-2026/menu.js) ============ */

/* Paneles en el lenguaje del SiteNav del mockup (panelEl): fondo claro, filo rojo
   arriba y sombra 0 18px 40px. Los colores van en variables para que el tono oscuro
   (filtro PHP mps_2026_mega_tono) sea cambiar una clase, no reescribir el panel.
   Las mini-tarjetas son siempre blancas: las fotos de producto traen fondo blanco. */
.mpsc-nav {
	--mg-bg: #FFFFFF; --mg-fg: #111111; --mg-sub: #8A8782;
	--mg-linea: #E4E2E0; --mg-hover: #F5F4F2; --mg-card-borde: #111111;
}
.mpsc-nav.mpsc-mega-oscuro {
	--mg-bg: #0B0B0B; --mg-fg: #FFFFFF; --mg-sub: #9A9A9A;
	--mg-linea: #1E1E1E; --mg-hover: #161616; --mg-card-borde: #FFFFFF;
}

/* Ítem con submenú: palabra + flecha + panel. Se estira a todo el alto de la barra
   y el panel es su descendiente: el mouse nunca "sale" al bajar de la palabra al panel. */
.mpsc-mega-item { position: relative; display: flex; align-items: center; align-self: stretch; gap: 1px; }
.mpsc-mega-item-full { position: static; } /* el mega se ancla a .mpsc-nav, no a la palabra */

/* La flecha es un botón de verdad (teclado y táctil). El tema viejo le mete padding,
   display:block y text-align:left a todo <button>: se declara todo. */
.mps-2026 .mpsc-mega-flecha {
	-webkit-appearance: none; appearance: none;
	display: inline-flex; flex-direction: row; align-items: center; justify-content: center;
	width: 16px; height: 28px; min-width: 0; min-height: 0; margin: 0 -4px 0 0; padding: 0;
	background: none; border: 0; border-radius: 2px; box-shadow: none;
	color: #FFFFFF; cursor: pointer; line-height: 1; text-align: center;
	transition: color .15s ease;
}
.mps-2026 .mpsc-mega-flecha:hover { background: none; }
.mpsc-mega-flecha svg { display: block; opacity: 0.75; transition: transform .2s ease; }
.mpsc-mega-abierto > .mpsc-mega-flecha svg { transform: rotate(180deg); }
.mpsc-mega-item:hover > .mpsc-mega-link, .mpsc-mega-abierto > .mpsc-mega-link,
.mps-2026 .mpsc-mega-item:hover > .mpsc-mega-flecha, .mps-2026 .mpsc-mega-abierto > .mpsc-mega-flecha { color: #C73D2C; }
.mpsc-mega-link:focus-visible, .mpsc-mega-flecha:focus-visible, .mpsc-links > a:focus-visible { outline: 2px solid #C73D2C; outline-offset: 3px; }

/* Panel (base común del mega y de los desplegables).
   Doble clase a propósito: el sitio carga en el frontend la hoja wp-components de WordPress,
   que trae `[role="region"] { position: relative }` con la MISMA especificidad que una clase
   sola y llega después → ganaba por orden y el panel se pintaba dentro de la barra (QA 18-09). */
.mpsc-nav .mpsc-mega-panel { position: absolute; }
.mpsc-mega-panel {
	display: none; position: absolute; top: 100%; z-index: 120;
	background: var(--mg-bg); color: var(--mg-fg);
	border-top: 3px solid #C73D2C; box-shadow: 0 18px 40px rgba(0,0,0,0.22);
	font-size: 13px; line-height: 1.3; text-align: left;
}
.mpsc-mega-abierto > .mpsc-mega-panel,
.mpsc-nav:not(.mpsc-mega-js) .mpsc-mega-item:hover > .mpsc-mega-panel,
.mpsc-nav:not(.mpsc-mega-js) .mpsc-mega-item:focus-within > .mpsc-mega-panel { display: block; animation: mpsc-mega-in .18s ease both; }
@keyframes mpsc-mega-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mpsc-mega-panel a:focus-visible { outline: 2px solid #C73D2C; outline-offset: 2px; }

/* ---- Desplegable chico (Nosotros, Embajadores): medidas de panelEl ---- */
/* width:max-content — un absoluto dentro de un ítem angosto se encogería al ancho de la palabra. */
.mpsc-mega-drop { left: -14px; width: max-content; max-width: 360px; padding: 12px; border-radius: 0 0 4px 4px; }
.mpsc-mega-drop-lista { display: grid; grid-template-columns: minmax(190px, max-content); gap: 2px 6px; align-content: start; }
.mpsc-mega-drop-item {
	display: flex; flex-direction: column; align-items: stretch; gap: 3px;
	padding: 9px 10px; border-radius: 3px; text-decoration: none; color: var(--mg-fg);
	transition: background-color .15s ease;
}
.mpsc-mega-drop-item:hover, .mpsc-mega-drop-item:focus-visible { background: var(--mg-hover); color: var(--mg-fg); }
.mpsc-mega-drop-item b { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.mpsc-mega-drop-item i { font-style: normal; font-size: 11.5px; font-weight: 400; line-height: 1.4; color: var(--mg-sub); }
.mpsc-mega-drop-item.mpsc-mega-destacado, .mpsc-mega-drop-item.mpsc-mega-destacado:hover { color: #C73D2C; }
.mpsc-mega-drop-hijos { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 10px 10px; }
.mpsc-mega-drop-hijos a {
	padding: 5px 10px; border: 1px solid var(--mg-linea); border-radius: 999px;
	font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
	color: var(--mg-sub); text-decoration: none; transition: color .15s ease, border-color .15s ease;
}
.mpsc-mega-drop-hijos a:hover, .mpsc-mega-drop-hijos a:focus-visible { color: #C73D2C; border-color: #C73D2C; }

/* ---- Mega-panel de Objetivos: objetivo | destacados | línea + franja ---- */
.mpsc-mega-full { left: 0; right: 0; max-height: calc(100vh - 110px); overflow-y: auto; }
.mpsc-mega-cuerpo {
	display: grid; align-items: stretch;
	grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(230px, 280px);
	/* rótulo + 4 objetivos + un resto elástico: los grupos y las líneas cruzan todas las filas */
	grid-template-rows: repeat(5, auto) 1fr;
	padding: 0 max(56px, calc(50% - 664px));
}
.mpsc-mega-eyebrow { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mg-sub); }
.mpsc-mega-eyebrow em { color: #C73D2C; margin-right: 7px; }
.mpsc-mega-eyebrow-obj { grid-column: 1; padding: 28px 28px 14px 0; }

.mpsc-mega-obj {
	grid-column: 1; display: flex; align-items: baseline; gap: 12px;
	padding: 13px 22px 13px 0; border-top: 1px solid var(--mg-linea);
	text-decoration: none; color: var(--mg-fg);
}
.mpsc-mega-obj:last-of-type { border-bottom: 1px solid var(--mg-linea); }
.mpsc-mega-obj:hover { color: var(--mg-fg); }
/* El objetivo activo se "engancha" a la zona central con un filo rojo sobre la divisoria. */
.mpsc-mega-obj-on { box-shadow: inset -3px 0 0 #C73D2C; }
.mpsc-mega-obj-num { min-width: 18px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: #C73D2C; }
.mpsc-mega-obj-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 1; min-width: 0; }
/* Mismo gesto tipográfico del menú mobile del mockup: liviana en reposo, 800 y roja al activarse. */
.mpsc-mega-obj-txt b { font-size: 20px; line-height: 1.05; font-weight: 300; text-transform: uppercase; letter-spacing: -0.02em; transition: color .15s ease; }
.mpsc-mega-obj-txt i { font-style: normal; font-size: 11.5px; font-weight: 400; line-height: 1.4; color: var(--mg-sub); }
.mpsc-mega-obj-on .mpsc-mega-obj-txt b, .mpsc-mega-obj:hover .mpsc-mega-obj-txt b { color: #C73D2C; }
.mpsc-mega-obj-on .mpsc-mega-obj-txt b { font-weight: 800; }
.mpsc-mega-obj-n { min-width: 20px; text-align: right; font-size: 11px; font-weight: 700; color: var(--mg-sub); }

.mpsc-mega-grupo {
	grid-column: 2; grid-row: 1 / -1; min-width: 0;
	display: flex; flex-direction: column; align-items: stretch; gap: 16px;
	padding: 28px; border-left: 1px solid var(--mg-linea); border-right: 1px solid var(--mg-linea);
}
.mpsc-mega-grupo[hidden] { display: none; }
.mpsc-mega-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

/* Mini-tarjeta = ProductCard compacta (mismo borde, radio y realce al pasar el mouse) */
.mpsc-mega-card {
	display: flex; flex-direction: column; align-items: stretch; min-width: 0;
	background: #FFFFFF; border: 1px solid #E4E2E0; border-radius: 6px; overflow: hidden;
	text-decoration: none; color: #111111; transition: border-color .15s ease;
}
.mpsc-mega-card:hover, .mpsc-mega-card:focus-visible { border-color: var(--mg-card-borde); color: #111111; }
.mpsc-mega-card-img { display: block; height: 132px; background: #FFFFFF; }
.mpsc-mega-card-img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; padding: 6px; transition: transform .25s ease; }
.mpsc-mega-card:hover .mpsc-mega-card-img img { transform: scale(1.04); }
.mpsc-mega-card-info { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; flex: 1; padding: 10px 12px 12px; border-top: 1px solid #F0EFED; }
.mpsc-mega-card-cat { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: #8A8782; }
.mpsc-mega-card-nombre { font-size: 13px; font-weight: 700; line-height: 1.25; text-transform: uppercase; letter-spacing: -0.01em; color: #111111; overflow-wrap: anywhere; }
.mpsc-mega-card-precio { margin-top: auto; padding-top: 4px; font-size: 13.5px; font-weight: 700; color: #C73D2C; white-space: nowrap; }
.mpsc-mega-card-agotada .mpsc-mega-card-img img { filter: grayscale(1); opacity: 0.5; transform: none !important; }
.mpsc-mega-card-agotada .mpsc-mega-card-precio { color: #8A8782; }

.mpsc-mega-vertodo {
	align-self: flex-start; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
	color: var(--mg-fg); text-decoration: none; border-bottom: 2px solid #C73D2C; padding-bottom: 3px;
	transition: color .15s ease;
}
.mpsc-mega-vertodo:hover { color: #C73D2C; }
.mpsc-mega-vertodo em, .mpsc-mega-catalogo em, .mpsc-mega-franja em { color: #C73D2C; margin-left: 6px; }

.mpsc-mega-lineas { grid-column: 3; grid-row: 1 / -1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; padding: 28px 0 28px 28px; }
.mpsc-mega-lineas .mpsc-mega-eyebrow { padding-bottom: 14px; }
.mpsc-mega-linea, .mpsc-mega-catalogo {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	padding: 9px 0; border-top: 1px solid var(--mg-linea);
	font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
	text-decoration: none; color: var(--mg-fg); transition: color .15s ease;
}
.mpsc-mega-linea:hover { color: #C73D2C; }
.mpsc-mega-linea-n { font-size: 11px; font-weight: 700; color: var(--mg-sub); }
.mpsc-mega-catalogo { margin-top: auto; padding: 14px 0 0; color: #C73D2C; }
.mpsc-mega-catalogo:hover { color: #B23425; }

.mpsc-mega-franja {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 14px max(56px, calc(50% - 664px));
	background: var(--mg-hover); border-top: 1px solid var(--mg-linea);
	text-decoration: none; color: var(--mg-fg);
}
.mpsc-mega-franja:hover { color: var(--mg-fg); }
.mpsc-mega-franja span { font-size: 12.5px; font-weight: 500; color: var(--mg-sub); }
.mpsc-mega-franja b { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; transition: color .15s ease; }
.mpsc-mega-franja:hover b { color: #C73D2C; }

/* Piezas que solo existen en móvil: fuera en escritorio */
.mps-2026 .mpsc-mov-btn, .mpsc-mov-accion, .mpsc-mov-busca-fila, .mpsc-mov-panel, .mps-2026 .mpsc-lupa { display: none; }

/* ============ Botones del design system (Button) ============ */

.mpsc-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	height: 54px; padding: 0 28px; border-radius: 2px; border: 1.5px solid transparent;
	font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
	text-decoration: none; cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.mpsc-btn-primary { background: #C73D2C; color: #FFFFFF; }
.mpsc-btn-primary:hover { background: #B23425; color: #FFFFFF; }
.mpsc-btn-outline-dark { background: transparent; color: #111111; border-color: #111111; }
.mpsc-btn-outline-dark:hover { background: #111111; color: #FFFFFF; }
.mpsc-btn-outline-light { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,0.45); }
.mpsc-btn-outline-light:hover { background: #FFFFFF; color: #111111; border-color: #FFFFFF; }

/* Enlace con subrayado rojo (los "Ver todo…" del diseño) */
.mpsc-link-linea {
	font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
	color: #111111; text-decoration: none; border-bottom: 2px solid #C73D2C; padding-bottom: 3px;
}
.mpsc-link-linea:hover { color: #C73D2C; }

/* ============ Banner de certificaciones (antes TrustBar) ============ */

/* Reunión 18-09: cuatro compromisos, cada uno con su símbolo. Banda clara: bajo el hero a sangre
   (oscuro) hace de respiro, y antes del footer lo separa del contenido. */
.mpsc-trust {
	background: #F5F4F2; border-top: 1px solid #E4E2E0; border-bottom: 1px solid #E4E2E0;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	padding: 0 max(56px, calc(50% - 664px));
}
.mpsc-trust-item {
	display: flex; align-items: center; gap: 16px; min-width: 0;
	padding: 28px 24px; border-left: 1px solid #E4E2E0;
}
.mpsc-trust-item:first-child { border-left: none; padding-left: 0; }
.mpsc-trust-item:last-child { padding-right: 0; }
.mpsc-trust-icono {
	flex: none; width: 56px; height: 56px; border-radius: 50%;
	display: flex; flex-direction: row; align-items: center; justify-content: center;
	background: #FFFFFF; border: 1px solid #E4E2E0; color: #C73D2C;
}
.mpsc-trust-icono svg { display: block; }
.mpsc-trust-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.mpsc-trust-txt b { font-size: 13px; line-height: 1.2; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #111111; }
.mpsc-trust-txt i { font-style: normal; font-size: 12.5px; line-height: 1.35; font-weight: 400; color: #8A8782; }

/* ============ Footer (SiteFooter) ============ */

.mpsc-footer {
	background: #0B0B0B; border-top: 3px solid #C73D2C; color: #9A9A9A;
	padding: 56px max(56px, calc(50% - 664px));
	display: flex; flex-direction: column; gap: 44px;
}
.mpsc-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; align-items: start; }
.mpsc-footer-marca { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; line-height: 1; }
.mpsc-logo-footer { font-size: 24px; }
.mpsc-footer-marca p { margin: 10px 0 0; font-size: 13px; line-height: 1.6; max-width: 300px; }
.mpsc-footer-col { display: flex; flex-direction: column; gap: 10px; }
.mpsc-footer-col span:first-child { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #FFFFFF; }
.mpsc-footer-col a { color: #9A9A9A; text-decoration: none; font-size: 13px; transition: color .15s ease; }
.mpsc-footer-col a:hover { color: #FFFFFF; }
.mpsc-footer-base { border-top: 1px solid #1E1E1E; padding-top: 20px; display: flex; justify-content: space-between; font-size: 12px; }
/* Legales (0.19.1) entre el © y "Never Surrender". wrap + gap: si en 901–1000 px no caben en una fila,
   bajan a la siguiente en vez de apretarse; cuando caben, la franja se ve igual que antes. */
.mpsc-footer-base { flex-wrap: wrap; gap: 10px 24px; }
.mpsc-footer-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.mpsc-footer-legal a { color: #9A9A9A; text-decoration: none; font-size: 12px; transition: color .15s ease; }
.mpsc-footer-legal a:hover { color: #FFFFFF; }
.mpsc-footer-legal a:focus-visible { outline: 2px solid #C73D2C; outline-offset: 2px; }
.mpsc-footer-ns { font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }
.mpsc-footer-ns em { color: #C73D2C; }

/* ============ ProductCard ============ */

.mpsc-card {
	background: #FFFFFF; border: 1px solid #E4E2E0; border-radius: 6px; overflow: hidden;
	transition: border-color .15s ease; display: flex; flex-direction: column;
}
.mpsc-card:hover { border-color: #111111; box-shadow: 0 10px 28px rgba(17,17,17,0.08); }
.mpsc-card { transition: border-color .15s ease, box-shadow .25s ease; }
.mpsc-card-img { position: relative; display: block; background: #FFFFFF; height: 250px; }
.mpsc-card-img img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 12px; transition: transform .25s ease; }
.mpsc-card:hover .mpsc-card-img img { transform: scale(1.04); }
.mpsc-card-agotada .mpsc-card-img img { filter: grayscale(1); opacity: 0.5; transform: none !important; }
.mpsc-card-badge {
	position: absolute; top: 12px; left: 12px; z-index: 1;
	background: #C73D2C; color: #FFFFFF; font-size: 10px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.1em; padding: 5px 9px; border-radius: 999px;
}
.mpsc-card-badge-gris { background: #F5F4F2; color: #8A8782; border: 1px solid #E4E2E0; }
.mpsc-card-info { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; border-top: 1px solid #F0EFED; }
.mpsc-card-cat { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: #8A8782; }
.mpsc-card-pres { display: none; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: #8A8782; }
.mpsc-card-nombre { font-size: 16px; font-weight: 700; line-height: 1.25; color: #111111; text-decoration: none; letter-spacing: -0.01em; text-transform: uppercase; }
.mpsc-card-pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 6px; flex-wrap: wrap; }
.mpsc-card-precio { font-size: 17px; font-weight: 700; color: #C73D2C; white-space: nowrap; }
.mpsc-card-precio del { color: #8A8782; font-weight: 400; margin-right: 6px; }
.mpsc-card-precio ins { text-decoration: none; }
.mpsc-card-agotada .mpsc-card-precio { color: #8A8782; }
.mpsc-card-btn {
	height: 40px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
	border-radius: 2px; border: 1.5px solid #111111; background: transparent; color: #111111;
	text-decoration: none; flex: 1 1 auto; cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.mpsc-card-btn:hover { background: #111111; color: #FFFFFF; }
.mpsc-card-btn-off { border-color: #E4E2E0; color: #B5B2AD; cursor: not-allowed; }
.mpsc-card-btn-off:hover { background: transparent; color: #B5B2AD; }

/* ============ SectionHeading + eyebrow ============ */

.mpsc-heading { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.mpsc-heading h2 { margin: 0; font-size: 42px; line-height: 0.92; letter-spacing: -0.02em; text-transform: uppercase; color: #111111; }
.mpsc-heading h2 b { font-weight: 700; }
.mpsc-heading h2 i { font-weight: 300; font-style: normal; }
.mpsc-heading-light h2 { color: #FFFFFF; }
.mpsc-heading-accent h2 i { color: #C73D2C; }

.mpsc-eyebrow, .mpsp-mini-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #C73D2C; }

/* ============ PromoBanner ============ */

.mpsc-banner {
	color: #FFFFFF; display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
	padding: 26px max(56px, calc(50% - 664px));
}
.mpsc-banner-rojo { background: #C73D2C; }
.mpsc-banner-negro { background: #0B0B0B; }
.mpsc-banner-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; }
.mpsc-banner-rojo .mpsc-banner-eyebrow { color: #FFD9D3; }
.mpsc-banner-negro .mpsc-banner-eyebrow { color: #C73D2C; }
.mpsc-banner-titulo { font-size: 26px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1; }
.mpsc-banner-detalle { font-size: 13px; font-weight: 500; }
.mpsc-banner-rojo .mpsc-banner-detalle { color: #FFE4DF; }
.mpsc-banner-negro .mpsc-banner-detalle { color: #9A9A9A; }
.mpsc-banner a {
	margin-left: auto; display: inline-flex; align-items: center; height: 44px; padding: 0 22px;
	background: #FFFFFF; color: #111111; text-decoration: none; border-radius: 2px;
	font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
	transition: background-color .15s ease;
}
.mpsc-banner a:hover { background: #F5F4F2; color: #111111; }

/* Precio en oferta (el <del>/<ins> que arma Woo): tachado gris, vigente sin subrayar */
.mps-2026 del { color: #8A8782; font-weight: 400; margin-right: 6px; }
.mps-2026 ins { text-decoration: none; }

/* Botones "Agregar" por AJAX: estados que pone WooCommerce (loading / added) */
.mps-2026 .add_to_cart_button.loading { opacity: 0.55; pointer-events: none; }
.mps-2026 .add_to_cart_button.mpsc-agregado,
.mps-2026 .add_to_cart_button.mpsc-agregado:hover { background: #C73D2C; border-color: #C73D2C; color: #FFFFFF; }
.mps-2026 a.added_to_cart { display: none !important; } /* el "Ver carrito" que Woo inyecta al lado */

/* Avisos nativos de Woo, fuera del diseño */
.mps-2026 .woocommerce-message, .mps-2026 .woocommerce-error { display: none; }

/* ============ Responsive del chrome ============ */

/* Entre 901 y 1180px la barra de escritorio no cabe entera: se aprieta antes de
   pasar a móvil (primero el buscador y los espacios; luego se va el CTA, que ya
   está en el hero y en el menú). */
/* Seis palabras (tres largas, con "Beneficios MPS") + buscador + carrito + CTA: medido el 24-09, las
   largas con el CTA entero (150 px) piden ~1300 px y la barra tiene 1328 útiles desde 1455 px. Por
   debajo de 1460 px las palabras largas pasan a su versión corta y el CTA sigue visible hasta 1231 px
   (antes a 1366 px la barra se salía 93 px y la página tenía scroll horizontal). */
@media (max-width: 1459px) {
	.mpsc-l-largo { display: none; }
	.mpsc-l-corto { display: inline; }
}
@media (max-width: 1230px) {
	.mpsc-nav .mpsc-cta { display: none; }
}
@media (max-width: 1240px) {
	.mpsc-trust-item { padding: 24px 16px; gap: 12px; }
	.mpsc-trust-icono { width: 48px; height: 48px; }
}
@media (max-width: 1180px) {
	.mpsc-nav { gap: 20px; }
	.mpsc-links { gap: 16px; margin-left: 4px; }
	.mpsc-buscar input[type="search"] { width: 130px; }
	.mpsc-buscar input[type="search"]:focus { width: 190px; }
	.mpsc-mega-cuerpo { grid-template-columns: 224px minmax(0, 1fr) 200px; }
	.mpsc-mega-grupo { padding: 24px 20px; }
	.mpsc-mega-lineas { padding-left: 20px; }
	.mpsc-mega-cards { gap: 10px; }
	.mpsc-mega-card-img { height: 112px; }
	.mpsc-mega-obj-txt b { font-size: 18px; }
}
@media (max-width: 1060px) {
	.mpsc-nav .mpsc-cta { display: none; }
}
/* Con seis palabras cortas, entre 901 y ~1020px la barra volvía a pasar de 100vw: menos gap y buscador más corto. */
@media (max-width: 1040px) {
	.mpsc-links { gap: 12px; }
	.mpsc-buscar input[type="search"] { width: 110px; }
	/* Mi cuenta (0.19.1): a 901 y a 1001 px faltaban 16 y 12 px; el buscador baja a ~94 px solo en esos
	   bordes (a 960 o 1020 px sigue en 110). */
	.mpsc-buscar { min-width: 84px; }
	.mpsc-buscar input[type="search"] { padding-right: 6px; }
}
/* Entre 901 y 1000 px las seis palabras cortas + buscador + carrito seguían sin caber (hasta 76 px
   de scroll horizontal a 901 px): margen lateral y espacios más cortos solo en ese tramo. */
@media (min-width: 901px) and (max-width: 1000px) {
	.mpsc-nav { padding: 0 24px; gap: 14px; }
	.mpsc-links { gap: 8px; }
	.mpsc-buscar { min-width: 84px; } /* antes 100px; ver Mi cuenta en @media (max-width: 1040px) */
}

/* Táctil ancho (iPad horizontal): ahí no hay hover y el clic en la palabra navega, así que la
   flecha es el ÚNICO camino a los desplegables. Se le da un área tocable real (WCAG 2.5.8)
   sin mover el diseño de escritorio con mouse. El SVG sigue centrado. */
@media (pointer: coarse) {
	.mps-2026 .mpsc-mega-flecha { width: 32px; height: 44px; margin: 0 -8px 0 0; }
	.mpsc-mega-item { gap: 0; }
	/* Mi cuenta: área tocable de 32x44 con el mismo costo de ancho (32 − 26 de márgenes = 18 − 12). */
	.mpsc-cuenta { width: 32px; height: 44px; margin: 0 -14px 0 -12px; }
}

/* ---- <= 900px: barra móvil de los mockups mobile (hamburguesa · logo · carrito) ---- */
@media (max-width: 900px) {
	/* Los mockups mobile no llevan barra de anuncio: sus tres datos ya viven en la trustbar. */
	.mpsc-anuncio { display: none; }

	.mpsc-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0; padding: 0 16px; }
	.mpsc-nav .mpsc-links, .mpsc-nav .mpsc-buscar, .mpsc-nav .mpsc-cta { display: none; }
	/* Mi cuenta en móvil vive en el menú (pie, junto al carrito): en la barra descentraba el logo. */
	.mpsc-nav .mpsc-cuenta { display: none; }

	.mps-2026 .mpsc-mov-btn {
		-webkit-appearance: none; appearance: none; justify-self: start;
		display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px;
		width: auto; min-width: 0; min-height: 0; margin: 0; padding: 8px 8px 8px 0;
		background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; line-height: 1; text-align: left;
	}
	.mps-2026 .mpsc-mov-btn:hover { background: none; }
	.mpsc-mov-btn span { display: block; width: 20px; height: 2px; background: #FFFFFF; }
	.mpsc-mov-btn span:nth-child(2) { width: 14px; background: #C73D2C; }
	.mpsc-mov-btn:focus-visible, .mpsc-mov-cerrar:focus-visible, .mpsc-mov-panel a:focus-visible, .mpsc-mov-fila-btn:focus-visible { outline: 2px solid #C73D2C; outline-offset: 2px; }

	.mpsc-nav .mpsc-logo { align-items: center; }
	.mps-2026 .mpsc-nav .mpsc-logo-img { height: 32px; }
	.mpsc-nav .mpsc-logo-mps { font-size: 22px; }
	.mpsc-nav .mpsc-logo-sub { font-size: 7px; letter-spacing: 0.42em; }

	.mpsc-nav-der { margin-left: 0; justify-self: end; gap: 0; }
	.mpsc-carrito { gap: 6px; padding: 8px 0 8px 8px; font-size: 11px; letter-spacing: 0.06em; }
	.mpsc-carrito span { min-width: 18px; height: 18px; padding: 0 4px; font-size: 10px; }

	/* Carrito y Embajadores: a la derecha va una acción en vez del carrito (mockups mobile). */
	.mpsc-nav-der-accion .mpsc-carrito { display: none; }
	.mpsc-mov-accion {
		display: inline-block; padding: 8px 0 2px; color: #FFFFFF; text-decoration: none;
		font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
		border-bottom: 2px solid transparent;
	}
	.mpsc-mov-accion:hover { color: #FFFFFF; }
	.mpsc-mov-accion-linea { border-bottom-color: #C73D2C; }

	/* Búsqueda: una lupa en la barra abre la fila de búsqueda (21-09). Antes la fila estaba siempre
	   abierta en Home y Tienda y, junto con la barra fija inferior, le comía ~130px a cada pantalla. */
	.mps-2026 .mpsc-lupa {
		-webkit-appearance: none; appearance: none;
		display: inline-flex; flex-direction: row; align-items: center; justify-content: center;
		width: 40px; height: 40px; min-width: 0; min-height: 0; margin: 0 2px 0 0; padding: 0;
		background: none; border: 0; border-radius: 2px; box-shadow: none; color: #FFFFFF; cursor: pointer; line-height: 1;
	}
	.mps-2026 .mpsc-lupa:hover { background: none; color: #FFFFFF; }
	.mps-2026 .mpsc-lupa[aria-expanded="true"] { color: #C73D2C; }
	.mps-2026 .mpsc-lupa:focus-visible { outline: 2px solid #C73D2C !important; outline-offset: 1px; }
	/* Carrito y Embajadores cambian el carrito por una acción: ahí la búsqueda queda en el menú. */
	.mpsc-nav-der-accion .mpsc-lupa { display: none; }
	.mpsc-mov-busca-fila.mpsc-abierta {
		display: block; background: #0B0B0B; padding: 0 16px 10px; border-bottom: 1px solid #1E1E1E;
		animation: mpsc-busca-baja .18s ease both;
	}
	/* Solo un desliz corto, sin partir de opacity 0: si el navegador congela las animaciones (pestaña en
	   segundo plano, ahorro de batería) la fila igual se ve. */
	@keyframes mpsc-busca-baja { from { transform: translateY(-6px); } to { transform: none; } }

	.mpsc-mov-buscar { position: relative; display: flex; align-items: center; margin: 0; width: 100%; }
	.mpsc-mov-buscar svg { position: absolute; left: 12px; top: 50%; margin-top: -7.5px; pointer-events: none; }
	.mps-2026 .mpsc-mov-buscar input[type="search"] {
		-webkit-appearance: none; appearance: none;
		width: 100%; height: 40px; margin: 0; padding: 0 12px 0 36px;
		background: #1E1E1E; border: 1px solid #2A2A2A; border-radius: 2px; box-shadow: none;
		/* El mockup dice 13px; con menos de 16px iOS hace zoom a la página al enfocar. */
		color: #FFFFFF; font-size: 16px; font-weight: 500; line-height: normal; outline: none;
	}
	.mps-2026 .mpsc-mov-buscar input[type="search"]:focus { border-color: #9A9A9A; }
	.mpsc-mov-buscar-panel { margin-bottom: 18px; }

	/* ---- Menú a pantalla completa (mobilePanel de menu.js) ---- */
	html.mpsc-mov-lock, html.mpsc-mov-lock body { overflow: hidden; }
	/* La burbuja de chat del sitio (wp-social-reviews) es fixed con z-index 9999 y 99999 !important
	   al activarse: subir el z-index del menú no alcanza y taparía el CTA. Se oculta solo mientras
	   el menú está abierto. */
	html.mpsc-mov-lock .wpsr-fm-chat-wrapper { display: none !important; }

	.mpsc-mov-panel {
		position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 300;
		display: flex; flex-direction: column; align-items: stretch;
		padding: 18px 22px 26px; overflow-y: auto; overscroll-behavior: contain;
		background-color: #0B0B0B; background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.2px); background-size: 3px 3px;
		color: #FFFFFF;
		/* Cerrado: fuera de pantalla E invisible, para que sus enlaces no reciban foco. */
		transform: translateY(-102%); visibility: hidden;
		transition: transform .42s cubic-bezier(.2,.7,.25,1), visibility 0s linear .42s;
	}
	.mpsc-mov-panel.mpsc-mov-abierto { transform: none; visibility: visible; transition-delay: 0s; }

	.mpsc-mov-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex: none; }
	.mpsc-mov-logo { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; text-decoration: none; }
	.mps-2026 .mpsc-mov-logo .mpsc-logo-img { height: 34px; }
	.mpsc-mov-logo .mpsc-logo-mps { font-size: 22px; }
	.mpsc-mov-logo .mpsc-logo-sub { font-size: 7px; letter-spacing: 0.42em; }
	.mps-2026 .mpsc-mov-cerrar {
		-webkit-appearance: none; appearance: none;
		display: flex; flex-direction: row; align-items: center; justify-content: center;
		width: 40px; height: 40px; min-width: 0; min-height: 0; margin: 0; padding: 0;
		background: rgba(255,255,255,0.06); border: 1px solid #1E1E1E; border-radius: 2px; box-shadow: none;
		color: #FFFFFF; font-size: 18px; font-weight: 700; line-height: 1; text-align: center; cursor: pointer;
	}

	.mpsc-mov-pista {
		display: block; flex: none; padding-bottom: 8px; border-bottom: 1px solid #1E1E1E;
		font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #9A9A9A;
	}
	.mpsc-mov-filas { display: flex; flex-direction: column; align-items: stretch; flex: none; }

	/* Entrada escalonada de las filas, como en el mockup (0.06s por fila + 0.12s). */
	.mpsc-mov-fila {
		border-bottom: 1px solid #1E1E1E; transform: translateY(10px); opacity: 0;
		transition: transform .4s ease, opacity .4s ease;
		transition-delay: calc(var(--i, 0) * 0.06s + 0.12s);
	}
	.mpsc-mov-abierto .mpsc-mov-fila { transform: none; opacity: 1; }

	.mps-2026 .mpsc-mov-fila-btn {
		-webkit-appearance: none; appearance: none;
		display: flex; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 10px;
		width: 100%; min-height: 0; margin: 0; padding: 14px 0;
		background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer;
		/* 26px y no los 30 del mockup: ahora son cinco filas y dos son largas ("Recomendación
		   personalizada" parte en dos líneas a 375px; con 30px partía también "Preguntas frecuentes"). */
		color: #FFFFFF; font-size: 26px; line-height: 1.08; font-weight: 300;
		text-transform: uppercase; letter-spacing: -0.02em; text-align: left; text-decoration: none;
	}
	.mps-2026 .mpsc-mov-fila-btn:hover { background: none; color: #FFFFFF; }
	.mps-2026 .mpsc-mov-fila-activa > .mpsc-mov-fila-btn,
	.mps-2026 .mpsc-mov-fila-btn[aria-expanded="true"] { color: #C73D2C; }
	.mps-2026 .mpsc-mov-fila-btn[aria-expanded="true"] { font-weight: 800; }
	.mpsc-mov-num { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: #C73D2C; }
	.mpsc-mov-txt { font-size: inherit; font-weight: inherit; min-width: 0; overflow-wrap: anywhere; }
	.mpsc-mov-mas { margin-left: auto; display: inline-block; font-size: 18px; font-weight: 300; color: #9A9A9A; transition: transform .25s ease; }
	.mpsc-mov-fila-btn[aria-expanded="true"] .mpsc-mov-mas { transform: rotate(45deg); }
	.mpsc-mov-ir { color: #C73D2C; }

	.mpsc-mov-sub { display: flex; flex-direction: column; align-items: stretch; padding: 0 0 14px 30px; }
	.mpsc-mov-sub[hidden] { display: none; }
	.mpsc-mov-sub a {
		display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
		padding: 10px 0; border-bottom: 1px solid #151515;
		color: #D6D4D1; text-decoration: none; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
	}
	.mpsc-mov-sub a:first-child { color: #FFFFFF; font-weight: 800; }
	/* Rótulo de grupo dentro de un submenú ("Por objetivo", "Por línea"). */
	.mpsc-mov-sub-tit { display: block; padding: 16px 0 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #9A9A9A; }
	.mpsc-mov-sub a:last-child { border-bottom: 0; }
	.mpsc-mov-sub a:hover { color: #FFFFFF; }
	.mpsc-mov-sub a span { font-size: inherit; font-weight: inherit; }
	.mpsc-mov-sub a em { color: #C73D2C; }

	.mpsc-mov-pie { margin-top: auto; padding-top: 20px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; flex: none; }
	/* Mi cuenta + Carrito en una fila, mitad y mitad (0.19.1). Sin cuenta, el carrito ocupa la fila entera. */
	.mpsc-mov-pie-fila { display: flex; align-items: stretch; gap: 10px; }
	.mpsc-mov-pie-fila > a { flex: 1 1 0; min-width: 0; }
	.mpsc-mov-cuenta, .mpsc-mov-carrito {
		display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px;
		border: 1px solid #2A2A2A; border-radius: 2px; background: rgba(255,255,255,0.03);
		color: #FFFFFF; text-decoration: none; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
	}
	.mpsc-mov-cuenta:hover, .mpsc-mov-carrito:hover { color: #FFFFFF; border-color: #9A9A9A; }
	.mpsc-mov-cuenta svg { display: block; flex: none; }
	.mpsc-mov-carrito span {
		min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
		display: inline-flex; align-items: center; justify-content: center;
		background: #1E1E1E; color: #FFFFFF; font-size: 11px; font-weight: 700;
		transition: background-color .2s ease;
	}
	.mpsc-mov-carrito span.mpsc-cart-on { background: #C73D2C; }
	.mpsc-mov-cta {
		display: flex; flex-direction: row; align-items: center; justify-content: center; height: 52px;
		background: #C73D2C; color: #FFFFFF; text-decoration: none; border-radius: 2px;
		font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
	}
	.mpsc-mov-cta:hover { background: #B23425; color: #FFFFFF; }
	.mpsc-mov-ns { display: block; text-align: center; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #9A9A9A; }
	.mpsc-mov-ns em { color: #C73D2C; }

	/* Con sesión iniciada, la barra de admin de WordPress tapa la cabecera del menú. */
	body.admin-bar .mpsc-mov-panel { top: 32px; }

	/* ---- Lo mínimo para que el resto del chrome no desborde a 375px ---- */
	/* Trustbar compacta (21-09): ícono a la izquierda + título, como en escritorio. Sin círculos,
	   divisores en cruz ni subtexto baja de ~297px a ~150px. Íconos en negro: el rojo queda para el
	   CTA y los precios (si gerencia los quiere rojos, basta con quitar el color de .mpsc-trust-icono).
	   Ya no hay reglas :nth-child de bordes: devolverían la cruz. */
	.mpsc-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; padding: 32px 18px; }
	.mpsc-trust-item, .mpsc-trust-item:first-child, .mpsc-trust-item:last-child {
		flex-direction: row; align-items: center; gap: 10px; padding: 0; border: 0; text-align: left;
	}
	.mpsc-trust-icono { width: 28px; height: 28px; background: none; border: 0; border-radius: 0; color: #111111; }
	.mpsc-trust-icono svg { width: 24px; height: 24px; }
	.mpsc-trust-txt { align-items: flex-start; gap: 0; }
	.mpsc-trust-txt b { font-size: 11.5px; line-height: 1.3; letter-spacing: 0.05em; }
	.mpsc-trust-txt i { display: none; }

	.mps-2026 .mpsc-logo-img-footer { height: 44px; }

	/* Footer: Explora (6 enlaces, 3.er hijo tras marca y Objetivos) ocupa 2 filas a la derecha y
	   Contacto sube bajo Objetivos: se va la 3.ª fila con la columna derecha vacía. El DOM y el orden
	   de tabulación no cambian. Enlaces de 44px de alto para el dedo; el alto total queda como antes.
	   Los padding-bottom por página (Producto, Tienda, Carrito) siguen ganando por especificidad. */
	.mpsc-footer { padding: 48px 18px 40px; gap: 32px; }
	.mpsc-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
	.mpsc-footer-marca { grid-column: 1 / -1; }
	.mpsc-footer-grid > .mpsc-footer-col:nth-child(3) { grid-row: span 2; }
	.mpsc-footer-col { gap: 0; }
	.mpsc-footer-col span:first-child { margin-bottom: 4px; }
	.mpsc-footer-col a { display: block; padding: 12px 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
	.mpsc-footer-base { flex-wrap: wrap; gap: 8px 16px; font-size: 11px; }
	/* Legales en su propia fila, con alto de dedo (~40px) como los enlaces de las columnas. */
	.mpsc-footer-legal { flex-basis: 100%; gap: 0 20px; }
	.mpsc-footer-legal a { display: block; padding: 11px 0; font-size: 12.5px; line-height: 1.45; }

	.mpsc-banner { padding: 22px 18px; gap: 12px 20px; }
	.mpsc-banner a { margin-left: 0; }
	.mpsc-heading h2 { font-size: 34px; }

	/* Tarjeta de producto (Home, Tienda, relacionados, Quiz): la categoría gris repite los chips y a
	   veces el nombre; fuera. Los badges de venta pasan a negro para no competir con el precio rojo.
	   «Sin stock» (gris) se queda como está: es información comercial. */
	.mps-2026 .mpsc-card-cat { display: none; }
	/* …pero la presentación sí ("75 servidas"): sin ella dos tarjetas "Whey Protein" se ven iguales (28-09). */
	.mps-2026 .mpsc-card-pres { display: block; }
	.mps-2026 .mpsc-card-badge:not(.mpsc-card-badge-gris) { background: #0B0B0B; }
}

/* La barra de admin mide 46px bajo 782px y deja de ser fija bajo 600px. */
@media (max-width: 782px) {
	body.admin-bar .mpsc-sticky { top: 46px; }
	body.admin-bar .mpsc-mov-panel { top: 46px; }
}
@media (max-width: 600px) {
	body.admin-bar .mpsc-sticky { top: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.mpsc-mega-abierto > .mpsc-mega-panel,
	.mpsc-nav:not(.mpsc-mega-js) .mpsc-mega-item:hover > .mpsc-mega-panel,
	.mpsc-nav:not(.mpsc-mega-js) .mpsc-mega-item:focus-within > .mpsc-mega-panel { animation: none; }
	.mpsc-mega-flecha svg, .mpsc-mega-card-img img, .mpsc-mov-mas { transition: none; }
	.mpsc-mega-card:hover .mpsc-mega-card-img img { transform: none; }
	.mpsc-mov-panel, .mpsc-mov-panel.mpsc-mov-abierto { transition: none; }
	.mpsc-mov-fila { transition: none; transform: none; opacity: 1; }
	.mpsc-mov-busca-fila.mpsc-abierta { animation: none; }
}