/*GENERALES*/
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

@font-face {
    font-family: montserrat;
    src: url(../fonts/montserrat.ttf);
}

* {
    line-height: 1.4;
    margin: 0;
    padding: 0;
}

html,
body {
    overflow-x: hidden;
}

.container-fluid {
    padding-right: 12px !important;
    padding-left: 12px !important;
}

.carousel {
    padding-right: 8px !important;
    padding-left: 8px !important;
}


h1 {
    display: none;
}

h2 {
    font-family: montserrat;
    font-size: 55px;
    font-weight: 600;
    color: white;
    margin: 0;
    text-transform: initial !important;
}

h3 {
    font-family: montserrat;
    font-size: 35px;
    font-weight: 600;
    padding: 0 0 20px 0;
    margin: 0;
    color: #003366;
}

h4 {
    font-family: montserrat;
    font-size: 22px;
    font-weight: 600;
    color: #003366;
    margin: 0 0 20px 0;
    text-transform: initial !important;
}


p {
    font-family: montserrat;
    font-size: 17px;
    font-weight: 400;
    color: black;
    margin: 0;
}

a {
    text-decoration: none !important;
}

.semibold {
    font-family: montserrat;
    font-size: 17px;
    font-weight: 600;
    color: #003366;
    margin: 0;
}

