/*
 * Página "Ecosistema" — TECSA (Figma PAGINA-TECSA-DESIGN, frame Desktop 164:37,
 * 1440px; secciones Hero 164:62, Beneficios 164:75, FAQ, Comunidad 164:199,
 * TecsaConnect 164:278, UneteBand 164:292).
 *
 * Entry de la página: reutiliza reset .lp, navbar y footer importando landing.css.
 * Debajo van sólo las secciones propias, con prefijo `.lp-ecopag*` (distinto de la
 * sección de landing `.lp-eco*`).
 *
 * El Figma actualizado usa Inter (sin cambio de familia) pero con una paleta y
 * tipografía nuevas: navy de texto/íconos #12294d, cian brillante #3df5ff (botones),
 * teal #2fc1d6 (filetes/badges/links), muted #6b7688 / #94a3b8. Títulos de sección
 * en Inter Black, MAYÚSCULAS y letter-spacing. Tokens `--eco-*`. Base 1440px.
 * Breakpoints del tema: tablet ≤1024, móvil ≤600.
 */

@import url('landing.css');

:root {
	--eco-navy:        #12294d; /* títulos / íconos / texto sobre blanco */
	--eco-dark:        #0a1628; /* fondos oscuros (hero, card Connect) */
	--eco-cyan:        #3df5ff; /* cian brillante — botones sobre oscuro / eyebrow */
	--eco-teal:        #2fc1d6; /* filetes, badges, links */
	--eco-muted:       #6b7688; /* texto secundario sobre blanco */
	--eco-muted-dark:  #94a3b8; /* párrafos sobre oscuro */
	--eco-card-border: #f3f4f6; /* borde de cards Comunidad */
	--eco-divider:     #e5e7eb; /* filetes Beneficios / bordes Únete */
	--eco-band:        #f5f7fa; /* bandas gris claro */
	--eco-maxw:        1280px;
}

/* ====================================================================
   HERO (foto + íconos flotantes; degradado navy a la izquierda)
   ==================================================================== */
.lp-ecopag-hero {
	background-color: var(--eco-dark);
	background-image:
		linear-gradient(90deg, var(--eco-dark) 0%, var(--eco-dark) 28%, rgba(10, 22, 40, 0.4) 50%, rgba(10, 22, 40, 0) 72%),
		url('../img/eco-hero.webp');
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat;
}
.lp-ecopag-hero__inner {
	max-width: var(--st-maxw);
	margin: 0 auto;
	padding: clamp(56px, 7vw, 100px) var(--st-pad-x);
	min-height: clamp(380px, 34vw, 500px);
	display: flex;
	align-items: center;
}
.lp-ecopag-hero__content { max-width: 520px; }
.lp-ecopag-hero__eyebrow {
	margin: 0 0 6px;
	color: var(--eco-cyan);
	font-weight: 700;
	font-size: clamp(24px, 2.7vw, 40px);
	line-height: 1.05;
	letter-spacing: 3.6px;
	text-transform: uppercase;
}
.lp-ecopag-hero__title {
	margin: 0 0 20px;
	color: #fff;
	font-weight: 900;
	font-size: clamp(48px, 6.4vw, 72px);
	line-height: 1;
	text-transform: uppercase;
}
.lp-ecopag-hero__text {
	margin: 0;
	max-width: 400px;
	color: var(--eco-muted-dark);
	font-weight: 400;
	font-size: clamp(13px, 1vw, 14px);
	line-height: 1.62;
}
.lp-ecopag-hero__rule {
	display: block;
	width: 48px;
	height: 4px;
	margin-top: 24px;
	border-radius: 999px;
	background: var(--eco-teal);
}

/* ====================================================================
   BENEFICIOS DE AFILIACIÓN (blanco, 6 columnas con filete vertical)
   ==================================================================== */
