/*
 * Landings por rubro de Agendate (adonde llegan los anuncios). Sin Elementor ni el tema: esta hoja es todo lo que
 * las viste. Visten como el formulario de reserva y el directorio (misma tinta, mismo azul, Poppins en los títulos):
 * quien llega por un anuncio, mira el teléfono de la portada y después reserva, no cambia de sitio.
 * Los valores viven en el bloque de tokens de abajo (ver MARCA.md); ninguna regla escribe uno a mano.
 *
 * 360:  una columna con 16 de margen, sin caja blanca de fondo (lo blanco es cada pieza); el botón de crear la cuenta
 *       queda fijo abajo.
 * 768:  portada centrada; cada recorte con su texto al lado; pasos de a tres; avisos y piezas del rubro de a dos; el
 *       botón pasa a la barra de arriba.
 * 1280: contenido de hasta 1240; portada y problema en dos columnas; recortes y piezas del rubro de a tres.
 */

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(../fonts/roboto-latin.woff2) format('woff2');
}

.agdt-landing {
	/* Marca: los valores del formulario de reserva (tests/test-landing.php los compara con su hoja). */
	--ld-tinta: #12233D;
	--ld-azul: #2283CF;
	--ld-azul-tinta: #1a6fb3;
	--ld-azul-hover: #1c72b6;
	--ld-azul-suave: #e3effa;
	--ld-suelo: #EDF2FA;
	--ld-suelo-velo: rgba(237, 242, 250, .94);
	--ld-papel: #ffffff;
	--ld-gris: #4a5a70;
	--ld-tenue: #6f7d92;
	--ld-linea: #d6deeb;
	--ld-nube: #b9c4d4;
	--ld-ok: #177a4d;
	--ld-mal: #b42318;
	--ld-mal-suave: #fdeceb;
	--ld-wsp: #128C4B;
	/* La pantalla de WhatsApp de los avisos (su barra y el fondo de su chat): sólo para dibujarla. */
	--ld-wsp-barra: #008069;
	--ld-wsp-fondo: #efeae2;
	--ld-velo: rgba(18, 35, 61, .55);
	--ld-tinta-linea: rgba(185, 196, 212, .4);
	/* El panel del negocio (los valores de su piel, agendate-piel.css): sólo para dibujar su vista previa. */
	--ld-pl-accent: #0d9488;
	--ld-pl-accent-ink: #0f766e;
	--ld-pl-accent-weak: rgba(13, 148, 136, .10);
	--ld-pl-soft: #f4f6f9;
	--ld-pl-border: #e7e9ee;
	--ld-pl-hair: #eef0f4;
	--ld-pl-text: #101828;
	--ld-pl-sub: #667085;
	--ld-pl-muted: #98a2b3;
	--ld-pl-ink-2: #344054;
	--ld-pl-r-panel: 20px;
	--ld-pl-r-item: 12px;
	/* Forma. */
	--ld-r-tarjeta: 28px;
	--ld-r-pieza: 20px;
	--ld-r-dia: 18px;
	--ld-r-chico: 14px;
	--ld-r-burbuja: 20px 20px 20px 6px;
	--ld-r-wsp: 4px 14px 14px 14px;
	--ld-r-pildora: 99px;
	--ld-r-redondo: 50%;
	/* El teléfono: las medidas de un iPhone de 6,1 pulgadas llevadas a una pantalla de 390 de ancho (alto 844, marco 19,
	   isla 126 por 37, barra de la hora 54, radio de pantalla 55). Cada teléfono las achica todas con su escala. */
	--ld-r-telefono: 74px;
	--ld-r-pantalla: 55px;
	--ld-tel-marco: #0b1524;
	--ld-tel-canto: #3b4a63;
	--ld-tel-borde: 19px;
	--ld-tel-estado: 54px;
	--ld-sombra: 0 1px 2px rgba(18, 35, 61, .06), 0 10px 26px rgba(18, 35, 61, .07);
	--ld-sombra-flota: 0 30px 60px -28px rgba(18, 35, 61, .5), 0 2px 6px rgba(18, 35, 61, .08);
	--ld-sombra-boton: 0 14px 26px -14px rgba(34, 131, 207, .9);
	/* Densidad. */
	--ld-ancho: 1240px;
	--ld-margen: 16px;
	--ld-toque: 44px;
	--ld-boton: 56px;
	--ld-seccion: clamp(56px, 9vw, 112px);
	--ld-logo: 176px;
	/* El teléfono de la portada: la pantalla se dibuja a 390 de ancho y se achica a esta escala. */
	--ld-escala: .76;
	/* Los recortes de la pantalla real: cuánto del formulario se ve, medido sin achicar (el mismo de App/Muestra.php). */
	--ld-recorte: 380px;
	/* Letra. */
	--ld-familia-titulo: 'Poppins', 'Avenir Next', 'Segoe UI', sans-serif;
	--ld-familia: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--ld-familia-telefono: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Roboto', sans-serif;
	--ld-letra-titular: clamp(38px, 9.4vw, 64px);
	--ld-letra-seccion: clamp(27px, 5.6vw, 42px);
	--ld-letra-subtitulo: 20px;
	--ld-letra-cifra: 24px;
	--ld-letra-bajada: clamp(18px, 2.3vw, 21px);
	--ld-letra-base: 17px;
	--ld-letra-pieza: 16px;
	--ld-letra-nota: 14px;
	--ld-letra-mini: 12px;
	/* Movimiento. */
	--ld-sale: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---------- La hoja ---------- */

body.agdt-landing {
	margin: 0;
	background: var(--ld-suelo);
	color: var(--ld-tinta);
	font-family: var(--ld-familia);
	font-size: var(--ld-letra-base);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}

/* La base va sin peso (:where): cualquier regla de una pieza le gana, esté antes o después. */
:where(.agdt-landing) *,
:where(.agdt-landing) *::before,
:where(.agdt-landing) *::after {
	box-sizing: border-box;
}

:where(.agdt-landing) :where(h1, h2, h3, p, ul, ol, figure) {
	margin: 0;
	padding: 0;
}

:where(.agdt-landing) :where(ul, ol) {
	list-style: none;
}

:where(.agdt-landing) :where(h1, h2, h3) {
	font-family: var(--ld-familia-titulo);
	font-weight: 600;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

:where(.agdt-landing) :where(a, button) {
	touch-action: manipulation;
}

.agdt-landing :focus-visible {
	outline: 2px solid var(--ld-azul);
	outline-offset: 3px;
}

.agdt-landing [hidden] {
	display: none !important;
}

.agdt-landing svg {
	display: block;
	flex: none;
}

/* El contenido mide hasta 1240, el ancho de siempre del sitio. */
.ld-ancho {
	width: 100%;
	max-width: calc(var(--ld-ancho) + 2 * var(--ld-margen));
	margin-inline: auto;
	padding-inline: var(--ld-margen);
}

/* Lo que se lee pero no se dibuja (la descripción del teléfono para quien no lo ve). */
.ld-leido {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- La barra ---------- */

.ld-barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-block: calc(14px + env(safe-area-inset-top, 0px)) 14px;
}

/* Se alinea el dibujo del logo, no su caja: la imagen trae aire transparente a la izquierda (4,5 % de su ancho). */
.ld-logo {
	display: flex;
	align-items: center;
	min-height: var(--ld-toque);
	margin-left: calc(var(--ld-logo) * -0.045);
}

.ld-logo img {
	display: block;
	width: var(--ld-logo);
	max-width: none;
	height: auto;
}

.ld-barra-acciones {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ld-enlace {
	display: inline-flex;
	align-items: center;
	min-height: var(--ld-toque);
	padding-inline: 12px;
	margin-right: -12px;
	color: var(--ld-tinta);
	font-size: var(--ld-letra-pieza);
	font-weight: 500;
	text-decoration: none;
}

.ld-enlace:hover {
	color: var(--ld-azul-tinta);
}

/* ---------- Botones ---------- */

/* El principal: la píldora del formulario de reserva, con el texto centrado y la flecha en su círculo. */
.ld-boton {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ld-boton);
	padding: 0 64px 0 32px;
	border: 0;
	border-radius: var(--ld-r-pildora);
	background: var(--ld-azul);
	color: var(--ld-papel);
	box-shadow: var(--ld-sombra-boton);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-base);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 140ms var(--ld-sale), background-color 140ms ease;
}

.ld-boton:hover {
	background: var(--ld-azul-hover);
}

.ld-boton:active {
	transform: scale(.98);
}

.ld-boton-flecha {
	position: absolute;
	right: 8px;
	top: 50%;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-papel);
	color: var(--ld-azul-tinta);
}

