/* =====================================================================
   Evolvix V2 — estilos compartidos de la suite de conversión.
   Tokens de marca, animaciones reveal-on-scroll, botones y acordeón.
   Cada widget aporta su layout; acá viven los fundamentos comunes.
   ===================================================================== */

:root {
	--evx-green-900: #0e1f1d;   /* fondo oscuro de marca */
	--evx-green-700: #1e4627;   /* verde profundo */
	--evx-teal: #1ABC9C;        /* acento principal (CTA) */
	--evx-teal-600: #16a085;    /* acento hover */
	--evx-mint: #a8d5b1;        /* verde claro */
	--evx-mint-50: #e7f4e9;     /* fondo suave */
	--evx-ink: #1a1a1a;         /* texto principal */
	--evx-muted: #5b6b63;       /* texto secundario */
	--evx-white: #ffffff;
	--evx-radius: 16px;
	--evx-radius-sm: 10px;
	--evx-shadow: 0 18px 48px rgba(14, 31, 29, 0.16);
	--evx-shadow-sm: 0 8px 24px rgba(14, 31, 29, 0.10);
	--evx-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reveal on scroll (lo dispara evolvix-v2.js) ---------- */
.evx-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s var(--evx-ease), transform 0.7s var(--evx-ease);
	will-change: opacity, transform;
}
.evx-reveal.evx-in {
	opacity: 1;
	transform: none;
}
.evx-reveal[data-evx-delay="1"] { transition-delay: 0.08s; }
.evx-reveal[data-evx-delay="2"] { transition-delay: 0.16s; }
.evx-reveal[data-evx-delay="3"] { transition-delay: 0.24s; }
.evx-reveal[data-evx-delay="4"] { transition-delay: 0.32s; }
.evx-reveal[data-evx-delay="5"] { transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
	.evx-reveal { opacity: 1; transform: none; transition: none; }
}

/* En el editor de Elementor mostramos SIEMPRE el contenido: el reveal por scroll
   puede dejar los widgets en opacity:0 mientras se edita y no verse en el canvas. */
.elementor-editor-active .evx-reveal,
body.elementor-editor-active .evx-reveal {
	opacity: 1 !important;
	transform: none !important;
}

/* ---------- Botones de conversión ---------- */
.evx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 34px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
	transition: transform 0.18s var(--evx-ease), box-shadow 0.18s var(--evx-ease),
		background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.evx-btn--primary {
	background: var(--evx-teal);
	color: var(--evx-green-900);
	box-shadow: 0 10px 26px rgba(26, 188, 156, 0.34);
}
.evx-btn--primary:hover {
	background: var(--evx-teal-600);
	color: var(--evx-white);
	transform: translateY(-2px);
	box-shadow: 0 16px 34px rgba(26, 188, 156, 0.42);
}
.evx-btn--ghost {
	background: transparent;
	color: var(--evx-white);
	border-color: rgba(255, 255, 255, 0.55);
}
.evx-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--evx-white);
	transform: translateY(-2px);
}
.evx-btn--dark {
	background: var(--evx-green-900);
	color: var(--evx-white);
}
.evx-btn--dark:hover { background: var(--evx-green-700); transform: translateY(-2px); }

