/**
 * home.css — Estilos de la home reescrita como markup propio.
 *
 * OJO: no confundir con capturado.css, que corrige el markup de Elementor que aún sirven
 * los mirrors. Este fichero es para markup nuestro y usa solo primitivas de ds.css.
 */

.ev-home { display: block; }

/* Utilidad accesible: texto solo para lectores de pantalla. */
.ev-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ===================================================================== hero */

.ev-hero-home {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(520px, 78vh, 780px);
	/**
	 * Encuadre, no velo. Medido con tools/probe-hero-img.mjs:
	 *   foto 1920x1080 (1.778) · caja 1900x702 (2.707) · con `cover` desborde H = 0
	 *
	 * Al ser la caja mucho más ancha que la foto, `cover` escala por ancho y ya se ve el
	 * ancho completo: reposicionar no movía nada. Para ganar fondo a la izquierda hay que
	 * AMPLIAR y anclar a la izquierda, que empuja al sujeto hacia la derecha.
	 */
	background-image: var(--hero-img);
	background-repeat: no-repeat;
	/**
	 * `cover` es la BASE; la ampliación al 124% es la excepción de escritorio.
	 *
	 * Estaba al revés y por eso el hero móvil estaba roto: con `124% auto` en un ancho de
	 * 390px, la foto —16:9— ocupaba 484x272 dentro de una sección de 658px de alto, así
	 * que se veía como una franja horizontal a media altura. El titular caía por encima,
	 * en blanco sobre blanco, y el botón quedaba cortado por debajo de la franja.
	 */
	background-size: cover;
	background-position: 64% center;
	color: var(--ev-blanco);
	overflow: hidden;
}

/**
 * Velo inferior, solo donde hace falta.
 *
 * En escritorio la legibilidad se resuelve por encuadre (ver abajo) y este velo es
 * transparente en la zona del retrato. Por debajo de 1025px el texto ocupa todo el ancho
 * y cae necesariamente sobre la cara: ahí el degradado es lo único que separa el blanco
 * del texto de la piel iluminada. Se ancla abajo para no ensuciar el rostro.
 */
.ev-hero-home::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(17, 17, 17, .80) 0%,
		rgba(17, 17, 17, .55) 34%,
		rgba(17, 17, 17, 0) 70%
	);
	pointer-events: none;
}

/**
 * ESCRITORIO: la foto se amplía y se ancla a la izquierda.
 *
 * Medido con tools/probe-hero-img.mjs: foto 1920x1080 (1.778) contra caja 1900x702
 * (2.707). Con `cover` el desborde horizontal es 0, así que reposicionar no movía nada;
 * ampliar al 124% y anclar a la izquierda empuja el retrato a la derecha y deja bajo el
 * texto el fondo desenfocado. A partir de ahí el velo casi no trabaja, y es la razón de
 * que la regla viva aquí y no en la base: por debajo de 1025px este encuadre no cabe.
 */
@media (min-width: 1025px) {
	.ev-hero-home {
		background-size: 124% auto;
		background-position: left center;
	}

	.ev-hero-home::before {
		background: linear-gradient(
			to right,
			rgba(17, 17, 17, .42) 0%,
			rgba(17, 17, 17, .18) 38%,
			rgba(17, 17, 17, 0) 62%
		);
	}
}

.ev-hero-home__inner {
	position: relative;
	z-index: 1;
	width: 100%;                 /* como hijo flex encogía al contenido y se centraba:
	                                por eso el texto no cuadraba con el header */
	max-width: var(--ev-ancho);
	padding-block: var(--ev-sec-y);
}

.ev-hero-home .ev-antetitulo { color: rgba(255, 255, 255, .85); }

/* Scopeado bajo .ev-scope: `.ev-scope h1` de ds.css tiene especificidad 11 y ganaba a
   `.ev-hero-home__titulo` (10), así que el titular salía en tinta oscura sobre la foto.
   Mismo fallo que ya apareció con los botones. */
