/* =========================================================================
   Landing · La Alquimia del Placer
   Se carga solo en la plantilla page-templates/alquimia.php
   ========================================================================= */

/*
 * El fondo de la página, del color de esta landing: el lienzo de 1440 deja
 * ver el fondo del sitio a los lados y si no, se notaría el cambio de crema.
 */
.tpl-alquimia,
.tpl-alquimia .site-content {
	background: #fef4f2;
}

/*
 * Y sin el aire que el tema pone alrededor del contenido: esta landing empieza
 * con una foto a sangre y acaba con una banda de color, así que ese respiro
 * dejaba dos franjas de crema, una debajo del menú y otra encima del pie.
 */
.tpl-alquimia .site-content {
	padding: 0;
}

.alq {
	--alq-cream: #fef4f2;        /* fondo principal, rosa muy claro */
	--alq-sand: #f5eee4;         /* crema cálida (pilares) */
	--alq-peach: #edccb9;        /* melocotón fuerte */
	--alq-peach-soft: #f6e9e0;   /* melocotón claro */
	--alq-brown: #35201b;        /* botones, pie */
	--alq-brown-deep: #4b2518;   /* bandas oscuras */
	--alq-ink: #33201a;          /* texto */
	--alq-ink-soft: #5a4339;
	--alq-on-dark: #fbefe7;

	--alq-serif: var(--tss-font-display);
	--alq-sans: var(--tss-font-body);

	--alq-pad: clamp(2.75rem, 4.5vw, 4.75rem);
	--alq-gutter: clamp(1.25rem, 4vw, 3rem);

	background: var(--alq-cream);
	color: var(--alq-ink);
	font-family: var(--alq-sans);
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	line-height: 1.55;
	overflow-x: clip;
}

/*
 * :where() no suma especificidad, así cualquier clase de más abajo puede
 * cambiar el margen (si aquí pusiéramos `.alq p` ganaría siempre y romperían
 * los `margin-inline: auto` que centran los bloques).
 */
.alq :where(p) {
	margin: 0 0 1.1em;
}

/* El menú es de anclas: la cabecera fija no debe tapar el inicio de la sección. */
.alq section[id] {
	scroll-margin-top: 5.5rem;
}

.alq strong {
	font-weight: 600;
}

.alq em {
	font-style: italic;
}

.alq-container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding-left: var(--alq-gutter);
	padding-right: var(--alq-gutter);
}

/* --- Tipografía compartida ---------------------------------------------- */
.alq-display {
	margin: 0;
	font-family: var(--alq-serif);
	font-size: clamp(1.75rem, 1rem + 2.6vw, 2.9rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--alq-ink);
}

.alq-display--sm {
	font-size: clamp(1.5rem, 1rem + 1.6vw, 2.1rem);
	margin: 1.5rem 0;
}

.alq-h2 {
	margin: 0 0 1.2rem;
	font-family: var(--alq-serif);
	font-size: clamp(1.75rem, 1.1rem + 2vw, 2.6rem);
	font-weight: 500;
	line-height: 1.14;
	letter-spacing: -0.01em;
	color: var(--alq-ink);
}

.alq-h2--narrow {
	max-width: 14rem;
}

.alq-h2--center {
	max-width: 54rem;
	margin-inline: auto;
	text-align: center;
	text-wrap: balance;
}

.alq-h2--light {
	color: var(--alq-on-dark);
}

.alq-eyebrow {
	margin: 0 0 1.75rem;
	font-size: 0.9375rem;
	text-align: center;
	color: var(--alq-ink-soft);
}

.alq-kicker {
	margin: 0 0 0.9rem;
	font-weight: 600;
	font-size: 1.0625rem;
}

.alq-note {
	font-size: 0.9375rem;
	color: var(--alq-ink-soft);
}

/* --- Listas -------------------------------------------------------------- */
.alq-list {
	margin: 0 0 1.4rem;
	padding: 0;
	list-style: none;
}

