/* =========================================================================
   Landing «Disfruta Publicando»

   CÓMO FUNCIONA
   El diseño mide 1025 pt de ancho. Aquí se replica escalando ese plano entero,
   no ensanchándolo: --u vale 1px cuando la ventana da los 1025 del diseño, y
   sube o baja con ella. Todas las medidas van en múltiplos de --u, así que la
   proporción entre la foto, el texto y el aire es siempre la del diseño, en un
   portátil y en un monitor de 1920.

   Lo que NO se copia son las coordenadas: cada sección es una fila normal del
   documento (una, dos o tres columnas) y el texto fluye dentro. Por eso un
   precio que llega de la base de datos o una fecha más larga no rompen nada.

   Los números sueltos (41, 16, 546…) son medidas tomadas del PDF.

   1. Tokens y lienzo
   2. Piezas comunes
   3. Las secciones, en orden
   4. Cabecera sobre el hero
   5. Móvil
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens y lienzo
   -------------------------------------------------------------------------
   Los tokens van en :root y no en .dp a propósito: la franja superior y el
   banner de cookies están FUERA del <main> y necesitan estos mismos valores.
   Esta hoja solo se carga en la landing, así que no afecta al resto de la web.
   ------------------------------------------------------------------------- */
:root {
	/*
	 * El plano tiene un ancho máximo —pensado para que en una pantalla de 2K
	 * quede contenido y no ocupe el monitor entero— y por debajo de ese ancho
	 * escala con la ventana. --u es el ancho del plano dividido entre sus 1025
	 * unidades, así que TODO (barras, fotos, texto y encuadres) escala junto.
	 */
	--dp-max: 1440px;
	--u: min(calc(var(--dp-max) / 1025), calc(100vw / 1025));

	/* Colores muestreados píxel a píxel del PDF, no aproximados. */
	--dp-crema: #f9f1ec;
	--dp-crema-clara: #fdfdf2;
	--dp-marron: #775c46;
	--dp-oro: #c6a77d;
	--dp-filo: #fff2ac;      /* el amarillo del resplandor del logotipo */
	--dp-tinta: #14100e;

	/* Degradado dorado→crema: la banda, los rótulos y el botón. */
	--dp-degradado: linear-gradient(90deg, #c6a77d 0%, #d8c3a3 42%, #f3ebd4 74%, #fdfdf2 100%);

	/* Geométrica del diseño (Glacial Indifference); Jost es su pariente libre. */
	--dp-geo: "Jost", "Century Gothic", Futura, var(--tss-font-body);

	/* El plano y su margen interior. */
	--dp-lienzo: calc(1025 * var(--u));
	--dp-margen: calc(44 * var(--u));
}

/* -------------------------------------------------------------------------
   2. Piezas comunes
   ------------------------------------------------------------------------- */
.dp {
	overflow-x: clip;
	color: var(--dp-tinta);
	font-family: var(--tss-font-body);
	font-size: calc(16 * var(--u));
	line-height: 1.75;
	background: var(--dp-crema);
}

/* La landing manda sobre el ritmo vertical del tema. */
.tpl-disfruta .site-content {
	padding: 0;
}

.tpl-disfruta .site-main > * + * {
	margin-top: 0;
}

/*
 * La sección nunca es más ancha que el lienzo: si se estirase a todo el
 * monitor, sus fotos se recortarían con otra proporción y el encuadre dejaría
 * de ser el del diseño. `isolation` mantiene la foto detrás del texto sin
 * tener que ir subiendo z-index por toda la hoja.
 */
.dp-s {
	position: relative;
	isolation: isolate;
	width: min(100%, var(--dp-lienzo));
	margin-inline: auto;
	padding-block: calc(58 * var(--u));
	background-color: var(--dp-crema);
}

.dp-wrap {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--dp-lienzo);
	margin-inline: auto;
	padding-inline: var(--dp-margen);
}

/*
 * Las fotos de fondo vienen YA RECORTADAS al encuadre del diseño (se recortan
 * al exportarlas, no aquí). Como la proporción del archivo es exactamente la
 * de su sección, no hay nada que recortar en el navegador: se ve siempre lo
 * mismo, con cualquier ancho de ventana y cualquier zoom.
 */