/* El secundario: con borde, sin sombra ni flecha (un solo botón lleno por pantalla). */
.ld-boton-claro {
	padding-inline: 28px;
	border: 1.5px solid var(--ld-linea);
	background: var(--ld-papel);
	color: var(--ld-tinta);
	box-shadow: none;
}

.ld-boton-claro:hover {
	background: var(--ld-papel);
	border-color: var(--ld-nube);
}

.ld-boton-chico {
	display: none;
	min-height: var(--ld-toque);
	padding-inline: 22px;
	box-shadow: none;
	font-size: var(--ld-letra-pieza);
}

/* ---------- La portada ---------- */

.ld-portada {
	display: grid;
	gap: 40px;
	padding-block: 20px 56px;
}

.ld-etiqueta {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border-radius: var(--ld-r-pildora);
	background: var(--ld-azul-suave);
	color: var(--ld-azul-tinta);
	font-size: var(--ld-letra-nota);
	font-weight: 500;
	line-height: 1.3;
}

.ld-titular {
	margin-top: 18px;
	font-size: var(--ld-letra-titular);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.03em;
}

.ld-bajada {
	max-width: 33em;
	margin-top: 18px;
	color: var(--ld-gris);
	font-size: var(--ld-letra-bajada);
	line-height: 1.5;
	text-wrap: pretty;
}

.ld-acciones {
	display: grid;
	gap: 12px;
	margin-top: 28px;
}

.ld-nota {
	margin-top: 14px;
	color: var(--ld-gris);
	font-size: var(--ld-letra-nota);
}

/* El teléfono: adentro corre el formulario de reserva (la muestra). El círculo de fondo comparte su centro. */
.ld-portada-muestra {
	position: relative;
	display: grid;
	place-items: center;
}

.ld-portada-muestra::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(100%, 540px);
	aspect-ratio: 1;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-azul-suave);
	transform: translate(-50%, -50%);
}

.ld-telefono {
	/* --ld-tel-k: a cuánto se achica este teléfono. --ld-tel-alto: el alto de su pantalla, medido a 390 de ancho. */
	--ld-tel-k: var(--ld-escala);
	--ld-tel-alto: 844;
	position: relative;
	width: calc((390px + 2 * var(--ld-tel-borde)) * var(--ld-tel-k));
	padding: calc(var(--ld-tel-borde) * var(--ld-tel-k));
	border-radius: calc(var(--ld-r-telefono) * var(--ld-tel-k));
	background: var(--ld-tel-marco);
	box-shadow: inset 0 0 0 calc(4px * var(--ld-tel-k)) var(--ld-tel-canto), var(--ld-sombra-flota);
}

/* Los botones del costado: a la izquierda el de acción y los dos de volumen; a la derecha el de encendido. */
.ld-telefono::before,
.ld-telefono::after {
	content: '';
	position: absolute;
	width: calc(4px * var(--ld-tel-k));
}

.ld-telefono::before {
	left: calc(-3px * var(--ld-tel-k));
	top: calc(168px * var(--ld-tel-k));
	height: calc(226px * var(--ld-tel-k));
	background: linear-gradient(to bottom, var(--ld-tel-canto) 0 16%, transparent 16% 31%, var(--ld-tel-canto) 31% 61%, transparent 61% 70%, var(--ld-tel-canto) 70% 100%);
}

.ld-telefono::after {
	right: calc(-3px * var(--ld-tel-k));
	top: calc(268px * var(--ld-tel-k));
	height: calc(106px * var(--ld-tel-k));
	background: var(--ld-tel-canto);
}

.ld-pantalla {
	position: relative;
	z-index: 1;
	width: calc(390px * var(--ld-tel-k));
	height: calc(var(--ld-tel-alto) * 1px * var(--ld-tel-k));
	overflow: hidden;
	border-radius: calc(var(--ld-r-pantalla) * var(--ld-tel-k));
	background: var(--ld-suelo);
}

/* Lo que va en la pantalla se dibuja a 390 de ancho, como en el teléfono de verdad, y se achica entero. */
.ld-lienzo {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 390px;
	height: calc(var(--ld-tel-alto) * 1px);
	transform: scale(var(--ld-tel-k));
	transform-origin: 0 0;
}

/* La barra de arriba: la hora, la isla, la señal y la batería. */
.ld-estado {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--ld-tel-estado);
	padding: 6px 32px 0 50px;
	color: var(--ld-tinta);
	font-family: var(--ld-familia-telefono);
	font-size: var(--ld-letra-base);
	font-weight: 600;
	flex: none;
}

.ld-estado span {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ld-isla {
	position: absolute;
	left: 50%;
	top: 11px;
	width: 126px;
	height: 37px;
	margin-left: -63px;
	border-radius: var(--ld-r-pildora);
	background: var(--ld-tel-marco);
}

/* La raya de abajo. */
.ld-inicio {
	position: absolute;
	left: 50%;
	bottom: 8px;
	width: 136px;
	height: 5px;
	margin-left: -68px;
	border-radius: var(--ld-r-pildora);
	background: var(--ld-tinta);
}

.ld-lienzo iframe {
	display: block;
	width: 390px;
	height: 790px;
	border: 0;
	pointer-events: none;
	flex: none;
}

/* ---------- Avisos de WhatsApp ---------- */

.ld-aviso {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 18px;
	border-radius: var(--ld-r-pieza);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra);
}

.ld-aviso-icono {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-wsp);
	color: var(--ld-papel);
	flex: none;
}

/* Dos niveles de letra: el título del aviso, y todo lo que lo acompaña. */
.ld-aviso p {
	display: grid;
	gap: 2px;
	min-width: 0;
	color: var(--ld-gris);
	font-size: var(--ld-letra-nota);
	line-height: 1.4;
}

.ld-aviso b {
	color: var(--ld-tinta);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-pieza);
	font-weight: 600;
}

.ld-aviso small {
	color: var(--ld-azul-tinta);
	font-size: var(--ld-letra-nota);
	font-weight: 500;
}

