/*
 * La página para profesionales y equipos, y las piezas que comparte con la de inicio (inicio.css): las dos páginas
 * principales del sitio visten igual. Usa los tokens --ld-* de las landings (landing.css) y sus piezas (el botón,
 * el teléfono, el panel dibujado, la hoja del día, el ticket del cierre) y los boletos de la página de precios
 * (precios.css). Lo propio de esta página es el ritmo: una idea y una pieza por sección, con aire alrededor. El
 * dueño, 13-10-2026: «queremos un diseño fresco, limpio, aireado, minimalista … no me apretes todas las cosas porque
 * el usuario se abatata». Ninguna regla escribe un color, un radio ni un tamaño de letra a mano (ver MARCA.md).
 *
 * 360:  una columna; el menú del sitio en un renglón bajo el logo; los avisos en una lista y debajo su teléfono;
 *       pestañas del panel de a dos; los rubros en una lista que abre de a uno, con su foto; el botón de WhatsApp
 *       flota sobre el de crear la agenda.
 * 768:  de a tres: los momentos de la reserva, las integraciones, las funciones, las cifras y los pasos; testimonios
 *       de a dos; las pestañas del panel en un renglón.
 * 1280: el menú en la barra; en la portada, el panel y el teléfono lado a lado y del mismo alto; texto y pieza lado a
 *       lado en los avisos (su teléfono, levemente girado), el panel y los rubros; todo dentro de 1240.
 */

.agdt-secundaria-profesionales,
.agdt-secundaria-inicio {
	/* El aire de la página: entre secciones, y entre el encabezado de una sección y su pieza. */
	--pf-aire: clamp(72px, 11vw, 144px);
	--pf-hueco: clamp(40px, 6vw, 72px);
}

/* ---------- El menú del sitio (lo imprime view/hoja.php cuando la página lo trae) ---------- */

.agdt-secundaria-profesionales .ld-barra,
.agdt-secundaria-inicio .ld-barra {
	flex-wrap: wrap;
}

.ld-menu {
	display: flex;
	justify-content: center;
	order: 3;
	flex-basis: 100%;
	gap: 2px;
	padding: 2px;
	border-radius: var(--ld-r-pildora);
	background: var(--ld-azul-suave);
}

.ld-menu a {
	display: inline-flex;
	align-items: center;
	min-height: var(--ld-toque);
	padding-inline: 10px;
	border-radius: var(--ld-r-pildora);
	color: var(--ld-tinta);
	font-size: var(--ld-letra-nota);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.ld-menu a:hover,
.ld-menu a[aria-current] {
	color: var(--ld-azul-tinta);
}

/* (El nombre largo de una entrada no entra en el teléfono: ahí va el corto.) */
.ld-menu-largo {
	display: none;
}

/* ---------- La portada: el título, una frase, los botones y el producto ---------- */

.pf-portada {
	display: grid;
	gap: clamp(56px, 8vw, 96px);
	padding-block: 32px var(--pf-aire);
}

/* La portada va centrada, sobre el producto. */
.pf-portada-texto {
	display: grid;
	justify-items: center;
	max-width: 980px;
	margin-inline: auto;
	text-align: center;
}

.pf-titular {
	font-size: var(--ld-letra-titular);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.03em;
	/* (Los renglones del título, parejos: que no quede una palabra sola abajo.) */
	text-wrap: balance;
}

.pf-portada .ld-bajada {
	margin-top: 24px;
}

.pf-acciones {
	display: grid;
	gap: 12px;
	width: 100%;
	margin-top: 40px;
}

.pf-portada .ld-nota {
	margin-top: 20px;
}

/* El producto, de los dos lados y sin encimarse: el panel del negocio y la página donde reservan sus clientes. */
.pf-vitrina {
	display: grid;
	justify-items: center;
	gap: 40px;
}

.pf-vitrina-pieza {
	display: grid;
	justify-items: center;
	width: 100%;
	min-width: 0;
}

.pf-vitrina-panel {
	width: 100%;
	overflow: hidden;
	border-radius: var(--ld-r-tarjeta);
	box-shadow: var(--ld-sombra-flota);
}

.pf-vitrina-panel .ld-panel {
	box-shadow: none;
}

.pf-vitrina-telefono .ld-telefono {
	--ld-tel-k: .7;
}

/* El panel se muestra SIEMPRE como se ve en una computadora (con su menú y su calendario de la semana), y se achica
   entero al ancho de su marco, como una captura: en el teléfono también se reconoce el calendario. El dueño,
   13-10-2026: «en teléfono no tiene nada que ver, no hay manera de que alguien se imagine que ese es el dashboard de
   un calendario». (Las reglas de abajo son las que landing.css aplica desde 1024 y 1200; assets/js/profesionales.js
   mide el marco y pone la escala.) */
.pf-pantallazo {
	overflow: hidden;
	aspect-ratio: 1240 / 700;
}

.pf-pantallazo .ld-panel {
	grid-template-columns: 212px minmax(0, 1fr);
	width: var(--pf-ancho, 1240px);
	transform: scale(var(--pf-k, 1));
	transform-origin: 0 0;
}

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

.pf-pantallazo .ld-panel-cuerpo {
	padding: 22px 24px 40px;
}

.pf-pantallazo .ld-panel-vistas {
	display: flex;
}

.pf-pantallazo .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;
}

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

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

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

.pf-pantallazo .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);
}

.pf-pantallazo .ld-cal-evento,
.pf-pantallazo .ld-cal-evento.is-de-mas {
	display: grid;
	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;
}

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

/* El turno de la reserva de la página, marcado: es el mismo que se ve en el teléfono. */
.pf-pantallazo .ld-cal-evento.is-suyo {
	background: var(--ld-pl-accent);
	color: var(--ld-papel);
}

.pf-pantallazo .ld-cal-evento.is-suyo b {
	color: var(--ld-papel);
}

/* ---------- Las secciones y su ritmo ---------- */

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

.pf-banda {
	background: var(--ld-papel);
}