:where(.dp-s > img[class$="__fondo"]) {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: auto;
}

:where(.dp p) {
	margin-block: 0 1em;
}

:where(.dp p:last-child) {
	margin-bottom: 0;
}

.dp p {
	color: var(--dp-tinta);
}

/* Antetítulo: la línea en versalitas que anuncia cada sección. */
.dp-ante {
	margin: 0 0 calc(14 * var(--u));
	font-size: calc(15 * var(--u));
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.01em;
	text-align: center;
	text-transform: uppercase;
}

/*
 * Titulares. El color se declara aquí porque main.css los pinta de marrón
 * para el resto de la web; en el diseño de la landing son tinta.
 */
.dp-h2 {
	margin: 0 0 calc(24 * var(--u));
	color: var(--dp-tinta);
	font-family: var(--tss-font-display);
	font-size: calc(41 * var(--u));
	font-weight: 400;
	line-height: 1.22;
	text-align: center;
	text-wrap: balance;
}

.dp-h2 em {
	font-style: italic;
}

.dp-h2 strong {
	font-weight: 700;
}

.dp-h2--m {
	font-size: calc(32 * var(--u));
}

.dp-h2--s {
	font-size: calc(25 * var(--u));
}

/*
 * Rótulo de píldora con el degradado dorado (las fases y los bloques de
 * encuentros). En el diseño va rasterizado; aquí es CSS, así que escala sin
 * pixelarse y el texto sigue siendo texto.
 */
.dp-badge {
	display: block;
	margin: 0 0 calc(20 * var(--u));
	padding: calc(9 * var(--u)) calc(18 * var(--u));
	border: 1px solid var(--dp-tinta);
	border-radius: 999px;
	background: var(--dp-degradado);
	font-size: calc(20 * var(--u));
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-transform: uppercase;
}

/* Botón principal: la misma píldora, pero pulsable. */
.dp-btn {
	display: block;
	width: min(100%, calc(699 * var(--u)));
	margin-inline: auto;
	padding: calc(11 * var(--u)) calc(28 * var(--u));
	border: 1px solid var(--dp-tinta);
	border-radius: 999px;
	background: var(--dp-degradado);
	color: var(--dp-tinta);
	font-size: calc(19 * var(--u));
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.dp-btn:hover,
.dp-btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(20, 16, 14, 0.18);
	color: var(--dp-tinta);
}

/*
 * Los botones repartidos por la página, al final de las secciones que acaban
 * de dar una razón para comprar. Van algo más estrechos que el de precios para
 * que ese siga siendo el principal.
 */
.dp-btn--suelto {
	width: min(100%, calc(460 * var(--u)));
	margin-top: calc(40 * var(--u));
	font-size: calc(17 * var(--u));
}

/* Listas con viñeta redonda, el patrón de casi toda la página. */
.dp-tepasa__caja,
.dp-incluye__lista,
.dp-parati__col ul {
	margin: 0;
	padding-left: calc(24 * var(--u));
	list-style: disc;
}

.dp-tepasa__caja li,
.dp-incluye__lista li,
.dp-parati__col ul li {
	margin-bottom: calc(9 * var(--u));
}

.dp-tepasa__caja li:last-child,
.dp-incluye__lista li:last-child,
.dp-parati__col ul li:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   3. Las secciones, en orden
   ------------------------------------------------------------------------- */

/* --- 1. Hero ------------------------------------------------------------
   La foto ocupa la sección entera (1025 × 546 en el diseño) y el texto se
   apoya a la izquierda, sobre la pared vacía. La foto se ancla a la derecha
   para que al recortarse nunca se coma a la mujer ni el trípode. */
.dp-hero {
	height: calc(546 * var(--u));
	padding-block: 0;
}

.dp-hero__inner {
	position: relative;
	height: 100%;
	max-width: none;
	padding: 0;
}

.dp-hero__inner > * {
	position: absolute;
	left: calc(85 * var(--u));
	margin: 0;
}

/* Bajo la franja marrón, que ocupa las primeras 29,5 unidades del plano. */
.dp-hero__fondo {
	top: calc(29.5 * var(--u));
}

