/* Estilos Generales */
body {
  font-family: 'Montserrat', sans-serif;
  padding-top: 56px; /* Ajuste para la navbar fija */
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700; /* Negrita para encabezados */
}

/* Hero Section */
.hero {
  position: relative;
  color: white;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Sombra para legibilidad */
}

.hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4); /* Superposición oscura */
  z-index: 1;
}

.hero .container {
  position: relative; /* Para que el contenido esté sobre la superposición */
  z-index: 2;
}

/* Navbar */
.navbar-brand {
    color: #0d6efd; /* Color primario de Bootstrap */
}

.nav-link:hover, .nav-link.active {
    color: #0d6efd !important; /* Resaltar enlace activo/hover */
}

/* Secciones */
section {
  scroll-margin-top: 60px; /* Ajuste para el anclaje con navbar fija */
}

/* Cards (Menú, etc.) */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px); /* Efecto levantar al pasar el ratón */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.card-img-top {
    height: 200px; /* Altura fija para imágenes de card */
    object-fit: cover; /* Asegura que la imagen cubra el espacio sin distorsionarse */
}

/* Botones */
.btn-primary {
    /* Puedes personalizar el color primario si lo deseas */
    /* background-color: #tu-color-primario; */
    /* border-color: #tu-color-primario; */
}

.btn-outline-primary:hover {
    /* background-color: #tu-color-primario; */
    /* color: white; */
}

/* Footer */
.footer a {
    text-decoration: none;
}

.footer a:hover {
    color: #adb5bd !important; /* Color gris claro al pasar el ratón */
}

/* Iconos */
.bi {
    vertical-align: -0.125em; /* Alineación vertical de iconos Bootstrap */
}