/* Entrenly · estilos de la web. Las fuentes las declara theme.json (alojadas en el tema).
 *
 * Desde el 07/10/2026 la web sigue el diseño de los dossieres (dossier/dossier.css), que es el que le gustó
 * a Dani: titulares en Barlow Condensed, en cursiva y mayúsculas, como en las apps; texto en DM Sans;
 * rótulos con una raya delante; fichas en pastilla; y las pantallas reales de las dos apps en vez de dibujos.
 *
 * Tres fondos, como las páginas de un dossier: claro (blanco o hueso), oscuro (tinta con un resplandor
 * lima) y lima. Club va en oscuro y Coach en lima, cada una como la portada de su dossier.
 * El lima va siempre de fondo con la tinta encima; cuando el acento es texto o línea sobre claro,
 * se usa el verde oscuro.
 *
 * Cada fondo es un «tono»: un juego de variables (--txt, --ceja, --raya, --b-fondo…) que las piezas leen.
 * Así una tarjeta, un botón o una lista se ven bien en cualquiera de los tres sin reglas propias.
 */

:root {
	--fondo: #FFFFFF; --hueso: #F3F6EE; --tinta: #0E1411; --marco: #1D2622;
	--apagado: #55605A; --entrada: #3D4741; --claro: #C9D2C4; --linea: #DFE5D8; --linea-fuerte: #C4CCBF;
	--acento: #C6F432; --acento-texto: #16703A; --acento-suave: #EEFBC6; --acento-claro: #DDFB7C;
	--menta: #0B7F63; --menta-suave: #DDF5EE;
	--titular: 'Barlow Condensed', 'Titular de reserva', 'Arial Narrow', sans-serif;
	--cuerpo: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--r: 20px;
	--barra: 72px; /* alto de la cabecera fija */
	--margen: clamp(16px, 4vw, 40px);
}

/* Mientras llega Barlow Condensed se pinta la letra del sistema estrechada al 70 %: ocupa casi lo mismo,
   así que los titulares no cambian de líneas ni empujan lo de debajo cuando entra la buena. */
@font-face { font-family: 'Titular de reserva'; src: local('Arial Bold'), local('Arial'), local('Helvetica Neue Bold'), local('Helvetica Neue'), local('Roboto Bold'), local('Roboto'); font-weight: 700 800; size-adjust: 70%; }

/* ---------- los tres tonos ---------- */
/* Claro: el de la página y el de lo que va en blanco dentro de un bloque oscuro o lima (formulario, planes). */
:root, .en-claro, .en-form, .en-plan, .en-tarjeta--precio {
	--suelo: #FFFFFF; --txt: var(--tinta); --txt-2: var(--apagado); --txt-3: var(--entrada); --ceja: var(--acento-texto);
	--raya: var(--linea); --carta: #FFFFFF; --carta-borde: var(--linea);
	--b-fondo: var(--acento); --b-texto: var(--tinta); --b-fondo-s: var(--tinta); --b-texto-s: var(--acento);
	/* 17/10/2026 (repaso fino, aprobado por Dani): la raya de los enlaces y el marco del teclado, en verde oscuro sobre claro: en lima
	   apenas se veían. Es la regla de la marca para el lima como línea sobre fondo claro. */
	--subrayado: var(--acento-texto); --foco: var(--acento-texto);
	--marco-filo: rgba(14, 20, 17, .16); --marco-sombra: rgba(14, 20, 17, .38);
	/* la palabra clave de un titular: subrayada en lima, como con rotulador */
	--em-texto: inherit; --em-fondo: linear-gradient(transparent 56%, var(--acento) 56%, var(--acento) 92%, transparent 92%);
	--em-relleno: 0 .06em; --em-margen: -.06em; --em-radio: 0;
}
.en-oscuro, .en-barra, .en-portada--oscura, .en-seccion--banda, .en-seccion--final, .en-producto--club, .en-cifra, .en-pie {
	--suelo: var(--tinta); --txt: #F4F7EE; --txt-2: var(--claro); --txt-3: var(--claro); --ceja: var(--acento);
	--raya: rgba(255, 255, 255, .14); --carta: rgba(255, 255, 255, .05); --carta-borde: rgba(255, 255, 255, .14);
	--b-fondo: var(--acento); --b-texto: var(--tinta); --b-fondo-s: #FFFFFF; --b-texto-s: var(--tinta);
	--subrayado: var(--acento); --foco: var(--acento);
	--marco: #2C3731; --marco-filo: rgba(255, 255, 255, .16); --marco-sombra: rgba(0, 0, 0, .62);
	/* sobre oscuro, la palabra clave va en lima */
	--em-texto: var(--acento); --em-fondo: none; --em-relleno: 0; --em-margen: 0;
	color: var(--txt);
}
.en-lima, .en-portada--lima, .en-seccion--lima, .en-producto--coach, .en-final, .en-cta {
	--suelo: var(--acento); --txt: var(--tinta); --txt-2: #2B3518; --txt-3: #222B13; --ceja: var(--tinta);
	--raya: rgba(14, 20, 17, .2); --carta: rgba(255, 255, 255, .5); --carta-borde: rgba(14, 20, 17, .16);
	--b-fondo: var(--tinta); --b-texto: var(--acento); --b-fondo-s: #FFFFFF; --b-texto-s: var(--tinta);
	--subrayado: var(--tinta); --foco: var(--tinta);
	--marco: #1D2622; --marco-filo: rgba(14, 20, 17, .16); --marco-sombra: rgba(14, 20, 17, .4);
	/* sobre lima, la palabra clave va en una caja de tinta, como en la portada del dossier de entrenadores */
	--em-texto: var(--acento); --em-fondo: var(--tinta); --em-relleno: .05em .16em 0 .1em; --em-margen: 0; --em-radio: .1em;
	color: var(--txt);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--cuerpo); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4 { margin: 0; font-family: var(--titular); font-weight: 800; font-style: italic; text-transform: uppercase; line-height: 1; letter-spacing: 0; text-wrap: balance; }
p, figure, ul, ol { margin: 0; }
/* 17/10/2026 (repaso fino, aprobado por Dani): que ningún párrafo acabe con una palabra sola abajo, donde el navegador lo
   sabe hacer (Chrome y los iPhone al día); en los demás se queda como estaba. */
p, li, figcaption { text-wrap: pretty; }
img, svg, video { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--subrayado); text-decoration-thickness: 2px; text-underline-offset: 3px; }
strong { font-weight: 700; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: 6px; }

.en-ancho { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--margen); }
.en-ancho--lectura { max-width: 820px; }
.en-saltar { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--acento); color: var(--tinta); font-weight: 700; padding: 10px 16px; border-radius: 8px; }
.en-saltar:focus { left: 8px; }
.en-progreso { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; background: var(--acento); transform: scaleX(var(--avance, 0)); transform-origin: 0 50%; }
/* Texto que solo leen los lectores de pantalla, los buscadores y los asistentes de IA. */
.en-solo-lectores { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- rótulos ---------- */
/* La «ceja» de los dossieres: letra condensada, muy espaciada, con una raya delante. */
.en-antetitulo { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--titular); font-weight: 700; font-style: normal; font-size: .92rem; line-height: 1.3; letter-spacing: .24em; text-transform: uppercase; color: var(--ceja); text-wrap: balance; }
.en-antetitulo::before { content: ""; flex: 0 0 36px; height: 3px; border-radius: 3px; background: currentColor; }
.en-antetitulo a { color: inherit; text-decoration: none; }
/* Rótulo pequeño, sin raya: encima de un título de tarjeta, en las cabeceras de tabla y en el pie. */
.en-producto__para, .en-etiqueta, .en-tarjeta__fecha, .en-pie h2, .en-extra h3, .wp-block-table th {
	font-family: var(--titular); font-weight: 700; font-style: normal; font-size: .86rem; line-height: 1.3; letter-spacing: .2em; text-transform: uppercase; color: var(--ceja);
}

/* ---------- titulares ---------- */
/* El interlineado es muy corto, como en los dossieres, pero deja sitio al «¿», que en esta letra baja de la línea. */
.en-titulo, .en-cabecera h2 { font-size: clamp(2.3rem, 5.3vw, 4.1rem); line-height: .97; }
h3, .en-h3 { font-size: 1.5rem; }
.en-portada__titulo em, .en-titulo em, .en-cabecera h2 em, .en-producto h3 em {
	font-style: inherit; color: var(--em-texto); background: var(--em-fondo); padding: var(--em-relleno); margin-inline: var(--em-margen); border-radius: var(--em-radio);
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* Sobre lima la palabra clave es una caja: se la trata como una pieza para que no pise la línea de arriba. */
.en-lima em, .en-portada--lima em, .en-seccion--lima em, .en-producto--coach em, .en-final em, .en-cta em { display: inline-block; line-height: .86; margin-top: .07em; white-space: nowrap; }
.en-cabecera { display: grid; gap: 16px; max-width: 900px; }
.en-entradilla { font-size: clamp(1.08rem, 1.5vw, 1.24rem); line-height: 1.5; color: var(--txt-3); max-width: 38em; }
.en-entradilla strong { color: var(--txt); }
.en-letra { color: var(--txt-2); font-size: .92rem; max-width: 52em; }
.en-aviso { font-size: .92rem; color: var(--txt-2); }

/* ---------- botones ---------- */
.en-boton, .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative;
	font-family: var(--titular); font-weight: 700; font-style: normal; font-size: 1.16rem; line-height: 1; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
	padding: 15px 28px 14px; border-radius: 999px; border: 1.5px solid var(--b-fondo); background: var(--b-fondo); color: var(--b-texto); cursor: pointer;
	transition: transform .15s, background .15s, color .15s, border-color .15s;
}
.en-boton:hover, .wp-block-button__link:hover { transform: translateY(-2px); background: var(--b-fondo-s); border-color: var(--b-fondo-s); color: var(--b-texto-s); }
.en-boton--pequeno { padding: 11px 20px 10px; font-size: 1.02rem; }
.en-boton--linea, .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--txt); border-color: currentColor; }
.en-boton--linea:hover, .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--txt); border-color: var(--txt); color: var(--suelo); }
/* 17/10/2026 (repaso fino, aprobado por Dani): WordPress le pone al botón con borde su relleno y un borde de 2 px, y medía 47 px
   junto a los 50 del lleno. Con este relleno miden lo mismo; el borde se queda en 2 px. */
.wp-block-button.is-style-outline .wp-block-button__link { padding: 14px 27px 13px; }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 10px; }

/* Enlace «ver más» (desde el 21/10/2026, elegido por Dani entre tres variantes: «los pondría más llamativos, me parecen
   importantes»): el botón con borde, como «Ver precios» y la tarjeta final, con la flecha que se adelanta. Hasta entonces,
   texto en mayúsculas subrayado en el color del botón. Dos seguidos van uno al lado del otro. Mide 48 px de alto: ya no
   hace falta ampliar el toque. El lima queda para «Pide una demo»; el borde, para ver más. */
