    /* .cookie-banner {
        position: fixed;
        bottom: 0;

        left: 0;
        width: 100%;
        background-color: #1a1a1a;
        color: white;
        padding: 1rem 2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 9999;
        box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2);
        flex-wrap: wrap;
        height: 142px;
    }

    .cookie-banner p {
        margin: 0;
        flex: 1 1 auto;
    }

    .cookie-buttons {
        display: flex;
        gap: 10px;
        margin-top: 0.5rem;
    }

    .cookie-buttons button {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 0.5rem 1rem;
        cursor: pointer;
        border-radius: 4px;
        font-size: 14px;
    }

    .cookie-buttons button:hover {
        background-color: #0056b3;
    }


    .cookie-banner {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 300px;
        background-color: #f8f9fa;
        border-right: 2px solid #ddd;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
        padding: 20px;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: transform 0.3s ease;


        border: 1px solid rgba(255, 255, 255, 0.15);

    
        background: rgba(19, 41, 75, 0.55);

        backdrop-filter: blur(10px) saturate(160%);
        -webkit-backdrop-filter: blur(10px) saturate(160%);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        color: #007bff;
    }

    .cookie-banner.hidden {
        transform: translateX(-100%);
    }

    .cookie-banner h3 {
        margin-top: 0;
        color: #333;
    }

    .cookie-banner p {
        font-size: 14px;
        color: #555;
    }

    .cookie-buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 15px;
    }

    .cookie-buttons button {
        padding: 10px;
        border: none;
        cursor: pointer;
        font-size: 14px;
        border-radius: 4px;
    }

    .btn-aceptar {
        background-color: #007bff;
        color: white;
    }

    .btn-funcionales {
        background-color: #e0e0e0;
        color: #333;
    } */

     /* --- Banner lateral --- */
        .cookie-banner {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 300px;
            width: 55%;
            background-color: #f8f9fa;
            border-right: 2px solid #ddd;
            padding: 20px;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transform: translateX(-110%);
            opacity: 0;
            animation: slideIn 1.6s ease-out forwards;
            animation-delay: 4s;
    
            border: 1px solid rgba(255, 255, 255, 0.15);
            background: linear-gradient(90deg, rgba(2, 45, 100, 0.7), rgba(5, 73, 161, 0.7), rgba(2, 45, 100, 0.7));
            backdrop-filter: blur(12px) saturate(160%);
            -webkit-backdrop-filter: blur(12px) saturate(160%);
            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
            color: #007bff;
            pointer-events: auto;
            text-align: center;
        }

        /* .cookie-banner.show {
            transform: translateX(0);
            opacity: 0;
        } */

        /* --- Ocultar banner --- */
        .cookie-banner.hidden {
            animation: slideOut 0.4s ease-in forwards;
            animation-delay: 2s;
        }

        @keyframes slideIn {
            from {
                transform: translateX(-110%);
                opacity: 0;
            }

            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes slideOut {
            from {
                transform: translateX(0);
                opacity: 1;
            }

            to {
                transform: translateX(-110%);
                opacity: 0;
            }
        }

        .cookie-banner h2 {
            margin-top: 0;
            color: #04ffff;
        }

        .cookie-banner p {
            font-size: 23px;
            color: #ffffff;
        }

        .cookie-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 15px;
               align-items: center; /* Centra los botones */

             display: flex;
        }

        .cookie-buttons button {
            padding: 10px;
            border: none;
            cursor: pointer;
            font-size: 23px;
            font-weight: 400;
            border-radius: 4px;
            transition: background-color 0.2s ease;
            width: 70%;


        }

        .btn-aceptar {
            background-color: #007bff;
            color: white;
            text-decoration: none;
            background: linear-gradient(90deg, #0652cc, #35497c, #0652cc);
            /* background: linear-gradient(90deg, #00e0ff, #0652cc, #00e0ff); */

            /* linear-gradient(90deg, #30a2bf 0%, #2f5a76 100%)!important */
            box-shadow:
                0 3px 10px rgba(69, 196, 255, 0.9),
                inset 0 8px 15px rgba(41, 116, 255, 0.7);

        }

        .btn-aceptar:hover {
             background: linear-gradient(90deg, #3982f8, #084efd, #4c8ef7);
              transform: scale(1.02);
        }

        .btn-funcionales {
            background-color: #e0e0e0;
            color: #333;
            text-decoration: none;
            background: linear-gradient(90deg, #979899, #ffffff, #c4c4c4);

            /* linear-gradient(90deg, #30a2bf 0%, #2f5a76 100%)!important */
            box-shadow:
                0 2px 8px rgba(0, 242, 250, 0.9),
                inset 0 13px 23px rgba(81, 249, 255, 0.7);
            box-shadow:
                0 3px 10px rgba(69, 196, 255, 0.9),
                inset 0 13px 23px rgba(139, 139, 139, 0.7);

        }

        .btn-funcionales:hover {
            background: linear-gradient(90deg, #6e6e6e, #e0e0e0, #7a7a7a);
             transform: scale(1.02);
        }