/* General: establece altura completa y elimina margenes por defecto */
html, body {
  height: 100%;
  margin: 0;
  overflow-y: hidden; /* Evita que aparezca la barra de scroll vertical */
}

/* Estilos para la barra de navegación personalizada */
.custom-navbar {
  height: 100px; /* Altura fija */
  background-color: #f8f9fa; /* Color de fondo gris claro */
  display: flex; /* Usamos flexbox para centrar contenido */
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
}

/* Estilo para el logo dentro del navbar */
.navbar-logo {
  height: 150px; /* Alto fijo para el logo */
  width: auto; /* Mantiene la proporción del ancho */
  object-fit: contain; /* Ajusta la imagen para que no se corte */
  position: relative;
  top: -30px; /* Lo sube un poco para un mejor ajuste visual */
}

/* Contenedor del banner principal */
.banner-principal {
  position: relative; /* Para posicionar elementos hijos */
  height: calc(100vh - 100px); /* Ocupa toda la pantalla menos la navbar */
  overflow: hidden; /* Oculta lo que se salga del contenedor */
}

/* Imagen de fondo que cubre todo el banner */
.background-image {
  position: absolute; /* Se pone detrás del contenido */
  top: 0;
  left: 0;
  width: 100%; /* Ocupa todo el ancho */
  height: 100%; /* Ocupa toda la altura del banner */
  object-fit: cover; /* La imagen se ajusta para cubrir todo sin deformarse */
  z-index: 1; /* Detrás del contenido */
}

/* Capa que contiene texto y botones, sobre la imagen */
.banner-overlay {
  position: relative; /* Para estar sobre la imagen */
  z-index: 2; /* Por encima de la imagen */
  height: 100%;
  color: #000; /* Color negro para textos */
  display: flex;
  flex-direction: column; /* Los hijos en columna */
  justify-content: center; /* Centra verticalmente */
  align-items: center; /* Centra horizontalmente */
  text-align: center; /* Centra el texto */
  padding: 2rem; /* Espacio interno para separación */
}

/* Estilo para el título principal */
.titulo-bienvenida {
  font-size: 2.8rem; /* Tamaño grande */
  font-weight: bold; /* Negrita */
}

/* Estilo para textos secundarios */
.texto-instruccion,
.texto-extra {
  font-size: 1.25rem; /* Tamaño legible pero más pequeño que el título */
  margin-bottom: 1rem; /* Espacio debajo */
}

/* Contenedor de los botones de acceso */
.botones-acceso {
  display: flex;
  flex-direction: column; /* Botones apilados verticalmente */
  align-items: center; /* Centra horizontalmente */
  gap: 1rem; /* Espacio entre botones */
  margin-bottom: 1.5rem; /* Margen debajo del grupo de botones */
}

/* Estilo para los botones */
.botones-acceso .btn {
  font-size: 1.25rem; /* Tamaño de texto */
  padding: 0.75rem 2.5rem; /* Espacio interno (alto y ancho) */
}