/* El que acompaña al teléfono: aparece cuando la visita de ejemplo queda confirmada. Sólo donde hay lugar al costado. */
.ld-aviso-flota {
	display: none;
	position: absolute;
	z-index: 2;
	left: 0;
	bottom: 14%;
	width: 290px;
	box-shadow: var(--ld-sombra-flota);
	transition: opacity 360ms ease, transform 520ms var(--ld-sale);
}

.is-esperando .ld-aviso-flota {
	opacity: 0;
	transform: translateY(14px) scale(.96);
}

/* ---------- Secciones ---------- */

.ld-seccion {
	padding-block: var(--ld-seccion);
}

/* Dos secciones seguidas sobre el mismo fondo comparten el aire: no se suma el de las dos. */
.ld-seccion + .ld-seccion {
	padding-top: 0;
}

.ld-banda {
	padding-block: var(--ld-seccion);
	background: var(--ld-papel);
}

.ld-titulo {
	font-size: var(--ld-letra-seccion);
	line-height: 1.12;
}

.ld-subtitulo {
	color: var(--ld-tinta);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-subtitulo);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

/* (text-wrap: pretty: que un párrafo no termine con una palabra sola en el último renglón.) */
.ld-parrafo {
	max-width: 34em;
	margin-top: 16px;
	color: var(--ld-gris);
	font-size: var(--ld-letra-bajada);
	line-height: 1.5;
	text-wrap: pretty;
}

/* El encabezado de una sección que muestra piezas a lo ancho: centrado sobre ellas. */
.ld-encabezado {
	display: grid;
	justify-items: center;
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
}

.ld-centro {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

.ld-dos {
	display: grid;
	gap: 40px;
}

/* Las caras: quién escribe, quién recibe. */
.ld-cara {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-azul-suave);
	color: var(--ld-azul-tinta);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-pieza);
	font-weight: 600;
	flex: none;
}

.ld-cara-grupo {
	background: var(--ld-tinta);
	color: var(--ld-papel);
}

/* Los números de una secuencia (el recorrido, los pasos). */
.ld-numero {
	display: grid;
	place-items: center;
	width: var(--ld-toque);
	height: var(--ld-toque);
	border-radius: var(--ld-r-redondo);
	background: var(--ld-azul-suave);
	color: var(--ld-azul-tinta);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-subtitulo);
	font-weight: 600;
	flex: none;
}

/* ---------- El problema: los mensajes de todos los días ---------- */

.ld-dolores {
	display: grid;
	gap: 12px;
	margin-top: 24px;
}

.ld-dolores li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--ld-gris);
}

.ld-dolores li span {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	margin-top: 1px;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-mal-suave);
	color: var(--ld-mal);
	flex: none;
}

/* La conversación flota sobre su círculo, como el teléfono de la portada. */
.ld-conversa-escena {
	position: relative;
	display: grid;
	place-items: center;
}

.ld-conversa-escena::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(100%, 480px);
	aspect-ratio: 1;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-azul-suave);
	transform: translate(-50%, -50%);
}

.ld-conversa {
	position: relative;
	width: 100%;
	max-width: 440px;
	overflow: hidden;
	border-radius: var(--ld-r-tarjeta);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra-flota);
}

.ld-conversa header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--ld-linea);
}

.ld-conversa header p {
	display: grid;
	min-width: 0;
	color: var(--ld-gris);
	font-size: var(--ld-letra-nota);
	line-height: 1.35;
}

.ld-conversa header b {
	color: var(--ld-tinta);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-pieza);
	font-weight: 600;
}

/* Un solo eje, todos del mismo ancho, a ritmo parejo. */
.ld-chat {
	display: grid;
	gap: 10px;
	padding: 16px;
	background: var(--ld-suelo);
}

.ld-burbuja {
	display: flex;
	align-items: flex-end;
	gap: 8px;
}

.ld-burbuja .ld-cara {
	width: 32px;
	height: 32px;
	background: var(--ld-papel);
	font-size: var(--ld-letra-nota);
}

.ld-burbuja p {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 2px 12px;
	flex: 1;
	min-width: 0;
	padding: 10px 14px;
	border-radius: var(--ld-r-burbuja);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra);
}

.ld-burbuja b {
	grid-column: 1 / -1;
	color: var(--ld-azul-tinta);
	font-size: var(--ld-letra-nota);
	font-weight: 500;
}

.ld-burbuja p span {
	font-size: var(--ld-letra-base);
	line-height: 1.35;
}

.ld-burbuja time {
	color: var(--ld-tenue);
	font-size: var(--ld-letra-nota);
}

/* «Escribiendo…»: los mensajes no terminan. */
.ld-escribiendo {
	display: flex;
	gap: 5px;
	width: fit-content;
	margin-left: 40px;
	padding: 14px 16px;
	border-radius: var(--ld-r-burbuja);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra);
}

.ld-escribiendo i {
	width: 7px;
	height: 7px;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-nube);
	animation: ld-escribe 1.3s infinite ease-in-out;
}

.ld-escribiendo i:nth-child(2) {
	animation-delay: .16s;
}

.ld-escribiendo i:nth-child(3) {
	animation-delay: .32s;
}

@keyframes ld-escribe {
	0%, 60%, 100% { transform: none; opacity: .55; }
	30% { transform: translateY(-4px); opacity: 1; }
}

/* ---------- El recorrido: tres recortes de la pantalla real ---------- */

.ld-recorrido {
	display: grid;
	gap: 20px;
	margin-top: 40px;
}

/* (align-content: start: el texto de cada tarjeta arranca a la misma altura, tenga uno o dos renglones.) */
.ld-tramo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	gap: 18px;
	padding: 12px 12px 22px;
	border-radius: var(--ld-r-tarjeta);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra);
}

/* La ventana por la que se ve el formulario: se dibuja a 390 de ancho y se achica al ancho de la tarjeta (--ld-k lo
   ajusta landing.js; sin él queda en la medida del teléfono). */
.ld-recorte {
	width: 100%;
	min-width: 0;
	max-width: 390px;
	margin-inline: auto;
}

.ld-recorte-ventana {
	--ld-k: .84;
	position: relative;
	height: calc(var(--ld-recorte) * var(--ld-k));
	overflow: hidden;
	border-radius: var(--ld-r-pieza);
	background: var(--ld-suelo);
}

/* Lo que queda cortado abajo se funde con el fondo: se entiende que la pantalla sigue. */
.ld-recorte-ventana::after {
	content: '';
	position: absolute;
	inset: auto 0 0;
	height: 36px;
	background: linear-gradient(to bottom, transparent, var(--ld-suelo));
	pointer-events: none;
}

.ld-recorte-ventana iframe {
	display: block;
	width: 390px;
	height: 780px;
	border: 0;
	transform: scale(var(--ld-k));
	transform-origin: 0 0;
	pointer-events: none;
}

.ld-tramo-texto {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding-inline: 8px;
}

.ld-tramo-texto p {
	display: grid;
	gap: 4px;
	color: var(--ld-gris);
}

/* ---------- Los avisos: dos teléfonos con el chat de WhatsApp ---------- */

/* Tienen que leerse como WhatsApp de un vistazo: por eso van dentro de un teléfono, con su barra y su fondo. */
.ld-avisos {
	display: grid;
	gap: 40px;
}

.ld-avisos-texto {
	display: grid;
	justify-items: center;
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
}

.ld-chats {
	display: grid;
	justify-items: center;
	gap: 32px;
}

.ld-chat-caso {
	display: grid;
	justify-items: center;
	gap: 16px;
}

