/**
 * Contacto 2026 — estilos propios (prefijo mpsx-; el chrome vive en chrome-2026.css).
 * No hay mockup de esta página: sigue el lenguaje de Nosotros y Embajadores (hero oscuro con
 * trama de puntos, títulos en dos pesos, bordes finos, radios 2–6 px) con MÁS AIRE entre
 * secciones, que es lo que pidió gerencia el 18-09: 104 px de padding vertical en escritorio,
 * 56 px en móvil. Gutter maestro: max(56px, calc(50% - 664px)); móvil: 18 px. Sin las tres barras
 * del diseño viejo.
 *
 * "Que se sienta táctil": las tres acciones son tarjetas-botón con un canto duro de 5 px abajo
 * (sombra SIN desenfoque: no es una sombra blanda) que se hunde al presionar.
 *
 * El tema viejo (Bricks + Automatic.css) se cuela por wp_head. Por eso aquí:
 *  - toda <section> declara display, dirección, alineación y ancho (el tema le pone
 *    align-items:center y apila a sus hijos; un carrusel flex con overflow-x se ENSANCHA a su
 *    contenido si la sección no lo estira: align-items:stretch + width:100% + min-width:0);
 *  - todo <div> hijo directo de <section> declara su gap (el tema le pone 30 px);
 *  - botones, inputs, select y textarea declaran su caja COMPLETA con selector reforzado;
 *  - los encabezados fuerzan fuente, tamaño y transformaciones;
 *  - el foco visible se declara con !important (el tema trae *:focus{outline:none !important});
 *  - las columnas usan minmax(0, 1fr) + min-width:0 (un "1fr" no baja del min-content).
 */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.mps-contacto-2026 { background: #FFFFFF; }

/* line-height: el tema pone en <body> una longitud fija (~24.6 px) que se hereda tal cual. */
.mpsx-main { display: block; margin: 0; padding: 0; width: 100%; max-width: none; line-height: normal; }
/* El atributo hidden manda siempre: un display:flex de más abajo no debe "desocultar" nada. */
.mpsx-main [hidden] { display: none !important; }

.mpsx-main h1, .mpsx-main h2, .mpsx-main h3 { font-family: "Creato Display", Figtree, "Segoe UI", Arial, sans-serif; font-style: normal; }
.mpsx-b { font-weight: 800; }
.mpsx-l { font-weight: 300; }
.mpsx-l em { color: #C73D2C; font-style: normal; }
.mpsx-main .mpsc-eyebrow { display: block; line-height: normal; }

/* Las anclas (#mensaje, #tiendas) no deben quedar debajo del nav pegajoso (anuncio + nav ≈ 90 px). */
.mpsx-mensaje, .mpsx-tiendas { scroll-margin-top: 88px; }
body.admin-bar .mpsx-mensaje, body.admin-bar .mpsx-tiendas { scroll-margin-top: 120px; }

/* Foco visible: rojo (se ve sobre el hero oscuro y sobre el blanco, que es donde viven las tarjetas
   de acción); blanco dentro del panel de éxito y de la franja roja. */
.mps-2026 .mpsx-main a:focus-visible,
.mps-2026 .mpsx-main button:focus-visible,
.mps-2026 .mpsx-main input[type="checkbox"]:focus-visible { outline: 2px solid #C73D2C !important; outline-offset: 3px !important; }
.mps-2026 .mpsx-ok a:focus-visible,
.mps-2026 .mpsx-test a:focus-visible { outline-color: #FFFFFF !important; }

/* ============ Hero compacto ============ */

/* El padding de abajo es largo a propósito: las tarjetas de acción suben 64 px sobre el hero. */
.mpsx-hero {
	display: block; margin: 0; width: 100%; max-width: none;
	padding: 92px max(56px, calc(50% - 664px)) 148px;
	background-color: #0B0B0B; color: #FFFFFF;
	background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.2px); background-size: 3px 3px;
}
.mpsx-hero-in { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; max-width: 760px; min-width: 0; margin: 0; }
.mps-2026 .mpsx-hero h1 {
	margin: 0; padding: 0; font-size: 72px; font-weight: 400; line-height: 0.92; letter-spacing: -0.02em;
	text-transform: uppercase; color: #FFFFFF; overflow-wrap: break-word; max-width: 100%;
}
.mps-2026 .mpsx-hero h1 .mpsx-b { font-weight: 800; }
.mps-2026 .mpsx-hero h1 .mpsx-l { font-weight: 300; }
.mpsx-hero-in p { margin: 0; font-size: 18px; line-height: 1.6; color: #D6D4D1; max-width: 540px; }

/* ============ Tres acciones ============ */

.mpsx-acciones {
	position: relative; z-index: 1;
	margin: -64px 0 0; width: 100%; max-width: none; background: transparent;
	padding: 0 max(56px, calc(50% - 664px));
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
	align-items: stretch; justify-items: stretch;
}
/* Sin tarjeta de teléfono (filtro mps_2026_contacto_telefono devolvió ''): dos columnas. */
.mpsx-acciones-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.mps-2026 .mpsx-accion {
	position: relative; box-sizing: border-box; min-width: 0; min-height: 212px; margin: 0; padding: 28px;
	display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ico flecha" "txt txt";
	row-gap: 40px; column-gap: 16px; align-items: start; align-content: space-between;
	background: #FFFFFF; color: #111111; border: 1.5px solid #111111; border-radius: 6px;
	box-shadow: 0 5px 0 0 #111111; text-decoration: none; cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease, border-color .15s ease;
	-webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.mps-2026 .mpsx-accion:hover { color: #111111; }
.mps-2026 .mpsx-accion:active { transform: translateY(4px); box-shadow: 0 1px 0 0 #111111; }

.mps-2026 .mpsx-accion-wa { background: #C73D2C; color: #FFFFFF; border-color: #C73D2C; box-shadow: 0 5px 0 0 #7E261B; }
.mps-2026 .mpsx-accion-wa:hover { color: #FFFFFF; }
.mps-2026 .mpsx-accion-wa:active { box-shadow: 0 1px 0 0 #7E261B; }

.mpsx-accion-ico {
	grid-area: ico; display: flex; flex-direction: row; align-items: center; justify-content: center;
	width: 56px; height: 56px; border-radius: 4px; background: #F5F4F2; color: #111111;
}
.mpsx-accion-ico svg { display: block; flex: none; width: 28px; height: 28px; }
.mpsx-accion-wa .mpsx-accion-ico { background: rgba(255,255,255,0.16); color: #FFFFFF; }
.mpsx-accion-flecha { grid-area: flecha; display: block; font-size: 24px; font-weight: 300; line-height: 1; color: #C73D2C; transition: transform .15s ease; }
.mpsx-accion-wa .mpsx-accion-flecha { color: #FFFFFF; }

/* El "levantado" solo donde hay hover de verdad: en pantallas táctiles el :hover queda pegado
   después de tocar. El :active se repite AL FINAL del bloque: tiene la misma especificidad que el
   :hover, así que gana por orden y presionar siempre hunde la tarjeta. */
@media (hover: hover) and (pointer: fine) {
	.mps-2026 .mpsx-accion:hover { transform: translateY(-2px); box-shadow: 0 7px 0 0 #111111; }
	.mps-2026 .mpsx-accion-wa:hover { background: #B23425; border-color: #B23425; box-shadow: 0 7px 0 0 #7E261B; }
	.mps-2026 .mpsx-accion:hover .mpsx-accion-flecha { transform: translateX(4px); }
	.mps-2026 .mpsx-accion:active { transform: translateY(4px); box-shadow: 0 1px 0 0 #111111; }
	.mps-2026 .mpsx-accion-wa:active { box-shadow: 0 1px 0 0 #7E261B; }
}

.mpsx-accion-txt { grid-area: txt; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.mpsx-accion-rotulo { display: block; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; color: #8A8782; }
.mpsx-accion-wa .mpsx-accion-rotulo { color: #FFD9D3; }
.mpsx-accion-txt b { display: block; font-size: 24px; font-weight: 800; line-height: 1.05; letter-spacing: -0.015em; text-transform: uppercase; color: inherit; overflow-wrap: break-word; max-width: 100%; }
.mpsx-accion-dato { display: block; font-size: 15px; font-weight: 500; line-height: 1.4; color: #8A8782; overflow-wrap: anywhere; max-width: 100%; }
.mpsx-accion-wa .mpsx-accion-dato { color: #FFE4DF; }
.mpsx-accion-num { font-size: 18px; font-weight: 700; letter-spacing: 0.01em; color: #111111; white-space: nowrap; }

/* ============ Formulario ============ */

.mpsx-mensaje {
	margin: 0; width: 100%; max-width: none; background: #FFFFFF;
	padding: 112px max(56px, calc(50% - 664px)) 104px;
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 72px;
	align-items: start; justify-items: stretch;
}
.mpsx-mensaje-izq { position: sticky; top: 122px; display: flex; flex-direction: column; align-items: stretch; gap: 24px; min-width: 0; }
body.admin-bar .mpsx-mensaje-izq { top: 154px; }
.mpsx-mensaje-izq > p { margin: 0; font-size: 16px; line-height: 1.6; color: #111111; max-width: 440px; }
.mps-2026 .mpsx-notas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid #E4E2E0; }
.mps-2026 .mpsx-notas li {
	position: relative; list-style: none; margin: 0; padding: 15px 0 15px 22px; border-bottom: 1px solid #E4E2E0;
	font-size: 14px; line-height: 1.5; color: #111111;
}
.mps-2026 .mpsx-notas li::before { content: ""; position: absolute; left: 0; top: 22px; width: 8px; height: 8px; border-radius: 1px; background: #C73D2C; }
.mps-2026 .mpsx-notas li::marker { content: ""; }
.mpsx-mensaje-der { display: block; min-width: 0; }

.mpsx-form {
	margin: 0; min-width: 0; background: #FFFFFF; border: 1px solid #E4E2E0; border-radius: 6px; padding: 36px;
	display: flex; flex-direction: column; align-items: stretch; gap: 20px;
}
/* Honeypot: fuera de pantalla (no display:none: algunos bots saltan los campos ocultos con display). */
.mpsx-hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.mpsx-aviso {
	display: block; padding: 14px 16px; border: 1px solid #E4E2E0; border-left: 4px solid #C73D2C; border-radius: 2px;
	background: #FAFAF9; font-size: 14px; font-weight: 600; line-height: 1.5; color: #111111;
}

.mpsx-campos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 16px; align-items: start; }
.mpsx-campo { margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.mps-2026 .mpsx-campo label {
	display: block; margin: 0; padding: 0; cursor: default;
	font-size: 11px; font-weight: 700; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; color: #8A8782;
}
.mpsx-opcional { font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: #9A9A9A; }

.mps-2026 .mpsx-form input[type="text"],
.mps-2026 .mpsx-form input[type="tel"],
.mps-2026 .mpsx-form input[type="email"],
.mps-2026 .mpsx-form select,
.mps-2026 .mpsx-form textarea {
	display: block; box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; margin: 0;
	height: 52px; min-height: 0; padding: 0 14px;
	border: 1px solid #C9C6C1; border-radius: 2px; background-color: #FFFFFF; background-image: none; box-shadow: none; outline: none;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	font-family: "Creato Display", Figtree, "Segoe UI", Arial, sans-serif;
	font-size: 15px; font-weight: 400; line-height: normal; letter-spacing: 0; text-transform: none; color: #111111;
	transition: border-color .15s ease;
}
/* Select con flecha propia: appearance:none borra la nativa en todos los navegadores. */
.mps-2026 .mpsx-form select {
	padding: 0 42px 0 14px; cursor: pointer; text-overflow: ellipsis;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23111111' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
}
.mps-2026 .mpsx-form select option { color: #111111; background: #FFFFFF; }
/* Bricks trae "textarea{line-height:inherit!important}" dentro de una capa: no se puede ganar.
   El 1.5 del diseño se le da al envoltorio y el textarea lo hereda. */
.mpsx-area { display: block; margin: 0; padding: 0; line-height: 1.5; }
.mps-2026 .mpsx-form textarea { height: auto; min-height: 140px; padding: 14px; line-height: 1.5; resize: vertical; }
.mps-2026 .mpsx-form input[type="text"]:focus,
.mps-2026 .mpsx-form input[type="tel"]:focus,
.mps-2026 .mpsx-form input[type="email"]:focus,
.mps-2026 .mpsx-form select:focus,
.mps-2026 .mpsx-form textarea:focus { border-color: #111111; box-shadow: none; }
/* En los campos de texto el navegador muestra :focus-visible también al hacer clic: el anillo va
   pegado al borde (offset -1px) y en negro, así se ve como un borde grueso y no como una alerta. */
.mps-2026 .mpsx-form input:focus-visible,
.mps-2026 .mpsx-form select:focus-visible,
.mps-2026 .mpsx-form textarea:focus-visible { outline: 2px solid #111111 !important; outline-offset: -1px !important; }
.mps-2026 .mpsx-form input[type="checkbox"]:focus-visible { outline: 2px solid #C73D2C !important; outline-offset: 3px !important; }
/* Misma especificidad que la regla base (clase + clase + elemento + atributo): gana por orden. */
.mps-2026 .mpsx-form input[aria-invalid="true"],
.mps-2026 .mpsx-form select[aria-invalid="true"],
.mps-2026 .mpsx-form textarea[aria-invalid="true"] { border-color: #C73D2C; }
.mps-2026 .mpsx-form input::placeholder, .mps-2026 .mpsx-form textarea::placeholder { color: #9A9A9A; opacity: 1; }

.mpsx-pie-campo { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; }
.mpsx-cuenta { display: block; flex: none; margin-left: auto; font-size: 12px; font-weight: 500; line-height: 1.4; color: #8A8782; font-variant-numeric: tabular-nums; }
.mpsx-error { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.4; letter-spacing: 0; text-transform: none; color: #C73D2C; }
.mpsx-error-consent { margin-top: -10px; }

/* Casilla grande: toda la fila es tocable y mide 48 px o más. */
.mps-2026 .mpsx-consent {
	margin: 0; padding: 0; min-height: 48px; display: flex; flex-direction: row; align-items: center; gap: 14px; cursor: pointer;
	font-size: 13.5px; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; color: #111111;
}
.mps-2026 .mpsx-consent input[type="checkbox"] {
	flex: none; box-sizing: border-box; width: 24px; height: 24px; min-width: 24px; min-height: 0; margin: 0; padding: 0; cursor: pointer;
	accent-color: #C73D2C; -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: auto;
}
.mpsx-consent span { display: block; min-width: 0; }

/* Botón del design system (Button, variante primary, ancho completo). Es un <button>: el tema
   viejo le mete display:block, padding y text-align:left, así que se declara todo. */
.mps-2026 .mpsx-form .mpsx-enviar {
	display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px;
	box-sizing: border-box; width: 100%; min-width: 0; height: 58px; min-height: 0; margin: 0; padding: 0 28px;
	border: 1.5px solid transparent; border-radius: 2px; background: #C73D2C; color: #FFFFFF; box-shadow: none; cursor: pointer;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	font-family: "Creato Display", Figtree, "Segoe UI", Arial, sans-serif;
	font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; text-decoration: none; white-space: normal;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
	touch-action: manipulation;
}
.mps-2026 .mpsx-form .mpsx-enviar:hover, .mps-2026 .mpsx-form .mpsx-enviar:focus { background: #B23425; color: #FFFFFF; box-shadow: none; }
.mps-2026 .mpsx-form .mpsx-enviar:disabled { opacity: 0.6; cursor: default; }

/* ---- Panel "Mensaje recibido" (ocupa el lugar del formulario) ----
   wp-components trae [role="region"]{position:relative}: aquí no molesta, nada se posiciona contra el panel. */

.mpsx-ok {
	background-color: #0B0B0B; color: #FFFFFF; border-radius: 6px; padding: 52px 44px; min-height: 420px; min-width: 0; outline: none;
	display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 22px;
	background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.2px); background-size: 3px 3px;
}
.mps-2026 .mpsx-ok h2 { margin: 0; padding: 0; font-size: 56px; font-weight: 400; line-height: 0.92; letter-spacing: -0.02em; text-transform: uppercase; color: #FFFFFF; overflow-wrap: anywhere; max-width: 100%; }
.mpsx-ok p { margin: 0; font-size: 16px; line-height: 1.6; color: #D6D4D1; max-width: 480px; }
.mpsx-ok p b { color: #FFFFFF; font-weight: 700; }
.mpsx-ok p .mpsx-ok-tel-num { white-space: nowrap; }
.mpsx-ok-ctas { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 6px; }

/* ============ Tiendas ============ */

/* align-items:stretch + width:100%: si la sección centrara a sus hijos, el carrusel móvil
   (flex + overflow-x) se ensancharía a su contenido y rompería la página. */
.mpsx-tiendas {
	margin: 0; width: 100%; max-width: none;
	background: #F5F4F2; border-top: 1px solid #E4E2E0; border-bottom: 1px solid #E4E2E0;
	padding: 104px max(56px, calc(50% - 664px)) 112px;
	display: flex; flex-direction: column; align-items: stretch; gap: 44px;
}
.mpsx-tiendas-head { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; width: 100%; min-width: 0; }
.mpsx-tiendas-head > p { margin: 0; font-size: 15px; line-height: 1.55; color: #8A8782; max-width: 360px; text-align: right; }
.mpsx-tiendas-pista { display: none; }

.mpsx-tiendas-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; justify-items: stretch; width: 100%; min-width: 0; }
.mpsx-tienda {
	margin: 0; padding: 0; min-width: 0; overflow: hidden;
	display: flex; flex-direction: column; align-items: stretch; gap: 0;
	background: #FFFFFF; border: 1px solid #E4E2E0; border-radius: 6px; transition: border-color .15s ease;
}
.mpsx-tienda:hover { border-color: #111111; }

/* 16/10 con el truco del padding (62.5 % del ancho): no depende de aspect-ratio. flex:none para
   que la columna flex de la tarjeta nunca la encoja. */
.mpsx-tienda-foto {
	position: relative; display: block; flex: none; width: 100%; height: 0; padding: 62.5% 0 0; overflow: hidden;
	background-color: #0B0B0B;
	background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.2px); background-size: 3px 3px;
}
.mpsx-tienda-rotulo {
	position: absolute; left: 22px; right: 22px; bottom: 20px; display: block;
	font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; color: #FFFFFF; overflow-wrap: break-word;
}
/* border-radius: 0 — el tema redondea toda <img>; aquí el redondeo lo da la tarjeta. */
.mpsx-tienda-foto img {
	position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; margin: 0;
	object-fit: cover; object-position: center; display: block; border-radius: 0;
	background: #0B0B0B; transition: transform .45s ease;
}
.mpsx-tienda:hover .mpsx-tienda-foto img { transform: scale(1.04); }

.mpsx-tienda-info { display: flex; flex-direction: column; align-items: stretch; gap: 12px; flex: 1 1 auto; min-width: 0; padding: 24px 22px 22px; }
.mps-2026 .mpsx-tienda-nombre { margin: 0 0 2px; padding: 0; font-size: 22px; font-weight: 800; line-height: 1.05; letter-spacing: -0.015em; text-transform: uppercase; color: #111111; overflow-wrap: break-word; }
.mpsx-tienda-fila { margin: 0; padding: 0; display: flex; flex-direction: row; align-items: flex-start; gap: 10px; min-width: 0; font-size: 14px; line-height: 1.5; color: #111111; }
.mpsx-tienda-fila svg, .mpsx-tienda-tel svg { display: block; flex: none; width: 18px; height: 18px; margin-top: 1.5px; color: #8A8782; }
.mpsx-tienda-fila > span { display: block; min-width: 0; overflow-wrap: break-word; }
.mpsx-tienda-tramo { display: block; }
/* min-height 48 px: es un enlace tocable. El margen negativo compensa el alto extra para que la
   fila del teléfono respire igual que las de arriba. */
.mps-2026 .mpsx-tienda-tel {
	display: flex; flex-direction: row; align-items: center; gap: 10px; align-self: flex-start; min-height: 48px; margin: -8px 0; padding: 0;
	font-size: 15px; font-weight: 700; line-height: 1.3; color: #111111; text-decoration: none; white-space: nowrap;
	transition: color .15s ease;
}
.mpsx-tienda-tel svg { margin-top: 0; }
.mps-2026 .mpsx-tienda-tel:hover { color: #C73D2C; }
.mps-2026 .mpsx-tienda-tel:hover svg { color: #C73D2C; }
/* margin-top:auto: el botón de Waze queda al pie aunque las direcciones midan distinto. */
.mps-2026 .mpsx-tienda-waze {
	display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px;
	box-sizing: border-box; width: 100%; height: 52px; margin: auto 0 0; padding: 0 20px;
}
.mpsx-tienda-waze svg { display: block; flex: none; width: 18px; height: 18px; }

/* ============ Franja del test ============ */

.mpsx-test {
	margin: 0; width: 100%; max-width: none; background: #C73D2C; color: #FFFFFF;
	padding: 56px max(56px, calc(50% - 664px));
	display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px 40px;
}
.mpsx-test-t { margin: 0; min-width: 0; font-size: 38px; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; color: #FFFFFF; }
.mpsx-test-t span { font-weight: 300; }
.mpsx-test-t b { font-weight: 800; }
.mps-2026 .mpsx-test-btn {
	display: flex; flex-direction: row; align-items: center; justify-content: center;
	box-sizing: border-box; height: auto; min-height: 56px; padding: 12px 30px; line-height: 1.2; text-align: center; white-space: normal;
	background: #0B0B0B; color: #FFFFFF; border-color: #0B0B0B;
}
.mps-2026 .mpsx-test-btn:hover { background: #FFFFFF; color: #111111; border-color: #FFFFFF; }

/* ============ Intermedio ============ */

@media (max-width: 1180px) {
	.mps-2026 .mpsx-hero h1 { font-size: 60px; }
	.mps-2026 .mpsx-accion { padding: 24px; min-height: 196px; }
	.mpsx-accion-txt b { font-size: 21px; }
	.mpsx-mensaje { gap: 44px; }
	.mpsx-form { padding: 30px; }
	.mpsx-tiendas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mpsx-test-t { font-size: 32px; }
}

/* ============ Tablet y móvil: una columna ============ */

@media (max-width: 900px) {
	/* En móvil la barra pegajosa es solo el nav (~56 px), sin la tira de anuncio. */
	.mpsx-mensaje, .mpsx-tiendas { scroll-margin-top: 56px; }
	body.admin-bar .mpsx-mensaje, body.admin-bar .mpsx-tiendas { scroll-margin-top: 102px; }

	.mpsx-hero { padding: 56px 18px 84px; }
	.mpsx-hero-in { gap: 18px; max-width: none; }
	.mps-2026 .mpsx-hero h1 { font-size: 46px; }
	.mpsx-hero-in p { font-size: 15px; line-height: 1.55; max-width: none; }

	/* Acciones apiladas: ícono · texto · flecha en una fila, 84 px de alto mínimo. */
	.mpsx-acciones, .mpsx-acciones-2 { margin-top: -40px; padding: 0 18px; grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.mps-2026 .mpsx-accion {
		min-height: 84px; padding: 16px 18px 16px 16px;
		grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico txt flecha";
		row-gap: 0; column-gap: 16px; align-items: center; align-content: center;
	}
	/* Sin la caja gris del ícono (caja dentro de caja): el título gana ~24px y "ESCRIBINOS UN CORREO"
	   no se parte. El 2.º selector gana por orden a la regla base de WhatsApp (mismo peso). */
	.mpsx-accion-ico, .mpsx-accion-wa .mpsx-accion-ico { width: 28px; height: 28px; background: none; border-radius: 0; }
	.mpsx-accion-txt { gap: 4px; }
	/* El rótulo en mayúsculas repetía el título ("WHATSAPP" / "Escribinos por WhatsApp"). */
	.mpsx-accion-rotulo { display: none; }
	.mpsx-accion-txt b { font-size: 18px; }
	.mpsx-accion-dato { font-size: 13.5px; }
	/* "Te responde una persona, no un bot": el hero ya dice "sin bots". Teléfono y correo se quedan (son datos reales). */
	.mpsx-accion-wa .mpsx-accion-dato { display: none; }
	.mpsx-accion-num { font-size: 15px; }
	/* Flecha en negro (el rojo queda para el CTA); la de WhatsApp sigue blanca por su regla más específica. */
	.mpsx-accion-flecha { font-size: 22px; color: #111111; }
	/* Canto duro de 3px (antes 5): se conserva lo táctil, más liviano. Va antes del bloque de
	   reduced-motion del final, que sigue anulando el transform. */
	.mps-2026 .mpsx-accion { box-shadow: 0 3px 0 0 #111111; }
	.mps-2026 .mpsx-accion-wa { box-shadow: 0 3px 0 0 #7E261B; }
	.mps-2026 .mpsx-accion:active { transform: translateY(2px); }

	/* Secciones con título a 72px arriba y abajo (sistema móvil). */
	.mpsx-mensaje { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 72px 18px; }
	.mpsx-mensaje-izq, body.admin-bar .mpsx-mensaje-izq { position: static; top: auto; gap: 18px; }
	.mpsx-mensaje-izq > p { font-size: 15px; line-height: 1.55; max-width: none; }
	/* Notas: queda solo la de privacidad, como nota gris sin viñeta roja ni divisores. La 1 ("Lo lee
	   una persona…") se decía por tercera vez y la 3 ("¿Preferís chatear?…") repite las tarjetas de
	   arriba. Depende del orden de las <li> en templates/contacto-2026-page.php. */
	.mps-2026 .mpsx-notas { border-top: 0; }
	.mps-2026 .mpsx-notas li { padding: 0; border-bottom: 0; font-size: 13.5px; line-height: 1.6; color: #8A8782; }
	.mps-2026 .mpsx-notas li::before { content: none; }
	.mps-2026 .mpsx-notas li:nth-child(1), .mps-2026 .mpsx-notas li:nth-child(3) { display: none; }

	/* 24px entre campos (antes 18); la etiqueta queda a 8px de su campo (gap de .mpsx-campo). */
	.mpsx-form { border: 0; border-radius: 0; padding: 0; gap: 24px; }
	.mpsx-campos { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.mps-2026 .mpsx-campo label { font-size: 12px; letter-spacing: 0.08em; }
	/* maxlength=1500 ya limita y el contador es aria-hidden; el JS solo le quita [hidden], no pelea con esto. */
	.mpsx-cuenta { display: none; }
	/* 16 px: con menos, iOS hace zoom al enfocar un campo. */
	.mps-2026 .mpsx-form input[type="text"],
	.mps-2026 .mpsx-form input[type="tel"],
	.mps-2026 .mpsx-form input[type="email"],
	.mps-2026 .mpsx-form select,
	.mps-2026 .mpsx-form textarea { font-size: 16px; }
	.mps-2026 .mpsx-form input[type="text"],
	.mps-2026 .mpsx-form input[type="tel"],
	.mps-2026 .mpsx-form input[type="email"],
	.mps-2026 .mpsx-form select { height: 54px; }
	.mps-2026 .mpsx-consent { align-items: flex-start; font-size: 13.5px; }
	.mps-2026 .mpsx-consent input[type="checkbox"] { margin-top: 1px; }
	/* Con el gap de 24 el error sigue pegado a la casilla (8px). */
	.mpsx-error-consent { margin-top: -16px; }

	.mpsx-ok { padding: 32px 22px; gap: 16px; min-height: 0; align-items: stretch; justify-content: flex-start; }
	.mps-2026 .mpsx-ok h2 { font-size: 40px; }
	.mpsx-ok p { font-size: 14.5px; line-height: 1.55; max-width: none; }
	.mpsx-ok-ctas { margin-top: 0; flex-direction: column; align-items: stretch; gap: 12px; }
	.mpsx-ok-ctas .mpsc-btn { width: 100%; }

	/* Tiendas: carrusel horizontal con snap. El scroll vive DENTRO del carrusel, no en la página:
	   la sección no tiene padding lateral y recorta lo que sobre. */
	/* gap 26 + los 6px de arriba del carrusel = 32 del título a las tarjetas (sistema móvil). */
	.mpsx-tiendas { padding: 72px 0; gap: 26px; overflow: hidden; }
	.mpsx-tiendas-head { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 10px; padding: 0 18px; }
	.mpsx-tiendas-head > p { font-size: 14px; max-width: none; text-align: left; }
	/* Sin la pista "Deslizá para ver las 6 →": la 2.ª tarjeta ya asoma y la bajada dice "6 tiendas físicas". */
	.mpsx-tiendas-pista { display: none; }
	/* overflow-x:auto arrastra overflow-y:auto y recortaría el anillo de foco: el padding vertical le da aire. */
	.mpsx-tiendas-grid {
		display: flex; flex-direction: row; align-items: stretch; gap: 12px; width: 100%; max-width: 100%; min-width: 0;
		overflow-x: auto; overflow-y: hidden; padding: 6px 18px 10px; scroll-padding-left: 18px; scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none;
	}
	.mpsx-tiendas-grid::-webkit-scrollbar { display: none; }
	/* El padding derecho de un contenedor con scroll no siempre cuenta: este tope deja aire tras la última. */
	.mpsx-tiendas-grid::after { content: ""; display: block; flex: none; width: 6px; }
	.mpsx-tienda { flex: none; width: 300px; max-width: 84vw; scroll-snap-align: start; }
	.mpsx-tienda:hover .mpsx-tienda-foto img { transform: none; }
	.mpsx-tienda-info { padding: 20px 18px 18px; }
	.mps-2026 .mpsx-tienda-nombre { font-size: 20px; }
	.mpsx-tienda-rotulo { font-size: 22px; left: 18px; right: 18px; bottom: 16px; }

	/* Franja de una sola idea: 48px, gap 24 de la escala. */
	.mpsx-test { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 24px; padding: 48px 18px; }
	.mpsx-test-t { font-size: 30px; }
	.mpsx-test-t span, .mpsx-test-t b { display: block; }
	.mps-2026 .mpsx-test-btn { width: 100%; padding: 12px 20px; }
}

@media (max-width: 420px) {
	/* "DE TU ENTRENO." a 46 px no cabe en 339 px: baja un punto para no partir la palabra. */
	.mps-2026 .mpsx-hero h1 { font-size: 38px; letter-spacing: -0.03em; }
	.mps-2026 .mpsx-ok h2 { font-size: 34px; }
}

/* Al FINAL a propósito: misma especificidad que las reglas de arriba, gana por orden. */
@media (prefers-reduced-motion: reduce) {
	.mps-2026 .mpsx-accion, .mpsx-accion-flecha, .mpsx-tienda, .mpsx-tienda-foto img, .mps-2026 .mpsx-tienda-tel { transition: none; }
	.mps-2026 .mpsx-accion:hover, .mps-2026 .mpsx-accion:active { transform: none; }
	.mps-2026 .mpsx-accion:hover .mpsx-accion-flecha { transform: none; }
	.mpsx-tienda:hover .mpsx-tienda-foto img { transform: none; }
}

/* QA 21-09: un elemento absoluto (p. ej. .mpsc-sr) dentro de un carrusel con overflow SOLO queda
   recortado si su bloque contenedor está dentro del carrusel. Sin position en la tarjeta ni en la
   grilla, los .mpsc-sr de las últimas tiendas se ubicaban respecto del <body> (x ≈ 1600) y en el
   teléfono la página entera se ensanchaba a 1625px. */
.mpsx-tiendas-grid, .mpsx-tienda { position: relative; }