/* Variables CSS - Paleta EURORENTING (Azul Oscuro & Magenta) */
:root {
	/* Colores de la marca EURORENTING */
	--color-primary-dark: #1E2231; /* Color A: Azul Oscuro (Principal) */
	--color-secondary-light: #F43559; /* Color B: Magenta Fuerte (Acento) */
	--color-background-base: #FFFFFF; /* Blanco (Para el logo y botones claros) */
	--color-background-soft: #f0f0f0; /* Gris muy claro/Blanco sucio (Fondo del body) */
	--color-text-main: #1E2231;	/* Texto principal: Azul Oscuro */
	--color-text-subtle: #4a4a4a; /* Gris oscuro para textos secundarios */
	--color-text-slogan: #1E2231; /* Negro/Azul oscuro para alto contraste */
	
	/* Fuentes Corporativas */
	--font-heading: 'Montserrat', sans-serif;
	--font-body: 'Source Sans Pro', sans-serif;
	--font-subtitle: 'Source Sans Pro', sans-serif;
	--font-buttons: 'Montserrat', sans-serif;

	--color-background-dark-rgb: 30, 34, 49;
}
/* ------------------- AJUSTES GENERALES Y TIPOGRAFÍA ------------------- */
body {
	font-family: var(--font-body);
	margin: 0;
	padding: 0;
	/* CAMBIO CLAVE 1: El fondo del body es ahora gris claro */
	background-color: var(--color-background-soft);
	
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}
/* NUEVO ESTILO: Capa de fondo (Patrón Corporativo Sutil) */
	.background-layer {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		
		/* Para un fondo limpio, usaremos un patrón muy sutil si la imagen no se ve bien */
		/* background-image: url('URL_DE_PATRON_GRIS_MUY_CLARO'); */
		
		/* Dejamos la imagen de fondo, pero muy clara */
		background-image: url('https://archivos.eurorenting.net.pe/img/bg.webp');
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
	}
	.content-box {
		max-width: 500px; 
		width: 100%;
		/* CAMBIO CLAVE 2: Fondo de caja es BLANCO y OPACO para legibilidad máxima */
		background-color: var(--color-background-base); 
		backdrop-filter: blur(0); /* Quitamos el blur de la caja */
		border-radius: 15px;
		/* Bordes y sombras AZUL Y MAGENTA */
		border: 2px solid var(--color-primary-dark); 
		box-shadow: 0 0 30px rgba(30, 34, 49, 0.1), 0 0 15px rgba(244, 53, 89, 0.2); 
		text-align: center;
		z-index: 1;
	}
	.glitch-overlay {
		opacity: 0; 
	}
/* ------------------- PERFIL ------------------- */
	/* Animación de palpitación sutil (ADAPTADA AL AZUL/MAGENTA) */
	@keyframes pulse-tech {
		0% {
			transform: scale(1);
			box-shadow: 0 0 10px var(--color-primary-dark), 0 0 20px var(--color-secondary-light);
		}
		50% {
			transform: scale(1.03);
			box-shadow: 0 0 20px var(--color-primary-dark), 0 0 40px var(--color-secondary-light);
		}
		100% {
			transform: scale(1);
			box-shadow: 0 0 10px var(--color-primary-dark), 0 0 20px var(--color-secondary-light);
		}
	}
	#profileAvatar {
		width: 140px;
		height: 140px;
		object-fit: contain;
		border: 5px solid var(--color-secondary-light); /* Magenta */
		box-shadow: 0 0 20px var(--color-primary-dark), 0 0 30px var(--color-secondary-light);
		transition: transform 0.3s ease;
		padding: 5px;
		background-color: var(--color-background-base);
	}
	#profileAvatar:hover {
		transform: scale(1.05);
		animation: pulse-tech 1.5s infinite ease-in-out;
		cursor: pointer;
	}
/* ------------------- TÍTULOS ------------------- */
	h1 {
		font-family: var(--font-heading);
		color: var(--color-primary-dark); /* CAMBIO CLAVE: Título en AZUL OSCURO */
		font-size: 3em;
		font-weight: bold;
		text-shadow: none; /* Quitamos sombras */
		margin-top: 10px !important;
	}
	.font-red {
		color: var(--color-secondary-light);
	}
	.subtitle {
		font-family: var(--font-subtitle);
		color: var(--color-secondary-light); /* Subtítulo en MAGENTA */
		font-size: 1.2em;
		text-shadow: none; 
		font-weight: 700;
	}
	.bio p.text-white-50 {
		color: var(--color-text-subtle) !important; /* Texto principal en gris oscuro */
		font-size: 1em;
	}
	.stats-line {
		color: var(--color-primary-dark); /* Texto de estadísticas en AZUL OSCURO */
		border-top: 1px dashed var(--color-primary-dark);
		border-bottom: 1px dashed var(--color-primary-dark);
		padding: 10px 0;
	}
