/*
 * Cinco pilares: acordeón a la izquierda y foto que cambia a la derecha.
 *
 *   Contenedor sección   → pillars
 *     Título             → pillars__title
 *     Contenedor 2 col.  → pillars__layout
 *       Contenedor lista → pillars__list
 *         Contenedor pilar → pillars__item   (uno por pilar)
 *           Título (H3)  → pillars__trigger  (el número 01-05 y la flecha son automáticos)
 *           Texto        → pillars__body     (frase de introducción + lista con viñetas)
 *       Contenedor fotos → pillars__stage
 *         Imagen         → pillars__photo    (una por pilar, EN EL MISMO ORDEN que los pilares)
 *
 * pillars.js agrega los modificadores --closed / --hidden / --layered / --ready.
 * Sin JS o dentro del editor de Elementor todo queda abierto y visible.
 */

.pillars {
	display: block;
	padding: clamp(28px, 3.5vw, 48px) var(--wrap-gutter) clamp(36px, 4.5vw, 64px);
}

.pillars__title { padding-bottom: clamp(20px, 2.4vw, 32px); }
.pillars__title .elementor-heading-title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(30px, 3.6vw, 50px);
	letter-spacing: -.04em;
	line-height: 1.04;
	color: var(--color-ink);
}

.pillars__layout {
	--row-gap: 24px;
	--column-gap: clamp(24px, 4vw, 56px);

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

.pillars__list {
	--row-gap: 0px;

	display: block;
	counter-reset: pillar;
}

.pillars__item { display: block; border-top: 1px solid var(--color-line); }
.pillars__item:last-child { border-bottom: 1px solid var(--color-line); }

/* ---- Disparador (título) ---- */
.pillars__trigger {
	position: relative;
	padding: 18px 40px 18px 46px;
	counter-increment: pillar;
	cursor: pointer;
	color: var(--color-ink);
	transition: color .3s;
}
.pillars__trigger .elementor-heading-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(18px, 1.6vw, 22px);
	letter-spacing: -.02em;
	line-height: 1.15;
	color: inherit;
}
/* Número automático (01, 02…). */
.pillars__trigger::before {
	content: counter(pillar, decimal-leading-zero);
	position: absolute;
	left: 4px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--color-brand-green);
}
/* Flecha automática. */
.pillars__trigger::after {
	content: "";
	position: absolute;
	right: 6px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2.2px solid var(--color-brand-green);
	border-bottom: 2.2px solid var(--color-brand-green);
	transform: translateY(-70%) rotate(225deg);
	transition: transform .35s;
}
.pillars__trigger:hover { color: var(--color-ink); }
.pillars__trigger:focus-visible { outline: 3px solid var(--color-brand-red); outline-offset: -3px; }

/* Cerrado (lo agrega el JS a todos menos al activo). */
.pillars__trigger--closed { color: var(--color-muted); }
.pillars__trigger--closed::before { color: var(--color-muted); }
.pillars__trigger--closed::after { border-color: var(--color-muted); transform: translateY(-70%) rotate(45deg); }

/* ---- Contenido que se abre ---- */
/* La altura abierta (--pillars-h) la mide el JS; así la apertura se anima sin depender del marcado de Elementor. */
.pillars__body {
	overflow: hidden;
	max-height: var(--pillars-h, none);
	padding-left: 46px;
	transition: max-height .4s ease;
}
.pillars__body--closed { max-height: 0; }

.pillars__body p { margin: 0 0 10px; font-size: 15.5px; color: var(--color-muted); }
.pillars__body ul { display: grid; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.pillars__body li {
	position: relative;
	padding-left: 24px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--color-muted);
}
.pillars__body li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: 12px;
	height: 7px;
	border-left: 2px solid var(--color-brand-green);
	border-bottom: 2px solid var(--color-brand-green);
	transform: rotate(-45deg);
}

/* ---- Fotos ---- */
.pillars__stage {
	--row-gap: 12px;

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	order: -1;
}
.pillars__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 22px;
}
.pillars__photo--high img { object-position: 50% 40%; }
.pillars__photo--low img { object-position: 50% 88%; }

/* Modo interactivo (lo activa el JS): las fotos se apilan y se ve una sola. */
.pillars__stage--ready {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	max-height: 420px;
	border-radius: 22px;
	background: #E9E1DC;
}
.pillars__photo--layered {
	position: absolute;
	inset: 0;
	opacity: 1;
	transition: opacity .6s, transform 1.4s var(--ease-out);
}
/* El <img> llena el panel, sin esquinas propias. */
.pillars__photo--layered img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; border-radius: 0; }
.pillars__photo--hidden { opacity: 0; transform: scale(1.06); pointer-events: none; }

@media (min-width: 768px) {
	.pillars__stage--ready { aspect-ratio: 4 / 3; }
}

@media (min-width: 1025px) {
	.pillars__layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
	.pillars__stage { order: 0; }
	.pillars__stage--ready {
		position: sticky;
		top: calc(var(--header-h) + 24px);
		aspect-ratio: 4 / 3.4;
		max-height: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pillars__body,
	.pillars__trigger::after,
	.pillars__photo--layered { transition: none; }
	.pillars__photo--hidden { transform: none; }
}