/* ESTO ES PARA EL HEADER*/
/* Estilos para asegurarse de que el banner y el navbar estén bien posicionados */
 
.banner {
    background-color: #010f45; /* Azul */
    width: 100%;
}

.navbar {
    background-color: #010f45; /* Azul */
}

/* Ajustar el texto del banner */
.banner-text {
    font-size:12px; /* Tamaño de texto inicial */
    white-space: normal; /* Permite que el texto se ajuste en varias líneas */
}

/* Asegurar que el contenido colapsado se expanda correctamente */
.navbar-collapse {
    max-height: none; /* Permite que el contenido crezca según sea necesario */
    overflow: visible; /* Evita el corte de contenido */
}

/* Ajustar altura del navbar en dispositivos móviles */
@media (max-width: 768px) {
   body{
        padding-top: 70px;
   }
    .navbar-altura {
        height: auto; /* Deja que el contenido determine la altura */
    }
    .navbar-nav .nav-item {
        text-align: center; /* Centra los enlaces del menú */
        padding: 0.5em 0; /* Espaciado entre los elementos del menú */
    }
    
    .banner-text {
        font-size: 10px; /* Tamaño de texto reducido para tabletas */
    }
    .banner-text {
        font-size: 8.5px; /* Tamaño de texto reducido para móviles */
    }
}

footer {
    background-color: #010f45; /* Azul */
}
/* Estilos para el botón de ir hacia arriba */ 
.btn-ir-arriba {
    display: none; /* Ocultamos el botón inicialmente */
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: transparent; /* Esto hace que el fondo sea transparente */
    border: 2px solid #070707; /* Cambia el color del borde según tu preferencia */
    color: #070707;
    border-radius: 5px;
    text-decoration: none;
    line-height: 40px;
    cursor: pointer;
  }
  
  /* Mostrar el botón cuando el usuario haya scrollado una cierta distancia */
  .show-button {
    display: block;
  }
  /* botones */
  a.btn-primary:hover {
    background-color: #021b7a !important;
    border-color: #021b7a !important;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
   /* Estilos personalizados para los botones */
#cargar-mas {
    background-color: #010f45 !important;
    border-color: #010f45 !important;
    color: white !important;
    padding: 10px 25px;
    font-weight: bold;
    transition: all 0.3s ease;
}

#cargar-mas:hover {
    background-color: #021b7a !important;
    border-color: #021b7a !important;
    transform: scale(1.05);
}

#cargar-mas:disabled {
    background-color: #010f45 !important;
    opacity: 0.8;
}

/* Establece la fuente Poppins como predeterminada para todo el sitio */
body {
    font-family: 'Poppins', sans-serif;
    font-weight: 400; /* Peso regular por defecto */
    line-height: 1.6;
    color: #333; /* Color de texto base */
}

/* Estilos para encabezados */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700; /* Peso bold para títulos */
    margin-bottom: 1rem;
    line-height: 1.2;
}

/* Estilos específicos para diferentes pesos */
.light {
    font-weight: 300;
}
.regular {
    font-weight: 400;
}
.medium {
    font-weight: 500;
}
.bold {
    font-weight: 700;
}
.extra-bold {
    font-weight: 800;
}
.black {
    font-weight: 900;
}

/* Estilos para elementos específicos */
button, input, select, textarea {
    font-family: 'Poppins', sans-serif;
}

/*PARA PANTALLAS MUY GRANDES*/
@media (min-width: 1400px) {
    .btn-ir-arriba {
        right: 50px;
        bottom: 50px;
        width: 50px;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
    }
}
@media (min-width: 1400px) {
    #cargar-mas {
        padding: 15px 35px;
        font-size: 18px;
    }

    .navbar-nav .nav-link {
        font-size: 16px;
    }
}
/* Ajustes para pantallas muy grandes */
@media (min-width: 1400px) {
    .banner {
        padding: 20px 0; /* Reducimos un poco el padding vertical si es fixed-top */
    }

    .banner-text {
        font-size: 18px;
        white-space: nowrap; /* Evita que se rompa el texto en varias líneas */
    }

    .container, .container-fluid {
        max-width: 1300px;
    }
}