* {
	font-family: 'Poppins', sans-serif;
	text-wrap-style: balance;
}

.botones {
	position: fixed;
	border-radius: 100%;
	z-index: 100;
	padding: 5px;
	font-size: 30px;
	text-align: center;
	box-shadow: 2px 2px 3px #999;
	width: 60px;
	height: 60px;
	color: #fff;
	right: 60px;
}

.btn_wt {
	background-color: #25d366;
	bottom: 110px;
}

.btn_x {
	background-color: #007fbf;
	bottom: 40px;
}

.btn_share {
	background-color: #333333;
	bottom: 180px;
}

.btn_up {
	background-color: #555555;
	bottom: 250px;
}

.art-welcome {
	height: 70vh;
	background: linear-gradient(rgba(42, 155, 55, 0.5), rgba(15, 15, 15, 0.5)),
		url('../assets/Municipio-Hurlingham-Villa-Tesei.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.rotate {
	transform: rotate(180deg);
	top: -1%;
}

.art-info-curso {
	height: 70vh;
	background: linear-gradient(rgba(41, 98, 170, 0.3), rgba(15, 15, 15, 0.5)),
		url('../assets/portada.jpg');
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
}

.amt-dow {
	animation: arrowDown 1s ease-in-out infinite alternate;
	will-change: transform;
}

@keyframes arrowDown {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(50px);
	}
}

.art-carousel {
	height: 60vh;
	width: 100%;
	gap: 12px;
}

.carouse-sect {
	height: 50%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
	background-color: #f8f9fa;
}

.carousel-wrapper {
	display: flex;
	gap: 12px;
	animation: scroll 25s linear infinite;
}

.carousel-wrapper img {
	height: 500px;
	width: 550px;
	object-fit: cover;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.carousel-wrapper img:hover {
	transform: scale(1.05);
}

@keyframes scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

.fade-overlay {
	position: absolute;
	top: 0;
	width: 2%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
}

.fade-left {
	left: 0;
	background: linear-gradient(to right, #f8f9fa 60%, transparent);
}

.fade-right {
	right: 0;
	background: linear-gradient(to left, #f8f9fa 60%, transparent);
}

.art-data {
	background: linear-gradient(
		rgba(42, 155, 55, 0.5),
		rgba(255, 253, 253, 0.976)
	);
}
/* ========= FONDO ESPACIAL ========= */
body {
	background-color: #656565;
}
/* ========= CONTENEDOR PRINCIPAL ========= */
.card-espacial {
	background: rgba(0, 255, 204, 0.06);
	border: 1px solid rgba(0, 255, 204, 0.25) !important;
	border-radius: 20px;
	backdrop-filter: blur(20px);
	box-shadow: 0 0 15px rgba(0, 255, 204, 0.3),
		inset 0 0 25px rgba(0, 255, 204, 0.1);
	animation: glowCard 6s ease-in-out infinite alternate;
}

@keyframes glowCard {
	from {
		box-shadow: 0 0 10px rgba(0, 255, 204, 0.2),
			inset 0 0 10px rgba(0, 255, 204, 0.05);
	}
	to {
		box-shadow: 0 0 35px rgba(0, 255, 204, 0.45),
			inset 0 0 40px rgba(0, 255, 204, 0.15);
	}
}

/* ========= TÍTULO ========= */
.titulo-espacial {
	color: #67fff1;
	text-align: center;
	margin-bottom: 20px;
	text-shadow: 0 0 8px #00ffe0, 0 0 15px #00ffe0;
	letter-spacing: 2px;
}

/* ========= TABLA BOOTSTRAP FUTURISTA ========= */

.table-espacial {
	border-radius: 15px;
	overflow: hidden;
	color: #cdffff !important;
}

.table-espacial thead {
	background: linear-gradient(90deg, #00ffd561, #00a68c54);
	color: #dfffff !important;
	text-shadow: 0 0 7px #00ffe0;
}

.table-espacial tbody tr {
	background: rgba(0, 255, 204, 0.03);
	border-bottom: 1px solid rgba(0, 255, 204, 0.05);
}

.table-espacial tbody tr:hover {
	background: rgba(0, 255, 204, 0.07) !important;
	transition: 0.3s;
}

/* ========= TEXTO DE ERROR ========= */
.text-danger {
	color: #ff6b6b !important;
	text-shadow: 0 0 10px #ff5353;
}

/* ========= LOADING TEXT ========= */
.loading-espacial {
	text-align: center;
	padding: 20px;
	color: #00ffe5;
	font-weight: bold;
	text-shadow: 0 0 10px #00ffe5;
	animation: pulseText 1.5s infinite ease-in-out;
}

@keyframes pulseText {
	0%,
	100% {
		opacity: 0.6;
	}
	50% {
		opacity: 1;
	}
}

/* === Estilo global para la tabla generada dinámicamente === */
#myTable tr {
	background: rgba(0, 255, 204, 0.03);
	transition: 0.35s;
}

#myTable tr:hover {
	background: rgba(0, 255, 204, 0.12);
	box-shadow: 0 0 12px rgba(0, 255, 204, 0.35);
	transform: translateX(4px);
}

/* Celdas */
#myTable td {
	padding: 14px 12px !important;
	border-bottom: 1px solid rgba(0, 255, 204, 0.12);
	color: #d8ffff !important;
	font-size: 1rem;
	vertical-align: middle;
	background-color: #333333;
}

/* Iconos dentro del nombre */
#myTable td i {
	color: #7fffea;
	text-shadow: 0 0 8px #00ffe5;
	font-size: 1.15rem;
}

/* Animación futurista al agregar filas */
#myTable tr {
	opacity: 0;
	animation: fadeDown 0.4s ease forwards;
}

@keyframes fadeDown {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes EntradaDesdeizq {
	from {
		transform: translateX(-200%);
	}
	to {
		transform: translateX(0);
	}
}
.banner {
	width: 100%;
	position: relative;
	animation: EntradaDesdeizq 0.8s ease;
}