body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif; /* Asegúrate de que esta fuente esté cargada */
}

.cookie-banner {
    position: fixed;
    top: 50%; /* Centrar verticalmente */
    left: 50%; /* Centrar horizontalmente */
    transform: translate(-50%, -50%); /* Ajuste para centrar precisamente */
    background: rgba(255, 255, 255, 0.85); /* Fondo blanco con transparencia */
    backdrop-filter: blur(10px); /* Efecto de cristal esmerilado */
    -webkit-backdrop-filter: blur(10px); /* Para compatibilidad con Safari */
    color: #333; /* Color de texto oscuro para contraste */
    display: flex;
    flex-direction: column; /* Apilar elementos verticalmente */
    align-items: center;
    padding: 40px 30px; /* Más padding para que se vea más grande y centrado */
    border-radius: 20px; /* Bordes más redondeados */
    max-width: 400px; /* Ancho máximo para el modal */
    width: 90%; /* Ancho responsivo */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Sombra más suave */
    z-index: 10000;
    text-align: center; /* Centrar todo el texto */
}

.cb-logos {
    display: flex;
    align-items: center;
    margin-bottom: 25px; /* Espacio debajo de los logos */
}

.cb-safepass-logo {
    height: 40px; /* Tamaño del logo de SafePassInt */
    margin-right: 10px; /* Espacio antes del separador */
}

.cb-separator {
    font-size: 40px; /* Tamaño del separador */
    color: #bbb; /* Color más claro para el separador */
    margin-right: 10px; /* Espacio después del separador */
    font-weight: 300; /* Fuente más fina para el separador */
}

.cb-cookie-logo {
    height: 60px; /* Tamaño más grande para el logo de la cookie */
    margin-bottom: 10px; /* Pequeño margen debajo de la cookie */
}

.cb-title {
    font-size: 1.8rem; /* Título más grande */
    font-weight: 700; /* Negrita */
    margin-bottom: 15px; /* Espacio debajo del título */
    color: #333;
}

.cb-text {
    font-size: 1rem; /* Texto de descripción */
    line-height: 1.5;
    margin-bottom: 30px; /* Espacio antes de los botones */
    color: #555;
}

.cb-btn-primary {
    background: #3b82f6; /* Un color morado suave como el de la imagen */
    border: none;
    color: white;
    padding: 12px 25px; /* Padding más generoso */
    border-radius: 30px; /* Botón más redondeado (estilo píldora) */
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    transition: background 0.3s ease;
    margin-bottom: 15px; /* Espacio entre el botón primario y el link */
    box-shadow: 0 4px 10px rgba(106, 90, 205, 0.3); /* Sombra para el botón */
}

.cb-btn-primary:hover {
    background: #5a4aa3; /* Tono más oscuro al pasar el ratón */
}

.cb-link-secondary {
    color: #888; /* Color de texto más suave */
    font-size: 0.9rem;
    text-decoration: none; /* Sin subrayado por defecto */
    transition: color 0.3s ease;
}

.cb-link-secondary:hover {
    color: #333; /* Color más oscuro al pasar el ratón */
    text-decoration: underline; /* Subrayado al pasar el ratón */
}

/* Media Queries para responsividad */
@media (max-width: 500px) {
    .cookie-banner {
        padding: 30px 20px;
        max-width: 95%;
    }
    .cb-title {
        font-size: 1.5rem;
    }
    .cb-text {
        font-size: 0.9rem;
    }
    .cb-safepass-logo {
        height: 30px;
    }
    .cb-cookie-logo {
        height: 50px;
    }
    .cb-separator {
        font-size: 30px;
    }
}