/* styleJOINT I-EJA: hereda el look premium de styleJOINT y mantiene color/efectos propios */

:root {
	--brand-stylejoint: #006b3c;
	--brand-stylejoint-dark: #004d2b;
	--brand-stylejoint-light: #1ea700;

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

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

@keyframes texto-electricidad-stylejoint-eja {
	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-eja {
	animation: texto-electricidad-stylejoint-eja 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-eja` */
#encabezados-stylejoint-i-eja .caracteristicas-producto p,
#encabezados-stylejoint-i-eja .contenido-producto p {
	color: #f9fafb !important;
	margin-bottom: 3%;
}

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

#encabezados-stylejoint-i-eja .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-eja .electric-txt,
.page-stylejoint .electric-txt.glow-joint-eja,
.page-stylejoint .texto-electricidad-stylejoint-eja {
	animation: texto-electricidad-stylejoint-eja 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;
}

/* Layout grid + efectos existentes (se mantienen tal cual) */
.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;
	}
}

/* Inlined rules extracted from src/pages/juntas-arquitectonicas-sismicas-stylejoint-i-eja/index.astro */
/* Forzar galerías en dos columnas y pequeñas mejoras en tarjetas de descarga */
.producto-secciones-horizontal {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    align-items: start;
}
.producto-secciones-horizontal .figure {
    margin: 0;
}
@media (max-width: 900px) {
    .producto-secciones-horizontal {
        grid-template-columns: 1fr;
    }
}

.descargas-en-tarjeta {
    margin: 1rem 0 0;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(249,250,251,0.06);
}
.descargas-en-tarjeta ul { list-style: none; margin: 0; padding: 0; }
.descargas-en-tarjeta li { margin: 0.35rem 0; }
.descargas-en-tarjeta a { color: var(--brand-stylejoint); text-decoration: none; font-weight: 600; }

/* Marca styleJOINTS EJA en blanco en encabezado */
#marca-stylejoint-i-eja,
#marca-stylejoint-i-eja span,
#marca-stylejoint-i-eja .electric-txt,
#marca-stylejoint-i-eja .glow-joint-eja {
    color: #fff !important;
    text-shadow: 0 0 8px #006b3c, 0 0 2px #fff;
}
/* Todo el texto del recuadro del encabezado en blanco */
#encabezados-stylejoint-i-eja,
#encabezados-stylejoint-i-eja * {
    color: #fff !important;
}

/* Moved from src/pages/juntas-arquitectonicas-sismicas-stylejoint-i-eja-zona-descarga/index.astro */
/* Alinear figuras dos por fila dentro de tarjetas */
.ProductoSecconesi3,
.producto-secciones-i3 {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 -0.5rem;
}
.ProductoSecconesi3 .figure,
.producto-secciones-i3 .figure {
	flex: 0 0 50%;
	max-width: 50%;
	box-sizing: border-box;
	padding: 0 0.5rem;
	margin: 0;
}
.ProductoSecconesi3 .figure img,
.producto-secciones-i3 .figure img {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 600px) {
	.ProductoSecconesi3 .figure,
	.producto-secciones-i3 .figure {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* Forzar texto de botones de descarga en blanco */
.btn-link-tarjeta,
.btn-descarga,
.descarga-link .btn-descarga,
.btn-link-tarjeta .svg {
	color: #fff !important;
}
/* Asegurar que los botones con clase btn-link-tarjeta muestren texto blanco */
.btn-link-tarjeta {
	color: #fff !important;
}