/* El mismo teléfono de la portada, más chico: adentro no va el formulario sino el chat. */
.ld-telefono-chat,
.ld-telefono-cliente {
	--ld-tel-k: .74;
	--ld-tel-alto: 844;
}

/* (La letra es la de un teléfono de verdad: achicada con el teléfono sigue leyéndose.) */
.ld-wsp {
	background: var(--ld-wsp-fondo);
	font-family: var(--ld-familia-telefono);
	font-size: var(--ld-letra-pieza);
	line-height: 1.34;
}

/* La barra de la hora toma el verde de la de WhatsApp: son una sola. */
.ld-wsp .ld-estado {
	background: var(--ld-wsp-barra);
	color: var(--ld-papel);
}

.ld-wsp-barra {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px 12px 8px;
	background: var(--ld-wsp-barra);
	color: var(--ld-papel);
}

/* La foto de la cuenta: el isotipo original de Agendate (assets/img/isotipo-agendate.png), no una letra dibujada. */
.ld-wsp-cara {
	display: block;
	width: 42px;
	height: 42px;
	border-radius: var(--ld-r-redondo);
	flex: none;
}

.ld-wsp-barra p {
	display: grid;
	font-size: var(--ld-letra-nota);
	line-height: 1.3;
}

.ld-wsp-barra b {
	font-size: var(--ld-letra-base);
	font-weight: 600;
}

.ld-wsp-hilo {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	min-height: 0;
	padding: 14px 12px;
}

.ld-wsp-dia {
	align-self: center;
	padding: 5px 14px;
	border-radius: var(--ld-r-chico);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra);
	color: var(--ld-gris);
	font-size: var(--ld-letra-nota);
}

/* Un mensaje que llega: blanco, a la izquierda, con su hora. Dos niveles de letra: el mensaje y la hora. */
.ld-wsp-globo {
	display: grid;
	gap: 2px;
	max-width: 94%;
	padding: 9px 12px 6px;
	border-radius: var(--ld-r-wsp);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra);
}

/* (pre-line: la plantilla trae sus renglones, y se respetan.) */
.ld-wsp-globo span {
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.ld-wsp-globo time {
	justify-self: end;
	color: var(--ld-tenue);
	font-size: var(--ld-letra-nota);
}

.ld-wsp-pie {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px 30px;
	color: var(--ld-gris);
	flex: none;
}

.ld-wsp-pie span {
	display: flex;
	flex: 1;
	align-items: center;
	min-height: 42px;
	padding-inline: 18px;
	border-radius: var(--ld-r-pildora);
	background: var(--ld-papel);
	color: var(--ld-tenue);
}

.ld-wsp-pie i {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-wsp-barra);
	color: var(--ld-papel);
	flex: none;
}

.ld-chat-quien {
	display: grid;
	justify-items: center;
	gap: 2px;
	max-width: 280px;
	color: var(--ld-gris);
	font-size: var(--ld-letra-nota);
	text-align: center;
}

.ld-chat-quien b {
	color: var(--ld-tinta);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-pieza);
	font-weight: 600;
}

/* ---------- Lo que hace por su cuenta quien reservó: la pantalla «Cuenta de clientes» ---------- */

/* Copiada de la de verdad (sus pestañas, sus rótulos, sus botones), con los colores del panel. Va dentro del teléfono. */
.ld-cp {
	background: var(--ld-pl-soft);
	color: var(--ld-pl-text);
	font-size: var(--ld-letra-pieza);
	line-height: 1.35;
}

.ld-cp .ld-estado {
	background: var(--ld-papel);
}

.ld-cp-sitio {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 20px 12px;
	background: var(--ld-papel);
	color: var(--ld-tinta);
}

.ld-cp-sitio img {
	width: 44px;
	height: 44px;
}

.ld-cp-cuerpo {
	display: grid;
	gap: 12px;
	padding: 18px 20px;
}

.ld-cp-persona {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ld-cp-persona p {
	display: grid;
	flex: 1;
	min-width: 0;
	color: var(--ld-pl-sub);
	font-size: var(--ld-letra-nota);
}

.ld-cp-persona b {
	color: var(--ld-pl-text);
	font-size: var(--ld-letra-base);
	font-weight: 500;
}

.ld-cp-foto,
.ld-cp-salir {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-pl-border);
	color: var(--ld-pl-muted);
	flex: none;
}

.ld-cp-salir {
	border: 1px solid var(--ld-pl-border);
	border-radius: var(--ld-pl-r-item);
	background: var(--ld-papel);
	color: var(--ld-pl-ink-2);
}

.ld-cp-tira {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px;
	padding: 4px;
	border-radius: var(--ld-r-chico);
	background: var(--ld-pl-border);
}

.ld-cp-tira span {
	display: grid;
	place-items: center;
	min-height: 42px;
	border-radius: var(--ld-pl-r-item);
	color: var(--ld-pl-sub);
	font-weight: 500;
}

.ld-cp-tira .is-activo {
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra);
	color: var(--ld-pl-accent-ink);
}

.ld-cp-tarjeta {
	padding: 4px 16px;
	border-radius: var(--ld-pl-r-panel);
	background: var(--ld-papel);
}

.ld-cp-tarjeta p {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 46px;
}

.ld-cp-tarjeta p + p,
.ld-cp-acciones {
	border-top: 1px solid var(--ld-pl-hair);
}

.ld-cp-tarjeta small {
	color: var(--ld-pl-sub);
	font-size: var(--ld-letra-mini);
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.ld-cp-tarjeta p b {
	color: var(--ld-pl-accent-ink);
	font-weight: 500;
}

.ld-cp-tarjeta p i {
	padding: 3px 12px;
	border-radius: var(--ld-r-pildora);
	background: var(--ld-pl-accent-weak);
	color: var(--ld-pl-accent-ink);
	font-size: var(--ld-letra-nota);
	font-style: normal;
	font-weight: 500;
}

/* Reagendar, cancelar, pagar: lo que la persona resuelve sola. */
.ld-cp-acciones {
	display: flex;
	gap: 8px;
	padding-block: 12px;
}

.ld-cp-acciones span {
	display: grid;
	flex: 1;
	place-items: center;
	min-height: 44px;
	border: 1px solid var(--ld-pl-border);
	border-radius: var(--ld-pl-r-item);
	background: var(--ld-papel);
	color: var(--ld-pl-ink-2);
	font-size: var(--ld-letra-nota);
	font-weight: 500;
}

.ld-cp-acciones .is-principal {
	border-color: var(--ld-pl-accent);
	background: var(--ld-pl-accent);
	color: var(--ld-papel);
	letter-spacing: .03em;
	text-transform: uppercase;
}

/* ---------- El panel del negocio: su zona de trabajo ---------- */

/* Se dibuja con los valores de la piel del panel (--ld-pl-*): es otra pantalla que la del cliente, y se nota. */
.ld-panel-escena {
	position: relative;
	margin-top: 40px;
}

.ld-panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	overflow: hidden;
	border-radius: var(--ld-r-tarjeta);
	background: var(--ld-pl-soft);
	box-shadow: var(--ld-sombra-flota);
	color: var(--ld-pl-text);
	font-size: var(--ld-letra-nota);
	line-height: 1.4;
}

.ld-panel-menu {
	display: none;
	align-content: start;
	gap: 2px;
	padding: 22px 12px;
	border-right: 1px solid var(--ld-pl-hair);
	background: var(--ld-papel);
}

