/* =====================================================================
   MEJORAS DE DISEÑO — SELPI
   Se mantiene la paleta de marca existente (#429FFD) y todo el
   contenido/estructura tal cual — solo se pule la presentación.
   ===================================================================== */

/* --- 0) Fix necesario para que el menú fijo funcione ---------------- */
/* #page tenía "overflow-x: hidden", y CUALQUIER overflow distinto de
   "visible" en un contenedor padre rompe el position:sticky de todo lo
   que esté adentro. Se mueve el mismo efecto (evitar scroll horizontal)
   a html/body, que no tiene ese problema. */
html, body {
	overflow-x: hidden;
}
#page {
	overflow-x: visible;
}

/* --- 1) Menú fijo al hacer scroll ---------------------------------- */
/* La franja superior (teléfonos/redes) se va con el scroll normal;
   el menú principal (logo + secciones) queda pegado arriba. */
.colorlib-nav .top-menu {
	position: sticky;
	top: 0;
	z-index: 999;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.2s ease;
}

/* Compensa que #colorlib-hero es lo primero que se ve: sin esto no
   cambia nada visualmente, pero evita saltos raros en navegadores
   viejos que no soporten "sticky" (se degrada a fijo estático). */
@supports not (position: sticky) {
	.colorlib-nav .top-menu {
		position: static;
	}
}

/* --- 2) Scroll suave para los links internos (#propuestas, #sec1...) */
html {
	scroll-behavior: smooth;
}

/* --- 3) Botones: más presencia y una transición prolija ------------ */
.btn-primary,
.btn-secondary,
.btn-learn {
	border-radius: 4px;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-primary:hover,
.btn-learn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(66, 159, 253, 0.35);
}

.btn-secondary {
	background: #fff;
	color: #429FFD;
	border: 2px solid #429FFD;
	border-radius: 4px;
	padding: 10px 22px;
	display: inline-block;
	font-weight: 600;
}

.btn-secondary:hover {
	background: #429FFD;
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(66, 159, 253, 0.25);
}

/* --- 4) Tarjetas de servicios/propuestas: elevación sutil al pasar el mouse */
#colorlib-intro .services,
.colorlib-classes .services {
	background: #fff;
	border-radius: 8px;
	padding: 30px 20px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

#colorlib-intro .box:hover .services,
.colorlib-classes .box:hover .services {
	transform: translateY(-6px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

#colorlib-intro .services .icon i,
.colorlib-classes .services .icon i {
	transition: transform 0.2s ease;
}

#colorlib-intro .box:hover .icon i,
.colorlib-classes .box:hover .icon i {
	transform: scale(1.12);
}

/* --- 5) Acordeón "¿Por qué elegirnos?" / "¿Qué hacemos?": más aire y foco visible */
.panel-group .panel {
	border: none;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	margin-bottom: 12px;
}

.panel-group .panel-heading a {
	display: block;
	padding: 4px 0;
}

.panel-group .panel-heading a:focus-visible,
.btn:focus-visible,
a:focus-visible {
	outline: 3px solid #429FFD;
	outline-offset: 2px;
}

/* --- 6) Ritmo tipográfico un poco más generoso en los bloques de texto */
#colorlib-intro .about-desc p,
.colorlib-classes p {
	line-height: 1.7;
}

/* --- 7) Respeta a quien prefiere menos movimiento en pantalla ------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.btn-primary, .btn-secondary, .btn-learn,
	#colorlib-intro .services, .colorlib-classes .services,
	#colorlib-intro .services .icon i, .colorlib-classes .services .icon i {
		transition: none !important;
		transform: none !important;
	}
}