/* styleJOINT I-FIRE: reutiliza estilos premium de `juntas-sismicas.css` vía `.page-stylejoint`
   y solo cambia los colores/acentos de marca + efectos propios.
*/

:root {
	--brand-stylejoint: #d32f2f;
	--brand-stylejoint-dark: #b71c1c;
	--brand-stylejoint-light: #ff6659;

	/* Usadas por `juntas-sismicas.css` (hover/shadows) */
	--brand-stylejoint-shadow-22: rgba(211, 47, 47, 0.22);
	--brand-stylejoint-outline-18: rgba(211, 47, 47, 0.18);
}

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

@keyframes electricidad-stylejoint-fire {
	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-fire {
	animation: electricidad-stylejoint-fire 0.1s linear infinite;
	display: inline-block;
	will-change: filter;
}

.caracteristicas-producto ul {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

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

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

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

.caracteristicas-producto .bi,
.caracteristicas-producto [class^='bi-'],
.caracteristicas-producto [class*=' bi-'] {
	color: #fff !important;
	fill: #fff !important;
	display: inline-block;
	vertical-align: -0.125em;
	margin-right: 6px;
}

/* Recuperar efecto “electricidad” con el markup real (`electric-txt` + `glow-*`) */
#marca-stylejoint-i-fire .electric-txt,
.page-stylejoint .electric-txt.glow-fire,
.page-stylejoint .texto-electricidad-stylejoint-fire {
	animation: electricidad-stylejoint-fire 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;
}