/* ==========================================================================
   Evaluación de Precisión — página completa.
   Mismo lenguaje que Medicina Regenerativa y Terapias IV: negro, beige de
   marca y ancho de pantalla. Es la única página con botón de agendamiento.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Los tokens de color de la página.

   El fondo NO es fijo: lo interpola el JS mientras se baja, igual que en la
   portada, y al llegar a "Lo que te llevas" la página entera pasa a blanco.
   Por eso ningún color de esta hoja puede ir escrito a mano: los tres tonos
   que tienen que voltear —la tinta, los brillos de superficie y el beige— se
   componen sobre una variable de componentes, y voltear la página es cambiar
   esas tres líneas. Escritos literalmente, habría que perseguir noventa y
   nueve declaraciones y una se quedaría atrás.
   -------------------------------------------------------------------------- */
.ep {
	--ink-rgb: 247, 245, 240;
	--alto-rgb: 255, 255, 255;
	--beige-rgb: 184, 168, 144;

	--beige: rgb(var(--beige-rgb));
	--beige-soft: rgba(var(--beige-rgb), 0.55);
	--beige-faint: rgba(var(--beige-rgb), 0.14);
	--ink: rgb(var(--ink-rgb));
	--ink-dim: rgba(var(--ink-rgb), 0.66);
	--ep-fondo: #0A0A0B;

	position: relative;
	background: var(--ep-fondo);
	color: var(--ink);
}

/* Sobre fondo claro. La clase la pone el JS por LUMINANCIA del fondo que
   acaba de calcular, no por la sección en la que estamos: así el umbral es
   el mismo que usa la portada y el contraste está garantizado en el punto
   exacto en que el fondo deja de sostener tinta clara.

   El beige de marca (#B8A890) no tiene contraste suficiente sobre blanco, así
   que en claro el acento baja al beige oscuro (#8A7856), que es el mismo que
   ya usa Nutrición sobre marfil. */
.ep.es-claro {
	--ink-rgb: 10, 10, 11;
	--alto-rgb: 10, 10, 11;

	/* 133,115,79 (#85734F) y no el 138,120,86 de Nutrición. La diferencia no
	   se ve, pero se mide: el rótulo pequeño va a 12,8 px y peso 300, y con
	   #8A7856 sobre blanco daba 4,28:1 — por debajo del 4,5:1 que pide AA
	   para texto pequeño. Con este tono da 4,60:1. Los titulares, al ser
	   texto grande, cumplían con los dos. */
	--beige-rgb: 133, 115, 79;

	/* Los filetes se calcularon para separarse de la obsidiana. Sobre blanco,
	   un beige al 14 % desaparece y las tarjetas pierden el borde: aquí se
	   suben las dos superficies que dependen de él. */
	--beige-faint: rgba(var(--beige-rgb), 0.34);
}

.ep.es-claro .ep-tarjeta {
	background: linear-gradient(160deg, rgba(var(--alto-rgb), 0.035), rgba(var(--alto-rgb), 0.01));
}

/* El numeral va al 45 % de opacidad, que sobre obsidiana da 2,18:1 —bajo,
   pero es una cifra de orden junto a su texto—. Sobre blanco el mismo 45 %
   cae a 1,81:1 y deja de leerse. Subirlo aquí lo devuelve por encima de
   donde estaba en oscuro. */
.ep.es-claro .ep-tarjeta__n { opacity: 0.78; }

.ep__bleed {
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

.ep__section { position: relative; padding: clamp(72px, 11vh, 160px) clamp(24px, 6vw, 104px); }
.ep__inner { max-width: 1560px; margin: 0 auto; }

.ep__eyebrow {
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: clamp(0.7rem, 0.9vw, 0.8rem);
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--beige);
	margin: 0 0 clamp(18px, 2.4vw, 34px);
}

.ep__title {
	font-family: var(--font-display, Butler, serif);
	font-weight: 400;
	text-transform: uppercase;
	line-height: 0.94;
	font-size: clamp(2.6rem, 7vw, 6.4rem);
	margin: 0 0 clamp(26px, 3.2vw, 52px);
}

.ep__lead {
	font-size: clamp(1.05rem, 1.35vw, 1.35rem);
	line-height: 1.65;
	font-weight: 300;
	color: var(--ink-dim);
	margin: 0 0 1.25em;
	max-width: 62ch;
}