.pf-encabezado {
	display: grid;
	justify-items: center;
	max-width: 820px;
	margin-inline: auto;
	text-align: center;
}

.pf-encabezado .ld-etiqueta,
.pf-dos-texto .ld-etiqueta {
	margin-bottom: 24px;
}

/* La etiqueta de una sección, para que se note: su ícono en un círculo del azul de la marca y la letra más grande y más
   firme. Sobre el fondo celeste va en blanco (la píldora celeste casi no se despegaba del fondo) y sobre el blanco, en
   celeste. El dueño, 13-10-2026: «esas píldoras que metés en las secciones … pasan medio desapercibidos … no se
   aprecian fácilmente». */
.pf-etiqueta {
	gap: 10px;
	padding: 6px 20px 6px 6px;
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra);
	color: var(--ld-tinta);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-pieza);
	font-weight: 600;
}

.pf-etiqueta > span {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-azul);
	color: var(--ld-papel);
	flex: none;
}

.pf-banda .pf-etiqueta {
	background: var(--ld-azul-suave);
	box-shadow: none;
}

.pf-encabezado .ld-parrafo,
.pf-dos-texto .ld-parrafo {
	margin-top: 20px;
}

/* Lo que sigue al encabezado de una sección queda a un hueco entero: nada pegado al título. */
.pf-encabezado + * {
	margin-top: var(--pf-hueco);
}

.pf-dos {
	display: grid;
	gap: var(--pf-hueco);
}

.pf-dos-texto {
	display: grid;
	justify-items: start;
	align-content: center;
	min-width: 0;
}

.pf-dos-imagen {
	min-width: 0;
}

.pf-telefono {
	display: grid;
	justify-items: center;
}

/* El teléfono de los WhatsApp flota: sube y baja apenas, con su sombra en el piso. Y en la computadora va apenas girado
   sobre su propio eje, como visto un poco de costado: SIEMPRE derecho, nunca inclinado. El dueño, 13-10-2026: «fijate
   si le podés dar un efecto como que está levemente girado. Y que esté flotando; la sombrita de abajo tiene que estar
   un poquito más destacada»; y del primer intento, que lo inclinaba: «era más como que gira en su propio eje … como
   que yo miraba apenita desde el costado … levemente caído hacia la derecha … me genera una sensación de que está
   todo torcido adentro». */
.pf-telefono .ld-telefono {
	transform: perspective(1600px) rotateY(var(--pf-giro, 0deg));
	animation: pf-flota 7s ease-in-out infinite;
}

.pf-telefono::after {
	content: '';
	width: 62%;
	max-width: 300px;
	height: 34px;
	margin-top: 26px;
	border-radius: var(--ld-r-redondo);
	background: radial-gradient(closest-side, var(--ld-velo), transparent);
	animation: pf-sombra 7s ease-in-out infinite;
}

@keyframes pf-flota {
	50% {
		transform: perspective(1600px) translateY(-10px) rotateY(var(--pf-giro, 0deg));
	}
}

@keyframes pf-sombra {
	50% {
		opacity: .6;
		transform: scaleX(.88);
	}
}

/* En el chat se ve sólo el aviso elegido (lo demás espera oculto), y entra suave. Va un poco más junto que el de las
   landings: tienen que entrar los dos recordatorios (el de un día antes y el de dos horas antes). */
.pf-telefono .ld-wsp-hilo {
	gap: 6px;
	padding-block: 8px;
}

.pf-telefono .ld-wsp-dia {
	padding-block: 3px;
}

.pf-telefono .ld-wsp-hilo [hidden] {
	display: none;
}

.pf-telefono .ld-wsp-hilo.is-cambia > :not([hidden]) {
	animation: pf-entra 320ms var(--ld-sale) both;
}

@keyframes pf-entra {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

/* Los tildes. */
.pf-tildes {
	display: grid;
	gap: 14px;
}

.pf-tildes li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	line-height: 1.4;
}

.pf-tildes li > span {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-azul);
	color: var(--ld-papel);
	flex: none;
}

/* ---------- Tus clientes reservan solos ---------- */

/* El título grande de la página después del de la portada: «Olvidate de la coordinación manual de…», con su palabra
   que va cambiando. El dueño, 13-10-2026: «tiene que ser un súper título y lo pusiste como un título … pobre». */
.pf-super {
	max-width: 15em;
	font-size: var(--ld-letra-titular);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.03em;
}

/* La palabra que va cambiando al final del título: en su propio renglón, para que nada se mueva. */
.pf-gira {
	display: block;
	width: fit-content;
	margin: .12em auto 0;
	padding: .04em .3em .1em;
	border-radius: var(--ld-r-dia);
	background: var(--ld-azul);
	color: var(--ld-papel);
	transition: opacity 260ms ease, transform 260ms var(--ld-sale);
}

.pf-gira.is-saliendo {
	opacity: 0;
	transform: translateY(8px);
}

.pf-super + .ld-parrafo {
	margin-top: 28px;
}

/* Los tres momentos de la reserva. En cada uno, el teléfono entero parado ahí: asoma de su escenario (el borde de
   abajo lo corta), así se ve grande y se lee, y no hay un recorte del formulario suelto. El dueño, 13-10-2026, de los
   recortes: «son muy difíciles de entender porque está todo abarrotado, apretado». */
.pf-reserva {
	display: grid;
	gap: 56px;
}

.pf-reserva li {
	display: grid;
	align-content: start;
	gap: 28px;
	min-width: 0;
}

.pf-escenario {
	display: grid;
	justify-items: center;
	height: 420px;
	padding-top: 44px;
	overflow: hidden;
	border-radius: var(--ld-r-tarjeta);
	background: var(--ld-suelo);
}

.pf-escenario .ld-telefono {
	--ld-tel-k: .66;
}

.pf-reserva-texto {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 6px 16px;
	padding-inline: 4px;
}

.pf-reserva-texto .ld-numero {
	grid-row: span 2;
}

.pf-reserva-texto h3 {
	align-self: end;
}

