/* ==========================================================================
   PB Design System
   COMPONENT · Banner de Cookies Nativo
   ========================================================================== */

.pb-root .cookie-banner {
    position: fixed;
    bottom: var(--space-5);
    right: var(--space-5);
    z-index: 9999;
    
    display: grid;
    gap: var(--space-5);
    width: min(100% - (2 * var(--space-5)), 46rem);
    padding: var(--space-6) var(--space-5);
    
    background: var(--color-bordoy);
    border: var(--border-gold);
    border-radius: var(--radio-xl);
    box-shadow: var(--shadow-bordoy);
    
    
    
    
    color: var(--color-blanco);
    text-align: left;
    
    opacity: 0;
    pointer-events: none;
    transform: translateY(30px);
    transition: opacity .4s cubic-bezier(.25, .8, .25, 1), transform .4s cubic-bezier(.25, .8, .25, 1);
}

.pb-root .cookie-banner--activo {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

.pb-root .cookie-banner__titulo {
    margin: 0;
    font-family: var(--fuente-acento);
    font-size: var(--fs-600);
    letter-spacing: .08em;
    color: var(--color-seleccion);
}

.pb-root .cookie-banner__texto {
    margin: 0;
    font-size: var(--fs-200);
    line-height: 1.5;
    color: var(--color-blanco);
}

.pb-root .cookie-banner__texto a {
    color: var(--color-seleccion);
    text-decoration: underline;
    font-weight: 600;
    transition: opacity var(--transition-base);
}

.pb-root .cookie-banner__texto a:hover {
    opacity: .8;
}

.pb-root .cookie-banner__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
}

.pb-root .cookie-banner__btn {
    cursor: pointer;
    font-family: var(--fuente-base);
    font-size: var(--fs-200);
    font-weight: 600;
    letter-spacing: .05em;
    transition: transform var(--transition-base), box-shadow var(--transition-base), opacity var(--transition-base);
    border-radius: var(--radio-lg);
    color: var(--color-blanco);
    box-shadow: var(--shadow-bordoy);
}

.pb-root .cookie-banner__btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-bordoy);
}

.pb-root .cookie-banner__btn:active {
    transform: translateY(0);
}

.pb-root .cookie-banner__btn--aceptar {
    padding: var(--space-3) var(--space-5);
    background: var(--color-verde);
}



.pb-root .cookie-banner__btn--rechazar {
    padding: var(--space-3) var(--space-4);
    background: var(--color-rojo);
}


/* --------------------------------------------------------------
   Responsive
-------------------------------------------------------------- */

@media (max-width: 640px) {
    .pb-root .cookie-banner {
        bottom: var(--space-4);
        right: auto;
        left: var(--space-4);
        width: calc(100% - 2rem);
        max-width: calc(100% - 2rem);
        box-sizing: border-box;
        padding: var(--space-5) var(--space-4);
    }
    
    .pb-root .cookie-banner__acciones {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }
    
    .pb-root .cookie-banner__btn {
        width: 100%;
        text-align: center;
    }
    
    .pb-root .cookie-banner__btn--rechazar {
        order: 2;
    }
    
    .pb-root .cookie-banner__btn--aceptar {
        order: 1;
    }
}