/**
 * landings.css — Componentes de las landings.
 *
 * Solo componentes: los tokens, el contenedor, el ritmo de sección, la escala tipográfica
 * y los botones viven en ds.css. Aquí no se redefine ningún valor de marca, para que
 * cambiar el sistema cambie la web entera desde un único sitio.
 */

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

.ev-hero .ev-antetitulo { margin-bottom: 1.25rem; }

.ev-hero h1 { max-width: 18ch; }

/* El hero necesita más aire por arriba: es lo primero bajo el header. */
.ev-hero { padding-block: calc(var(--ev-sec-y) * 1.15) var(--ev-sec-y); }

/**
 * Cabecera sin hero (`"heroTipo": "ninguno"`).
 *
 * Para páginas donde una banda de portada sobra —contacto es la primera— pero el H1 no
 * se puede quitar: es el titular de la página para buscadores y para lectores de
 * pantalla. Se queda el título y el lead, sin fondo propio, sin botones y con la mitad
 * de aire por abajo, para que se lea como el encabezado del contenido y no como un hero
 * pequeño.
 */
.ev-cabecera { padding-block: calc(var(--ev-sec-y) * .9) calc(var(--ev-sec-y) * .45); }
.ev-cabecera h1 { margin-bottom: .35em; }

/* ==================================================== lista de indicaciones */

/**
 * Antes: `<li>` con una rayita dorada a la izquierda y dos líneas de texto. En una
 * rejilla de dos columnas se leía como un pliego de condiciones, no como la parte de la
 * página que explica para quién es el tratamiento.
 *
 * Ahora cada punto es una tarjeta con su icono de línea. El icono no decora: es el ancla
 * que permite escanear el bloque sin leerlo entero, que es exactamente lo que hace
 * alguien decidiendo si un tratamiento es para su caso.
 */
.ev-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	align-items: stretch;
	gap: clamp(1rem, 2vw, 1.5rem);
}

/**
 * Tarjeta en VERTICAL: icono arriba, luego título y texto.
 *
 * En horizontal el icono se comía 62px del ancho y, con cuatro columnas en el contenedor
 * de 1720, al título le quedaban unos 290px: "Óvalo facial poco definido" partía en dos
 * líneas y el bloque volvía a verse apretado. En vertical el texto dispone de la tarjeta
 * entera y las cuatro quedan a la misma altura.
 */
.ev-lista__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .9rem;
	height: 100%;
	padding: clamp(1.35rem, 2.2vw, 1.85rem);
	background: var(--ev-blanco);
	border: 1px solid var(--ev-linea);
	transition: border-color var(--ev-trans), transform var(--ev-trans), box-shadow var(--ev-trans);
}

/* Sobre fondo blanco la tarjeta desaparecería: mismo recurso que .ev-tarjeta. */
.ev-seccion--blanco .ev-lista__item {
	background: var(--ev-crema-suave);
	border-color: transparent;
}

.ev-lista__item:hover {
	border-color: var(--ev-dorado);
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(17, 17, 17, .06);
}

/**
 * El icono va en un círculo dorado tenue.
 *
 * Suelto sobre el fondo se perdía entre el texto; el círculo le da peso sin subir el
 * grosor del trazo, que es lo que mantiene el conjunto fino.
 */
.ev-lista__icono {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(200, 169, 122, .16);
	/* El icono en marrón, no en dorado: el dorado #C8A97A sobre su propio círculo tenue
	   se quedaba en un trazo casi invisible a 1.1 de grosor. El marrón mantiene la gama
	   cálida y sí se lee. */
	color: var(--ev-marron);
	transition: background-color var(--ev-trans), color var(--ev-trans);
}

.ev-lista__item:hover .ev-lista__icono {
	background: var(--ev-dorado);
	color: var(--ev-blanco);
}

/* El SVG hereda color y trazo: una sola definición sirve para todos los fondos. */
.ev-lista__icono .ev-icono { display: block; }