.dp-hero__ante {
	top: calc(48 * var(--u));
	color: var(--dp-filo);
	font-family: var(--dp-geo);
	font-size: calc(19 * var(--u));
	font-weight: 700;
	letter-spacing: 0.13em;
	text-shadow: 0 1px 2px rgba(20, 16, 14, 0.18);
	text-transform: uppercase;
}

/* El logotipo es imagen porque la script del diseño es de pago; el <h1> sigue
   siendo texto para quien no ve la página. En el plano mide 842 de 1025. */
.dp-hero__marca {
	top: calc(107 * var(--u));
	left: calc(84 * var(--u));
	width: calc(461 * var(--u));
	line-height: 0;
}

.dp-hero__marca img {
	display: block;
	width: 100%;
	height: auto;
}

.dp-hero__entradilla {
	top: calc(286 * var(--u));
	font-family: var(--dp-geo);
	font-size: calc(18 * var(--u));
	line-height: 1.5;
}

.dp-hero__para {
	top: calc(370 * var(--u));
	font-family: var(--dp-geo);
	font-size: calc(19 * var(--u));
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.45;
	text-transform: uppercase;
}

.dp-hero__firma {
	top: calc(493 * var(--u));
	display: block;
	width: calc(116 * var(--u));
	height: auto;
}

/* --- 2. Banda dorada ---------------------------------------------------- */
.dp-claim {
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(100%, var(--dp-lienzo));
	height: calc(32 * var(--u));
	margin-block: 0;
	margin-inline: auto;
	padding: 0 var(--dp-margen);
	background: var(--dp-degradado);
	color: var(--dp-tinta);
	font-size: calc(15 * var(--u));
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-transform: uppercase;
	text-wrap: balance;
}

/* --- 3. El problema ----------------------------------------------------- */
.dp-problema {
	padding-block: calc(52 * var(--u)) calc(58 * var(--u));
}

.dp-problema__cols {
	display: grid;
	grid-template-columns: calc(230 * var(--u)) calc(430 * var(--u));
	gap: calc(121 * var(--u));
	justify-content: start;
	margin-top: calc(44 * var(--u));
	padding-left: calc(150 * var(--u));
}

.dp-problema__cols p {
	margin: 0;
}

/* --- 4. ¿Te pasa esto? --------------------------------------------------
   Foto a sangre con la tarjeta encima, a la izquierda, como en el diseño. */
.dp-tepasa {
	height: calc(517 * var(--u));
	padding-block: calc(204 * var(--u)) 0;
}

.dp-tepasa__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-inline: calc(59 * var(--u));
}

.dp-tepasa__titulo {
	margin: 0 0 calc(25 * var(--u)) calc(17 * var(--u));
	color: var(--dp-tinta);
	font-family: var(--tss-font-display);
	font-size: calc(27 * var(--u));
	font-weight: 700;
	line-height: 1.2;
}

.dp-tepasa__caja {
	width: calc(502 * var(--u));
	padding: calc(17 * var(--u)) calc(24 * var(--u)) calc(17 * var(--u)) calc(47 * var(--u));
	border-radius: calc(26 * var(--u));
	background: var(--dp-crema);
	font-family: var(--dp-geo);
	font-size: calc(17 * var(--u));
	line-height: 1.65;
}

/* En el plano las viñetas van seguidas: el aire lo da el interlineado. */
.dp-tepasa__caja li {
	margin-bottom: 0;
}

/* --- 5. No necesitas más disciplina ------------------------------------- */
.dp-disciplina {
	padding-block: calc(46 * var(--u)) calc(47 * var(--u));
}

.dp-disciplina__cols {
	display: grid;
	grid-template-columns: calc(390 * var(--u)) minmax(0, 1fr);
	gap: calc(48 * var(--u));
	align-items: start;
}

.dp-disciplina__titulo {
	margin: 0;
	text-align: left;
}

/* Las pastillas: contorno fino, sin relleno, como en el diseño. */
.dp-pastillas {
	display: flex;
	flex-wrap: wrap;
	gap: calc(11 * var(--u)) calc(10 * var(--u));
	margin: calc(24 * var(--u)) 0 calc(30 * var(--u));
	padding: 0;
	list-style: none;
}

