/*
 * "¿Por qué trabajar con nosotros?": encabezado + mosaico de celdas.
 *
 *   Contenedor sección          → perks            (ID de ancla: por-que)
 *     Contenedor encabezado     → perks__head
 *       Título                  → perks__title
 *       Texto                   → perks__text
 *     Contenedor mosaico        → perks-bento
 *       Celda (contenedor)      → perks-bento__cell perks-bento__cell--<color>
 *         Ícono                 → perks-bento__icon
 *         Título                → perks-bento__title
 *         Texto                 → perks-bento__text
 *
 * Celdas: --stat (cifra roja), --photo (foto grande), --abe (verde), --top (tinta),
 *         --career (suave, ocupa 2 columnas), --inclusive (blanca), --wellbeing (ámbar).
 * Cifra: Título con perks-bento__stat count-up. "Top 10": Título con perks-bento__top.
 * Foto: Imagen con perks-bento__photo. Etiqueta sobre la foto: Editor de texto perks-bento__tag.
 * Países: contenedor perks-bento__chips con un Editor de texto perks-bento__chip por país
 *         (agrega perks-bento__chip--on al resaltado).
 */

.perks {
	display: flex;
	flex-direction: column;
	padding: clamp(56px, 6.5vw, 96px) var(--wrap-gutter) clamp(36px, 4vw, 56px);
}

.perks__head {
	display: flex;
	flex-direction: column !important; /* Elementor fuerza dirección/alineación en sus contenedores */
	align-items: flex-start !important;
	gap: 16px;
	margin-bottom: clamp(26px, 3.2vw, 44px);
}

.perks__title .elementor-heading-title {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.8vw, 54px);
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: 1.04;
	color: var(--color-ink);
}

.perks__text { max-width: 28em; font-size: clamp(16px, 1.3vw, 18px); color: var(--color-muted); }
.perks__text p { margin: 0; }

/* ---------- Mosaico ---------- */

.perks-bento {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-auto-rows: minmax(190px, auto);
	gap: clamp(10px, 1.2vw, 16px);
}

.perks-bento__cell {
	--cell-bg: #fff;
	--cell-color: var(--color-ink);
	--cell-text: var(--color-muted);
	--cell-icon-bg: var(--color-red-soft);
	--cell-icon-color: var(--color-brand-red);

	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 8px;
	/* Deja lugar al ícono, que va arriba a la izquierda */
	padding: clamp(84px, 7vw, 96px) clamp(20px, 2.2vw, 30px) clamp(20px, 2.2vw, 30px);
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--cell-bg);
	color: var(--cell-color);
	transition: translate .5s var(--ease-out), box-shadow .4s var(--ease-out);
}
/* `translate` (no `transform`) para no chocar con .anim.is-in */
.perks-bento__cell:hover { translate: 0 -5px; box-shadow: 0 18px 40px rgba(41, 33, 31, .12); }

.perks-bento__title .elementor-heading-title {
	font-family: var(--font-display);
	font-size: clamp(20px, 1.7vw, 25px);
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.12;
	color: var(--cell-color);
}

.perks-bento__text { max-width: var(--cell-text-max, none); }
.perks-bento__text p { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--cell-text); }

.perks-bento__icon {
	position: absolute !important; /* Elementor da position: relative a todos los widgets */
	top: clamp(18px, 2vw, 26px);
	left: clamp(20px, 2.2vw, 30px);
	width: auto !important;
}
/* Excepción: la clase queda en el wrapper del widget; se estiliza el elemento interno */
.perks-bento__icon .elementor-icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--cell-icon-bg);
	color: var(--cell-icon-color);
	font-size: 22px;
	transition: transform .5s var(--ease-out);
}
.perks-bento__icon .elementor-icon:hover { transform: rotate(-10deg) scale(1.08); }

/* ---------- Colores y formas por celda ---------- */

.perks-bento__cell--stat {
	--cell-bg: var(--color-brand-red);
	--cell-color: #fff;
	--cell-text: rgba(255, 255, 255, .9);
	--cell-text-max: 22em;
	padding-top: clamp(20px, 2.2vw, 30px);
}
/* Círculo decorativo */
.perks-bento__cell--stat::after {
	content: "";
	position: absolute;
	top: -70px;
	right: -70px;
	z-index: -1;
	width: 240px;
	height: 240px;
	border: 40px solid rgba(255, 255, 255, .08);
	border-radius: 50%;
	transition: transform 1.2s var(--ease-out);
}
.perks-bento__cell--stat:hover::after { transform: scale(1.25); }