/**
 * UN solo tamaño de titular en el hero.
 *
 * Antes había cuatro escalones apilados —antetítulo, marca, subtítulo y lead— y el bloque
 * se leía como un amasijo. Ahora son tres niveles y cada uno con un papel claro:
 * marca (antetítulo) · propuesta de valor (H1) · explicación (lead).
 *
 * Scopeado bajo .ev-scope porque `.ev-scope h1` de ds.css tiene más especificidad y si no
 * el titular sale en tinta oscura sobre la foto.
 */
.ev-scope .ev-hero-home__titulo {
	color: var(--ev-blanco);
	font-size: clamp(2.4rem, 4.2vw, 3.6rem);
	font-weight: 400;
	line-height: 1.14;
	margin-bottom: .5em;
	max-width: 17ch;
}

.ev-hero-home .ev-lead {
	color: var(--ev-blanco);
	max-width: 46ch;
}

/* Botón secundario en blanco, coherente con el texto del hero. */
.ev-scope .ev-hero-home .ev-btn--linea { color: var(--ev-blanco); border-color: rgba(255, 255, 255, .55); }
.ev-scope .ev-hero-home .ev-btn--linea::before { background: var(--ev-blanco); }
.ev-scope .ev-hero-home .ev-btn--linea:hover { color: var(--ev-tinta); border-color: var(--ev-blanco); }

/* ====================================================================== ADN */

.ev-adn__titulo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
}

/* El motivo de puntos vive DETRÁS del titular, centrado y contenido: en el original
   invadía la columna de texto de al lado. */
.ev-adn__titulo::before {
	content: "";
	position: absolute;
	inset: -12% -6%;
	background: var(--motivo) center / contain no-repeat;
	opacity: .5;
	pointer-events: none;
}

.ev-adn__titulo h2 {
	position: relative;
	margin: 0;
	text-align: center;
	font-size: clamp(2rem, 3.6vw, 2.9rem);
	line-height: 1.24;
}

.ev-adn__linea { display: block; }

/* El original alterna redonda / cursiva / negrita en las tres líneas: se conserva,
   porque es lo que le da carácter al bloque. */
.ev-adn__linea--1 { font-weight: 700; }
.ev-adn__linea--2 { font-style: italic; font-weight: 400; }
.ev-adn__linea--3 { font-weight: 700; }

.ev-valores { margin: 2rem 0 0; display: grid; gap: 1rem; }

.ev-valor dt {
	font-family: var(--ev-sans);
	font-weight: 600;
	color: var(--ev-tinta);
	display: flex;
	align-items: baseline;
	gap: .6rem;
}

.ev-valor__letra {
	flex: none;
	width: 1.6rem;
	font-family: var(--ev-serif);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--ev-dorado);
	line-height: 1;
}

.ev-valor dd {
	margin: .15rem 0 0 2.2rem;
	color: var(--ev-texto-suave);
	font-size: var(--ev-pequeno);
	line-height: 1.6;
}

@media (min-width: 768px) {
	.ev-valores { grid-template-columns: repeat(2, 1fr); gap: 1.35rem 2.5rem; }
}

/* ====================================================== tarjetas tratamiento */

.ev-cardt {
	display: flex;
	flex-direction: column;
	background: var(--ev-blanco);
	text-decoration: none;
	overflow: hidden;
	transition: transform var(--ev-trans), box-shadow var(--ev-trans);
}

.ev-cardt:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(17, 17, 17, .10); }

.ev-cardt__img {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.ev-cardt__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2, .6, .2, 1);
}

.ev-cardt:hover .ev-cardt__img img { transform: scale(1.045); }

.ev-cardt__cuerpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: clamp(1.5rem, 2.4vw, 2rem);
}

.ev-cardt__titulo {
	font-family: var(--ev-serif);
	font-size: var(--ev-h3);
	color: var(--ev-tinta);
	line-height: 1.2;
	margin-bottom: .6rem;
}

.ev-cardt__texto {
	color: var(--ev-texto-suave);
	font-size: var(--ev-pequeno);
	line-height: 1.7;
}

