/*
 * CrediTotal — Efecto "Value Prop Cards" estilo Affirm — sección #forma
 * Tema hijo xmoze-child.  Plan: plans/affirm-value-cards-forma.md
 *
 * Tres capas, replicadas sin tocar el DOM (sólo CSS + value-cards.js para el reveal):
 *   1) Glass backdrop  -> fondo translúcido + backdrop-filter blur (frost sutil).
 *   2) Shine border    -> pseudo ::after con radial-gradient ámbar y máscara
 *                          "sólo borde" (content-box exclude), animado en bucle
 *                          con --duration/--delay distintos por tarjeta.
 *   3) Reveal entrada  -> slide-up + fade escalonado; .is-visible lo dispara el JS
 *                          (IntersectionObserver), reemplazando el fadeIn de Elementor.
 *
 * Hook = CSS ID #forma (inner section). Los colores/medidas del efecto se editan
 * en el bloque de variables de F2.1 (una línea cada uno).
 */

/* =======================================================================
   F2.1 — Variables del efecto.  EDITAR AQUÍ (una línea cada una).
   ======================================================================= */
#forma {
	/* --- forma / glass --- */
	--ct-vp-radius:     16px;                       /* = _border_radius actual del widget */
	--ct-vp-glass-bg:   rgba(255, 255, 255, 0.55);  /* tinte glass — frost sutil */
	--ct-vp-glass-blur: 10px;
	--ct-vp-rim:        rgba(255, 255, 255, 0.85);  /* borde interior luminoso 1px */
	--ct-vp-shadow:     0 18px 50px -20px rgba(8, 15, 30, 0.18);

	/* --- shine border (ámbar de marca) --- */
	--ct-vp-shine:      #F5A623;                    /* ÁMBAR DE MARCA — editar aquí */
	--ct-vp-shine-soft: rgba(245, 166, 35, 0.25);
	--ct-vp-shine-w:    1.5px;                       /* grosor del borde luminoso */
}

/* =======================================================================
   F2.2 / F2.3 — La tarjeta = el widget icon-box.
   Superficie de vidrio única: glass sobre el widget (radio 16px) y se anula
   el borde blanco sólido nativo (F2.3) y el relleno/sombra del item interno
   para que el frost se vea a través y no haya doble borde/sombra.
   ======================================================================= */
#forma .elementor-widget-mas-addons-icon-box {
	position: relative;
	overflow: visible;                              /* el ::after del shine no debe recortarse */
	border: 0;                                      /* F2.3 — anula el borde blanco sólido nativo */
	border-radius: var(--ct-vp-radius);
	background: var(--ct-vp-glass-bg);
	-webkit-backdrop-filter: blur(var(--ct-vp-glass-blur));
	        backdrop-filter: blur(var(--ct-vp-glass-blur));
	box-shadow: var(--ct-vp-shadow), inset 0 0 0 1px var(--ct-vp-rim);
}

/* ALTURAS IGUALES: cada tarjeta rellena la altura de su columna y las columnas
   se estiran a la más alta de su fila (align-items:stretch) → todas las cards de
   una fila quedan del mismo alto y alineadas arriba (antes quedaban desiguales /
   desplazadas verticalmente). Aplica en todos los anchos. */
#forma > .elementor-container { align-items: stretch; }
#forma > .elementor-container > .elementor-column > .elementor-element-populated { height: 100%; }
#forma .elementor-widget-mas-addons-icon-box,
#forma .elementor-widget-mas-addons-icon-box > .elementor-widget-container,
#forma .elementor-widget-mas-addons-icon-box .mas-addons-feature-box-item { height: 100%; }

/* El item interno MAS no debe pintar su propio fondo/sombra encima del glass. */
#forma .elementor-widget-mas-addons-icon-box .mas-addons-feature-box-item {
	background: transparent;
	box-shadow: none;
	border-radius: var(--ct-vp-radius);             /* evita escalón con el radio interno 3px */
}

/* =======================================================================
   F3.1 / F3.2 — Shine border (técnica original de Affirm).
   El gradiente ámbar se pinta en TODA la tarjeta pero la máscara
   "content-box exclude" lo recorta a sólo el anillo del padding =
   el borde. El bucle desplaza background-position -> el brillo recorre
   el borde. Desfase por tarjeta en F3.3.
   ======================================================================= */
