/**
 * ds.css — Sistema de diseño ÉLEVÉE.
 *
 * Destilado, no copiado. La home se midió con tools/probe-home-ds.mjs y resultó NO ser
 * consistente: dos contenedores (1440 y 1140), padding de sección de 10px o 0, cuatro
 * tratamientos distintos de H2, line-height 1.0 en todos los titulares y tres estilos de
 * botón, dos de ellos con texto rosa #CC3366 heredado de plantilla.
 *
 * Aquí se conserva lo que sí define la marca —Playfair Display + Poppins, la crema, el
 * motivo de puntos y el botón oscuro de radio 2px— y se corrige el resto:
 *
 *   · UN solo contenedor: 1140px
 *   · Ritmo vertical explícito por escala, no valores sueltos
 *   · Escala tipográfica con line-height legible (1.0 apelmaza los titulares de 2-3 líneas)
 *   · Un único juego de botones. Fuera el rosa.
 *
 * Medidas de referencia en capture/meta/_ds-home.json
 */

:root {
	/* --- Color ------------------------------------------------------------- */
	--ev-crema:        #F2E8D9;   /* el de la sección de tratamientos de la home */
	--ev-crema-suave:  #F7F0E3;   /* variante clara, para alternar secciones */
	--ev-crema-caja:   #F9F5EC;   /* superficie de tarjeta sobre fondo blanco */
	--ev-blanco:       #FFFFFF;
	--ev-tinta:        #111111;   /* titulares */
	--ev-texto:        #333333;   /* cuerpo */
	--ev-texto-suave:  #6E6E6E;
	--ev-oscuro:       #2E2E2E;   /* botón primario y secciones oscuras */
	--ev-dorado:       #C8A97A;   /* acento de marca */
	--ev-dorado-hover: #B8975F;
	--ev-marron:       #7A6355;   /* antetítulos */
	--ev-linea:        rgba(17, 17, 17, .10);

	/* --- Tipografía -------------------------------------------------------- */
	--ev-serif: "Playfair Display", Georgia, "Times New Roman", serif;
	--ev-sans:  "Poppins", "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;

	/* Escala fluida. El line-height es la corrección importante: el original usa 1.0 y
	   cualquier titular de más de una línea se ve apelmazado. */
	--ev-display:  clamp(2.25rem, 4.4vw, 3.25rem);   /* héroes */
	--ev-h2:       clamp(1.75rem, 3.2vw, 2.5rem);    /* 40px en desktop, como la home */
	--ev-h3:       clamp(1.1875rem, 2vw, 1.75rem);   /* 28px, como las tarjetas */
	--ev-lead:     clamp(1.0625rem, 1.5vw, 1.25rem);
	--ev-body:     1rem;
	--ev-pequeno:  .875rem;
	--ev-micro:    .75rem;

	--ev-lh-titular: 1.18;
	--ev-lh-cuerpo:  1.75;

	/* --- Espacio ----------------------------------------------------------- */
	/* Ancho único de TODA la web. El original usaba 1140 (y en dos secciones, 1440).
	   Se sube a 1360: más aire lateral y mejor aprovechamiento en pantallas grandes,
	   sin llegar al full-bleed que descolocaba el hero y el ADN.
	   Lo aplican por igual el header, las landings y —vía capturado.css— el markup
	   de Elementor que aún sirven los mirrors. */
	--ev-ancho:   1720px;

	/* Ancho reducido para bloques de texto + imagen. A 1720 las líneas se alargan
	   demasiado y la foto domina el bloque; 1240 mantiene la medida de lectura cómoda.
	   Es una variante del sistema, no un ancho suelto: se aplica con .ev-contenedor--estrecho. */
	--ev-ancho-estrecho: 1240px;
	--ev-gutter:  clamp(1.25rem, 5vw, 2.5rem);

	--ev-sec-y:   clamp(3.5rem, 7vw, 6.5rem);   /* ritmo vertical de sección */
	--ev-bloque:  clamp(2rem, 4vw, 3.5rem);     /* separación entre bloques internos */
	--ev-gap:     clamp(1rem, 2vw, 1.75rem);

	--ev-radio:   2px;                          /* el radio del botón original */
	--ev-trans:   .25s cubic-bezier(.4, 0, .2, 1);

	/* Motivo de puntos del ADN: es "el toquecito" premium de la home. */
	--ev-motivo:  url("https://eleveeclinic.com/wp-content/uploads/2026/06/adn2-1662799-1024x585.webp");

	/**
	 * Corte con el asta de la É del logotipo, en las dos orientaciones.
	 *
	 * Vive aquí y no en el componente que lo estrenó (el hero de las fichas de
	 * tratamiento) porque ya lo usan tres sitios distintos: ese hero, el borde superior
	 * del pie y dos figuras de la home. Tres copias del mismo `path` es la forma segura
	 * de que mañana solo se corrija una.
	 *
	 * `preserveAspectRatio="none"` y viewBox de 0 a 100: la curva se estira con la caja,
	 * así que el mismo recurso vale para una columna alta y para una foto apaisada.
	 */
	--ev-asta-e:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M2 0 C6 2 7 18 7 50 C7 82 6 98 2 100 L100 100 L100 0 Z'/%3E%3C/svg%3E");
	--ev-asta-e-dch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M98 0 C94 2 93 18 93 50 C93 82 94 98 98 100 L0 100 L0 0 Z'/%3E%3C/svg%3E");
}