/* ------------------- BOTONES DE ENLACES (AZUL Y MAGENTA) ------------------- */
	.link-button {
		font-family: var(--font-buttons);
		font-weight: 700;
		border-radius: 8px; 
		padding: 14px 25px; 
		font-size: 1em; 
	}
	.link-button.style-wine { /* AZUL OSCURO */
		background-color: var(--color-primary-dark); 
		color: var(--color-background-base); /* Texto blanco */
		border-color: var(--color-primary-dark);
	}
	.link-button.style-wine:hover {
		background-color: var(--color-secondary-light); /* Magenta */
		color: var(--color-primary-dark) !important; /* Texto Azul Oscuro */
	}
	.link-button.style-rose { /* MAGENTA */
		background-color: var(--color-secondary-light);
		color: var(--color-primary-dark); /* Texto Azul Oscuro */
		border-color: var(--color-secondary-light);
	}
	.link-button.style-rose:hover {
		background-color: var(--color-primary-dark); /* Azul Oscuro */
		color: var(--color-secondary-light) !important; /* Texto Magenta */
	}
	.contact-button { /* Sistema Interno: Azul sobre blanco/claro */
		background-color: var(--color-primary-dark);
		border-color: var(--color-primary-dark);
		color: var(--color-secondary-light); /* Texto Magenta */
	}
	.contact-button:hover {
		background-color: var(--color-secondary-light);
		color: var(--color-primary-dark);
	}
/* ------------------- FOOTER ------------------- */
	.footer-credits {
		color: var(--color-text-subtle); /* CAMBIO CLAVE: Gris oscuro sobre blanco */
	}
	.footer-credits a {
		color: var(--color-primary-dark); /* Enlace en Azul Oscuro */
	}
	.footer-credits a:hover {
		color: var(--color-secondary-light); /* Enlace en Magenta */
	}
/* ------------------- SWEETALERT2 STYLES (Ajustar a fondo blanco) ------------------- */
	.neon-popup {
		/* CAMBIO CLAVE: Fondo del popup de AZUL OSCURO a BLANCO (más corporativo) */
		background: var(--color-background-base) !important;
		border: 2px solid var(--color-primary-dark) !important;
		box-shadow: 0 0 20px rgba(30, 34, 49, 0.1);
		color: var(--color-primary-dark) !important;
	}
	.neon-title {
		/* CAMBIO CLAVE: Título en AZUL OSCURO/MAGENTA sobre fondo BLANCO */
		color: var(--color-secondary-light) !important; 
		text-shadow: 1px 1px 2px rgba(30, 34, 49, 0.2); 
		font-family: var(--font-heading) !important;
	}
	.swal2-html-container p {
		color: var(--color-primary-dark) !important; /* Texto de la alerta en Azul Oscuro */
	}
	.swal2-image {
		background-color: var(--color-background-base);
	}
/* ------------------- BOTÓN CTA PRINCIPAL (MAIN) ------------------- */
	.cta-main {
		font-family: var(--font-buttons);
		font-weight: 700;
		font-size: 1.2em;
		width: 100%; /* Asegurado por w-100 en HTML */
		
		/* Fondo MAGENTA, Texto AZUL OSCURO */
		background-color: var(--color-secondary-light); 
		color: var(--color-primary-dark); 
		
		border: 3px solid var(--color-primary-dark); 
		border-radius: 12px;
		
		/* Sombra Magenta/Azul */
		box-shadow: 0 0 15px rgba(244, 53, 89, 0.8), 0 0 30px rgba(30, 34, 49, 0.5); 
		transition: all 0.3s ease;
	    /* Ajustes de tamaño y espaciado que Bootstrap eliminó */
	    padding: 14px 25px; 
	}
/* ------------------- CORRECCIÓN CONTRASTE FORMULARIO ------------------- */
	/* Aplicamos estilos al contenedor del formulario dentro del SweetAlert */
	#quotationForm {
		/* Forzamos el layout vertical de los elementos */
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
	#quotationForm label {
		margin-top: 5px; /* Espacio entre campos */
	}
	/* Estilos de los campos de entrada */
	.swal2-popup .input-dark-text {
		/* CAMBIO CLAVE 1: El texto dentro del input debe ser oscuro (el color del texto principal) */
		color: var(--color-primary-dark) !important; 
		
		/* CAMBIO CLAVE 2: Fondo BLANCO para legibilidad máxima */
		background-color: var(--color-background-base) !important; 
		border: 1px solid var(--color-primary-dark); /* Borde Azul Oscuro */
		
		/* CORRECCIÓN DE LAYOUT: Ocupar el 100% y manejar el padding */
		box-sizing: border-box; 
		width: 100%; /* Forzamos el 100% de ancho */
		margin-bottom: 15px; /* Espacio inferior */
	}
	.swal2-popup .input-dark-text::placeholder {
		color: var(--color-text-subtle);
	}

	/* Ajuste del botón ENVIAR/CONFIRMAR (Magenta Principal) */
	.neon-confirm-button {
		/* Fondo Magenta, Texto Azul Oscuro */
		color: var(--color-primary-dark) !important; 
		background-color: var(--color-secondary-light) !important;
		border: 2px solid var(--color-primary-dark) !important; 
		
		/* CORRECCIÓN DE LAYOUT: Hacerlo más compacto */
		padding: 10px 15px !important;
		margin-right: 10px; /* Separación con Cancelar */
	}

	/* Ajuste del botón CANCELAR (AZUL OSCURO SECUNDARIO) */
	.neon-cancel-button {
		/* Fondo Azul Oscuro, Texto Blanco. Es más sutil que el botón Enviar. */
		background-color: var(--color-primary-dark) !important;
		color: var(--color-background-base) !important;
		border: 2px solid var(--color-secondary-light) !important; 
		
		/* CORRECCIÓN DE LAYOUT: Hacerlo más compacto */
		padding: 10px 15px !important;
	}
/* ------------------- END ------------------- */