:root{
    --color-body: #E8F1FF; 
    --color-about-us: #DCEAFF;
    --color-services: #C4DAFA;
    --color-oscuro: #334eac;
    --color-scroll: #A0BDE8;
    --color-overlay: #0058;
}

::-webkit-scrollbar {
    width: 8px;               /* width of the entire scrollbar */
  }

  ::-webkit-scrollbar-track {
    background: transparent;        /* color of the tracking area */
  }
  
::-webkit-scrollbar-thumb {
    background-color: var(--color-overlay);
    border-radius: 3px;       /* roundness of the scroll thumb */
  }

body{
    background-color: var(--color-body);
    font-family: sans-serif;
    padding-top: 82px;
    height: 100%;
}

.bg-strong{
    color: var(--color-oscuro)
}

.bg-body{
    background-color: var(--color-body) !important;
}

.bg-services{
    background-color: var(--color-services);
}

.bg-gradiente{
    background: linear-gradient(to top,var(--color-services) 0%, var(--color-about-us) 20%);
}

.bg-about-us{
    background-color: var(--color-about-us);
}

.bg-repuestos{
    background: linear-gradient(to top,var(--color-about-us) 50%, var(--color-services) 90%);
}

.bg-oscuro{
    background: radial-gradient(transparent, #0009) , var(--color-oscuro);
}

.bg-overlay{
    background: linear-gradient(to top, var(--color-overlay) 60%, rgba(0, 0, 0, 0));
}

p{
    font-family: sans-serif;
}

h2{
    font-family: Tahoma, sans-serif
}

.navbar-brand{
    width: 10rem;
    margin-left: 0.5rem;
}

.navbar-toggler{
    box-shadow: none !important; 
}


/*------------------------------------Estilos de li----------------------------*/

li{
    list-style: none;
    filter:drop-shadow(0 0 5px var(--color-body))
}

/*<-------------------------------------- CARROUSEL PRINCIPAL ----------------------------------------->*/

.carousel-item-h{
    max-height: calc(100dvh - 84px) ;
}

.carousel-control-prev-icon, .carousel-control-next-icon{
    opacity: 0;
}

:is(#carouselRepuestos:hover, #carouselPrincipal:hover) .carousel-control-prev-icon, :is(#carouselPrincipal:hover, #carouselRepuestos:hover) .carousel-control-next-icon{
    opacity: 1;
}

#carouselRepuestos:hover .carousel-control-prev-icon, #carouselRepuestos:hover .carousel-control-next-icon{
    opacity: 1;
}


.overlay_foto_frente{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    animation-name: animation__frente;
    animation-duration: 1s;
    animation-delay: 0.3s;
    animation-fill-mode: both;
}

