/**
 * Página de reserva dinámica.
 *
 * Todo cuelga de `.gcp-booking` para no filtrarse al resto del sitio ni chocar
 * con Astra, Elementor o los estilos propios de Amelia.
 *
 * La plantilla se inserta entre get_header() y get_footer() sin el contenedor de
 * contenido del theme, así que el centrado y el ancho máximo los resuelve este
 * archivo. No se puede dar por hecho que el theme los aporte.
 */

/* Esta hoja solo se encola en las páginas de reserva, así que es seguro
   neutralizar el contenedor del theme. En Astra `.ast-container` es flex y
   espera `#primary`/`#secondary`: con un único hijo deja el contenido pegado a
   la izquierda y estrecho en escritorio. */
.site-content .ast-container,
.site-content > .ast-container {
	display: block;
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
	width: 100%;
}

.gcp-booking {
	background: var(--gcp-bg, #f5f5f3);
	box-sizing: border-box;
	display: block;
	margin: 0 auto;
	max-width: 100%;
	padding: 56px 20px 72px;
	width: 100%;
}

.gcp-booking *,
.gcp-booking *::before,
.gcp-booking *::after {
	box-sizing: border-box;
}

.gcp-banner {
	margin: 0 auto 40px;
	max-width: 760px;
	text-align: center;
	width: 100%;
}

.gcp-banner__heading {
	color: var(--gcp-green, #2f5d50);
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.1;
	margin: 0 0 22px;
	text-align: center;
}

.gcp-banner__rule {
	background: var(--gcp-gold, #c2a15b);
	display: block;
	height: 2px;
	margin: 0 auto 40px;
	width: 200px;
}

.gcp-banner__photo {
	border-radius: 50%;
	display: block;
	height: 128px;
	margin: 0 auto 18px;
	object-fit: cover;
	/* Las fotos suelen ser apaisadas y la cara queda en el tercio superior. */
	object-position: center 28%;
	width: 128px;
}

.gcp-banner__photo--empty {
	align-items: center;
	background: var(--gcp-green, #2f5d50);
	color: #fff;
	display: flex;
	font-size: 2.4rem;
	font-weight: 700;
	justify-content: center;
	letter-spacing: .04em;
}

.gcp-banner__name {
	color: var(--gcp-green, #2f5d50);
	font-size: clamp(1.5rem, 3.4vw, 2.15rem);
	font-weight: 800;
	line-height: 1.2;
	margin: 0 0 6px;
	text-align: center;
}

.gcp-banner__service {
	color: var(--gcp-gold, #c2a15b);
	font-size: clamp(1rem, 2.2vw, 1.3rem);
	margin: 0 0 4px;
	text-align: center;
}

.gcp-banner__meta {
	color: var(--gcp-text, #3c4a45);
	font-size: .95rem;
	margin: 0;
	opacity: .75;
	text-align: center;
}

/* El widget de Amelia trae su propio ancho; hay que acotarlo y centrarlo o en
   pantallas grandes se pega al borde izquierdo. */
.gcp-booking__widget {
	margin-left: auto;
	margin-right: auto;
	max-width: 1000px;
	width: 100%;
}

.gcp-booking__widget > *,
.gcp-booking__widget .amelia-app-booking,
.gcp-booking__widget .amelia-v2-booking {
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 100% !important;
	width: 100% !important;
}

.gcp-booking__widget #amelia-app-booking,
.gcp-booking__widget #amelia-container {
	float: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

@media (max-width: 600px) {
	.gcp-booking {
		padding: 36px 14px 48px;
	}

	.gcp-banner__rule {
		margin-bottom: 28px;
		width: 140px;
	}

	.gcp-banner__photo {
		height: 104px;
		width: 104px;
	}
}