.ev-cardt .ev-mas { margin-top: auto; padding-top: 1.5rem; }

/* =================================================================== figuras */

.ev-figura { margin: 0; overflow: hidden; }

.ev-figura img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

@media (min-width: 1025px) {
	.ev-figura img { aspect-ratio: 3 / 3.4; }
}

/* ================================================================= comunidad */

.ev-comunidad {
	position: relative;
	padding-block: clamp(4rem, 8vw, 7rem);
	background: var(--com-img) center / cover no-repeat;
	color: var(--ev-blanco);
	text-align: center;
	overflow: hidden;
}

.ev-comunidad::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(18, 16, 14, .58);
}

.ev-comunidad > * { position: relative; z-index: 1; }

.ev-comunidad h2 { color: var(--ev-blanco); }
.ev-comunidad p { color: rgba(255, 255, 255, .86); }

.ev-redes {
	list-style: none;
	margin: 2.25rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .9rem;
}

.ev-redes a {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 50%;
	color: var(--ev-blanco);
	text-decoration: none;
	font-size: 1rem;
	transition: background-color var(--ev-trans), border-color var(--ev-trans), color var(--ev-trans);
}

.ev-redes a:hover {
	background: var(--ev-dorado);
	border-color: var(--ev-dorado);
	color: var(--ev-tinta);
}

/* ===================================================================== móvil */

@media (max-width: 1024px) {
	.ev-adn__titulo { min-height: 240px; margin-bottom: 1.5rem; }
	.ev-adn__titulo::before { opacity: .35; }

	.ev-scope .ev-hero-home__titulo { max-width: none; }

	/* El encuadre al 22% dejaba el rostro fuera de cuadro en vertical: se centra algo a
	   la derecha y la legibilidad la resuelve el velo inferior. */
	.ev-hero-home { background-position: 60% center; }
}

/**
 * MÓVIL: el hero se compone de abajo arriba.
 *
 * El texto se ancla al pie de la imagen, sobre la parte densa del velo, en vez de
 * flotar en el centro sobre el rostro. Es lo que permite mantener el titular en blanco
 * a tamaño grande sin sombra de texto y sin tapar la foto entera.
 */
@media (max-width: 767px) {
	.ev-hero-home {
		align-items: flex-end;
		/* Encuadre elegido comparando cuatro opciones a 390px: es el único que deja los
		   dos ojos y la crema en cuadro. Con 62% top solo cabía un ojo a pantalla llena. */
		min-height: min(78vh, 600px);
		background-position: 52% 42%;
	}

	.ev-hero-home__inner { padding-block: 3.5rem 2.5rem; }

	.ev-scope .ev-hero-home__titulo {
		font-size: clamp(2rem, 8.6vw, 2.6rem);
		line-height: 1.1;
		margin-bottom: .45em;
	}

	.ev-hero-home .ev-lead {
		font-size: 1rem;
		line-height: 1.55;
		max-width: 34ch;
		margin-bottom: 1.5rem;
	}

	/**
	 * Botones a ancho completo y apilados.
	 *
	 * En línea no caben: `.ev-btn` prohíbe partir su etiqueta en dos (regla del sistema
	 * en ds.css), así que "RESERVA TU CITA" se salía del hero por la derecha.
	 */
	.ev-hero-home .ev-botones {
		display: grid;
		gap: .6rem;
		width: 100%;
	}

	.ev-hero-home .ev-botones .ev-btn { width: 100%; }
}

/* ================================================================ skin club */

/**
 * Teaser de membresías en portada.
 *
 * No reutiliza `.ev-plan` de landings.css a propósito: aquel componente está pensado
 * para caja clara sobre fondo claro, con foto y listas largas. Aquí las tarjetas van
 * sobre `--ev-seccion--oscuro`, sin foto y con una sola línea de texto, así que heredar
 * habría obligado a sobrescribir fondo, borde, color y padding —más CSS que escribirlo—
 * y a que cualquier retoque de la landing se colase en la home sin querer.
 */