/* Pulso sutil para el CTA principal — llama la atención sin marear. */
.evx-btn--pulse { animation: evx-pulse 2.6s var(--evx-ease) infinite; }
@keyframes evx-pulse {
	0%, 100% { box-shadow: 0 10px 26px rgba(26, 188, 156, 0.34); }
	50%      { box-shadow: 0 10px 26px rgba(26, 188, 156, 0.34), 0 0 0 10px rgba(26, 188, 156, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.evx-btn--pulse { animation: none; }
	.evx-btn:hover { transform: none; }
}

/* ---------- Píldoras / badges ---------- */
.evx-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 16px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.evx-pill--offer { background: #ff5a47; color: #fff; }
.evx-pill--soft  { background: var(--evx-mint-50); color: var(--evx-green-700); }

/* ---------- Acordeón (FAQ), lo controla evolvix-v2.js ---------- */
.evx-accordion-item { border-bottom: 1px solid rgba(14, 31, 29, 0.10); }
.evx-accordion-head {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 4px;
	/* !important para ganarle al estilo de botón global del Kit de Elementor
	   (que pinta todos los <button> con el color de acento del kit). */
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	text-align: left;
	font-size: 18px;
	font-weight: 700;
	color: var(--evx-ink) !important;
	cursor: pointer;
}
.evx-accordion-icon {
	flex: none;
	width: 26px;
	height: 26px;
	position: relative;
	transition: transform 0.3s var(--evx-ease);
}
.evx-accordion-icon::before,
.evx-accordion-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 2px;
	background: var(--evx-teal-600);
	transform: translate(-50%, -50%);
	transition: opacity 0.3s var(--evx-ease);
}
.evx-accordion-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.evx-accordion-item.is-open .evx-accordion-icon::after { opacity: 0; }
.evx-accordion-body {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.35s var(--evx-ease);
}
.evx-accordion-body-inner {
	padding: 0 4px 22px;
	color: var(--evx-muted);
	font-size: 16px;
	line-height: 1.65;
}

/* ---------- Utilidades de sección ---------- */
.evx-section { width: 100%; }
.evx-container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.evx-eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--evx-teal-600);
	margin: 0 0 12px;
}
.evx-h2 {
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.1;
	font-weight: 800;
	color: var(--evx-ink);
	margin: 0 0 16px;
}
.evx-lead {
	font-size: clamp(16px, 2vw, 19px);
	line-height: 1.6;
	color: var(--evx-muted);
	margin: 0;
}

/* =====================================================================
   Hero de conversión (widget Evolvix_V2_Hero).
   El widget aporta solo el markup; el layout y el look "fondo oscuro"
   viven acá. Los controles de Elementor (color de fondo/texto) ganan por
   especificidad cuando el usuario los setea.
   ===================================================================== */
.evx-hero {
	background: var(--evx-green-900);
	color: var(--evx-white);
	padding: clamp(56px, 8vw, 112px) 0;
	overflow: hidden;
}
.evx-hero .evx-eyebrow { color: var(--evx-mint); }
.evx-hero .evx-h2,
.evx-hero .evx-hero__title { color: var(--evx-white); }
.evx-hero .evx-lead { color: rgba(255, 255, 255, 0.82); }

.evx-hero__inner {
	display: flex;
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
}
.evx-hero__copy { min-width: 0; }
.evx-hero__title { margin-bottom: 18px; }

.evx-hero--center .evx-hero__inner {
	flex-direction: column;
	text-align: center;
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}
.evx-hero--center .evx-hero__ctas,
.evx-hero--center .evx-hero__trust { justify-content: center; }

.evx-hero--split .evx-hero__copy { flex: 1 1 52%; }
.evx-hero--split .evx-hero__media { flex: 1 1 48%; }
.evx-hero__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--evx-radius);
}

.evx-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 30px;
}
.evx-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 880px) {
	.evx-hero__inner { flex-direction: column; text-align: center; }
	.evx-hero--split .evx-hero__inner { flex-direction: column-reverse; }
	.evx-hero__ctas,
	.evx-hero__trust { justify-content: center; }
	.evx-hero__ctas .evx-btn { flex: 1 1 auto; }
}

/* =====================================================================
   Producto en oferta (widget Evolvix_V2_Offer).
   Tarjeta imagen + cuerpo; el widget solo aporta markup y overrides de color.
   ===================================================================== */
