/**
 * Producto 2026 — estilos propios de la página (el chrome vive en chrome-2026.css).
 * Fiel a design-2026/templates/producto/Producto.dc.html.
 */

.mpsp-main { padding: 24px max(56px, calc(50% - 664px)) 84px; display: flex; flex-direction: column; gap: 20px; }

.mpsp-crumbs { font-size: 12px; color: #8A8782; font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mpsp-crumbs a { color: #111111; text-decoration: none; }
.mpsp-crumbs a:hover { color: #C73D2C; }

.mpsp-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 980px) { .mpsp-grid { grid-template-columns: 1fr; } }

/* ---- Galería ---- */

.mpsp-galeria { display: grid; grid-template-columns: 84px 1fr; gap: 14px; position: sticky; top: 124px; align-items: start; }
body.admin-bar .mpsp-galeria { top: 156px; }

.mpsp-thumbs { display: flex; flex-direction: column; gap: 10px; }
.mpsp-thumb {
	width: 84px; height: 84px; padding: 0; border-radius: 4px; overflow: hidden;
	cursor: pointer; border: 1.5px solid #E4E2E0; background: #F5F4F2; font-family: inherit;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.mpsp-thumb-activa { border-color: #111111; }
.mpsp-thumb-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mpsp-thumb-dato { background: #0B0B0B; color: #FFFFFF; border-color: #1E1E1E; }
.mpsp-thumb-dato.mpsp-thumb-activa { border-color: #111111; }
.mpsp-thumb-num { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.mpsp-thumb-num em { color: #C73D2C; }
.mpsp-thumb-label { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #9A9A9A; }
.mpsp-thumb-label-gris { color: #8A8782; margin-top: 4px; }
.mpsp-thumb-tabla { background: #FFFFFF; padding: 0 10px; align-items: stretch; gap: 5px; }
.mpsp-linea-a { height: 3px; background: #111111; display: block; }
.mpsp-linea-b { height: 2px; background: #C9C6C1; display: block; }

.mpsp-slide-area { position: relative; background: #F5F4F2; border-radius: 6px; aspect-ratio: 1 / 1; overflow: hidden; }
.mpsp-slide { position: absolute; inset: 0; display: none; }
.mpsp-slide-activo { display: block; }
.mpsp-slide-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Foto de campaña (4:5) en el cuadro 1:1: se encuadra el bote, no la pared. */
.mpsp-slide-ambiente img { object-position: center 62%; }

.mpsp-badge {
	position: absolute; top: 18px; left: 18px;
	background: #C73D2C; color: #FFFFFF; font-size: 10px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.1em; padding: 6px 10px; border-radius: 999px;
}
.mpsp-badge-negro { left: auto; right: 18px; background: #0B0B0B; }

.mpsp-slide-beneficios {
	background: #0B0B0B; color: #FFFFFF; padding: 36px;
	background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.2px); background-size: 3px 3px;
	flex-direction: column; gap: 24px;
}
.mpsp-slide-beneficios.mpsp-slide-activo { display: flex; }
.mpsp-ben-head { display: flex; flex-direction: column; gap: 6px; }
.mpsp-ben-titulo { font-size: 30px; line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; }
.mpsp-ben-titulo b { font-weight: 800; }
.mpsp-ben-titulo i { font-weight: 300; font-style: normal; }
.mpsp-ben-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; }
.mpsp-ben {
	border: 1px solid #1E1E1E; border-radius: 6px; padding: 18px;
	display: flex; flex-direction: column; justify-content: space-between; gap: 12px; background: rgba(255,255,255,0.03);
}
.mpsp-ben-dato { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.mpsp-ben-dato em { color: #C73D2C; }
.mpsp-ben-txt { display: flex; flex-direction: column; gap: 3px; }
.mpsp-ben-txt b { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; }
.mpsp-ben-txt span { font-size: 11.5px; color: #9A9A9A; line-height: 1.4; }

.mpsp-slide-nutricion { background: #FFFFFF; padding: 36px; flex-direction: column; gap: 18px; }
.mpsp-slide-nutricion.mpsp-slide-activo { display: flex; }
.mpsp-ben-titulo-oscuro { color: #111111; }

.mpsp-tabla { border: 2px solid #111111; border-radius: 4px; overflow: hidden; flex: 1; display: flex; flex-direction: column; background: #FFFFFF; }
.mpsp-tabla-chica { border-width: 1.5px; flex: none; }
.mpsp-tabla-head { display: flex; justify-content: space-between; padding: 12px 16px; border-bottom: 2px solid #111111; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.mpsp-tabla-fila { display: flex; justify-content: space-between; padding: 11px 16px; border-bottom: 1px solid #E4E2E0; font-size: 14px; }
.mpsp-tabla-fila span { font-weight: 600; }
.mpsp-tabla-fila b { font-weight: 800; }
.mpsp-tabla-ing { padding: 12px 16px; font-size: 11.5px; line-height: 1.5; color: #8A8782; margin-top: auto; }

/* ---- Etiqueta real por sabor (28-09): tabla de 3 columnas (nutriente, cantidad, %VD) ----
   Cada sabor o presentación va en su .mpsp-variante; producto-2026.js deja visible la del chip.
   Las filas son subgrids de la tabla para que las columnas alineen; sin subgrid, anchos fijos. */
.mpsp-variante[hidden], .mpsp-variante-nula[hidden], .mpsp-acordeon[hidden] { display: none !important; }
.mpsp-slide-nutricion { overflow-y: auto; } /* hay etiquetas de hasta 22 filas: se desplaza dentro del cuadro */
.mpsp-variante { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mpsp-nt {
	display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 14px;
	border: 1.5px solid #111111; border-radius: 4px; background: #FFFFFF; font-size: 13px; line-height: 1.35;
}
.mpsp-slide-nutricion .mpsp-nt { border-width: 2px; }
.mpsp-nt-dos { grid-template-columns: minmax(0, 1fr) auto auto auto auto; column-gap: 10px; }
.mpsp-nt-porcion {
	grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap;
	padding: 11px 14px; border-bottom: 2px solid #111111;
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.mpsp-nt-fila {
	grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 8em 3.4em; grid-template-columns: subgrid;
	align-items: baseline; padding: 7px 14px; border-bottom: 1px solid #E4E2E0;
}
.mpsp-nt-dos .mpsp-nt-fila { grid-template-columns: minmax(0, 1fr) 6.5em 3em 6.5em 3em; grid-template-columns: subgrid; }
.mpsp-nt-fila:last-child { border-bottom: 0; }
.mpsp-nt-fila > :first-child { font-weight: 600; overflow-wrap: anywhere; }
.mpsp-nt-fila > b { font-weight: 800; text-align: right; white-space: nowrap; }
.mpsp-nt-fila > span + span, .mpsp-nt-fila > b + span { text-align: right; white-space: nowrap; color: #5C5A56; font-weight: 600; }
.mpsp-nt-cab { border-bottom-color: #111111; padding-top: 8px; padding-bottom: 6px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #8A8782; }
.mpsp-nt-cab > span, .mpsp-nt-cab > span + span { color: #8A8782; font-weight: 700; white-space: normal; }
.mpsp-nt-cab > span + span { text-align: right; }
.mpsp-nt-sub > :first-child { padding-left: 16px; font-weight: 500; color: #3A3835; }
.mpsp-nt-enc { background: #F5F4F2; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; }
.mpsp-nt-enc > span { grid-column: 1 / -1; font-weight: 700; }
.mpsp-nt-notas { margin: 0; font-size: 11px; line-height: 1.5; color: #8A8782; }
.mpsp-nt-revision { margin: 0; padding: 10px 14px; border: 1px dashed #C9C6C1; border-radius: 4px; font-size: 12.5px; color: #8A8782; }
.mpsp-variante-nula { margin: 0; font-size: 12.5px; line-height: 1.5; color: #8A8782; }

/* ---- Columna de info ---- */

.mpsp-info { display: flex; flex-direction: column; gap: 18px; }
.mpsp-encabezado { display: flex; flex-direction: column; gap: 10px; }
.mpsp-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #C73D2C; }
.mpsp-titulo { margin: 0; font-size: 56px; line-height: 0.92; letter-spacing: -0.02em; text-transform: uppercase; }
.mpsp-titulo-bold { font-weight: 800; }
.mpsp-titulo-light { font-weight: 300; }
.mpsp-rating { display: flex; align-items: center; gap: 10px; }
.mpsp-rating em { color: #C73D2C; font-size: 13px; letter-spacing: 3px; }
.mpsp-rating b { font-size: 13px; font-weight: 800; }
.mpsp-rating span { font-size: 11.5px; color: #8A8782; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.mpsp-resumen { margin: 0; font-size: 15.5px; line-height: 1.6; }
/* Presentación ("2 lb", "75 servidas"): dato secundario, nunca en el título (Luis, 28-09). */
.mpsp-presentacion { margin: 0; display: flex; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 700; }
.mpsp-presentacion span { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #8A8782; }

.mpsp-precio-linea { display: flex; align-items: baseline; gap: 12px; border-top: 1px solid #E4E2E0; padding-top: 16px; }
.mpsp-precio { font-size: 32px; font-weight: 800; color: #C73D2C; letter-spacing: -0.02em; }
.mpsp-precio del { color: #8A8782; font-weight: 400; font-size: 20px; margin-right: 8px; }
.mpsp-precio ins { text-decoration: none; }
.mpsp-precio-nota { font-size: 12px; color: #8A8782; font-weight: 600; }

.mpsp-selectores { display: flex; flex-direction: column; gap: 10px; }
.mpsp-selector { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; }
.mpsp-selector-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #8A8782; }
.mpsp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mpsp-chip {
	height: 34px; padding: 0 12px; border-radius: 2px; border: 1.5px solid #E4E2E0;
	background: #FFFFFF; color: #111111; cursor: pointer; font-family: inherit;
	font-size: 11.5px; font-weight: 700; display: flex; align-items: center; gap: 8px;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.mpsp-chip:hover { border-color: #111111; }
.mpsp-chip-activo { border-color: #0B0B0B; background: #0B0B0B; color: #FFFFFF; }

/* Precio por porción: solo aparece con porciones confiables (lo decide producto-2026.js). */
.mpsp-porcion { margin-left: auto; font-size: 12px; font-weight: 700; color: #111111; white-space: nowrap; }
.mpsp-porcion[hidden] { display: none; }

/* Oferta por cantidad: el control segmentado que el mockup usaba para "Única / Suscripción",
   con la oferta que sí existe (la regla de descuento que ya aplica el carrito). */
.mpsp-oferta[hidden] { display: none; }
.mpsp-oferta { align-items: start; }
.mpsp-oferta > .mpsp-selector-label { padding-top: 14px; }
.mpsp-oferta-cuerpo { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; }
/* --mpsp-ops lo fija el JS: 1 unidad + un botón por cada tramo real de la regla. */
.mpsp-oferta-ops { display: grid; grid-template-columns: repeat(var(--mpsp-ops, 2), minmax(0, 1fr)); border: 1.5px solid #111111; border-radius: 2px; overflow: hidden; }
.mps-2026 .mpsp-oferta-op {
	-webkit-appearance: none; appearance: none;
	display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px 6px;
	min-height: 42px; min-width: 0; width: auto; margin: 0; padding: 6px 8px;
	border: 0; border-radius: 0; background: #FFFFFF; box-shadow: none; color: #111111; cursor: pointer;
	font-size: 11px; font-weight: 700; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.04em; text-align: center;
	transition: background-color .15s ease, color .15s ease;
}
.mps-2026 .mpsp-oferta-op + .mpsp-oferta-op { border-left: 1.5px solid #111111; }
.mps-2026 .mpsp-oferta-op:hover { background: #F5F4F2; color: #111111; }
.mpsp-oferta-op b { font-weight: 700; }
.mpsp-oferta-op em { font-style: normal; color: #C73D2C; font-weight: 800; }
.mpsp-oferta-op span { color: #8A8782; font-weight: 600; text-transform: none; letter-spacing: 0; }
.mps-2026 .mpsp-oferta-op.mpsp-oferta-activa, .mps-2026 .mpsp-oferta-op.mpsp-oferta-activa:hover { background: #0B0B0B; color: #FFFFFF; }
.mpsp-oferta-activa em, .mpsp-oferta-activa span { color: #FFD9D3; }
.mpsp-oferta-nota { font-size: 11px; line-height: 1.4; color: #8A8782; }
.mpsp-oferta-op:focus-visible { outline: 2px solid #C73D2C !important; outline-offset: -3px; }

/* Formulario nativo de Woo: se oculta lo redundante, se mantiene lo funcional */
.mpsp-compra form.cart { display: flex; flex-direction: column; gap: 8px; }
.mpsp-compra table.variations, .mpsp-compra .reset_variations, .mpsp-compra .stock,
.mpsp-compra .quantity, .mpsp-compra button.single_add_to_cart_button,
.mpsp-compra .woocommerce-variation-price, .mpsp-compra .woocommerce-variation-availability { display: none !important; }

.mpsp-cta-fila { display: flex; gap: 10px; align-items: stretch; }
.mpsp-stepper { display: flex; align-items: center; border: 1.5px solid #111111; border-radius: 2px; height: 52px; }
.mpsp-stepper button {
	width: 42px; height: 100%; border: none; background: none; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center; text-align: center;
	padding: 0; margin: 0; line-height: 1; min-width: 0; box-shadow: none; border-radius: 0;
	font-family: inherit; font-size: 18px; font-weight: 700; color: #111111;
}
.mpsp-stepper b { min-width: 26px; text-align: center; font-size: 15px; font-weight: 800; }
.mpsp-btn-agregar {
	flex: 1; height: 52px; border: none; border-radius: 2px; padding: 0;
	background: #C73D2C; color: #FFFFFF; cursor: pointer; font-family: inherit;
	font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
	transition: background-color .15s ease; display: flex; align-items: center; justify-content: center; gap: 12px;
}
.mpsp-btn-agregar:hover { background: #B23425; }
.mpsp-btn-agregar span { font-weight: 600; color: #FFD9D3; text-transform: none; }
.mpsp-btn-agregar.mpsp-sin-stock { background: #E4E2E0; color: #8A8782; cursor: not-allowed; }
.mpsp-btn-agregar.mpsp-sin-stock span { color: #8A8782; }
.mpsp-btn-sacudir { animation: mpsp-sacudir .35s ease; }
@keyframes mpsp-sacudir { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.mpsp-agotado { display: flex; flex-direction: column; gap: 12px; border: 1px dashed #C9C6C1; border-radius: 4px; padding: 18px; font-size: 13px; color: #8A8782; line-height: 1.5; }
.mpsp-agotado strong { font-size: 14px; color: #111111; }
.mpsp-agotado a {
	align-self: flex-start; height: 44px; padding: 0 20px; display: inline-flex; align-items: center;
	border: 1.5px solid #111111; border-radius: 2px; color: #111111; text-decoration: none;
	font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.mpsp-agotado a:hover { background: #111111; color: #FFFFFF; }

.mpsp-garantias { margin: 0; font-size: 11.5px; color: #8A8782; font-weight: 600; display: flex; gap: 14px; flex-wrap: wrap; }
.mpsp-garantias em { color: #C73D2C; }

/* ---- Panel "Completá tu stack" ---- */

.mpsp-stack {
	background: #0B0B0B; color: #FFFFFF; border-radius: 6px; padding: 20px; display: flex; flex-direction: column; gap: 14px;
	background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.2px); background-size: 3px 3px;
}
.mpsp-stack-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mpsp-stack-head > span:first-child { display: flex; flex-direction: column; gap: 3px; }
.mpsp-stack-head b { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; }
.mpsp-stack-sub { font-size: 12px; color: #9A9A9A; }
.mpsp-stack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mpsp-stack-item { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.06); border: 1px solid #1E1E1E; border-radius: 4px; padding: 10px 12px; }
.mpsp-stack-img { width: 52px; height: 52px; background: #FFFFFF; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.mpsp-stack-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mpsp-stack-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.mpsp-stack-txt a { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.2; color: #FFFFFF; text-decoration: none; }
.mpsp-stack-txt b { font-size: 12px; font-weight: 700; color: #C73D2C; }
.mpsp-stack-txt b del { color: #9A9A9A; font-weight: 400; margin-right: 4px; }
.mpsp-stack-txt b ins { text-decoration: none; }
.mpsp-stack-add {
	height: 34px; padding: 0 12px; border-radius: 2px; border: 1.5px solid #FFFFFF; background: transparent; color: #FFFFFF;
	cursor: pointer; text-decoration: none; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
	display: inline-flex; align-items: center; transition: background-color .15s ease, color .15s ease;
}
.mpsp-stack-add:hover { background: #FFFFFF; color: #111111; }
.mpsp-stack-acciones { display: flex; gap: 10px; }
.mpsp-stack-carrito {
	flex: 1; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: #C73D2C; color: #FFFFFF;
	text-decoration: none; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 2px;
}
.mpsp-stack-carrito:hover { background: #B23425; color: #FFFFFF; }
.mpsp-stack-pagar {
	height: 48px; padding: 0 20px; display: inline-flex; align-items: center; border: 1.5px solid #FFFFFF; border-radius: 2px; color: #FFFFFF;
	text-decoration: none; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.mpsp-stack-pagar:hover { background: #FFFFFF; color: #111111; }

/* ---- Chips de beneficios + acordeones ---- */

.mpsp-ben-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; border-top: 1px solid #E4E2E0; padding-top: 18px; }
.mpsp-ben-chip {
	display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid #E4E2E0; border-radius: 4px; background: #FFFFFF;
	cursor: pointer; font-family: inherit; text-align: left; transition: border-color .15s ease;
}
.mpsp-ben-chip:hover { border-color: #111111; }
/* El chrome centra el texto de todo <button> para neutralizar al tema; este chip va a la izquierda (mockup). */
.mps-2026 .mpsp-ben-chip { text-align: left; align-items: flex-start; }
.mpsp-ben-chip span { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: #C73D2C; }
.mpsp-ben-chip b { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: #111111; line-height: 1.2; }

.mpsp-acordeones { display: flex; flex-direction: column; border-top: 1px solid #E4E2E0; }
.mpsp-acordeon { border-bottom: 1px solid #E4E2E0; }
.mpsp-acordeon-btn {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: none; border: none; cursor: pointer;
	padding: 16px 0; font-family: inherit; color: #111111; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; text-align: left;
}
.mpsp-acordeon-btn span { color: #C73D2C; font-size: 22px; font-weight: 300; line-height: 1; }
.mpsp-acordeon-cuerpo { display: none; flex-direction: column; gap: 12px; padding: 0 0 18px; }
.mpsp-abierto .mpsp-acordeon-cuerpo { display: flex; }
.mpsp-ingredientes { font-size: 12.5px; line-height: 1.55; }
.mpsp-ingredientes b { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: #8A8782; margin-right: 6px; }
p.mpsp-ingredientes { margin: 0; }
/* Alérgenos destacados: es lo primero que busca quien tiene una alergia. */
.mpsp-alergenos { margin: 0; padding: 10px 12px; border-left: 3px solid #C73D2C; border-radius: 2px; background: #FDF3F1; font-size: 12.5px; line-height: 1.55; color: #111111; }
.mpsp-alergenos b { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: #C73D2C; margin-right: 6px; }
/* "Modo de uso y advertencias": el texto tal cual la etiqueta. */
.mpsp-etiqueta-txt { margin: 0; font-size: 12.5px; line-height: 1.6; overflow-wrap: anywhere; }
.mpsp-etiqueta-txt b { display: block; margin-bottom: 2px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: #8A8782; }
.mpsp-uso { display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 8px 0; align-items: baseline; }
.mpsp-uso span { font-size: 11.5px; font-weight: 700; color: #C73D2C; letter-spacing: 0.1em; }
.mpsp-uso p { margin: 0; font-size: 14px; line-height: 1.5; }
.mpsp-faq { display: flex; flex-direction: column; gap: 4px; }
.mpsp-faq b { font-size: 14px; font-weight: 700; }
.mpsp-faq p { margin: 0; font-size: 13.5px; line-height: 1.55; }

.mpsp-estandar-strip { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid #E4E2E0; border-radius: 6px; padding: 12px 16px; }
.mpsp-estandar-strip > span { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #111111; display: flex; gap: 12px; flex-wrap: wrap; }
.mpsp-estandar-strip em { color: #C73D2C; }
.mpsp-estandar-strip a { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #8A8782; text-decoration: none; white-space: nowrap; }
.mpsp-estandar-strip a:hover { color: #C73D2C; }

/* ---- Banda Informed Choice ---- */

.mpsp-informed {
	background: #F5F4F2; border-top: 1px solid #E4E2E0; border-bottom: 1px solid #E4E2E0;
	padding: 56px max(56px, calc(50% - 664px)); display: grid; grid-template-columns: auto 1fr auto; gap: 40px; align-items: center;
}
.mpsp-informed-sello {
	width: 120px; height: 120px; border-radius: 999px; border: 1.5px dashed #C9C6C1; display: flex; align-items: center; justify-content: center;
	text-align: center; font-size: 11px; font-weight: 700; color: #8A8782; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.4;
}
.mpsp-informed-txt { display: flex; flex-direction: column; gap: 10px; }
.mpsp-informed-txt h2 { margin: 0; font-size: 32px; line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; }
.mpsp-informed-txt h2 b { font-weight: 800; }
.mpsp-informed-txt h2 i { font-weight: 300; font-style: normal; }
.mpsp-informed-txt p { margin: 0; font-size: 14.5px; line-height: 1.6; max-width: 620px; }
.mpsp-informed > a { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #111111; text-decoration: none; border-bottom: 2px solid #C73D2C; padding-bottom: 3px; white-space: nowrap; }
.mpsp-informed > a:hover { color: #C73D2C; }

/* ---- Relacionados ---- */

.mpsp-relacionados { padding: 84px max(56px, calc(50% - 664px)); display: flex; flex-direction: column; gap: 36px; }
/* flex-direction explícita: el tema viejo apila en columna a los hijos de <section>. */
.mpsp-relacionados-head { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; }
.mpsp-relacionados-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 980px) { .mpsp-relacionados-grid { grid-template-columns: repeat(2, 1fr); } }
.mpsp-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;
}
.mpsp-link-linea:hover { color: #C73D2C; }

/* Solo existe para la hoja inferior del móvil. */
.mpsp-stack-cerrar { display: none; }

/* ======================================================================
 * MÓVIL (<= 900px) — design-2026/templates/producto-mobile/ProductoMobile.dc.html
 * Mismo HTML que el escritorio: galería cuadrada a sangre con las miniaturas en
 * fila debajo, selectores con la etiqueta arriba, y la fila de compra (stepper +
 * "Agregar") convertida en barra fija inferior. Sin selector de suscripción ni
 * promesas de envío gratis: igual que el escritorio actual.
 * ==================================================================== */
@media (max-width: 900px) {
	.mpsp-main { padding: 0 0 8px; gap: 0; }
	.mpsp-crumbs { display: none; } /* el mockup móvil no lleva ruta: el nav ya tiene Tienda y el menú */
	.mpsp-grid { grid-template-columns: 1fr; gap: 0; }

	/* ---- Galería: slide arriba a todo el ancho, miniaturas en fila debajo ---- */
	.mpsp-galeria { position: static; display: flex; flex-direction: column-reverse; align-items: stretch; gap: 0; }
	body.admin-bar .mpsp-galeria { top: auto; }
	.mpsp-slide-area { border-radius: 0; width: 100%; }
	.mpsp-thumbs { flex-direction: row; gap: 8px; padding: 12px 18px 0; }
	.mps-2026 .mpsp-thumb { width: 64px; height: 64px; min-width: 0; min-height: 0; flex: none; gap: 3px; }
	.mpsp-thumb-num { font-size: 17px; }
	.mpsp-thumb-label { font-size: 7.5px; }
	.mpsp-thumb-label-gris { margin-top: 3px; }
	.mps-2026 .mpsp-thumb-tabla { padding: 0 9px; gap: 4px; }
	/* Carrusel completo también en el teléfono (Luis 29-09: "en móvil no hay carousel de imágenes"): la fila
	   muestra foto, beneficios y tabla con sus imágenes reales, y el cuadro se desliza con el dedo
	   (producto-2026.js). La fila solo se oculta si queda una sola miniatura. */
	.mpsp-thumbs { overflow-x: auto; scrollbar-width: none; }
	.mpsp-thumbs::-webkit-scrollbar { display: none; }
	.mps-2026 .mpsp-thumbs:not(:has(.mpsp-thumb + .mpsp-thumb)) { display: none; }
	.mpsp-slide-area { touch-action: pan-y; }
	.mpsp-badge { top: 14px; left: 14px; font-size: 9.5px; padding: 5px 9px; }
	.mpsp-badge-negro { left: auto; right: 14px; }
	/* "El más pedido" se queda aunque haya promo: es prueba social (Luis pidió más, no menos). */

	.mpsp-slide-beneficios { padding: 22px 18px; gap: 14px; }
	.mpsp-slide-nutricion { padding: 22px 18px; gap: 12px; overflow-y: auto; } /* tablas largas: se desplaza dentro del cuadro */
	.mpsp-ben-head { gap: 4px; }
	.mpsp-ben-head .mpsp-mini-eyebrow { font-size: 10.5px; }
	.mpsp-ben-titulo { font-size: 22px; }
	.mpsp-ben-grid { gap: 8px; }
	.mpsp-ben { padding: 12px; gap: 8px; }
	.mpsp-ben-dato { font-size: 28px; }
	.mpsp-ben-txt { gap: 2px; }
	.mpsp-ben-txt b { font-size: 11px; }
	.mpsp-ben-txt span { font-size: 10.5px; line-height: 1.35; }
	.mpsp-tabla-head { padding: 9px 12px; font-size: 10px; gap: 10px; }
	.mpsp-tabla-fila { padding: 8px 12px; font-size: 12.5px; gap: 10px; }
	.mpsp-tabla-fila b { white-space: nowrap; }
	.mpsp-slide-nutricion .mpsp-tabla { flex: none; }
	.mpsp-slide-nutricion .mpsp-tabla-ing { display: none; } /* los ingredientes viven en el acordeón de abajo */
	/* Tabla de la etiqueta: sin desborde a 375px. Con dos porciones (Amino Endurance) las cantidades
	   pueden partirse en dos líneas para dejarle ancho al nombre del nutriente. */
	.mpsp-nt { font-size: 12.5px; column-gap: 10px; }
	.mpsp-nt-dos { font-size: 11.5px; column-gap: 8px; }
	.mpsp-nt-porcion { padding: 9px 12px; font-size: 10px; }
	.mpsp-nt-fila { padding: 7px 12px; }
	.mpsp-nt-dos .mpsp-nt-fila > b { white-space: normal; }
	.mpsp-nt-sub > :first-child { padding-left: 12px; }
	.mpsp-alergenos, .mpsp-etiqueta-txt { font-size: 12px; }
	.mpsp-presentacion { font-size: 12.5px; }

	/* ---- Columna de info ---- */
	/* Ritmo: 16px dentro de cada grupo y 32px entre grupos (compra / beneficios / información);
	   con el mismo gap de 12 para todo se leía como una sola masa. */
	.mpsp-info { padding: 24px 18px 0; gap: 16px; }
	.mpsp-encabezado { gap: 12px; }
	.mpsp-eyebrow { font-size: 11px; }
	.mpsp-titulo { font-size: 38px; overflow-wrap: anywhere; }
	.mpsp-rating { gap: 8px; flex-wrap: wrap; }
	.mpsp-rating em { font-size: 12px; }
	.mpsp-rating b { font-size: 12.5px; }
	/* Caja normal: las mayúsculas de 10.5px se leían como ruido. */
	.mpsp-rating span { font-size: 12.5px; font-weight: 500; text-transform: none; letter-spacing: 0; }
	.mpsp-resumen { font-size: 14px; line-height: 1.6; }
	.mpsp-precio-linea { gap: 10px; padding-top: 14px; }
	.mpsp-precio { font-size: 28px; }
	.mpsp-precio del { font-size: 17px; }
	.mpsp-precio-nota { font-size: 11px; }

	.mpsp-selectores { gap: 16px; }
	.mpsp-selector { grid-template-columns: 1fr; gap: 8px; } /* etiqueta → control: 8px */
	.mpsp-selector-label { font-size: 10px; }
	.mpsp-oferta > .mpsp-selector-label { padding-top: 0; }
	.mpsp-precio-linea { flex-wrap: wrap; }
	.mpsp-porcion { font-size: 11.5px; }
	/* Toques de 44px o más en presentación y oferta (34 y 42 antes). */
	.mps-2026 .mpsp-chip { height: 44px; padding: 0 14px; font-size: 12px; width: auto; }
	.mps-2026 .mpsp-oferta-op { min-height: 52px; padding: 8px 6px; }
	/* 13px: es una frase con condición comercial (cómo se aplica el descuento), no un rótulo. */
	.mpsp-oferta-nota { font-size: 13px; line-height: 1.5; }
	/* Hueco de ~31px bajo la oferta: se atribuye al margin-bottom de Woo en form.cart (sin verificar
	   en DevTools). Solo margen y padding: nada de height:0, WPC Frequently Bought Together se engancha ahí. */
	body.mps-producto-2026 .mpsp-compra form.cart,
	body.mps-producto-2026 .mpsp-compra .single_variation_wrap,
	body.mps-producto-2026 .mpsp-compra .woocommerce-variation-add-to-cart { margin: 0; padding: 0; }

	/* ---- Barra fija de compra: es la MISMA fila de escritorio, solo cambia de lugar ---- */
	.mpsp-cta-fila {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
		flex-direction: row; align-items: center; gap: 10px;
		background: #FFFFFF; border-top: 1px solid #E4E2E0;
		padding: 10px 18px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	}
	.mpsp-stepper { height: 48px; flex: none; flex-direction: row; }
	.mps-2026 .mpsp-stepper button { width: 38px; font-size: 17px; }
	.mpsp-stepper b { min-width: 22px; font-size: 14px; }
	.mps-2026 .mpsp-btn-agregar { height: 48px; font-size: 12.5px; gap: 8px; min-width: 0; }
	body.mps-producto-2026 .mpsc-footer { padding-bottom: 96px; }
	body.mps-producto-2026 .wpsr-fm-chat-wrapper { bottom: 82px !important; }

	.mpsp-agotado { padding: 16px; gap: 10px; }
	.mpsp-agotado a { align-self: stretch; justify-content: center; }
	/* Garantías: los checks en negro (el rojo queda para CTA y precio) y el texto a 12px. */
	.mpsp-garantias { font-size: 12px; line-height: 1.6; gap: 4px 16px; }
	.mpsp-garantias em { color: #111111; }

	/* ---- "Completá tu stack" = hoja inferior ---- */
	/* Sin la textura de puntos: en una hoja de 82vh era ruido detrás de las sugerencias. */
	.mpsp-stack {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 260; max-height: 82vh; overflow-y: auto;
		border-radius: 10px 10px 0 0; padding: 18px 18px 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -20px 50px rgba(0,0,0,0.3); background-image: none;
	}
	.mpsp-stack.mpsp-stack-cerrada { display: none; }
	/* La burbuja de chat del sitio (z-index 9999) tapaba la segunda sugerencia: se oculta solo mientras la hoja está abierta. */
	body.mps-producto-2026:has(.mpsp-stack:not(.mpsp-stack-cerrada)) .wpsr-fm-chat-wrapper { display: none !important; }
	.mpsp-stack-head { align-items: flex-start; gap: 12px; }
	.mpsp-stack-head b { font-size: 17px; }
	.mpsp-stack-sub { display: none; }
	.mps-2026 .mpsp-stack-cerrar {
		display: inline-flex; flex-direction: row; align-items: center; justify-content: center; flex: none;
		width: 44px; height: 44px; min-width: 0; min-height: 0; margin: 0; padding: 0;
		border: 1px solid #1E1E1E; border-radius: 2px; background: rgba(255,255,255,0.06); color: #FFFFFF;
		font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer;
	}
	.mpsp-stack-grid { grid-template-columns: 1fr; gap: 8px; }
	/* Sin caja dentro de la caja: cada sugerencia es una fila sobre el negro de la hoja. */
	.mpsp-stack-item { gap: 12px; padding: 8px 0; border: 0; background: none; }
	.mpsp-stack-img { width: 46px; height: 46px; }
	.mpsp-stack-txt { gap: 2px; }
	.mpsp-stack-txt a, .mpsp-stack-txt b { font-size: 11.5px; }
	.mpsp-stack-add { height: 44px; padding: 0 12px; font-size: 11px; }
	.mpsp-stack-acciones { gap: 8px; }
	.mpsp-stack-carrito, .mpsp-stack-pagar { font-size: 12.5px; }
	.mpsp-stack-pagar { padding: 0 16px; }

	/* ---- Beneficios en chips + acordeones ---- */
	/* Beneficios: de 4 cajas con cifra roja a una rejilla de datos sin cajas (cifra negra, rótulo gris).
	   Siguen siendo botones que abren la slide de beneficios. margin-top + gap = 32px entre grupos. */
	.mpsp-ben-chips { grid-template-columns: 1fr 1fr; gap: 24px 16px; margin-top: 16px; padding-top: 0; border-top: 0; }
	/* min-height 44: sin caja el botón medía ~41px (24 + 4 + 13); el toque mínimo del sistema es 44. */
	.mps-2026 .mpsp-ben-chip { padding: 0; gap: 4px; width: auto; min-height: 44px; border: 0; background: none; }
	.mpsp-ben-chip span { font-size: 24px; color: #111111; }
	.mpsp-ben-chip b { font-size: 11px; color: #8A8782; }
	.mpsp-acordeones { margin-top: 16px; }
	/* Acordeón: botón de ~52px y el +/− en negro (no es un CTA). */
	.mps-2026 .mpsp-acordeon-btn { padding: 18px 0; font-size: 12.5px; gap: 12px; }
	.mpsp-acordeon-btn span { font-size: 20px; color: #111111; }
	.mpsp-acordeon-cuerpo { gap: 12px; padding: 0 0 20px; }
	.mpsp-ingredientes { font-size: 12px; line-height: 1.5; }
	.mpsp-ingredientes b { font-size: 10px; }
	.mpsp-uso { grid-template-columns: 30px 1fr; gap: 8px; padding: 6px 0; }
	.mpsp-uso span { font-size: 10.5px; }
	.mpsp-uso p { font-size: 14px; line-height: 1.6; }
	.mpsp-faq { gap: 3px; }
	.mpsp-faq b { font-size: 13px; }
	.mpsp-faq p { font-size: 13.5px; line-height: 1.6; }

	/* Franja "Estándar MPS": 3 checks que repiten garantías y trustbar ("Hecho en Guatemala" salía
	   dos veces). Su enlace a #estandar sigue en la banda Informed y en la home. */
	.mpsp-estandar-strip { display: none; }

	/* ---- Banda Informed Choice: franja de 48px ---- */
	.mpsp-informed { margin-top: 48px; padding: 48px 18px; grid-template-columns: minmax(0, 1fr); gap: 16px; }
	/* El círculo "Sello Informed Choice" es relleno (texto de 6.5px): fuera hasta tener el sello real. */
	.mpsp-informed-sello { display: none; }
	.mpsp-informed-txt { gap: 8px; }
	.mpsp-informed-txt .mpsp-mini-eyebrow { font-size: 11px; }
	.mpsp-informed-txt h2 { font-size: 24px; line-height: 1; letter-spacing: -0.02em; }
	.mpsp-informed-txt h2 i { font-weight: 300; }
	/* El texto legal (solo aplica a la Creatina) se conserva completo y legible. */
	.mpsp-informed-txt p { font-size: 13.5px; line-height: 1.6; max-width: none; }
	.mpsp-informed > a { grid-column: 1 / -1; justify-self: start; font-size: 12px; }

	/* ---- Relacionados: carrusel con snap ----
	   align-items: stretch a propósito: el tema viejo le pone align-items:center a toda <section>,
	   y entonces el carrusel se ensancha a su contenido (1008px) en vez de desplazarse → la página
	   entera quedaba con scroll horizontal y arrastraba la barra fija (QA 18-09). */
	.mpsp-relacionados { padding: 72px 0; gap: 32px; align-items: stretch; } /* medida de sección: 72 y 32 del título al carrusel */
	.mpsp-relacionados-grid { width: 100%; max-width: 100%; box-sizing: border-box; }
	.mpsp-relacionados-head { padding: 0 18px; gap: 12px; }
	.mpsp-relacionados .mpsc-heading h2 { font-size: 30px; }
	.mpsp-link-linea[data-corto] { flex: none; font-size: 0; letter-spacing: 0; }
	.mpsp-link-linea[data-corto]::after { content: attr(data-corto); font-size: 11.5px; letter-spacing: 0.06em; }
	.mpsp-relacionados-grid {
		display: flex; flex-direction: row; align-items: stretch; gap: 12px;
		overflow-x: auto; padding: 0 18px 6px; scroll-padding-left: 18px; scroll-snap-type: x mandatory; /* 18 = gutter: la 1.ª tarjeta alinea con el título */
		-webkit-overflow-scrolling: touch; scrollbar-width: none;
	}
	.mpsp-relacionados-grid::-webkit-scrollbar { display: none; }
	.mpsp-relacionados-grid > * { flex: none; width: 230px; scroll-snap-align: start; }
	.mpsp-relacionados-grid .mpsc-card-img { height: 200px; }
}

/* "Aplicado": el tramo que el carrito ya tiene ganado (Luis, 24-09). La etiqueta la pone producto-2026.js.
   El botón lleva border: 0 (y el borde entre botones es del hermano), así que el indicador va por
   box-shadow interior; sobre el tramo activo (fondo negro) no hace falta. La etiqueta es hija de un
   flex con wrap: pide la fila entera (flex-basis 100 %) para quedar debajo del precio, no al lado. */
.mps-2026 .mpsp-oferta-op.mpsp-oferta-aplicada { box-shadow: inset 0 0 0 1.5px #C73D2C; }
.mps-2026 .mpsp-oferta-op.mpsp-oferta-aplicada.mpsp-oferta-activa { box-shadow: none; }
.mpsp-oferta-op .mpsp-oferta-tag { flex: 0 0 100%; display: block; margin-top: 2px; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #C73D2C; }
.mpsp-oferta-op.mpsp-oferta-activa .mpsp-oferta-tag { color: #FFFFFF; }

/* Aviso de error de Woo junto al botón (24-09): p. ej. "tenemos 6 en existencia y ya tienes 4 en tu carrito". */
.mpsp-aviso { border: 1px solid #C73D2C; border-left-width: 3px; border-radius: 2px; background: #FDF3F1; padding: 10px 14px; margin: 0 0 12px; }
.mpsp-aviso p { margin: 0; font-size: 13px; line-height: 1.45; color: #8E2A1E; }
.mpsp-aviso a { color: inherit; text-decoration: underline; }
.mpsp-stock-nota { display: block; margin-top: 6px; font-size: 11px; line-height: 1.4; color: #8E2A1E; }

/* Carrusel con imágenes de beneficios y tabla (28-09): la imagen llena el cuadro, sin relleno. */
.mpsp-slide.mpsp-slide-img { padding: 0; overflow: hidden; background: #0B0B0B; }
.mpsp-slide-nutricion.mpsp-slide-img { background: #FFFFFF; }
.mpsp-slide-img .mpsp-variante { flex: 1; min-height: 0; }
.mpsp-slide-imagen { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Miniaturas con imagen real de beneficios y tabla (29-09). */
.mpsp-thumb-img { padding: 0; overflow: hidden; }
.mpsp-thumb-img img { width: 100%; height: 100%; object-fit: cover; display: block; }