.ev-lista__texto { display: block; }

.ev-lista__texto strong {
	display: block;
	font-weight: 600;
	color: var(--ev-tinta);
	margin-bottom: .3rem;
}

.ev-lista__texto > span {
	display: block;
	color: var(--ev-texto-suave);
	font-size: var(--ev-pequeno);
	line-height: 1.6;
}

/* En la sección oscura el círculo tenue no se ve: se invierte el contraste. */
.ev-seccion--oscuro .ev-lista__item {
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .12);
}

.ev-seccion--oscuro .ev-lista__icono { background: rgba(200, 169, 122, .18); }

@media (max-width: 480px) {
	.ev-lista__icono { width: 40px; height: 40px; }
	.ev-lista__icono .ev-icono { width: 22px; height: 22px; }
}

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

.ev-tarjeta {
	background: var(--ev-blanco);
	border: 1px solid var(--ev-linea);
	padding: clamp(1.5rem, 2.5vw, 2.25rem);
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Sobre fondo blanco la tarjeta necesita otro tono para no desaparecer. */
.ev-seccion--blanco .ev-tarjeta { background: var(--ev-crema-suave); border-color: transparent; }

.ev-tarjeta h3 { margin-bottom: .5rem; }
.ev-tarjeta p  { color: var(--ev-texto-suave); margin-bottom: 0; }

.ev-tarjeta--enlace {
	text-decoration: none;
	transition: border-color var(--ev-trans), transform var(--ev-trans), box-shadow var(--ev-trans);
}

.ev-tarjeta--enlace:hover {
	border-color: var(--ev-dorado);
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(17, 17, 17, .07);
}

.ev-mas {
	margin-top: auto;
	padding-top: 1.5rem;
	font-size: var(--ev-micro);
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ev-marron);
}

/**
 * Nota al pie de un bloque de cajas.
 *
 * Hace falta el ancestro `.ev-scope`. Escrita como `.ev-nota` a secas pesa 10 y perdía
 * contra `.ev-scope p` (11), que le imponía `max-width: 68ch` y `margin: 0 0 1.15em`:
 * la caja quedaba pegada a la rejilla de tarjetas y anclada a la izquierda, así que el
 * `text-align: center` centraba el texto DENTRO de una caja descentrada — que es
 * exactamente por qué se veía torcida bajo los planes del Club.
 *
 * Es la misma trampa que ya documentamos con los botones del CSS capturado: la clase
 * sola no basta cuando la hoja base ya ha estilado el elemento.
 */
.ev-scope .ev-nota {
	margin: var(--ev-bloque) auto 0;
	max-width: 68ch;
	font-size: var(--ev-pequeno);
	color: var(--ev-texto-suave);
	font-style: italic;
	text-align: center;
}

/* ============================================================ planes / club */

.ev-planes { align-items: stretch; }

.ev-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ev-blanco);
	border: 1px solid var(--ev-linea);
	padding: clamp(1.75rem, 3vw, 2.5rem);
}

/**
 * Con foto, el padding se muda al interior: la imagen tiene que llegar al borde de la
 * caja, como en el original. La proporción 4/3 es la de los tres PNG del Skin Club
 * (retratos verticales-cuadrados); con 16/9 se les cortaba la cabeza.
 */
.ev-plan--con-foto { padding: 0; }
.ev-plan--con-foto .ev-plan__interior { padding: clamp(1.5rem, 2.4vw, 2rem); }

.ev-plan__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ev-crema-suave); }
.ev-plan__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ev-plan__interior { display: flex; flex-direction: column; flex: 1; }

/* Sobre blanco la tarjeta usa el crema de caja: el crema-suave de sección, a pantalla
   completa detrás de un bloque de tarjetas, se leía como una banda y no como tres cajas. */
.ev-seccion--blanco .ev-plan { background: var(--ev-crema-caja); border-color: transparent; }

.ev-plan--destacado {
	border-color: var(--ev-dorado);
	box-shadow: 0 18px 44px rgba(17, 17, 17, .08);
}