.evx-offer { width: 100%; }
.evx-offer__card {
	display: flex;
	align-items: center;
	gap: clamp(20px, 3vw, 44px);
	background: var(--evx-white);
	border-radius: var(--evx-radius);
	box-shadow: var(--evx-shadow);
	padding: clamp(20px, 3vw, 40px);
}
.evx-offer__media { flex: 1 1 44%; min-width: 0; }
.evx-offer__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--evx-radius-sm);
}
.evx-offer__body {
	flex: 1 1 56%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.evx-offer__badge { align-self: flex-start; }
.evx-offer__title { margin: 0; font-size: clamp(24px, 3vw, 34px); }
.evx-offer__desc { margin: 0; font-size: 16px; }
.evx-offer__base { margin: 0; color: var(--evx-muted); font-size: 15px; }
.evx-offer__base-amount { font-size: 18px; }

.evx-offer__prices { display: grid; gap: 12px; margin: 6px 0; }
.evx-offer__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px 12px;
	padding: 14px 18px;
	border-radius: var(--evx-radius-sm);
	background: var(--evx-mint-50);
}
.evx-offer__price--transfer { border: 2px solid var(--evx-teal); }
.evx-offer__method { font-weight: 700; color: var(--evx-ink); }
.evx-offer__amount {
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 800;
	color: var(--evx-green-700);
}
.evx-offer__price--transfer .evx-offer__amount { color: var(--evx-teal-600); }
.evx-offer__installments { width: 100%; font-size: 13px; color: var(--evx-muted); }

.evx-offer__urgency {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}
.evx-offer__scarcity { font-weight: 700; color: #ff5a47; font-size: 14px; }
.evx-offer__cta { align-self: stretch; text-align: center; margin-top: 6px; }
.evx-offer__trust { margin: 0; text-align: center; color: var(--evx-muted); font-size: 13px; }

@media (max-width: 820px) {
	.evx-offer__card { flex-direction: column; align-items: stretch; }
}

/* =====================================================================
   Fixes v2.0.1 — hero legible + offer como card de grilla uniforme.
   ===================================================================== */

/* Hero: apilar cada bloque del copy en su propia línea (badge, eyebrow,
   título, bajada, CTAs, trust) y asegurar contraste sobre fondo oscuro. */
.evx-hero__copy { display: flex; flex-direction: column; }
.evx-hero--center .evx-hero__copy { align-items: center; }
.evx-hero--split .evx-hero__copy { align-items: flex-start; }
.evx-hero .evx-pill--offer { margin-bottom: 14px; }
.evx-hero .evx-eyebrow { display: block; color: #bdeede !important; }
.evx-hero__title,
.evx-hero .evx-h2 { text-transform: none !important; }
.evx-hero .evx-btn--ghost { color: #fff !important; border-color: rgba(255, 255, 255, 0.7) !important; }
.evx-hero .evx-btn--ghost:hover { background: rgba(255, 255, 255, 0.14) !important; color: #fff !important; }

/* Offer: que funcione como card uniforme en grillas de 2-3 columnas.
   Igual alto entre columnas, CTA al pie, descripción acotada e imagen pareja.
   Usamos CONTAINER QUERIES: la card decide su layout según SU PROPIO ancho,
   no el del viewport — así el offer ancho (RheoFit solo) queda en fila y los
   de la grilla angosta quedan verticales, en el mismo viewport de desktop. */
.evx-offer { height: 100%; container-type: inline-size; }
.evx-offer__card { height: 100%; }
.evx-offer__body { display: flex; flex-direction: column; }
.evx-offer__desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.evx-offer__cta { margin-top: auto; }

/* Card angosta (grilla / mobile): apila, imagen como banner superior parejo. */
@container (max-width: 559px) {
	.evx-offer__card { flex-direction: column; align-items: stretch; }
	.evx-offer__media { flex: none; width: 100%; }
	.evx-offer__media img {
		width: 100%;
		height: 200px;
		object-fit: contain;
		background: var(--evx-mint-50);
	}
	.evx-offer__title { font-size: clamp(20px, 5vw, 24px); }
}

/* Fallback sin soporte de container queries: usa viewport. */
@supports not (container-type: inline-size) {
	@media (max-width: 820px) {
		.evx-offer__card { flex-direction: column; align-items: stretch; }
		.evx-offer__media { flex: none; width: 100%; }
		.evx-offer__media img { width: 100%; height: 200px; object-fit: contain; background: var(--evx-mint-50); }
	}
}