.dp-pastillas li {
	padding: calc(8 * var(--u)) calc(18 * var(--u));
	border: 1px solid var(--dp-tinta);
	background: #fff;
	border-radius: 999px;
	font-family: var(--dp-geo);
	font-size: calc(15 * var(--u));
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* --- 6. Lo que cambia ---------------------------------------------------
   Foto a sangre; las tarjetas se apoyan en la mitad derecha para no taparle
   la cara a la mujer de la izquierda. */
.dp-cambia {
	height: calc(591 * var(--u));
	padding-block: calc(30 * var(--u)) calc(46 * var(--u));
}

.dp-cambia__lista {
	display: grid;
	gap: calc(18 * var(--u));
	width: min(100%, calc(490 * var(--u)));
	margin: calc(34 * var(--u)) 0 0 auto;
	padding: 0;
	list-style: none;
}

.dp-cambia__lista li {
	padding: calc(18 * var(--u)) calc(26 * var(--u));
	border: 1px solid var(--dp-filo);
	border-radius: calc(26 * var(--u));
	background: var(--dp-crema);
	line-height: 1.5;
	text-align: center;
	text-wrap: balance;
}

/* --- 7. Este reto sí / no es para ti ------------------------------------ */
.dp-parati {
	padding-block: calc(33 * var(--u)) calc(44 * var(--u));
}

.dp-parati__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) calc(275 * var(--u)) minmax(0, 1fr);
	gap: calc(30 * var(--u));
	align-items: start;
}

.dp-parati__col .dp-h2 {
	margin-bottom: calc(18 * var(--u));
	text-align: left;
}

.dp-parati__col ul {
	font-size: calc(17 * var(--u));
	line-height: 1.7;
}

.dp-parati__foto {
	width: 100%;
	height: auto;
	border-radius: calc(4 * var(--u));
	align-self: center;
}

/* --- 8. El cuerpo y el sistema nervioso -------------------------------- */
.dp-cuerpo {
	height: calc(314 * var(--u));
	padding-block: calc(34 * var(--u));
}

.dp-cuerpo__inner {
	text-align: center;
}

.dp-cuerpo__pie {
	max-width: calc(700 * var(--u));
	margin-inline: auto;
	font-family: var(--tss-font-display);
	font-size: calc(19 * var(--u));
	line-height: 1.5;
	text-wrap: balance;
}

/* --- 9. El método -------------------------------------------------------
   Tres columnas iguales con la flecha del diseño entre una y otra. La flecha
   es decorativa: va en ::after y no la lee un lector de pantalla. */
.dp-metodo {
	padding-block: calc(28 * var(--u)) calc(29 * var(--u));
}

.dp-fases {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(30 * var(--u));
	margin: calc(40 * var(--u)) 0 0;
	padding: 0;
	list-style: none;
}

.dp-fase {
	position: relative;
}

.dp-fase__foto {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: calc(22 * var(--u));
	border-radius: calc(4 * var(--u));
}

.dp-fase .dp-badge {
	position: relative;
	font-size: calc(19 * var(--u));
}

/* La flecha entre fases, alineada con el rótulo. */
.dp-fase:not(:last-child) .dp-badge::after {
	content: "→";
	position: absolute;
	top: 50%;
	left: 100%;
	width: calc(30 * var(--u));
	font-size: calc(22 * var(--u));
	font-weight: 400;
	line-height: 1;
	text-align: center;
	transform: translateY(-50%);
}

.dp-fase__lema {
	margin: 0 0 calc(16 * var(--u));
	color: var(--dp-tinta);
	font-family: var(--tss-font-body);
	font-size: calc(20 * var(--u));
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
}

.dp-fase p {
	font-size: calc(15 * var(--u));
	line-height: 1.7;
}

/* --- 10. Los encuentros de zoom ---------------------------------------- */
.dp-encuentros {
	height: calc(505 * var(--u));
	padding-block: calc(56 * var(--u)) calc(48 * var(--u));
}

/* El velo que deja el fondo en el melocotón pálido del diseño. */
.dp-encuentros::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(90deg, rgba(250, 236, 221, 0.66) 0%, rgba(250, 236, 221, 0.62) 45%, rgba(253, 246, 236, 0.88) 100%);
}

.dp-encuentros__cols {
	display: grid;
	grid-template-columns: repeat(2, calc(306 * var(--u)));
	gap: calc(91 * var(--u));
	justify-content: center;
	margin: calc(34 * var(--u)) auto 0;
}