.ev-plan__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;
	z-index: 1;
}

/* Con foto, la cinta se posa SOBRE la imagen; a caballo del borde quedaba cortada. */
.ev-plan--con-foto .ev-plan__cinta { top: 1rem; transform: translateX(-50%); }

.ev-plan__cabecera {
	text-align: center;
	padding-bottom: 1.25rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--ev-linea);
}

.ev-plan__cabecera h3 { margin-bottom: .35rem; }

.ev-plan__precio {
	margin: 0;
	max-width: none;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: .25rem;
}

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

.ev-plan__precio span { font-size: var(--ev-pequeno); color: var(--ev-texto-suave); }

.ev-plan__grupo { margin-bottom: 1.35rem; }

.ev-plan__grupo-titulo {
	display: block;
	font-size: var(--ev-micro);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ev-marron);
	margin-bottom: .6rem;
}

.ev-plan__grupo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }

.ev-plan__grupo li {
	position: relative;
	padding-left: 1.1rem;
	font-size: var(--ev-pequeno);
	line-height: 1.55;
	color: var(--ev-texto-suave);
}

.ev-plan__grupo li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 5px;
	height: 5px;
	background: var(--ev-dorado);
	border-radius: 50%;
}

/**
 * El cierre va PEGADO a la lista, no empujado al fondo.
 *
 * Antes era `margin: auto 0 1.5rem`, que alineaba los tres cierres a la misma altura y
 * abría un boquete de media tarjeta en Essential —la más corta—. Alinear los botones ya
 * lo hace `.ev-plan .ev-btn { margin-top: auto }`, que es lo único que de verdad importa
 * que cuadre entre columnas.
 */
.ev-plan__cierre {
	margin: 1.5rem 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ev-linea);
	font-size: var(--ev-pequeno);
	font-style: italic;
	color: var(--ev-texto-suave);
	max-width: none;
}

.ev-plan .ev-btn { width: 100%; margin-top: auto; }

/* ====================================================================== FAQ */

.ev-faq { max-width: 820px; margin-inline: auto; }

.ev-faq-item {
	border-bottom: 1px solid var(--ev-linea);
	padding: 1.35rem 0;
}

.ev-faq-item summary {
	cursor: pointer;
	font-family: var(--ev-sans);
	font-weight: 500;
	font-size: 1.0625rem;
	color: var(--ev-tinta);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1.5rem;
}

.ev-faq-item summary::-webkit-details-marker { display: none; }

.ev-faq-item summary::after {
	content: "+";
	flex: none;
	color: var(--ev-dorado);
	font-size: 1.5rem;
	line-height: 1;
	transition: transform var(--ev-trans);
}

.ev-faq-item[open] summary::after { content: "−"; }

.ev-faq-item p {
	margin: 1rem 0 0;
	color: var(--ev-texto-suave);
	padding-right: 2.5rem;
}

/* ============================================================ relacionados */

/**
 * Relacionados: enlaces con cuerpo, no etiquetas.
 *
 * Eran chips de 12px pegados bajo un H2 de 40 y parecían migas de pan olvidadas: el
 * bloque entero se leía como un resto, no como una salida. Ahora ocupan el ancho de la
 * rejilla, con la flecha marcando que llevan a alguna parte.
 */
.ev-relacionados {
	list-style: none;
	margin: var(--ev-gap) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--ev-gap);
}

.ev-relacionados a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 4.5rem;
	padding: 1.1rem 1.4rem;
	border: 1px solid var(--ev-linea);
	background: var(--ev-blanco);
	font-family: var(--ev-serif);
	font-size: var(--ev-h3);
	line-height: var(--ev-lh-titular);
	text-decoration: none;
	transition: border-color var(--ev-trans), background-color var(--ev-trans), transform var(--ev-trans);
}

