/*==================================================

CasiArts
Sistema de Cookies

==================================================*/


/*==================================================

Variables

==================================================*/

:root{

    --cookie-primary:#4d3426;
    --cookie-primary-hover:#6d4c41;
    --cookie-secondary:#f7f3ef;
    --cookie-border:#d8cfc6;
    --cookie-text:#333333;
    --cookie-shadow:0 10px 35px rgba(0,0,0,.18);

}



/*==================================================

Banner inferior

==================================================*/

#cookieBanner{

    position:fixed;

    left:0;

    right:0;

    bottom:0;

    z-index:9998;

    display:none;

    background:#ffffff;

    border-top:1px solid var(--cookie-border);

    box-shadow:0 -5px 20px rgba(0,0,0,.10);

    animation:cookieSlideUp .35s ease;

}


#cookieBanner.show{

    display:block;

}


.cookie-banner-container{

    max-width:1200px;

    margin:auto;

    padding:22px 30px;

    display:flex;

    gap:30px;

    align-items:center;

    justify-content:space-between;

}


.cookie-banner-text{

    flex:1;

}


.cookie-banner-text h3{

    margin:0 0 10px;

    color:var(--cookie-primary);

    font-size:1.20rem;

    font-weight:700;

}


.cookie-banner-text p{

    margin:0;

    line-height:1.6;

    color:var(--cookie-text);

    font-size:.95rem;

}


.cookie-banner-text a{

    color:var(--cookie-primary);

    font-weight:600;

    text-decoration:none;

}


.cookie-banner-text a:hover{

    text-decoration:underline;

}



/*==================================================

Botones

==================================================*/

.cookie-banner-buttons{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    justify-content:flex-end;

}


.cookie-btn{

    border:none;

    cursor:pointer;

    border-radius:8px;

    padding:11px 20px;

    font-size:.93rem;

    font-weight:600;

    transition:.25s;

}


.cookie-btn-primary{

    background:var(--cookie-primary);

    color:#ffffff;

}


.cookie-btn-primary:hover{

    background:var(--cookie-primary-hover);

}


.cookie-btn-secondary{

    background:#ece7e1;

    color:#333333;

}


.cookie-btn-secondary:hover{

    background:#ddd5cd;

}


.cookie-btn-outline{

    background:#ffffff;

    color:var(--cookie-primary);

    border:1px solid var(--cookie-border);

}


.cookie-btn-outline:hover{

    background:#f7f3ef;

}



/*==================================================

Animación

==================================================*/

@keyframes cookieSlideUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================

Modal de configuración

==================================================*/

#cookieModal{

    position:fixed;

    inset:0;

    display:none;

    align-items:center;

    justify-content:center;

    padding:30px;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(4px);

    z-index:99999;

    animation:cookieFade .25s ease;

}

#cookieModal.show{

    display:flex;

}



/*==================================================

Caja del modal

==================================================*/

.cookie-modal-box{

    width:min(760px,100%);

    background:#ffffff;

    border-radius:14px;

    box-shadow:var(--cookie-shadow);

    overflow:hidden;

    animation:cookieZoom .25s ease;

}



/*==================================================

Cabecera

==================================================*/

.cookie-modal-header{

    padding:24px 30px;

    background:#f8f5f2;

    border-bottom:1px solid var(--cookie-border);

}

.cookie-modal-header h2{

    margin:0;

    color:var(--cookie-primary);

    font-size:1.45rem;

    font-weight:700;

}

.cookie-modal-header p{

    margin:10px 0 0;

    color:#666;

    line-height:1.6;

}



/*==================================================

Contenido

==================================================*/

.cookie-modal-content{

    padding:28px 30px;

}

.cookie-option{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:18px 0;

    border-bottom:1px solid #ececec;

}

.cookie-option:last-child{

    border-bottom:none;

}

.cookie-option h5{

    margin:0 0 6px;

    color:var(--cookie-primary);

    font-size:1rem;

}

.cookie-option p{

    margin:0;

    color:#666;

    font-size:.92rem;

    line-height:1.5;

}



/*==================================================

Pie del modal

==================================================*/

.cookie-modal-footer{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    padding:22px 30px;

    background:#fafafa;

    border-top:1px solid var(--cookie-border);

}



/*==================================================

Animaciones

==================================================*/

@keyframes cookieFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes cookieZoom{

    from{

        opacity:0;

        transform:scale(.92);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/*==================================================

Interruptores (Switch)

==================================================*/

.cookie-switch{

    position:relative;

    display:inline-block;

    width:54px;

    height:30px;

}

.cookie-switch input{

    opacity:0;

    width:0;

    height:0;

}

.cookie-slider{

    position:absolute;

    inset:0;

    cursor:pointer;

    background:#c8c8c8;

    border-radius:30px;

    transition:.30s;

}

.cookie-slider:before{

    content:"";

    position:absolute;

    width:24px;

    height:24px;

    left:3px;

    top:3px;

    background:#ffffff;

    border-radius:50%;

    transition:.30s;

    box-shadow:0 2px 5px rgba(0,0,0,.20);

}

.cookie-switch input:checked + .cookie-slider{

    background:var(--cookie-primary);

}

.cookie-switch input:checked + .cookie-slider:before{

    transform:translateX(24px);

}

.cookie-switch input:disabled + .cookie-slider{

    background:#9a8f86;

    cursor:not-allowed;

}



/*==================================================

Botón flotante

==================================================*/

#cookiePreferencesButton{
    position:fixed;
    bottom:24px;
    left:24px;
    width:50px;
    height:50px;
    display:flex;
    align-items:center;
   justify-content:flex-start;
    overflow:hidden;
    border:none;
    border-radius:50px;
    background:var(--cookie-primary);
    color:#ffffff;
    cursor:pointer;
    z-index:9997;
    box-shadow:0 6px 20px rgba(0,0,0,.25);
    transition:
        width .25s ease,
        transform .25s ease,
        background .25s ease,
        opacity .25s ease;
    opacity:.80;
}

#cookiePreferencesButton:hover{

    width:210px;

    background:var(--cookie-primary-hover);

    opacity:1;

    transform:translateY(-2px);

}

#cookiePreferencesButton:active{

    transform:scale(.96);

}

#cookiePreferencesButton i{
    display:flex;
    align-items:center;
    justify-content:center;
    width:50px;
    height:50px;
    flex-shrink:0;
    font-size:22px;
    line-height:1;
}

#cookiePreferencesButton span{

    opacity:0;

    white-space:nowrap;

    margin-right:18px;

    font-weight:600;

    transition:opacity .20s ease;

}

#cookiePreferencesButton:hover span{

    opacity:1;

}



/*==================================================

Responsive

==================================================*/

@media (max-width:768px){

    .cookie-banner-container{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

        padding:20px;

    }

    .cookie-banner-buttons{

        width:100%;

        justify-content:stretch;

    }

    .cookie-btn{

        flex:1;

    }

    .cookie-modal-box{

        width:100%;

        max-height:90vh;

        overflow:auto;

    }

    .cookie-option{

        flex-direction:column;

        align-items:flex-start;

    }

    .cookie-modal-footer{

        flex-direction:column;

    }

    .cookie-modal-footer .cookie-btn{

        width:100%;

    }

    #cookiePreferencesButton{

        width:50px;

        height:50px;

        bottom:18px;

        left:18px;

    }

    #cookiePreferencesButton:hover{

        width:50px;

    }

    #cookiePreferencesButton span{

        display:none;

    }

}