@charset "utf-8";
/* CSS Document */
/* =========================================================
   1. SLIDER BASE
========================================================= */
.ac-slide{
  position:relative;
  overflow:hidden;
}
/* =========================================================
   2. ITEMS
========================================================= */
.ac-slide .carousel-item{
  position:absolute;
  inset:0;
  height:450px;
  opacity:0;
  transition:
    opacity 1s ease,
    transform 1s ease;
}
/* ACTIVO */
.ac-slide .carousel-item.active{
  position:relative;
  opacity:1;
  transform:translateX(0);
  z-index:2;
}
/* ENTRADA */
.ac-slide .carousel-item-next{
  transform:translateX(100%);
  opacity:1;
}
/* SALIDA */
.ac-slide .carousel-item-prev{
  transform:translateX(-100%);
  opacity:1;
}
/* MOVIMIENTO */
.ac-slide .carousel-item-next.carousel-item-start,
.ac-slide .carousel-item-prev.carousel-item-end{
  transform:translateX(0);
}
/* DESVANECIMIENTO */
.ac-slide .carousel-item.active.carousel-item-start{
  transform:translateX(-20%);
  opacity:0;
}
.ac-slide .carousel-item.active.carousel-item-end{
  transform:translateX(20%);
  opacity:0;
}
/* =========================================================
   3. IMAGEN
========================================================= */
.ac-slide .carousel-item img{
  width:100%;
  height:100%;
  object-fit:cover;
}
/* =========================================================
   4. CAPTION
========================================================= */
.ac-slide .carousel-caption{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  padding:0;
  text-align:left;
  user-select:none;
  z-index:10;
}
/* CONTAINER */
.ac-slide .carousel-caption > div{
  width:100%;
  margin-inline:auto;
  padding-inline:var(--bs-gutter-x, .75rem);
}
/* =========================================================
   5. BREAKPOINTS CONTAINER
========================================================= */
@media (min-width:576px){
  .ac-slide .carousel-caption > div{
    max-width:540px;
  }
}
@media (min-width:768px){
  .ac-slide .carousel-caption > div{
    max-width:720px;
  }
}
@media (min-width:992px){
  .ac-slide .carousel-caption > div{
    max-width:960px;
  }
}
@media (min-width:1200px){
  .ac-slide .carousel-caption > div{
    max-width:1140px;
  }
  
}
@media (min-width:1400px){
  .ac-slide .carousel-caption > div{
    max-width:1320px;
  }
  
}
/* =========================================================
   6. ANIMACIONES
========================================================= */
.ac-slide .carousel-caption h2,
.ac-slide .carousel-caption p,
.ac-slide .sl-title,
.ac-slide .sl-detalles,
.ac-slide .carousel-caption .btn{
  opacity:0;
  transform:translateY(30px);
  transition:all .8s ease;
}
/* TITULO */
.ac-slide .carousel-item.active .carousel-caption h2,
.ac-slide .carousel-item.active .sl-title{
  opacity:1;
  transform:translateY(0);
  transition-delay:.2s;
}
/* DETALLES */
.ac-slide .carousel-item.active .carousel-caption p,
.ac-slide .carousel-item.active .sl-detalles{
  opacity:1;
  transform:translateY(0);
  transition-delay:.4s;
}
/* BOTON */
.ac-slide .carousel-item.active .carousel-caption .btn{
  opacity:1;
  transform:translateY(0);
  transition-delay:.6s;
}
/* =========================================================
   7. TIPOGRAFÍA
========================================================= */
.sl-title{
  margin-bottom:10px;
  font-size:clamp(1.3rem, 3vw, 2rem);
  font-weight:700;
  line-height:110%;
  text-shadow:1px 1px 3px rgba(0,0,0,.7);
}
.sl-detalles{
  max-width:50%;
  margin:0;
  font-family:"Roboto Condensed", sans-serif;
  font-size:clamp(1rem, 1.5vw, 1.4rem);
  background:rgba(3,12,82,0.25);
  padding:25px;
  border-radius:10px;
}
/* TITULO */
.sl-detalles .ac-sl-title{
  color:#0B3B84;
  font-size:2.0rem;
  font-weight:600;
  line-height:110%;
  text-shadow:
    -1px -1px 0 #FFF,
     1px -1px 0 #FFF,
    -1px  1px 0 #FFF,
     1px  1px 0 #FFF;
}
/* SUBTITULO */
.sl-detalles .ac-sl-subtitle{
  margin-bottom:10px;
  font-size:1.2rem;
  font-weight:500;
  color:#FFFFFF;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
    
}
/* LISTA */
.sl-detalles .ac-sl-list{
  padding-left:0;
  list-style:none;
}
.sl-detalles .ac-sl-list li{
  margin-bottom:5px;
  font-size:1rem;
  text-shadow:1px 1px 1px rgba(0,0,0,1);
}
.sl-detalles .ac-sl-list span{
  margin-right:3px;
  font-size:1rem;
}
/* ICONO BOTON */
.sl-detalles .btn span{
  position:relative;
  top:2px;
  margin-right:7px;
  font-size:1.1rem;
}
/* =========================================================
   8. BOTONES
========================================================= */
.ac-slide .carousel-caption .btn{
  padding:8px 20px;
  border-radius:6px;
  font-size:.90rem;
  font-weight:400;
}
/* =========================================================
   9. INDICADORES
========================================================= */
.ac-slide .carousel-indicators button{
  width:12px;
  height:12px;
  border:none;
  border-radius:50%;
  background:#FFF;
  opacity:.7;
}
.ac-slide .carousel-indicators .active{
  opacity:1;
}
/* =========================================================
   10. FLECHAS
========================================================= */
.ac-slide .carousel-control-prev,
.ac-slide .carousel-control-next{
  position:absolute;
  top:0;
  bottom:0;
  width:60px;
  height:100%;
  opacity:0;
  border:none;
  background:none;
  transition:opacity .3s ease;
  z-index:20;
}
.ac-slide:hover .carousel-control-prev,
.ac-slide:hover .carousel-control-next{
  opacity:1;
}
.ac-slide .carousel-control-prev{
  left:0;
}
.ac-slide .carousel-control-next{
  right:0;
}
/* =========================================================
   11. RESPONSIVE
========================================================= */
@media (max-width:1400px){
.ac-slide .carousel-item{
  height:350px;
}
}
@media (max-width:1200px){
 .ac-slide .carousel-item{
  height:350px;
}
}
/* TABLETS HORIZONTAL */
@media (max-width:992px){
  .ac-slide .carousel-item{
    height:70vh;
    min-height:400px;
  }
  .sl-title{
    font-size:2rem;
  }
}
/* TABLETS VERTICAL */
@media (max-width:768px){
    .ac-slide .carousel-caption{
        justify-content:center;
        text-align:center;
        padding:20px;
    }
    .ac-slide .carousel-caption > div{
        display:flex;
        justify-content:center;
    }
    .sl-detalles{
        max-width:100%;
        width:100%;
        padding:20px;
        margin:auto;
        text-align:center;
        background:rgba(3,12,82,.45);
    }
    .sl-detalles .ac-sl-title{
        font-size:1.6rem;
        line-height:120%;
    }
    .sl-detalles .ac-sl-subtitle{
        font-size:1rem;
        line-height:140%;
    }
    .sl-detalles .btn{
        width:auto;
        margin-top:10px;
    }
}
/* CELULARES GRANDES */
@media (max-width:576px){
    .sl-detalles .d-flex{
        flex-direction:column;
        align-items:center;
        gap:10px;
    }
    .sl-detalles .btn{
        width:100%;
        max-width:280px;
    }
    .sl-detalles .ac-sl-title{
        font-size:1.3rem;
    }
    .sl-detalles .ac-sl-subtitle{
        font-size:.95rem;
    }
}
/* CELULARES PEQUEÑOS */
@media (max-width:480px){
}
/* EXTRA SMALL */
@media (max-width:360px){
}