/**
 * Embajadores 2026 — estilos propios (el chrome vive en chrome-2026.css).
 * Escritorio: medidas transcritas 1:1 de design-2026/templates/embajadores/Embajadores.dc.html.
 * De 900 px para abajo: las de templates/embajadores-mobile/EmbajadoresMobile.dc.html.
 *
 * El tema viejo (Bricks + Automatic.css) se cuela por wp_head: fuerza otra fuente en los
 * encabezados, centra y apila lo que vive dentro de <section>, y le pone display, padding y
 * alineación propios a botones, inputs y selects. Por eso aquí TODO contenedor flex declara
 * dirección y alineación, los encabezados declaran su fuente y los controles del formulario
 * declaran caja, borde, fondo, alto y tipografía completos.
 */

/* Aire (gerencia, 18-09-2026): la página se sentía "muy comprimida" frente a la referencia.
   Secciones a 104px de padding vertical en escritorio y 56px en móvil (los mockups traían 84 / 44),
   y al menos 36–40px entre el título de sección y su contenido. */

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

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

.mpse-main { display: block; margin: 0; padding: 0; width: 100%; max-width: none; }
/* El atributo hidden manda siempre: un display:flex de más abajo no debe "desocultar" nada. */
.mpse-main [hidden] { display: none !important; }

