/* ---------------------------------------------------------------------
 * Cierre editorial de /servicios/ (ver template-parts/components/
 * cierre-servicios.php) — fotografía urbana protagonista + degradado +
 * texto real superpuesto. Sin min-height fijo salvo el mínimo necesario
 * para que la foto no se vea exagerada (ver abajo): el resto lo da el
 * contenido + su padding, igual que .home-hero — nunca pantalla
 * completa, es un cierre de página, no una segunda portada.
 *
 * Rediseño 2026-10-23 (3ª corrección — márgenes consistentes + más
 * cielo/skyline): .servicios-cierre__contenido vuelve a ser un
 * .contenedor normal (1200px máximo, mismo padding lateral que el resto
 * del sitio) en vez de forzar su propio max-width/márgenes — así el
 * texto nunca queda pegado al borde real de la ventana. El bloque de
 * texto angosto (420–480px) vive ADENTRO de ese .contenedor, como un
 * hijo propio (.servicios-cierre__texto) empujado a su tercio derecho
 * con margin-inline-start:auto — nunca más ancho que ese contenedor
 * central.
 *
 * 4ª/5ª corrección (mismo día): 45% dejaba demasiado cielo plano vacío
 * arriba y las patas de la abeja casi al borde inferior de la foto; 60%
 * mejoró eso pero las patas seguían apenas cortadas. 70% baja la ventana
 * visible un poco más — patas y pies completos sobre la azotea, sin
 * volver a cortar el cuerpo por arriba.
 *
 * 6ª corrección 2026-10-23 (pedido explícito: "un poco menos alta, mejor
 * encuadre, menos espacio vacío arriba, centra más visualmente la
 * abeja" — para usarla como recurso editorial estandarizable): min-height
 * baja (menos cielo que cubrir = recorte menos exagerado) y la ventana
 * visible sube un poco más (70%→76%) para que la abeja ocupe más del
 * cuadro visible, no el cielo/skyline de fondo. */

.servicios-cierre {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	/* 7ª corrección 2026-10-23 (mismo pedido repetido: "menos alta, menos
	 * espacio innecesario, abeja mejor centrada"): otro paso hacia abajo,
	 * clamp(420,52vh,580)→clamp(380,46vh,520). */
	min-height: clamp(380px, 46vh, 520px);
	padding-block: var(--espacio-4);
	background-color: var(--color-carbon);
}

.servicios-cierre__foto-caja {
	position: absolute;
	inset: 0;
}

.servicios-cierre__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* El recorte real a este ancho es vertical (se ve el ancho completo
	 * de la foto, abeja y paisaje incluidos). 76% (antes 70%) para que la
	 * abeja quede más centrada en el cuadro visible y quede menos cielo
	 * vacío arriba. */
	/* 7ª corrección 2026-10-23: 76%→82%, un poco más de ventana baja para
	 * centrar mejor a la abeja ahora que la caja es todavía menos alta. */
	object-position: center 82%;
}

/* Degradado LOCALIZADO, mucho más sutil que antes: una mancha apenas
 * perceptible solo detrás del bloque de texto (ya movido a la derecha),
 * que se apaga antes de llegar al centro — el resto de la fotografía,
 * abeja incluida, queda intacto. */
.servicios-cierre__degradado {
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse 55% 75% at 84% 50%,
		rgba(20, 20, 20, 0.42) 0%,
		rgba(20, 20, 20, 0.22) 45%,
		rgba(20, 20, 20, 0.06) 70%,
		rgba(20, 20, 20, 0) 85%
	);
}

.servicios-cierre__contenido {
	position: relative;
	z-index: 1;
	/* Como hijo flex de .servicios-cierre, por defecto se encogería a su
	 * contenido (shrink-to-fit) en vez de ocupar el ancho de la fila —
	 * width:100% lo fuerza a comportarse como el .contenedor normal del
	 * resto del sitio (llena la fila y LUEGO se topa en 1200px, centrado
	 * por el margin-inline:auto que ya trae .contenedor). Sin max-width/
	 * margin propios además de ese: los hereda de .contenedor. */
	width: 100%;
}

.servicios-cierre__texto {
	max-width: clamp(420px, 38vw, 480px);
	/* Empuja el bloque al tercio derecho DEL CONTENEDOR (nunca del
	 * viewport completo) — la abeja, a la izquierda, se queda libre de
	 * texto. */
	margin-inline-start: auto;
}

.servicios-cierre__etiqueta {
	display: block;
	font-family: var(--font-cuerpo);
	font-weight: 700;
	font-size: var(--tamano-etiqueta);
	letter-spacing: 0.2em;
	color: var(--color-ambar);
	margin-bottom: var(--espacio-3);
}

.servicios-cierre__titulo {
	color: var(--color-blanco);
	font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem);
	line-height: 1.3;
	text-align: left;
	margin-bottom: var(--espacio-4);
}

.servicios-cierre__resaltado {
	color: var(--color-ambar);
}

.servicios-cierre__descripcion {
	color: rgba(255, 255, 255, 0.82);
	font-size: 1.0625rem;
	line-height: 1.6;
	text-align: left;
	margin-bottom: var(--espacio-4);
}

/* El botón hereda la alineación de bloque de .servicios-cierre__texto
 * (izquierda) con solo display:inline-flex — nunca se centra. */
.servicios-cierre__texto .btn {
	display: inline-flex;
}

@media (max-width: 760px) {
	/* En 1 columna angosta, object-fit:cover recorta al revés que en
	 * escritorio (ancho, no alto) — superponer el texto sobre la foto
	 * completa ya no deja un lugar fijo "libre de abeja". En vez de
	 * perseguir ese recorte, la foto pasa a ser su propia caja (alto
	 * fijo por aspect-ratio, ya no de borde a borde de la sección) y el
	 * texto va debajo, sobre el fondo carbón — la abeja queda siempre
	 * completa y el texto nunca la tapa. */
	.servicios-cierre {
		display: block;
		min-height: 0;
		padding-block: 0 var(--espacio-4);
	}

	.servicios-cierre__foto-caja {
		position: relative;
		inset: auto;
		aspect-ratio: 4 / 3;
		width: 100%;
	}

	.servicios-cierre__foto {
		/* Aquí sí se recorta a lo ancho — el encuadre propio de móvil deja
		 * la abeja (lado izquierdo de la foto original) dentro de cuadro. */
		object-position: 28% center;
	}

	/* Un velo apenas en el borde inferior de la foto, para que el primer
	 * renglón del texto (justo debajo) no arranque pegado a un corte
	 * duro — ya no necesita cargar todo el contraste, el texto vive
	 * sobre fondo carbón sólido, no sobre la foto. */
	.servicios-cierre__degradado {
		background: linear-gradient(
			0deg,
			rgba(20, 20, 20, 0.5) 0%,
			rgba(20, 20, 20, 0) 18%
		);
	}

	.servicios-cierre__contenido {
		padding-top: var(--espacio-4);
	}

	.servicios-cierre__texto {
		max-width: none;
		margin-inline-start: 0;
	}
}