/* Utilidades del corte de la É: se aplican a la figura, no a la imagen. */
.ev-mascara-e,
.ev-mascara-e--dcha {
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.ev-mascara-e      { -webkit-mask-image: var(--ev-asta-e);     mask-image: var(--ev-asta-e); }
.ev-mascara-e--dcha { -webkit-mask-image: var(--ev-asta-e-dch); mask-image: var(--ev-asta-e-dch); }

/* ====================================================================== base */

.ev-scope {
	font-family: var(--ev-sans);
	font-size: var(--ev-body);
	line-height: var(--ev-lh-cuerpo);
	color: var(--ev-texto);
	-webkit-font-smoothing: antialiased;
}

.ev-scope *,
.ev-scope *::before,
.ev-scope *::after { box-sizing: border-box; }

.ev-scope p { margin: 0 0 1.15em; max-width: 68ch; }
.ev-scope p:last-child { margin-bottom: 0; }
/**
 * Reset de enlaces con la MISMA forma que los titulares: `.ev-scope :where(a)` = 10.
 * En especificidad 0 perdía contra el `a { color:#CC3366 }` de la plantilla original y
 * todos los enlaces salían en rosa: teléfonos, legales y relacionados.
 */
.ev-scope :where(a) { color: inherit; }
.ev-scope img { max-width: 100%; height: auto; display: block; }

/* ============================================================== tipografía */

/**
 * ESTILOS BASE CON ESPECIFICIDAD CERO, vía :where().
 *
 * Escritos como `.ev-scope h2` tenían especificidad 11 y ganaban a cualquier clase de
 * componente (10). Eso rompió tres veces lo mismo: los botones salían sin su color, el
 * titular del hero en tinta oscura sobre la foto, y los títulos del footer como H2 serif
 * gigantes en vez de etiquetas pequeñas.
 *
 * La forma es `.ev-scope :where(...)`, con especificidad 10. Ese es el punto de
 * equilibrio y hay que respetarlo:
 *
 *   · gana a las reglas de ELEMENTO del CSS capturado del original (`h1 {…}` vale 1),
 *     que si no imponen su Poppins a todos los titulares;
 *   · empata con las clases de componente (10) y pierde por orden de carga, porque
 *     header.css, footer.css, landings.css y home.css se cargan después de ds.css.
 *
 * Bajarlo a `:where(.ev-scope)` (especificidad 0) fue un exceso: dejaba que el CSS
 * ajeno se comiera la serifa de los titulares.
 */
.ev-scope :where(h1, h2, h3, h4) {
	font-family: var(--ev-serif);
	color: var(--ev-tinta);
	line-height: var(--ev-lh-titular);
	margin: 0 0 .55em;
	text-wrap: balance;
}

:where(.ev-scope) :where(h1) { font-size: var(--ev-display); font-weight: 400; }
:where(.ev-scope) :where(h2) { font-size: var(--ev-h2);      font-weight: 400; }
:where(.ev-scope) :where(h3) { font-size: var(--ev-h3);      font-weight: 400; }
:where(.ev-scope) :where(h4) { font-size: 1.0625rem;         font-weight: 600; font-family: var(--ev-sans); }

.ev-antetitulo {
	display: block;
	font-family: var(--ev-sans);
	font-size: var(--ev-micro);
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ev-marron);
	margin: 0 0 1.1rem;
}