.mpse-main h1, .mpse-main h2 { font-family: "Creato Display", Figtree, "Segoe UI", Arial, sans-serif; font-style: normal; }
.mpse-b { font-weight: 800; }
.mpse-l { font-weight: 300; }
.mpse-l em { color: #C73D2C; }

/* Automatic.css le pone a body un line-height que computa a un largo fijo (24.6 px) y se hereda
   tal cual: la etiqueta roja mediría 24.6 px en vez de los 14 del mockup (line-height normal). */
.mpse-main .mpsc-eyebrow { line-height: normal; }

/* Textos y botones que solo existen en una de las dos versiones del mockup. */
.mps-embajadores-2026 .mpse-solo-mov { display: none; }

/* Las anclas (#equipo, #como, #aplicar) no deben quedar debajo del nav pegajoso. */
.mpse-equipo, .mpse-como, .mpse-aplicar { scroll-margin-top: 88px; }
body.admin-bar .mpse-equipo, body.admin-bar .mpse-como, body.admin-bar .mpse-aplicar { scroll-margin-top: 120px; }

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

.mpse-hero { display: block; margin: 0; padding: 0; width: 100%; max-width: none; background: #0B0B0B; color: #FFFFFF; }
/* Hero a sangre completa (Luis, 22-09): foto de campaña del programa detrás de todo el bloque y velo
   degradado hacia el texto, como el hero del home; sin columna de foto ni corte duro. */
.mpse-hero-in {
	position: relative; display: grid; grid-template-columns: max(56px, calc(50% - 664px)) minmax(0, 1fr); align-items: stretch;
	min-height: 640px; width: 100%; max-width: none; margin: 0; overflow: hidden;
}
.mpse-hero-txt {
	position: relative; z-index: 1; grid-column: 2; max-width: 640px; padding: 104px 56px 104px 0; min-width: 0;
	display: flex; flex-direction: column; gap: 26px; justify-content: center; align-items: flex-start;
}
.mpse-hero-txt .mpsc-eyebrow { font-size: 12px; }
/* "EMBAJADORES" es UNA palabra de 11 letras en peso 800: no se puede partir (el titular viejo, "Los que
   empujan la marca", sí). A 76px mide ≈570px y la columna de texto solo los tiene desde ≈1320px de
   pantalla; por debajo el tamaño acompaña al ancho para que la palabra no se monte sobre la foto.
   La primera declaración es el respaldo para navegadores sin clamp(). */
.mpse-hero-txt h1 {
	margin: 0; font-size: 60px; font-size: clamp(46px, calc(6.8vw - 14px), 76px);
	line-height: 0.92; letter-spacing: -0.02em; text-transform: uppercase; color: #FFFFFF;
}
.mpse-hero-txt p { margin: 0; font-size: 18px; line-height: 1.6; max-width: 520px; color: #D6D4D1; }
.mpse-hero-txt p b, .mpse-hero-txt p strong { color: #FFFFFF; font-weight: 700; }
.mpse-hero-ctas { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 6px; }

.mpse-hero-foto { position: absolute; inset: 0; z-index: 0; display: block; overflow: hidden; min-width: 0; }
/* border-radius: 0 — Automatic.css redondea todo <img> (:where(img)); esta foto va a sangre. Los atletas van a la derecha. */
.mpse-hero-foto img {
	position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 70% 40%; display: block;
	border-radius: 0;
	filter: contrast(1.05) saturate(0.92);
}
.mpse-hero-velo {
	position: absolute; inset: 0; display: block;
	background:
		linear-gradient(90deg, rgba(11,11,11,0.9) 0%, rgba(11,11,11,0.55) 38%, rgba(11,11,11,0) 72%),
		linear-gradient(180deg, rgba(11,11,11,0.3) 0%, rgba(11,11,11,0) 30%, rgba(11,11,11,0) 55%, rgba(11,11,11,0.7) 100%);
}

/* ============ El equipo ============ */

.mpse-equipo {
	margin: 0; width: 100%; max-width: none; background: #FFFFFF;
	padding: 104px max(56px, calc(50% - 664px));
	display: flex; flex-direction: column; align-items: stretch; gap: 40px;
}
.mpse-equipo-head { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; width: 100%; }
.mpse-equipo-head p { margin: 0; font-size: 14px; line-height: 1.55; color: #8A8782; max-width: 380px; text-align: right; }

.mpse-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: start; width: 100%; }
.mpse-emb { margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.mpse-emb-foto { position: relative; display: block; border-radius: 6px; overflow: hidden; background: #0B0B0B; height: 400px; }
.mpse-emb-foto img {
	position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top; display: block;
	border-radius: 0; /* el redondeo de 6 px lo da el contenedor, no el del tema sobre la imagen */
	filter: saturate(0.92); transition: transform .45s ease;
}
.mpse-emb:hover .mpse-emb-foto img { transform: scale(1.05); }
.mpse-emb-velo { position: absolute; inset: 0; display: block; background: linear-gradient(180deg, rgba(11,11,11,0) 55%, rgba(11,11,11,0.85) 100%); }
.mpse-emb-id { position: absolute; left: 18px; right: 18px; bottom: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.mpse-emb-nombre { color: #FFFFFF; font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.2; }
.mpse-emb-disciplina { color: #D6D4D1; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.3; }

.mpse-emb-pie { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 0; padding: 0; }
.mpse-emb-pie blockquote {
	margin: 0; padding: 0; border: 0; background: none; quotes: none;
	font-size: 14px; line-height: 1.55; font-weight: 400; font-style: normal; color: #111111;
}
.mpse-emb-pie blockquote::before, .mpse-emb-pie blockquote::after { content: none; }
.mpse-emb-chips { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.mpse-chip {
	display: inline-flex; flex-direction: row; align-items: center; gap: 8px; align-self: flex-start;
	border: 1px solid #E4E2E0; border-radius: 2px; padding: 6px 10px; background: #FFFFFF;
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.3; color: #8A8782; text-decoration: none;
}
.mpse-chip span { color: #C73D2C; }
.mpse-chip-link { transition: border-color .15s ease, color .15s ease; }
.mpse-chip-link:hover { border-color: #111111; color: #111111; }

/* ============ Cómo funciona ============ */

.mpse-como {
	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));
	display: flex; flex-direction: column; align-items: stretch; gap: 40px;
}
.mpse-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; width: 100%; }
.mpse-paso {
	background: #FFFFFF; border: 1px solid #E4E2E0; border-radius: 6px; padding: 26px 24px; min-width: 0;
	display: flex; flex-direction: column; align-items: stretch; gap: 40px;
}
.mpse-paso-num { font-size: 46px; font-weight: 300; color: #8A8782; line-height: 1; }
.mpse-paso-txt { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.mpse-paso-titulo { font-size: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.2; color: #111111; }
.mpse-paso-detalle { font-size: 13.5px; color: #8A8782; line-height: 1.55; }

/* ============ Aplicar ============ */

.mpse-aplicar {
	margin: 0; width: 100%; max-width: none; background: #FFFFFF;
	padding: 104px max(56px, calc(50% - 664px));
	display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: start;
}
.mpse-aplicar-izq { position: sticky; top: 130px; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
body.admin-bar .mpse-aplicar-izq { top: 162px; }
.mpse-aplicar-izq > p { margin: 0; font-size: 16px; line-height: 1.6; color: #111111; max-width: 440px; }
.mpse-notas { display: flex; flex-direction: column; align-items: stretch; border-top: 1px solid #E4E2E0; }
.mpse-nota {
	display: flex; flex-direction: row; align-items: flex-start; gap: 12px;
	padding: 14px 0; border-bottom: 1px solid #E4E2E0; font-size: 13.5px; line-height: 1.5; color: #111111;
}
.mpse-aplicar-der { min-width: 0; display: block; }

/* ---- Formulario ---- */

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

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

.mpse-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.mpse-campo {
	margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 6px; cursor: default;
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; line-height: normal; color: #8A8782;
}

.mpse-form input[type="text"],
.mpse-form input[type="tel"],
.mpse-form select,
.mpse-form textarea {
	display: block; box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; margin: 0;
	height: 46px; min-height: 0; padding: 0 12px;
	border: 1px solid #E4E2E0; border-radius: 2px; background: #FFFFFF; box-shadow: none; outline: none;
	font-family: "Creato Display", Figtree, "Segoe UI", Arial, sans-serif;
	font-size: 14px; font-weight: 400; line-height: normal; letter-spacing: 0; text-transform: none; color: #111111;
	transition: border-color .15s ease;
}
.mpse-form select { padding: 0 10px; cursor: pointer; background-image: none; -webkit-appearance: menulist; -moz-appearance: menulist; appearance: auto; }
/* Bricks trae "textarea{line-height:inherit!important}" dentro de una capa: un !important en capa
   le gana a cualquier declaración sin capa, así que el 1.5 del diseño no se puede imponer en el
   textarea. Se lo damos a su envoltorio y el textarea lo hereda (4 filas × 21 px = 110 px de alto,
   como el mockup). El line-height del textarea queda de respaldo para cuando el tema no esté. */
.mpse-area { display: block; margin: 0; padding: 0; line-height: 1.5; }
.mpse-form textarea { height: auto; padding: 12px; line-height: 1.5; resize: vertical; }
.mpse-form input[type="text"]:focus,
.mpse-form input[type="tel"]:focus,
.mpse-form select:focus,
.mpse-form textarea:focus { border-color: #111111; outline: none; box-shadow: none; }
.mpse-form input::placeholder, .mpse-form textarea::placeholder { color: #9A9A9A; opacity: 1; }

.mpse-campo-porque { width: 100%; }

.mpse-error { display: block; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0; text-transform: none; color: #C73D2C; }
.mpse-error-consent { font-size: 11.5px; margin-top: -10px; }

.mpse-consent {
	margin: 0; display: flex; flex-direction: row; align-items: flex-start; gap: 10px; cursor: pointer;
	font-size: 12.5px; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; color: #111111;
}
.mpse-consent input[type="checkbox"] {
	flex: none; width: 16px; height: 16px; min-width: 16px; min-height: 0; margin: 2px 0 0; padding: 0; cursor: pointer;
	accent-color: #C73D2C; -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: auto;
}

/* 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. */
.mpse-form .mpse-enviar {
	display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px;
	box-sizing: border-box; width: 100%; height: 54px; 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;
	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;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.mpse-form .mpse-enviar:hover { background: #B23425; color: #FFFFFF; }
.mpse-form .mpse-enviar:disabled { opacity: 0.6; cursor: default; }

.mpse-pie { margin: 0; font-size: 11.5px; color: #8A8782; text-align: center; line-height: 1.5; }

/* ---- Panel "Aplicación recibida" ---- */

.mpse-ok {
	background-color: #0B0B0B; color: #FFFFFF; border-radius: 6px; padding: 48px 44px; min-height: 420px; 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;
}
.mpse-ok .mpsc-eyebrow { font-size: 12px; }
.mpse-ok h2 { margin: 0; font-size: 56px; line-height: 0.92; letter-spacing: -0.02em; text-transform: uppercase; color: #FFFFFF; overflow-wrap: anywhere; }
.mpse-ok p { margin: 0; font-size: 16px; line-height: 1.6; color: #D6D4D1; max-width: 480px; }
.mpse-ok p b, .mpse-ok p strong { color: #FFFFFF; font-weight: 700; }
.mpse-ok p .mpse-ok-tel-num { white-space: nowrap; }
.mpse-ok-filas { display: flex; flex-direction: column; align-items: stretch; border-top: 1px solid #1E1E1E; width: 100%; max-width: 480px; }
.mpse-ok-fila {
	display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 16px;
	padding: 12px 0; border-bottom: 1px solid #1E1E1E; font-size: 13px; line-height: 1.4;
}
.mpse-ok-fila > span { color: #9A9A9A; }
.mpse-ok-fila > b { font-weight: 700; color: #FFFFFF; text-align: right; overflow-wrap: anywhere; }
.mpse-ok-ctas { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 6px; }

/* ============ Intermedio (entre el mockup móvil y el de escritorio) ============ */

@media (max-width: 1180px) {
	/* El H1 ya no necesita un escalón aquí: su tamaño es fluido (ver arriba). */
	.mpse-grid { grid-template-columns: repeat(3, 1fr); }
	.mpse-aplicar { gap: 40px; }
}

/* ============ Móvil — EmbajadoresMobile.dc.html ============
   Descongestión móvil (21-09): secciones a 72px (antes 56) y 32px del título de sección a su
   contenido (antes 36), pasos sin cajas, formulario con más aire e inputs a 16px. Escritorio no cambia. */

@media (max-width: 900px) {
	.mps-embajadores-2026 .mpse-solo-desk { display: none; }
	.mps-embajadores-2026 .mpse-solo-mov { display: block; }

	/* El mockup móvil cierra con el footer: sin TrustBar. */
	.mps-embajadores-2026 .mpsc-trust { display: none; }

	.mpse-equipo, .mpse-como, .mpse-aplicar { scroll-margin-top: 56px; }
	body.admin-bar .mpse-equipo, body.admin-bar .mpse-como, body.admin-bar .mpse-aplicar { scroll-margin-top: 102px; }

	/* Hero: la foto de fondo y el texto abajo. min-height (no height): si el equipo alarga el
	   texto, el hero crece en vez de cortarlo. */
	.mpse-hero-in {
		display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end;
		min-height: 520px; padding: 140px 18px 32px; overflow: hidden;
	}
	.mpse-hero-foto { position: absolute; inset: 0; z-index: 0; }
	/* El eyebrow rojo caía sobre la parte clara de la foto (el velo apenas oscurecía a esa altura):
	   ahora es oscuro desde el 46% del alto y la mitad de arriba de la foto se sigue viendo. */
	.mpse-hero-velo { background: linear-gradient(180deg, rgba(11,11,11,0.15) 0%, rgba(11,11,11,0) 18%, rgba(11,11,11,0.86) 46%, rgba(11,11,11,0.96) 100%); }
	.mpse-hero-txt { position: relative; z-index: 1; grid-column: auto; max-width: none; padding: 0; gap: 16px; justify-content: flex-end; align-items: stretch; background-image: none; }
	.mpse-hero-foto img { object-position: 72% 30%; } /* los cuatro atletas van del 47 % al 90 %: así entran tres en el teléfono */
	.mpse-hero-txt .mpsc-eyebrow { font-size: 11px; }
	/* "EMBAJADORES" a 46px mide ≈345px: no cabe en un teléfono de 360–375px (y .mpse-hero-in recorta
	   lo que se sale). 11vw lo deja entero hasta 320px; desde ≈420px vuelve a los 46px del mockup. */
	.mpse-hero-txt h1 { font-size: 40px; font-size: clamp(32px, 11vw, 46px); }
	.mpse-hero-txt p { font-size: 14px; line-height: 1.6; max-width: none; }
	.mpse-hero-ctas { margin-top: 0; flex-direction: column; align-items: stretch; }
	.mpse-hero-ctas .mpsc-btn { width: 100%; }

	.mpse-main .mpsc-heading h2 { font-size: 34px; }

	/* Equipo: carrusel horizontal con snap (el scroll vive dentro del carrusel, no en la página). */
	.mpse-equipo { padding: 72px 0; gap: 32px; overflow: hidden; }
	.mpse-equipo-head { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 10px; padding: 0 18px; }
	.mpse-equipo-head p { font-size: 13.5px; max-width: none; text-align: left; }
	.mpse-grid {
		display: flex; flex-direction: row; align-items: flex-start; gap: 12px; min-width: 0; max-width: 100%;
		overflow-x: auto; padding: 0 18px 6px; scroll-padding-left: 18px; scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch; scrollbar-width: none;
	}
	.mpse-grid::-webkit-scrollbar { display: none; }
	.mpse-emb { flex: none; width: 260px; scroll-snap-align: start; gap: 12px; }
	.mpse-emb-foto { height: 340px; }
	.mpse-emb:hover .mpse-emb-foto img { transform: none; }
	.mpse-emb-id { left: 16px; right: 16px; bottom: 14px; }
	.mpse-emb-nombre { font-size: 18px; }
	.mpse-emb-disciplina { font-size: 10.5px; }
	.mpse-emb-pie { gap: 8px; }
	.mpse-emb-pie blockquote { font-size: 13.5px; line-height: 1.5; }
	.mpse-chip { font-size: 10.5px; }

	/* Pasos: una columna, número a la izquierda y sin tarjeta blanca (era caja dentro de la banda
	   gris), con el mismo patrón que los mandamientos de Nosotros. #6B6762 da ≈5:1 sobre #F5F4F2. */
	.mpse-como { padding: 72px 18px; gap: 32px; }
	.mpse-pasos { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
	.mpse-paso { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 0; background: none; border: 0; border-radius: 0; }
	.mpse-paso-num { font-size: 30px; }
	.mpse-paso-txt { gap: 5px; }
	.mpse-paso-titulo { font-size: 16px; }
	.mpse-paso-detalle { font-size: 14px; line-height: 1.6; color: #6B6762; }

	/* Aplicar: una columna; el mockup móvil no lleva la lista de notas ni la caja del formulario. */
	.mpse-aplicar { display: flex; flex-direction: column; align-items: stretch; gap: 32px; padding: 72px 18px; }
	.mpse-aplicar-izq, body.admin-bar .mpse-aplicar-izq { position: static; top: auto; gap: 20px; }
	.mpse-aplicar-izq > p { font-size: 15px; line-height: 1.6; max-width: none; }
	.mpse-notas { display: none; }

	/* 24px entre campos y 8px de la etiqueta al control (antes 14 / 6). */
	.mpse-form { border: 0; border-radius: 0; padding: 0; gap: 24px; }
	/* Orden del mockup móvil: nombre · disciplina · [ciudad | seguidores] · red · teléfono. */
	.mpse-campos { gap: 24px 12px; }
	.mpse-campo { font-size: 11px; gap: 8px; }
	.mpse-campo-nombre { order: 1; grid-column: 1 / -1; }
	.mpse-campo-disciplina { order: 2; grid-column: 1 / -1; }
	.mpse-campo-ciudad { order: 3; }
	.mpse-campo-seguidores { order: 4; }
	.mpse-campo-red { order: 5; grid-column: 1 / -1; }
	.mpse-campo-telefono { order: 6; grid-column: 1 / -1; }
	.mpse-form input[type="text"],
	.mpse-form input[type="tel"],
	.mpse-form select { height: 48px; }
	.mpse-form select { padding: 0 8px; }
	/* A 16px iOS no hace zoom al tocar el campo. Misma especificidad que la base y va después. */
	.mpse-form input[type="text"],
	.mpse-form input[type="tel"],
	.mpse-form select,
	.mpse-form textarea { font-size: 16px; }
	.mpse-consent { font-size: 13px; }
	/* El error del consentimiento queda a 8px de su casilla (el gap del form ahora es 24). */
	.mpse-error-consent { margin-top: -16px; }
	/* "Revisamos aplicaciones un par de veces al año." repite el paso 02 y va a 11px. Ojo: oculta
	   también lo que se cargue en ACF pie_1 / pie_2. */
	.mpse-pie { display: none; }

	.mpse-ok { padding: 28px 22px; gap: 16px; min-height: 0; align-items: stretch; justify-content: flex-start; }
	.mpse-ok .mpsc-eyebrow { font-size: 11px; }
	.mpse-ok h2 { font-size: 40px; }
	.mpse-ok p { font-size: 13.5px; line-height: 1.55; max-width: none; }
	/* En el mockup móvil la única fila era "Próxima revisión" (dato que no existe): sin filas. */
	.mpse-ok-filas { display: none; }
	.mpse-ok-ctas { margin-top: 0; flex-direction: column; align-items: stretch; gap: 16px; }
	.mpse-ok-ctas .mpsc-btn { width: 100%; }
	/* "Nueva aplicación" en móvil es un enlace subrayado, no un botón. */
	.mpse-ok-ctas .mpsc-btn.mpse-ok-otra {
		width: auto; height: auto; align-self: center; padding: 4px; border: 0; background: none; color: #FFFFFF;
		line-height: normal; /* con height:auto manda el line-height heredado del tema (30 px contra 22 del mockup) */
		font-size: 12px; letter-spacing: 0.08em; text-decoration: underline; text-underline-offset: 4px;
	}
	.mpse-ok-ctas .mpsc-btn.mpse-ok-otra:hover { background: none; color: #FFFFFF; }
}

@media (prefers-reduced-motion: reduce) {
	.mpse-emb-foto img { transition: none; }
	.mpse-emb:hover .mpse-emb-foto img { transform: none; }
}

/* ---- Atletas MPS (24-09): logro + perfil corto bajo la foto, e iniciales cuando aún no hay foto ---- */
.mpse-emb-logro { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #C73D2C; line-height: 1.3; }
.mpse-emb-foto-vacia { background: linear-gradient(160deg, #1C1B1A 0%, #0B0B0B 100%); }
.mpse-emb-sinfoto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 96px; font-weight: 800; letter-spacing: -0.04em; color: rgba(255, 255, 255, 0.07); line-height: 1; }

/* ---- Tarjeta que se da vuelta (Luis, 24-09): frente = foto; dorso = logro, perfil e Instagram (solo el
   ícono). El giro es 3D; con "reducir movimiento" cambia sin girar. El dorso queda hidden hasta abrirse,
   así sus enlaces no entran en el orden de tabulación cuando no se ven. ---- */
.mpse-emb-carta { position: relative; height: 400px; perspective: 1400px; }
.mpse-emb-frente, .mpse-emb-dorso {
	position: absolute; inset: 0; border-radius: 6px; overflow: hidden;
	backface-visibility: hidden; -webkit-backface-visibility: hidden;
	transition: transform .6s cubic-bezier(.2, .7, .25, 1);
}
.mpse-emb-frente { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; z-index: 2; transform: rotateY(0deg); }
.mpse-emb-frente:focus-visible { outline: 2px solid #C73D2C; outline-offset: 3px; }
.mpse-emb-frente .mpse-emb-foto { height: 100%; }
.mpse-emb-pista { position: absolute; top: 12px; right: 12px; z-index: 1; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #FFFFFF; background: rgba(11, 11, 11, 0.55); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 2px; padding: 5px 8px; line-height: 1; }
.mpse-emb-dorso {
	transform: rotateY(180deg); z-index: 1;
	display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
	padding: 22px 20px 20px; background: #0B0B0B; color: #FFFFFF;
	background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.2px); background-size: 3px 3px;
}
.mpse-emb-dorso[hidden] { display: none; }
.mpse-emb-volteada .mpse-emb-frente { transform: rotateY(-180deg); }
.mpse-emb-volteada .mpse-emb-dorso { transform: rotateY(0deg); }
.mpse-emb-cerrar { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.28); border-radius: 50%; background: rgba(255,255,255,0.06); color: #FFFFFF; cursor: pointer; padding: 0; }
.mpse-emb-cerrar:hover { background: rgba(255,255,255,0.14); }
.mpse-emb-dorso-nombre { font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.2; padding-right: 44px; }
.mpse-emb-dorso-disc { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #D6D4D1; margin-top: -6px; }
.mpse-emb-dorso .mpse-emb-logro { margin-top: 6px; }
.mpse-emb-perfil-txt { margin: 0; font-size: 14px; line-height: 1.55; color: #E8E6E3; }
.mpse-emb-ig { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.28); border-radius: 50%; color: #FFFFFF; transition: border-color .15s ease, color .15s ease; }
.mpse-emb-ig:hover, .mpse-emb-ig:focus-visible { border-color: #C73D2C; color: #C73D2C; outline: none; }
@media (max-width: 900px) {
	.mpse-emb-carta { height: 360px; }
	.mpse-emb-dorso { padding: 18px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.mpse-emb-frente, .mpse-emb-dorso { transition: none; }
}