.alq-list li {
	position: relative;
	margin-bottom: 0.7rem;
	padding-left: 1.15rem;
}

.alq-list li::before {
	content: "·";
	position: absolute;
	left: 0;
	font-weight: 700;
}

.alq-list--plain li,
.alq-list--fire li {
	padding-left: 0;
}

.alq-list--plain li {
	margin-bottom: 0.15rem;
	font-size: 0.9375rem;
}

.alq-list--plain li::before,
.alq-list--fire li::before {
	content: none;
}

.alq-list--fire li {
	margin-bottom: 1rem;
}

/* --- Botón --------------------------------------------------------------- */
.alq-btn {
	display: inline-block;
	padding: 1.05rem 2.6rem;
	background: var(--alq-brown);
	border-radius: 999px;
	color: var(--alq-on-dark);
	font-family: var(--alq-sans);
	font-size: 0.875rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	transition: background 240ms ease, transform 240ms ease;
}

.alq-btn:hover,
.alq-btn:focus-visible {
	background: #4d3128;
	color: var(--alq-on-dark);
	transform: translateY(-2px);
}

/* =========================================================================
   Hero
   ========================================================================= */
.alq-hero {
	position: relative;
	display: grid;
	place-items: center;
	min-height: min(100svh, 900px);
	padding: 8rem var(--alq-gutter) 5rem;
	overflow: hidden;
	isolation: isolate;
}

.alq-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.alq-hero__inner {
	width: 100%;
	max-width: 900px;
	text-align: center;
}

.alq-hero__title {
	width: min(100%, 560px);
	height: auto;
	margin: 0 auto 2rem;
}

.alq-hero__claim {
	max-width: 26ch;
	margin: 0 auto;
	font-family: var(--alq-serif);
	font-size: clamp(1.375rem, 0.9rem + 1.7vw, 2.25rem);
	line-height: 1.3;
	color: var(--alq-ink);
}

.alq-hero__claim em {
	font-weight: 700;
}

/* =========================================================================
   Intro
   ========================================================================= */
.alq-intro {
	padding: var(--alq-pad) 0;
	background: var(--alq-cream);
	text-align: center;
}

.alq-intro .alq-display {
	max-width: 48rem;
	margin-inline: auto;
	text-wrap: balance;
}

/* =========================================================================
   Bloques a dos columnas
   ========================================================================= */
/*
 * Bloque a dos mitades, como el diseño original: la imagen ocupa el 50% del
 * ancho y TODO el alto del bloque, sin margen arriba ni abajo.
 *
 * La clave es que la imagen va en posición absoluta dentro de su columna: así
 * queda fuera del flujo y NO puede dictar la altura de la sección. Manda el
 * texto, y la foto se recorta con object-fit para rellenar lo que haga falta.
 * Por eso da igual cuánto texto tenga cada bloque: nunca se descuadra.
 */
.alq-split {
	padding: 0;
}

.alq-split__grid {
	display: grid;
	gap: 0;
	align-items: stretch;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.alq-split__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.alq-split__media {
	position: relative;
	margin: 0;
	overflow: hidden;
	min-height: 22rem;
}

.alq-split__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* En móvil la imagen es una banda con proporción propia. */
@media (max-width: 899px) {
	.alq-split__media {
		aspect-ratio: 4 / 5;
		min-height: 0;
	}

	.alq-split__grid--text-first .alq-split__media {
		order: 2;
	}
}

/*
 * Variante contenida: la imagen se queda dentro del bloque, con su proporción
 * y sin llegar a los bordes. Se usa donde la foto no aguanta el recorte a
 * pantalla completa (la floral, que es apaisada).
 */
.alq-split__grid--contained {
	gap: clamp(2rem, 5vw, 4rem);
	align-items: stretch;
}

@media (max-width: 899px) {
	.alq-split__grid--contained > .alq-split__media {
		aspect-ratio: 4 / 5;
	}
}

/*
 * La imagen empieza y acaba exactamente a la altura del texto de al lado:
 * la columna se estira a la altura de la fila (align-self: stretch) y la foto
 * la rellena en absoluto, así que ni sobresale ni se queda corta.
 * El aire de arriba y de abajo lo ponen el titular y el padding de la sección.
 */
@media (min-width: 900px) {
	.alq-split__grid--contained > .alq-split__media {
		position: relative;
		align-self: stretch;
		min-height: 0;
		height: auto;
		max-height: none;
		margin: 0;
		aspect-ratio: auto;
	}

	.alq-split__grid--contained > .alq-split__media > img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		max-height: none;
		aspect-ratio: auto;
		object-fit: cover;
	}

	.alq-split__grid--contained > .alq-split__text {
		align-self: stretch;
		margin: 0;
	}
}