.pf-reserva-texto p,
.pf-integraciones p,
.pf-funciones p,
.pf-beneficios p,
.pf-pasos p {
	color: var(--ld-gris);
}

.pf-integraciones strong,
.pf-funciones strong {
	color: var(--ld-tinta);
	font-weight: 600;
}

/* ---------- Agendate les avisa: los cuatro WhatsApp, cada uno en su momento ---------- */

.pf-avisos {
	display: grid;
	gap: 8px;
	width: 100%;
	margin-top: 40px;
}

/* (Sobre el fondo celeste, el aviso elegido es una tarjeta blanca; los otros, sólo su renglón.) */
.pf-aviso-boton .pf-rubro-icono {
	background: var(--ld-papel);
}

.pf-aviso-boton[aria-pressed="true"] {
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra);
}

.pf-aviso-boton[aria-pressed="true"] .pf-rubro-icono {
	background: var(--ld-wsp);
	color: var(--ld-papel);
}

.pf-aviso-boton[aria-pressed="true"] .pf-rubro-nombre {
	color: var(--ld-gris);
}

.pf-ademas {
	max-width: 34em;
	margin-top: 28px;
	padding-inline: 16px;
	color: var(--ld-tenue);
	font-size: var(--ld-letra-pieza);
	line-height: 1.5;
	text-wrap: pretty;
}

/* ---------- El panel: cuatro áreas, una por vez ---------- */

.pf-areas-pestanas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.pf-areas-pestanas button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding-inline: 14px;
	border: 0;
	border-radius: var(--ld-r-pildora);
	background: var(--ld-suelo);
	color: var(--ld-tinta);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-pieza);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease;
}

.pf-areas-pestanas button[aria-selected="true"] {
	background: var(--ld-tinta);
	color: var(--ld-papel);
}

.pf-areas-pestanas button:focus-visible,
.pf-rubro-boton:focus-visible,
.pf-aviso-boton:focus-visible {
	outline: 2px solid var(--ld-azul);
	outline-offset: 3px;
}

.pf-areas-paneles {
	display: grid;
	gap: 56px;
	margin-top: 40px;
}

.pf-area {
	display: grid;
	gap: 32px;
	min-width: 0;
}

.pf-area-texto {
	display: grid;
	align-content: center;
	gap: 24px;
}

.pf-area-titulo {
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-cifra);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/* Con el programa de la página andando: las cuatro en el mismo lugar y a la vista sólo la elegida (el alto no cambia). */
.pf-areas.is-listo .pf-areas-paneles {
	gap: 0;
}

.pf-areas.is-listo .pf-area {
	grid-area: 1 / 1;
	transition: opacity 240ms ease, transform 240ms var(--ld-sale);
}

.pf-areas.is-listo .pf-area:not(.is-activa) {
	visibility: hidden;
	opacity: 0;
	transform: translateY(8px);
}

/* Las pantallas chicas del panel: con los valores de su piel (el verde azulado y sus grises). */
.pf-pantalla {
	display: grid;
	align-content: start;
	padding: 20px;
	border: 1px solid var(--ld-pl-border);
	border-radius: var(--ld-r-pieza);
	background: var(--ld-pl-soft);
	box-shadow: var(--ld-sombra);
	color: var(--ld-pl-text);
	font-size: var(--ld-letra-mini);
	line-height: 1.35;
}

.pf-pantalla-barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.pf-pantalla-barra b {
	color: var(--ld-pl-ink-2);
	font-size: var(--ld-letra-pieza);
	font-weight: 500;
}

.pf-vistas {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border-radius: var(--ld-pl-r-item);
	background: var(--ld-papel);
}

.pf-vistas i {
	padding: 4px 9px;
	border-radius: var(--ld-r-chico);
	color: var(--ld-pl-sub);
	font-style: normal;
}

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

.pf-buscar {
	padding: 5px 14px;
	border: 1px solid var(--ld-pl-border);
	border-radius: var(--ld-r-pildora);
	background: var(--ld-papel);
	color: var(--ld-pl-muted);
}

.pf-mes {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
}

.pf-mes small {
	padding-bottom: 2px;
	color: var(--ld-pl-muted);
	font-size: inherit;
	text-align: center;
}

.pf-mes span {
	display: grid;
	align-content: start;
	gap: 3px;
	min-height: 76px;
	padding: 6px;
	border-radius: var(--ld-r-chico);
	background: var(--ld-papel);
}

.pf-mes b {
	color: var(--ld-pl-sub);
	font-weight: 500;
}

.pf-mes .is-hoy b {
	color: var(--ld-pl-accent-ink);
	font-weight: 700;
}

.pf-mes i {
	height: 6px;
	border-radius: var(--ld-r-pildora);
	background: var(--ld-pl-accent);
}

.pf-tabla {
	display: grid;
	grid-template-columns: repeat(var(--pf-columnas), minmax(0, 1fr));
	gap: 6px;
}

.pf-tabla small {
	padding-inline: 8px;
	color: var(--ld-pl-muted);
	font-size: inherit;
}

.pf-tabla span {
	display: flex;
	align-items: center;
	min-height: 40px;
	padding: 6px 8px;
	border-radius: var(--ld-r-chico);
	background: var(--ld-papel);
	color: var(--ld-pl-sub);
	overflow-wrap: anywhere;
}

.pf-tabla .is-nombre {
	color: var(--ld-pl-text);
	font-weight: 500;
}

.pf-tabla i {
	padding: 2px 8px;
	border-radius: var(--ld-r-pildora);
	font-style: normal;
	font-weight: 500;
}

/* El estado no se parte en dos renglones. En el teléfono la lista de turnos deja afuera el servicio, para que entre. */
.pf-tabla i {
	white-space: nowrap;
}

.pf-pantalla-reservas .pf-tabla {
	grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}

.pf-pantalla-reservas .pf-tabla > :nth-child(4n + 3) {
	display: none;
}

.pf-tabla .is-ok {
	background: var(--ld-pl-accent-weak);
	color: var(--ld-pl-accent-ink);
}

.pf-tabla .is-espera {
	background: var(--ld-pl-hair);
	color: var(--ld-pl-sub);
}