#forma .elementor-widget-mas-addons-icon-box::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	border-radius: inherit;
	padding: var(--ct-vp-shine-w);
	background-image: radial-gradient(
		transparent, transparent,
		var(--ct-vp-shine-soft), var(--ct-vp-shine), var(--ct-vp-shine-soft),
		transparent, transparent
	);
	background-size: 300% 300%;
	background-position: 0% 0%;
	/* máscara "sólo borde": muestra el gradiente únicamente en el anillo del padding */
	-webkit-mask:
		linear-gradient(#fff, #fff) content-box,
		linear-gradient(#fff, #fff);
	        mask:
		linear-gradient(#fff, #fff) content-box exclude,
		linear-gradient(#fff, #fff);
	-webkit-mask-composite: xor;                    /* fallback WebKit del 'exclude' */
	        mask-composite: exclude;
	animation: ct-vp-shine var(--ct-vp-dur, 14s) linear infinite;
	animation-delay: var(--ct-vp-delay, 0s);
}

@keyframes ct-vp-shine {
	0%   { background-position:   0%   0%; }
	100% { background-position: 100% 100%; }
}

/* =======================================================================
   F3.3 — Desfase por tarjeta (4 columnas fijas).  Duraciones y delays
   distintos -> cada borde brilla desincronizado (firma del efecto Affirm).
   Delays negativos = el bucle arranca ya avanzado, sin espera inicial.
   ======================================================================= */
#forma .elementor-container > .elementor-column:nth-child(1) .elementor-widget-mas-addons-icon-box::after { --ct-vp-dur: 14s; --ct-vp-delay:  -7.3s; }
#forma .elementor-container > .elementor-column:nth-child(2) .elementor-widget-mas-addons-icon-box::after { --ct-vp-dur: 16s; --ct-vp-delay:  -3.7s; }
#forma .elementor-container > .elementor-column:nth-child(3) .elementor-widget-mas-addons-icon-box::after { --ct-vp-dur: 13s; --ct-vp-delay: -11.5s; }
#forma .elementor-container > .elementor-column:nth-child(4) .elementor-widget-mas-addons-icon-box::after { --ct-vp-dur: 15s; --ct-vp-delay:  -1.9s; }

/* =======================================================================
   F3.4 — Accesibilidad: si el usuario pide menos movimiento, el borde
   queda estático (centrado, brillo tenue) en vez de animarse en bucle.
   ======================================================================= */
@media (prefers-reduced-motion: reduce) {
	#forma .elementor-widget-mas-addons-icon-box::after {
		animation: none;
		background-position: 50% 50%;
	}
}

/* =======================================================================
   F4.1 / F4.2 — Reveal de entrada (reemplaza el fadeIn de Elementor).
   El estado inicial OCULTO está gateado por .ct-vp-init, que sólo añade el
   JS: si el JS no corre, las tarjetas se ven normales (sin FOUC).
   El JS añade .is-visible cuando #forma entra al viewport -> slide-up
   escalonado por columna.
   ======================================================================= */
/* El reveal "abanico" (transforms por columna) SOLO en desktop 4-en-fila (≥1200px).
   Abajo (2×2 o móvil) las tarjetas salen normales, sin escala/desplazamiento. */
@media (min-width: 1200px) {
#forma.ct-vp-init .elementor-column {
	opacity: 0;
	transform-origin: 50% 130%;                   /* F4.8 — pivote bajo el centro: gesto de abanico */
	transition: opacity .65s ease, transform .85s cubic-bezier(.22, .61, .36, 1);
	will-change: opacity, transform;
}

/* F4.8 — ABANICO CERRADO: las tarjetas arrancan apiladas hacia el centro y
   rotadas hacia afuera (las exteriores giran y se desplazan más). El estado
   .is-visible las lleva a transform:none -> el abanico se ABRE a la fila final.
   El translateX es relativo al ancho de la propia columna (25%): ~160%/52%
   acercan cada tarjeta al centro. */
#forma.ct-vp-init .elementor-column:nth-child(1) { transform: translateX(162%) translateY(14px) rotate(-10deg) scale(0.82); }
#forma.ct-vp-init .elementor-column:nth-child(2) { transform: translateX(54%)  translateY(7px)  rotate(-4deg)  scale(0.90); }
#forma.ct-vp-init .elementor-column:nth-child(3) { transform: translateX(-54%) translateY(7px)  rotate(4deg)   scale(0.90); }
#forma.ct-vp-init .elementor-column:nth-child(4) { transform: translateX(-162%) translateY(14px) rotate(10deg) scale(0.82); }

#forma.ct-vp-init.is-visible .elementor-column {
	opacity: 1;
	transform: none;                              /* abanico ABIERTO = fila final */
}
/* Apertura CENTRO -> AFUERA: el par central (2,3) abre primero, el par
   exterior (1,4) le sigue. Simétrico, para que el abanico se abra desde
   el centro hacia los lados. */
#forma.ct-vp-init.is-visible .elementor-column:nth-child(2) { transition-delay:   0ms; }   /* centro izq */
#forma.ct-vp-init.is-visible .elementor-column:nth-child(3) { transition-delay:   0ms; }   /* centro der */
#forma.ct-vp-init.is-visible .elementor-column:nth-child(1) { transition-delay: 140ms; }   /* exterior izq */
#forma.ct-vp-init.is-visible .elementor-column:nth-child(4) { transition-delay: 140ms; }   /* exterior der */
} /* fin @media (min-width:1200px) del reveal */

