/*
 * La página de inicio: la que le habla a quien reserva. Viste con las piezas de la página para profesionales
 * (profesionales.css: la portada centrada, las etiquetas, las tarjetas con su pieza, los teléfonos que flotan, las
 * cifras, las opiniones y el cierre) y con los tokens --ld-* de las landings (landing.css). Acá va sólo lo propio: el
 * teléfono de la portada entre las fotos de la gente que atiende con turno, y las fichas de los rubros del directorio.
 * Ninguna regla escribe un color, un radio ni un tamaño de letra a mano (ver MARCA.md).
 *
 * 360:  el teléfono y, debajo, las ocho fotos de a cuatro; los rubros en fichas que bajan de renglón.
 * 768:  las ocho fotos en un renglón bajo el teléfono.
 * 1280: el teléfono al centro, con cuatro fotos a cada lado (de a dos), del alto del teléfono; «mis reservas» con el
 *       teléfono a la izquierda y el texto a la derecha.
 */

/* ---------- La portada: el formulario de reserva entre la gente que atiende con turno ---------- */

.in-vitrina {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: 24px 16px;
}

.in-vitrina-telefono {
	display: grid;
	justify-items: center;
	order: -1;
}

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

/* Las fotos: cuatro por grupo. */
.in-fotos {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	width: 100%;
}

.in-fotos img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 7;
	border-radius: var(--ld-r-chico);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra);
	object-fit: cover;
}

/* ---------- El directorio: los rubros, los negocios y el botón ---------- */

.in-directorio {
	display: grid;
	justify-items: center;
	gap: var(--pf-hueco);
}

.in-directorio .pf-recientes {
	width: 100%;
	margin-top: 0;
}

/* Los rubros con más negocios: cada ficha lleva a su lista. */
.in-rubros {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	max-width: 980px;
}

.in-rubros a {
	display: inline-flex;
	align-items: center;
	min-height: var(--ld-toque);
	padding-inline: 20px;
	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;
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease;
}

.in-rubros a:hover {
	background: var(--ld-tinta);
	color: var(--ld-papel);
}

.in-rubros a:focus-visible,
.in-cierre-ver:focus-visible {
	outline: 2px solid var(--ld-azul);
	outline-offset: 3px;
}

/* ---------- Texto y teléfono ---------- */

.in-tildes {
	margin-top: 36px;
}

.in-boton {
	margin-top: 36px;
}

/* ---------- El cierre: los tres pasos de quien tiene un negocio, y adónde seguir ---------- */

.in-cierre-pasos li b {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-azul);
	color: var(--ld-papel);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-nota);
	font-weight: 600;
	flex: none;
}

.in-cierre-ver {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--ld-toque);
	margin-top: 12px;
	color: var(--ld-papel);
	font-family: var(--ld-familia-titulo);
	font-size: var(--ld-letra-pieza);
	font-weight: 600;
	text-decoration: none;
}

.in-cierre-ver:hover {
	text-decoration: underline;
}

.in-final .ld-nota {
	margin-top: 8px;
}

/* (El cierre viene después de una franja blanca: lleva su aire arriba.) */
.in-final {
	padding-top: var(--pf-aire);
}

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

@media (min-width: 768px) {
	/* Los dos grupos de fotos, lado a lado bajo el teléfono: las ocho en un renglón. */
	.in-vitrina {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.in-vitrina-telefono,
	.in-vitrina > .ld-leido {
		grid-column: 1 / -1;
	}

	.in-fotos {
		gap: 12px;
	}

	.in-fotos img {
		border-radius: var(--ld-r-dia);
	}

	.in-cierre-pasos {
		grid-template-columns: repeat(3, auto);
	}
}

@media (min-width: 1024px) {
	/* El teléfono al centro y cuatro fotos a cada lado, de a dos: los tres bloques miden casi lo mismo de alto. */
	.in-vitrina {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		gap: 40px;
	}

	.in-vitrina-telefono {
		grid-column: 2;
		grid-row: 1;
		order: 0;
	}

	.in-vitrina-telefono .ld-telefono {
		--ld-tel-k: .66;
	}

	.in-fotos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.in-fotos-antes {
		grid-column: 1;
		grid-row: 1;
	}

	.in-fotos-despues {
		grid-column: 3;
		grid-row: 1;
	}

	.in-fotos img {
		border-radius: var(--ld-r-pieza);
	}

	/* Las de afuera, un poco más abajo: la tira no queda rígida. */
	.in-fotos-antes li:nth-child(odd),
	.in-fotos-despues li:nth-child(even) {
		transform: translateY(20px);
	}

	/* «Mis reservas»: el teléfono a la izquierda (girado hacia el texto) y el texto a la derecha. */
	.in-dos-invertida .pf-dos-imagen {
		order: -1;
	}

	.in-dos-invertida .pf-telefono {
		--pf-giro: 18deg;
	}
}