.en-mas { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.en-mas a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px 11px; border: 2px solid currentColor; border-radius: 999px; font-family: var(--titular); font-weight: 700; font-size: 1.08rem; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--txt); transition: transform .15s, background .15s, color .15s, border-color .15s; }
.en-mas a::after { content: "→"; font-family: var(--cuerpo); letter-spacing: 0; transition: transform .2s; }
.en-mas a:hover { transform: translateY(-2px); background: var(--txt); border-color: var(--txt); color: var(--suelo); }
.en-mas a:hover::after { transform: translateX(5px); }

/* ---------- fichas y listas con visto ---------- */
.en-fichas, .en-promesas { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.en-fichas li, .en-promesas li { display: inline-flex; align-items: center; padding: 7px 16px 6px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--txt) 36%, transparent); font-family: var(--titular); font-weight: 700; font-size: 1.02rem; line-height: 1.1; letter-spacing: .09em; text-transform: uppercase; color: var(--txt); white-space: nowrap; }
.en-fichas--llena li:first-child { background: var(--b-fondo); border-color: var(--b-fondo); color: var(--b-texto); }


.en-vistos, .en-lista-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.en-vistos li, .en-lista-check li { position: relative; padding-left: 36px; line-height: 1.45; }
.en-vistos li::before, .en-lista-check li::before { content: ""; position: absolute; left: 0; top: .06em; width: 23px; height: 23px; border-radius: 50%; background: var(--acento) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1411' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.en-lima .en-vistos li::before, .en-portada--lima .en-vistos li::before, .en-seccion--lima .en-vistos li::before { background-color: #FFFFFF; }
.en-vistos { font-size: 1.04rem; }
/* Todo lo que incluye la app, con el circulito (en_incluye(), 20/10/2026): en «¿Qué hace?» de Club, Coach y Box, por grupos y en dos
   columnas, con la letra y el circulito un punto más pequeños que los puntos de arriba. */
.en-incluye { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; margin-top: 30px; }
.en-incluye__titulo { grid-column: 1 / -1; margin: 0; font-family: var(--titular); font-weight: 700; font-style: normal; font-size: .92rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ceja); }
.en-incluye__bloque { min-width: 0; }
.en-incluye__grupo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 8px; font-family: var(--titular); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 1.1rem; line-height: 1.1; color: var(--txt); }
.en-incluye__donde { flex: none; font-weight: 700; font-style: normal; font-size: .72rem; letter-spacing: .14em; color: var(--ceja); text-decoration: none; }
.en-incluye__donde:hover, .en-incluye__donde:focus-visible { text-decoration: underline; }
/* En Precios (Entrenly One) y en las páginas de negocio (desde esa noche, elegido por Dani al ver las listas enteras): una
   frase con los nombres de los grupos y el enlace a «¿Qué hace?» de la app, en lugar de la lista. */
.en-incluye-una { max-width: 62ch; margin-top: 28px; display: grid; gap: 10px; justify-items: start; }
.en-incluye-una p { margin: 0; }
.en-seccion--one .en-incluye-una { margin-top: 36px; }
.en-incluye__lista { gap: 7px; font-size: .96rem; }
.en-incluye__lista li { padding-left: 29px; line-height: 1.35; }
.en-incluye__lista li::before { width: 19px; height: 19px; background-size: 11px; top: .1em; }
/* P15: en el móvil, también en dos columnas, con la letra y el circulito más pequeños: en una columna eran 2.000 px en Club. */
@media (max-width: 560px) {
	.en-incluye { gap: 16px 14px; }
	.en-incluye__grupo { font-size: .98rem; }
	.en-incluye__lista { gap: 5px; font-size: .86rem; }
	.en-incluye__lista li { padding-left: 24px; line-height: 1.3; }
	.en-incluye__lista li::before { width: 16px; height: 16px; background-size: 9px; }
}
@media (min-width: 761px) { .en-vistos--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 44px; } }