.ld-panel-menu img {
	width: 124px;
	height: auto;
	margin: 0 0 18px 6px;
}

.ld-panel-item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 42px;
	padding-inline: 12px;
	border-radius: var(--ld-pl-r-item);
	color: var(--ld-pl-ink-2);
}

.ld-panel-item svg {
	color: var(--ld-pl-sub);
}

.ld-panel-item.is-activo {
	background: var(--ld-pl-accent-weak);
	color: var(--ld-pl-accent-ink);
	font-weight: 500;
}

.ld-panel-item.is-activo svg {
	color: inherit;
}

.ld-panel-cuerpo {
	min-width: 0;
	padding: 18px 14px 44px;
}

.ld-panel-barra {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ld-panel-barra b {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-right: auto;
	color: var(--ld-pl-ink-2);
	font-size: var(--ld-letra-cifra);
	font-weight: 500;
}

.ld-panel-barra b i,
.ld-panel-estado i {
	padding: 3px 10px;
	border-radius: var(--ld-r-pildora);
	background: var(--ld-pl-accent-weak);
	color: var(--ld-pl-accent-ink);
	font-size: var(--ld-letra-mini);
	font-style: normal;
	font-weight: 500;
	line-height: 1.6;
	white-space: nowrap;
}

.ld-panel-buscar {
	display: none;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding-inline: 14px;
	border: 1px solid var(--ld-pl-border);
	border-radius: var(--ld-pl-r-item);
	background: var(--ld-papel);
	color: var(--ld-pl-muted);
}

.ld-panel-cara {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-pl-accent-weak);
	color: var(--ld-pl-accent-ink);
	font-size: var(--ld-letra-nota);
	font-weight: 500;
	flex: none;
}

/* Las vistas del calendario (mes, semana, día): la que está abierta, en el acento. */
.ld-panel-vistas {
	display: none;
	gap: 4px;
	padding: 4px;
	border-radius: var(--ld-pl-r-item);
	background: var(--ld-papel);
}

.ld-panel-vistas i {
	padding: 7px 14px;
	border-radius: var(--ld-r-chico);
	color: var(--ld-pl-sub);
	font-style: normal;
	font-weight: 500;
}

.ld-panel-vistas .is-activo {
	background: var(--ld-pl-accent-weak);
	color: var(--ld-pl-accent-ink);
}

.ld-cal-leyenda {
	display: none;
	align-items: center;
	gap: 8px;
	color: var(--ld-pl-sub);
}

.ld-cal-leyenda i {
	width: 12px;
	height: 12px;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-pl-accent);
}

/* El calendario. En el teléfono es la lista de la semana: cada reserva con su día y su hora. */
.ld-cal {
	display: grid;
	gap: 8px;
	margin-top: 16px;
}

.ld-cal-dia,
.ld-cal-hora {
	display: none;
}

.ld-cal-evento {
	display: grid;
	gap: 1px;
	padding: 10px 14px;
	border-left: 3px solid var(--ld-pl-accent);
	border-radius: var(--ld-pl-r-item);
	background: var(--ld-papel);
	color: var(--ld-pl-sub);
}

/* En el teléfono alcanza con las primeras: la lista entera haría el panel interminable. */
@media (max-width: 767px) {
	.ld-cal-evento.is-de-mas {
		display: none;
	}
}

.ld-cal-evento b {
	color: var(--ld-pl-text);
	font-weight: 500;
}

.ld-cal-evento small {
	color: var(--ld-pl-accent-ink);
	font-size: var(--ld-letra-mini);
	font-weight: 500;
}

/* La que se distingue (en consultorios, la hora fija): llena. */
.ld-cal-evento.is-marca {
	background: var(--ld-pl-accent);
	color: var(--ld-papel);
}

.ld-cal-evento.is-marca b,
.ld-cal-evento.is-marca small {
	color: var(--ld-papel);
}

/* La ficha de quien agendó: lo que queda de cada visita. Flota sobre el panel. */
.ld-contacto {
	position: relative;
	z-index: 1;
	width: min(calc(100% - 24px), 320px);
	margin: -28px 12px 0 auto;
	padding: 16px 18px 10px;
	border-radius: var(--ld-r-pieza);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra-flota);
	color: var(--ld-pl-text);
	font-size: var(--ld-letra-nota);
	line-height: 1.4;
}

.ld-contacto header {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ld-contacto header p {
	display: grid;
	min-width: 0;
	color: var(--ld-pl-sub);
}

.ld-contacto header b {
	color: var(--ld-pl-text);
	font-size: var(--ld-letra-pieza);
	font-weight: 500;
}

.ld-contacto-dato {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	padding: 9px 12px 9px 9px;
	border-radius: var(--ld-pl-r-item);
	background: var(--ld-pl-soft);
}

.ld-contacto-dato .ld-aviso-icono {
	width: 28px;
	height: 28px;
}

.ld-contacto-dato svg {
	width: 16px;
	height: 16px;
}

.ld-contacto-dato b {
	font-weight: 500;
}

.ld-contacto-dato i {
	margin-left: auto;
	color: var(--ld-pl-accent-ink);
	font-size: var(--ld-letra-mini);
	font-style: normal;
	font-weight: 500;
	white-space: nowrap;
}

.ld-contacto ul {
	margin-top: 4px;
}

.ld-contacto li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding-block: 9px;
}

.ld-contacto li + li {
	border-top: 1px solid var(--ld-pl-hair);
}

.ld-contacto li b {
	font-weight: 400;
}

.ld-contacto li span {
	color: var(--ld-pl-sub);
	white-space: nowrap;
}

.ld-puntos {
	display: grid;
	gap: 12px;
	max-width: 1040px;
	margin: 36px auto 0;
}

.ld-puntos li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--ld-gris);
}

.ld-puntos li span {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	margin-top: 1px;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-azul-suave);
	color: var(--ld-azul-tinta);
	flex: none;
}

/* ---------- Lo que ya trae para el rubro: seis piezas con la forma de las del producto ---------- */

.ld-rasgos {
	display: grid;
	gap: 16px;
	margin-top: 40px;
}

.ld-rasgo {
	display: flex;
	flex-direction: column;
	padding: 12px 12px 24px;
	border-radius: var(--ld-r-tarjeta);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra);
}

.ld-rasgo .ld-subtitulo {
	margin: 20px 10px 0;
}

.ld-rasgo p {
	margin: 8px 10px 0;
	color: var(--ld-gris);
}

.ld-pieza {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 168px;
	padding: 20px 16px;
	border-radius: var(--ld-r-pieza);
	background: var(--ld-suelo);
}

/* «Proyecto», no «Profesional». */
.ld-ficha {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding-inline: 16px;
	border-radius: var(--ld-r-pildora);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-pieza);
	font-weight: 600;
}

.ld-ficha-no {
	border: 1.5px dashed var(--ld-nube);
	color: var(--ld-tenue);
	text-decoration: line-through;
}

.ld-ficha-si {
	background: var(--ld-tinta);
	color: var(--ld-papel);
}

/* El ticket: se agenda y queda confirmada, sin precio. */
.ld-boleto {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 20px 12px 12px;
	border-radius: var(--ld-r-pieza);
	background: var(--ld-tinta);
	color: var(--ld-papel);
}

