/* Elimina márgenes y relleno */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    min-height: 100vh;
}

/* Estilo de las secciones */
/* Sección Fullscreen */
.section {
    position: relative;
    width: 100%;
    height: 100vh; /* Fullpage */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
}

/* Contenedor de la Imagen */
.image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Mantiene la imagen en el fondo */
}


/* Imagen de fondo completamente responsiva */
.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta la imagen sin distorsionar */
}

/* Contenido de cada sección */
.container {
    position: relative;
    z-index: 10;
}

@media (max-width: 576px) { /* Extra Small (XS) */
    .image-container img {
        height: 100%;
        object-fit: cover; /* Mantiene la relación de aspecto sin distorsionar */
        object-position: 18% center; /* Mueve la imagen más hacia el centro pero manteniendo la izquierda visible */
    }
}

@media (min-width: 577px) { /* Small (SM) y Medium (MD) */
    .image-container img {
        height: 100%;
        object-fit: cover; /* Mantiene la relación de aspecto sin distorsionar */
        object-position: 18% left; /* Mueve la imagen más hacia el centro pero manteniendo la izquierda visible */
    }
}


/* Navegación inicio*/
.navbar {
    position: absolute;
    top: 0;
    width: 100%;
    background-color: transparent !important;
    z-index: 1000;
    transition: background-color 0.3s ease-in-out;
    font-family: 'Robotica';
    font-size: 13px;
    font-weight: 500 !important;
    letter-spacing: 1.5px; /* Ajusta el espacio entre letras */
}


/* Ajuste del logo */
.navbar-brand {
    margin-left: 20px; /* Separación del borde izquierdo */
}

.logo {
    height: 55px;
    width: auto;
}

/* Centrar los elementos de la lista */
.navbar-nav {
    margin: 0 auto; /* Centrar la lista */
    display: flex;
    gap: 60px; /* Espacio entre los elementos */
}
.navbar-nav .nav-item a {
    color: #001694 !important;
    text-decoration: none;
}

.navbar-nav .nav-item a:hover {
    color: #ff430f !important;
}
.nav-item {
    font-weight: bold;
    transition: transform 0.3s ease;
    color: #001694 !important;
}

.nav-item:hover {
    transform: scale(1.1);
}

/* Íconos en la derecha */
.navbar-icons {
    display: flex;
    gap: 15px;
}

.btn-icon {
    border: none;
    background: none;
}

.btn-icon img {
    height: 40px;
    width: auto;
}

.btn-icon:hover {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

/* Ocultar la flecha del dropdown */
.btn-icon.dropdown-toggle::after {
    display: none;
}

/* Íconos en la derecha en pantallas grandes */
.navbar-icons {
    display: flex;
    gap: 15px;
}

/* Ocultar los íconos en pantallas grandes dentro del menú */
.nav-icons-mobile {
    display: none;
}

/* Mostrar los íconos dentro del menú cuando el menú colapsa en pantallas pequeñas */
@media (max-width: 991px) {
    /* Ocultar los íconos de la derecha en pantallas pequeñas */
    .navbar-icons {
        display: none !important;
    }

    /* Mostrar los íconos dentro del menú en móviles */
    .nav-icons-mobile {
        display: flex !important;
        justify-content: center;
        gap: 15px;
        margin-top: 10px;
    }
}

/* Fondo borroso */
.blur-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    backdrop-filter: blur(5px); /* Efecto de desenfoque */
    z-index: 999; /* Asegúrate de que esté detrás del menú pero encima del contenido */
    display: none; /* Oculto por defecto */
}

/* Cambiar el color de las letras a blanco cuando el menú está abierto */
.menu-open .navbar-nav .nav-item a {
    color: white !important; /* Cambia el color del texto a blanco */
}

/* Cambiar el color de los íconos a blanco cuando el menú está abierto */
.menu-open .navbar-icons .btn-icon img {
    filter: brightness(0) invert(1); /* Convierte los íconos a blanco */
}

/* Centrar el menú en pantallas pequeñas */
@media (max-width: 991px) {
    .navbar-collapse {
        text-align: center; /* Centra el texto */
    }

    .navbar-nav {
        display: flex;
        flex-direction: column; /* Apila los elementos verticalmente */
        align-items: center; /* Centra los elementos horizontalmente */
    }

    .nav-item {
        margin: 10px 0; /* Añade espacio entre los elementos */
    }
}

/* nav final */

/* contenido principal */

.text-just{
    text-align: center;
    padding: 10px; /* Margen interno */
    font-weight: bold;
}


.text-p{
    text-align: center;
}

.barra-transparente {
    background-color: rgba(0, 0, 0, 0.6); /* Color negro con transparencia */
    padding: 10px 15px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 95%; /* Hace que la barra ocupe todo el ancho disponible */
    max-width: 1400px; /* Ajusta este valor según sea necesario */
    margin: 0 auto; /* Centra la barra horizontalmente */
}

.texto-barra {
    color: white;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    letter-spacing: 1px; /* Ajusta el valor según sea necesario */
}

.btn-barra {
    background-color: #ff430f; /* Color naranja */
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 30px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-barra:hover {
    background-color: #001694; /* Color más oscuro para el hover */
}


#inicio .container {
    margin-top: 50px; /* Ajusta para mover todo el texto hacia abajo */
    padding-top: 30px; /* Espacio adicional dentro del contenedor */
}

#inicio .col-md-5 {
    margin-top: 100px; /* Para mover la sección hacia abajo */
    padding-left: 20px; /* Espaciado desde el lado izquierdo */
}

