/* Base */
:root {
	--mqf-primary: #0d6efd;
}
html,
body {
	height: 100%;
}
body {
	scroll-behavior: smooth;
}

/* Navbar: opacidad que aumenta al hacer scroll */
#mainNav {
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
	background-color: rgba(13, 110, 253, 0.85) !important;
	backdrop-filter: saturate(150%) blur(6px);
}
.scrolled #mainNav {
	background-color: #0d6efd !important;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Hero */
.hero {
	background: radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.2), transparent 40%),
		radial-gradient(ellipse at bottom right, rgba(255, 255, 255, 0.2), transparent 40%),
		url(../../img/inicio.png) center/cover no-repeat fixed;
	color: #fff;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* WhatsApp floating */
#whatsapp-float {
	position: fixed;
	right: 18px;
	bottom: 18px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #25d366;
	color: #fff;
	font-size: 26px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
	z-index: 2147483647;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
#whatsapp-float:hover {
	transform: translateY(-2px) scale(1.03);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}
#whatsapp-float:active {
	transform: translateY(0) scale(0.98);
}

/* Cards */
.card {
	border: 0;
}
.card .card-title {
	font-weight: 600;
}

/* Footer */
footer a:hover {
	text-decoration: underline;
}

.justifica {
	text-align: justify;
}

#about,
#services,
#contact {
	scroll-margin-top: 60px;
}

#about h2,
h2 {
	color: cornflowerblue;
}

a {
	text-decoration: none;
}

a:hover {
	font-weight: bold;
}

/* ----- Navbar active/hover styles ----- */
/*
   Resalta los enlaces activos y al pasar el ratón en la barra de navegación.  
   La clase `.active` se añade dinámicamente mediante JavaScript cuando la sección
   asociada está en el viewport o al hacer clic en un enlace.  
   Estos estilos aplican también al estado `:hover` para ofrecer una retroalimentación
   visual inmediata.  
*/
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:focus {
	background-color: white !important;
	color: #0000008c !important;
	border-radius: 5px !important;
	padding: 8px 6px 12px 6px !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}