.ev-lead {
	font-size: var(--ev-lead);
	line-height: 1.6;
	color: var(--ev-texto);
	max-width: 46ch;
}

/* Titular centrado de sección, como "NUESTROS TRATAMIENTOS" */
.ev-titulo-centro {
	text-align: center;
	margin-bottom: var(--ev-bloque);
}

.ev-titulo-centro h2 { margin-bottom: .35em; }

.ev-titulo-centro .ev-antetitulo,
.ev-titulo-centro p { margin-inline: auto; }

.ev-titulo-centro p { max-width: 58ch; color: var(--ev-texto-suave); }

/* ================================================================ secciones */

/* UN solo contenedor en toda la web. Era el problema principal de la home. */
.ev-seccion {
	padding-block: var(--ev-sec-y);
	position: relative;
	overflow: hidden;      /* el motivo decorativo nunca provoca scroll horizontal */
}

.ev-contenedor {
	max-width: var(--ev-ancho);
	margin-inline: auto;
	padding-inline: var(--ev-gutter);
	position: relative;
	z-index: 1;
}

.ev-contenedor--estrecho { max-width: var(--ev-ancho-estrecho); }

/* Fondos alternos: dan ritmo sin necesidad de adornos */
.ev-seccion--blanco { background: var(--ev-blanco); }
.ev-seccion--crema  { background: var(--ev-crema); }
.ev-seccion--suave  { background: var(--ev-crema-suave); }

.ev-seccion--oscuro {
	background: var(--ev-oscuro);
	color: rgba(255, 255, 255, .82);
}

.ev-seccion--oscuro h1,
.ev-seccion--oscuro h2,
.ev-seccion--oscuro h3 { color: var(--ev-blanco); }

.ev-seccion--oscuro .ev-antetitulo { color: var(--ev-dorado); }

/**
 * Sección de cierre CON FOTO de fondo, SIN velo.
 *
 * Misma regla que en el hero: la legibilidad se resuelve por encuadre y color de texto,
 * no oscureciendo la imagen. En esta foto la mitad izquierda es equipamiento desenfocado
 * y claro, así que ahí el texto va en oscuro y se apoya en esa zona.
 *
 * La imagen se pasa por la variable --foto desde el markup.
 */
.ev-cta-foto {
	background-image: var(--foto);
	background-size: cover;
	/**
	 * Anclada al 58%, que es donde está el rostro.
	 *
	 * La foto es muy apaisada (2200x687, ratio 3.2) frente a la sección (~2.5), así que
	 * `cover` escala por altura y sobra ancho: siempre se recorta por los lados. Anclada
	 * a la izquierda se veía la sala vacía y la cara quedaba cortada contra el borde
	 * derecho. El sujeto está a poco más de la mitad del encuadre, y ahí se ancla.
	 */
	background-position: 58% center;
	background-repeat: no-repeat;
	color: var(--ev-texto);
	padding-block: clamp(4rem, 8vw, 7rem);
}

.ev-cta-foto__inner { max-width: var(--ev-ancho); }

/* El ancho de lectura limita el TEXTO, no los botones: por eso la fila de botones va
   fuera de la caja, como hermana. */
.ev-cta-foto__caja { max-width: 42ch; }

