/*

Estilos de la sección "Promo cita"

*/

.promo-cita {
	background-color: var(--banner-bg);
}

.promo-cita > .section-content {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;

	margin: 4rem auto;
}

.promo-cita > .section-content > .card {
	all: unset;
	width: 100%;
	/* background-color: rgb(var(--white)); */
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	color: white;
	border-radius: 2rem;
	padding: 2rem;
	box-sizing: border-box;
}

.promo-cita > .section-content > .card > .title {
	font-weight: bold;
	font-size: 3rem;
	text-align: center;
	width: 100%;
}

.promo-cita > .section-content > .card > .description {
	text-align: center;
	width: fit-content;
	margin: 20px auto 0;
	color: white;
	font-size: 2em;
}

.promo-cita > .section-content > button {
	cursor: pointer;
	width: auto;
	margin: 2rem auto 0;
	display: block;
	box-sizing: border-box;
	background-color: var(--hero-button-bg);
	color: rgb(var(--white));
	text-transform: uppercase;
}

.promo-cita > button:active {
	transform: scale(0.98);
	/* Reduce el tamaño del botón al presionarlo */
	transition: transform 0.2s;
	/* Agrega una transición suave */
}

@media only screen and (max-width: 980px) /*, (pointer: coarse) */ {
	.promo-cita > button {
		margin: 1rem 0 1rem 0;
		font-size: 2rem;
	}
}