/* ---------- cabecera ---------- */
/* Siempre en tinta, como la barra de Entrenly Club: el logo en negativo, el menú en mayúsculas y el botón lima. */
.en-barra { position: sticky; top: 0; z-index: 50; background: var(--tinta); border-bottom: 1px solid transparent; transition: border-color .2s; }
.en-barra.es-fija { border-bottom-color: rgba(255, 255, 255, .12); }
.en-barra__dentro { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
/* El logo: la E con pulso sobre su caja lima y el nombre en DM Sans negrita. El símbolo lo dibuja
   marca/generar-logo.mjs; header.php y footer.php lo insertan con entrenly_simbolo(). */
.en-logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--cuerpo); font-weight: 700; font-style: normal; font-size: 1.5rem; line-height: 1; letter-spacing: -.015em; text-transform: none; text-decoration: none; color: #FFFFFF; font-variation-settings: "opsz" 36; }
.en-logo__simbolo { display: block; width: 36px; height: 36px; flex: 0 0 36px; }
.en-menu { display: flex; align-items: center; gap: 18px; }
.en-menu__lista { display: flex; gap: 2px; list-style: none; padding: 0; margin: 0; }
.en-menu__lista a { display: block; position: relative; padding: 9px 13px 8px; font-family: var(--titular); font-weight: 700; font-size: 1.04rem; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--claro); transition: color .15s; }
.en-menu__lista a:hover { color: #FFFFFF; }
.en-menu__lista a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--acento); transform: scaleX(0); transform-origin: 0 50%; transition: transform .2s; }
.en-menu__lista a:hover::after, .en-menu__lista .current-menu-item > a::after { transform: scaleX(1); }
.en-menu__lista .current-menu-item > a { color: #FFFFFF; }
/* Entrenly One en el menú (13/10/2026): en lima y con su estrella. Lo añade un filtro al pintar el menú (inc/instalacion.php). */
.en-menu__one a { display: flex; align-items: center; gap: 7px; color: var(--acento); }
.en-menu__one a::before { content: ""; flex: none; width: .78em; height: .78em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23C6F432' d='M12 1.8l3.1 6.6 7.1.9-5.2 5 1.3 7.1L12 17.9 5.7 21.4 7 14.3 1.8 9.3l7.1-.9z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* En el móvil, «Pide una demo» siempre a la vista en la cabecera (13/10/2026). En el ordenador ya está en el menú. */
.en-barra__demo { display: none; }
/* 17/10/2026 (repaso fino, aprobado por Dani): el botón «Demo» del móvil responde en 44 px de alto (mide 36), sin cambiar de tamaño. */
.en-barra__demo::before { content: ""; position: absolute; inset: -4px; }
/* Con Entrenly One son seis entradas: entre 1000 y 1279 px van más juntas para que ninguna parta en dos líneas. */
.en-menu__lista a, .en-menu .en-boton--pequeno { white-space: nowrap; }
@media (min-width: 1000px) and (max-width: 1279px) {
	.en-menu { gap: 8px; }
	.en-menu__lista { gap: 0; }
	.en-menu__lista a { padding-inline: 8px; font-size: .93rem; letter-spacing: .07em; }
	.en-menu__lista a::after { left: 8px; right: 8px; }
	.en-menu .en-boton--pequeno { padding-inline: 14px; font-size: .93rem; }
}
.en-hamburguesa { display: none; width: 44px; height: 44px; border: 1.5px solid rgba(255, 255, 255, .28); border-radius: 12px; background: transparent; cursor: pointer; padding: 13px 11px; flex-direction: column; justify-content: space-between; }
.en-hamburguesa span { display: block; height: 2px; background: #FFFFFF; border-radius: 2px; transition: transform .2s, opacity .2s; }
.es-abierta .en-hamburguesa span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.es-abierta .en-hamburguesa span:nth-child(2) { opacity: 0; }
.es-abierta .en-hamburguesa span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 999px) {
	.en-hamburguesa { display: flex; }
	.en-barra__demo { display: inline-flex; margin-left: auto; padding: 10px 16px 9px; font-size: .96rem; }
	.en-menu .en-boton--pequeno { display: none; }
	.en-menu { position: absolute; inset: 100% 0 auto 0; flex-direction: column; align-items: stretch; gap: 18px; padding: 12px var(--margen) 26px; background: var(--tinta); border-bottom: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 40px -28px rgba(0, 0, 0, .7); display: none; }
	.es-abierta .en-menu { display: flex; }
	.en-menu__lista { flex-direction: column; }
	.en-menu__lista a { padding: 15px 2px 13px; font-size: 1.3rem; color: #FFFFFF; border-bottom: 1px solid rgba(255, 255, 255, .1); }
	.en-menu__lista a::after { display: none; }
	.en-menu .en-boton { align-self: flex-start; }
}

/* ---------- secciones ---------- */
/* 20/10/2026 (Dani: «me da la sensación de que hay demasiado» espacio entre un texto y el siguiente): las secciones, con
   menos aire arriba y abajo que hasta entonces (64 a 128 px). */
.en-seccion { padding-block: clamp(48px, 6.5vw, 92px); scroll-margin-top: 70px; background: var(--suelo); color: var(--txt); }
.en-seccion > .en-ancho { display: grid; gap: clamp(32px, 4.4vw, 56px); }
.en-seccion > .en-ancho > * { min-width: 0; }
.en-seccion--pegada { padding-top: clamp(20px, 3vw, 36px); }
.en-seccion--suave { --suelo: var(--hueso); }
/* Una sección pegada a la portada pero de otro color necesita algo más de aire arriba. */
.en-seccion--suave.en-seccion--pegada { padding-top: clamp(40px, 5vw, 72px); }
/* Oscuro: tinta con un resplandor lima arriba a la derecha y otro, más tenue, abajo a la izquierda. */
.en-seccion--banda, .en-portada--oscura { background: radial-gradient(62% 70% at 96% 0%, rgba(198, 244, 50, .16), transparent 62%), radial-gradient(50% 60% at -8% 104%, rgba(198, 244, 50, .08), transparent 60%), var(--tinta); }
.en-seccion--lima, .en-portada--lima { background: radial-gradient(56% 74% at 98% 0%, var(--acento-claro), transparent 62%), var(--acento); }

/* ---------- portadas ---------- */
/* La de una página interior: sobre claro, con el titular grande y la palabra clave subrayada. */
.en-portada { position: relative; overflow: clip; padding-block: clamp(40px, 6vw, 80px) clamp(32px, 5vw, 60px); color: var(--txt); background: radial-gradient(46% 90% at 100% 0%, rgba(198, 244, 50, .2), transparent 62%), var(--suelo); }
.en-portada > .en-ancho { display: grid; gap: 22px; position: relative; justify-items: start; }
.en-portada > .en-ancho > * { min-width: 0; }
.en-portada__titulo { margin: 0; font-family: var(--titular); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: clamp(2.7rem, 9.2vw, 5.6rem); line-height: .92; letter-spacing: -.005em; max-width: 13em; text-wrap: balance; }
/* La palabra clave del titular no se parte entre dos líneas. */
.en-portada__titulo em { white-space: nowrap; }
.en-portada__texto { font-size: clamp(1.08rem, 1.5vw, 1.24rem); line-height: 1.5; color: var(--txt-3); max-width: 36em; }
.en-portada__texto strong { color: var(--txt); }
.en-portada--corta { padding-bottom: 12px; }
.en-portada--centro { text-align: center; }
.en-portada--centro > .en-ancho { justify-items: center; }
.en-portada--centro .en-antetitulo::before { display: none; }
.en-portada__botones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* La grande, como la portada de un dossier: el titular enorme a un lado, el resumen al otro y, debajo,
   las pantallas, que se cortan con el borde de abajo. */
.en-portada--grande { padding-bottom: 0; }
.en-portada--grande > .en-ancho { display: grid; gap: clamp(30px, 4.4vw, 56px); justify-items: stretch; }
.en-portada__cabeza { display: grid; gap: clamp(20px, 3vw, 30px); }
.en-portada__titular { display: grid; gap: clamp(14px, 1.8vw, 20px); min-width: 0; }
.en-portada__resumen { display: grid; gap: 18px; justify-items: start; align-content: start; min-width: 0; }
/* En las portadas grandes (Inicio, Club y Coach), desde el 20/10/2026 (repaso con Dani, P11; del 15 al 20/10/2026 iba en una
   caja blanca a la derecha del titular): debajo del titular, en una fila, el texto (o «La app para tu…» en Inicio) y los dos
   botones, los dos solo con el borde, con los colores de la portada. */
.en-portada--grande .en-portada__resumen { max-width: none; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 40px; }
.en-portada--grande .en-portada__resumen .wp-block-button__link { background: transparent; color: var(--txt); border-color: currentColor; padding: 14px 27px 13px; }
.en-portada--negocio .wp-block-button__link { background: transparent; color: var(--txt); border-color: currentColor; }
.en-portada--grande .en-portada__titulo { max-width: none; font-size: clamp(2.6rem, 10.6vw, 6rem); line-height: .9; }
/* El lema de la portada va en tres líneas, una por frase: el tamaño está medido para que la más larga quepa. Desde el
   20/10/2026 (pedido por Dani) es «Configúralo a tu gusto.», seis letras más que «Llena tus clases.»: a la letra de
   siempre ocupa casi toda la página, así que la tarjeta va debajo del lema y no a su lado (elegido por Dani), y en el
   móvil la letra sigue el ancho de la pantalla. Las líneas, un poco más separadas que antes (.89): la Ú de «Configúralo»
   se metía en la línea de arriba (visto por Dani el 20/10/2026 en la web publicada). */
.en-portada--inicio .en-portada__titulo { font-size: clamp(2.2rem, 9vw, 6.5rem); line-height: .98; white-space: nowrap; }
/* En Inicio, «La app para tu…» más grande, y los botones delante (Dani: al cambiar la palabra, los botones se movían). */
.en-portada--inicio .en-portada__para { font-size: 1.5rem; order: 2; }
.en-portada--inicio .en-portada__resumen > .wp-block-buttons { order: 1; }
/* «de cualquier disciplina» del rótulo de Inicio, solo en el ordenador (P16). */
@media (max-width: 600px) { .en-solo-ordenador { display: none; } }
.en-portada--grande .en-portada__texto { font-size: clamp(1.05rem, 1.35vw, 1.16rem); }
/* «La app para tu…» y, debajo, la palabra que rota: en dos líneas siempre, para que el texto de abajo no salte. */
.en-portada__para { display: grid; justify-items: start; gap: 6px; font-size: 1.2rem; font-weight: 600; line-height: 1.3; color: var(--txt); }
/* La palabra que rota: sale por abajo y la anterior se va por arriba. */
.en-rota { display: inline-block; padding: 3px 14px 2px; border-radius: 999px; background: var(--b-fondo); color: var(--b-texto); font-family: var(--titular); font-weight: 800; font-style: italic; font-size: 1.24em; line-height: 1.15; letter-spacing: .01em; text-transform: uppercase; vertical-align: baseline; transition: opacity .28s, transform .28s; }
.en-rota.es-saliendo { opacity: 0; transform: translateY(-8px); }
.en-rota.es-entrando { opacity: 0; transform: translateY(8px); transition: none; }
@media (min-width: 1100px) {
	/* Hasta el 20/10/2026, dos columnas: el titular y, a su derecha, la caja del resumen. Desde el repaso con Dani (P11), una. */
	.en-portada__cabeza { gap: 36px; }
	.en-portada--grande .en-portada__titulo { font-size: min(6.5vw, 5.9rem); }
	.en-portada--inicio .en-portada__titulo { font-size: min(8.1vw, 7.25rem); }
}

/* =====================================================================
 * Pantallas reales de las apps (inc/pantallas.php)
 * ===================================================================== */
.en-pantalla { position: relative; margin: 0; min-width: 0; }
.en-pantalla__marco { position: relative; overflow: hidden; background: var(--marco); box-shadow: 0 0 0 1px var(--marco-filo), 0 34px 70px -30px var(--marco-sombra); }
.en-pantalla img { display: block; width: 100%; height: auto; }
.en-pantalla__recorte { overflow: hidden; }
/* La pantalla recortada sube con el scroll y enseña el resto (main.js deja el desplazamiento en --sube). */
.en-pantalla__recorte[data-desliza] img { transform: translate3d(0, var(--sube, 0px), 0); will-change: transform; }
/* 20/10/2026 (repaso con Dani, P13): el pie, un punto más grande y en el color del texto: es la única explicación de la pantalla. */
.en-pantalla figcaption { margin-top: 14px; font-size: 1rem; line-height: 1.45; color: var(--txt); max-width: 62em; }
/* P12: las pantallas grandes del panel que van sueltas en una sección, al ancho del texto y no a todo el ancho. */
.en-ancho > .en-pantalla--navegador { max-width: 900px; }
/* P14: en el móvil, de las pantallas del panel sueltas solo se ven las que lo dicen (movil="si": el horario de Club, el panel
   de Coach y la tele del box); las demás son pantallas de ordenador encogidas que no se leen. */
@media (max-width: 700px) { .en-ancho > .en-pantalla--navegador:not(.en-pantalla--en-movil) { display: none; } }

/* En un navegador: una barra con sus tres botones. Oscuro para Club y claro para Coach, como cada app.
   Las medidas de la barra van en proporción al ancho del marco (cqw), para que valga a cualquier tamaño. */
.en-pantalla--navegador .en-pantalla__marco { container-type: inline-size; border-radius: 12px; }
.en-pantalla--navegador .en-pantalla__marco::before {
	content: ""; display: block; height: clamp(13px, 2.2cqw, 26px);
	background: radial-gradient(circle at 1.6cqw 50%, #FF6058 0 .42cqw, transparent .47cqw), radial-gradient(circle at 3.2cqw 50%, #FFBD2E 0 .42cqw, transparent .47cqw), radial-gradient(circle at 4.8cqw 50%, #28C940 0 .42cqw, transparent .47cqw), var(--marco);
}
.en-pantalla--navegador.en-pantalla--claro .en-pantalla__marco { --marco: #E4E9DD; }
/* En un móvil. Las medidas van en % de su ancho, para que el marco valga a cualquier tamaño. */
.en-pantalla--movil { width: min(100%, 270px); }
.en-pantalla--movil .en-pantalla__marco { padding: 2.5%; border-radius: 13.4% / 6.36%; }
.en-pantalla--movil img { border-radius: 11.6% / 5.36%; }
/* Una hoja: el PDF de una rutina. */
.en-pantalla--papel { width: min(100%, 340px); }
.en-pantalla--papel .en-pantalla__marco { background: #FFFFFF; border-radius: 10px; }
/* Suelta: un trozo de pantalla, sin marco. */
.en-pantalla--suelta .en-pantalla__marco { background: none; border-radius: 14px; }
/* En el móvil ninguna pantalla sale cortada (lo pidió Dani el 07/10/2026): las de ordenador van enteras, al
   ancho de la página, sin salirse por un lado y sin el recorte por abajo que llevan en el ordenador. */
@media (max-width: 760px) {
	.en-pantalla__recorte { aspect-ratio: auto !important; }
	.en-pantalla__recorte[data-desliza] img { transform: none; }
}

/* ---------- montajes: varias pantallas juntas ---------- */
.en-montaje { position: relative; min-width: 0; }
/* Portada: el navegador a todo el ancho y, delante, a la derecha, un móvil o una hoja. Se corta por abajo. */
.en-montaje--portada, .en-montaje--trio { height: clamp(330px, 43vw, 560px); clip-path: inset(-140px -400px 0 -400px); }
.en-montaje--portada > .en-pantalla--movil, .en-montaje--portada > .en-pantalla--papel, .en-montaje--trio > .en-pantalla--movil {
	position: absolute; bottom: clamp(14px, 2vw, 26px); height: calc(100% - clamp(24px, 3.2vw, 40px)); width: auto; aspect-ratio: 1 / 2.106;
}
.en-montaje--portada > .en-pantalla--movil, .en-montaje--portada > .en-pantalla--papel { right: 3.5%; }
.en-montaje--portada > .en-pantalla--papel { aspect-ratio: 718 / 1092; height: calc(100% - clamp(40px, 5vw, 64px)); }
/* Trío: el navegador en el centro y un móvil a cada lado. */
/* Los móviles se abren hacia fuera para no tapar el título de la pantalla del centro. */
.en-montaje--trio > .en-pantalla--navegador { width: 72%; margin-inline: auto; }
.en-montaje--trio > .en-pantalla--movil { height: calc(100% - clamp(54px, 7vw, 88px)); }
.en-montaje--trio > .en-pantalla--movil:nth-of-type(2) { left: -2.6%; }
.en-montaje--trio > .en-pantalla--movil:nth-of-type(3) { right: -2.6%; }
/* Mesa (la portada de Inicio): las dos apps a la vez. Delante, un panel de Club a la izquierda y uno de Coach a
   la derecha, con el móvil del socio en medio; detrás de cada uno asoma otra pantalla de su app.
   El orden de las pantallas es: las dos de detrás (Club y Coach), las dos de delante (Club y Coach) y el móvil. */
.en-montaje--mesa { height: clamp(350px, 46vw, 610px); clip-path: inset(-140px -400px 0 -400px); }
.en-montaje--mesa > .en-pantalla { position: absolute; }
.en-montaje--mesa > .en-pantalla--navegador:nth-of-type(1) { left: 4%; top: 0; width: 46%; }
.en-montaje--mesa > .en-pantalla--navegador:nth-of-type(2) { left: 54%; top: 0; width: 46%; }
/* Las de delante empiezan bastante más abajo, para que las de detrás se vean bien (Dani pidió bajarlas); la de
   Coach se sale por la derecha lo justo para que el móvil no le tape el título. */
.en-montaje--mesa > .en-pantalla--navegador:nth-of-type(3) { left: -2%; top: 31%; width: 62%; }
.en-montaje--mesa > .en-pantalla--navegador:nth-of-type(4) { left: 49%; top: 31%; width: 62%; }
.en-montaje--mesa > .en-pantalla--movil { left: 50%; bottom: clamp(14px, 2vw, 26px); height: calc(100% - clamp(44px, 7.4vw, 96px)); width: auto; aspect-ratio: 1 / 2.106; transform: translateX(-50%); }
/* Las dos de detrás van inclinadas, abiertas en abanico, como estaban las pantallas en la portada anterior
   (lo pidió Dani el 07/10/2026, solo para Inicio). Las de delante y el móvil, rectos. */
.en-montaje--mesa > .en-pantalla--navegador:nth-of-type(1) { rotate: -3deg; }
.en-montaje--mesa > .en-pantalla--navegador:nth-of-type(2) { rotate: 3deg; }
/* En el móvil los montajes de las portadas enseñan cada pantalla entera: nada se sale por la derecha ni se corta
   por abajo (lo pidió Dani el 07/10/2026). El alto va en proporción al ancho, para que valga en cualquier móvil. */
@media (max-width: 760px) {
	.en-montaje--mesa, .en-montaje--portada, .en-montaje--trio { height: auto; clip-path: none; }
	.en-portada--grande { padding-bottom: clamp(28px, 8vw, 44px); }
	/* Inicio: las dos pantallas de delante, la de Club arriba y la de Coach debajo, y el móvil del socio. */
	.en-montaje--mesa { aspect-ratio: 358 / 404; }
	.en-montaje--mesa > .en-pantalla--navegador:nth-of-type(1), .en-montaje--mesa > .en-pantalla--navegador:nth-of-type(2) { display: none; }
	.en-montaje--mesa > .en-pantalla--navegador:nth-of-type(3) { left: 0; top: 0; width: 84%; }
	.en-montaje--mesa > .en-pantalla--navegador:nth-of-type(4) { left: 16%; top: 43%; width: 84%; }
	.en-montaje--mesa > .en-pantalla--movil { left: 4%; bottom: 0; height: 56%; transform: none; }
	/* Club: el panel entero y, delante, los dos móviles. */
	.en-montaje--trio { aspect-ratio: 358 / 398; }
	.en-montaje--portada > .en-pantalla--navegador, .en-montaje--trio > .en-pantalla--navegador { width: 100%; margin: 0; }
	.en-montaje--trio > .en-pantalla--movil { bottom: 0; height: 61%; }
	.en-montaje--trio > .en-pantalla--movil:nth-of-type(2) { left: 7%; }
	.en-montaje--trio > .en-pantalla--movil:nth-of-type(3) { right: 7%; }
	/* Coach: el panel entero y, delante, la hoja de la rutina. */
	.en-montaje--portada { aspect-ratio: 358 / 326; }
	.en-montaje--portada > .en-pantalla--movil, .en-montaje--portada > .en-pantalla--papel { right: 5%; bottom: 0; height: 68%; }
}
/* La entrada de las pantallas de la portada: suben una detrás de otra. Solo se mueven, sin fundido y sin
   esperar a JavaScript: son lo más grande de la primera pantalla y tienen que pintarse cuanto antes. */
.en-montaje--portada > *, .en-montaje--trio > *, .en-montaje--mesa > * { animation: en-sube .9s cubic-bezier(.2, .8, .2, 1) backwards; }
.en-montaje--portada > *:nth-child(2), .en-montaje--trio > *:nth-child(2), .en-montaje--mesa > *:nth-child(2) { animation-delay: .08s; }
.en-montaje--trio > *:nth-child(3), .en-montaje--mesa > *:nth-child(3) { animation-delay: .16s; }
.en-montaje--mesa > *:nth-child(4) { animation-delay: .24s; }
.en-montaje--mesa > *:nth-child(5) { animation-delay: .34s; }
@keyframes en-sube { from { translate: 0 64px; } }

/* Texto a un lado y una pantalla al otro (un móvil o una hoja). */
.en-con-pantalla { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 6vw, 96px); align-items: center; }
.en-con-pantalla > .en-pantalla--movil { width: clamp(220px, 23vw, 280px); }
.en-con-pantalla > .en-pantalla--papel { width: clamp(260px, 30vw, 380px); }
.en-con-pantalla .en-cabecera { gap: 18px; }
.en-con-pantalla .en-vistos { margin-top: 10px; }
/* 14/10/2026: dos móviles al lado del texto (las clases del día y una clase), más anchos que uno solo. */
.en-con-pantalla > .en-montaje--pareja { width: clamp(420px, 40vw, 560px); padding-inline: 0; gap: 8%; }
@media (max-width: 860px) {
	.en-con-pantalla { grid-template-columns: 1fr; }
	.en-con-pantalla > .en-pantalla { justify-self: center; width: min(74%, 280px); }
	.en-con-pantalla > .en-pantalla--papel { width: min(84%, 340px); }
	.en-con-pantalla > .en-montaje--pareja { justify-self: center; width: min(100%, 520px); }
}
/* Una sola app, tres formas de entrar: dos móviles y, al lado, las tres tarjetas en una pila. */
.en-entradas { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: clamp(18px, 3vw, 44px); align-items: center; }
.en-entradas > .en-pantalla--movil { width: clamp(180px, 19vw, 240px); }
.en-pila { display: grid; gap: 14px; }
@media (max-width: 900px) {
	.en-entradas { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; }
	.en-entradas > .en-pantalla--movil { width: min(100%, 230px); }
	.en-entradas > .en-pila { grid-column: 1 / -1; justify-self: stretch; }
}

/* ---------- cinta con los tipos de negocio ---------- */
.en-cinta { position: relative; background: var(--acento); color: var(--tinta); overflow: hidden; padding-block: 15px 13px; }
.en-cinta__lista { display: flex; gap: 0; list-style: none; padding: 0; margin: 0; width: max-content; animation: en-cinta 42s linear infinite; }
.en-cinta__lista li { display: flex; align-items: center; white-space: nowrap; padding-left: 34px; font-family: var(--titular); font-weight: 800; font-style: italic; font-size: clamp(1.45rem, 2.5vw, 2.1rem); line-height: 1; letter-spacing: .01em; text-transform: uppercase; }
.en-cinta__lista li::after { content: ""; flex: none; width: .34em; height: .34em; margin-left: 34px; border-radius: 50%; background: var(--tinta); }
.en-cinta:hover .en-cinta__lista { animation-play-state: paused; }
@keyframes en-cinta { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .en-cinta__lista { animation: none; flex-wrap: wrap; width: auto; justify-content: center; row-gap: 8px; } }

/* ---------- rejillas y tarjetas ---------- */
.en-rejilla { display: grid; gap: 16px; }
.en-rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.en-rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.en-rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1099px) { .en-rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) { .en-rejilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .en-rejilla--2, .en-rejilla--3, .en-rejilla--4 { grid-template-columns: 1fr; } }

.en-tarjeta { position: relative; background: var(--carta); border: 1px solid var(--carta-borde); border-radius: var(--r); padding: 26px 26px 24px; display: grid; gap: 8px; align-content: start; transition: transform .2s, box-shadow .2s, border-color .2s; }
.en-tarjeta p { color: var(--txt-2); font-size: .98rem; line-height: 1.5; }
/* Las condiciones de una oferta (15/10/2026), dentro de su tarjeta. */
.en-tarjeta .en-vistos--condiciones { font-size: .94rem; gap: 9px; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--carta-borde); }
.en-tarjeta .en-vistos--condiciones li { color: var(--txt-2); padding-left: 30px; }
.en-tarjeta .en-vistos--condiciones li::before { width: 19px; height: 19px; background-size: 12px; }
.en-tarjeta .en-etiqueta, .en-tarjeta .en-producto__para { color: var(--ceja); font-size: .86rem; line-height: 1.3; margin-bottom: -2px; }
/* Al pasar el cursor la tarjeta se levanta y deja ver una sombra lima sin difuminar, la de los planes del dossier. */
.en-tarjeta:hover { transform: translate(-3px, -3px); border-color: var(--txt); box-shadow: 6px 6px 0 var(--acento); }
/* El icono (inc/iconos.php) va en una pastilla lima suave. */
.en-ico::before { content: ""; display: block; width: 50px; height: 50px; margin-bottom: 8px; border-radius: 14px; background: var(--ico) center / 26px no-repeat, var(--acento-suave); transition: background-color .2s; }
.en-tarjeta.en-ico:hover::before { background-color: var(--acento); }
/* La tarjeta que tranquiliza: en lima suave. */
.en-tarjeta--lima { background: var(--acento-suave); border-color: #D5EE86; }
.en-tarjeta--lima p { color: #2A3327; }

/* Pasos y reglas: el número, en un círculo lima. */
.en-paso { padding: 26px 26px 24px; }
.en-paso__n { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 8px; padding-right: 3px; border-radius: 50%; background: var(--acento); color: var(--tinta) !important; font-family: var(--titular); font-weight: 800; font-style: italic; font-size: 1.9rem !important; line-height: 1 !important; letter-spacing: 0; transition: background .3s, box-shadow .3s, color .3s; }

.en-tarjeta--entrada .en-h3 { font-size: 1.6rem; }
.en-tarjeta--entrada .en-h3 a { color: var(--txt); text-decoration: none; }
.en-tarjeta--entrada .en-h3 a:hover { text-decoration: underline; text-decoration-color: var(--acento); text-decoration-thickness: 4px; }
.en-tarjeta__fecha { color: var(--ceja) !important; font-size: .82rem !important; }
.en-tarjeta__imagen img { border-radius: 12px; display: block; }

/* ---------- las dos apps ---------- */
/* Club en oscuro y Coach en lima, cada una con sus pantallas asomando por abajo. */
.en-productos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.en-producto { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 30px; background: var(--suelo); color: var(--txt); transition: transform .25s, box-shadow .25s; }
.en-producto--club { background: radial-gradient(70% 60% at 100% 0%, rgba(198, 244, 50, .18), transparent 62%), var(--tinta); }
.en-producto--coach { background: radial-gradient(70% 60% at 100% 0%, var(--acento-claro), transparent 62%), var(--acento); }
.en-producto:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -40px rgba(14, 20, 17, .6); }
.en-producto__texto { display: grid; gap: 14px; align-content: start; padding: clamp(26px, 3.4vw, 44px) clamp(24px, 3.4vw, 44px) 0; }
.en-producto h3 { font-size: clamp(2.5rem, 4.6vw, 3.6rem); line-height: .92; }
.en-producto__texto > p:not([class]) { color: var(--txt-3); font-size: 1.08rem; line-height: 1.45; }
/* Filas separadas por una línea fina, sin cajas. */
.en-puertas { display: grid; list-style: none; padding: 0; margin: 4px 0 0; border-bottom: 1px solid var(--raya); }
.en-puertas li { padding: 13px 0; border-top: 1px solid var(--raya); color: var(--txt-2); font-size: .98rem; line-height: 1.45; }
.en-puertas li strong { display: block; color: var(--txt); font-size: 1.02rem; }
.en-producto .en-mas { margin-top: 12px; }
.en-producto > .en-montaje { align-self: end; height: clamp(250px, 27vw, 340px); margin-top: clamp(26px, 3.4vw, 40px); }
/* Pareja: dos móviles, uno un poco más bajo que el otro. */
.en-montaje--pareja { display: flex; justify-content: center; align-items: flex-start; gap: 6%; padding-inline: 9%; }
.en-montaje--pareja > .en-pantalla--movil { flex: 0 1 236px; width: auto; }
.en-montaje--pareja > .en-pantalla--movil:nth-of-type(2) { margin-top: 38px; }
/* Asomado: el navegador se sale por la derecha y la hoja va delante. */
.en-montaje--asomado > .en-pantalla--navegador { position: absolute; left: clamp(24px, 3.4vw, 44px); top: 0; width: 132%; }
.en-montaje--asomado > .en-pantalla--papel { position: absolute; right: 7%; top: 16%; width: 34%; }
@media (max-width: 999px) { .en-productos { grid-template-columns: 1fr; } .en-producto > .en-montaje { height: clamp(250px, 50vw, 340px); } }
/* En el móvil las pantallas de cada tarjeta van enteras, sin asomar a medias por abajo ni salirse por la derecha. */
@media (max-width: 760px) {
	.en-producto > .en-montaje { height: auto; margin-bottom: clamp(26px, 7vw, 40px); }
	.en-montaje--asomado { aspect-ratio: 310 / 266; margin-inline: clamp(20px, 6vw, 32px); }
	.en-montaje--asomado > .en-pantalla--navegador { left: 0; width: 100%; }
	.en-montaje--asomado > .en-pantalla--papel { right: 5%; top: auto; bottom: 0; width: 38%; }
}

/* ---------- cifras y comparativa ---------- */
/* Las cifras, en tarjetas de tinta con el número en lima, como en la segunda página de los dossieres. */
.en-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.en-cifra { display: grid; gap: 6px; align-content: start; padding: 28px 28px 26px; border-radius: 24px; background: var(--tinta); }
.en-cifra__num { font-family: var(--titular); font-weight: 800; font-style: italic; font-size: clamp(3rem, 5.6vw, 4.5rem); line-height: .9; text-transform: uppercase; white-space: nowrap; color: var(--acento); }
.en-cifra h3 { font-size: 1.55rem; color: #F4F7EE; }
.en-cifra p:not(.en-cifra__num) { margin-top: 6px; color: var(--claro); font-size: .98rem; line-height: 1.45; }
/* Sobre la banda oscura la tarjeta se aclara un punto para que se separe del fondo. */
.en-seccion--banda .en-cifra { background: rgba(255, 255, 255, .055); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13); }
@media (max-width: 860px) { .en-cifras { grid-template-columns: 1fr; } }

.wp-block-table { overflow-x: auto; margin: 0; }
.wp-block-table table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 1rem; }
.wp-block-table th, .wp-block-table td { padding: 16px 18px; text-align: left; border: 0; vertical-align: top; }
.wp-block-table td { border-top: 1px solid var(--raya); }
.wp-block-table thead { border: 0; }
.wp-block-table th { padding-block: 0 12px; color: #6B756C; font-size: .86rem; }
.en-oscuro .wp-block-table th, .en-seccion--banda .wp-block-table th { color: var(--claro); }
/* La comparativa: la columna de Entrenly, entera sobre lima suave. */
.en-comparativa table { min-width: 580px; table-layout: auto; }
.en-comparativa th:first-child, .en-comparativa td:first-child { padding-left: 0; }
.en-comparativa td:first-child { font-weight: 700; width: 26%; }
.en-comparativa td:nth-child(2) { color: var(--txt-2); width: 34%; }
.en-comparativa th:last-child, .en-comparativa td:last-child { background: var(--acento-suave); color: var(--tinta); }
.en-comparativa th:last-child { padding-top: 16px; border-radius: 16px 16px 0 0; color: var(--acento-texto); }
.en-comparativa td:last-child { font-weight: 600; }
.en-comparativa tr:last-child td:last-child { border-radius: 0 0 16px 16px; }
/* En el móvil (13/10/2026) cada fila va apilada: el punto, lo de siempre y lo de Entrenly. Antes la tabla se deslizaba
   de lado y la columna de Entrenly, que es la que importa, quedaba fuera de la pantalla. */
@media (max-width: 760px) {
	.en-comparativa { overflow-x: visible; }
	.en-comparativa table, .en-comparativa tbody, .en-comparativa tr, .en-comparativa td { display: block; width: auto; min-width: 0; }
	.en-comparativa thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.en-comparativa tr { padding: 18px 0; border-top: 1px solid var(--raya); }
	.en-comparativa tr:first-child { border-top: 0; padding-top: 0; }
	.en-comparativa td { padding: 0; border: 0; }
	.en-comparativa td:first-child { width: auto; margin-bottom: 8px; font-size: 1.08rem; }
	.en-comparativa td:nth-child(2) { width: auto; }
	.en-comparativa td:nth-child(2)::before { content: "Software tradicional: "; font-weight: 600; }
	.en-comparativa td:last-child, .en-comparativa tr:last-child td:last-child { margin-top: 10px; padding: 10px 14px; border-radius: 12px; }
	.en-comparativa td:last-child::before { content: "Entrenly: "; color: var(--acento-texto); font-weight: 700; }
}

/* ---------- precios ---------- */
/* Los planes, como en los dossieres: borde de tinta, el precio enorme y, en el destacado, una sombra lima sin difuminar. */
.en-planes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; align-items: stretch; }
.en-plan { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(26px, 3.2vw, 38px); background: #FFFFFF; border: 1.5px solid var(--tinta); border-radius: 26px; color: var(--tinta); }
.en-plan--destacado { box-shadow: 10px 10px 0 var(--acento); --b-fondo: var(--tinta); --b-texto: var(--acento); --b-fondo-s: var(--acento); --b-texto-s: var(--tinta); }
.en-plan__etiqueta { position: absolute; top: -15px; left: 28px; padding: 4px 14px 3px; border: 1.5px solid var(--tinta); border-radius: 999px; background: var(--acento); color: var(--tinta); font-family: var(--titular); font-weight: 700; font-size: .86rem; line-height: 1.2; letter-spacing: .18em; text-transform: uppercase; }
.en-plan h3 { font-size: clamp(1.8rem, 3vw, 2.25rem); }
.en-plan__para { color: var(--apagado); font-size: .98rem; line-height: 1.45; min-height: 2.9em; }
.en-plan__inicial, .en-plan__cuota { color: var(--apagado); font-size: 1rem; line-height: 1; }
.en-plan__inicial { margin-top: 6px; }
.en-plan__inicial strong { margin-right: 6px; font-family: var(--titular); font-weight: 800; font-style: italic; font-size: clamp(3.6rem, 6.6vw, 5rem); line-height: .9; white-space: nowrap; color: var(--tinta); }
.en-plan__cuota strong { margin-right: 4px; font-family: var(--titular); font-weight: 800; font-style: italic; font-size: 1.75rem; line-height: 1; color: var(--tinta); }
/* El sello: una nota corta en una pastilla, con un punto lima. */
.en-plan__ahorro { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; width: fit-content; margin: 8px 0 6px; padding: 5px 14px; border: 1px solid var(--linea); border-radius: 18px; background: #FFFFFF; font-size: .88rem !important; font-weight: 600; line-height: 1.3; color: var(--tinta) !important; }
.en-plan__ahorro::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 1px rgba(14, 20, 17, .18); }
/* El plan Esencial no tiene la línea de «+ cuota»: se le deja su hueco para que las dos tarjetas vayan a la par. */
.en-plan__inicial + .en-plan__ahorro { margin-top: calc(18px + 1.75rem); }
/* El precio de lanzamiento (26/10/2026): una pastilla lima con la tinta encima, debajo de la tarifa. Con la misma altura
   mínima, el hueco que guarda su sitio en un plan sin él (en_lanzamiento_hueco()) mide lo mismo y no se ve. */
.en-lanzamiento { display: inline-flex; align-items: baseline; gap: 6px; align-self: flex-start; width: fit-content; min-height: 2.4rem; margin: 0; padding: 6px 15px 5px; border: 1.5px solid var(--tinta); border-radius: 999px; background: var(--acento); color: var(--tinta) !important; font-size: .95rem !important; font-weight: 600; line-height: 1.2; }
.en-lanzamiento strong { font-family: var(--titular); font-weight: 800; font-style: italic; font-size: 1.35rem; line-height: 1; }
.en-lanzamiento--hueco { visibility: hidden; }
/* En el plan Esencial, la pastilla baja lo que ocupa la línea de «+ cuota» del plan a medida, como el sello. */
.en-plan__inicial + .en-lanzamiento { margin-top: calc(10px + 1.75rem); }
.en-plan .en-lista-check { padding-top: 20px; border-top: 1px solid var(--linea); font-size: 1rem; }
.en-plan .wp-block-buttons { margin-top: auto; padding-top: 20px; }
.en-plan .wp-block-button, .en-plan .wp-block-button__link { width: 100%; }

/* El resumen de precios de la portada: una tarjeta por app, con el mismo aire que un plan. */
.en-tarjeta--precio { gap: 10px; padding: clamp(28px, 3.4vw, 40px); background: #FFFFFF; border: 1.5px solid var(--tinta); border-radius: 26px; box-shadow: 8px 8px 0 var(--acento); }
.en-tarjeta--precio:hover { transform: translate(-4px, -4px); box-shadow: 12px 12px 0 var(--acento); }
.en-tarjeta--precio h3 { font-size: clamp(2rem, 3.4vw, 2.6rem); }
.en-tarjeta--precio .en-desde { color: var(--apagado); font-size: 1.02rem; line-height: 1; margin-top: 4px; }
.en-desde strong { margin-right: 6px; font-family: var(--titular); font-weight: 800; font-style: italic; font-size: clamp(3.6rem, 6.6vw, 5rem); line-height: .9; white-space: nowrap; color: var(--tinta); }
.en-tarjeta--precio .en-mas { margin-top: 6px; }

/* ---------- Entrenly One, el producto estrella (13/10/2026) ----------
   Lleva Club y Coach juntos. Sus planes van en las mismas tarjetas que los demás, en su propia banda oscura;
   lo único que se le añade al plan es una estrella en el sello y un filo lima. */
.en-plan--estrella { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento), 13px 13px 0 var(--acento); }
/* Más aire entre las dos tarjetas: en el móvil, la sombra de la primera llegaba al sello de la segunda. */
.en-seccion--one .en-planes { row-gap: 46px; }
.en-plan--estrella .en-plan__etiqueta { display: inline-flex; align-items: center; gap: 7px; }
.en-plan--estrella .en-plan__etiqueta::before { content: ""; flex: none; width: .95em; height: .95em; margin-top: -2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230E1411' d='M12 1.8l3.1 6.6 7.1.9-5.2 5 1.3 7.1L12 17.9 5.7 21.4 7 14.3 1.8 9.3l7.1-.9z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* En la portada va debajo de las dos apps, a todo el ancho y en oscuro: el nombre a un lado y el precio al otro. */
.en-tarjeta--one {
	--foco: var(--acento); --subrayado: var(--acento); /* es oscura: el marco del teclado, en lima (17/10/2026) */
	grid-column: 1 / -1; margin-top: 12px; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(24px, 4vw, 64px); align-items: center;
	grid-template-areas: "para precio" "nombre precio" "sello lanzamiento" "mas lanzamiento";
	background: radial-gradient(62% 130% at 100% 0%, rgba(198, 244, 50, .2), transparent 62%), var(--tinta);
}
.en-tarjeta--one .en-lanzamiento { grid-area: lanzamiento; align-self: start; }
.en-tarjeta--one .en-producto__para { grid-area: para; color: var(--acento); }
.en-tarjeta--one h3 { grid-area: nombre; color: #F4F7EE; }
.en-tarjeta--one .en-desde { grid-area: precio; margin-top: 0; color: var(--claro); }
.en-tarjeta--one .en-desde strong { color: var(--acento); }
.en-tarjeta--one .en-plan__ahorro { grid-area: sello; }
.en-tarjeta--one .en-mas { grid-area: mas; }
.en-tarjeta--one .en-mas a { color: #F4F7EE; }
@media (max-width: 760px) { .en-tarjeta--one { grid-template-columns: minmax(0, 1fr); grid-template-areas: "para" "nombre" "precio" "lanzamiento" "sello" "mas"; } .en-tarjeta--one .en-desde { margin-top: 4px; } }
/* El aviso que lleva a Entrenly One desde los precios de Club y de Coach. */
.en-aviso-one { padding: 16px 22px; border: 1.5px solid var(--tinta); border-radius: 18px; background: var(--acento); box-shadow: 6px 6px 0 var(--tinta); color: var(--tinta); font-size: 1.02rem; line-height: 1.45; }
.en-aviso-one a { font-weight: 700; color: var(--tinta); white-space: nowrap; text-decoration-color: var(--tinta); }
/* Su desglose a medida va delante de los otros dos y a todo el ancho, en una ficha. */
.en-extra--ancho { grid-column: 1 / -1; padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 34px) clamp(8px, 1.4vw, 16px); background: #FFFFFF; border: 1.5px solid var(--tinta); border-radius: 26px; box-shadow: 10px 10px 0 var(--acento); }

/* Lo opcional y lo que va aparte: filas con el concepto a la izquierda y el importe a la derecha. */
.en-extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 56px; align-items: start; }
.en-extra { display: grid; }
.en-extra h3 { margin-bottom: 12px; }
/* Entre el concepto y el importe hay un « · » que solo sirve cuando la página se lee en texto: aquí no se pinta. */
.en-extra__fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 20px; padding-top: 14px; border-top: 1px solid var(--raya); font-size: 0; }
.en-extra__fila strong, .en-extra__precio { font-size: 1.03rem; font-weight: 700; line-height: 1.35; color: var(--txt); }
.en-extra__precio { white-space: nowrap; }
.en-extra__nota { padding: 4px 0 16px; color: var(--txt-2); font-size: .94rem; line-height: 1.45; max-width: 46em; }
/* Un bloque solo en su fila, a todo el ancho (13/10/2026: al quitar lo repetido, algunas secciones se quedan con uno). */
.en-extra--todo { grid-column: 1 / -1; }
/* El precio por separado, tachado, delante del de Entrenly One (13/10/2026). */
.en-plan__inicial s { display: block; margin-bottom: 4px; font-family: var(--cuerpo); font-size: 1.05rem; font-weight: 500; line-height: 1.2; color: var(--txt-2); text-decoration-thickness: 2px; }
/* Entrenly One en la portada, debajo de las dos apps (13/10/2026): una franja oscura con su estrella. */
.en-franja-one { --foco: var(--acento); margin: 0; padding: 16px 22px; border-radius: 18px; background: radial-gradient(420px 160px at 100% 0%, rgba(198, 244, 50, .22), transparent 64%), var(--tinta); box-shadow: 6px 6px 0 var(--acento); color: #F4F7EE; font-size: 1.04rem; line-height: 1.45; }
.en-franja-one strong { color: var(--acento); }
.en-franja-one strong::before { content: ""; display: inline-block; width: .8em; height: .8em; margin-right: 7px; vertical-align: -.04em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23C6F432' d='M12 1.8l3.1 6.6 7.1.9-5.2 5 1.3 7.1L12 17.9 5.7 21.4 7 14.3 1.8 9.3l7.1-.9z'/%3E%3C/svg%3E") center / contain no-repeat; }
.en-franja-one a { font-weight: 700; color: #FFFFFF; white-space: nowrap; text-decoration-color: var(--acento); }
.en-pie__origen { opacity: .86; }
/* Las ofertas en vigor, nombradas debajo de unos precios (13/10/2026): una línea de cada una y el enlace a Ofertas, donde van enteras. */
.en-ofertas-nota { display: grid; gap: 14px; padding: 22px 26px; border: 1px solid #D5EE86; border-radius: 20px; background: var(--acento-suave); color: var(--tinta); }
.en-ofertas-nota .en-antetitulo { color: var(--acento-texto); }
.en-ofertas-nota .en-vistos { font-size: 1rem; }
.en-ofertas-nota .en-mas { margin: 0; }
@media (min-width: 900px) {
	/* 16/10/2026: cuatro ofertas (con la de boxes), de dos en dos. */
	.en-ofertas-nota .en-vistos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
	.en-ofertas-nota--dos .en-vistos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Todos los precios de un vistazo, al principio de la página de precios. */
.en-tabla-precios { max-width: 980px; }
.en-tabla-precios table { min-width: 580px; table-layout: auto; }
.en-tabla-precios th:first-child, .en-tabla-precios td:first-child { padding-left: 0; }
.en-tabla-precios td:first-child { font-weight: 700; }
.en-tabla-precios td:nth-child(2) { color: var(--txt-2); }
.en-tabla-precios td:nth-child(3), .en-tabla-precios td:nth-child(4) { white-space: nowrap; font-family: var(--titular); font-weight: 800; font-style: italic; font-size: 1.5rem; line-height: 1.1; }
.en-tabla-precios td:nth-child(4) { color: var(--txt-2); }
/* «por entrenador», debajo de la cuota y en letra normal: en la misma línea no cabía en el móvil. */
.en-tabla-precios .en-unidad { display: block; margin-top: 3px; font-family: var(--cuerpo); font-weight: 400; font-style: normal; font-size: .82rem; line-height: 1.2; color: var(--txt-2); white-space: normal; }
/* El precio de lanzamiento debajo de la tarifa (26/10/2026): la pastilla lima de los planes, en pequeño. */
.en-tabla-precios .en-lanzamiento-tabla { display: inline-block; margin-top: 5px; padding: 2px 9px 1px; border: 1px solid var(--tinta); border-radius: 999px; background: var(--acento); color: var(--tinta); font-family: var(--cuerpo); font-weight: 700; font-style: normal; font-size: .8rem; line-height: 1.3; white-space: nowrap; }
.en-actualizada { margin-top: -20px; }
/* El pago anual con descuento: se ve, pero no compite con los precios. */
.en-anual { margin-top: -8px; color: var(--txt); }
/* En el móvil caben tres columnas sin cortar el precio: se quita «Para quién», que ya lo dice el nombre del plan. */
@media (max-width: 640px) {
	.en-tabla-precios table { min-width: 0; font-size: .94rem; }
	.en-tabla-precios th:nth-child(2), .en-tabla-precios td:nth-child(2) { display: none; }
	.en-tabla-precios th, .en-tabla-precios td { padding: 13px 10px; }
	.en-tabla-precios td:nth-child(3), .en-tabla-precios td:nth-child(4) { font-size: 1.25rem; }
	.en-tabla-precios th:last-child, .en-tabla-precios td:last-child { padding-right: 0; }
}
@media (max-width: 760px) { .en-planes, .en-extras { grid-template-columns: 1fr; } .en-plan__inicial + .en-plan__ahorro { margin-top: 8px; } .en-plan__inicial + .en-lanzamiento { margin-top: 4px; } .en-lanzamiento--hueco { display: none; } }

/* ---------- preguntas ---------- */
/* En oscuro, como la última página de los dossieres: el título a un lado y las preguntas al otro. */
.en-preguntas { display: grid; max-width: 920px; border-bottom: 1px solid var(--raya); }
.en-preguntas details { border-top: 1px solid var(--raya); }
.en-preguntas summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0 20px; cursor: pointer; list-style: none; font-family: var(--titular); font-weight: 800; font-style: italic; font-size: clamp(1.32rem, 2.1vw, 1.62rem); line-height: 1.05; text-transform: uppercase; transition: color .15s; }
.en-preguntas summary:hover { color: var(--ceja); }
.en-preguntas summary::-webkit-details-marker { display: none; }
/* El «+» va en un círculo lima; al abrir gira y queda un aspa. */
.en-preguntas summary::after { content: ""; flex: 0 0 34px; height: 34px; border-radius: 50%; background: linear-gradient(var(--tinta), var(--tinta)) center / 14px 2.5px no-repeat, linear-gradient(var(--tinta), var(--tinta)) center / 2.5px 14px no-repeat, var(--acento); transition: transform .25s; }
.en-preguntas details[open] summary::after { transform: rotate(45deg); }
.en-preguntas details p { padding: 0 54px 24px 0; color: var(--txt-2); max-width: 46em; }
@media (min-width: 1000px) {
	.en-seccion--preguntas > .en-ancho { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
	.en-seccion--preguntas .en-cabecera { position: sticky; top: calc(var(--barra) + 36px); }
}

/* ---------- dos columnas ---------- */
.en-dos { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.en-dos > .wp-block-group { display: grid; gap: 16px; align-content: start; }
.en-dos--demo { grid-template-columns: .8fr 1.2fr; align-items: start; }
.en-datos { display: grid; gap: 26px; }
.en-dato { display: grid; grid-template-columns: 50px 1fr; gap: 4px 18px; align-items: start; }
.en-dato.en-ico::before { grid-row: span 2; margin-bottom: 0; }
.en-dato .en-h3 { font-size: 1.6rem; align-self: end; }
.en-dato p { color: var(--txt-2); font-size: 1rem; grid-column: 2; }
@media (max-width: 999px) { .en-dos, .en-dos--demo { grid-template-columns: 1fr; } }

/* =====================================================================
 * La historia: una animación fija que avanza con el scroll mientras pasan los pasos
 * (portada, «Cómo empiezas»). Sus fotogramas están en assets/video/; ver WORDPRESS.md.
 * ===================================================================== */
.en-escena { position: relative; width: 100%; height: 100%; pointer-events: none; }
.en-escena video { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Con el scroll: la imagen fija y, encima, el lienzo donde se pintan los fotogramas (transparente hasta que llega
   el primero). Los dos van centrados y enteros en la caja, a su tamaño o encogidos, nunca deformados. No se usa
   object-fit porque en un lienzo no está garantizado en todos los navegadores. */
.en-escena img, .en-escena canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 100%; max-height: 100%; }
.en-escena.es-viva img { visibility: hidden; }
/* El fondo de la animación es el hueso de su sección: va teñido en los propios archivos (marca/recolorear-video.mjs),
   sin mezclas por CSS, que frenan el scroll. Los bordes se difuminan en círculo, por los cuatro lados, por si algún
   navegador lo pinta un tono distinto. En el lienzo ese mismo difuminado (opaco hasta el 88 % del radio) lo pinta
   main.js dentro de cada fotograma: si se cambia aquí, se cambia allí. */
.en-historia__escena video, .en-historia__escena img {
	-webkit-mask-image: radial-gradient(circle closest-side, #000 88%, transparent);
	mask-image: radial-gradient(circle closest-side, #000 88%, transparent);
}
.en-historia { display: grid; gap: 20px; }
.en-historia__escena {
	position: sticky; top: var(--barra); z-index: 2;
	height: 40svh; min-height: 230px;
	margin-inline: calc(var(--margen) * -1);
	background: linear-gradient(to bottom, var(--suelo) 88%, transparent);
}
.en-historia__pasos { display: grid; gap: 14px; }
.en-historia__paso {
	display: grid; gap: 8px; align-content: center;
	min-height: 24svh; padding: 24px;
	background: #FFFFFF; border: 1px solid var(--linea); border-radius: var(--r);
	transition: border-color .4s, box-shadow .4s;
}
.en-historia__paso h3 { font-size: 1.8rem; transition: color .4s; }
.en-historia__paso p:last-child { color: var(--txt-2); }
/* El paso activo lleva su número en lima; los demás, en hueco. El texto conserva siempre su contraste. */
.en-js .en-historia__paso:not(.es-activo) .en-paso__n { background: transparent; box-shadow: inset 0 0 0 2px var(--linea-fuerte); color: var(--apagado) !important; }
.en-js .en-historia__paso.es-activo { border-color: var(--tinta); box-shadow: 6px 6px 0 var(--acento); }
@media (min-width: 1000px) {
	.en-historia { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
	.en-historia__escena {
		top: calc(var(--barra) + 24px);
		height: calc(100svh - var(--barra) - 48px); max-height: 600px;
		margin: 0; background: none;
	}
	.en-historia__pasos { gap: 0; }
	/* Sin tarjeta: una línea a la izquierda que recorre los tres pasos y se pone de tinta en el activo. */
	/* 20/10/2026 (repaso con Dani, P1): cada paso con menos aire (62svh hasta entonces), para no bajar tanto; el vídeo sigue fijo. */
	.en-historia__paso { min-height: 46svh; padding: 0 0 0 clamp(22px, 2.6vw, 40px); border: 0; border-left: 3px solid var(--linea-fuerte); border-radius: 0; background: none; box-shadow: none !important; transition: border-color .4s; }
	.en-js .en-historia__paso.es-activo { border-left-color: var(--tinta); }
	.en-historia__paso .en-paso__n { width: 64px; height: 64px; font-size: 2.4rem !important; margin-bottom: 12px; }
	.en-historia__paso h3 { font-size: clamp(2.2rem, 3.6vw, 3.1rem); line-height: .95; }
	.en-js .en-historia__paso:not(.es-activo) h3 { color: var(--apagado); }
	.en-historia__paso p:last-child { font-size: 1.15rem; max-width: 27em; }
}

/* ---------- testimonios (patrones del editor, sin usar hasta tener material real) ---------- */

.en-testimonio { display: grid; gap: 14px; padding: 30px; background: var(--carta); border: 1px solid var(--carta-borde); border-radius: var(--r); }
.en-testimonio__cita { font-size: 1.25rem; line-height: 1.45; }
.en-testimonio__autor { color: var(--txt-2); font-size: .96rem; }

/* ---------- la llamada final y el formulario ---------- */
/* Un bloque lima sobre oscuro, como la llamada de la última página de los dossieres. */
.en-seccion--final { padding-block: clamp(28px, 4vw, 56px) clamp(56px, 8vw, 104px); background: var(--tinta); }
.en-seccion--preguntas + .en-seccion--final { padding-top: 0; }
.en-final { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 5vw, 64px); border-radius: 32px; background: radial-gradient(60% 90% at 100% 0%, var(--acento-claro), transparent 60%), var(--acento); }
.en-final__texto { display: grid; gap: 16px; }
.en-final h2 { font-size: clamp(2.2rem, 4.9vw, 3.9rem); line-height: .97; }
.en-final__texto p { font-size: 1.1rem; line-height: 1.5; color: var(--txt-3); max-width: 30em; }
@media (max-width: 999px) { .en-final { grid-template-columns: 1fr; } }

.en-form { display: grid; gap: 14px; padding: clamp(18px, 3vw, 30px); background: #FFFFFF; border: 1.5px solid var(--tinta); border-radius: 24px; --b-fondo: var(--tinta); --b-texto: var(--acento); --b-fondo-s: var(--acento); --b-texto-s: var(--tinta); --subrayado: var(--tinta); }
/* 20/10/2026 (Dani: «el formulario, un poco más pequeño»): menos aire dentro de la caja, campos más bajos y la letra un punto
   menor. Las medidas de antes: 14 px entre campos, 50 px de alto, 11 px 14 px de relleno y 88 px la caja de texto. */
.en-form { gap: 12px; padding: clamp(16px, 2.4vw, 24px); font-size: .95rem; }
.en-form__fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.en-form label { display: block; margin-bottom: 5px; font-weight: 700; font-size: .88rem; }
.en-form label span { font-weight: 400; color: var(--apagado); }
.en-form input[type="text"], .en-form input[type="email"], .en-form input[type="tel"], .en-form select, .en-form textarea { width: 100%; padding: 11px 14px; border: 1.5px solid var(--linea-fuerte); border-radius: 12px; background: #FFFFFF; color: var(--tinta); font: inherit; font-size: 1rem; transition: border-color .15s, box-shadow .15s; }
.en-form input[type="text"], .en-form input[type="email"], .en-form input[type="tel"], .en-form select { height: 44px; padding-block: 9px; }
.en-form select { text-overflow: ellipsis; }
.en-form p { min-width: 0; }
.en-form textarea { resize: vertical; min-height: 72px; padding-block: 9px; }
.en-form input:focus-visible, .en-form select:focus-visible, .en-form textarea:focus-visible { outline: 0; border-color: var(--tinta); box-shadow: 0 0 0 3px var(--acento); }
.en-form__trampa { position: absolute; left: -9999px; }
.en-form__acepto label { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-weight: 400; font-size: .9rem; color: var(--apagado); }
.en-form__acepto input { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 4px; accent-color: var(--tinta); }
.en-form__enviar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.en-form__nota { font-size: .86rem; color: var(--apagado); }
/* Sin aviso que dar, el hueco no se pinta (el párrafo trae espacios, así que «:empty» no vale). */
.en-form__estado:not([data-estado]) { display: none; }
.en-form__estado { padding: 12px 14px; border-radius: 12px; font-weight: 700; }
.en-form__estado[data-estado="ok"] { background: var(--menta-suave); color: var(--menta); }
.en-form__estado[data-estado="error"] { background: #FFE9E4; color: #A32A12; }
.en-form.es-enviando { opacity: .6; pointer-events: none; }
@media (max-width: 560px) { .en-form__fila { grid-template-columns: 1fr; } }

.en-cta { display: grid; gap: 14px; justify-items: start; padding: clamp(24px, 4vw, 44px); border-radius: 28px; background: radial-gradient(60% 90% at 100% 0%, var(--acento-claro), transparent 60%), var(--acento); }
.en-cta h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: .98; }
.en-cta p { color: var(--txt-3); }
.en-cta--entrada { margin-top: 48px; }

/* ---------- páginas de texto y blog ---------- */
.en-texto { padding-block: clamp(40px, 6vw, 80px); }
.en-texto > .en-ancho { display: grid; gap: 16px; }
.en-texto h1 { font-size: clamp(2.4rem, 6.4vw, 4.2rem); line-height: .94; }
.en-texto__fecha { color: var(--apagado); font-size: .94rem; }
.en-texto__imagen img { display: block; border-radius: var(--r); }
.en-prosa { display: grid; gap: 18px; margin-top: 12px; }
.en-prosa > * { min-width: 0; }
.en-prosa h2 { margin-top: 22px; font-size: clamp(1.6rem, 2.8vw, 2rem); }
.en-prosa ul, .en-prosa ol { padding-left: 22px; display: grid; gap: 10px; }
.en-prosa a { text-decoration-color: var(--subrayado); text-decoration-thickness: 3px; }
.en-prosa .wp-block-table { padding: 18px 20px 6px; border: 1px solid var(--linea); border-radius: 16px; background: #FFFFFF; }
.en-prosa .wp-block-table th { padding-top: 0; }
.en-paginacion { margin-top: 36px; }
.en-paginacion .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.en-paginacion .page-numbers { padding: 9px 16px 8px; border: 1.5px solid var(--tinta); border-radius: 999px; background: #FFFFFF; color: var(--tinta); font-family: var(--titular); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.en-paginacion .current { background: var(--tinta); color: var(--acento); }

/* ---------- pie ---------- */
.en-pie { padding-block: clamp(48px, 6vw, 76px) 28px; background: var(--tinta); border-top: 1px solid rgba(255, 255, 255, .1); color: var(--claro); font-size: .97rem; }
.en-pie__rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.en-pie__marca { display: grid; gap: 14px; align-content: start; max-width: 21em; }
.en-pie h2 { margin-bottom: 16px; }
.en-pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.en-pie a { color: inherit; text-decoration: none; transition: color .15s; }
.en-pie a:hover { color: #FFFFFF; }
/* 17/10/2026 (repaso fino, aprobado por Dani): cada enlace del pie responde en su fila entera (de 20 a 34 px de alto; los de
   abajo, de 18 a 42), sin mover nada: el relleno de más se compensa con un margen negativo. */
.en-pie ul a { display: inline-block; padding-block: 4.5px; margin-block: -4.5px; }
.en-pie__legal ul a { padding-block: 10px; margin-block: -10px; }
.en-pie .en-logo, .en-pie .en-logo:hover { color: #FFFFFF; }
.en-pie__legal { display: flex; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .88rem; }
.en-pie__legal ul { display: flex; gap: 20px; flex-wrap: wrap; }
@media (max-width: 760px) { .en-pie__rejilla { grid-template-columns: 1fr; } }

/* =====================================================================
 * Aparición al hacer scroll (solo con JavaScript: sin él, todo se ve)
 * ===================================================================== */
.en-js .en-aparece, .en-js .en-escalera > * { opacity: 0; transform: translateY(16px); transition: opacity .6s ease-out, transform .6s cubic-bezier(.2, .8, .2, 1); }
.en-js .en-aparece.es-visible, .en-js .en-escalera.es-visible > * { opacity: 1; transform: none; }
.en-js .en-escalera.es-visible > *:nth-child(2) { transition-delay: .08s; }
.en-js .en-escalera.es-visible > *:nth-child(3) { transition-delay: .16s; }
.en-js .en-escalera.es-visible > *:nth-child(4) { transition-delay: .24s; }
.en-js .en-escalera.es-visible > *:nth-child(5) { transition-delay: .32s; }
.en-js .en-escalera.es-visible > *:nth-child(n+6) { transition-delay: .4s; }
/* Pasada la entrada se quitan los retardos, para que el hover responda al instante. */
.en-js .en-escalera.es-lista > * { transition-delay: 0s !important; transition-duration: .2s; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
	.en-js .en-aparece, .en-js .en-escalera > * { opacity: 1; transform: none; }
	.en-pantalla__recorte[data-desliza] img { transform: none; }
}

/* ---------- los negocios (16/10/2026, pedido por Dani; inc/negocios.php) ---------- */
/* En el menú: «Centros» y «Entrenadores» llevan una flecha que despliega sus negocios, cada uno con su foto, y «Precios y
   ofertas», sus dos páginas (17/10/2026, decidido por Dani). */
.en-menu__con-sub { position: relative; display: flex; align-items: center; }
/* Debajo de «Centros» y de «Entrenadores», en pequeño y en lima (pedido por Dani), el nombre de su app. */
.en-menu__lista > li > a > small { display: block; margin-top: 1px; font-family: var(--cuerpo); font-weight: 600; font-size: .7rem; line-height: 1.1; letter-spacing: .01em; text-transform: none; color: var(--acento); }
/* Entrenly Box, con «Nuevo» mientras lo sea (ENTRENLY_BOX_NUEVO). */
.en-menu__nuevo { display: inline-block; margin-left: 7px; padding: 3px 6px 2px; border-radius: 999px; background: var(--acento); color: var(--tinta); font-family: var(--cuerpo); font-weight: 700; font-size: .62rem; line-height: 1; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }
.en-menu__abrir { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-left: -8px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--claro); cursor: pointer; }
.en-menu__abrir::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.en-menu__abrir:hover, .en-menu__abrir:focus-visible { color: var(--acento); }
.es-desplegado > .en-menu__abrir::before { transform: translateY(2px) rotate(-135deg); }
.en-submenu { list-style: none; margin: 0; padding: 0; }
.en-menu__lista .en-submenu a { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; padding: 7px 8px; border: 0; border-radius: 12px; font-family: var(--cuerpo); font-weight: 600; font-size: 1rem; line-height: 1.25; letter-spacing: 0; text-transform: none; white-space: normal; color: #FFFFFF; }
.en-menu__lista .en-submenu a::after { display: none; }
.en-menu__lista .en-submenu a:hover { background: rgba(255, 255, 255, .07); }
.en-submenu img { display: block; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.en-submenu a > span { min-width: 0; }
.en-submenu small { display: block; margin-top: 2px; font-weight: 500; font-size: .84rem; line-height: 1.3; color: rgba(255, 255, 255, .6); }
/* Las filas sin foto: «€» y «%», para los precios y las ofertas. */
.en-submenu__icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: rgba(255, 255, 255, .07); color: var(--acento); font-family: var(--titular); font-weight: 800; font-size: 1.35rem; line-height: 1; }
/* «Otro tipo de centro» y «Otra disciplina» (18/10/2026, elegido por Dani): las fotos de su grupo van pasando, seis turnos
   de 2,5 s (entrenly_icono_de_otro()), con un «+» lima en la esquina. Con menos movimiento, la primera, quieta. */
.en-submenu__pase { position: relative; display: block; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, .07); }
.en-submenu__pase img { position: absolute; inset: 0; opacity: 0; animation: en-pase 15s infinite; }
.en-submenu__pase img:nth-child(2) { animation-delay: 2.5s; }
.en-submenu__pase img:nth-child(3) { animation-delay: 5s; }
.en-submenu__pase img:nth-child(4) { animation-delay: 7.5s; }
.en-submenu__pase img:nth-child(5) { animation-delay: 10s; }
.en-submenu__pase img:nth-child(6) { animation-delay: 12.5s; }
.en-submenu__pase i { position: absolute; right: 3px; bottom: 3px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--acento); color: var(--tinta); font-family: var(--cuerpo); font-style: normal; font-weight: 800; font-size: .8rem; line-height: 1; box-shadow: 0 0 0 2px var(--tinta); }
@keyframes en-pase { 0% { opacity: 0; } 3% { opacity: 1; } 16.67% { opacity: 1; } 19.67% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .en-submenu__pase img:first-child { opacity: 1; } } /* La animación ya la quita la regla general. */
/* Entre 1000 y 1279 px el menú va justo: la flecha, más pequeña y pegada a su enlace, para que todo quepa en una línea. */
@media (min-width: 1000px) and (max-width: 1279px) {
	.en-menu__abrir { width: 18px; margin-left: -7px; }
	.en-menu__lista .en-menu__con-sub > a { padding-right: 4px; }
}
@media (min-width: 1000px) {
	/* Los de dos renglones, con menos aire arriba y abajo, para que la barra no crezca. */
	.en-menu__lista { align-items: center; }
	.en-menu__lista > li > a:has(> small) { padding-block: 3px 4px; }
	/* Al pasar por encima (o con el teclado, o con la flecha) se abre debajo, como una ficha oscura. */
	.en-submenu { position: absolute; top: 100%; left: 0; z-index: 60; display: none; gap: 2px; min-width: 290px; padding: 10px; background: var(--tinta); border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; box-shadow: 0 26px 44px -22px rgba(0, 0, 0, .75); }
	.en-submenu--centros { grid-template-columns: repeat(2, minmax(250px, 1fr)); }
	/* «Precios y ofertas» va casi al final: su ficha se abre hacia la izquierda, para no salirse de la pantalla. */
	.en-submenu--precios { left: auto; right: 0; }
	.en-menu__con-sub:hover > .en-submenu, .en-menu__con-sub:focus-within > .en-submenu, .en-menu__con-sub.es-desplegado > .en-submenu { display: grid; }
}
@media (max-width: 999px) {
	/* En el móvil, el menú abierto puede ser más alto que la pantalla: se desliza dentro. */
	.en-menu { max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }
	.en-menu__con-sub { flex-wrap: wrap; border-bottom: 1px solid rgba(255, 255, 255, .1); }
	.en-menu__con-sub > a { flex: 1; border-bottom: 0; }
	.en-menu__abrir { width: 40px; height: 40px; margin: 0; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; color: var(--acento); }
	.en-submenu { display: none; flex-basis: 100%; padding: 0 0 12px; }
	.es-desplegado > .en-submenu { display: grid; gap: 2px; }
	.en-menu__lista > li > a > small { margin-top: 3px; font-size: .82rem; }
}

/* La portada de un negocio: el titular a un lado y la foto de su disciplina al otro, con el relieve de las portadas. */
.en-portada--negocio > .en-ancho { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: clamp(26px, 4.4vw, 64px); justify-items: stretch; }
.en-negocio__texto { display: grid; gap: 20px; justify-items: start; }
.en-portada--negocio .en-portada__titulo { font-size: clamp(2.5rem, 6.2vw, 4.9rem); }
/* Aquí la palabra clave puede ser larga («reservada desde el móvil»): se parte si no cabe, en vez de salirse. */
.en-portada--negocio .en-portada__titulo em { white-space: normal; }
.en-foto-negocio { margin: 0; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; border: 2px solid var(--tinta); box-shadow: 8px 8px 0 var(--tinta); }
.en-portada--oscura .en-foto-negocio { border-color: var(--acento); box-shadow: 8px 8px 0 var(--acento); }
.en-foto-negocio img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
	.en-portada--negocio > .en-ancho { grid-template-columns: minmax(0, 1fr); }
	.en-portada--negocio .en-foto-negocio { order: -1; margin-right: 8px; }
}

/* La fila de fotos de la página de Club: cada negocio, con su nombre encima, lleva a su página. */
.en-negocios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 22px); }
.en-negocios a { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; color: #FFFFFF; text-decoration: none; isolation: isolate; }
.en-negocios img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.en-negocios a::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to bottom, rgba(14, 20, 17, 0), rgba(14, 20, 17, .9)); z-index: 0; }
.en-negocios span { position: absolute; left: clamp(12px, 1.6vw, 20px); right: 12px; bottom: clamp(10px, 1.4vw, 16px); z-index: 1; font-family: var(--titular); font-style: italic; font-weight: 800; font-size: clamp(1.15rem, 2.1vw, 1.7rem); line-height: 1; text-transform: uppercase; }
.en-negocios span::after { content: " →"; font-style: normal; color: var(--acento); }
.en-negocios a:hover img { transform: scale(1.05); }
.en-negocios a:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
@media (max-width: 760px) { .en-negocios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* El botón flotante de WhatsApp (inc/whatsapp.php; 20/10/2026, elegido por Dani como el de tropiai.com): lima con la tinta
   encima, abajo a la derecha en todas las páginas. Se esconde con el menú del móvil abierto. */
.en-whatsapp { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--acento); color: var(--tinta); box-shadow: 0 10px 30px rgba(14, 20, 17, .3); transition: transform .25s; }
.en-whatsapp:hover { transform: translateY(-3px) scale(1.04); }
.en-whatsapp:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
body:has(.en-barra.es-abierta) .en-whatsapp { display: none; }
@media (min-width: 1000px) { .en-whatsapp { right: 28px; bottom: 28px; } }
@media (prefers-reduced-motion: reduce) { .en-whatsapp { transition: none; } .en-whatsapp:hover { transform: none; } }
/* En el móvil, el pie deja sitio abajo para que el botón no tape la última línea legal. */
@media (max-width: 700px) { .en-pie__legal { padding-bottom: 76px; } }