.alq-split__grid--contained .alq-split__text {
	max-width: 36rem;
	padding: 0;
}

/* El texto lleva el aire que la imagen no tiene. */
.alq-split__text {
	max-width: 40rem;
	padding: var(--alq-pad) var(--alq-gutter);
}

@media (min-width: 900px) {
	.alq-split__text {
		padding-inline: clamp(2rem, 4vw, 4rem);
	}

	/* Cuando el texto va a la derecha, se alinea con el borde del contenedor. */
	.alq-split__grid:not(.alq-split__grid--text-first) .alq-split__text {
		margin-right: auto;
	}

	.alq-split__grid--text-first .alq-split__text {
		margin-left: auto;
	}
}

/* --- Imagina ------------------------------------------------------------- */
.alq-imagina {
	background: var(--alq-cream);
}

.alq-imagina .alq-kicker {
	font-family: var(--alq-serif);
	font-size: 1.0625rem;
	font-weight: 700;
	margin-bottom: 2rem;
}

/* --- Seamos honestas ----------------------------------------------------- */
.alq-honestas {
	background: var(--alq-cream);
}

.alq-honestas .alq-h2 {
	font-weight: 700;
	margin-bottom: 2rem;
}

/* --- Por qué es diferente ------------------------------------------------ */
.alq-diferente {
	background: var(--alq-peach);
}

.alq-diferente .alq-h2 {
	font-weight: 700;
}

/* --- Detalles ------------------------------------------------------------ */
.alq-detalles {
	background: var(--alq-cream);
}

.alq-detalles .alq-h2 {
	font-weight: 400;
	font-size: clamp(1.5rem, 1rem + 1.7vw, 2.25rem);
	line-height: 1.2;
	margin-bottom: 2rem;
}

/* =========================================================================
   Bandas oscuras
   ========================================================================= */
