/* INICIO SLIDER */

.slider-titulo-destacado {
    font-size: 2.5rem;
    color: white;
    font-weight: 700;
    font-style: italic;
    margin-bottom: 30px;
}

.slider-titulo-destacado-chico {
    font-size: 2rem;
    color: white;
    font-weight: 700;
    font-style: italic;
    margin-bottom: 30px;
}
.slider-titulo-abajo {
    padding-bottom: 10px;
    font-size: 2.5rem;
    color: white;
    font-weight: 700;
    font-style: italic;
    /* border-bottom: 5px solid; */
    /* width: auto; */
}
.carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 1.25rem;
    left: 15%;
    /* padding-top: 9.25rem; */
    padding-bottom: 1.25rem;
    color: #fff;
    text-align: center;
    display: flex;
    height: 70%;
    align-items: center;
    justify-content: center;
}

/* .carousel-item {
    height: 100vh;
} */

.active .carousel-caption a,
#relacionados a {
    color: white !important;
}

.active .carousel-caption a:hover,
#relacionados a:hover {
    color: var(--color-protec) !important;
}


.carousel-caption a {
    border-radius: 5px 0 5px 15px   !important;
    background-color: rgba(0,0,0,0.3);
}

.carousel-inner img {
    object-fit: cover;
}

.sliderIndex {
    box-shadow: 0 0px 15px 3px rgb(0 0 0 / 90%); 
    -webkit-box-shadow: 0 0px 15px 3px rgb(0 0 0 / 90%); 
}

.white-mode  .sliderIndex {
    box-shadow: 0 0px 9px 3px rgb(0 0 0 / 27%); 
    -webkit-box-shadow: 0 0px 9px 3px rgb(0 0 0 / 72%); 
}

.carousel-inner .carousel-item:first-child .negro-transparente {
    background-color: #141414 !important;
}

.lines{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    margin: auto;
    width: 90vw;
  }
    
  .line{
    position: absolute;
    width: 1px;
    height: 100%;
    top: 0;
    left: 50%;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
  }
  
  .line::after{
      content: '';
      display: block;
      position: absolute;
      height: 15vh;
      width: 100%;
      top: -50%;
      left: 0;
      background: linear-gradient(to bottom, rgb(241 205 39 / 0%) 0%, var(--color-protec) 75%, var(--color-protec) 100%);
      animation: drop 7s 0s infinite;
      animation-fill-mode: forwards;
      animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);}

    #novedades .line::after,
    .single-post .line::after{      
        background: linear-gradient(to bottom, rgba(175 176 175 / 0%) 0%, var(--color-novedades) 75%, var(--color-novedades) 100%);
    }

    #soluciones .line::after,
    .single-soluciones .line::after{      
        background: linear-gradient(to bottom, rgba(175 176 175 / 0%) 0%, var(--color-productos) 75%, var(--color-productos) 100%);
    }

    #casos-de-exito .line::after,
    .single-casos-de-exito .line::after{      
        background: linear-gradient(to bottom, rgba(175 176 175 / 0%) 0%, var(--color-casos-exito) 75%, var(--color-casos-exito) 100%);
    }
    
      .line:nth-child(1){
      margin-left: -25%;
      }
      .line:nth-child(1)::after{
        animation-delay: 2s;
      }
    
      .line:nth-child(3){
      margin-left: 25%;}
      .line:nth-child(3)::after{
        animation-delay: 2.5s;}
    
      
  @keyframes drop{
    0%{
      top: -50%;}
    100%{
      top: 110%;}
  }


/* FIN SLIDER */


/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/
 
/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 5 breakpoints
*/
 
/* 
Extra small devices (portrait phones, less than 576px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/
 


/* De 1400px para ABAJO */
@media (max-width: 575.98px) {   
    .carousel-inner img {
        height: 100vh;
    }
    

    .slider-titulo-destacado {
        font-size: 1.5rem;       
    }
    .slider-titulo-abajo {
        font-size: 1.5rem;        
        
    }
    .slider-titulo-destacado-chico {
        font-size: 1.2rem;       
    }

}
/* De 1400px para ARRIBA */
@media (min-width:576px) { 
    .carousel-inner img {
        height: 70vh;
    } 

}
/* De 768px para ABAJO */
@media (max-width: 767.98px) { 
   
    .slider-titulo-destacado {
        font-size: 2rem;       
    }
    .slider-titulo-abajo {
        font-size: 2rem;        
        
    }

    .slider-titulo-destacado-chico {
        font-size: 1.8rem;       
    }
    
   

}
/* De 768px para ARRIBA */
@media (min-width: 768px) {   
    
    .carousel-inner img {
        height: 60vh;
    }

   
        

}
/* De 992px para ABAJO */
@media (max-width: 991.98px) {
  

}
/* De 992px para ARRIBA */
@media (min-width: 992px) {   

}
/* De 1200px para ABAJO */
@media (max-width: 1199.98px) {  

    
    

}
/* De 1200px para ARRIBA */
@media (min-width: 1200px) {  

    .carousel-inner img {
        height: 60vh;
    }   

}
/* De 1400px para ABAJO */
@media (max-width: 1399.98px) {

}
/* De 1400px para ARRIBA */
@media (min-width: 1400px) {  

}