.carousel__info-frente{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.carousel__info-frente img{
    position: absolute;
    top: 15%;
    left: 20%;
    width: 60%;
    animation-name: animation__write_frente;
    animation-duration: 3s;
    animation-delay: .3s;
    animation-timing-function:cubic-bezier(0,.63,0,-0.22);
    animation-fill-mode: both;
}

.carousel__info-frente p {
    position: absolute;
    bottom: 10%;
    width: 100%;
    text-align: center;
    font-family: 'Lucida Sans';
    font-size: 22px;
    color: #fff;
    animation-name: animation__write_dentro_img;
    animation-duration: 2s;
    animation-delay: 2.8s;
    animation-timing-function:cubic-bezier(0,.35,1,1);
    animation-fill-mode: both;
}

@keyframes animation__frente{
    from{
        transform: translateY(500px);
        opacity: 0;
    }
    to{
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes animation__write_frente {
    from {
      clip-path: inset(0 100% 0 0);
      opacity: 0;
    }
    to {
      clip-path: inset(0 0 0 0);
      opacity: 1;
    }
  }

.overlay_foto_dentro {
    position: absolute;
    width: 50%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
    animation-name: animation__frente;
    animation-duration: 1s;
    animation-delay: 0.3s;
    animation-fill-mode: both;
}

.overlay_foto_dentro p {
    width: 20vw;
    font-size: 20px;
    transform: translatex(90px);
    font-family:'Segoe UI';
    animation-name: animation__write_dentro;
    animation-duration: 2s;
    animation-delay: 0.4s;
    animation-timing-function:ease-in;
    animation-fill-mode: both;
}

.overlay_foto_dentro img{
    transform: translatex(90px);
    animation-name: animation__write_dentro_img;
    animation-duration: 2s;
    animation-delay: 0.4s;
    animation-timing-function:ease-in;
    animation-fill-mode: both;
}

@keyframes animation__write_dentro {
    from {
      clip-path: inset(0 100% 0 0);
      opacity: 0;
    }
    to {
      clip-path: inset(0 0 0 0);
      opacity: 1;
    }
  }

  @keyframes animation__write_dentro_img {
    from {
      clip-path: inset(0 0 0 100%);
      opacity: 0;
    }
    to {
      clip-path: inset(0 0 0 0);
      opacity: 1;
    }
  }


.overlay_foto_vigia {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: #fff;
    text-align: center;
    background: linear-gradient(to bottom,var(--color-overlay) 40%, rgba(0, 0, 0, 0));
    clip-path: polygon(0 0, 100% 0, 100% 80%);
    animation-name: animation__vigia;
    animation-duration: 1s;
    animation-delay: 0.2s;
    animation-fill-mode: both;
}

.overlay_foto_vigia p {
    position: absolute;
    width: 40%;
    top: 10%;
    right: 10%;
    font-family: Verdana;
    font-size: 36px;
    color: #fff;
    animation-name: animation__write_frente;
    animation-duration: 3s;
    animation-delay: .3s;
    animation-timing-function:cubic-bezier(0,.35,1,1);
    animation-fill-mode: both;
}


@keyframes animation__vigia{
    from{
        transform: translateY(-500px);
        opacity: 0;
    }
    to{
        transform: translateY(0px);
        opacity: 1;
    }
}

@media screen and (max-width: 1200px){
    .overlay_foto_vigia p{
        font-size: 32px;
    }
}


@media screen and (max-width: 935px){
    .overlay_foto_dentro img{
        width: 5vw;
    }

}

@media screen and (max-width: 740px){
    .overlay_foto_vigia p{
        font-size: 29px;
    }
}

@media screen and (max-width: 700px){
    .overlay_foto_dentro p{
        font-size: 12px;
    }
    .overlay_foto_vigia p{
        font-size: 24px;
    }
    .overlay_foto_dentro img, .overlay_foto_dentro p{
        transform: translatex(40px);
    }
}

@media screen and (max-width: 554px){
    .overlay_foto_vigia p{
        font-size: 20px;
    }
}

@media screen and (max-width: 460px){
    .overlay_foto_vigia p{
        font-size: 15px;
    }
}

@media screen and (max-width: 440px){
    .overlay_foto_dentro p{
        font-size: 9px;
    }
    .overlay_foto_vigia p{
        font-size: 12px;
    }
}

.oculto{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color:#005d;
    z-index: 1;
    animation: animation__finish;
    animation-timeline: view();
    animation-fill-mode: both;
    animation-range-start: cover 80%;
    animation-range-end: cover 90%;
}

@keyframes animation__finish {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}









.experience{
    height: 50vh;
}


@keyframes animation__navbar {
    from{
        top: -20%;
    }
}

.navbar{
    box-shadow: 0 0 40px #000a;
    animation-name: animation__navbar;
    animation-duration: 0.4s;
    animation-fill-mode: both;
}

.navbar__porcentaje{
    position: absolute;
    bottom: 0;
    background-color: #000a;
    animation-name: animation__porcentaje;
    animation-timing-function: linear;
    animation-timeline: scroll();
    animation-fill-mode: both;
}


@keyframes animation__porcentaje {
    0%{
        width: 0;
        padding: 0;
    }
    100%{
        width: 100%;
    }
}


.nav-link{
    border: none !important;
    border-radius: none !important;
}

.nav-link.active{
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid #000 !important;
}


.container__img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.img__negocio{
    object-fit: cover;
  width:100%;
  height:100%;
}





/*<--------------------- SECTION SERVICES --------------------->*/


.linea__separadora{
    background-color: #0007;
    width: 10rem;
    height: 0.5rem;
    position: relative;
}

.services__info {
    text-align: center;
    padding: 60px 20px;
    animation-name: animation__aparecer;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range-start: cover 20%;
    animation-range-end: cover 50%;
}

@keyframes animation__aparecer {
    from{
        transform: translateY(100px);
        opacity: 0;
    }
    to{
        transform: translateY(0px);
        opacity: 1;
    }
}

.services__info h2 {
    font-family:'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 36px;
    color: #333;
    margin-bottom: 10px;
}
  
.services__info p {
    font-family: Tahoma;
    font-size: 18px;
    color: #666;
}

.services__info div{
    background-color: #0007;
    width: 80%;
    margin: auto;
    height: 0.5rem;
}

.service__item{
    animation-name: animation__aparecer__item;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range-start: cover 10%;
    animation-range-end: cover 50%;
}

@keyframes animation__aparecer__item {
    from {
      transform: translateY(100px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
}

@keyframes animation__aparecer__item__izq {
    from {
      clip-path: inset(0 100% 0 0);
      opacity: 0;
    }
    to {
      clip-path: inset(0 0 0 0);
      opacity: 1;
    }
  }
  
  @keyframes animation__aparecer__item__der {
    from {
      clip-path: inset(0 0 0 100%);
      opacity: 0;
    }
    to {
      clip-path: inset(0 0 0 0);
      opacity: 1;
    }
  }

@media screen and (max-width: 767px){
    .carousel__info-frente p{
        font-size: 16px;
    }
    .service__item.der{
        text-align: end;
    }
    .linea__separadora.der{
        margin-left: auto;
    }
    .service__item.izq{
        animation-name: animation__aparecer__item__izq;
        animation-range-start: cover 30%;
        animation-range-end: cover 60%;
    }
    .service__item.der{
        animation-name: animation__aparecer__item__der;
        animation-range-start: cover 30%;
        animation-range-end: cover 60%;
    }

}


/*------------------------------------------------card------------------------------------------------------*/

.card-flip{
    position: relative;
    margin: auto;
    max-width: 80vw;
    height: 300px;
}

.card-flip div{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    transition: 1s;
}


.card-flip .card-front{
    background: linear-gradient(#0001, #0001) var(--color-scroll);
    transform: perspective(1000px) rotateY(0deg);
}

.card-flip .card-back{
    background: linear-gradient(#0001, #0001) var(--color-scroll);
    border: 1px solid var(--color-scroll);
    border-radius: 5px;
    transform: perspective(1000px) rotateY(180deg);
}

.card-flip.flipped .card-front{
    transform: perspective(1000px) rotateY(180deg);
}

.card-flip.flipped .card-back{
    transform: perspective(1000px) rotateY(360deg);
}

.linea__separadora__repuestos{
    background-color: #0007;
    width: 80%;
    margin: auto;
    height: 0.5rem;
}

.title__repuestos {
    font-size: 24px;
    color: #555;
    margin-bottom: 0.5rem;
}

.subtitle__repuestos {
    font-size: 18px;
    color: #555;
}



.repuestos__info, #carouselRepuestos{
    animation-name: animation__aparecer;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range-start: cover 20%;
    animation-range-end: cover 50%;
}

/*------------------------------------------------Slider------------------------------------------------------*/

.slider{
    width: 100vw;
    height: auto;
    margin: auto;
    overflow: hidden;
    padding-bottom: 20%;
}


.slider .slider-track{
    display: flex;
    animation: scroll 25s linear infinite;
    width: calc(200px * 16);
    -webkit-animation: scroll 25s linear infinite;
    animation-fill-mode: both;
}

.slider .slide{
    width: 200px;
    padding: 0 10px;
    margin: auto;
}

.slider .slide img{
    width: 100%;
}

@keyframes scroll {
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(calc(-200px * 8));
    }
}

.reverse{
    animation: scroll-reverse 25s linear infinite;
    -webkit-animation: scroll-reverse 25s linear infinite;
    display: flex;
    width: calc(200px * 16);
    animation-fill-mode: both;
}

@keyframes scroll-reverse {
    0%{
        transform: translateX(calc(-200px * 8));
    }
    100%{
        transform: translateX(0);
    }
}









/*-------------------------------------footer----------------------------------*/

.footer-brand{
    width: 11rem;
}

.shadow{
    filter: drop-shadow(0 0 5px var(--color-body))
}



/*-------------------------------------about_us----------------------------------*/
.SobreNosotros_aparecer, .Marcas_aparecer{
    animation-name: animation__aparecer;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range-start: cover 5%;
    animation-range-end: cover 30%;
}