.dp-bloque .dp-badge {
	font-size: calc(19 * var(--u));
}

.dp-cita {
	display: flex;
	gap: calc(20 * var(--u));
	align-items: flex-start;
}

.dp-cita + .dp-cita {
	margin-top: calc(26 * var(--u));
}

/* El icono va en su tarjeta blanca redondeada, como en el diseño. */
.dp-cita__icono {
	flex: 0 0 auto;
	width: calc(84 * var(--u));
	height: auto;
	border-radius: calc(18 * var(--u));
	background: #fff;
}

.dp-cita__texto p {
	margin: 0;
}

.dp-cita__nombre {
	font-family: var(--tss-font-display);
	font-size: calc(22 * var(--u));
	line-height: 1.3;
}

.dp-cita__fecha {
	font-size: calc(20 * var(--u));
	font-weight: 700;
	line-height: 1.45;
}

.dp-cita__hora {
	font-size: calc(20 * var(--u));
	line-height: 1.45;
}

.dp-encuentros__nota {
	margin: calc(40 * var(--u)) 0 0;
	font-size: calc(12 * var(--u));
	font-weight: 700;
	text-align: center;
}

/* --- 11. Lo que incluye ------------------------------------------------- */
.dp-incluye {
	padding-block: calc(25 * var(--u)) calc(26 * var(--u));
}

.dp-incluye__cols {
	display: grid;
	grid-template-columns: calc(390 * var(--u)) minmax(0, 1fr);
	gap: calc(48 * var(--u));
	align-items: center;
}

.dp-incluye__foto {
	width: 100%;
	height: auto;
	border-radius: calc(4 * var(--u));
}

.dp-incluye__cols .dp-h2 {
	text-align: left;
}

.dp-incluye__lista {
	font-size: calc(18 * var(--u));
	line-height: 1.6;
}

.dp-incluye__lista em {
	font-style: italic;
}

.dp-incluye__nota {
	margin: calc(28 * var(--u)) 0 0;
	font-size: calc(17 * var(--u));
	font-weight: 700;
	text-transform: uppercase;
}

/* --- 12. ¿Por qué ahora? ------------------------------------------------ */
.dp-ahora {
	padding-block: calc(18 * var(--u)) calc(19 * var(--u));
}

.dp-ahora .dp-ante {
	font-weight: 700;
}

.dp-ahora__frase {
	max-width: calc(880 * var(--u));
	margin-inline: auto;
	font-family: var(--tss-font-display);
	font-size: calc(24 * var(--u));
	line-height: 1.4;
	text-align: center;
	text-wrap: balance;
}

.dp-ahora__frase strong {
	font-weight: 700;
}

/* --- 13. Precios -------------------------------------------------------- */
.dp-precios {
	height: calc(537 * var(--u));
	padding-block: calc(48 * var(--u)) calc(30 * var(--u));
}

/* Un velo suave: en el diseño la foto se ve, pero las tarjetas mandan. */
.dp-precios::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(90deg, rgba(250, 236, 221, 0.45) 0%, rgba(250, 236, 221, 0.22) 60%, rgba(250, 236, 221, 0.1) 100%);
}

.dp-precios__inner {
	text-align: center;
}

.dp-precios__titulo {
	margin-bottom: calc(12 * var(--u));
	font-weight: 700;
}

.dp-precios__nota {
	margin: 0 0 calc(40 * var(--u));
	font-size: calc(14 * var(--u));
	font-weight: 700;
}

/* Tantas columnas como tarifas queden: al caducar una, las demás se
   reparten el ancho en vez de dejar el hueco. */
.dp-tarifas {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: calc(22 * var(--u));
	margin-bottom: calc(38 * var(--u));
}

.dp-tarifa {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: calc(8 * var(--u));
	padding: calc(28 * var(--u)) calc(18 * var(--u));
	border: 1px solid var(--dp-tinta);
	border-radius: calc(26 * var(--u));
	background: var(--dp-crema);
}

/* La tarifa vigente se levanta un poco: en el diseño es la que se mira. */
.dp-tarifa--activa {
	box-shadow: 0 14px 34px rgba(20, 16, 14, 0.16);
}