.alq-band {
	padding: calc(var(--alq-pad) * 1.1) 0;
	background:
		radial-gradient(120% 100% at 30% 0%, #56301f 0%, rgba(86, 48, 31, 0) 60%),
		linear-gradient(160deg, #4b2518 0%, #34190f 55%, #24110a 100%);
	color: var(--alq-on-dark);
}

.alq-band__inner {
	text-align: center;
}

.alq-band__lead {
	max-width: 54rem;
	margin: 0 auto 1.2rem;
	font-family: var(--alq-serif);
	font-size: clamp(1.25rem, 0.9rem + 1.1vw, 1.75rem);
	line-height: 1.3;
	text-wrap: balance;
}

.alq-band__title {
	max-width: 54rem;
	margin: 0 auto;
	text-wrap: balance;
	font-family: var(--alq-serif);
	font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.8rem);
	font-weight: 700;
	line-height: 1.2;
}

/* --- Por qué ahora ------------------------------------------------------- */
.alq-ahora {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 900px) {
	.alq-ahora {
		grid-template-columns: 1fr 1fr;
	}
}

.alq-ahora .alq-h2 {
	font-weight: 700;
	margin-bottom: 1.75rem;
}

.alq-ahora p {
	font-size: 0.9375rem;
	line-height: 1.6;
}

.alq-manifesto {
	margin-top: 2.5rem;
	font-family: var(--alq-serif);
	font-style: italic;
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
	line-height: 1.5;
}

/* =========================================================================
   Pilares
   ========================================================================= */
.alq-pilares {
	padding: var(--alq-pad) 0;
	background: var(--alq-sand);
}

.alq-pilares__title {
	margin: 0 0 3rem;
	font-family: var(--alq-serif);
	font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
	text-align: center;
}

.alq-pilares__grid {
	display: grid;
	gap: clamp(1.75rem, 3vw, 2.5rem);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.alq-pilares__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.alq-pilares__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.alq-pilar img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
	margin-bottom: 1.4rem;
}

.alq-pilar__title {
	margin: 0 0 0.8rem;
	font-family: var(--alq-serif);
	font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
	font-weight: 400;
	color: var(--alq-ink);
}

.alq-pilar p {
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* =========================================================================
   Es para ti si…
   ========================================================================= */
.alq-parati {
	padding: var(--alq-pad) 0;
	background: var(--alq-peach-soft);
}

.alq-parati .alq-h2 {
	margin-bottom: 3rem;
	font-weight: 400;
}

/* «esta mentoría es para ti si…» va destacado dentro del titular. */
.alq-parati .alq-h2 em {
	font-weight: 700;
}

.alq-parati__cta {
	margin: 2rem 0 0;
}

/* =========================================================================
   Sobre Evelyn
   ========================================================================= */
.alq-evelyn {
	background: var(--alq-cream);
}

.alq-evelyn .alq-h2 {
	margin-bottom: 0.5rem;
}

.alq-evelyn .alq-h2 em {
	font-weight: 700;
}

.alq-evelyn__ig {
	margin-bottom: 2rem;
	font-size: 0.9375rem;
}

.alq-evelyn__ig a {
	color: inherit;
}

/* =========================================================================
   Testimonios (burbujas de chat)
   ========================================================================= */
.alq-testimonios {
	padding: var(--alq-pad) 0;
	background: var(--alq-peach-soft);
}

.alq-testimonios__title {
	margin: 0 0 3rem;
	font-family: var(--alq-serif);
	font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
	text-align: center;
}

.alq-chat {
	display: grid;
	gap: 1.25rem;
	align-items: start;
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.alq-chat {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.alq-chat {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.alq-chat__col {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/*
 * Las columnas tienen textos de longitudes muy distintas y las cortas dejaban
 * un hueco enorme abajo. Alineándolas al centro el vacío se reparte y el
 * bloque no acaba en escalón.
 */
@media (min-width: 1000px) {
	.alq-chat {
		align-items: center;
	}
}

.alq-bubble {
	position: relative;
	margin: 0;
	padding: 0.75rem 0.9rem 1.35rem;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(51, 32, 26, 0.16);
	font-size: 0.875rem;
	line-height: 1.4;
}

.alq-bubble p {
	margin: 0;
}

.alq-bubble footer {
	position: absolute;
	right: 0.75rem;
	bottom: 0.5rem;
}

.alq-bubble__time {
	font-size: 0.6875rem;
	color: #8b8b8b;
}

.alq-bubble__react {
	position: absolute;
	left: 0.85rem;
	bottom: -0.7rem;
	padding: 0.1rem 0.4rem;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 1px 2px rgba(51, 32, 26, 0.18);
	font-size: 0.6875rem;
	line-height: 1.4;
}

/* =========================================================================
   FAQ
   ========================================================================= */
/* =========================================================================
   Panel de preguntas frecuentes
   Vive en un <dialog> y se abre desde «Preguntas» del menú: dentro de la
   landing rompía el ritmo y no aportaba al recorrido de venta.
   ========================================================================= */
.alq-modal {
	width: min(52rem, calc(100vw - 2rem));
	max-height: min(88vh, 54rem);
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: var(--alq-cream);
	color: var(--alq-ink);
	overflow: hidden;
}

.alq-modal::backdrop {
	background: rgba(31, 14, 8, 0.6);
	backdrop-filter: blur(3px);
}

.alq-modal__caja {
	position: relative;
	max-height: inherit;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(53, 32, 27, 0.35) transparent;
}

.alq-modal__caja::-webkit-scrollbar {
	width: 8px;
}

.alq-modal__caja::-webkit-scrollbar-track {
	background: transparent;
}

.alq-modal__caja::-webkit-scrollbar-thumb {
	background: rgba(53, 32, 27, 0.28);
	border-radius: 999px;
}

.alq-modal__caja::-webkit-scrollbar-button {
	display: none;
	height: 0;
	width: 0;
}

.alq-modal__cerrar {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: inherit;
	font-family: var(--alq-sans);
	font-size: 1.75rem;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

.alq-modal__cerrar:hover,
.alq-modal__cerrar:focus-visible {
	background: rgba(51, 32, 26, 0.08);
	color: inherit;
}

.alq-modal__cuerpo {
	padding: clamp(2rem, 4vw, 3.25rem);
}

body.alq-sin-scroll {
	overflow: hidden;
}

/* Sin soporte de <dialog>: se enseña como una sección normal. */
.alq-modal--inline {
	position: static;
	display: block;
	width: auto;
	max-width: none;
	max-height: none;
	margin: 0;
	border-radius: 0;
}

@media (max-width: 480px) {
	.alq-modal {
		width: 100vw;
		max-width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		margin: 0;
		border-radius: 0;
	}
}

.alq-faq__title {
	max-width: 56rem;
	margin: 0 auto 2.5rem;
	font-family: var(--alq-serif);
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	text-align: center;
}

.alq-faq__title em {
	font-style: italic;
}

.alq-accordion {
	max-width: 56rem;
	margin-inline: auto;
	border-top: 1px solid var(--alq-ink);
}

.alq-acc {
	border-bottom: 1px solid var(--alq-ink);
}

.alq-acc__h {
	margin: 0;
	font-size: inherit;
	font-weight: 400;
}

.alq-acc__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	padding: 1.15rem 0.25rem;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--alq-ink);
	font-family: var(--alq-sans);
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	cursor: pointer;
}

.alq-acc__btn:hover {
	background: none;
	color: var(--alq-brown-deep);
}

.alq-acc__icon {
	position: relative;
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
}

.alq-acc__icon::before,
.alq-acc__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 15px;
	height: 1px;
	background: var(--alq-ink);
	transition: transform 240ms ease;
}

.alq-acc__icon::after {
	transform: rotate(90deg);
}

.alq-acc__btn[aria-expanded="true"] .alq-acc__icon::after {
	transform: rotate(0deg);
}

.alq-acc__panel {
	padding: 0 0.25rem 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.alq-acc__panel > *:last-child {
	margin-bottom: 0;
}

/* =========================================================================
   Cierre
   ========================================================================= */
/*
 * El cierre necesita fondo propio: pegado a los testimonios y con el mismo
 * color, no se leía como remate sino como un sobrante de la sección anterior.
 */
.alq-cierre {
	padding: calc(var(--alq-pad) * 1.15) 0;
	background: var(--alq-peach);
	text-align: center;
}

.alq-cierre__title {
	max-width: 30rem;
	margin: 0 auto 2rem;
	font-family: var(--alq-serif);
	font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2rem);
	line-height: 1.25;
	text-wrap: balance;
}

/* Una línea fina sobre el titular para rematar el bloque. */
.alq-cierre__title::before {
	content: "";
	display: block;
	width: 3rem;
	height: 1px;
	margin: 0 auto 1.75rem;
	background: var(--alq-ink);
	opacity: 0.35;
}

/* =========================================================================
   Nota: no hay animación de aparición al hacer scroll.
   La había, pero dejaba bloques en opacidad 0 si el observador no llegaba a
   dispararse — y un bloque invisible es mucho peor que no tener animación.
   ========================================================================= */