/* ==========================================================
   BANNER DE CONSENTIMIENTO DE COOKIES

   Hoja del banner que el plugin imprime al final de la página
   la primera vez que alguien entra. Es editable desde «Páginas
   legales» en el panel y se puede restaurar en cualquier
   momento, así que aquí no hay nada que el plugin necesite
   para funcionar: solo el aspecto.

   Es una tarjeta vertical en la esquina: ilustración, título,
   texto y las dos respuestas. No ocupa el ancho de la pantalla
   ni oscurece la página, así que no bloquea la navegación —un
   muro de cookies no sería consentimiento libre— y en el móvil
   se estira hasta los márgenes, que es donde sí hace falta.

   **Los dos botones pesan lo mismo a propósito.** Mismo ancho,
   mismo alto, misma letra y el mismo relleno; solo cambia el
   color, que distingue la acción principal sin esconder la
   otra. La guía de la AEPD exige que rechazar sea tan fácil
   como aceptar: un «rechazar» convertido en enlace pequeño
   invalida el consentimiento que se acaba de recoger. Si se
   retoca esta hoja, esa igualdad es lo único que no se toca.

   El texto del botón va en 19px y en negrita a propósito: con
   ese tamaño el blanco sobre el naranja cumple el contraste
   que exige WCAG para texto grande. Bajarlo obliga a oscurecer
   el naranja.

   Todo cuelga de `.h2e-cookie-banner`, que es la raíz del
   componente, de modo que la hoja no puede afectar a nada más
   del sitio.
   ========================================================== */

.h2e-cookie-banner {
    /* Paleta y medidas propias del componente, agrupadas para
       que recolorear la tarjeta sea tocar estas líneas. */
    --h2e-cookie-banner-surface: #f8f0eb;
    --h2e-cookie-banner-title: #4a2b18;
    --h2e-cookie-banner-text: #6b5548;
    --h2e-cookie-banner-accent: #e0703c;
    --h2e-cookie-banner-accent-dark: #c85c2b;
    --h2e-cookie-banner-radius: 14px;
    --h2e-cookie-banner-spacing: 28px;
    --h2e-cookie-banner-width: 380px;

    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9998;
    width: min(var(--h2e-cookie-banner-width), calc(100vw - 32px));
}

/* `hidden` es lo que decide si el banner está: el marcado nace
   oculto y el script solo lo enseña si no hay decisión. Se
   declara porque `position: fixed` gana al `display: none` que
   el navegador aplica por defecto al atributo. */
.h2e-cookie-banner[hidden] {
    display: none;
}

.h2e-cookie-banner__card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: var(--h2e-cookie-banner-spacing);
    background-color: var(--h2e-cookie-banner-surface);
    border-radius: var(--h2e-cookie-banner-radius);
    box-shadow: 0 18px 40px rgba(74, 43, 24, 0.18);
    text-align: center;
}

/* --- El aspa ---------------------------------------------- */

.h2e-cookie-banner__close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 40px de lado: es el mínimo que WCAG pide para un destino
       táctil, y el aspa es lo más pequeño de la tarjeta. */
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: var(--h2e-cookie-banner-text);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.h2e-cookie-banner__close:hover,
.h2e-cookie-banner__close:focus-visible {
    background-color: rgba(74, 43, 24, 0.08);
    color: var(--h2e-cookie-banner-title);
}

/* --- La ilustración --------------------------------------- */

.h2e-cookie-banner__image {
    width: clamp(96px, 34%, 132px);
    height: auto;
    margin-top: 6px;
}

/* --- Los textos ------------------------------------------- */

.h2e-cookie-banner__title {
    margin: 0;
    color: var(--h2e-cookie-banner-title);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.h2e-cookie-banner__text {
    margin: 0;
    color: var(--h2e-cookie-banner-text);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.h2e-cookie-banner__link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.h2e-cookie-banner__link:hover,
.h2e-cookie-banner__link:focus-visible {
    color: var(--h2e-cookie-banner-title);
}

/* --- Las dos respuestas ----------------------------------- */

.h2e-cookie-banner__actions {
    display: grid;
    gap: 10px;
    width: 100%;
    margin-top: 6px;
}

/* Aquí empieza la igualdad entre las dos respuestas: todo lo
   que se declara a partir de esta regla lo comparten. */
.h2e-cookie-banner__button {
    width: 100%;
    padding: 14px 24px;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.2;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.h2e-cookie-banner__button--accept {
    background-color: var(--h2e-cookie-banner-accent);
    color: #ffffff;
}

.h2e-cookie-banner__button--reject {
    background-color: transparent;
    border-color: var(--h2e-cookie-banner-accent);
    color: var(--h2e-cookie-banner-accent-dark);
}

.h2e-cookie-banner__button--accept:hover,
.h2e-cookie-banner__button--accept:focus-visible {
    background-color: var(--h2e-cookie-banner-accent-dark);
}

.h2e-cookie-banner__button--reject:hover,
.h2e-cookie-banner__button--reject:focus-visible {
    background-color: rgba(224, 112, 60, 0.12);
}

.h2e-cookie-banner__button:focus-visible,
.h2e-cookie-banner__close:focus-visible {
    outline: 2px solid var(--h2e-cookie-banner-accent-dark);
    outline-offset: 2px;
}

/* --- Pantallas estrechas ---------------------------------- */

/* La tarjeta deja de ser una esquina y pasa a ser el pie de la
   pantalla, con la ilustración más pequeña: entera ocuparía
   media pantalla de un móvil. */
@media (max-width: 480px) {
    .h2e-cookie-banner {
        right: 12px;
        left: 12px;
        bottom: 12px;
        width: auto;
    }

    .h2e-cookie-banner__card {
        gap: 12px;
        padding: 20px;
    }

    .h2e-cookie-banner__image {
        width: 88px;
    }

    .h2e-cookie-banner__title {
        font-size: 1.3125rem;
    }
}

/* El banner aparece de golpe salvo que el sistema pida lo
   contrario; quien haya pedido menos movimiento no necesita
   que lo primero que vea el sitio sea algo deslizándose. */
@media (prefers-reduced-motion: no-preference) {
    .h2e-cookie-banner {
        animation: h2e-cookie-banner-enter 0.3s ease-out both;
    }

    @keyframes h2e-cookie-banner-enter {
        from {
            opacity: 0;
            transform: translateY(16px);
        }
    }
}