/* =======================================================================
   F4.6 — Apaga el fadeIn NATIVO de Elementor en estas columnas.
   Elementor guarda animation:"fadeIn" en las 4 columnas y su handler gana la
   carrera al JS, así que la animación se neutraliza aquí con !important: el
   keyframe de Elementor (que sólo anima opacidad) queda inerte y el reveal
   premium de abajo (basado en transition, NO en animation) es el único en juego.
   ======================================================================= */
#forma .elementor-column.animated,
#forma .elementor-column.animated-slow,
#forma .elementor-column.animated-fast {
	animation: none !important;
}

/* =======================================================================
   F5.1 — Responsive: en pantallas chicas se reduce el blur del glass
   (coste de pintado) y se alargan un poco las duraciones del shine.
   ======================================================================= */
@media (max-width: 1023px) {
	#forma { --ct-vp-glass-blur: 6px; }
}
@media (max-width: 767px) {
	#forma { --ct-vp-glass-blur: 4px; }
}

/* =======================================================================
   F5.1b — RESPONSIVE WRAP (1025–1199px): a este ancho intermedio las 4 tarjetas
   pasan a 2 columnas (2×2) y bajan limpio, manteniendo su tamaño (el reveal con
   transforms es ≥1200, así que aquí no interfiere). ≤1024px lo maneja el
   carrusel (home.js + home.css).
   ======================================================================= */
@media (min-width: 1025px) and (max-width: 1199px) {
	#forma > .elementor-container {
		flex-wrap: wrap !important;
		align-items: stretch !important;
		align-content: flex-start !important;   /* las filas envueltas NO se estiran verticalmente */
		row-gap: 24px;
	}
	#forma > .elementor-container > .elementor-column {
		width: 50% !important;
		flex: 0 0 50% !important;
		max-width: 50% !important;
	}
	/* Sin reveal abajo de 1200: las columnas siempre visibles y a tamaño natural. */
	#forma.ct-vp-init .elementor-column { opacity: 1 !important; }
}

/* =======================================================================
   F5.2 — Hover: lift sutil + sombra/rim algo más marcados.  El shine
   (::after) sube su grosor levemente para "encenderse" al pasar el cursor.
   ======================================================================= */
#forma .elementor-widget-mas-addons-icon-box {
	transition: transform .35s ease, box-shadow .35s ease;
}
#forma .elementor-widget-mas-addons-icon-box:hover {
	transform: translateY(-4px);
	box-shadow: 0 26px 60px -22px rgba(8, 15, 30, 0.28), inset 0 0 0 1px var(--ct-vp-rim);
}
#forma .elementor-widget-mas-addons-icon-box:hover::after {
	padding: calc(var(--ct-vp-shine-w) + 0.5px);
}