:root{
    --fuentePrincipal: "Open Sans", sans-serif;
    --colorPrimario: #2B2E4A;
    --colorSecundario: #E84545;
    --colorBlanco: #fff;
    --colorNegro: #000;
    --colorAzulClaro: #969CC8;
}

img, video, iframe {
    max-width: 100%;
    height: auto;
  }

html {
    font-size: 62.5%;
    box-sizing: border-box;
    scroll-padding-top: 0rem;
}
*, 
*:before,
*:after {
    box-sizing: inherit;
}

body{
    font-family: var(--fuentePrincipal);
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 2rem;
    margin: 0;
}

/* .container{
    width: 95%;
    max-width: 120rem;
    margin: 0 auto;
} */

p {
    color: var(--colorNegro);
    line-height: 1.5;
}

a {
    text-decoration: none;
}
h1, h2, h3, h4 {
    margin: 0 0 2.5rem 0;
    font-weight: 900;
}

h1{
    font-size: 4rem;
}

h2{
    font-size: 3.6rem;
    color: var(--colorSecundario);
}

h3{
    font-size: 2.8rem;
    color: var(--colorSecundario);
}

h4{
    font-size: 2rem;
    color: var(--colorSecundario);
}
img {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
}
ul{
    list-style: none;
}
body > section {
    padding: 5rem 0
}

.fondoAzulClaro{
    background-color: var(--colorAzulClaro);
}

.btn{
    color: var(--colorBlanco);
    font-size: 2rem;
}

.btn-primary{
    background-color: var(--colorPrimario);
    border: none;
}

.btn-primary:hover{
    background-color: var(--colorSecundario);
}

.btn-secundary{
    background-color: var(--colorSecundario);
    border: none;
}

.btn-secundary:hover{
    background-color: var(--colorPrimario);
    color: var(--colorBlanco);
}

.imagenes{
    border-radius: 1rem;
    width: 100%;
}