/* La flecha se dibuja con contenido generado: es decoración y no debe leerla nadie. */
.ev-relacionados a::after {
	content: "→";
	font-family: var(--ev-sans);
	font-size: var(--ev-body);
	color: var(--ev-dorado);
	transition: transform var(--ev-trans);
}

.ev-relacionados a:hover {
	border-color: var(--ev-dorado);
	transform: translateY(-2px);
}

.ev-relacionados a:hover::after { transform: translateX(4px); }

/* ============================================================ datos locales */

.ev-datos { display: grid; gap: 1.5rem; margin: 0; }

@media (min-width: 600px) {
	.ev-datos { grid-template-columns: repeat(2, 1fr); }
}

.ev-datos dt {
	font-size: var(--ev-micro);
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ev-marron);
	margin-bottom: .35rem;
}

.ev-datos dd {
	margin: 0;
	font-weight: 500;
	color: var(--ev-tinta);
}

.ev-datos a { text-decoration: none; border-bottom: 1px solid var(--ev-dorado); }

/* ======================================================== tarifa (depilación) */

/**
 * Banda de precios sobre foto, a sangre.
 *
 * Sigue el patrón de `.ev-cta-foto`: la foto entra por `--foto` desde el markup, porque
 * es un dato de la landing y no del tema. La diferencia es el velo oscuro: la foto
 * original es clara en el centro y el texto blanco encima se perdía; el degradado lo fija
 * sin depender de qué foto se ponga mañana.
 */
.ev-banda-precios {
	position: relative;
	background-image: var(--foto);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding-block: clamp(3.5rem, 7vw, 6rem);
	text-align: center;
	color: var(--ev-blanco);
	isolation: isolate;
}

.ev-banda-precios::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(17, 17, 17, .58), rgba(17, 17, 17, .42));
	z-index: -1;
}

.ev-banda-precios h2 { color: var(--ev-blanco); margin-bottom: .4rem; }
.ev-banda-precios .ev-antetitulo { color: var(--ev-dorado); }

/**
 * Hace falta el ancestro: `.ev-scope p` pesa 11 y una clase suelta, 10, así que su
 * `margin: 0 0 1.15em` ganaba y el subtítulo se pegaba al borde izquierdo en vez de
 * centrarse. Es la misma trampa de especificidad que los botones del CSS capturado.
 */
.ev-banda-precios .ev-banda-precios__sub {
	margin: 0 auto 2.25rem;
	max-width: 46ch;
	color: rgba(255, 255, 255, .82);
	font-size: var(--ev-pequeno);
}

.ev-banda-precios__rotulo {
	display: block;
	margin-bottom: 1.1rem;
	font-size: var(--ev-micro);
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78);
}

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

.ev-zona {
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 999px;
	padding: .55rem 1.15rem;
	font-size: var(--ev-pequeno);
	color: var(--ev-blanco);
	white-space: nowrap;
}

.ev-zona strong { font-weight: 600; color: var(--ev-dorado); }

/* ------------------------------------------------------------- packs cerrados */

.ev-tarifa {
	position: relative;
	background: var(--ev-blanco);
	border: 1px solid var(--ev-linea);
	padding: clamp(1.75rem, 3vw, 2.5rem);
	text-align: center;
}

.ev-seccion--blanco .ev-tarifa { background: var(--ev-crema-suave); border-color: transparent; }

.ev-tarifa--destacada {
	border-color: var(--ev-dorado);
	box-shadow: 0 18px 44px rgba(17, 17, 17, .08);
}

.ev-tarifa__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-tarifa__precio {
	margin: 0 0 .2rem;
	max-width: none;
	font-family: var(--ev-serif);
	font-size: clamp(2.25rem, 4vw, 3rem);
	line-height: 1;
	color: var(--ev-marron);
}

.ev-tarifa h3 {
	margin-bottom: 1.1rem;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--ev-linea);
	font-size: 1.0625rem;
}

.ev-tarifa ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

.ev-tarifa li {
	font-size: var(--ev-pequeno);
	line-height: 1.5;
	color: var(--ev-texto-suave);
}

