/* Torres Ventajas
 * Estilos base estructurales. Colores, tipografías, tamaños y espaciados
 * se controlan desde el propio widget de Elementor (pestaña Estilo).
 *
 * IMPORTANTE sobre la animación de entrada:
 * Las tarjetas son VISIBLES por defecto (sin JavaScript, en el editor de
 * Elementor, con JS bloqueado, etc.). Solo se ocultan para poder animar el
 * rebote cuando el script (script.js) confirma que se ha ejecutado y añade
 * la clase .tv-anim-ready al contenedor. Así nunca desaparece el contenido.
 */

.tv-grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	row-gap: 30px;
	column-gap: 30px;
	width: 100%;
	box-sizing: border-box;
}

.tv-grid * {
	box-sizing: border-box;
}

/* ---------- Camino en zigzag decorativo (solo layout escalonado) ---------- */
/* Se dibuja con una máscara SVG en forma de "V" repetida, coloreada con
   background-color (así el color se controla desde Elementor sin problemas
   de codificación de "#" dentro de una data-URI). */
.tv-grid--path::before {
	content: '';
	position: absolute;
	left: 2%;
	right: 2%;
	top: var(--tv-circle-half, 75px);
	height: var(--tv-stagger, 60px);
	background-color: var(--tv-path-color-fallback, #1F4D3A);
	opacity: 0.45;
	z-index: 0;
	pointer-events: none;

	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,15 L50,85 L100,15' fill='none' stroke='black' stroke-width='6' stroke-dasharray='3 11' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,15 L50,85 L100,15' fill='none' stroke='black' stroke-width='6' stroke-dasharray='3 11' stroke-linecap='round'/%3E%3C/svg%3E");
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: calc(200% / var(--tv-columns, 4)) 100%;
	mask-size: calc(200% / var(--tv-columns, 4)) 100%;
	-webkit-mask-position: calc(50% / var(--tv-columns, 4)) center;
	mask-position: calc(50% / var(--tv-columns, 4)) center;
}

.tv-card {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	background-color: transparent;
	text-align: center;
	align-items: center;

	/* Visible por defecto: posición final ya correcta sin necesitar JS */
	opacity: 1;
	transform: none;
}

.tv-grid--staggered .tv-card:nth-child(2n) {
	transform: translateY(var(--tv-stagger, 60px));
}

/* El desplazamiento del estilo "escalonado" se aplica con transform (no con
   margin), para que no afecte a la altura real de la caja. */
.tv-grid--staggered .tv-card {
	transition: transform 0.2s ease;
}

/* ---------- Animación de entrada (progressive enhancement) ---------- */
/* Solo se ocultan las tarjetas si el JS ha confirmado que se ejecuta,
   añadiendo .tv-anim-ready al contenedor. Si el JS no corre (editor,
   bloqueadores, etc.) las tarjetas permanecen visibles siempre. */
.tv-grid.tv-anim-ready .tv-card {
	opacity: 0;
	transform: scale(0.4) translateY(-30px);
}

.tv-grid.tv-anim-ready.tv-grid--staggered .tv-card:nth-child(2n) {
	transform: scale(0.4) translateY(-30px);
}

.tv-card.tv-in-view {
	animation: tv-bounce-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.tv-grid--staggered .tv-card:nth-child(2n).tv-in-view {
	animation-name: tv-bounce-in-offset;
}

@keyframes tv-bounce-in {
	0%   { opacity: 0; transform: scale(0.4) translateY(-40px); }
	55%  { opacity: 1; transform: scale(1.14) translateY(8px); }
	75%  { transform: scale(0.93) translateY(-6px); }
	90%  { transform: scale(1.03) translateY(2px); }
	100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Igual que la anterior pero conserva el translateY del escalonado al terminar */
@keyframes tv-bounce-in-offset {
	0%   { opacity: 0; transform: scale(0.4) translateY(-40px); }
	55%  { opacity: 1; transform: scale(1.14) translateY(calc(var(--tv-stagger, 60px) + 8px)); }
	75%  { transform: scale(0.93) translateY(calc(var(--tv-stagger, 60px) - 6px)); }
	90%  { transform: scale(1.03) translateY(calc(var(--tv-stagger, 60px) + 2px)); }
	100% { opacity: 1; transform: scale(1) translateY(var(--tv-stagger, 60px)); }
}

/* Retraso escalonado para que los círculos no reboten todos a la vez */
.tv-card:nth-child(1) { animation-delay: 0.05s; }
.tv-card:nth-child(2) { animation-delay: 0.15s; }
.tv-card:nth-child(3) { animation-delay: 0.25s; }
.tv-card:nth-child(4) { animation-delay: 0.35s; }
.tv-card:nth-child(5) { animation-delay: 0.45s; }
.tv-card:nth-child(6) { animation-delay: 0.55s; }

/* Desactivar animación de entrada desde el widget (siempre visible, sin JS de por medio) */
.tv-no-animation.tv-anim-ready .tv-card {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
}
.tv-no-animation.tv-anim-ready.tv-grid--staggered .tv-card:nth-child(2n) {
	transform: translateY(var(--tv-stagger, 60px)) !important;
}

/* La alineación (izquierda/centro/derecha) del contenido, incluida su
   versión responsive, se controla directamente desde Elementor mediante
   align-items + text-align en .tv-card (ver control "content_align"). */

/* ---------- Círculo del icono ---------- */
.tv-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	flex-shrink: 0;
}

.tv-icon--circle .tv-card__icon {
	border-radius: 50%;
}

/* Squish al pasar el ratón por la tarjeta */
.tv-grid:not(.tv-no-hover) .tv-card:hover .tv-card__icon {
	animation: tv-squish 0.5s ease;
}

@keyframes tv-squish {
	0%   { transform: scale(1, 1); }
	30%  { transform: scale(1.1, 0.88); }
	55%  { transform: scale(0.93, 1.09); }
	75%  { transform: scale(1.04, 0.97); }
	100% { transform: scale(1, 1); }
}

/* ---------- Caja de texto (separada del círculo) ---------- */
.tv-card__body {
	width: 100%;
	background-color: transparent;
}

.tv-card__title {
	margin: 0 0 15px;
}

.tv-card__description {
	margin: 0;
	line-height: 1.6;
}

/* En móvil, desactivamos el escalonado y el zigzag para evitar solapes */
@media (max-width: 767px) {
	.tv-grid--staggered .tv-card:nth-child(2n) {
		transform: none !important;
	}
	.tv-grid.tv-anim-ready.tv-grid--staggered .tv-card:nth-child(2n) {
		transform: scale(0.4) translateY(-30px);
	}
	.tv-grid--staggered .tv-card:nth-child(2n).tv-in-view {
		animation-name: tv-bounce-in;
	}
	.tv-grid--staggered {
		padding-bottom: 0 !important;
	}
	.tv-grid--path::before {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tv-grid.tv-anim-ready .tv-card {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
	.tv-grid.tv-anim-ready.tv-grid--staggered .tv-card:nth-child(2n) {
		transform: translateY(var(--tv-stagger, 60px)) !important;
	}
	.tv-card__icon {
		animation: none !important;
	}
}

/* Elementor: dentro del editor, forzar siempre visible (sin animación de
   entrada) para que el diseño se vea completo mientras se edita contenido. */
.elementor-editor-active .tv-card {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
}
.elementor-editor-active .tv-grid--staggered .tv-card:nth-child(2n) {
	transform: translateY(var(--tv-stagger, 60px)) !important;
}