.perks-bento__stat .elementor-heading-title {
	font-family: var(--font-display);
	font-size: clamp(64px, 7.5vw, 112px);
	font-weight: 800;
	letter-spacing: -.06em;
	line-height: .9;
	font-variant-numeric: tabular-nums;
	color: #fff;
}

.perks-bento__cell--photo {
	--cell-bg: #1D1513;
	--cell-color: #fff;
	--cell-text: rgba(255, 255, 255, .9);
	min-height: 320px;
	padding-top: clamp(20px, 2.2vw, 30px);
}
/* Degradado oscuro bajo el texto */
.perks-bento__cell--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg, rgba(24, 15, 12, .82), rgba(24, 15, 12, 0) 55%);
}
.perks-bento__photo {
	position: absolute !important; /* Elementor da position: relative a todos los widgets */
	inset: 0;
	z-index: -2;
	width: 100% !important;
	height: 100%;
}
/* Excepción: la clase queda en el wrapper del widget; se estiliza el <img> interno */
.perks-bento__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.4s var(--ease-out);
}
.perks-bento__cell--photo:hover img { transform: scale(1.06); }

.perks-bento__tag {
	position: absolute !important; /* Elementor da position: relative a todos los widgets */
	top: 20px;
	left: 22px;
	width: auto !important;
}
.perks-bento__tag p {
	margin: 0;
	padding: 5px 12px;
	border-radius: var(--radius-pill);
	background: #fff;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--color-ink);
}

.perks-bento__cell--abe {
	--cell-bg: var(--color-brand-green);
	--cell-color: #fff;
	--cell-text: rgba(255, 255, 255, .88);
	--cell-icon-bg: rgba(255, 255, 255, .16);
	--cell-icon-color: #fff;
}

.perks-bento__cell--top {
	--cell-bg: var(--color-ink);
	--cell-color: #fff;
	--cell-text: rgba(255, 255, 255, .8);
	--cell-icon-bg: rgba(255, 255, 255, .12);
	--cell-icon-color: #fff;
}
.perks-bento__top .elementor-heading-title {
	font-family: var(--font-display);
	font-size: clamp(44px, 4.4vw, 64px);
	font-weight: 800;
	letter-spacing: -.05em;
	line-height: .9;
	color: #fff;
}

.perks-bento__cell--career {
	--cell-bg: var(--color-soft);
	--cell-text-max: 30em;
	border: 1px solid var(--color-line);
}

.perks-bento__cell--inclusive {
	--cell-icon-bg: var(--color-green-soft);
	--cell-icon-color: var(--color-brand-green);
	border: 1px solid var(--color-line);
}

.perks-bento__cell--wellbeing {
	--cell-bg: var(--color-amber-soft);
	--cell-text: #6B4E00;
	--cell-icon-bg: #fff;
	--cell-icon-color: #B9771A;
}

/* ---------- Países ---------- */

.perks-bento__chips {
	display: flex;
	flex-direction: row !important; /* Elementor fuerza dirección/alineación en sus contenedores */
	flex-wrap: wrap;
	align-items: flex-start !important;
	gap: 8px;
	margin-top: 4px;
}
.perks-bento__chips > * { width: auto; }
.perks-bento__chip p {
	margin: 0;
	padding: 5px 12px;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	background: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-ink);
}
.perks-bento__chip--on p {
	border-color: var(--color-brand-red);
	background: var(--color-brand-red);
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.perks-bento__cell:hover { translate: none; }
}

@media (min-width: 768px) {
	.perks__title { flex: none; width: auto; }
	.perks__head { flex-direction: row !important; justify-content: space-between; align-items: flex-end !important; gap: 24px; }
	.perks-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.perks-bento__cell--stat,
	.perks-bento__cell--photo,
	.perks-bento__cell--career { grid-column: span 2; }
}

@media (min-width: 1025px) {
	.perks-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.perks-bento__cell--photo { grid-row: span 2; min-height: 400px; }
}