.ev-descarga { margin-top: var(--ev-bloque); text-align: center; }
.ev-descarga .ev-nota { margin-top: .9rem; }

/* ==================================================== texto + FAQ a dos columnas */

/**
 * Dos secciones flojas seguidas —un texto a media página y tres preguntas centradas en
 * una banda entera— se convierten en una sola que sí llena el ancho.
 *
 * El texto va algo más estrecho que el acordeón: las preguntas necesitan sitio para el
 * "+" de la derecha y para la respuesta desplegada.
 */
.ev-texto-faq {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

/* Los dos titulares al mismo tamaño y con el mismo espacio debajo: son dos columnas
   del mismo rango, y con tamaños distintos parecía que una colgaba de la otra. */
.ev-texto-faq__texto h2,
.ev-texto-faq__rotulo { margin-bottom: .8em; }

/* Dentro de la columna no se centra ni se limita: ya lo hace la rejilla. */
.ev-texto-faq .ev-faq { max-width: none; margin-inline: 0; }

/* La primera pregunta alinea su línea de texto con el primer párrafo de la izquierda. */
.ev-texto-faq .ev-faq-item:first-child { padding-top: 0; }

@media (max-width: 900px) {
	.ev-texto-faq { grid-template-columns: minmax(0, 1fr); }
	.ev-texto-faq__rotulo { margin-top: .5rem; }
}

/* --------------------------------- lista apilada (media columna, junto al FAQ) */

/**
 * Las cuatro tarjetas se convierten en filas con filete.
 *
 * En media sección la rejilla no cabe: a 250px de mínimo por tarjeta acaban en una sola
 * columna, y cuatro cajas crema apiladas se leen como cuatro bloques sueltos, no como una
 * lista de lo que incluye la membresía. En fila, con el icono a la izquierda y un filete
 * separando, el bloque se escanea de arriba abajo con el MISMO ritmo que el acordeón de
 * al lado: las dos columnas riman en vez de competir.
 */
.ev-lista--apilada {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

.ev-lista--apilada .ev-lista__item {
	flex-direction: row;
	align-items: flex-start;
	gap: 1.1rem;
	height: auto;
	padding: 1.35rem 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--ev-linea);
}

/* La sección alterna fondos y la regla de "sobre blanco, tarjeta crema" ya no aplica:
   aquí no hay tarjeta que destacar del fondo. */
.ev-seccion--blanco .ev-lista--apilada .ev-lista__item,
.ev-seccion--oscuro .ev-lista--apilada .ev-lista__item {
	background: none;
	border-color: transparent;
	border-bottom: 1px solid var(--ev-linea);
}

.ev-lista--apilada .ev-lista__item:last-child { border-bottom: 0; padding-bottom: 0; }
.ev-lista--apilada .ev-lista__item:first-child { padding-top: 0; }

/* Sin caja no hay nada que levantar: el hover de tarjeta —elevación y sombra— sobre una
   fila produce un salto que parece un fallo de render. Solo se enciende el icono. */
.ev-lista--apilada .ev-lista__item:hover {
	transform: none;
	box-shadow: none;
	border-color: transparent;
	border-bottom-color: var(--ev-linea);
}

.ev-lista--apilada .ev-lista__icono { width: 42px; height: 42px; }
.ev-lista--apilada .ev-lista__icono .ev-icono { width: 22px; height: 22px; }

.ev-lista--apilada .ev-lista__texto strong { margin-bottom: .25rem; }

/* ================================================== solicitud de cita (reserva) */

/**
 * Dos columnas: a la izquierda el porqué y los datos de contacto, a la derecha el
 * formulario. La izquierda es la estrecha —es texto de apoyo— y el formulario se lleva
 * el ancho, porque es lo que la persona ha venido a hacer.
 */
.ev-reserva {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.ev-reserva__intro h1,
.ev-reserva__intro h2 { margin-bottom: .5em; }
.ev-reserva__intro .ev-lead { margin-bottom: var(--ev-gap); }

/* --------------------------------------------------------------- los 3 pasos */

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

.ev-reserva__pasos li {
	display: flex;
	align-items: baseline;
	gap: .85rem;
	font-size: var(--ev-pequeno);
	line-height: 1.55;
	color: var(--ev-texto-suave);
}

.ev-reserva__pasos span {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--ev-dorado);
	font-size: var(--ev-micro);
	font-weight: 600;
	color: var(--ev-marron);
	/* `baseline` alinea el número con la primera línea del texto; el círculo necesita
	   bajar un pelo para que su centro cuadre con la equis de la tipografía. */
	transform: translateY(.35rem);
}

/* ------------------------------------------------------------ pasos del form */

.ev-form--reserva { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }

.ev-form__paso {
	border: 0;
	border-top: 1px solid var(--ev-linea);
	margin: 0;
	padding: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
}

.ev-form__paso:first-of-type { border-top: 0; padding-top: 0; }

.ev-form__paso legend {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: 0;
	margin-bottom: 1.1rem;
	font-family: var(--ev-serif);
	font-size: 1.125rem;
	color: var(--ev-tinta);
}

.ev-form__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ev-dorado);
	color: var(--ev-tinta);
	font-family: var(--ev-sans);
	font-size: var(--ev-micro);
	font-weight: 600;
}

