/* matricula.css */

/* Colores principales */
:root {
  --color-azul-cbo: #234c92;
  --color-gris-claro: #f8f9fa;
  --color-gris-medio: #6c757d;
  --color-gris-oscuro: #323e48;
  --color-blanco: #ffffff;
}

/* Fondo general */
body {
  background-color: var(--color-gris-claro);
  color: var(--color-gris-oscuro);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Navbar */
.navbar {
  background-color: var(--color-blanco) !important;
  border-bottom: 2px solid var(--color-azul-cbo);
}

.navbar-brand img {
  max-height: 50px;
}

.nav-link {
  color: var(--color-azul-cbo) !important;
  font-weight: 600;
  transition: color 0.3s ease;
}

.nav-link:hover, .nav-link:focus {
  color: var(--color-gris-medio) !important;
}

/* Títulos */
h2, h3, h4 {
  color: var(--color-azul-cbo);
  font-weight: 700;
}

h2 {
  margin-bottom: 1.5rem;
}

/* Botones personalizados */
.btn-primary {
  background-color: var(--color-azul-cbo);
  border-color: var(--color-azul-cbo);
  font-weight: 600;
}

.btn-primary:hover, .btn-primary:focus {
  background-color: #1d4075;
  border-color: #1d4075;
  box-shadow: 0 0 8px rgba(35, 76, 146, 0.6);
}

.btn-secondary {
  background-color: var(--color-gris-medio);
  border-color: var(--color-gris-medio);
}

.btn-secondary:hover, .btn-secondary:focus {
  background-color: #575d63;
  border-color: #575d63;
  box-shadow: 0 0 8px rgba(108, 117, 125, 0.6);
}

/* Iconos e imágenes */
img {
  border-radius: 4px;
  max-width: 100%;
  height: auto;
}

/* Sección preloader */
.preloader {
  background-color: var(--color-blanco);
  z-index: 9999;
}

/* Footer */
footer {
  background-color: var(--color-blanco);
  color: var(--color-gris-oscuro);
  border-top: 3px solid var(--color-azul-cbo);
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

footer h5 {
  color: var(--color-azul-cbo);
  font-weight: 700;
  margin-bottom: 1rem;
}

footer a {
  color: var(--color-azul-cbo);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* Listas sin estilo */
ul {
  padding-left: 1.25rem;
}

/* Ajustes para responsive y márgenes */
@media (max-width: 576px) {
  .navbar-brand img {
    max-height: 40px;
  }
  h2, h3 {
    font-size: 1.5rem;
  }
}

.sitios-img {
  object-fit: contain;
  height: 60px;
  width: auto;
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .sitios-img {
    height: 80px;
  }
}
html {
  scroll-behavior: smooth;
}