/**********************************
    I M P O R T A N T E
    Modificar este archivo puede desarmar los slider del sitio
***********************************/


.grid-slider{
    --gap: var(--slider-margin);
    display:grid;
}
.grid-slider.slick-initialized{
    --default-area: 
        "left slick-list right"
        "dots dots dots";
    --gap:0;
    align-items:center;
    grid-template-columns:  minmax(0,auto) minmax(0,100%) minmax(0,auto);
    grid-template-areas:    var(--slick-initialized-area, var(--default-area));
    
}
.grid-slider.slick-initialized .slick-list{
    grid-area:slick-list;
  margin-left:calc(var(--slider-margin)/2 * -1);
    margin-right:calc(var(--slider-margin)/2 * -1);
}
.grid-slider.slick-initialized .slick-track{
    display:flex;
}
.grid-slider.slick-initialized .slick-slide{
    height:auto;
    box-sizing:border-box;
}

.grid-slider.slick-initialized .slick-dots{
    grid-area:dots;
    justify-self:center;
}

/*************************************
ARROW
*************************************/
.grid-slider .slick-arrow{
    padding:var(--slider-arrow-padding,1rem);
    background:var(--slider-arrow-padding,transparent);
    box-sizing:border-box;
    z-index:50;
}
.grid-slider .slick-arrow:hover{
    background:var(--slider-arrow-bg, var(--primary-color));
    color:var(--slider-arrow-color, var(--primary-contrast));
}
.grid-slider .slick-next{justify-self:end}
.grid-slider .slick-prev{justify-self:start}


/*mobile first*/

.grid-slider.slick-initialized .item{
    padding: 0 calc(var(--slider-margin)/2);
}

/********************************************
DOTS deben estar en la configuracion del slider 
*********************************************/
.slick-dots{
    /* necesario para responsive */
    display:flex; 
    flex-wrap:wrap;
}
.slick-dots > li:only-child {
    display: none;
}
.slick-dots li button{
    padding: var(--slider-dots-margin, .5rem);
}
.slick-dots li button::before{
    /* estructura del boton*/
    content:" ";
    width:var(--slider-dots-width, .5rem);
    height:var(--slider-dots-height, .5rem);
    background:var(--slider-dots-bg, black);
    border:solid var(--slider-dots-border-size, 0px) var(--slider-dots-border-color, --slider-dots-bg) ;
    opacity: var(--slider-dots-op,.5);
    
}
.slick-dots li.slick-active button::before{
    /* cuando esta activo*/
    background:var(--slider-dots-bg-active, rgba(0,0,0,1));
    border:solid var(--slider-dots-border-size, 0px) var(--slider-dots-border-color-active, --slider-dots-bg-active) ;
    opacity: var(--slider-dots-op-active, var(--slider-dots-op,1));
}


/***********
banner principa
*******************/
.banner-principal{
    --slider-margin:1rem;
    --cols-sm:2;
    --cols:1;
}

.banner-principal__title{
    padding: .5rem 1rem;
    text-align:center;
    position:absolute;
    bottom:1rem;
    left:1rem;
    right:1rem;
    background:var(--primary-color);
    color:var(--primary-contrast);
    margin:0;
    z-index:110;
}
/* cuando es 1 */ 
.banner-principal__items-1{
    --ratio:2/4;
    --cols-lg:1;
    --cols-md:1;
}
/* cuando son 2 */
.banner-principal__items-2{
    --cols-lg:2;
    --ratio:3/4;
}

/* cuando son 3 */ 
.banner-principal__items-3{
    --cols-lg:4;
    --cols-md:2;
    --ratio:4/3;
}
.banner-principal__items-3:not(.slick-initialized) .grid__item.banner-principal__child-3{
    --span-col: 2
}


/* cuando son 4 */ 
.banner-principal__items-4{
    --cols-lg:4;
    --cols-md:2;
    --ratio:4/3;
}


/* cuando son 5 */
.banner-principal__items-5{
    --cols-lg:4;
    --cols-md:2;
    --ratio:3/4;
}


/* cuando son 6 */
.banner-principal__items-6{
    --cols-lg:4;
    --cols-md:2;
    --ratio:4/3;
}

/* cuando son 7 */
.banner-principal__items-7{
    --cols-lg:4;
    --cols-md:2;
    --ratio:1/1;
}


/* cuando son 8 */
.banner-principal__items-8{
    --cols-lg:4;
    --cols-md:2;
    --ratio:1/1;
}

.banner-principal{
    padding-top: var(--slider-margin);
    padding-bottom: var(--slider-margin);
}

/******************
image ratio
******************/
.banner-principal__slide__img img{
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
}
/* ratio original */ 
.banner-principal__slide__img{
    position:relative;
    height: 0;
    overflow:hidden;
    padding-bottom: calc(100% * var(--ratio));
}
/* imagen alta */
.banner-principal__items-5:not(.slick-initialized) .grid__item.banner-principal__child-1,
.banner-principal__items-5:not(.slick-initialized) .grid__item.banner-principal__child-2,
.banner-principal__items-5:not(.slick-initialized) .grid__item.banner-principal__child-3,
.banner-principal__items-6:not(.slick-initialized) .grid__item.banner-principal__child-1,
.banner-principal__items-6:not(.slick-initialized) .grid__item.banner-principal__child-2,
.banner-principal__items-7:not(.slick-initialized) .grid__item.banner-principal__child-1{
   --span-row: 2; 
}
.banner-principal__items-5:not(.slick-initialized) .grid__item.banner-principal__child-1 .banner-principal__slide__img,
.banner-principal__items-5:not(.slick-initialized) .grid__item.banner-principal__child-2 .banner-principal__slide__img,
.banner-principal__items-5:not(.slick-initialized) .grid__item.banner-principal__child-3 .banner-principal__slide__img,
.banner-principal__items-6:not(.slick-initialized) .grid__item.banner-principal__child-1 .banner-principal__slide__img,
.banner-principal__items-6:not(.slick-initialized) .grid__item.banner-principal__child-2 .banner-principal__slide__img,
.banner-principal__items-7:not(.slick-initialized) .grid__item.banner-principal__child-1 .banner-principal__slide__img{
    padding-bottom: calc(100% * var(--ratio) * 2 + var(--slider-margin));
    
}
/* imagen ancha */
.banner-principal__items-3:not(.slick-initialized) .grid__item.banner-principal__child-3{
    --span-col: 2;
}
.banner-principal__items-3:not(.slick-initialized) .grid__item.banner-principal__child-3 .banner-principal__slide__img{
    padding-bottom: calc((100% - var(--slider-margin)) * var(--ratio) * 1/2);
    
}

.banner-principal__slide__img::after{
    background: black;
    opacity:0;
    width:100%;
    height:100%;
    content:"";
    z-index:100;
    display:block;
    position:absolute;
    transition:all .5s ease;
}
.banner-principal__slide__img:hover::after{
    opacity:.4
}
@media screen and (min-width:768px){
    .banner-principal__title{
        bottom:0;
        left:0;
        right:0;
        background:white;
        color:inherit;
        margin:0;
        padding:.5rem 1rem
    }
}