/* Dos campos por fila cuando caben: día preferido / alternativo, nombre / teléfono. */
.ev-form__fila {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0 1rem;
}

/**
 * Etiqueta de un grupo de opciones.
 *
 * No es un `<label>`: un label apunta a UN control, y aquí hay cuatro radios. Marcarlo
 * como label haría que el lector de pantalla anunciara el grupo entero como nombre del
 * primer radio.
 */
.ev-form__etiqueta {
	display: block;
	margin-bottom: .5rem;
	font-size: var(--ev-micro);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ev-marron);
}

/* ------------------------------------------------------- opciones en pastilla */

.ev-opciones {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}

/**
 * El radio nativo se oculta pero NO se quita del flujo (`opacity: 0` + posición, no
 * `display: none`): tiene que seguir recibiendo foco para poder recorrer el grupo con
 * las flechas del teclado.
 */
.ev-opcion { position: relative; display: inline-flex; }

.ev-opcion input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}

.ev-opcion span {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	padding: .65rem 1.1rem;
	border: 1px solid var(--ev-linea);
	border-radius: var(--ev-radio);
	background: var(--ev-blanco);
	font-size: var(--ev-pequeno);
	line-height: 1.3;
	color: var(--ev-texto);
	transition: border-color var(--ev-trans), background-color var(--ev-trans), color var(--ev-trans);
}

.ev-opcion small { font-size: var(--ev-micro); color: var(--ev-texto-suave); }

.ev-opcion input:hover + span { border-color: var(--ev-dorado); }

.ev-opcion input:checked + span {
	border-color: var(--ev-oscuro);
	background: var(--ev-oscuro);
	color: var(--ev-blanco);
}

.ev-opcion input:checked + span small { color: rgba(255, 255, 255, .7); }

