/*** agrega aqui los estilos necesarios para modificar el template ***/

.bs-header-search .input-group {
    background: rgb(255 255 255 / 8%);
}

.btn-secondary, .badge-secondary {
    background: #000000;
    border-color: #000000;
}

    /** ESTILO DE SLIDER PLATAFORMAS **/

/**********************************
    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{
    box-sizing:border-box;
    z-index:50;
}
.grid-slider .slick-arrow > *{
     background:var(--slider-arrow-bg,transparent);
     color:var(--slider-arrow-color,var(--primary-color));
     width:2rem;
     height:2rem;
     border-radius: var(--slider-arrow-border-radius, var(--default-border-radius));
     display:flex;
     align-items:center;
     justify-content:center;
}
.grid-slider .slick-arrow:hover > *{
    background:var(--slider-arrow-hover-bg, var(--primary-color));
    color:var(--slider-arrow-hover-color, var(--primary-contrast));
}
.grid-slider .slick-prev{justify-self:start; padding-right:.25rem;}
.grid-slider .slick-next{justify-self:end;padding-left:.25rem;}

/*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, var(--slider-dots-bg-active)) ;
    opacity: var(--slider-dots-op-active, var(--slider-dots-op,1));
}
.slick-dots li:not(.slick-active):hover button::before{
    /* cuando esta activo*/
    background:var(--slider-dots-bg-hover, rgba(0,0,0,1));
    border:solid var(--slider-dots-border-size, 0px) var(--slider-dots-border-color-hover, var(--slider-dots-bg-hover)) ;
    opacity: var(--slider-dots-op-hover, var(--slider-dots-op,1));
}

    .bs-parallax__title {
        color: #ffffff;
    }

.bs-parallax__content {
    padding: 24vw 3rem 1rem;
}