.ld-hoja {
	display: grid;
	justify-items: center;
	width: 62px;
	padding: 7px 0 9px;
	border-radius: var(--ld-r-chico);
	background: var(--ld-papel);
	color: var(--ld-tinta);
}

.ld-hoja small {
	color: var(--ld-azul-tinta);
	font-size: var(--ld-letra-nota);
	font-weight: 500;
	line-height: 1.2;
}

.ld-hoja b,
.ld-boleto-hora b,
.ld-dia b {
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-cifra);
	font-weight: 700;
	line-height: 1.05;
}

.ld-boleto-hora {
	display: grid;
	justify-items: start;
	gap: 6px;
}

.ld-boleto-hora i {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px 3px 7px;
	border-radius: var(--ld-r-pildora);
	background: var(--ld-ok);
	font-size: var(--ld-letra-nota);
	font-style: normal;
	font-weight: 500;
}

/* La misma hora en dos edificios. */
.ld-pieza-pares {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 8px;
}

.ld-par {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 10px 6px 6px;
	border-radius: var(--ld-r-dia);
	background: var(--ld-papel);
}

.ld-par img {
	width: 44px;
	height: 44px;
	border-radius: var(--ld-r-chico);
	object-fit: cover;
	flex: none;
}

.ld-par b {
	flex: 1;
	min-width: 0;
	font-size: var(--ld-letra-pieza);
	font-weight: 500;
	line-height: 1.25;
}

.ld-hora {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	padding: 10px 16px;
	border-radius: var(--ld-r-dia);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-pieza);
	font-weight: 600;
	white-space: nowrap;
}

.ld-hora small {
	font-family: var(--ld-familia);
	font-size: var(--ld-letra-nota);
	font-weight: 400;
}

.ld-par .ld-hora {
	padding: 6px 10px;
	border-radius: var(--ld-r-chico);
	background: var(--ld-azul-suave);
	color: var(--ld-azul-tinta);
	box-shadow: none;
}

.ld-hora-elegida {
	background: var(--ld-azul);
	color: var(--ld-papel);
}

/* El campo que pregunta de qué inmobiliaria es. */
.ld-campo {
	display: grid;
	gap: 6px;
	width: 100%;
	max-width: 270px;
}

.ld-campo small {
	color: var(--ld-gris);
	font-size: var(--ld-letra-nota);
	font-weight: 500;
}

.ld-campo b {
	display: flex;
	align-items: center;
	min-height: 52px;
	padding-inline: 16px;
	border: 1.5px solid var(--ld-linea);
	border-radius: var(--ld-r-dia);
	background: var(--ld-papel);
	font-size: var(--ld-letra-pieza);
	font-weight: 400;
}

.ld-caras {
	display: inline-flex;
}

.ld-caras i {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin-left: -8px;
	border: 2px solid var(--ld-suelo);
	border-radius: var(--ld-r-redondo);
	background: var(--ld-papel);
	color: var(--ld-azul-tinta);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-nota);
	font-style: normal;
	font-weight: 600;
}

.ld-caras i:first-child {
	margin-left: 0;
}

/* Del jueves al viernes. */
.ld-dia {
	display: grid;
	justify-items: center;
	gap: 3px;
	width: 66px;
	padding: 11px 0 13px;
	border-radius: var(--ld-r-dia);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra);
}

.ld-dia small {
	color: var(--ld-gris);
	font-size: var(--ld-letra-nota);
	line-height: 1.2;
}

.ld-dia-antes {
	border: 1.5px dashed var(--ld-nube);
	background: none;
	box-shadow: none;
	color: var(--ld-tenue);
}

.ld-dia-antes small {
	color: var(--ld-tenue);
}

.ld-dia-elegido {
	background: var(--ld-tinta);
	color: var(--ld-papel);
}

.ld-dia-elegido small {
	color: var(--ld-nube);
}

.ld-pieza-cambio svg {
	color: var(--ld-azul-tinta);
}

/* ---------- Lo destacado del rubro. En consultorios: la hora fija, agendada todas las semanas ---------- */

.ld-fija {
	position: relative;
	width: 100%;
	max-width: 440px;
	overflow: hidden;
	border-radius: var(--ld-r-tarjeta);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra-flota);
}

/* La cabeza es el ticket: el día y la hora que quedaron tomados. */
.ld-fija-cabeza {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	background: var(--ld-tinta);
	color: var(--ld-papel);
}

.ld-fija-cabeza .ld-hoja {
	width: 92px;
	padding: 9px 0 11px;
	border-radius: var(--ld-r-dia);
}

.ld-fija-cabeza p {
	display: grid;
	justify-items: start;
	gap: 2px;
	min-width: 0;
	color: var(--ld-nube);
	font-size: var(--ld-letra-nota);
	line-height: 1.4;
}

.ld-fija-cabeza p b {
	color: var(--ld-papel);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-subtitulo);
	font-weight: 600;
}

.ld-fija-cabeza p i {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 6px;
	padding: 3px 10px 3px 7px;
	border-radius: var(--ld-r-pildora);
	background: var(--ld-ok);
	color: var(--ld-papel);
	font-style: normal;
	font-weight: 500;
}

/* Las semanas que siguen: el mismo día, tomado una y otra vez. */
.ld-fija-semanas {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	padding: 18px 18px 0;
}

.ld-fija-semanas .ld-dia {
	position: relative;
	width: auto;
	background: var(--ld-suelo);
	box-shadow: none;
}

.ld-fija-semanas .ld-dia i {
	position: absolute;
	right: 8px;
	top: 8px;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-ok);
	color: var(--ld-papel);
}

.ld-fija-sigue {
	padding: 14px 20px 18px;
	color: var(--ld-gris);
	font-size: var(--ld-letra-nota);
	text-align: center;
}

/* En lavaderos: lo que se le suma al lavado. La cuenta de un turno, con la forma del paso «¿Le sumás algo?» del formulario. */
.ld-suma {
	position: relative;
	width: 100%;
	max-width: 440px;
	overflow: hidden;
	border-radius: var(--ld-r-tarjeta);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra-flota);
}

.ld-suma-cabeza {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 22px;
	background: var(--ld-tinta);
	color: var(--ld-papel);
}

.ld-suma-cabeza p {
	display: grid;
	gap: 2px;
	min-width: 0;
	color: var(--ld-nube);
	font-size: var(--ld-letra-nota);
	line-height: 1.4;
}

.ld-suma-cabeza p b {
	color: var(--ld-papel);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-subtitulo);
	font-weight: 600;
}

.ld-suma-cabeza strong,
.ld-suma-total b {
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-cifra);
	font-weight: 600;
	white-space: nowrap;
}

.ld-suma-lista {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 18px 18px 0;
	list-style: none;
}

.ld-suma-lista li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px 12px 18px;
	border-radius: var(--ld-r-dia);
	background: var(--ld-suelo);
}

/* El adicional prendido: el borde azul y la llave corrida, como en el formulario. */
.ld-suma-lista li.is-puesto {
	background: var(--ld-papel);
	box-shadow: 0 0 0 2px var(--ld-azul);
}

.ld-suma-lista p {
	display: grid;
	flex: 1;
	gap: 1px;
	min-width: 0;
	color: var(--ld-gris);
	font-size: var(--ld-letra-nota);
	line-height: 1.4;
}

.ld-suma-lista p b {
	color: var(--ld-tinta);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-pieza);
	font-weight: 600;
}