/* ══════════ Radiografía — fondo del cuerpo de la página ══════════

   La placa se ve al 10 %. Una franja HORIZONTAL la lleva al 100 % a la altura
   del cursor: el gesto es el de bajar un escáner por el cuerpo, no el de
   barrer de lado a lado.

   El tramo que cubre es .ep-cuerpo —de donde termina el hero a donde empieza
   el pie—, no .ep entera: anclada a .ep, la mitad de la placa quedaba debajo
   de la fotografía del hero y no se veían ni la cabeza ni los pies. Al
   anclarla a un contenedor que ya mide justo ese tramo, el encuadre sale solo
   a cualquier alto de página y no hay ningún número que mantener a mano.
   ───────────────────────────────────────────────────────────────────────── */
@property --sy {
	syntax: "<length>";
	inherits: false;
	initial-value: 50%;
}

.ep-cuerpo { position: relative; }

.ep-rx {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.ep-rx__capa {
	position: absolute;
	inset: 0;
	background-image: var(--ep-placa);
	/* El tramo ya no llega al pie de página: termina donde arranca la consola
	   de los cinco componentes. En ese alto más corto, una placa al 100 %
	   metería el cuerpo entero en una franja estrecha, así que se agranda a
	   `100% auto`: la placa ocupa el ancho completo y su alto sale de la
	   proporción del archivo, que es casi tres veces el ancho. Como el tramo
	   mide bastante menos, lo que entra en cuadro es la parte de arriba —de la
	   cabeza al pecho—, que es el encuadre pedido, y se mantiene solo a
	   cualquier ancho de pantalla. */
	background-size: 100% auto;
	background-position: center top;
	background-repeat: no-repeat;
}

.ep-rx__base { opacity: .10; }

/* Copia de la misma placa recortada a la franja del escáner. Al ir encima de
   la del 10 %, dentro de la franja se ve completa. */
.ep-rx__lit {
	/* No al 100 %: la franja ya no cruza sólo el hero, cruza secciones con
	   texto encima. A opacidad plena el hueso blanco se comía la lectura de
	   los titulares justo cuando el escáner pasaba por ellos. */
	opacity: .46;
	--sy: -999px;
	/* El degradado va mucho más largo que antes —340 px a cada lado, con dos
	   escalones intermedios— para que la franja no tenga un borde donde
	   empieza y otro donde termina. Es una luz que pasa, no una barra. */
	-webkit-mask-image: linear-gradient(180deg, transparent calc(var(--sy) - 340px), rgba(0, 0, 0, 0.18) calc(var(--sy) - 230px), rgba(0, 0, 0, 0.62) calc(var(--sy) - 90px), #000 var(--sy), rgba(0, 0, 0, 0.62) calc(var(--sy) + 90px), rgba(0, 0, 0, 0.18) calc(var(--sy) + 230px), transparent calc(var(--sy) + 340px));
	        mask-image: linear-gradient(180deg, transparent calc(var(--sy) - 340px), rgba(0, 0, 0, 0.18) calc(var(--sy) - 230px), rgba(0, 0, 0, 0.62) calc(var(--sy) - 90px), #000 var(--sy), rgba(0, 0, 0, 0.62) calc(var(--sy) + 90px), rgba(0, 0, 0, 0.18) calc(var(--sy) + 230px), transparent calc(var(--sy) + 340px));
	transition: --sy 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Todo el contenido va por encima de la radiografía. Y ninguna sección del
   cuerpo lleva ya fondo opaco: si lo llevara, taparía la placa justo donde se
   supone que tiene que verse. Los halos de marca sí se conservan, porque son
   translúcidos. */
.ep__section,
.ep-hero { position: relative; z-index: 1; }

/* ══════════ Hero — la fotografía del equipo ══════════ */
.ep-hero {
	min-height: clamp(560px, 92vh, 940px);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #000;
	/* La cabecera es fija y se montaba sobre el título: en pantalla ancha
	   la primera línea nacía detrás de la barra y perdía el filo de arriba.
	   Este relleno le reserva su alto. */
	padding-top: clamp(60px, 7vh, 92px);
}

/* El gancho: la imagen entra acercada y desenfocada y se abre hasta su sitio.
   Dura más que una transición normal a propósito — es la primera impresión de
   la página, no una microinteracción. */
.ep-hero__foto {
	position: absolute;
	inset: 0;
	background-image: var(--ep-foto);
	background-size: cover;
	background-position: center;
	/* Oscurecida, como se pidió: la fotografía sostiene el texto, no compite. */
	filter: brightness(.46) saturate(.86);
	animation: ep-entra 2400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ep-entra {
	from { transform: scale(1.16); filter: brightness(.06) saturate(.5) blur(14px); }
	to   { transform: scale(1);    filter: brightness(.46) saturate(.86) blur(0); }
}

.ep-hero__veil {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(72% 60% at 50% 52%, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.62) 62%, rgba(0, 0, 0, 0.88) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 32%, rgba(0, 0, 0, 0.72));
	pointer-events: none;
}

.ep-hero__content {
	position: relative;
	z-index: 2;
	width: min(1440px, 90vw);
	text-align: center;
	animation: ep-sube 1100ms cubic-bezier(0.22, 1, 0.36, 1) 700ms both;
}

@keyframes ep-sube {
	from { opacity: 0; transform: translateY(26px); }
	to   { opacity: 1; transform: none; }
}

.ep-hero__title {
	font-family: var(--font-display, Butler, serif);
	font-weight: 400;
	font-size: clamp(2.2rem, 7.4vw, 7.4rem);
	line-height: 0.96;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #FFF;
	/* Que ninguna palabra se salga aunque la pantalla sea estrecha. */
	overflow-wrap: break-word;
	margin: 0;
	text-shadow: 0 2px 50px rgba(0, 0, 0, 0.9);
}

.ep-hero__sub {
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: clamp(0.82rem, 1.1vw, 1.05rem);
	font-weight: 300;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: rgba(var(--ink-rgb), 0.74);
	margin: clamp(20px, 2.4vw, 32px) 0 0;
}

.ep-hero__intro {
	font-size: clamp(0.98rem, 1.2vw, 1.15rem);
	font-weight: 300;
	line-height: 1.7;
	color: rgba(var(--ink-rgb), 0.62);
	max-width: 60ch;
	margin: clamp(18px, 2vw, 26px) auto 0;
}

/* El isotipo, abajo a la derecha. Va en la esquina contraria a la cabecera
   para no repetir la marca en el mismo sitio, y entra después que el texto:
   es una firma al pie de la escena, no un elemento del titular. */
.ep-hero__isotipo {
	position: absolute;
	right: clamp(22px, 3.4vw, 60px);
	bottom: clamp(22px, 3.4vw, 52px);
	width: clamp(56px, 6vw, 104px);
	height: auto;
	z-index: 3;
	opacity: 0;
	animation: ep-firma 1100ms cubic-bezier(0.22, 1, 0.36, 1) 1500ms forwards;
}

@keyframes ep-firma {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 0.92; transform: none; }
}

/* ══════════ Botón de agendamiento ══════════ */
.ep-cta {
	display: inline-flex;
	align-items: center;
	margin-top: clamp(24px, 3vw, 40px);
	padding: 18px 38px;
	border: 1px solid var(--beige-soft);
	border-radius: 2px;
	color: var(--ink);
	text-decoration: none;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.82rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	position: relative;
	overflow: hidden;
	transition: color 400ms ease, border-color 400ms ease;
}

.ep-cta span { position: relative; z-index: 1; }

.ep-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--beige);
	transform: translateY(101%);
	transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ep-cta:hover { color: var(--ep-fondo); border-color: var(--beige); }
.ep-cta:hover::before { transform: translateY(0); }

/* La cabecera de "Cómo lo hacemos" y su consola viven en dos secciones
   distintas —el borde de la radiografía cae entre ellas—, así que entre las
   dos no puede quedar el relleno de las dos. */
.ep-como--cabeza { padding-bottom: clamp(34px, 4vh, 64px); }
.ep-como--consola { padding-top: 0; }

/* ══════════ Cómo lo hacemos — carrusel de los cinco componentes ══════════

   Pestañas arriba; debajo, texto a la izquierda e imagen a la derecha.

   Punto de partida sin JavaScript: las cinco fichas y las cinco imágenes se
   leen una tras otra, en flujo normal, como una lista corriente. El script
   añade .es-js al contenedor y sólo entonces se apilan y se cruzan. Así el
   contenido nunca depende de que el script llegue a ejecutarse — que es el
   error que ya se ha pagado tres veces en este tema.
   ────────────────────────────────────────────────────────────────────── */
.ep-sel {
	margin-top: clamp(30px, 4vw, 56px);
}

/* ── La consola ─────────────────────────────────────────────────────────
   El selector entero —barra de estado, pestañas y panel— va dentro de una
   tarjeta grande. Suelto sobre el fondo se leía como texto con una imagen al
   lado; encerrado se lee como un aparato que se maneja, que es lo que es. El
   vocabulario es el mismo de la mira y del visor: hilo beige, línea fina y
   escuadras de encuadre. */
.ep-sel__consola {
	position: relative;
	padding: clamp(18px, 2vw, 30px);
	border: 1px solid rgba(var(--beige-rgb), 0.30);
	border-radius: 4px;
	background:
		linear-gradient(180deg, rgba(var(--beige-rgb), 0.055), rgba(var(--alto-rgb), 0.012) 34%, rgba(0, 0, 0, 0.28)),
		rgba(10, 10, 11, 0.74);
	-webkit-backdrop-filter: blur(14px) saturate(1.05);
	        backdrop-filter: blur(14px) saturate(1.05);
	box-shadow:
		0 50px 120px rgba(0, 0, 0, 0.62),
		inset 0 1px 0 rgba(var(--alto-rgb), 0.05);
	overflow: hidden;
}

/* Textura de línea fina: el grano de una pantalla, no un adorno. Va detrás de
   todo lo demás, por eso el contenido se sube a z-index 1. */
.ep-sel__consola::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: repeating-linear-gradient(0deg, rgba(var(--beige-rgb), 0.05) 0 1px, transparent 1px 3px);
	opacity: 0.55;
}

.ep-sel__barra,
.ep-sel__fila,
.ep-sel__panel { position: relative; z-index: 1; }

/* Escuadras de la consola. */
.ep-sel__marcas {
	position: absolute;
	inset: 10px;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(var(--beige), var(--beige)) 0 0 / 22px 1px,
		linear-gradient(var(--beige), var(--beige)) 0 0 / 1px 22px,
		linear-gradient(var(--beige), var(--beige)) 100% 0 / 22px 1px,
		linear-gradient(var(--beige), var(--beige)) 100% 0 / 1px 22px,
		linear-gradient(var(--beige), var(--beige)) 0 100% / 22px 1px,
		linear-gradient(var(--beige), var(--beige)) 0 100% / 1px 22px,
		linear-gradient(var(--beige), var(--beige)) 100% 100% / 22px 1px,
		linear-gradient(var(--beige), var(--beige)) 100% 100% / 1px 22px;
	background-repeat: no-repeat;
	opacity: 0.45;
}

/* ── Barra de estado ────────────────────────────────────────────────── */
.ep-sel__barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 13px;
	margin: 0 0 clamp(18px, 2vw, 26px);
	border-bottom: 1px solid rgba(var(--beige-rgb), 0.22);
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.6rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: rgba(var(--ink-rgb), 0.4);
}

