/*
 * Propósito y visión: dos tarjetas grandes con una frase.
 *
 *   Contenedor              → purpose-grid
 *     Contenedor tarjeta    → purpose-card purpose-card--red     (fondo rojo)
 *                             purpose-card purpose-card--photo   (fondo foto con degradado)
 *       Imagen (solo foto)  → purpose-card__photo
 *       Contenedor          → purpose-card__label
 *         Ícono             → purpose-card__icon
 *         Texto corto       → purpose-card__kicker
 *       Texto (la frase)    → purpose-card__quote   (<mark> subraya las palabras clave)
 */

.purpose-grid {
	--row-gap: 12px;
	--column-gap: clamp(12px, 1.6vw, 22px);

	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.purpose-card {
	--row-gap: 30px;

	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: clamp(300px, 28vw, 420px);
	padding: clamp(30px, 4vw, 60px);
	overflow: hidden;
	border-radius: clamp(26px, 3vw, 40px);
	color: #fff;
}

.purpose-card--red { background: var(--color-brand-red); }
/* Comilla decorativa de fondo (no es contenido editable). */
.purpose-card--red::before {
	content: "\201C";
	position: absolute;
	right: .02em;
	top: -.2em;
	z-index: 0;
	font-size: clamp(260px, 26vw, 420px);
	font-weight: 800;
	line-height: 1;
	color: rgba(255, 255, 255, .12);
	pointer-events: none;
}

.purpose-card--photo { background: #1d1513; }
.purpose-card--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(160deg, rgba(14, 24, 34, .55), rgba(14, 24, 34, .88));
	pointer-events: none;
}

/* La foto llena la tarjeta; se recorta el <img> interno (excepción documentada). */
.purpose-card__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}
.purpose-card__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.purpose-card__label {
	--row-gap: 0;
	--column-gap: 10px;

	position: relative;
	z-index: 2;

	display: flex;
	flex-direction: row !important; /* Elementor fija la dirección con más especificidad */
	align-items: center;
	width: fit-content;
}
.purpose-card__icon { width: auto; flex: none; color: #fff; }
/* !important: Elementor pinta el ícono con su propio color; aquí hereda el del bloque. */
.purpose-card__icon .elementor-icon { font-size: 22px; color: inherit !important; }
.purpose-card__icon svg { fill: currentColor !important; } /* Elementor pinta el SVG con su propio color */
.purpose-card__kicker {
	width: auto;
	flex: none;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .92;
}
.purpose-card__kicker p { margin: 0; }

.purpose-card__quote {
	position: relative;
	z-index: 2;
	max-width: 16em !important; /* Elementor fija max-width:100% en los widgets */
	color: #fff;
	font-family: var(--font-display);
	font-size: clamp(26px, 2.9vw, 42px);
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: 1.12;
}
.purpose-card__quote p { margin: 0; }

/* Subrayado que se dibuja al entrar en pantalla (sin JS queda dibujado). */
.purpose-card__quote mark {
	background: linear-gradient(currentColor, currentColor) 0 92% / 100% .09em no-repeat;
	color: inherit;
	transition: background-size 1.1s .5s var(--ease-out);
}
.js-anim .purpose-card__quote mark { background-size: 0 .09em; }
.purpose-card__quote.is-in mark { background-size: 100% .09em; }

@media (min-width: 1025px) {
	.purpose-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.js-anim .purpose-card__quote mark { background-size: 100% .09em; transition: none; }
}