.ld-suma-lista i {
	position: relative;
	flex: none;
	width: 48px;
	height: 28px;
	border-radius: var(--ld-r-pildora);
	background: var(--ld-nube);
}

.ld-suma-lista i::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 22px;
	height: 22px;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra);
}

.ld-suma-lista .is-puesto i {
	background: var(--ld-azul);
}

.ld-suma-lista .is-puesto i::after {
	transform: translateX(20px);
}

.ld-suma-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 18px 22px 0;
	padding: 16px 0 20px;
	border-top: 1px dashed var(--ld-linea);
	color: var(--ld-gris);
	font-size: var(--ld-letra-pieza);
}

.ld-suma-total b {
	color: var(--ld-tinta);
}

.ld-puntos-columna {
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	max-width: none;
	margin: 24px 0 0;
}

/* ---------- El testimonio: una cuenta real del rubro ---------- */

.ld-testimonio {
	display: grid;
	justify-items: center;
	gap: 24px;
	max-width: 860px;
	margin-inline: auto;
	text-align: center;
}

.ld-testimonio blockquote {
	margin: 0;
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-bajada);
	font-weight: 500;
	line-height: 1.5;
	text-wrap: balance;
}

.ld-testimonio figcaption {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--ld-gris);
	font-size: var(--ld-letra-nota);
	text-align: left;
}

.ld-testimonio img {
	width: 56px;
	height: 56px;
	border-radius: var(--ld-r-redondo);
	object-fit: cover;
}

.ld-testimonio figcaption span {
	display: grid;
}

.ld-testimonio figcaption b {
	color: var(--ld-tinta);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-pieza);
	font-weight: 600;
}

/* ---------- Los tres pasos: una secuencia, por eso llevan número ---------- */

.ld-pasos {
	display: grid;
	gap: 32px;
	margin-top: 40px;
}

.ld-pasos li {
	position: relative;
}

.ld-pasos .ld-subtitulo {
	margin-top: 16px;
}

.ld-pasos p {
	max-width: 30em;
	margin-top: 8px;
	color: var(--ld-gris);
}

/* ---------- Preguntas: se abren y se cierran solas (details), sin JavaScript ---------- */

/* Una sola columna centrada, como las demás secciones: el título y, debajo, la tarjeta con las preguntas. */
.ld-preguntas {
	display: grid;
	justify-items: center;
	gap: 28px;
}

.ld-preguntas .ld-titulo {
	text-align: center;
}

.ld-preguntas-lista {
	width: 100%;
	max-width: 880px;
	padding: 6px 20px;
	border-radius: var(--ld-r-tarjeta);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra);
}

.ld-pregunta + .ld-pregunta {
	border-top: 1px solid var(--ld-linea);
}

.ld-pregunta summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 64px;
	padding-block: 14px;
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-base);
	font-weight: 600;
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
}

.ld-pregunta summary::-webkit-details-marker {
	display: none;
}

.ld-pregunta summary svg {
	color: var(--ld-azul-tinta);
	transition: transform 220ms var(--ld-sale);
}

.ld-pregunta[open] summary svg {
	transform: rotate(180deg);
}

.ld-pregunta p {
	max-width: 38em;
	padding-bottom: 20px;
	color: var(--ld-gris);
}

/* ---------- El cierre: un ticket. Dice para qué es Agendate en este rubro ---------- */

.ld-cierre {
	--ld-cierre-aire: clamp(20px, 6vw, 72px);
	display: grid;
	justify-items: center;
	padding: clamp(40px, 7vw, 76px) var(--ld-cierre-aire) clamp(32px, 6vw, 60px);
	overflow: hidden;
	border-radius: var(--ld-r-tarjeta);
	background: var(--ld-tinta);
	color: var(--ld-papel);
	text-align: center;
}

.ld-cierre .ld-parrafo,
.ld-cierre .ld-nota {
	color: var(--ld-nube);
}

/* La línea perforada del ticket, con sus dos muescas en los bordes. */
.ld-perforado {
	position: relative;
	width: calc(100% + 2 * var(--ld-cierre-aire));
	margin-top: 36px;
	border-top: 2px dashed var(--ld-tinta-linea);
}

.ld-perforado::before,
.ld-perforado::after {
	content: '';
	position: absolute;
	top: -14px;
	width: 26px;
	height: 26px;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-suelo);
}

.ld-perforado::before {
	left: -13px;
}

.ld-perforado::after {
	right: -13px;
}

.ld-cierre .ld-boton {
	margin-top: 32px;
}

/* ---------- El pie ---------- */

/* El aire de abajo lo pone el contenedor. En el teléfono suma el alto del botón fijo. */
.ld-pie {
	display: grid;
	gap: 16px;
	margin-top: 56px;
	padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
	color: var(--ld-gris);
	font-size: var(--ld-letra-nota);
}

.ld-pie-marca {
	display: grid;
	gap: 6px;
	max-width: 430px;
	font-size: var(--ld-letra-pieza);
	line-height: 1.5;
}

.ld-pie nav,
.ld-pie-rubros {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 20px;
}

/* Las otras landings: «Agendate para tu rubro» y sus enlaces, en su propio renglón a lo ancho del pie. En el teléfono,
   el título y debajo un enlace por renglón; desde 768, todo en un solo renglón. */
.ld-pie-rubros {
	grid-column: 1 / -1;
	flex-direction: column;
	align-items: flex-start;
	padding-top: 16px;
	border-top: 1px solid var(--ld-linea);
	font-size: var(--ld-letra-nota);
}

.ld-pie-rubros b {
	color: var(--ld-tinta);
	font-weight: 500;
}

.ld-pie-rubros a {
	display: inline-flex;
	align-items: center;
	min-height: var(--ld-toque);
	color: var(--ld-azul-tinta);
	text-decoration: none;
}

.ld-pie-rubros a:hover {
	text-decoration: underline;
}

.ld-pie nav a {
	display: inline-flex;
	align-items: center;
	min-height: var(--ld-toque);
	color: var(--ld-gris);
	text-decoration: none;
}

.ld-pie nav a:hover {
	color: var(--ld-tinta);
}

.ld-pie-firma {
	padding-top: 16px;
	border-top: 1px solid var(--ld-linea);
	color: var(--ld-tenue);
}

/* El botón que queda a mano en el teléfono mientras no hay otro igual a la vista. */
.ld-fijo {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	display: grid;
	padding: 12px var(--ld-margen) calc(12px + env(safe-area-inset-bottom, 0px));
	background: var(--ld-suelo-velo);
	border-top: 1px solid var(--ld-linea);
	transform: translateY(110%);
	transition: transform 320ms var(--ld-sale);
}

.ld-fijo.is-visto {
	transform: none;
}

/* ---------- La muestra para probar ---------- */

.ld-dialogo {
	width: 100vw;
	max-width: none;
	height: 100vh;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--ld-suelo);
	color: var(--ld-tinta);
}

.ld-dialogo[open] {
	display: flex;
	flex-direction: column;
}

.ld-dialogo::backdrop {
	background: var(--ld-velo);
}

.ld-dialogo header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px 20px;
	border-bottom: 1px solid var(--ld-linea);
}

.ld-dialogo header p {
	display: grid;
	color: var(--ld-gris);
	font-size: var(--ld-letra-nota);
	line-height: 1.35;
}

.ld-dialogo header b {
	color: var(--ld-tinta);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-pieza);
	font-weight: 600;
}