/* El foco tiene que verse: el input real es invisible, así que se pinta en la pastilla. */
.ev-opcion input:focus-visible + span {
	outline: 2px solid var(--ev-dorado);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------- extras */

.ev-form--reserva select,
.ev-form--reserva input[type="date"] {
	/* Los `select` e `input[type=date]` nativos ignoran el ancho heredado en algunos
	   navegadores y se quedan en su tamaño intrínseco. */
	width: 100%;
}

.ev-scope .ev-nota--izq { margin: .75rem 0 0; text-align: left; max-width: none; }

.ev-scope .ev-form__pie {
	margin-top: .9rem;
	font-size: var(--ev-micro);
	color: var(--ev-texto-suave);
	max-width: none;
}

@media (max-width: 1024px) {
	.ev-reserva { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================ catálogo de tratamientos (hub) */

/* --------------------------------------------------------- acceso rápido */

/**
 * Atajos por familia. Enlaces de ancla, no pestañas.
 *
 * Con pestañas habría que ocultar dos tercios de la página con JS, y el catálogo entero
 * dejaría de estar en el HTML de una sola URL: peor para buscadores y peor para quien
 * quiere ver todo de un vistazo. El ancla lleva al bloque y el contenido no se mueve de
 * sitio.
 */
.ev-atajos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: clamp(.75rem, 1.5vw, 1.25rem);
}

.ev-atajo {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	padding: 1.1rem 1.4rem;
	background: var(--ev-blanco);
	border: 1px solid var(--ev-linea);
	text-decoration: none;
	transition: border-color var(--ev-trans), transform var(--ev-trans), box-shadow var(--ev-trans);
}

.ev-seccion--blanco .ev-atajo { background: var(--ev-crema-caja); border-color: transparent; }

.ev-atajo:hover {
	border-color: var(--ev-dorado);
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(17, 17, 17, .06);
}

.ev-atajo__nombre {
	font-family: var(--ev-serif);
	font-size: 1.125rem;
	color: var(--ev-tinta);
}

.ev-atajo__cuenta {
	font-size: var(--ev-micro);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ev-marron);
}

/* --------------------------------------------------- cabecera de familia */

.ev-familia__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: var(--ev-gap);
	margin-bottom: var(--ev-bloque);
}

.ev-familia__cabecera h2 { margin-bottom: .3em; }
.ev-familia__cabecera p { color: var(--ev-texto-suave); margin-bottom: 0; max-width: 52ch; }

/**
 * El ancla de familia tiene que dejar sitio al header pegajoso.
 *
 * Sin esto, al pulsar un atajo el titular de la familia queda DEBAJO del header de 100px
 * y parece que el enlace ha fallado. `scroll-margin-top` lo resuelve en el destino, sin
 * tocar el JS ni compensar con un pseudo-elemento invisible.
 */
#faciales,
#corporales,
#depilacion { scroll-margin-top: 110px; }

/* ------------------------------------------------------------- las fichas */

/**
 * Mínimo 238px, no 260.
 *
 * Es la diferencia entre 4 y 5 columnas en el contenedor de escritorio, y la familia
 * facial tiene exactamente 5 fichas: a 260 quedaba una sola tarjeta huérfana en una
 * segunda fila, que es el tipo de raggedness que se lee como error de montaje.
 */
.ev-catalogo {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

.ev-ficha {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--ev-blanco);
	border: 1px solid var(--ev-linea);
	text-decoration: none;
	overflow: hidden;
	transition: border-color var(--ev-trans), transform var(--ev-trans), box-shadow var(--ev-trans);
}

.ev-seccion--blanco .ev-ficha { background: var(--ev-crema-caja); border-color: transparent; }

.ev-ficha:hover {
	border-color: var(--ev-dorado);
	transform: translateY(-3px);
	box-shadow: 0 16px 36px rgba(17, 17, 17, .09);
}

.ev-ficha__foto {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--ev-crema);
}

.ev-ficha__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}

/* Zoom lento en hover: el único movimiento de la tarjeta aparte del levantado. */
.ev-ficha:hover .ev-ficha__foto img { transform: scale(1.04); }

.ev-ficha__cuerpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: clamp(1.25rem, 2vw, 1.6rem);
}

.ev-ficha__kicker {
	font-size: var(--ev-micro);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ev-marron);
	margin-bottom: .5rem;
}

.ev-ficha__titulo {
	font-family: var(--ev-serif);
	font-size: 1.25rem;
	line-height: 1.25;
	color: var(--ev-tinta);
	margin-bottom: .5rem;
}

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

/* `.ev-mas` ya se pega abajo con `margin-top: auto`: alinea el pie de todas las fichas
   de la fila aunque los resúmenes tengan dos líneas o cuatro. */