.lp-ecopag-benef {
	background: var(--st-bg);
	padding: clamp(52px, 6vw, 72px) var(--st-pad-x);
}
.lp-ecopag-benef__inner {
	max-width: var(--eco-maxw);
	margin: 0 auto;
}
.lp-ecopag-benef__head { text-align: center; margin-bottom: clamp(36px, 4vw, 48px); }
.lp-ecopag-benef__title {
	margin: 0 0 16px;
	color: var(--eco-navy);
	font-weight: 900;
	font-size: clamp(24px, 2.6vw, 30px);
	line-height: 1.2;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
.lp-ecopag-benef__rule {
	display: inline-block;
	width: 48px;
	height: 4px;
	border-radius: 999px;
	background: var(--eco-teal);
}
.lp-ecopag-benef__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
}
.lp-ecopag-benef__item {
	text-align: center;
	padding: 16px 24px;
	border-right: 1px solid var(--eco-divider);
}
.lp-ecopag-benef__item:last-child { border-right: 0; }
.lp-ecopag-benef__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 12px;
	border: 2px solid var(--eco-navy);
	border-radius: 50%;
	color: var(--eco-navy);
}
.lp-ecopag-benef__icon svg { width: 22px; height: 22px; }
.lp-ecopag-benef__item-title {
	margin: 0 0 8px;
	color: var(--eco-navy);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.25;
}
.lp-ecopag-benef__item-text {
	margin: 0;
	color: var(--eco-muted);
	font-size: 12px;
	line-height: 1.62;
}

/* ====================================================================
   PREGUNTAS FRECUENTES (banda gris, acordeón <details>)
   ==================================================================== */
/* Fondo real del Figma (node 164:150): foto de skyline con overlay claro al 72%. */
.lp-ecopag-faq {
	position: relative;
	overflow: hidden;
	background-color: var(--eco-band);
	background-image:
		linear-gradient(rgba(245, 247, 250, 0.72), rgba(245, 247, 250, 0.72)),
		url('../img/eco-faq-bg.webp');
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
	padding: clamp(52px, 6vw, 88px) var(--st-pad-x);
}
.lp-ecopag-faq__inner {
	position: relative;
	max-width: var(--eco-maxw);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(32px, 5vw, 88px);
	align-items: start;
}
.lp-ecopag-faq__title {
	margin: 0 0 16px;
	color: var(--eco-navy);
	font-weight: 900;
	font-size: clamp(24px, 2.6vw, 30px);
	line-height: 1.15;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
.lp-ecopag-faq__rule {
	display: block;
	width: 48px;
	height: 4px;
	margin-bottom: 22px;
	border-radius: 999px;
	background: var(--eco-teal);
}
.lp-ecopag-faq__lead {
	margin: 0;
	color: var(--eco-muted);
	font-size: clamp(14px, 1vw, 16px);
	line-height: 1.7;
}
.lp-ecopag-faq__list { display: flex; flex-direction: column; gap: 14px; }
.lp-ecopag-faq__item {
	background: #fff;
	border: 1px solid var(--eco-card-border);
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(18, 41, 77, 0.05);
}
.lp-ecopag-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	cursor: pointer;
	list-style: none;
	color: var(--eco-navy);
	font-weight: 600;
	font-size: clamp(14px, 1.05vw, 16px);
	line-height: 1.35;
}
.lp-ecopag-faq__q::-webkit-details-marker { display: none; }
/* Icono +/− dibujado en CSS, en teal. */
.lp-ecopag-faq__toggle {
	position: relative;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}
.lp-ecopag-faq__toggle::before,
.lp-ecopag-faq__toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--eco-teal);
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.lp-ecopag-faq__toggle::before { width: 16px; height: 2px; transform: translate(-50%, -50%); }
.lp-ecopag-faq__toggle::after { width: 2px; height: 16px; transform: translate(-50%, -50%); }
.lp-ecopag-faq__item[open] .lp-ecopag-faq__toggle::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.lp-ecopag-faq__a {
	padding: 0 22px 20px;
	color: var(--eco-muted);
	font-size: clamp(13px, 0.95vw, 15px);
	line-height: 1.7;
}
.lp-ecopag-faq__a p { margin: 0; }
.lp-ecopag-faq__a-list {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.lp-ecopag-faq__a-list li { position: relative; padding-left: 18px; }
.lp-ecopag-faq__a-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--eco-teal);
}

