/* Torres Insignias Centradas
 * Estilos base estructurales. Colores, tamaños, tiempos, etc. se controlan
 * desde el propio widget de Elementor (pestañas Contenido y Estilo).
 *
 * IMPORTANTE sobre la animación:
 * El estado por defecto (sin ninguna clase JS) es el ESTADO FINAL: insignias
 * ya pequeñas y centradas. Solo cuando el script confirma que se ejecuta se
 * añade .tbc-anim-ready, que pone todo en el estado "fase 1" (grande,
 * oculto) a la espera de reproducir la secuencia. Así el bloque nunca
 * desaparece si el JS no llega a correr (editor de Elementor, bloqueadores
 * de scripts, etc.).
 *
 * Solo imágenes: sin bloque de texto. Las insignias siempre están
 * centradas; solo cambia su tamaño entre fases, nunca su posición.
 */

.tbc-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
}

.tbc-wrap * {
	box-sizing: border-box;
}

/* ---------- Insignias ---------- */
.tbc-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--tbc-gap-final, 14px);
	width: var(--tbc-final-width, 60%);
	transition: width var(--tbc-transition-duration, 800ms) ease,
		gap var(--tbc-transition-duration, 800ms) ease;
}

.tbc-badge {
	flex: 0 1 auto;
	opacity: 1;
	transform: none;
}

.tbc-badge img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: var(--tbc-size-final, 120px);
	object-fit: contain;
	transition: max-height var(--tbc-transition-duration, 800ms) ease;
}

/* ---------- Estado "fase 1": grande, oculto, a la espera ---------- */
/* Solo se activa si el JS confirma su ejecución (ver script.js) */
.tbc-wrap.tbc-anim-ready .tbc-badges {
	width: 100%;
	gap: var(--tbc-gap-intro, 26px);
}

.tbc-wrap.tbc-anim-ready .tbc-badge {
	opacity: 0;
	transform: translateY(24px) scale(0.85);
}

.tbc-wrap.tbc-anim-ready .tbc-badge img {
	max-height: var(--tbc-size-intro, 240px);
}

/* ---------- Fase 1 en marcha: cada insignia hace fade-in escalonado ---------- */
.tbc-wrap.tbc-seq-start .tbc-badge {
	animation: tbc-fade-in var(--tbc-reveal-duration, 700ms) ease forwards;
}

@keyframes tbc-fade-in {
	from { opacity: 0; transform: translateY(24px) scale(0.85); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Fase 2: encoger, sin moverse del centro ---------- */
.tbc-wrap.tbc-final .tbc-badges {
	width: var(--tbc-final-width, 60%);
	gap: var(--tbc-gap-final, 14px);
}

.tbc-wrap.tbc-final .tbc-badge {
	opacity: 1;
	transform: none;
	animation: none;
	transition: opacity 0.4s ease;
}

.tbc-wrap.tbc-final .tbc-badge img {
	max-height: var(--tbc-size-final, 120px);
}

/* ---------- Editor de Elementor: mostrar siempre el estado final completo ---------- */
/* Neutraliza la animación Y fija el tamaño/ancho en su valor "final" (usando
   las mismas variables responsive de siempre), para que el editor nunca se
   quede a medio camino de la secuencia. Este bloque va ANTES de la sección
   "Responsive" a propósito: así, en la vista de móvil del editor, las reglas
   de la fila de 4 columnas de más abajo siguen ganando y todo se ve igual
   que en la web publicada. */
.elementor-editor-active .tbc-badges {
	width: var(--tbc-final-width, 60%) !important;
	gap: var(--tbc-gap-final, 14px) !important;
}
.elementor-editor-active .tbc-badge {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
}
.elementor-editor-active .tbc-badge img {
	max-height: var(--tbc-size-final, 120px) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
	/* En móvil forzamos que las insignias vayan siempre en una sola fila
	   de 4 columnas iguales, encogiéndose lo que haga falta para caber. */
	.tbc-badges {
		display: grid !important;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--tbc-gap-final, 8px) !important;
		width: 100% !important;
	}
	.tbc-wrap.tbc-anim-ready .tbc-badges {
		width: 100% !important;
	}
	.tbc-badge {
		width: 100%;
	}
	.tbc-badge img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		max-height: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tbc-wrap.tbc-anim-ready .tbc-badges {
		width: var(--tbc-final-width, 60%) !important;
		gap: var(--tbc-gap-final, 14px) !important;
	}
	.tbc-wrap.tbc-anim-ready .tbc-badge {
		opacity: 1 !important;
		transform: none !important;
	}
	.tbc-wrap.tbc-anim-ready .tbc-badge img {
		max-height: var(--tbc-size-final, 120px) !important;
	}
	.tbc-badge {
		animation: none !important;
	}
}