/* styleJOINT I-EJP: hereda el estilo premium y mantiene color/efectos */

:root {
	--brand-stylejoint-i-ejp: #00b8f6;
	--brand-stylejoint: var(--brand-stylejoint-i-ejp);
	--brand-stylejoint-dark: #0086b3;
	--brand-stylejoint-light: #45d2ff;

	--brand-stylejoint-shadow-22: rgba(0, 184, 246, 0.22);
	--brand-stylejoint-outline-18: rgba(0, 184, 246, 0.18);
}

.hr-stylejoint-ejp {
	background: transparent;
	border: none;
	border-top: 6px solid var(--brand-stylejoint);
	height: 0;
	margin: 6rem 0;
	width: 100%;
}

@keyframes texto-electricidad-stylejoint-ejp {
	0% {
		filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px var(--brand-stylejoint)) brightness(1.2);
	}
	10% {
		filter: drop-shadow(0 0 4px var(--brand-stylejoint)) drop-shadow(0 0 12px #fff) brightness(1.4);
	}
	20% {
		filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px var(--brand-stylejoint)) brightness(1.6);
	}
	30% {
		filter: drop-shadow(0 0 4px var(--brand-stylejoint)) drop-shadow(0 0 8px #fff) brightness(1.3);
	}
	40% {
		filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 10px var(--brand-stylejoint)) brightness(1.5);
	}
	50% {
		filter: drop-shadow(0 0 2px var(--brand-stylejoint)) drop-shadow(0 0 6px #fff) brightness(1.2);
	}
	60% {
		filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 14px var(--brand-stylejoint)) brightness(1.7);
	}
	70% {
		filter: drop-shadow(0 0 4px var(--brand-stylejoint)) drop-shadow(0 0 8px #fff) brightness(1.3);
	}
	80% {
		filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 10px var(--brand-stylejoint)) brightness(1.5);
	}
	90% {
		filter: drop-shadow(0 0 2px var(--brand-stylejoint)) drop-shadow(0 0 6px #fff) brightness(1.2);
	}
	100% {
		filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px var(--brand-stylejoint)) brightness(1.2);
	}
}

.texto-electricidad-stylejoint-ejp {
	animation: texto-electricidad-stylejoint-ejp 0.1s linear infinite;
	display: inline-block;
	will-change: filter;
}

/* FIX: typo del archivo original (`caracteristicas-productoo`) */
.caracteristicas-producto ul {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

/* FIX: el markup usa `#encabezados-stylejoint-i-ejp` */
#encabezados-stylejoint-i-ejp .caracteristicas-producto p,
#encabezados-stylejoint-i-ejp .contenido-producto p {
	color: #f9fafb !important;
	margin-bottom: 3%;
}

.gap-tarjetas-stylejoint-ejp {
	gap: 2rem;
}

#encabezados-stylejoint-i-ejp .bi {
	color: #fff !important;
}

.caracteristicas-producto .bi,
.caracteristicas-producto [class^='bi-'],
.caracteristicas-producto [class*=' bi-'] {
	color: #fff !important;
	fill: #fff !important;
}

/* Recuperar efecto “electricidad” con el markup real (`electric-txt` + `glow-*`) */
#marca-stylejoint-i-ejp .electric-txt,
.page-stylejoint .electric-txt.glow-joint-ejp,
.page-stylejoint .texto-electricidad-stylejoint-ejp {
	animation: texto-electricidad-stylejoint-ejp 0.8s linear infinite;
	display: inline-block;
	text-shadow: 0 0 8px var(--brand-stylejoint-light), 0 0 2px #fff;
	will-change: filter;
}

/* Quitar “doble padding” y el blanco entre encabezado y primera fotografía */
.page-stylejoint section.cuerpo {
	padding-top: 0;
}

.page-stylejoint section.cuerpo > .contenido {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.juntas-grid-stylejoint.no-lateral-gap {
	box-sizing: border-box !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

.juntas-grid-stylejoint {
	box-sizing: border-box !important;
	margin-left: 5% !important;
	margin-right: 5% !important;
	max-width: none !important;
	width: 90% !important;
}

.juntas-grid-stylejoint > * {
	float: none !important;
	grid-column: auto !important;
	min-width: 0 !important;
	width: auto !important;
}

@media (width <= 900px) {
	.juntas-grid-stylejoint {
		margin-left: 2% !important;
		margin-right: 2% !important;
		width: 96% !important;
	}
}

@media (width <= 1200px) {
	.juntas-grid-stylejoint {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (width <= 900px) {
	.juntas-grid-stylejoint {
		gap: 1rem;
		grid-template-columns: 1fr !important;
		margin-left: 2% !important;
		margin-right: 2% !important;
		width: 96% !important;
	}
}

.juntas-grid-stylejoint .junta-card {
	min-width: 0 !important;
}

.efecto-aparicion {
	opacity: 0;
	transform: translateY(100%) scale(0.5);
	visibility: hidden;
	will-change: transform, opacity, scale;
}

.efecto-aparicion.is-visible {
	animation: producto-slide-from-right-efecto 1s ease-out forwards;
}

@keyframes producto-slide-from-right-efecto {
	0% {
		opacity: 0;
		transform: translateY(100%) scale(0.5);
		visibility: hidden;
	}
	50% {
		opacity: 0.8;
		transform: translateY(-5%) scale(1.1);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
		visibility: visible;
	}
}