/*HEADER - NAV*/
.navbar {
    background-color: white !important;
    position: fixed;
    width: 100%;
    z-index: 1030;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

nav .active {
    color: #003366 !important;
}


nav a {
    font-family: montserrat;
    color: black !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    transition: all ease .7s;
}

nav a:hover {
    color: #003366 !important;
}

.nav-item {
    padding: 17px;

}

header a img {
    width: 150px;
    padding-left: 20px;
}

.btn-nav a {
    margin: 0 !important;
}

.navbar-toggler {
    padding: 20px 30px !important;
    border: none !important;
    color: white !important;
}

.dropdown-menu {
    background-color: white !important;
    border-radius: 5px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    margin-top: -10px !important;
}

.dropdown-item.active {
    background-color: #bcc6e998 !important;
}

/*CAROUSEL*/
.carousel-inner {
    background-color: black;
    margin-top: 75px;
    border-radius: 50px;
}

.content-slide img {
    width: 600px;
    margin-bottom: 20%;
}

picture {
    opacity: 0.6;
}

.flag-container {
    position: absolute;
    top: 50px;
    right: 50px;
    z-index: 10;
    box-shadow: rgba(0, 0, 0, 0.43) 1px 1px 6px;
}

.flag-container img {
    width: 100px;
    border-radius: 8px;
}

.carousel-caption h2 {
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
    margin-bottom: 30%;
}


/*SOBRE NOSOTROS*/
.sobre-nosotros {
    padding: 70px 8%;
}

.sobre-nosotros img {
    border-radius: 10%;
    width: 100%;
}

.logos {
    padding-top: 100px;
}

.logos img {
    width: 100%;
    border-radius: 0 !important;
}

/*NUESTRO COMPROMISO*/
.nuestro-compromiso {
    padding: 100px 10%;
    margin-top: 70px;
    background-color: black;
    background-image: url(../img/nuestro-compromiso.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 50px;
}

.nuestro-compromiso h3 {
    color: white;
    padding: 0 0 20px 0 !important;
}

.nuestro-compromiso h4 {
    color: white;
    font-size: 20px;
    font-weight: 500;
    padding: 0 15%;
    padding-bottom: 20px;
    text-shadow: black 1px 1px 2px;
    text-transform: initial !important;
}

.nuestro-compromiso p {
    color: white;
}

.compromiso-contenido h3 {
    padding: 0 !important;
}

.compromiso-contenido {
    background-color: rgba(255, 255, 255, 0.241);
    border-radius: 25px;
    padding: 20px;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    /* Para compatibilidad con Safari */
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    margin: 0 -80px;
}

/* NUESTROS PRINCIPALES SERVICIOS*/
.servicios {
    padding: 100px 1%;
}

.servicio-card {
    background: #F1F1F4;
    border-radius: 20px;
    padding: 30px 20px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.servicios .bi {
    font-size: 90px;
}

.servicios .bi-tools {
    color: #003366;
}

.servicios .bi-lightning-charge-fill {
    color: #C05D06;
}

.servicios .bi-calendar2-week-fill {
    color: #6A1880;
}

.servicios .bi-tree-fill {
    color: #2C6E00;
}

.se-1 h4 {
    color: #003366;
}

.se-2 h4 {
    color: #C05D06;
}

.se-3 h4 {
    color: #6A1880;
}

.se-4 h4 {
    color: #2C6E00;
}

.servicio-contenido {
    transition: opacity 0.3s;
}

.servicio-hover {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 2;
}

.se-1:hover {
    background-image: url('../img/fondo-aceran.jpg');
    background-size: cover;
    background-position: center;
}

.se-2:hover {
    background-image: url('../img/fondo-cein.jpg');
    background-size: cover;
    background-position: center;
}

.se-3:hover {
    background-image: url('../img/fondo-anfitriones.jpg');
    background-size: cover;
    background-position: center;
}

.se-4:hover {
    background-image: url('../img/fondo-jardinarmex.jpg');
    background-size: cover;
    background-position: center;
}

.ver-mas {
    background-color: white;
    color: #003366;
    padding: 10px 20px;
    border-radius: 50px;
    border: none !important;
    font-weight: 600;
    font-family: montserrat;
    transition: all ease .4s;
}

.ver-mas:hover {
    background-color: #003366;
    color: white;
}

.servicio-card:hover .servicio-contenido {
    opacity: 0;
    pointer-events: none;
}

.servicio-card:hover .servicio-hover {
    opacity: 1;
    pointer-events: auto;
}

.servicio-card::after {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.299);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 1;
    border-radius: 20px;
}

.servicio-card:hover::after {
    opacity: 1;
}

.servicio-hover .ver-mas {
    z-index: 2;
}

/*¿POR QUÉ ELEGIRNOS?*/
.porque-elegirnos {
    background: #fff;
}

.porque-box {
    background: #042547;
    color: #fff;
    border-radius: 36px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10% !important;
}

.porque-box h2 {
    font-size: 45px;
    margin-bottom: 30px;
}

.porque-item .porque-icon {
    color: #fff;
    min-width: 48px;
}

.porque-item h4 {
    color: #fff;
    margin-bottom: 10px;
}

.porque-item p {
    color: #fff;
}

.porque-img {
    object-fit: cover;
    height: 220px;
}


/*CLIENTES QUE CONFIAN EN NOSOTROS*/
.carrusel-clientes {
    background: #fff;
    padding: 100px 0 0 0 !important;
}

.carrusel-clientes h3 {
    color: #003366;
}

/* Carrusel automático que muestra 4 imágenes */
.carrusel-automatico-container {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.carrusel-automatico {
    width: 100%;
    display: flex;
}

.carrusel-automatico {
    width: 100%;
}

.carrusel-track-auto {
    display: flex;
    width: calc(100% * 3.5); /* Para mostrar 4 imágenes y que se muevan */
    animation: scroll-automatico 25s linear infinite;
}

.carrusel-item-auto {
    flex: 0 0 calc(100% / 4); /* Cada item ocupa exactamente 1/4 para mostrar 4 a la vez */
    min-width: calc(100% / 4);
    padding: 50px 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carrusel-item-auto img {
    width: 100%;
    max-width: 250px;
    height: auto;
    object-fit: contain;
    border-radius: 0 !important;
    transition: all 0.3s ease;
}

.cliente-3 {
    max-width: 180px !important;
}

.carrusel-item-auto img:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Animación infinita */
@keyframes scroll-automatico {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-100% / 4 * 10)); /* Mueve 10 slides (las originales) */
    }
}

/* Pausa la animación al hacer hover */
.carrusel-automatico:hover .carrusel-track-auto {
    animation-play-state: paused;
}

/*BOLETÍN ELECTRÓNICO*/

/*CONTÁCTANOS*/
.contacto {
    padding: 50px 8% 80px 8%;
}

.contacto p {
    margin-bottom: 30px;
}

.contacto .bi-envelope-at-fill {
    color: #003366;
    font-size: 30px;
    background-color: #EAF1F6;
    border-radius: 50%;
    padding: 10px 12px;
}

.contacto .bi-telephone-outbound-fill {
    color: #003366;
    font-size: 25px;
    background-color: #EAF1F6;
    border-radius: 50%;
    padding: 13px 15px;
}

.contacto h4 {
    padding-left: 30px;
    margin-bottom: 0 !important;
}

.contacto-rapido {
    width: 100%;
    margin-top: 50px !important;
}

.contacto-rapido .bi {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf1f7;
    border-radius: 50%;
    padding: 20px;
    font-size: 25px;
    color: #0d325c;
    margin-bottom: 15px;
    transition: all ease 0.3s;
}

.contacto-rapido .bi:hover {
    background: #0d325c;
    color: white;
}



.contacto-link {
    color: #0d325c;
    text-decoration: none;
    transition: color 0.2s;
}
.contacto-link:hover {
    color: #1a5ca4;
    text-decoration: underline;
}

/*FOOTER*/
footer {
    padding: 50px 5%;
    background-color: #042547;
}

footer p {
    color: white;
    margin-bottom: 0;
}

footer h3 {
    color: white;
    text-transform: initial;
}

footer .semibold {
    color: white;
}

.enlaces-rapidos a {
    display: flex;
    align-items: center;
    gap: 0.5em;
    color: white !important;
    font-family: montserrat;
    font-size: 17px;
    font-weight: 400;
    margin-bottom: 10px;
}

.enlaces-rapidos a:hover {
    color: #7cc0f1 !important;
}

footer ul li:hover .bi-chevron-right {
    transform: rotate(90deg);
    transition: transform 0.4s;
}

.redes .bi {
    color: white;
    font-size: 30px;
    transition: all ease 0.3s;
}

.redes .bi:hover {
    color: #7cc0f1;
}

.info-footer {
    margin-top: 30px;
}

.link-doc p {
    color: white !important;
    text-decoration: underline 1px !important;
}

/*----------AVISO DE PRIVACIDAD------------*/
.aviso-privacidad {
    padding: 150px 15%;
}

.aviso-privacidad h2 {
    color: #003366;
}

.aviso-privacidad li {
    list-style: circle;
    color: black;
    font-family: montserrat;
    font-size: 17px;
    font-weight: 400;
    margin-left: 50px;
}

.terminos-condiciones {
    padding: 150px 15%;
}

.terminos-condiciones h2 {
    color: #003366;
}

.terminos-condiciones li {
    list-style: circle;
    color: black;
    font-family: montserrat;
    font-size: 17px;
    font-weight: 400;
    margin-left: 50px;
}

/* MEDIA QUERIES*/
@media (max-width: 1200px) {
    .compromiso-contenido {
        margin: 0;
    }

    .carousel-caption h2 {
        margin-bottom: 35%;
    }

    .content-slide img {
        width: 500px;
        margin-bottom: 25%;
    }
}

@media (max-width: 992px) {
    .sobre-nosotros p {
        margin-bottom: 50px;
    }

    .logos {
        padding-top: 20px;
    }

    .logos img {
        width: 80%;
        margin-top: 70px;
    }

    .compromiso-contenido {
        margin-bottom: 70px;
    }

    .nuestro-compromiso h4 {
        padding: 0 0 30px 0;
    }

    .nuestro-compromiso {
        padding: 100px 15% 50px 15%;
    }

    .carousel-caption h2 {
        margin-bottom: 40%;
        font-size: 30px;
    }

    .content-slide img {
        width: 400px;
        margin-bottom: 25%;
    }

    footer h3 {
        margin-top: 40px;
    }

    footer {
        padding: 10px 5% 50px 5%;
    }

}


@media (max-width: 991.98px) {
    .porque-box {
        border-radius: 24px;
        padding: 2rem 1.5rem;
    }
    .porque-img {
        height: 160px;
    }

}

@media (max-width: 767.98px) {
    .contacto-texto {
        font-size: 1.2rem;
    }
    .icono-contacto {
        padding: 20px;
        font-size: 1.4rem;
    }
    .contacto-rapido {
        padding: 16px 0;
    }

    .bi-telephone-outbound-fill {
        margin-top: 30px !important;
    }
}

@media (max-width: 767px) {
    .carousel-caption h2 {
        margin-bottom: 70%;
        font-size: 30px;
    }

    .content-slide img {
        width: 400px;
        margin-bottom: 75%;
    }
}


@media (max-width: 600px) {
    .content-slide img {
        width: 300px;
        margin-bottom: 75%;
    }
}

@media (max-width: 451px) {
    .content-slide img {
        width: 200px;
        margin-bottom: 75%;
    }

    .flag-container img {
    width: 80px;
    }

    .content-slide h2 {
        font-size: 25px;
    }
}


@media (min-width: 992px) {
    .porque-elegirnos .filas {
        display: flex;
        align-items: stretch;
    }
    .porque-elegirnos .col-lg-7,
    .porque-elegirnos .col-lg-5 {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .porque-imgs {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        gap: 24px;
        height: 100%;
    }
    .porque-imgs > div {
        flex: 1 1 0;
        display: flex;
        gap: 24px;
        min-height: 0;
    }
    .porque-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 25px;
        min-height: 0;
    }
}