.pf-cifras {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
}

.pf-cifras span {
	display: grid;
	gap: 2px;
	padding: 10px;
	border-radius: var(--ld-r-chico);
	background: var(--ld-papel);
}

.pf-cifras b {
	color: var(--ld-pl-text);
	font-size: var(--ld-letra-pieza);
	font-weight: 600;
}

.pf-cifras small {
	color: var(--ld-pl-muted);
	font-size: inherit;
}

.pf-barras {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	height: 128px;
	margin-top: 6px;
	padding: 12px;
	border-radius: var(--ld-r-chico);
	background: var(--ld-papel);
}

.pf-barras i {
	flex: 1;
	height: calc(var(--v) * 1%);
	border-radius: var(--ld-r-pildora);
	background: var(--ld-pl-accent);
}

/* ---------- Las integraciones y las funciones: la misma tarjeta (su pieza arriba, su texto debajo) ---------- */

.pf-integraciones,
.pf-funciones,
.pf-pasos {
	display: grid;
	gap: 32px;
}

.pf-integraciones li,
.pf-funciones li,
.pf-pasos li {
	position: relative;
	grid-template-columns: minmax(0, 1fr);
	min-width: 0;
	display: grid;
	justify-items: start;
	align-content: start;
	gap: 8px;
	padding: 12px 12px 28px;
	border-radius: var(--ld-r-tarjeta);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra);
}

.pf-integraciones .ld-pieza,
.pf-funciones .ld-pieza,
.pf-pasos .ld-pieza {
	width: 100%;
	margin-bottom: 14px;
}

.pf-integraciones li > h3,
.pf-integraciones li > p,
.pf-funciones li > h3,
.pf-funciones li > p,
.pf-pasos li > h3,
.pf-pasos li > p {
	padding-inline: 12px;
}

/* Las piezas propias de esta página, con las formas del producto. */

/* Quiénes se anotaron a una hora: sus fotos, una pegada a la otra. */
.pf-caras img {
	width: 48px;
	height: 48px;
	margin-left: -12px;
	border: 3px solid var(--ld-suelo);
	border-radius: var(--ld-r-redondo);
	background: var(--ld-papel);
	object-fit: cover;
}

.pf-caras img:first-child {
	margin-left: 0;
}

/* Un cupón de descuento: cuánto descuenta y, tras la línea de corte, su código. */
.pf-cupon {
	display: flex;
	align-items: stretch;
	overflow: hidden;
	border-radius: var(--ld-r-pieza);
	background: var(--ld-tinta);
	box-shadow: var(--ld-sombra);
	color: var(--ld-nube);
	font-size: var(--ld-letra-nota);
	line-height: 1.3;
}

.pf-cupon > span {
	display: grid;
	align-content: center;
	padding: 14px 14px 14px 16px;
}

.pf-cupon b {
	color: var(--ld-papel);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-seccion);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.pf-cupon i {
	display: grid;
	place-items: center;
	padding: 14px 16px 14px 14px;
	border-left: 2px dashed var(--ld-tinta-linea);
	color: var(--ld-papel);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-pieza);
	font-style: normal;
	font-weight: 600;
	letter-spacing: .06em;
}

/* Una cuponera: sus usos en fila, los gastados tildados. */
.pf-cuponera {
	display: grid;
	gap: 14px;
	width: 100%;
	max-width: 300px;
	padding: 16px 18px 18px;
	border-radius: var(--ld-r-pieza);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra);
}

.pf-cuponera > span:first-child {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	color: var(--ld-gris);
	font-size: var(--ld-letra-nota);
}

.pf-cuponera small {
	font-size: inherit;
	font-weight: 500;
}

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

.pf-cuponera-usos {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 6px;
}

.pf-cuponera-usos i {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border: 2px dashed var(--ld-nube);
	border-radius: var(--ld-r-redondo);
	color: var(--ld-papel);
}

.pf-cuponera-usos .is-usado {
	border: 0;
	background: var(--ld-azul);
}

/* Un servicio cargado, como lo ve el cliente: el nombre, el precio y su detalle. */
.pf-servicio {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 6px 16px;
	width: 100%;
	max-width: 300px;
	padding: 18px 20px;
	border-radius: var(--ld-r-pieza);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra);
}

.pf-servicio b {
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-base);
	font-weight: 600;
	line-height: 1.3;
}

.pf-servicio small {
	grid-column: 1 / -1;
	color: var(--ld-gris);
	font-size: var(--ld-letra-nota);
}

/* La semana de trabajo: los días que se atiende (el que no, apagado) y de qué hora a qué hora. */
.pf-semana {
	display: grid;
	justify-items: center;
	gap: 14px;
}

.pf-semana > span {
	display: flex;
	gap: 5px;
}

.pf-semana i {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-tinta);
	color: var(--ld-papel);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-nota);
	font-style: normal;
	font-weight: 600;
}

.pf-semana .is-cerrado {
	border: 1.5px dashed var(--ld-nube);
	background: none;
	color: var(--ld-tenue);
}

.pf-semana b {
	padding: 8px 18px;
	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;
}

/* El logo original de cada herramienta, solo en su pieza (cada archivo trae un aire distinto alrededor). */
.pf-integra img {
	display: block;
	width: 190px;
	max-width: 80%;
	height: auto;
}

/* «Llegá a nuevos clientes»: una búsqueda que encuentra el perfil del negocio, y ese perfil con su botón. */
.pf-busqueda {
	display: grid;
	gap: 16px;
	max-width: 980px;
	margin-inline: auto;
}

.pf-busqueda-ventana {
	display: grid;
	gap: 16px;
	padding: 20px;
	border-radius: var(--ld-r-tarjeta);
	background: var(--ld-suelo);
}

.pf-busqueda-campo {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding-inline: 18px;
	border-radius: var(--ld-r-pildora);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra);
	color: var(--ld-tinta);
	font-size: var(--ld-letra-pieza);
}

.pf-busqueda-campo span {
	flex: 1;
	min-width: 0;
}