@media (max-width: 600px) {
	.ev-cta-foto .ev-botones { flex-direction: column; align-items: flex-start; }
	.ev-cta-foto .ev-btn { width: 100%; }
}

.ev-cta-foto h2 {
	font-size: var(--ev-display);
	color: var(--ev-tinta);
	margin-bottom: .45em;
}

.ev-cta-foto p {
	font-size: var(--ev-lead);
	line-height: 1.6;
	color: var(--ev-texto);
	max-width: 38ch;
}

@media (max-width: 767px) {
	/* En vertical no hay zona clara suficiente a la izquierda: se encuadra por ese lado. */
	/* Estrecho: el recorte es mucho más agresivo, así que hay que acercarse aún más al
	   rostro o la columna se queda en bata y pared. */
	.ev-cta-foto { background-position: 64% center; position: relative; }

	/**
	 * Velo, y solo aquí.
	 *
	 * El criterio de la casa en los heros es "encuadre, no velo", y se mantiene en
	 * escritorio: allí el texto cae sobre la pared y se lee sin ayuda. A 390px no hay
	 * ancho para las dos cosas —o se ve el rostro o se lee el texto— y el texto va
	 * directamente sobre la cara. El degradado se apoya en el crema de la sección, no en
	 * un gris genérico, y se abre hacia abajo a la derecha para dejar el rostro limpio.
	 */
	.ev-cta-foto::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(115deg,
			rgba(247, 240, 227, .95) 0%,
			rgba(247, 240, 227, .88) 42%,
			rgba(247, 240, 227, .35) 78%,
			rgba(247, 240, 227, .12) 100%);
	}

	.ev-cta-foto__inner { position: relative; z-index: 1; }
	.ev-cta-foto__caja { max-width: none; }
}

/**
 * El "toquecito" premium: el motivo de puntos del ADN, muy tenue y sangrado por el borde.
 * Es el recurso que la home usa en su mejor sección, aquí sistematizado como modificador
 * en vez de puesto a mano cada vez.
 */
.ev-seccion--motivo::before {
	content: "";
	position: absolute;
	inset-block: -10%;
	right: -6%;
	width: min(46%, 620px);
	background: var(--ev-motivo) no-repeat center / contain;
	opacity: .16;
	pointer-events: none;
	z-index: 0;
}

.ev-seccion--motivo-izq::before { right: auto; left: -8%; transform: scaleX(-1); }

.ev-seccion--oscuro.ev-seccion--motivo::before { opacity: .10; filter: invert(1); }

@media (max-width: 767px) {
	/* En móvil el motivo compite con el texto: se reduce y se aleja. */
	.ev-seccion--motivo::before { width: 70%; right: -25%; opacity: .09; }
	.ev-seccion--motivo-izq::before { left: -30%; }
}

/* ================================================================== botones */

.ev-btn {
	position: relative;
	isolation: isolate;            /* para que el barrido quede bajo el texto */
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: 1rem 2rem;
	border: 1px solid transparent;
	border-radius: var(--ev-radio);
	font-family: var(--ev-sans);
	font-size: var(--ev-pequeno);
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	/* REGLA DEL SISTEMA: la etiqueta de un botón nunca parte en dos líneas. Si no cabe,
	   lo que hay que cambiar es el contenedor o el texto, no dejar que se rompa. */
	white-space: nowrap;
	transition: color var(--ev-trans), border-color var(--ev-trans);
}

/**
 * Hover: barrido de relleno desde la izquierda.
 *
 * Se hace con un pseudo-elemento y `transform`, no animando `background-color`: el
 * transform va en el compositor y no provoca repintados. El color de destino lo define
 * cada variante, así que el gesto es uno solo en toda la web.
 */
.ev-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .45s cubic-bezier(.65, 0, .35, 1);
	background: var(--ev-dorado);
}

.ev-btn:hover::before,
.ev-btn:focus-visible::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
	.ev-btn::before { transition: none; }
}

/* Variantes scopeadas bajo .ev-scope: así superan tanto al reset de enlaces como al CSS
   heredado del original, sin recurrir a !important. */