/*
 * El nombre va relleno con el degradado dorado. `background-clip: text` no
 * llega a todos los navegadores viejos, y por eso el color de reserva se
 * declara antes: si el recorte falla, el texto se ve dorado igual.
 */
.dp-tarifa__nombre {
	margin: 0;
	font-family: var(--tss-font-display);
	font-size: calc(32 * var(--u));
	font-weight: 700;
	line-height: 1.15;
	color: var(--dp-oro);
	background: linear-gradient(90deg, #a9855a 0%, #c6a77d 45%, #d5bd98 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.dp-tarifa__cifra {
	margin: 0;
	font-family: var(--tss-font-display);
	font-size: calc(32 * var(--u));
	font-weight: 700;
	line-height: 1.15;
}

.dp-tarifa__letra {
	margin: 0;
	font-size: calc(14 * var(--u));
	line-height: 1.4;
	text-wrap: balance;
}

/*
 * La tarjeta es el enlace, así que se comporta como tal: se levanta al pasar
 * por encima y tiene su propio foco de teclado.
 */
.dp-tarifa {
	color: var(--dp-tinta);
	text-decoration: none;
	cursor: pointer;
	transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}

.dp-tarifa:hover,
.dp-tarifa:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 16px 34px rgba(20, 16, 14, 0.18);
	color: var(--dp-tinta);
}

.dp-tarifa:focus-visible {
	outline: 2px solid var(--dp-tinta);
	outline-offset: 3px;
}

.dp-precios__firma {
	display: block;
	width: calc(118 * var(--u));
	height: auto;
	margin: calc(30 * var(--u)) auto 0;
}

/* --- 14. Por qué he creado Disfruta Publicando ------------------------- */
.dp-sobremi {
	padding-block: calc(14 * var(--u)) calc(15 * var(--u));
}

.dp-sobremi__cols {
	display: grid;
	grid-template-columns: calc(415 * var(--u)) minmax(0, 1fr);
	gap: calc(48 * var(--u));
	align-items: start;
}

.dp-sobremi__foto {
	width: 100%;
	height: auto;
	border-radius: calc(4 * var(--u));
}

.dp-sobremi__cols .dp-h2 {
	text-align: left;
}

.dp-sobremi__carta p {
	margin-bottom: calc(26 * var(--u));
	font-size: calc(14 * var(--u));
	line-height: 1.75;
}

.dp-sobremi__firma {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   4. Cabecera sobre el hero

   El diseño no tiene cabecera: tiene una franja marrón con la fecha, y ya. El
   logotipo va dentro del hero, no arriba. Así que en la landing el <header>
   entero no llega ni a imprimirse (ver header.php) y aquí solo queda la
   franja.
   ------------------------------------------------------------------------- */
.tpl-disfruta #page {
	position: relative;
}

.tpl-disfruta .site-topbar {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 60;
	width: min(100%, var(--dp-lienzo));
	background: var(--dp-marron);
}

/* Lo que queda a los lados del plano, del color del fondo de la página. */
body.tpl-disfruta {
	background: var(--dp-crema);
}