.pf-busqueda-campo > svg:last-child {
	color: var(--ld-azul);
}

.pf-resultado {
	display: grid;
	gap: 6px;
	padding: 16px 18px;
	border-radius: var(--ld-r-pieza);
	background: var(--ld-papel);
	color: var(--ld-gris);
	font-size: var(--ld-letra-nota);
	line-height: 1.45;
}

.pf-resultado.is-primero {
	box-shadow: var(--ld-sombra-flota);
}

.pf-resultado-sitio {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--ld-letra-mini);
	overflow-wrap: anywhere;
}

.pf-resultado-sitio img {
	width: 28px;
	height: 28px;
	border-radius: var(--ld-r-redondo);
}

.pf-resultado-sitio span {
	display: grid;
}

.pf-resultado-sitio b {
	color: var(--ld-tinta);
	font-size: var(--ld-letra-nota);
	font-weight: 500;
}

.pf-resultado-titulo {
	color: var(--ld-azul-tinta);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-subtitulo);
	font-weight: 600;
	line-height: 1.25;
}

.pf-resultado-enlaces {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.pf-resultado-enlaces span {
	padding: 5px 14px;
	border: 1px solid var(--ld-linea);
	border-radius: var(--ld-r-pildora);
	color: var(--ld-azul-tinta);
	font-weight: 500;
}

/* Los resultados de abajo: sólo su forma, apagada. */
.pf-resultado.is-otro {
	gap: 10px;
	opacity: .7;
}

.pf-resultado.is-otro i {
	height: 10px;
	border-radius: var(--ld-r-pildora);
	background: var(--ld-linea);
}

.pf-resultado.is-otro i:nth-child(1) {
	width: 34%;
}

.pf-resultado.is-otro i:nth-child(2) {
	width: 72%;
	height: 14px;
}

.pf-resultado.is-otro i:nth-child(3) {
	width: 90%;
}

/* El perfil del negocio en Agendate (la piel del directorio: logo, rubro, estado, servicios y su botón). */
.pf-perfil {
	display: grid;
	align-content: start;
	gap: 14px;
	padding: 20px;
	border-radius: var(--ld-r-tarjeta);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra-flota);
}

.pf-perfil-cabeza {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--ld-gris);
	font-size: var(--ld-letra-nota);
	line-height: 1.35;
}

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

.pf-perfil-cabeza span {
	display: grid;
}

.pf-perfil-cabeza b {
	color: var(--ld-tinta);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-base);
	font-weight: 600;
}

.pf-perfil-estado {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	gap: 8px;
	padding: 5px 12px;
	border-radius: var(--ld-r-pildora);
	background: var(--ld-suelo);
	color: var(--ld-ok);
	font-size: var(--ld-letra-nota);
	font-weight: 500;
}

.pf-perfil-estado i {
	width: 8px;
	height: 8px;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-ok);
}

.pf-perfil ul {
	display: grid;
}

.pf-perfil li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding-block: 10px;
	color: var(--ld-gris);
	font-size: var(--ld-letra-pieza);
}

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

.pf-perfil li b {
	color: var(--ld-tinta);
	font-weight: 600;
	white-space: nowrap;
}

/* (Es el dibujo de un botón dentro de la pieza: no se toca.) */
.pf-perfil-boton {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 56px 0 24px;
	border-radius: var(--ld-r-pildora);
	background: var(--ld-azul);
	color: var(--ld-papel);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-pieza);
	font-weight: 600;
}

/* ---------- Quiénes la usan: los rubros y, al lado, una reserva de ejemplo que cambia con el rubro ---------- */

.pf-rubros {
	position: relative;
	display: grid;
	gap: 8px;
}

.pf-rubro-boton,
.pf-aviso-boton {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	width: 100%;
	min-height: 76px;
	padding: 14px 16px;
	border: 0;
	border-radius: var(--ld-r-pieza);
	background: none;
	color: var(--ld-tinta);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color 200ms ease, box-shadow 200ms ease;
}

.pf-rubro-icono {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-suelo);
	color: var(--ld-tenue);
	transition: background-color 200ms ease, color 200ms ease;
}

.pf-rubro-nombre {
	display: grid;
	gap: 2px;
	min-width: 0;
	color: var(--ld-tenue);
	line-height: 1.4;
}

.pf-rubro-nombre b {
	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;
}

.pf-rubro-nombre small {
	font-size: var(--ld-letra-pieza);
}

.pf-rubro.is-activo .pf-rubro-boton {
	background: var(--ld-suelo);
}

.pf-rubro.is-activo .pf-rubro-icono {
	background: var(--ld-azul);
	color: var(--ld-papel);
}

.pf-rubro.is-activo .pf-rubro-nombre {
	color: var(--ld-gris);
}

/* El rubro elegido muestra su foto (gente de verdad trabajando) y, encima, su reserva de ejemplo. En el teléfono se
   abre debajo de su renglón. El dueño, 13-10-2026: «todo lo que tiene que ver con imágenes reales con personas
   siempre creo que empatiza un poco más … me da un poco de pena perder todas las imágenes reales que tenemos en la
   sección … pueden ir atrás del mockup del ticket con la reserva confirmada. Que cada uno de los rubros cambie todo
   el fondo de atrás». */
.pf-rubro-escena {
	position: relative;
	display: none;
	align-items: end;
	justify-items: center;
	/* (Alto de sobra: por encima del ticket se tienen que ver las caras de la foto.) */
	min-height: 540px;
	margin: 8px 0 20px;
	padding: 16px;
	overflow: hidden;
	border-radius: var(--ld-r-tarjeta);
	background: var(--ld-suelo);
}

.pf-rubro.is-activo .pf-rubro-escena {
	display: grid;
}

.pf-rubro-foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 12%;
}

.pf-rubro-escena .pf-boleta {
	position: relative;
}

/* (Sobre una foto, la línea de corte va sin sus muescas: no hay un fondo liso que las dibuje.) */
.pf-rubro-escena .ld-perforado::before,
.pf-rubro-escena .ld-perforado::after {
	content: none;
}

