/* =========================================================================
   Pulsoweb — Casos de éxito
   Rejilla de 2 columnas (1 en móvil). Si hay un número impar de tarjetas,
   la última ocupa la fila entera pero con el ancho de una columna, centrada.
   Sin fondo de sección: el fondo lo pone el contenedor de Elementor.

   Medidas del diseño a 1440px (tarjeta ~680px de ancho): texto 16px (subtítulo,
   año y descripción), título 36px, relleno 26px, radio 28px, separación 24px.
   Los tamaños de texto y el relleno son fluidos con clamp(…vw…): valen eso a
   1440px y bajan hasta mínimos legibles. Los controles de Elementor (Estilo)
   los sobrescriben.
   OJO: nada de container-type/cqi en las tarjetas. La contención de tamaño
   hace que Elementor calcule mal la altura del widget en sus contenedores
   flex en columna con wrap (móvil): el contenedor medía 96px y las tarjetas
   se salían por debajo.
   ========================================================================= */

.pcs-grid {
	--pcs-gap: 24px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pcs-gap);
}

/* Impar: la última tarjeta se centra en su propia fila. */
.pcs-card:last-child:nth-child(odd) {
	grid-column: 1 / -1;
	justify-self: center;
	width: calc((100% - var(--pcs-gap)) / 2);
}

/* Flex en columna (no height:100% en el hijo) para que, si el texto no cabe
   en la proporción, la tarjeta crezca en vez de desbordar. El color va por
   variable para que los estados del enlace no lo pisen (reset del tema). */
.pcs-card {
	--pcs-text: #ffffff;
	position: relative;
	display: flex;
	flex-direction: column;
	aspect-ratio: 488 / 368; /* proporción del diseño */
	border-radius: 28px;
	overflow: hidden;
	isolation: isolate; /* recorta la imagen escalada al radio en Safari */
	color: var(--pcs-text);
	text-decoration: none;
}

.pcs-card:hover,
.pcs-card:focus,
.pcs-card:active,
.pcs-card:visited {
	color: var(--pcs-text);
	text-decoration: none;
}

.pcs-card:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Imagen a sangre. !important en tamaño/radio: el tema y Elementor aplican
   reglas globales a img (height:auto, border-radius) que la descuadrarían. */
.pcs-card .pcs-card__img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	border-radius: 0 !important;
	z-index: -2;
	transition: transform 0.6s ease;
}

a.pcs-card:hover .pcs-card__img {
	transform: scale(1.03);
}

.pcs-card__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.pcs-card__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1 1 auto;
	gap: 24px;
	padding: clamp(18px, 1.8vw, 26px);
}

.pcs-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.pcs-card__meta {
	font-size: clamp(13px, 1.11vw, 16px);
	font-weight: 400;
	line-height: 1.4;
}

.pcs-card__subtitle {
	text-transform: uppercase;
}

.pcs-card__year {
	flex: 0 0 auto;
	text-align: right;
}

.pcs-card__title {
	margin: 0 0 clamp(12px, 1.95vw, 28px);
	font-size: clamp(22px, 2.5vw, 36px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	color: inherit;
}

.pcs-card__desc {
	margin: 0;
	max-width: 27em; /* ancho del bloque de texto del diseño (~430px a 16px) */
	font-size: clamp(14px, 1.11vw, 16px);
	font-weight: 400;
	line-height: 1.4;
	color: inherit;
}

/* Móvil (breakpoint del proyecto: 767px): una columna. */
@media (max-width: 767px) {
	.pcs-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.pcs-card:last-child:nth-child(odd) {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pcs-card .pcs-card__img {
		transition: none;
	}
}