/* ====================================================================
   COMUNIDAD (blanco, 4 cards foto + badge teal)
   ==================================================================== */
.lp-ecopag-com {
	background: var(--st-bg);
	padding: clamp(52px, 6vw, 72px) var(--st-pad-x);
}
.lp-ecopag-com__inner {
	max-width: var(--eco-maxw);
	margin: 0 auto;
}
.lp-ecopag-com__head { text-align: center; margin-bottom: clamp(36px, 4vw, 48px); }
.lp-ecopag-com__title {
	margin: 0 0 12px;
	color: var(--eco-navy);
	font-weight: 900;
	font-size: clamp(24px, 2.6vw, 30px);
	line-height: 1.2;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
.lp-ecopag-com__sub {
	max-width: 480px;
	margin: 0 auto;
	color: var(--eco-muted);
	font-size: 14px;
	line-height: 1.42;
}
.lp-ecopag-com__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(18px, 2vw, 24px);
}
.lp-ecopag-com__card {
	background: #fff;
	border: 1px solid var(--eco-card-border);
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.lp-ecopag-com__media {
	position: relative;
	aspect-ratio: 280 / 180;
}
.lp-ecopag-com__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.lp-ecopag-com__badge {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--eco-teal);
	color: #fff;
	box-shadow: 0 4px 3px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1);
}
.lp-ecopag-com__badge svg { width: 18px; height: 18px; }
.lp-ecopag-com__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 36px 16px 24px;
}
.lp-ecopag-com__card-title {
	margin: 0 0 8px;
	color: var(--eco-navy);
	font-weight: 900;
	font-size: 14px;
	line-height: 1.42;
	letter-spacing: 0.7px;
	text-transform: uppercase;
}
.lp-ecopag-com__card-text {
	/* margin inferior 16px se restaura al reintegrar el enlace CTA (ver eco-comunidad.php). */
	margin: 0;
	color: var(--eco-muted);
	font-size: 12px;
	line-height: 1.62;
}
.lp-ecopag-com__link {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--eco-teal);
	font-weight: 700;
	font-size: 12px;
}
.lp-ecopag-com__link svg { width: 12px; height: 12px; transition: transform 0.2s ease; }
.lp-ecopag-com__link:hover svg { transform: translateX(3px); }

/* ====================================================================
   TECSA CONNECT (banda gris con card split imagen + navy)
   ==================================================================== */