/* El ticket del producto: oscuro, con la hoja del día, su sello y la línea perforada (las piezas de las landings). */
.pf-boleta {
	--ld-cierre-aire: 24px;
	display: grid;
	gap: 18px;
	width: 100%;
	max-width: 420px;
	padding: 24px var(--ld-cierre-aire);
	overflow: hidden;
	border-radius: var(--ld-r-tarjeta);
	background: var(--ld-tinta);
	box-shadow: var(--ld-sombra-flota);
	color: var(--ld-nube);
	font-size: var(--ld-letra-nota);
	line-height: 1.4;
}

.pf-boleta-arriba {
	display: flex;
	align-items: center;
	gap: 18px;
}

.pf-boleta .ld-hoja {
	width: 84px;
	padding: 10px 0 12px;
	border-radius: var(--ld-r-dia);
	flex: none;
}

.pf-boleta .ld-hoja b {
	font-size: var(--ld-letra-seccion);
}

.pf-boleta-hora {
	display: grid;
	justify-items: start;
	gap: 8px;
}

.pf-boleta-hora b {
	color: var(--ld-papel);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-seccion);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
}

.pf-boleta-hora i,
.pf-cierre-sello {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 14px 5px 10px;
	border-radius: var(--ld-r-pildora);
	background: var(--ld-ok);
	color: var(--ld-papel);
	font-size: var(--ld-letra-nota);
	font-style: normal;
	font-weight: 500;
}

.pf-boleta .ld-perforado {
	margin: 2px 0 2px calc(-1 * var(--ld-cierre-aire));
}

.pf-boleta .ld-perforado::before,
.pf-boleta .ld-perforado::after {
	background: var(--pf-muesca, var(--ld-papel));
}

.pf-boleta-fila {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
}

.pf-boleta-fila > span:first-child {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-tinta-linea);
	color: var(--ld-papel);
}

.pf-boleta-fila > span:nth-child(2) {
	display: grid;
	min-width: 0;
}

.pf-boleta-fila b {
	color: var(--ld-papel);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-base);
	font-weight: 600;
	line-height: 1.3;
}

.pf-boleta-fila > b {
	white-space: nowrap;
}

/* Los negocios de verdad: logo, nombre y rubro. Cada uno lleva a su perfil. */
.pf-recientes {
	display: grid;
	justify-items: center;
	gap: 28px;
	margin-top: var(--pf-hueco);
	padding-top: var(--pf-hueco);
	border-top: 1px solid var(--ld-linea);
}

.pf-recientes ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 40px;
	width: 100%;
}

.pf-recientes li {
	flex: 0 1 100%;
	min-width: 0;
}

.pf-recientes li a {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	min-height: 64px;
	padding-block: 8px;
	color: var(--ld-gris);
	font-size: var(--ld-letra-nota);
	line-height: 1.35;
	text-decoration: none;
}

.pf-recientes li img {
	width: 48px;
	height: 48px;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-suelo);
	object-fit: cover;
}

.pf-recientes li span {
	display: grid;
	min-width: 0;
}

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

.pf-recientes li a:hover b {
	color: var(--ld-azul-tinta);
}

/* (En el teléfono, seis: la lista no se hace larga.) */
.pf-recientes li:nth-child(n + 7) {
	display: none;
}

.pf-recientes-todos {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--ld-toque);
	color: var(--ld-azul-tinta);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-pieza);
	font-weight: 600;
	text-decoration: none;
}

.pf-recientes-todos:hover {
	text-decoration: underline;
}

/* ---------- Lo que ganás: tres cifras, sin cajas ---------- */

.pf-beneficios {
	display: grid;
}

.pf-beneficios li {
	display: grid;
	justify-items: center;
	align-content: start;
	gap: 8px;
	padding-block: 36px;
	text-align: center;
}

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

.pf-beneficios li:first-child {
	padding-top: 0;
}

.pf-beneficios li:last-child {
	padding-bottom: 0;
}

.pf-beneficios b {
	margin-bottom: 8px;
	color: var(--ld-azul);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-titular);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
}

.pf-beneficios p {
	max-width: 19em;
}

/* ---------- Los testimonios ---------- */

.pf-testimonios {
	display: grid;
	gap: 24px;
}

/* Las cuatro miden lo mismo: la firma queda abajo. */
.pf-testimonio {
	display: grid;
	grid-template-rows: 1fr auto;
	gap: 28px;
	height: 100%;
	padding: 28px 24px;
	border-radius: var(--ld-r-tarjeta);
	background: var(--ld-suelo);
}

.pf-testimonio blockquote {
	margin: 0;
	color: var(--ld-tinta);
	font-size: var(--ld-letra-bajada);
	line-height: 1.5;
	text-wrap: pretty;
}

.pf-testimonio figcaption {
	display: flex;
	align-items: center;
	gap: 14px;
}

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

.pf-testimonio figcaption span {
	display: grid;
	color: var(--ld-gris);
	font-size: var(--ld-letra-nota);
	line-height: 1.4;
}

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

/* ---------- Cómo empezar: tres pasos y dos boletos ---------- */

/* Cada paso es una tarjeta como las de las funciones: su pieza arriba y su texto; el número del paso asoma de la esquina. */
.pf-pasos .ld-numero {
	position: absolute;
	top: -12px;
	left: -12px;
	background: var(--ld-azul);
	color: var(--ld-papel);
	box-shadow: var(--ld-sombra);
}

.pf-empezar {
	display: grid;
	justify-items: center;
	margin-top: var(--pf-aire);
}

.pf-empezar .pc-boletos {
	width: 100%;
	margin-top: var(--pf-hueco);
}

.pf-empezar .pf-recientes-todos {
	margin-top: 28px;
}