.tpl-disfruta .site-topbar p {
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc(29.5 * var(--u));
	padding: 0 var(--dp-margen);
	color: var(--dp-crema-clara);
	font-family: var(--dp-geo);
	font-size: max(12px, calc(17.8 * var(--u)));
	font-weight: 700;
	letter-spacing: 0.07em;
	text-align: center;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   5. Móvil y tablet

   Por debajo de 1024 el plano de 1025 no cabe. La unidad pasa a mirar una
   pantalla de 430, las retículas de dos y tres columnas se ponen en una y —lo
   más importante— las fotos dejan de ser fondo.

   En el diseño el texto va ENCIMA de la foto porque hay sitio de sobra a un
   lado. En un móvil no lo hay: el titular caía sobre la cara de la mujer y no
   se leía ni el uno ni la otra. Así que la foto sale del fondo, se pone en el
   flujo y el texto va debajo, sobre el crema. Es la misma página contada de
   arriba abajo en vez de por capas.
   ------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
	:root {
		/*
		 * Con tope arriba y abajo: en una tablet de 768 sin tope el texto se
		 * iría a 32px, y encogiendo el plano de 1025 se quedaba en 10px. El
		 * mínimo de 1px es el que deja la letra corriente en 15px, que es el
		 * suelo para leer cómodamente en la mano.
		 */
		--u: clamp(1px, calc(100vw / 430), 1.15px);
		--dp-margen: calc(22 * var(--u));
		--dp-lienzo: 100%;
	}

	.dp-s,
	.dp-claim {
		width: 100%;
	}

	.dp-s {
		padding-block: calc(46 * var(--u));
	}

	/* Las alturas del plano no valen apilado: manda el contenido. */
	.dp-hero,
	.dp-tepasa,
	.dp-cambia,
	.dp-cuerpo,
	.dp-encuentros,
	.dp-precios {
		height: auto;
		min-height: 0;
	}

	/*
	 * La foto sigue siendo fondo, con el texto encima, igual que en el diseño.
	 * Lo que cambia es que en vez de conservar su encuadre original se recorta
	 * al alto que pida el texto, y un velo garantiza que se lea.
	 *
	 * Se probó lo contrario —sacar la foto al flujo y poner el texto debajo— y
	 * era peor de las dos maneras: la página se iba a catorce mil píxeles y
	 * quedaba una ristra de foto, texto, foto, texto sin ninguna gracia.
	 */
	.dp-s > img[class$="__fondo"] {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		object-fit: cover;
	}

	/*
	 * Cada foto se ancla por donde está ella: al recortar a vertical, con el
	 * encuadre centrado se quedaba media mujer fuera o descabezada.
	 */
	.dp-hero__fondo {
		object-position: 74% top;
	}

	.dp-tepasa__fondo {
		object-position: 26% center;
	}

	.dp-cambia__fondo {
		object-position: 26% center;
	}

	.dp-precios__fondo {
		object-position: 22% center;
	}

	/*
	 * El velo. No es un lavado plano: arriba deja ver la foto y va cerrando
	 * hacia el crema por donde cae el texto, que es lo que hace que se lea sin
	 * tener que renunciar a la imagen.
	 */
	.dp-hero::after,
	.dp-tepasa::after,
	.dp-cambia::after,
	.dp-precios::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
	}

	.dp-hero::after {
		background: linear-gradient(
			180deg,
			rgba(249, 241, 236, 0) 0%,
			rgba(249, 241, 236, 0.12) 26%,
			rgba(249, 241, 236, 0.82) 44%,
			var(--dp-crema) 58%
		);
	}

	.dp-tepasa::after,
	.dp-cambia::after,
	.dp-precios::after {
		background: linear-gradient(
			180deg,
			rgba(249, 241, 236, 0.34) 0%,
			rgba(249, 241, 236, 0.88) 30%,
			rgba(249, 241, 236, 0.95) 100%
		);
	}

	/* Sobre foto, el texto necesita más aire alrededor que sobre el crema. */
	.dp-tepasa,
	.dp-cambia,
	.dp-cuerpo,
	.dp-encuentros,
	.dp-precios {
		padding-block: calc(50 * var(--u));
	}

	/* --- Hero: una portada, con la foto arriba y el título apoyado abajo --- */
	.dp-hero {
		display: flex;
		align-items: flex-end;
		min-height: 70vh;
		min-height: 70svh;
		padding-block: calc(140 * var(--u)) calc(36 * var(--u));
	}

	.dp-hero__inner {
		height: auto;
		padding-inline: var(--dp-margen);
	}

	.dp-hero__inner > * {
		position: static;
		left: auto;
		margin: 0 0 calc(22 * var(--u));
	}

	.dp-hero__inner > *:last-child {
		margin-bottom: 0;
	}

	.dp-hero__ante {
		color: var(--dp-tinta);
		text-shadow: none;
	}

	/* A ancho completo el logotipo se comía la pantalla entera. */
	.dp-hero__marca {
		width: min(100%, calc(360 * var(--u)));
	}

	.dp-hero__marca img,
	.dp-hero__entradilla {
		width: 100%;
		max-width: none;
	}

	.dp-hero__firma {
		width: calc(130 * var(--u));
	}

	/* --- La banda dorada, que en dos líneas no cabía en su altura fija --- */
	.dp-claim {
		height: auto;
		padding-block: calc(9 * var(--u));
	}

	/* --- Tres y dos columnas pasan a una --- */
	.dp-problema__cols,
	.dp-disciplina__cols,
	.dp-fases,
	.dp-parati__cols,
	.dp-encuentros__cols,
	.dp-incluye__cols,
	.dp-sobremi__cols,
	.dp-tarifas {
		grid-template-columns: 1fr;
		gap: calc(30 * var(--u));
	}

	/* Las tarifas se colocan por columnas: apiladas, hay que decirlo aparte. */
	.dp-tarifas {
		grid-auto-flow: row;
	}

	.dp-h2,
	.dp-disciplina__titulo,
	.dp-parati__col .dp-h2,
	.dp-incluye__cols .dp-h2,
	.dp-sobremi__cols .dp-h2 {
		text-align: center;
	}

	/* Sin vecina a la derecha, la flecha entre fases sobra. */
	.dp-fase:not(:last-child) .dp-badge::after {
		content: none;
	}

	.dp-fase__foto {
		height: calc(300 * var(--u));
	}

	/* La foto del móvil se va al final: entre las dos listas partiría el par. */
	.dp-parati__foto {
		order: 3;
		width: min(100%, calc(260 * var(--u)));
		margin-inline: auto;
	}

	.dp-tepasa__caja,
	.dp-cambia__lista,
	.dp-incluye__foto,
	.dp-sobremi__foto {
		width: 100%;
		max-width: none;
		margin-inline: auto;
	}

	/* --- ¿Te pasa esto? --- */
	.dp-tepasa__inner {
		align-items: stretch;
		padding-inline: var(--dp-margen);
	}

	.dp-tepasa__titulo {
		margin-left: 0;
		text-align: center;
	}

	.dp-tepasa__caja {
		padding: calc(22 * var(--u)) calc(24 * var(--u)) calc(22 * var(--u)) calc(40 * var(--u));
	}

	/* --- El problema --- */

	/*
	 * En el plano las dos columnas van sangradas 150 unidades. Apiladas, esa
	 * sangría dejaba media pantalla en blanco a la izquierda y partía las frases
	 * a la mitad.
	 */
	.dp-problema__cols {
		padding-left: 0;
		justify-content: stretch;
	}

	/*
	 * Los saltos de la entradilla están puestos para el ancho del plano. En un
	 * móvil dejaban una línea suelta con dos palabras: aquí el texto fluye.
	 */
	.dp-hero__entradilla br {
		display: none;
	}

	/* --- Lo que cambia --- */
	.dp-cambia__lista {
		margin-top: calc(28 * var(--u));
	}

	.dp-btn {
		width: 100%;
		padding-inline: calc(16 * var(--u));
	}

	/*
	 * Mínimos de lectura. Encogiendo el plano, la letra pequeña del diseño se
	 * quedaba en 11-13px, que en la mano no se lee. Lo que es letra menuda
	 * puede quedarse en 13; la carta de Evelyn es un texto largo y necesita 15.
	 */
	.dp-encuentros__nota,
	.dp-tarifa__letra {
		font-size: max(13px, calc(14 * var(--u)));
	}

	.dp-precios__nota,
	.dp-sobremi__carta p {
		font-size: max(15px, calc(14 * var(--u)));
	}

	.dp-ante {
		font-size: max(14px, calc(15 * var(--u)));
	}
}

/* -------------------------------------------------------------------------
   6. Móvil estrecho

   Por debajo de 380 (un iPhone SE) la unidad ya no baja más, así que lo que
   toca es quitar aire y dejar que los titulares grandes rompan de línea.
   ------------------------------------------------------------------------- */
@media (max-width: 379.98px) {
	:root {
		--dp-margen: calc(16 * var(--u));
	}

	.dp-h2 {
		font-size: calc(36 * var(--u));
	}

	.dp-tarifa__nombre,
	.dp-tarifa__cifra {
		font-size: calc(29 * var(--u));
	}

	/* Las pastillas largas partían la línea fuera de la pantalla. */
	.dp-pastillas li {
		white-space: normal;
	}
}

/* Quien pide menos movimiento, no lo tiene. */
@media (prefers-reduced-motion: reduce) {
	.dp-btn {
		transition: none;
	}

	.dp-btn:hover,
	.dp-btn:focus-visible {
		transform: none;
	}
}