:root {
	--color-principal: #D31027;
	--color-secundario: #9A0000;
}

body, html {
	height: 100%;
	margin: 0;
	font-family: 'Poppins', sans-serif;
	color: #ffffff;
	/* background: #6D0000; */ /* Fallback */
	/*background: -webkit-linear-gradient(to right, #7a0000, #500000);
	background: linear-gradient(to right, #7a0000, #500000);*/

	/* El body ahora tendrá un fondo negro sólido */
	background-color: #000000; /* Fondo negro sólido para que la imagen resalte */

	overflow-x: hidden; /* Evita scroll horizontal */
}

/* Contenedor principal para centrar todo */
.main-container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	padding: 40px 20px;
	box-sizing: border-box;

	/* Nuevo para añadir imagen de fondo */
	position: relative; /* Añadir esta línea si no la tienes */
	z-index: 1; /* Asegura que esté sobre la imagen */
	/* Nuevas propiedades para la imagen de fondo */
	background-image: url('../images/background-image.avif');

	background-size: cover;
	background-position: center;
	background-attachment: fixed; /* La imagen se queda fija al hacer scroll */
}

/* Capa de oscurecimiento sobre la imagen de fondo */
.main-container::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8); /* Capa oscura (80% de opacidad, muy sutil) */
	/* Aquí puedes usar el degradado azul original si lo prefieres: */
	/* background: linear-gradient(to bottom right, rgba(48, 43, 99, 0.7), rgba(36, 36, 62, 0.7), rgba(15, 12, 41, 0.7)); */
	z-index: -1; /* Asegura que esté debajo del contenido */
}

/* Tarjeta de contenido con efecto "cristal" */
.content-card {
	max-width: 800px;
	width: 100%;
	text-align: center;
	padding: 3rem 2.5rem;
	/* Efecto Glassmorphism */
	background: rgba(255, 255, 255, 0.05);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Título principal con degradado */
h1 {
	font-size: 2.8rem;
	font-weight: 700;
	margin-bottom: 1rem;
	/* Texto con degradado */
	/*
	background: linear-gradient(90deg, var(--color-principal), var(--color-secundario));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
	*/
	/* Texto color sólido */
	/* color: #ffffff; */ /* Blanco puro */
	/*color: #e0e0e0;*/ /* Gris claro */
	color: var(--color-principal);
}

/* Subtítulo o eslogan */
.subtitle {
	font-size: 1.3rem;
	font-weight: 300;
	color: #e0e0e0;
	margin-bottom: 2.5rem;
}

/* Listado de servicios */
.services-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 3rem;
}

.services-list span {
	font-size: 0.9rem;
	font-weight: 400;
	background: rgba(255, 255, 255, 0.1);
	padding: 8px 16px;
	border-radius: 20px; /* Forma de píldora */
}

/* Sección de contacto */
.contact-info {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	padding-top: 2.5rem;
}

.contact-info p {
	font-size: 1.1rem;
	font-weight: 300;
	margin-bottom: 1.5rem;
}

.contact-buttons {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap; /* Para que se apilen en móviles */
}

.contact-buttons a {
	display: inline-block;
	text-decoration: none;
	color: #ffffff;
	font-weight: 600;
	padding: 12px 24px;
	border-radius: 8px;
	background: linear-gradient(90deg, var(--color-secundario), var(--color-principal));
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-buttons a:hover {
	transform: scale(1.05);
	box-shadow: 0 0 20px rgba(0, 198, 255, 0.3);
}

/* Pie de página simple */
footer {
	margin-top: 2.5rem;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.6);
}

/* --- Responsive --- */
@media (max-width: 768px) {
	h1 {
		font-size: 2.2rem;
	}
	.subtitle {
		font-size: 1.1rem;
	}
	.content-card {
		padding: 2.5rem 1.5rem;
	}
	.contact-buttons {
		flex-direction: column; /* Apila los botones */
		align-items: center;
	}
	.contact-buttons a {
		width: 80%; /* Ocupa más ancho en móvil */
		box-sizing: border-box; /* Para que el padding no desborde */
	}
}