.ld-cerrar {
	display: grid;
	place-items: center;
	width: var(--ld-toque);
	height: var(--ld-toque);
	border: 0;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra);
	color: var(--ld-tinta);
	cursor: pointer;
	flex: none;
}

.ld-dialogo-pantalla {
	flex: 1;
	min-height: 0;
}

.ld-dialogo-pantalla iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------- Desde 600 ---------- */

@media (min-width: 600px) {
	.agdt-landing {
		--ld-margen: 24px;
		--ld-logo: 208px;
		--ld-escala: .8;
	}

	.ld-acciones {
		display: flex;
		flex-wrap: wrap;
	}

	/* El recorte a la izquierda y su texto al lado. */
	.ld-tramo {
		grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
		align-items: center;
		gap: 24px;
		padding: 12px 24px 12px 12px;
	}

	.ld-rasgos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- Desde 720: los dos teléfonos de los avisos, lado a lado y a distinta altura ---------- */

@media (min-width: 720px) {
	.ld-chats {
		grid-template-columns: repeat(2, auto);
		justify-content: center;
		align-items: start;
	}

	.ld-chat-caso:nth-child(2) {
		margin-top: 48px;
	}
}

/* ---------- Desde 768: el botón sube a la barra y ya no hace falta el fijo ---------- */

@media (min-width: 768px) {
	/* (En la tableta van más juntos: con cuatro rubros, los tres enlaces más largos entran justo en el renglón.) */
	.ld-pie-rubros {
		flex-direction: row;
		align-items: center;
		gap: 0 20px;
	}

	.ld-boton-chico {
		display: inline-flex;
	}

	.ld-enlace {
		margin-right: 0;
	}

	.ld-fijo {
		display: none;
	}

	.ld-pie {
		padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
	}

	.ld-portada {
		justify-items: center;
		gap: 56px;
		padding-block: 40px 72px;
	}

	.ld-portada-texto {
		display: grid;
		justify-items: center;
		text-align: center;
	}

	.ld-acciones {
		justify-content: center;
	}

	.ld-portada-muestra {
		width: 100%;
		max-width: 620px;
	}

	.ld-aviso-flota {
		display: flex;
	}

	/* Cada paso centrado en su columna: lo que queda a la izquierda del 1 es lo que queda a la derecha del 3. */
	.ld-pasos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* (Arriba, no repartidos: con textos de distinto largo, el título de un paso quedaba más abajo que el de al lado.) */
	.ld-pasos li {
		display: grid;
		align-content: start;
		justify-items: center;
		text-align: center;
	}

	/* El panel: las visitas en filas con sus columnas, y la búsqueda arriba. */
	.ld-panel-cuerpo {
		padding: 22px 24px 56px;
	}

	.ld-panel-buscar {
		display: flex;
	}

	.ld-panel-vistas,
	.ld-cal-leyenda {
		display: flex;
	}

	/* En tablet las columnas de la semana quedarían muy angostas: las reservas van en lista, de a dos. */
	.ld-cal {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ld-contacto {
		position: absolute;
		right: 28px;
		bottom: -36px;
		margin: 0;
	}

	.ld-panel-escena {
		margin-bottom: 36px;
	}

	.ld-puntos:not(.ld-puntos-columna) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
		margin-top: 64px;
	}

	/* La línea que une un paso con el siguiente, de número a número. */
	.ld-pasos li:not(:last-child)::after {
		content: '';
		position: absolute;
		left: calc(50% + 34px);
		width: calc(100% + 32px - 68px);
		top: 21px;
		border-top: 2px dashed var(--ld-linea);
	}

	.ld-preguntas-lista {
		padding-inline: 28px;
	}

	.ld-dialogo {
		width: 430px;
		height: min(860px, calc(100dvh - 48px));
		margin: auto;
		border-radius: var(--ld-r-tarjeta);
		box-shadow: var(--ld-sombra-flota);
		overflow: hidden;
	}
}

/* ---------- Desde 1024: dos columnas ---------- */

@media (min-width: 1024px) {
	.ld-pie-rubros {
		gap: 0 28px;
	}

	/* El teléfono entra entero en la primera pantalla de una computadora común (800 de alto). */
	.agdt-landing {
		--ld-escala: .75;
	}

	.ld-portada {
		grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
		align-items: center;
		justify-items: stretch;
		gap: 48px;
		padding-block: 32px 96px;
	}

	.ld-portada-texto {
		justify-items: start;
		text-align: left;
	}

	.ld-acciones {
		justify-content: flex-start;
	}

	.ld-portada-muestra {
		max-width: none;
	}

	.ld-dos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: center;
		gap: 72px;
	}

	/* El pie en dos columnas: la marca a la izquierda y los enlaces, en un solo renglón, a la derecha. */
	.ld-pie {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
		gap: 16px 40px;
	}

	.ld-pie nav {
		flex-wrap: nowrap;
	}

	.ld-pie-firma {
		grid-column: 1 / -1;
	}

	/* El panel entero: con su menú. */
	.ld-panel {
		grid-template-columns: 212px minmax(0, 1fr);
	}

	.ld-panel-menu {
		display: grid;
	}

	/* Los tres recortes, uno al lado del otro, cada uno con su texto debajo. */
	.ld-recorrido {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}

	.ld-tramo {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 18px;
		padding: 12px 12px 22px;
	}

	.ld-rasgos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}

}

/* ---------- Desde 1200: los avisos en dos columnas (el texto y los dos teléfonos) ---------- */

@media (min-width: 1200px) {
	/* Una columna por día y un renglón por hora, con sus líneas. */
	.ld-cal {
		grid-template-columns: 56px repeat(var(--ld-cal-dias), minmax(0, 1fr));
		grid-auto-rows: 56px;
		gap: 0;
		overflow: hidden;
		border-radius: var(--ld-pl-r-panel);
		background: var(--ld-papel) linear-gradient(var(--ld-pl-hair) 1px, transparent 1px) 0 0 / 100% 56px;
	}

	.ld-cal-dia,
	.ld-cal-hora {
		display: grid;
		color: var(--ld-pl-sub);
		font-size: var(--ld-letra-mini);
		font-weight: 500;
	}

	.ld-cal-dia {
		grid-column: calc(var(--d) + 2);
		grid-row: 1;
		place-items: center;
		background: var(--ld-papel);
	}

	.ld-cal-dia.is-hoy {
		color: var(--ld-pl-accent-ink);
	}

	.ld-cal-hora {
		grid-column: 1;
		grid-row: calc(var(--h) + 2);
		justify-items: end;
		padding: 6px 10px 0 0;
		color: var(--ld-pl-muted);
	}

	.ld-cal-evento {
		grid-column: calc(var(--d) + 2);
		grid-row: calc(var(--h) + 2);
		align-content: center;
		margin: 3px 4px 3px 3px;
		padding: 2px 8px;
		overflow: hidden;
		background: var(--ld-pl-accent-weak);
		font-size: var(--ld-letra-mini);
		line-height: 1.25;
	}

	.ld-cal-evento small {
		display: none;
	}

	.ld-avisos {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 72px;
	}

	.ld-avisos-texto {
		justify-items: start;
		margin: 0;
		text-align: left;
	}
}

@media (min-width: 1024px) and (min-height: 920px) {
	.agdt-landing {
		--ld-escala: .86;
	}
}

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