html {
    font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}


body {
    margin-bottom: 60px;
    font-family: 'Roboto', sans-serif;
   
}
.container {
    max-width:90% !important;
}

.bg-index {
    background-image: url(../img/tac-home.webp);
    background-size: cover; /* La imagen cubre todo el área del contenedor */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* No repite la imagen */
    width: 100%; /* El ancho es el 100% del contenedor padre */
    min-height: 60vh; /* Ocupa el 100% de la altura de la ventana */
    height:500px;
}
.bg-sobre-nosotros {
    background-image: url(../img/sobre-nosotros.webp);
    background-size: cover; /* La imagen cubre todo el área del contenedor */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* No repite la imagen */
    width: 100%; /* El ancho es el 100% del contenedor padre */
    min-height: 60vh; /* Ocupa el 100% de la altura de la ventana */
    height: 500px;
}
.bg-servicios {
    background-image: url(../img/nuestros-servicios.webp);
    background-size: cover; /* La imagen cubre todo el área del contenedor */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* No repite la imagen */
    width: 100%; /* El ancho es el 100% del contenedor padre */
    min-height: 60vh; /* Ocupa el 100% de la altura de la ventana */
    height: 500px;
}
.bg-ventajas {
    background-image: url(../img/ventajas-del-fideicomiso.webp);
    background-size: cover; /* La imagen cubre todo el área del contenedor */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* No repite la imagen */
    width: 100%; /* El ancho es el 100% del contenedor padre */
    min-height: 60vh; /* Ocupa el 100% de la altura de la ventana */
    height: 500px;
}
.bg-diferenciadores {
    background-image: url(../img/diferenciadores.webp);
    background-size: cover; /* La imagen cubre todo el área del contenedor */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* No repite la imagen */
    width: 100%; /* El ancho es el 100% del contenedor padre */
    min-height: 60vh; /* Ocupa el 100% de la altura de la ventana */
    height: 500px;
}
.bg-faq {
    background-image: url(../img/faq.webp);
    background-size: cover; /* La imagen cubre todo el área del contenedor */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* No repite la imagen */
    width: 100%; /* El ancho es el 100% del contenedor padre */
    min-height: 60vh; /* Ocupa el 100% de la altura de la ventana */
    height: 500px;
}
.bg-footer {
    background-image: url(../img/footer.webp);
    background-size: cover; /* La imagen cubre todo el área del contenedor */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* No repite la imagen */
    width: 100%; /* El ancho es el 100% del contenedor padre */
    min-height: 20vh; /* Ocupa el 100% de la altura de la ventana */

}

.menu {
    box-sizing: border-box;
    margin: 7px;
    min-width: 0px;
    color: #ffffff;
    /*padding: 0px 17px;*/
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    line-height: 75px;
    position: relative;
}

    .menu::before {
        content: "";
        width: 50%;
        height: 5px;
        background-color: rgb(141, 198, 63);
        position: absolute;
        bottom: 15px;
        left: 0px;
        right: 0px;
        opacity: 0;
        margin: 0px auto;
        transform: translateY(5px);
        transition: 0.3s ease-in;
    }
.h1 {
    font-size: 50px;
    color: rgb(255, 255, 255);
    margin-top: -280px !important;
}

.h2 {
    font-size: 30px;
    color: rgb(141 198 63);
}
p {
    color: #5d5959;
}
.parrafo {
    color: #ffffff;
}
    .parrafo a {
        text-decoration: none;
        color: inherit; /* Mantiene el color del texto normal, opcional */
    }
.verde {
    color: rgb(141, 198, 63);
}
.btn-verde {
    background: rgb(141, 198, 63);
    color: rgb(255, 255, 255);
    padding: 10px 31px;
    text-decoration: none;
    border-radius: 28px;
    display: inline-block;
    font-size: 16px;
}
.btn-azul {
    background: rgb(43, 57, 144);
    color: rgb(255, 255, 255);
    padding: 10px 31px;
    text-decoration: none;
    border-radius: 28px;
    display: inline-block;
    font-size: 16px;
}

.contenidoprincipal {
    position: relative;
    top: -80px !important;
    width: 85%;
}

/*overrides para Bootstrap 5  - responsibildad */
@media only screen and (max-width: 320px) {
    .web {
        display: none !important;
    }

    .movil {
        display: block !important;
    }
    .p-4 {
        padding: 0.1rem !important;
    }
}

@media only screen and (max-width: 348px) {
    .movil {
        display: block !important;
    }

    .web {
        display: none !important;
    }
    .p-4 {
        padding: 0.1rem !important;
    }
}

@media only screen and (max-width: 480px) {
    .web {
        display: none !important;
    }

    .movil {
        display: block !important;
    }
    .p-4 {
        padding: 0.1rem !important;
    }
}

/*media css param PC*/
@media only screen and (min-width: 992px) {
    .movil {
        display: none !important;
    }

    .web {
        display: block !important;
    }
    .p-4 {
        padding: 1.5rem !important;
    }
}

.accordion {
    max-width: 900px;
    margin: auto;
}

.accordion-item {
    background-color: #8BC34A;
    color: white;
    margin-bottom: 20px;
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
}

.accordion-header {
    padding: 20px 20px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-content {
    background-color: white;
    color: #333;
    padding: 20px 20px;
    display: none;
}

.accordion-item.active .accordion-content {
    display: block;
}

.accordion-item.active .accordion-header {
    background-color: #7CB342;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 7px 25px 0px 30px;
    background: transparent;
}
.nav-link:focus, .nav-link:hover {
    color: rgb(243 245 244 / 80%);
}
    .navbar a {
        color: white;
        text-decoration: none;
        position: relative;
        padding: 5px 0;
        font-weight: bold;
        
    }

        .navbar a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 20px;
            width: 0;
            height: 6px;
            background-color: #8BC34A;
            transition: width 0.3s ease;
            color: white;
        }

        .navbar a:hover::after,
        .navbar a.active::after {
            width: 100%;
        }