.ep-sel__marca { color: var(--beige); white-space: nowrap; }

.ep-sel__estado {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--beige);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.ep-sel__estado i {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--beige);
	/* ep-late ya existe: es el mismo latido del visor de la mira. */
	animation: ep-late 1.6s ease-in-out infinite;
}

/* ── Pestañas ───────────────────────────────────────────────────────────
   Antes eran cinco casillas separadas por un hilo y se leían como una lista,
   no como cinco botones. Ahora cada una es una tarjeta con su propio borde,
   se levanta al pasar por encima y la activa se tiñe de beige y saca una
   punta que apunta al panel: el vínculo entre "pulso aquí" y "cambia lo de
   abajo" tiene que verse sin tener que probarlo. */
.ep-sel__ayuda {
	margin: 0;
	color: var(--beige);
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ep-sel__fila {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(8px, 0.9vw, 14px);
	margin: 0 0 clamp(30px, 3.4vw, 50px);
}

.ep-sel__btn {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: clamp(14px, 1.4vw, 20px) clamp(14px, 1.3vw, 20px) clamp(18px, 1.7vw, 24px);
	background: rgba(var(--alto-rgb), 0.028);
	border: 1px solid rgba(var(--beige-rgb), 0.24);
	border-radius: 3px;
	color: rgba(var(--ink-rgb), 0.72);
	cursor: pointer;
	text-align: left;
	font-family: var(--font-sans, system-ui, sans-serif);
	transition: color 320ms ease, background 320ms ease, border-color 320ms ease,
		transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms ease;
}

.ep-sel__btn:hover {
	color: var(--ink);
	background: rgba(var(--beige-rgb), 0.10);
	border-color: rgba(var(--beige-rgb), 0.55);
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}

.ep-sel__btn:focus-visible { outline: 2px solid var(--beige); outline-offset: 2px; }

.ep-sel__btn.es-activo {
	color: var(--ink);
	background: rgba(var(--beige-rgb), 0.16);
	border-color: var(--beige);
}

/* La punta que une la pestaña activa con lo que hay debajo. */
.ep-sel__btn.es-activo::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -7px;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	background: var(--beige);
	transform: rotate(45deg);
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.ep-sel__n {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.62rem;
	letter-spacing: 0.22em;
	font-variant-numeric: tabular-nums;
	color: var(--beige);
	opacity: 0.6;
	transition: opacity 320ms ease;
}

/* Flecha de "esto se pulsa": apagada en reposo, encendida al apuntar y en la
   pestaña activa. */
.ep-sel__n::after {
	content: "→";
	font-size: 0.72rem;
	letter-spacing: 0;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 320ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ep-sel__btn:hover .ep-sel__n,
.ep-sel__btn.es-activo .ep-sel__n { opacity: 1; }

.ep-sel__btn:hover .ep-sel__n::after,
.ep-sel__btn.es-activo .ep-sel__n::after { opacity: 1; transform: none; }

.ep-sel__rot {
	font-size: clamp(0.84rem, 1vw, 1.02rem);
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.25;
}

/* El hilo inferior hace de barra de progreso mientras el carrusel avanza
   solo, y se queda lleno en cuanto el visitante toma el mando. */
.ep-sel__hilo {
	position: absolute;
	left: -1px;
	right: -1px;
	bottom: -1px;
	height: 2px;
	overflow: hidden;
	border-radius: 0 0 3px 3px;
}

.ep-sel__hilo i {
	display: block;
	height: 100%;
	background: var(--beige);
	transform: scaleX(0);
	transform-origin: left center;
}

.ep-sel__btn.es-activo .ep-sel__hilo i { transform: scaleX(1); }

.ep-sel.es-auto .ep-sel__btn.es-activo .ep-sel__hilo i {
	animation: ep-sel-avance var(--ep-auto, 7000ms) linear both;
}

@keyframes ep-sel-avance {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* ── Panel ──────────────────────────────────────────────────────────── */
.ep-sel__panel {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
	gap: clamp(30px, 4vw, 74px);
	align-items: center;
}

/* Las cinco fichas comparten la MISMA celda de la retícula: la columna mide
   lo que mida la más alta y no da un salto de altura al cambiar de pestaña.
   Esto es lo que hace .es-js; sin él siguen una debajo de otra. */
.ep-sel.es-js .ep-sel__col { display: grid; }
.ep-sel.es-js .ep-sel__caso { grid-area: 1 / 1; }

.ep-sel__caso {
	min-width: 0;
	transition: opacity 420ms ease;
}

.ep-sel.es-js .ep-sel__caso {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.ep-sel.es-js .ep-sel__caso.es-activo {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	animation: ep-sel-entra 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ep-sel-entra {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

.ep-sel__clave {
	margin: 0 0 clamp(12px, 1.4vw, 18px);
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.64rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--beige);
}

.ep-sel__t {
	margin: 0 0 clamp(14px, 1.6vw, 22px);
	font-family: var(--font-display, Butler, serif);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.02;
	font-size: clamp(1.9rem, 3.4vw, 3.4rem);
	color: var(--ink);
}

.ep-sel__d {
	margin: 0;
	max-width: 46ch;
	font-size: clamp(1rem, 1.15vw, 1.16rem);
	font-weight: 300;
	line-height: 1.65;
	color: var(--ink-dim);
}

/* El desglose: la misma enumeración de siempre, ahora legible pieza a pieza
   en vez de en una frase con comas. */
.ep-sel__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: clamp(22px, 2.4vw, 32px) 0 0;
	padding: 0;
	list-style: none;
}

.ep-sel__lista li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid rgba(var(--beige-rgb), 0.26);
	border-radius: 999px;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.74rem;
	letter-spacing: 0.06em;
	color: rgba(var(--ink-rgb), 0.8);
	background: rgba(var(--alto-rgb), 0.025);
}

.ep-sel__lista li::before {
	content: "";
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--beige);
	flex: none;
}

/* ── Imagen ─────────────────────────────────────────────────────────── */
.ep-sel__fig { margin: 0; min-width: 0; }

.ep-sel__marco {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(var(--beige-rgb), 0.28);
	background: #0A0A0B;
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
}

/* 13/9 es la proporción EXACTA de los cinco archivos (1300×900): con
   cualquier otra, object-fit:cover recortaría los lados, y una de las
   imágenes es una interfaz donde ese recorte se come la columna lateral. */
.ep-sel.es-js .ep-sel__marco { aspect-ratio: 13 / 9; }

.ep-sel__img {
	display: block;
	width: 100%;
	height: auto;
}

/* Las imágenes son muy claras y la página es negra: sin este ajuste el
   recuadro entra como un foco. Bajarlas un punto las integra sin apagarlas. */
.ep-sel.es-js .ep-sel__img {
	position: absolute;
	inset: 0;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.06);
	filter: brightness(0.92) contrast(1.02) saturate(0.95);
	transition: opacity 760ms ease, transform 1500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ep-sel.es-js .ep-sel__img.es-activo { opacity: 1; transform: scale(1); }

/* Retícula fina y viñeta: el mismo lenguaje de instrumento de la mira, y de
   paso el borde deja de cortar en seco contra el negro de la página. */
.ep-sel__rejilla {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(120% 100% at 50% 50%, rgba(10, 10, 11, 0) 42%, rgba(10, 10, 11, 0.5) 100%),
		repeating-linear-gradient(90deg, rgba(var(--beige-rgb), 0.10) 0 1px, transparent 1px 25%),
		repeating-linear-gradient(0deg, rgba(var(--beige-rgb), 0.10) 0 1px, transparent 1px 33.34%);
}

.ep-sel__esquinas {
	position: absolute;
	inset: 12px;
	pointer-events: none;
	background:
		linear-gradient(var(--beige), var(--beige)) 0 0 / 18px 1px,
		linear-gradient(var(--beige), var(--beige)) 0 0 / 1px 18px,
		linear-gradient(var(--beige), var(--beige)) 100% 0 / 18px 1px,
		linear-gradient(var(--beige), var(--beige)) 100% 0 / 1px 18px,
		linear-gradient(var(--beige), var(--beige)) 0 100% / 18px 1px,
		linear-gradient(var(--beige), var(--beige)) 0 100% / 1px 18px,
		linear-gradient(var(--beige), var(--beige)) 100% 100% / 18px 1px,
		linear-gradient(var(--beige), var(--beige)) 100% 100% / 1px 18px;
	background-repeat: no-repeat;
	opacity: 0.5;
	/* Las escuadras van sobre imágenes muy claras: sin esta sombra el beige
	   sobre blanco no se distingue. */
	filter: drop-shadow(0 0 2px rgba(10, 10, 11, 0.55));
}

.ep-sel__pie {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-top: 14px;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.6rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(var(--ink-rgb), 0.34);
}

.ep-sel__paso { color: var(--beige); font-variant-numeric: tabular-nums; }
.ep-sel__paso b { font-weight: 400; }

/* ══════════ Hueco de imagen pendiente ══════════ */
.ep-hueco {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	border: 1px dashed rgba(var(--beige-rgb), 0.45);
	border-radius: 3px;
	background:
		repeating-linear-gradient(135deg, rgba(var(--beige-rgb), 0.045) 0 12px, transparent 12px 24px),
		rgba(var(--alto-rgb), 0.02);
	color: rgba(var(--beige-rgb), 0.75);
	text-align: center;
	padding: 20px;
}

.ep-hueco span {
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.72rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.ep-hueco small {
	display: block;
	margin-top: 8px;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	text-transform: none;
	color: rgba(var(--ink-rgb), 0.4);
}

/* ══════════ Lo que te llevas — carrusel 3D infinito ══════════ */
.ep-llevas {
	/* Sin el negro del final: la radiografía tiene que verse detrás. */
	background: radial-gradient(1100px 520px at 50% 0%, rgba(var(--beige-rgb), 0.07), transparent 70%);
}

.ep-pista {
	position: relative;
	overflow: hidden;
	padding: clamp(20px, 3vw, 40px) 0;
	perspective: 1200px;
	/* Difumina los extremos para que las tarjetas no se corten en seco. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.ep-pista__cinta {
	display: flex;
	gap: clamp(16px, 1.8vw, 26px);
	width: max-content;
	animation: ep-desliza var(--ep-dur, 46s) linear infinite;
}

.ep-pista:hover .ep-pista__cinta { animation-play-state: paused; }

/* La cinta lleva la lista DUPLICADA: al desplazar exactamente la mitad, el
   segundo juego queda donde estaba el primero y el salto no se ve. */
@keyframes ep-desliza {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

.ep-tarjeta {
	flex: 0 0 auto;
	width: clamp(250px, 25vw, 350px);
	min-height: clamp(190px, 17vw, 240px);
	display: flex;
	flex-direction: column;
	padding: clamp(22px, 2vw, 32px);
	border-radius: 3px;
	background: linear-gradient(160deg, rgba(var(--alto-rgb), 0.05), rgba(var(--alto-rgb), 0.014));
	border: 1px solid var(--beige-faint);
	transform-style: preserve-3d;
	transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), border-color 500ms ease;
}

.ep-tarjeta:hover {
	transform: rotateX(6deg) rotateY(-7deg) translateZ(26px);
	border-color: var(--beige-soft);
}

.ep-tarjeta__n {
	font-family: var(--font-display, Butler, serif);
	font-size: clamp(1.5rem, 2vw, 2.1rem);
	line-height: 1;
	color: var(--beige);
	opacity: 0.45;
	margin-bottom: clamp(14px, 1.6vw, 22px);
}

.ep-tarjeta__t {
	font-family: var(--font-display, Butler, serif);
	font-size: clamp(1.1rem, 1.35vw, 1.4rem);
	font-weight: 400;
	line-height: 1.22;
	margin: 0;
	color: var(--ink);
}

.ep-entregable {
	font-family: var(--font-display, Butler, serif);
	font-size: clamp(1.6rem, 3vw, 2.8rem);
	font-weight: 400;
	line-height: 1.2;
	margin: 0 0 0.6em;
	color: var(--beige);
}

.ep-cierre {
	font-family: var(--font-display, Butler, serif);
	font-size: clamp(1.2rem, 2vw, 1.9rem);
	font-weight: 400;
	line-height: 1.35;
	color: var(--ink);
	margin: clamp(28px, 3.4vw, 52px) 0 0;
	max-width: 30ch;
}

/* ══════════ Por qué empieza aquí — dos huecos ══════════ */
.ep-par {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(18px, 2.4vw, 40px);
	margin-top: clamp(30px, 4vw, 60px);
}

.ep-par__bloque h3 {
	font-family: var(--font-display, Butler, serif);
	font-size: clamp(1.3rem, 2vw, 2rem);
	font-weight: 400;
	margin: 0 0 clamp(14px, 1.6vw, 22px);
	color: var(--ink);
}

/* Las dos láminas del díptico, cuando ya existen: mismo marco y mismas
   escuadras que el resto de la página, para que no se lean como dos
   fotografías pegadas sino como dos piezas del mismo instrumento. */
.ep-lam {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 1px solid rgba(var(--beige-rgb), 0.28);
	border-radius: 3px;
	background: #0A0A0B;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

.ep-lam img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ep-lam__marcas {
	position: absolute;
	inset: 10px;
	pointer-events: none;
	background:
		linear-gradient(var(--beige), var(--beige)) 0 0 / 16px 1px,
		linear-gradient(var(--beige), var(--beige)) 0 0 / 1px 16px,
		linear-gradient(var(--beige), var(--beige)) 100% 0 / 16px 1px,
		linear-gradient(var(--beige), var(--beige)) 100% 0 / 1px 16px,
		linear-gradient(var(--beige), var(--beige)) 0 100% / 16px 1px,
		linear-gradient(var(--beige), var(--beige)) 0 100% / 1px 16px,
		linear-gradient(var(--beige), var(--beige)) 100% 100% / 16px 1px,
		linear-gradient(var(--beige), var(--beige)) 100% 100% / 1px 16px;
	background-repeat: no-repeat;
	opacity: 0.42;
}

/* ══════════ CTA final ══════════ */
.ep-final {
	text-align: center;
	/* Sin el negro del final: la radiografía tiene que verse detrás. */
	background: radial-gradient(900px 420px at 50% 100%, rgba(var(--beige-rgb), 0.09), transparent 70%);
}

.ep-final__nota {
	font-size: 0.9rem;
	font-weight: 300;
	color: rgba(var(--ink-rgb), 0.45);
	margin: clamp(18px, 2vw, 26px) 0 0;
}

/* ══════════ Mira de precisión ══════════
   Acompaña al cursor por toda la página. No se oculta el cursor del sistema a
   propósito: si se quita, se pierde la señal de qué se puede pulsar y dónde
   está exactamente el punto de clic. La mira va DETRÁS del cursor, como
   instrumento, no en su lugar. */
.ep-mira {
	position: fixed;
	top: 0;
	left: 0;
	/* La mitad de lo que medía. El SVG conserva su viewBox de 220, así que
	   todo el instrumento se reduce en proporción sin retocar el dibujo. */
	width: 110px;
	height: 110px;
	margin: -55px 0 0 -55px;
	pointer-events: none;
	z-index: 70;
	opacity: 0;
	transition: opacity 350ms ease;
	will-change: transform;
}

.ep-mira.is-on { opacity: 1; }
.ep-mira svg { display: block; width: 100%; height: 100%; }

.ep-mira__anillo { animation: ep-gira 18s linear infinite; transform-origin: 110px 110px; }

@keyframes ep-gira {
	to { transform: rotate(360deg); }
}

/* ══════════ Panel flotante: lo que ve la mira ══════════ */
/* Va anclado a la esquina inferior derecha, JUSTO encima del botón flotante
   de WhatsApp: ese botón mide clamp(46px,4vw,54px) y se separa var(--s-md)
   del borde, así que el visor arranca por encima de ambos.
   Las medidas están a la mitad de lo que estaban. */
.ep-visor {
	position: fixed;
	right: var(--gutter, clamp(20px, 4.5vw, 110px));
	bottom: calc(var(--s-md, 24px) + clamp(46px, 4vw, 54px) + 14px);
	width: clamp(148px, 12vw, 168px);
	z-index: 65;
	padding: 10px 11px;
	border: 1px solid rgba(var(--beige-rgb), 0.42);
	border-radius: 3px;
	background: rgba(10, 10, 11, 0.82);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
	pointer-events: none;
	opacity: 0;
	transition: opacity 450ms ease;
	font-family: var(--font-sans, system-ui, sans-serif);
}

.ep-visor.is-on { opacity: 1; }

.ep-visor__cab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-bottom: 7px;
	margin-bottom: 8px;
	border-bottom: 1px solid rgba(var(--beige-rgb), 0.22);
	font-size: 0.5rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--beige);
}

.ep-visor__punto {
	width: 4px;
	height: 4px;
	flex: none;
	border-radius: 50%;
	background: var(--beige);
	animation: ep-late 1.6s ease-in-out infinite;
}

@keyframes ep-late {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.25; }
}

.ep-visor__fila {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 6px;
	align-items: baseline;
	margin-bottom: 6px;
}

.ep-visor__et {
	font-size: 0.46rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(var(--ink-rgb), 0.38);
}

.ep-visor__val {
	font-size: 0.66rem;
	line-height: 1.35;
	color: var(--ink);
	min-width: 0;
	overflow-wrap: anywhere;
}

.ep-visor__val--num {
	font-variant-numeric: tabular-nums;
	color: var(--beige);
	letter-spacing: 0.06em;
}

.ep-visor__barra {
	margin-top: 8px;
	height: 2px;
	background: rgba(var(--beige-rgb), 0.18);
	overflow: hidden;
}

/* La barra crece con scaleX, no con width: se actualiza en cada fotograma de
   scroll, y animar el ancho obligaría a recalcular el layout en cada uno.
   --ep-prog es un factor de 0 a 1, no un porcentaje. */
.ep-visor__barra i {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--beige);
	transform: scaleX(var(--ep-prog, 0));
	transform-origin: left center;
	transition: transform 220ms linear;
}

/* Ni mira ni visor donde no hay cursor que seguir. */
@media (hover: none), (pointer: coarse) {
	.ep-mira, .ep-visor { display: none; }
}

@media (max-width: 1180px) {
	.ep-visor { display: none; }
}

/* ══════════ Aparición ══════════ */
.ep--anim .ep-in {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ep--anim .ep-in.is-in { opacity: 1; transform: none; }


/* La clase que WordPress da por sentada para lo que sólo debe leer un
   lector de pantalla. Esta página no carga main.css con ella, y sin la regla
   la leyenda de cada paso del formulario se veía en pantalla. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ══════════ Agenda una llamada ══════════

   El formulario ya no se estiliza aquí: se mudó entero a
   assets/css/agenda.css, con el prefijo .ag-. El motivo es que tenía que poder
   ponerse en varias páginas, y con clases .ep- y variables de esta hoja no
   había forma de sacarlo de esta página sin arrastrarla completa.

   Nada se perdió por el camino —la consola, los hitos, las opciones, la
   trampa para robots y la pantalla de confirmación siguen siendo las mismas—,
   y allí se le añadieron la barra de avance, la entrada direccional y el
   repaso final.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════ Responsive ══════════ */
@media (max-width: 1080px) {
	/* El texto va encima de la imagen, no al lado. */
	.ep-sel__panel { grid-template-columns: 1fr; }
	.ep-par { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	/* Cinco pestañas no caben en una fila: pasan a carril con desplazamiento
	   horizontal, que es preferible a partirlas en dos filas desiguales. */
	.ep-sel__fila {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.ep-sel__fila::-webkit-scrollbar { display: none; }
	.ep-sel__btn {
		flex: 0 0 auto;
		min-width: 45vw;
		scroll-snap-align: start;
	}
}

@media (max-width: 620px) {
	/* En la barra de la consola sólo cabe la instrucción. */
	.ep-sel__marca,
	.ep-sel__estado { display: none; }
	.ep-sel__ayuda { text-align: left; }
	.ep-sel__btn { min-width: 62vw; }
	.ep-sel__lista li { font-size: 0.7rem; padding: 7px 12px; }
	.ep-hero { min-height: clamp(440px, 74vh, 640px); }
}

/* En táctil no hay cursor que seguir: la radiografía del fondo se ve entera y
   sin franja. */
@media (hover: none), (pointer: coarse) {
	.ep-rx__base { opacity: 0.16; }
	.ep-rx__lit { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ep--anim .ep-in { opacity: 1; transform: none; transition: none; }
	.ep-pista__cinta { animation: none; }
	.ep-tarjeta:hover { transform: none; }
	.ep-rx__lit { transition: none; }
	.ep-hero__foto { animation: none; }
	.ep-hero__content { animation: none; }
	.ep-hero__isotipo { animation: none; opacity: 0.92; transform: none; }
	.ep-sel.es-js .ep-sel__caso.es-activo { animation: none; }
	.ep-sel.es-js .ep-sel__img { transition: opacity 200ms ease; transform: none; }
	.ep-sel.es-auto .ep-sel__btn.es-activo .ep-sel__hilo i { animation: none; transform: scaleX(1); }
	.ep-mira__anillo, .ep-visor__punto { animation: none; }
}