/* CLARO — el principal sobre foto o fondo claro. Al pasar, se llena de dorado. */
.ev-scope .ev-btn--claro { background: var(--ev-blanco); color: var(--ev-tinta); border-color: var(--ev-blanco); }
.ev-scope .ev-btn--claro::before { background: var(--ev-dorado); }
.ev-scope .ev-btn--claro:hover { color: var(--ev-tinta); border-color: var(--ev-dorado); }

.ev-scope .ev-btn--primario { background: var(--ev-oscuro); color: var(--ev-blanco); border-color: var(--ev-oscuro); }
.ev-scope .ev-btn--primario::before { background: var(--ev-dorado); }
.ev-scope .ev-btn--primario:hover { color: var(--ev-tinta); border-color: var(--ev-dorado); }

.ev-scope .ev-btn--dorado { background: var(--ev-dorado); color: var(--ev-tinta); border-color: var(--ev-dorado); }
.ev-scope .ev-btn--dorado::before { background: var(--ev-oscuro); }
.ev-scope .ev-btn--dorado:hover { color: var(--ev-blanco); border-color: var(--ev-oscuro); }

.ev-scope .ev-btn--linea { background: transparent; color: var(--ev-tinta); border-color: rgba(17, 17, 17, .28); }
.ev-scope .ev-btn--linea::before { background: var(--ev-tinta); }
.ev-scope .ev-btn--linea:hover { color: var(--ev-blanco); border-color: var(--ev-tinta); }

.ev-scope .ev-seccion--oscuro .ev-btn--linea { color: var(--ev-blanco); border-color: rgba(255, 255, 255, .35); }
.ev-scope .ev-seccion--oscuro .ev-btn--linea::before { background: var(--ev-blanco); }
.ev-scope .ev-seccion--oscuro .ev-btn--linea:hover { color: var(--ev-tinta); border-color: var(--ev-blanco); }

.ev-btn--texto {
	padding: 0;
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--ev-body);
	color: var(--ev-texto-suave);
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
}

.ev-btn--texto:hover { color: var(--ev-tinta); }

.ev-botones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ev-gap);
	align-items: center;
	margin-top: var(--ev-bloque);
}

/* El bloque de título centrado ya aporta su margen inferior: sumar el de los botones
   abría un hueco doble entre el texto y las llamadas a la acción. */
.ev-titulo-centro + .ev-botones { margin-top: 0; }

.ev-botones--centro { justify-content: center; }

/* ================================================================== rejillas */

.ev-grid { display: grid; gap: var(--ev-gap); }

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

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

/* Dos columnas asimétricas, como la sección del ADN */
.ev-split { display: grid; gap: var(--ev-bloque); align-items: center; }

@media (min-width: 1025px) {
	.ev-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 6rem); }
	.ev-split--invertido > :first-child { order: 2; }
}

/* ================================================================ accesible */

@media (prefers-reduced-motion: reduce) {
	.ev-scope *, .ev-scope *::before, .ev-scope *::after {
		transition: none !important;
		animation: none !important;
	}
}

.ev-scope :focus-visible {
	outline: 2px solid var(--ev-dorado);
	outline-offset: 3px;
}

/**
 * Flanco de ola vertical, pegado al borde izquierdo de la sección.
 *
 * Alternativa al motivo del ADN (`.ev-seccion--motivo`), que es una marca de agua al 16%
 * sangrada por la derecha. Esta va por la izquierda y de arriba abajo, así que las dos NO
 * deben convivir en la misma sección: serían dos texturas distintas cruzándose.
 *
 * `background-size: auto 100%` la estira de borde a borde conservando su proporción; con
 * `100% 100%` el trazo se deforma y deja de ser el mismo dibujo que el del hero.
 */
.ev-seccion--olas::before {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 0;
	width: min(240px, 18%);
	background: url("../img/olas-vertical.webp") no-repeat left center / auto 100%;
	opacity: .55;
	pointer-events: none;
	z-index: 0;
}