#inicio .barra-transparente {
    padding-left: 20px; /* Alinea con el texto */
    margin-top: 20px; /* Ajusta para separación vertical */
}

/* Responsivo: Ajustes para pantallas pequeñas */
@media (max-width: 991px) { /* Tablets y dispositivos pequeños */

    .text-just{
        text-align: center;
        padding: 5px; /* Margen interno */
        font-weight: bold;
    }

    .barra-transparente {
        flex-direction: column; /* Elementos en columna */
        align-items: center; /* Centra los elementos */
        padding: 20px; /* Aumenta el padding general */
        gap: 20px; /* Ajusta el espacio entre elementos */
        max-width: 85%; /* Ajusta el ancho máximo */
    }

    .texto-barra {
        font-size: 14px; /* Reduce el tamaño del texto */
        text-align: center; /* Centra el texto */
    }

    .btn-barra {
        font-size: 12px; /* Reduce el tamaño del botón */
        padding: 6px 10px; /* Ajusta el espacio interno del botón */
        width: 50%; /* Ajusta el ancho del botón */
    }

    #inicio .container {
        margin-top: 30px; /* Reduce el margen superior */
        padding-top: 20px; /* Reduce el padding superior */
    }

    #inicio .col-md-5 {
        margin-top: 50px; /* Mueve la sección más arriba */
        padding-left: 10px; /* Reduce el espacio a la izquierda */
    }
}

/* Responsivo: Ajustes para pantallas muy pequeñas */
@media (max-width: 576px) { /* Móviles pequeños */
    .barra-transparente {
        gap: 28px; /* Reduce el espacio entre elementos */
        padding: 30px; /* Reduce el padding general */
        max-width: 80%;
        
    }

    .texto-barra {
        font-size: 14px; /* Reduce aún más el tamaño del texto */
    }

    .btn-barra {
        font-size: 14px; /* Ajusta el tamaño del texto del botón */
        padding: 10px 15px; /* Reduce el padding del botón */
        width: 60%; /* Ajusta el ancho del botón */
    }

    #inicio .container {
        margin-top: 20px; /* Reduce aún más el margen superior */
        padding-top: 15px; /* Reduce el padding superior */
    }

    #inicio .col-md-5 {
        margin-top: 30px; /* Ajusta la posición hacia arriba */
        padding-left: 5px; /* Minimiza el espacio a la izquierda */
    }
}


/*contenido de la seccion 1  */

/* Título "Servicios" posicionado arriba */
.custom-title {
    color: #ff430f;
    font-size: 2.5rem;
    text-align: center;
    position: absolute;
    top: 50px; /* Lo coloca arriba */
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Robotica';
    letter-spacing: 1.5px;
}

/* Ajustes para las imágenes */
.custom-img {
    width: 100%; /* Ajusta las imágenes al ancho del contenedor */
    max-height: 100px; /* Establece una altura máxima */
    object-fit: contain; /* Asegura que la imagen no se deforme */
}

.up{
    margin-top: 80px; /* Ajusta este valor según sea necesario */ 
    gap: 20px; /* Espacio entre las columnas */
}


.attr {
    width: 750px !important; /* Ajusta el tamaño según sea necesario */
    height: 200; /* Ajusta la altura para aplastar la imagen */
    object-fit: cover; /* Asegura que la imagen se ajuste sin distorsionar */
}

.btn-custom {
    font-size: 15px; /* Tamaño del texto */
    padding: 8px 25px; /* Ajusta el padding */
    border-radius: 30px; /* Bordes redondeados */
    color: white; /* Texto en color blanco */
    font-weight: 500; /* Grosor medio (prueba 400 si lo quieres más delgado) */
    border: none;
    transition: transform 0.3s ease;
}
.btn-custom:hover {
    transform: scale(1.05);
}

/* Estilo específico para cada botón */
.btn-envio {
    background-color: #ff430f;
}

.btn-divisa {
    background-color: #001694;
}

.text-orange {
    color: #ff430f; /* Color de título en naranja */
    font-weight: bold;
}

.text-black {
    color: black; /* Color de título en negro */
    font-weight: bold;
}

.row.text-center p {
    font-size: 12px; /* Tamaño del texto */
    line-height: 1.4;
}
/* Redes sociales */

.social-icons a {
    color: white;
    font-size: 20px;
    margin: 0 10px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-icons a:hover {
    color: #ff430f;
    transform: scale(1.1);
}
.social-container {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.social-icon {
    background-color: #ff430f; /* Color del fondo */
    font-size: 24px;
    padding: 15px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    text-decoration: none;
    transition: transform 0.3s ease, background-color 0.3s;
}

.social-icon i {
    color: #ffffff !important; /* Color del icono */
}

.social-icon:hover {
    transform: scale(1.1) !important;
    background-color: #ffb01f !important; /* Cambia el fondo al pasar el mouse */
}

.social-icon:hover i {
    color: white !important; /* Cambia el color del icono en hover */
}

@media (max-width: 576px) {
    .social-container {
        display: none;
    }
}


/* Footer */
.footer {
    background-color: #001694;
    color: white;
    padding: 40px 0;
    text-align: center;
}

/* Contenido del footer */
.footer-section {
    margin-bottom: 20px;
}

/* Títulos */
.footer-section h4 {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: bold;
}

/* Enlaces */
.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 8px;
}

.footer-links a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #ff430f;
}



/* Footer inferior */
.footer-bottom {
    background-color: #000d5c;
    padding: 10px 0;
    font-size: 14px;
}