/* El boleto de precios, con lo que trae cada forma de empezar en vez de la hoja de profesionales. */
.pf-boleto .pc-boleto-cuerpo {
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

.pf-boleto .pf-tildes {
	gap: 10px;
	font-size: var(--ld-letra-pieza);
}

.pf-boleto.is-destacado .pf-tildes {
	color: var(--ld-papel);
}

.pf-boleto .pc-precio small {
	font-size: inherit;
}

/* ---------- El cierre: el ticket de las landings, con la hoja de hoy y el título bien grande ---------- */

.pf-final {
	padding-bottom: var(--pf-aire);
}

.pf-cierre {
	position: relative;
	isolation: isolate;
	padding-block: clamp(56px, 9vw, 104px) clamp(40px, 7vw, 72px);
}

/* Un resplandor del azul de la marca, arriba: el ticket no es una caja plana. */
.pf-cierre::before {
	content: '';
	position: absolute;
	inset: -40% -10% auto;
	z-index: -1;
	height: 120%;
	background: radial-gradient(closest-side, var(--ld-azul), transparent);
	opacity: .42;
}

.pf-cierre-hoja {
	width: 92px;
	padding: 10px 0 12px;
	border-radius: var(--ld-r-dia);
	box-shadow: var(--ld-sombra-flota);
	transform: rotate(-4deg);
}

.pf-cierre-hoja b {
	font-size: var(--ld-letra-seccion);
}

.pf-cierre-titulo {
	max-width: 11em;
	margin-top: 32px;
	font-size: var(--ld-letra-titular);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.pf-cierre .ld-parrafo {
	margin-top: 24px;
	color: var(--ld-papel);
}

.pf-cierre-puntos {
	display: grid;
	justify-items: start;
	gap: 12px;
	margin-top: 36px;
	color: var(--ld-nube);
	font-size: var(--ld-letra-pieza);
	text-align: left;
}

.pf-cierre-puntos li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.pf-cierre-puntos svg {
	color: var(--ld-papel);
	flex: none;
}

.pf-cierre .ld-perforado {
	margin-top: 48px;
}

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

.pf-cierre .ld-nota {
	max-width: 30em;
	margin-top: 20px;
}

/* ---------- La atención y el botón de WhatsApp ---------- */

.pf-ayuda {
	display: grid;
	gap: 16px;
	padding-block: 8px 40px;
	border-bottom: 1px solid var(--ld-linea);
}

.pf-ayuda-texto {
	display: grid;
	gap: 2px;
	color: var(--ld-gris);
}

.pf-ayuda-texto b {
	color: var(--ld-tinta);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-subtitulo);
	font-weight: 600;
}

.pf-ayuda-texto a {
	display: inline-flex;
	align-items: center;
	min-height: var(--ld-toque);
	color: var(--ld-tinta);
	font-weight: 600;
	text-decoration: none;
}

.pf-ayuda-enlaces {
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
}

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

.pf-ayuda-enlaces a:hover,
.pf-ayuda-texto a:hover {
	color: var(--ld-azul-tinta);
	text-decoration: underline;
}

.pf-redes {
	display: flex;
	gap: 12px;
}

.pf-redes a {
	display: grid;
	place-items: center;
	width: var(--ld-toque);
	height: var(--ld-toque);
	border-radius: var(--ld-r-redondo);
	background: var(--ld-papel);
	color: var(--ld-tinta);
	box-shadow: var(--ld-sombra);
}

/* (El pie viene después de la atención: sin el aire de arriba.) */
.agdt-secundaria-profesionales .ld-pie,
.agdt-secundaria-inicio .ld-pie {
	margin-top: 40px;
}

/* El botón de WhatsApp: en el teléfono flota por encima del botón fijo de crear la agenda. */
.pf-flota {
	position: fixed;
	right: 16px;
	bottom: calc(96px + env(safe-area-inset-bottom, 0px));
	z-index: 15;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-wsp);
	color: var(--ld-papel);
	box-shadow: var(--ld-sombra-flota);
	transition: transform 160ms var(--ld-sale);
}

.pf-flota:active {
	transform: scale(.94);
}

/* ---------- Desde la tableta ---------- */

@media (min-width: 600px) {
	.ld-menu-largo {
		display: inline;
	}

	.ld-menu-corto {
		display: none;
	}

	.ld-menu a {
		padding-inline: 14px;
	}

	.pf-acciones {
		display: flex;
		justify-content: center;
		width: auto;
	}

	.pf-recientes li {
		flex-basis: calc((100% - 40px) / 2);
	}

	.pf-recientes li:nth-child(n + 7) {
		display: block;
	}

	.pf-pantalla-reservas .pf-tabla {
		grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
	}

	.pf-pantalla-reservas .pf-tabla > :nth-child(4n + 3) {
		display: flex;
	}

	.pf-cierre-puntos {
		grid-template-columns: repeat(2, auto);
		gap: 12px 36px;
	}
}