.banner{
    /* height: 100%; */
    position: relative;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(/fotos/banner.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;
    padding: 5rem 0 ;
}

@media(min-width: 768px){ 
    .banner{
        height: 50rem;
        padding:  0 ;
    }
    h1{
        font-size: 4.5rem;
    }
}

.bannerFrase{
    height: 20%;
    position: relative;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(/fotos/banner-frase.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;   
}



.logo{
    width: 20rem;
}

.bandera{
    width: 7rem;
}

/* Navegacion */
.navbar,
.nav{
    background-color: var(--colorAzulClaro) !important;
}

.nav{
    border-bottom: 2px solid var(--colorPrimario);
}

.nav__info{
    color: var(--colorPrimario);
}
.active{
    border-bottom: 0;
}


@media(min-width: 992px){ 
    nav .active{
        border-bottom: 3px solid var(--colorSecundario);
    }
}

.nav-link{
    font-size: 3rem;
}
.nav-link:hover{
    color: var(--colorSecundario);
}
.textos{
    text-align: left;
    margin: 0 0 0 5rem;
    /* width: 90%; */
}

.textos__texto{
    color: var(--colorBlanco);
}
.textos__titulo{
    color: var(--colorSecundario);
    font-weight: 900;
}

.textos__subtitulo{
    color: var(--colorPrimario);
    font-weight: 700;
}

/* .textos__texto{
    color: var(--colorPrimario);
    font-weight: 700;
    font-size: 4rem;
} */

.redes__sociales{
    /* margin: 3rem 0; */
}

.redes__sociales .bi{
    /* margin: 5rem 0; */
    color: var(--colorPrimario);
    font-size: 3rem;
}

.icono__whatsapp{
    position: fixed; 
    bottom: 4rem; 
    left: 0rem; 
    width: 4rem; 
    height: 4rem;
    padding: 5rem 2rem;
    z-index: 10; 
}
.bi-whatsapp{
    background-color: var(--colorAzulClaro);
    padding: 1rem;
    border-radius: 100%;
    font-size: 5rem;
    color: var(--colorPrimario); 
}


/* @media(min-width: 768){ 
    
} */

/*index - servicios*/
.imagen{
    position: relative;
    overflow: hidden;
}

.imagen:hover .imagen__contenido{
    transform: scale(1);
}

.imagen__contenido{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    background: hsla(234, 26%, 23%, 0.7);
    color: #fff;
    padding: 2rem;
    transform: scale(0);
    transition: transform .5s;
    transform-origin: center center;
}

.imagen__texto{
    color: var(--colorBlanco);
}

.carousel-control-prev-icon,
.carousel-control-next-icon{
    height: 5rem;
    background-color: var(--colorPrimario);
}

.testimonio{
    text-align: center;
    width: 80%;
}

.testimonioNombre{
    text-align: center;
    font-weight: 700;
    font-size: 3rem;
    color: var(--colorSecundario);
}

.testimonPuesto{
    text-align: center;
    font-weight: 500;
    color: var(--colorPrimario);
}

.infoContacto{
    background-color:  var(--colorPrimario);

}

.infoContacto__titulo{
    color: var(--colorSecundario);
}

.infoContacto__info{
    color: var(--colorBlanco);
}

/* Página nosotros */
.bi-check2{
    color: var(--colorSecundario);
}

/* Página servicios */
@media(min-width: 768px){ 
    .custom-title {
        min-height: 6rem; /* Ajusta esta altura según sea necesario */
        display: flex;
        align-items: start;
      }
}

@media(min-width: 992px){ 
    .custom-title {
        min-height: 8rem; /* Ajusta esta altura según sea necesario */
        display: flex;
        align-items: start;
      }
}

/* Página contacto */
.contacto{
    background: linear-gradient(to bottom, var(--colorPrimario) 58%, var(--colorAzulClaro) 50%);
    background-color: var(--colorPrimario);
    border-radius: 1rem;
    padding: 1rem;
}




@media(min-width: 576px){ 
    .contacto{
        background: linear-gradient(to bottom, var(--colorPrimario) 55%, var(--colorAzulClaro) 50%);
        padding: 5rem;
    }
}

@media(min-width: 992px){ 
    .contacto{
        background: linear-gradient(to right, var(--colorPrimario) 50%, var(--colorAzulClaro) 50%);
       
    }
}


.contacto p{
    color: var(--colorBlanco);
}

.contacto .bi{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5rem;
    height: 5rem;
    border-radius: 100%;
    margin: 1rem;
    /* background-color: var(--colorAzulClaro); */
    color: var(--colorAzulClaro);
}

@media(min-width: 576px){ 
    .contacto .bi{
        background-color: var(--colorAzulClaro);
        color: var(--colorPrimario);
    }
}

.formulario{
    padding: 5rem;
}

.mapa{
    border-radius: 1rem;
    width: 100%;
    height:450px;
}

.form-label{
    color: var(--colorPrimario);
}

.form-control{
    border: 2px solid var(--colorPrimario);
}

.footer{
    text-align: center;
    background-color: var(--colorPrimario);
    padding: 1rem 0;
}

.footer__logo{
    width: 30rem;
}

.footer .bi{
    color: var(--colorAzulClaro);
    font-size: 3rem;
    margin: 1rem;
    
}

/* .bi:hover{
    color: var(--colorAzulClaro);
    background-color: var(--colorPrimario);
} */

.footer__titulo{
    color: var(--colorSecundario);
}

.footer__link{
    color: var(--colorAzulClaro);
}

.footer__link:hover{
    color: var(--colorBlanco);
}
.footer__linea{
    border-top: 3px solid var(--colorAzulClaro);
}
.footer p{
    color: var(--colorBlanco);
}

/*Dolar*/
.climaDolar{
    background-color: var(--colorAzulClaro);
    padding: 2rem;
}
.tituloMoneda{
    font-size: 2rem;
    font-weight: bold;
    color: var(--colorSecundario);
}
.precioMoneda{
    font-size: 4rem;
    font-weight: bold;
    color: var(--colorPrimario);
}

/* Clima */

.temActual{
    font-size: 4rem;
    font-weight: bold;
    color: var(--colorPrimario);
}

.climaGeneral{
    font-weight: bold;
    color: var(--colorSecundario);
}

.lineaAzul{
    border-top: var(--colorPrimario) solid 2px;
    margin-bottom: 5px;
}

/* Página importación definitiva */

.bannerImportacionDefinitiva{
    /* height: 100%; */
    position: relative;
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6)),
    url(/fotos/banner-importacion-definitiva.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 0 ;
}

@media(min-width: 768px){ 
    .bannerImportacionDefinitiva{
        height: 50rem;
        padding:  0 ;
    }
    h1{
        font-size: 4.5rem;
    }
}

.textoSpan{
    font-weight: bold;
    font-size: 2.5rem;
    color: var(--colorPrimario);
}

.seccion_porque_nosotros{
    background-color: var(--colorAzulClaro);

}

.seccion_porque_nosotros__parrafo{
    color: white;
}

.seccion_porque_nosotros h3{
    color: var(--colorSecundario);
}

.bi-star-fill{
    color: var(--colorPrimario);
    font-size: 3rem;
}

/* Acordion */
.accordion{
    /* border: 2px solid var(--colorPrimario); */
}
.accordion-button {
    font-size: 1.8rem;
    font-weight: bold;

}
.accordion-button-collapsed {
    color: var(--colorBlanco);
    /* border: 2px solid var(--colorPrimario); */
}

.accordion-button:not(.collapsed) {
    background-color: var(--colorPrimario);
    color: var(--colorBlanco);
}

/* Spinner */

/* .sk-chase {
    width: 40px;
    height: 40px;
    position: relative;
    animation: sk-chase 2.5s infinite linear both;
  }
  
  .sk-chase-dot {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0; 
    animation: sk-chase-dot 2.0s infinite ease-in-out both; 
  }
  
  .sk-chase-dot:before {
    content: '';
    display: block;
    width: 25%;
    height: 25%;
    background-color: #fff;
    border-radius: 100%;
    animation: sk-chase-dot-before 2.0s infinite ease-in-out both; 
  }
  
  .sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
  .sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
  .sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
  .sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
  .sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
  .sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
  .sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
  .sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
  .sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
  .sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
  .sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
  .sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }
  
  @keyframes sk-chase {
    100% { transform: rotate(360deg); } 
  }
  
  @keyframes sk-chase-dot {
    80%, 100% { transform: rotate(360deg); } 
  }
  
  @keyframes sk-chase-dot-before {
    50% {
      transform: scale(0.4); 
    } 100%, 0% {
      transform: scale(1.0); 
    } 
  } */