.lp-ecopag-connect {
	background: var(--eco-band);
	padding: clamp(48px, 5vw, 72px) var(--st-pad-x);
}
.lp-ecopag-connect__inner {
	max-width: 1100px;
	margin: 0 auto;
}
.lp-ecopag-connect__card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--eco-dark);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.lp-ecopag-connect__media {
	min-height: 320px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.lp-ecopag-connect__content {
	padding: clamp(28px, 4vw, 40px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.lp-ecopag-connect__title {
	margin: 0 0 16px;
	color: #fff;
	font-weight: 900;
	font-size: clamp(24px, 2.6vw, 30px);
	line-height: 1.2;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
.lp-ecopag-connect__text {
	margin: 0 0 24px;
	color: var(--eco-muted-dark);
	font-size: 14px;
	line-height: 1.625;
}
/* Botón pill cian (sobreescribe el .lp-btn--accent del tema). */
.lp-btn.lp-ecopag-connect__btn {
	align-self: flex-start;
	background: var(--eco-cyan);
	color: var(--eco-dark);
	border-color: transparent;
	border-radius: 999px;
	padding: 12px 24px;
	font-weight: 900;
	font-size: 14px;
	letter-spacing: 0.35px;
}
.lp-btn.lp-ecopag-connect__btn:hover { filter: brightness(1.06); }
.lp-ecopag-connect__btn svg { width: 14px; height: 14px; }

/* ====================================================================
   BANDA "ÚNETE" (blanco, filete arriba/abajo)
   ==================================================================== */
.lp-ecopag-cta {
	background: var(--st-bg);
	border-top: 1px solid var(--eco-divider);
	border-bottom: 1px solid var(--eco-divider);
	padding: clamp(32px, 4vw, 41px) var(--st-pad-x);
}
.lp-ecopag-cta__inner {
	max-width: var(--eco-maxw);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(24px, 4vw, 64px);
	flex-wrap: wrap;
}
.lp-ecopag-cta__lead {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
}
.lp-ecopag-cta__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
	border: 2px solid var(--eco-navy);
	border-radius: 50%;
	color: var(--eco-navy);
}
.lp-ecopag-cta__icon svg { width: 20px; height: 20px; }
.lp-ecopag-cta__title {
	margin: 0 0 4px;
	color: var(--eco-navy);
	font-weight: 900;
	font-size: clamp(18px, 1.6vw, 20px);
	line-height: 1.4;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}
.lp-ecopag-cta__text {
	margin: 0;
	max-width: 480px;
	color: var(--eco-muted);
	font-size: 14px;
	line-height: 1.42;
}
.lp-ecopag-cta__actions { flex: 0 0 auto; }
.lp-ecopag-cta__btn {
	border-radius: 999px;
	border: 2px solid var(--eco-navy);
	color: var(--eco-navy);
	background: transparent;
	padding: 14px 26px;
	font-weight: 700;
	font-size: 14px;
}
.lp-ecopag-cta__btn:hover { background: var(--eco-navy); color: #fff; }
.lp-ecopag-cta__btn svg { width: 14px; height: 14px; }

/* ====================================================================
   RESPONSIVE
   ==================================================================== */
/* Tablet (≤1024). */
@media (max-width: 1024px) {
	.lp-ecopag-hero__content { max-width: 62%; }

	/* 6→3 columnas: sin filete vertical, separación por espacio. */
	.lp-ecopag-benef__grid { grid-template-columns: repeat(3, 1fr); row-gap: clamp(28px, 4vw, 40px); }
	.lp-ecopag-benef__item { border-right: 0; }

	.lp-ecopag-com__grid { grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 32px); row-gap: clamp(40px, 6vw, 52px); }
	.lp-ecopag-faq__inner { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 40px); }
	.lp-ecopag-connect__card { grid-template-columns: 1fr; }
	.lp-ecopag-connect__media { min-height: 240px; }
}

/* ≤820: la banda Únete apila el botón bajo el texto. */
@media (max-width: 820px) {
	.lp-ecopag-cta__inner { flex-direction: column; align-items: flex-start; }
	.lp-ecopag-cta__actions { width: 100%; }
	.lp-ecopag-cta__btn { width: 100%; justify-content: center; }
}

/* Móvil (≤600): hero a ancho completo (gradiente más opaco), beneficios y
   comunidad a 1/2 columnas. */
@media (max-width: 600px) {
	.lp-ecopag-hero {
		background-image:
			linear-gradient(180deg, rgba(10, 22, 40, 0.70) 0%, rgba(10, 22, 40, 0.88) 100%),
			url('../img/eco-hero.webp');
		background-position: center;
	}
	.lp-ecopag-hero__content { max-width: 100%; }
	.lp-ecopag-benef__grid { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
	.lp-ecopag-com__grid { grid-template-columns: 1fr; }
	.lp-ecopag-com__card { max-width: 420px; margin: 0 auto; width: 100%; }
}

/* ≤380: beneficios a 1 columna. */
@media (max-width: 380px) {
	.lp-ecopag-benef__grid { grid-template-columns: 1fr; }
}