.ev-club__planes {
	list-style: none;
	margin: var(--ev-bloque) 0 0;
	padding: 0;
	display: grid;
	gap: var(--ev-gap);
}

@media (min-width: 768px) {
	.ev-club__planes { grid-template-columns: repeat(3, 1fr); }
}

.ev-club__plan {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: .5rem;
	padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2.4vw, 2rem);
	/* Sobre el gris oscuro de sección, un blanco al 6% separa la caja sin encender otro
	   color: el acento de esta sección es el dorado, y compite si hay dos. */
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	transition: border-color var(--ev-trans), background var(--ev-trans);
}

.ev-club__plan--destacado {
	border-color: var(--ev-dorado);
	background: rgba(200, 169, 122, .10);
}

.ev-club__cinta {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--ev-dorado);
	color: var(--ev-tinta);
	font-size: var(--ev-micro);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: .35rem .9rem;
	white-space: nowrap;
}

.ev-club__nombre {
	font-family: var(--ev-serif);
	font-size: var(--ev-h3);
	line-height: var(--ev-lh-titular);
	color: var(--ev-blanco);
}

.ev-club__precio {
	display: flex;
	align-items: baseline;
	gap: .25rem;
}

.ev-club__precio strong {
	font-family: var(--ev-serif);
	font-size: clamp(2rem, 3.5vw, 2.75rem);
	font-weight: 400;
	line-height: 1;
	color: var(--ev-dorado);
}

.ev-club__precio span {
	font-size: var(--ev-pequeno);
	color: rgba(255, 255, 255, .62);
}

.ev-club__texto {
	font-size: var(--ev-pequeno);
	line-height: 1.6;
	max-width: 30ch;
}

/**
 * El ancestro es obligatorio aquí: `.ev-club .ev-club__nota` pesa 20.
 *
 * Con la clase sola pesaba 10 y perdía contra `.ev-scope p` de ds.css, que pesa 11 y
 * declara `margin: 0 0 1.15em`. Resultado: ni el `auto` ni el margen superior llegaban a
 * aplicarse nunca. La caja se quedaba con sus 68ch pegada a la izquierda —de ahí que la
 * nota no se viera centrada aunque tuviera `text-align: center`— y sin separación de las
 * tarjetas de arriba.
 *
 * Es la misma trampa que ya costó tres veces con `button:hover` del CSS capturado: una
 * clase suelta no gana a una regla con elemento. Ver CLAUDE.md.
 */
.ev-club .ev-club__nota {
	/**
	 * Sin límite de ancho: la frase entra en UNA línea.
	 *
	 * Con `max-width` (62ch, o los 68ch que hereda de `.ev-scope p`) partía en dos y la
	 * segunda línea se quedaba con una palabra suelta. Es una aclaración de una frase, no un
	 * párrafo: partida se lee como si fueran dos ideas. En móvil sigue partiendo sola,
	 * porque ahí no cabe de otra manera.
	 */
	max-width: none;
	margin-inline: auto;
	/* Separación de las tarjetas: la nota es una aclaración del bloque, no un pie de las
	   cajas. Pegada a ellas se leía como parte de la última tarjeta. */
	margin-top: clamp(1.75rem, 3.2vw, 2.75rem);
	margin-bottom: 0;
	text-align: center;
	font-size: var(--ev-pequeno);
	font-style: italic;
	color: rgba(255, 255, 255, .62);
}

/* `.ev-titulo-centro p` fija el gris de cuerpo claro; sobre fondo oscuro es ilegible. */
.ev-club .ev-titulo-centro p { color: rgba(255, 255, 255, .82); }

/**
 * La cinta del plan destacado se sale por arriba de la caja.
 *
 * En móvil las tres tarjetas van apiladas, así que esa mitad que sobresale cae sobre la
 * tarjeta anterior. Con el hueco de la rejilla no llega a solaparse el texto, pero sí
 * queda pegada: el margen extra le devuelve el aire.
 */
@media (max-width: 767px) {
	.ev-club__plan--destacado { margin-top: .75rem; }
}