@media (min-width: 768px) {
	.pf-portada {
		padding-top: 56px;
	}

	.pf-reserva,
	.pf-integraciones {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Las funciones y los pasos, de a dos (de a tres sus piezas no entran hasta 1200). */
	.pf-funciones,
	.pf-pasos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pf-rubro-escena {
		min-height: 600px;
		padding: 24px;
	}

	.pf-reserva {
		gap: 28px;
	}

	.pf-escenario {
		height: 320px;
		padding-top: 32px;
	}

	.pf-escenario .ld-telefono {
		--ld-tel-k: .42;
	}

	.pf-reserva-texto {
		grid-template-columns: minmax(0, 1fr);
	}

	.pf-reserva-texto .ld-numero {
		grid-row: auto;
		margin-bottom: 6px;
	}

	/* Las pestañas, en un renglón, al centro. */
	.pf-areas-pestanas {
		display: flex;
		justify-content: center;
		width: fit-content;
		margin-inline: auto;
		padding: 6px;
		border-radius: var(--ld-r-pildora);
		background: var(--ld-suelo);
	}

	.pf-areas-pestanas button {
		padding-inline: 22px;
		background: none;
	}

	.pf-pantalla {
		padding: 28px;
		font-size: var(--ld-letra-nota);
	}

	/* Las tres cifras en un renglón, separadas por una línea. */
	.pf-beneficios {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.pf-beneficios li,
	.pf-beneficios li:first-child,
	.pf-beneficios li:last-child {
		padding: 8px 28px;
	}

	.pf-beneficios li + li {
		border-top: 0;
		border-left: 1px solid var(--ld-linea);
	}

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

	.pf-testimonio {
		padding: 40px;
	}

	/* La búsqueda a la izquierda y el perfil a la derecha, un poco más abajo y encimado: uno lleva al otro. */
	.pf-busqueda {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		align-items: center;
		gap: 0;
	}

	.pf-busqueda-ventana {
		padding: 28px;
	}

	.pf-perfil {
		margin-left: -32px;
		padding: 24px;
	}

	.pf-boleto {
		grid-template-columns: minmax(0, 1fr) 452px;
	}

	.pf-boleto .pc-boleto-cuerpo {
		padding: 32px 36px;
	}

	.pf-boleto .pc-talon {
		grid-template-columns: minmax(0, 1fr) 228px;
	}

	.pf-cierre-puntos {
		grid-template-columns: repeat(4, auto);
		gap: 12px 28px;
	}

	.pf-ayuda {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 12px 40px;
	}

	.pf-ayuda-enlaces {
		grid-column: 1;
	}

	.pf-redes {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.pf-flota {
		right: 24px;
		bottom: 24px;
	}
}

@media (min-width: 1024px) {
	/* El menú, en la barra, junto al logo. */
	.agdt-secundaria-profesionales .ld-barra,
	.agdt-secundaria-inicio .ld-barra {
		flex-wrap: nowrap;
	}

	.ld-menu {
		order: 0;
		flex-basis: auto;
		margin: 0 auto 0 28px;
		padding: 4px 8px;
	}

	.ld-menu a {
		font-size: var(--ld-letra-pieza);
	}

	/* En la portada, lado a lado: el panel (lo que el negocio compra) ocupa lo ancho y el teléfono va a su derecha. */
	.pf-vitrina {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 48px;
	}

	/* Del mismo alto: assets/js/profesionales.js calcula a cuánto se achica el teléfono para igualar al panel (sin el
	   programa queda a esta medida, que es la de 1280). El dueño, 13-10-2026: «tenés que igualar el alto del mockup
	   del dashboard con el alto del mockup del teléfono». */
	.pf-vitrina-telefono .ld-telefono {
		--ld-tel-k: var(--pf-tel-k, .56);
	}

	.pf-reserva {
		gap: 40px;
	}

	.pf-escenario {
		height: 420px;
		padding-top: 40px;
	}

	.pf-escenario .ld-telefono {
		--ld-tel-k: .6;
	}

	/* Texto y pieza lado a lado. */
	.pf-dos {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		gap: 96px;
	}

	.pf-areas-paneles {
		margin-top: 56px;
	}

	.pf-area {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: center;
		gap: 80px;
	}

	.pf-area-texto {
		gap: 28px;
	}

	.pf-pantalla {
		align-content: center;
		min-height: 380px;
	}

	.pf-mes span {
		min-height: 128px;
	}

	.pf-tabla span {
		min-height: 52px;
	}

	.pf-barras {
		height: 180px;
	}

	/* Los rubros a la izquierda; a la derecha, en un escenario, la reserva del rubro elegido. */
	.pf-rubros {
		--pf-muesca: var(--ld-suelo);
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		column-gap: 56px;
	}

	.pf-rubros::after {
		content: '';
		grid-column: 2;
		grid-row: 1 / span 7;
		border-radius: var(--ld-r-tarjeta);
		background: var(--ld-suelo);
	}

	/* El teléfono de los WhatsApp, apenas girado hacia el texto (visto un poco de costado). */
	.pf-telefono {
		--pf-giro: -18deg;
	}

	.pf-rubro {
		grid-column: 1;
	}

	/* La foto y su reserva ocupan toda la columna de la derecha; al cambiar de rubro, una se funde en la otra. */
	.pf-rubro-escena,
	.pf-rubro.is-activo .pf-rubro-escena {
		position: absolute;
		z-index: 1;
		inset: 0 0 0 calc(5 / 11 * (100% - 56px) + 56px);
		display: grid;
		align-items: end;
		justify-items: start;
		min-height: 0;
		margin: 0;
		padding: 32px;
		visibility: hidden;
		opacity: 0;
		transition: opacity 420ms ease, visibility 0s linear 420ms;
	}

	.pf-rubro.is-activo .pf-rubro-escena {
		visibility: visible;
		opacity: 1;
		transition-delay: 0s;
	}

	.pf-rubro-escena .pf-boleta {
		transform: translateY(12px);
		transition: transform 420ms var(--ld-sale);
	}

	.pf-rubro.is-activo .pf-boleta {
		transform: none;
	}

	.pf-rubro-boton:hover {
		background: var(--ld-suelo);
	}

	.pf-aviso-boton:hover {
		background: var(--ld-papel);
	}

	.pf-recientes li {
		flex-basis: calc((100% - 120px) / 4);
	}

	.pf-cierre-hoja {
		width: 104px;
	}
}

/* (Sólo en la tableta: si la última tarjeta queda sola, va al centro.) */
@media (min-width: 768px) and (max-width: 1199.98px) {
	.pf-funciones li:last-child:nth-child(odd),
	.pf-pasos li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc(50% - 16px);
	}
}

@media (min-width: 1200px) {
	.pf-funciones,
	.pf-pasos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.pf-escenario {
		height: 480px;
		padding-top: 48px;
	}

	.pf-escenario .ld-telefono {
		--ld-tel-k: .74;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pf-gira,
	.pf-flota,
	.pf-area,
	.pf-rubro-escena,
	.pf-rubro-escena .pf-boleta,
	.pf-rubro-boton,
	.pf-aviso-boton,
	.pf-rubro-icono,
	.pf-areas-pestanas button {
		transition: none;
	}

	.pf-telefono .ld-telefono,
	.pf-telefono::after,
	.pf-telefono .ld-wsp-hilo.is-cambia > :not([hidden]) {
		animation: none;
	}
}