/**
 * inloff — overrides editoriales del banner CookieYes.
 *
 * Reskin del banner + modal de preferencias + botón revisit con la paleta
 * inloff (navy #1B2B4B / gold #C9A86A / cream #F8F4ED). Mantiene la lógica
 * y estructura del SDK — solo capa cosmética sobre los selectores estándar
 * .cky-* que CookieYes inyecta vía cdn-cookieyes.com/.../script.js.
 *
 * El SDK aplica estilos inline a algunos elementos; usamos !important
 * y especificidad de body[class] para ganar consistentemente.
 *
 * Selectores cubiertos:
 *   .cky-consent-container / .cky-consent-bar  → banner principal
 *   .cky-title / .cky-notice-des                → typo del banner
 *   .cky-btn / .cky-btn-accept / -reject /      → botones
 *     -customize / -do-not-sell
 *   .cky-modal / .cky-preference-center         → modal preferencias
 *   .cky-preference-header / -title / -content  → estructura modal
 *   .cky-accordion-wrapper / -header / -btn     → categorías cookies
 *   .cky-switch                                  → toggle on/off
 *   .cky-revisit-bottom-left / -bottom-right    → botón flotante
 */

/* ============================================================
   1) Banner principal (.cky-consent-bar)
   ============================================================ */

/* El aviso de consentimiento va SIEMPRE por encima de todo lo nuestro.
   Estaba en 999999, el mismo valor que `.inloff-popup` (el popup de newsletter),
   y con el empate manda el orden del DOM: el popup se pintaba encima y tapaba
   media barra, incluido el botón «Configurar» (visto a 1440×900 el 18-sep, y
   reproducido el 19-sep). Subimos el aviso por encima del rango que usa el tema
   en vez de bajar el popup: así cualquier capa futura que herede el 999999 de la
   casa tampoco podrá taparlo. El popup, además, ya espera a que haya decisión. */
body .cky-consent-container,
body .cky-overlay {
    z-index: 2147483000;
}

/* El modal de preferencias, un punto por encima de su propio velo. */
body .cky-modal,
body .cky-preference-center {
    z-index: 2147483001;
}

body .cky-consent-bar,
body .cky-consent-bar.cky-consent-bar {
    background: #FFFFFF !important;
    color: #2C2C2C !important;
    border: none !important;
    border-top: 3px solid #C9A86A !important;
    border-radius: 0 !important;
    box-shadow: 0 -8px 32px rgba(27, 43, 75, 0.12) !important;
    padding: 16px 28px !important;
    font-family: inherit !important;
    max-width: 100% !important;
}

/* Variante box (no full-width): aspecto card editorial */
body .cky-consent-bar[data-cky-tag="notice-banner"]:not(.cky-banner-bottom),
body .cky-consent-container.cky-classic-bottom .cky-consent-bar,
body .cky-consent-container.cky-classic-square .cky-consent-bar {
    border: 1px solid rgba(27, 43, 75, 0.08) !important;
    border-top: 3px solid #C9A86A !important;
    border-radius: 4px !important;
    box-shadow: 0 12px 40px rgba(27, 43, 75, 0.18) !important;
    max-width: 480px !important;
    padding: 22px 26px !important;
}

/* Banner full-width: layout horizontal compacto cuando hay espacio.
   El SDK pone .cky-notice como flex container. En columna: el plugin en local
   (desde el 30-sep, sin la nube de CookieYes) deja el título fuera de
   .cky-notice-group, y en fila quedaba como una columna estrecha a la izquierda.
   Así va encima del texto, como en la nube; texto y botones siguen en una fila
   dentro de .cky-notice-group. */
@media (min-width: 1024px) {
    body .cky-consent-bar .cky-notice {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
    }
    body .cky-consent-bar .cky-notice-group {
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 24px !important;
    }
    body .cky-consent-bar .cky-notice-des {
        flex: 1 1 auto !important;
    }
    body .cky-consent-bar .cky-title {
        margin: 0 0 4px !important;
        font-size: 18px !important;
    }
    body .cky-consent-bar .cky-notice-btn-wrapper {
        flex: 0 0 auto !important;
        margin-top: 0 !important;
    }
}

/* Heading del banner */
body .cky-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #1B2B4B !important;
    letter-spacing: 0.2px !important;
    margin: 0 0 12px !important;
    line-height: 1.25 !important;
}

/* Cuerpo: descripción */
body .cky-notice-des,
body .cky-notice-des * {
    font-family: inherit !important;
    font-size: 14px !important;
    color: #4a5878 !important;
    line-height: 1.55 !important;
    letter-spacing: 0.1px !important;
}

body .cky-notice-des a {
    color: #C9A86A !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    text-decoration-thickness: 1px !important;
}

body .cky-notice-des a:hover {
    color: #1B2B4B !important;
}

/* ============================================================
   2) Botones (.cky-btn / variantes)
   ============================================================ */

body .cky-btn,
body .cky-notice-btn-wrapper .cky-btn {
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    padding: 11px 22px !important;
    line-height: 1.3 !important;
    height: auto !important;
    min-height: 0 !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: pointer !important;
    transition: background .15s ease, color .15s ease, border-color .15s ease !important;
}

/* Botón "Reject all" / "Customize" → outlined navy (secundario) */
body .cky-btn.cky-btn-reject,
body .cky-btn.cky-btn-customize,
body .cky-btn.cky-btn-do-not-sell {
    background: transparent !important;
    color: #1B2B4B !important;
    border-color: #1B2B4B !important;
}

body .cky-btn.cky-btn-reject:hover,
body .cky-btn.cky-btn-customize:hover,
body .cky-btn.cky-btn-do-not-sell:hover {
    background: #1B2B4B !important;
    color: #FFFFFF !important;
}

/* Botón "Accept all" → filled navy (primario) */
body .cky-btn.cky-btn-accept {
    background: #1B2B4B !important;
    color: #FFFFFF !important;
    border-color: #1B2B4B !important;
}

body .cky-btn.cky-btn-accept:hover {
    background: #243a66 !important;
    border-color: #243a66 !important;
    color: #FFFFFF !important;
}

/* Wrapper de botones: spacing editorial */
body .cky-notice-btn-wrapper {
    gap: 10px !important;
    margin-top: 18px !important;
    flex-wrap: wrap !important;
}

/* ============================================================
   3) Botón revisit (flotante reabrir consent)
   ============================================================ */

body .cky-revisit-bottom-left,
body .cky-revisit-bottom-right {
    bottom: 20px !important;
}

body .cky-btn-revisit-wrapper,
body .cky-revisit-bottom-left .cky-btn-revisit-wrapper,
body .cky-revisit-bottom-right .cky-btn-revisit-wrapper {
    background: #1B2B4B !important;
    color: #FFFFFF !important;
    border: 1px solid #1B2B4B !important;
    border-radius: 0 !important;
    box-shadow: 0 6px 20px rgba(27, 43, 75, 0.2) !important;
    width: 44px !important;
    height: 44px !important;
    transition: background .15s ease, transform .15s ease !important;
}

body .cky-btn-revisit-wrapper:hover {
    background: #C9A86A !important;
    border-color: #C9A86A !important;
    transform: translateY(-2px);
}

body .cky-btn-revisit-wrapper img,
body .cky-btn-revisit-wrapper svg {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
    width: 22px !important;
    height: 22px !important;
}

body .cky-revisit-hide {
    display: none !important;
}

/* ============================================================
   4) Modal de preferencias (.cky-preference-center)
   ============================================================ */

body .cky-modal,
body.cky-modal-open .cky-modal {
    background: rgba(27, 43, 75, 0.55) !important;
}

body .cky-preference-center {
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: 0 24px 64px rgba(27, 43, 75, 0.25) !important;
    max-width: 560px !important;
    overflow: hidden !important;
    font-family: inherit !important;
}

/* Header del modal */
body .cky-preference-header {
    background: #FAF7F2 !important;
    border-bottom: 1px solid rgba(27, 43, 75, 0.06) !important;
    padding: 22px 28px !important;
}

body .cky-preference-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #1B2B4B !important;
    letter-spacing: 0.2px !important;
    line-height: 1.25 !important;
}

/* Botón close (X arriba-derecha del modal). El SDK pinta un <img src="cdn-cookieyes.com/assets/images/close.svg"> dentro del button.
   Garantías triples: 1) reglas explícitas display:block + visibility +
   opacity para el <img>, 2) min-width/height en el botón para que no
   colapse, 3) background SVG fallback inline en data: URI por si el
   asset del CDN no carga (network blocked, CSP, etc). */
body .cky-btn-close {
    background: transparent !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='none' stroke='%231B2B4B' stroke-width='2.5' stroke-linecap='round'><line x1='6' y1='6' x2='18' y2='18'/><line x1='6' y1='18' x2='18' y2='6'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 14px 14px !important;
    color: #1B2B4B !important;
    opacity: 1 !important;
    /* Hereda la del modal: si el modal está cerrado (visibility: hidden) el aspa no
       se pinta. Forzarla a `visible` la dejaba flotando sobre cualquier página. */
    visibility: inherit !important;
    border: none !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: opacity .15s ease, background-color .15s ease !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
}

body .cky-btn-close:hover {
    background-color: rgba(27, 43, 75, 0.06) !important;
    opacity: 0.7 !important;
}

/* <img> interno del SDK: lo OCULTAMOS porque dibujamos la X con el
   background SVG inline (que no depende del CDN externo y siempre
   carga). Esto evita el problema visto cuando close.svg del CDN no
   se renderiza por cualquier razón (CSP, ad-blocker, etc). */
body .cky-btn-close img {
    display: none !important;
}

/* Pero si en otra versión del SDK pinta SVG inline en lugar de img,
   le aseguramos visibilidad y tamaño consistente. */
body .cky-btn-close svg {
    width: 14px !important;
    height: 14px !important;
    opacity: 1 !important;
    visibility: inherit !important;
    display: block !important;
    filter: none !important;
    color: inherit !important;
}

body .cky-btn-close svg path,
body .cky-btn-close svg line {
    stroke: currentColor !important;
}

/* Body del modal */
body .cky-preference-body-wrapper {
    padding: 22px 28px !important;
    background: #FFFFFF !important;
}

body .cky-preference-content-wrapper {
    color: #4a5878 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

body .cky-preference-content-wrapper a {
    color: #C9A86A !important;
    text-decoration: underline !important;
}

/* Acordeones — estructura REAL del SDK (verificada con HTML del DOM):
   .cky-accordion (card)
     .cky-accordion-item (flex row: chevron + header-wrapper)
       .cky-accordion-chevron (<i class="cky-chevron-right"/>)
       .cky-accordion-header-wrapper (flex column)
         .cky-accordion-header (flex row: btn-titulo + always-active/switch)
           .cky-accordion-btn (TÍTULO de categoría, no es chevron)
           .cky-always-active OR .cky-switch
         .cky-accordion-header-des (descripción <p>)
     .cky-accordion-body (cookies table, solo cuando expandido)
       .cky-audit-table > .cky-empty-cookies-text */

body .cky-accordion-wrapper {
    margin-top: 8px !important;
}

/* Separador horizontal entre intro y acordeones — eliminar */
body .cky-horizontal-separator {
    display: none !important;
    border: none !important;
    background: transparent !important;
    height: 0 !important;
    margin: 0 !important;
}

body .cky-accordion {
    border: 1px solid rgba(27, 43, 75, 0.08) !important;
    border-radius: 4px !important;
    background: #FFFFFF !important;
    overflow: hidden !important;
    margin: 0 0 6px !important;
}

body .cky-accordion.cky-accordion-active {
    background: #FAF7F2 !important;
}

/* Item: layout flex compacto. El SDK típicamente lo pinta así. */
body .cky-accordion-item {
    display: flex !important;
    align-items: flex-start !important;
    padding: 10px 14px !important;
    gap: 10px !important;
    cursor: pointer !important;
    background: transparent !important;
}

/* Chevron a la izquierda — ancho fijo, alineado con el primer renglón
   del título. */
body .cky-accordion-chevron {
    flex: 0 0 auto !important;
    width: 14px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #4a5878 !important;
    transition: transform .2s ease !important;
}

body .cky-accordion.cky-accordion-active .cky-accordion-chevron {
    transform: rotate(90deg) !important;
}

body .cky-accordion-chevron .cky-chevron-right {
    color: #4a5878 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-style: normal !important;
}

/* Wrapper de header + descripción (lado derecho del flex-item) */
body .cky-accordion-header-wrapper {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Header: fila título + indicador (badge/switch) */
body .cky-accordion-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
}

/* Botón título — sobreescribir inline color del SDK (#212121) */
body .cky-accordion-btn {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #1B2B4B !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    line-height: 1.3 !important;
    text-align: left !important;
    cursor: pointer !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-transform: none !important;
}

body .cky-accordion-btn:hover {
    color: #C9A86A !important;
}

/* Descripción debajo del header (es <p> dentro de header-des) */
body .cky-accordion-header-des {
    color: #4a5878 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body .cky-accordion-header-des p,
body .cky-accordion-header-des p:last-child {
    color: #4a5878 !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Body con cookies table (solo expandido) */
body .cky-accordion-body {
    padding: 0 14px 10px !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Audit table (contenedor del "No hay cookies que mostrar"):
   override del background gris #f4f4f4 inline del SDK. */
body .cky-audit-table {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px dashed rgba(27, 43, 75, 0.12) !important;
    border-radius: 3px !important;
    color: #4a5878 !important;
    padding: 8px 12px !important;
}

body .cky-empty-cookies-text {
    color: rgba(74, 88, 120, 0.7) !important;
    font-size: 11.5px !important;
    font-style: italic !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Badge "SIEMPRE ACTIVA" — gold, una línea (sobreescribir verde del SDK) */
body .cky-always-active {
    color: #C9A86A !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    background: transparent !important;
}

/* Switch toggle */
body .cky-switch input[type="checkbox"] + label,
body .cky-switch .cky-slider {
    background: #d0d4de !important;
    border-radius: 999px !important;
    transition: background .2s ease !important;
}

body .cky-switch input[type="checkbox"]:checked + label,
body .cky-switch input[type="checkbox"]:checked + .cky-slider {
    background: #1B2B4B !important;
}

body .cky-switch input[type="checkbox"] + label::before,
body .cky-switch .cky-slider::before {
    background: #FFFFFF !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

/* Footer wrapper (.cky-footer-wrapper) — contenedor de la franja final
   con botones. El SDK añade un .cky-footer-shadow (gradient blanco
   sobre el footer) que rompe el cream — lo ocultamos. */
body .cky-footer-wrapper,
body .cky-preference-footer-wrapper {
    background: #FAF7F2 !important;
    border-top: 1px solid rgba(27, 43, 75, 0.06) !important;
    padding: 16px 22px !important;
    position: relative !important;
}

body .cky-footer-shadow {
    display: none !important;
    background: none !important;
}

body .cky-prefrence-btn-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

body .cky-footer-wrapper .cky-btn,
body .cky-preference-footer-wrapper .cky-btn,
body .cky-prefrence-btn-wrapper .cky-btn {
    flex: 1 1 auto !important;
    min-width: 140px !important;
}

/* ============================================================
   5) Powered by CookieYes — discreto
   ============================================================ */

body .cky-consent-bar .cky-cookie-bar-text,
body .cky-cookie-des-table-wrapper a[href*="cookieyes"],
body .cky-preference-center a[href*="cookieyes"] {
    font-size: 11px !important;
    opacity: 0.5 !important;
    color: #4a5878 !important;
}

body .cky-consent-bar .cky-cookie-bar-text:hover {
    opacity: 0.8 !important;
}

/* ============================================================
   6) Mobile (< 768px): banner full-width compacto
   ============================================================ */

@media (max-width: 768px) {
    body .cky-consent-bar {
        padding: 22px 18px !important;
        max-width: 100% !important;
    }
    body .cky-title {
        font-size: 18px !important;
    }
    body .cky-notice-des,
    body .cky-notice-des * {
        font-size: 13px !important;
    }
    body .cky-btn,
    body .cky-notice-btn-wrapper .cky-btn {
        flex: 1 1 100% !important;
        padding: 12px 16px !important;
        font-size: 11px !important;
    }
    body .cky-preference-center {
        max-width: calc(100% - 24px) !important;
        margin: 12px !important;
    }
    body .cky-preference-header,
    body .cky-preference-body-wrapper,
    body .cky-preference-footer-wrapper {
        padding: 18px 18px !important;
    }
}

/* ============================================================
   7) Iteración 2 (post-feedback): ocultar branding, compactar
      modal, arreglar acordeones, botón guardar consistente.
   ============================================================ */

/* Ocultar TODO el bloque "Powered by CookieYes" en banner Y modal.
   El SDK Lite usa varias clases (con typo en algunas: "prefrence"),
   y a veces el "Powered by" está fuera del wrapper del link. Ocultamos
   por className + por contenido (:has) + por position (último hijo del
   modal/banner). */
body .cky-consent-bar .cky-cookie-bar-text,
body .cky-consent-bar .cky-cookie-des-table-wrapper a[href*="cookieyes"],
body .cky-consent-bar [class*="powered"],
body .cky-consent-bar a[href*="cookieyes.com"],
body .cky-consent-bar img[src*="cookieyes"],
body .cky-consent-bar img[alt*="CookieYes" i],
body .cky-preference-center .cky-prefrence-bar-text,
body .cky-preference-center .cky-preference-bar-text,
body .cky-preference-center [class*="prefrence-bar-text"],
body .cky-preference-center [class*="preference-bar-text"],
body .cky-preference-center [class*="powered"],
body .cky-preference-center .cky-prefrence-pwbtxt,
body .cky-preference-center a[href*="cookieyes.com"],
body .cky-preference-center img[src*="cookieyes"],
body .cky-preference-center img[alt*="CookieYes" i] {
    display: none !important;
}

/* Fallback con :has() — oculta cualquier hijo directo del modal cuyo
   contenido textual o de link mencione "Powered by" / "cookieyes". */
body .cky-preference-center > div:has(> a[href*="cookieyes"]),
body .cky-preference-center > div:has(> img[src*="cookieyes"]),
body .cky-consent-bar > div:has(> a[href*="cookieyes"]) {
    display: none !important;
}

/* Focus ring: invisible al hacer click con ratón (:focus), solo visible
   en navegación por teclado (:focus-visible) y muy sutil. El default
   azul electric del browser es muy invasivo en este contexto. */
body .cky-btn:focus,
body .cky-btn-close:focus,
body .cky-accordion-btn:focus,
body .cky-accordion-header:focus,
body .cky-show-desc-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

body .cky-btn:focus-visible,
body .cky-btn-close:focus-visible,
body .cky-accordion-btn:focus-visible,
body .cky-accordion-header:focus-visible,
body .cky-show-desc-btn:focus-visible {
    outline: 2px solid rgba(201, 168, 106, 0.4) !important;
    outline-offset: 1px !important;
    box-shadow: none !important;
}

/* Botón "Guardar preferencias" → outlined navy consistente con
   "Rechazar" / "Personalizar". Selectores típicos de CookieYes Lite. */
body .cky-btn.cky-btn-preferences,
body .cky-preference-footer-wrapper .cky-btn.cky-btn-preferences,
body .cky-prefrence-btn-wrapper .cky-btn.cky-btn-preferences {
    background: transparent !important;
    color: #1B2B4B !important;
    border: 1px solid #1B2B4B !important;
}

body .cky-btn.cky-btn-preferences:hover,
body .cky-preference-footer-wrapper .cky-btn.cky-btn-preferences:hover {
    background: #1B2B4B !important;
    color: #FFFFFF !important;
}

/* Link "Mostrar más" / "Show more" en descripción → gold subrayado
   en lugar del azul electric default del SDK. */
body .cky-show-desc-btn,
body .cky-preference-content-wrapper .cky-show-desc-btn,
body .cky-notice-des .cky-show-desc-btn {
    color: #C9A86A !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
}

body .cky-show-desc-btn:hover {
    color: #1B2B4B !important;
}

/* Quitar el border-bottom horizontal después de la descripción del
   modal (separador feo entre intro y acordeones). */
body .cky-preference-content-wrapper {
    border-bottom: none !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
}

/* "SIEMPRE ACTIVA" badge sin saltos de línea (cabe siempre en una línea) */
body .cky-always-active {
    color: #C9A86A !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Modal: padding general más compacto (overrides los 22/28 iniciales) */
body .cky-preference-header {
    padding: 16px 22px !important;
}

body .cky-preference-body-wrapper {
    padding: 16px 22px !important;
}

body .cky-preference-footer-wrapper,
body .cky-prefrence-btn-wrapper {
    padding: 14px 22px !important;
}

/* Modal: reducir tamaño title del header (era 22px, ahora 18px) */
body .cky-preference-title {
    font-size: 18px !important;
}

/* Modal: el body interno scrollea — fix scrollbar custom sutil */
body .cky-preference-body-wrapper::-webkit-scrollbar {
    width: 6px;
}
body .cky-preference-body-wrapper::-webkit-scrollbar-track {
    background: transparent;
}
body .cky-preference-body-wrapper::-webkit-scrollbar-thumb {
    background: rgba(27, 43, 75, 0.18);
    border-radius: 3px;
}

/* X de close: el SDK pinta un <img src="cdn-cookieyes.com/.../close.svg">
   que es totalmente válido. Lo dejamos visible — antes lo ocultaba con
   `> * display:none` por error. */

/* Mensaje "No hay cookies que mostrar" / "No cookies to display":
   aparece cuando una categoría no tiene cookies clasificadas en el
   plan free. Lo hacemos discreto en lugar de ocultarlo del todo
   (sería información útil mantener). */
body .cky-cookie-des-table-wrapper > .cky-empty-cookies,
body .cky-cookie-des-table-wrapper:empty,
body [class*="cookie-des-empty"],
body [class*="empty-cookies"] {
    background: transparent !important;
    border: 1px dashed rgba(27, 43, 75, 0.12) !important;
    color: rgba(74, 88, 120, 0.6) !important;
    font-size: 12px !important;
    font-style: italic !important;
    padding: 8px 12px !important;
    text-align: center !important;
}

/* Tabla de cookies cuando SÍ hay (free plan rara vez): styling editorial */
body .cky-cookie-des-table {
    border: 1px solid rgba(27, 43, 75, 0.08) !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    margin-top: 6px !important;
}

body .cky-cookie-des-table th {
    background: #FAF7F2 !important;
    color: #1B2B4B !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    padding: 8px 10px !important;
}

body .cky-cookie-des-table td {
    padding: 8px 10px !important;
    color: #4a5878 !important;
    border-top: 1px solid rgba(27, 43, 75, 0.05) !important;
}

/* ============================================================================
   Contraste AA de los dos textos que quedaban del banner (2026-09-18)
   ----------------------------------------------------------------------------
   El gold #C9A86A sobre el blanco del panel da 2,26:1 en «Mostrar más» y en
   «Siempre activa». Son texto pequeño y tienen que leerse, así que van al bronce
   de la marca (#7E5E3B, 5,9:1 sobre blanco). El gold se queda donde es decoración
   pura: filetes, bordes y rellenos de botón.
   ========================================================================= */

body .cky-show-desc-btn,
body .cky-show-desc-btn:hover,
body .cky-show-desc-btn:focus,
body .cky-always-active {
    color: var(--inloff-bronze-text, #7E5E3B) !important;
}

/* ============================================================
   8) Móvil compacto (30-sep-2026, owner). El banner tapaba media pantalla
      (426 de 844 px a 390 de ancho), también «Añadir al carrito» en la ficha.
      Mismo texto, en menos alto:
      - sin el margen lateral doble (28 px de la barra + 24 px que el SDK pone
        a cada bloque): el texto usa todo el ancho y ocupa menos líneas;
      - «Aceptar todas» y «Rechazar todas» en una fila, del mismo tamaño
        (rechazar cuesta lo mismo que aceptar), y «Configurar» debajo;
      - los tres botones, de 44 px de alto (zona táctil mínima).
      La regla de la sección 6 perdía frente a la general de la barra, más
      específica: aquí va con la especificidad del contenedor.
   ============================================================ */
@media (max-width: 768px) {
    body .cky-consent-container .cky-consent-bar.cky-consent-bar {
        padding: 14px 16px 12px !important;
    }
    body .cky-consent-container .cky-consent-bar .cky-title,
    body .cky-consent-container .cky-consent-bar .cky-notice-des,
    body .cky-consent-container .cky-consent-bar .cky-notice-btn-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body .cky-consent-container .cky-consent-bar .cky-title {
        font-size: 17px !important;
        margin: 0 0 6px !important;
    }
    body .cky-consent-container .cky-consent-bar .cky-notice-des,
    body .cky-consent-container .cky-consent-bar .cky-notice-des * {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }
    body .cky-consent-container .cky-consent-bar .cky-notice-btn-wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-top: 12px !important;
    }
    body .cky-consent-container .cky-consent-bar .cky-notice-btn-wrapper .cky-btn {
        min-height: 44px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 10px 8px !important;
        font-size: 11px !important;
        letter-spacing: 1px !important;
    }
    body .cky-consent-container .cky-consent-bar .cky-notice-btn-wrapper .cky-btn-accept {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    body .cky-consent-container .cky-consent-bar .cky-notice-btn-wrapper .cky-btn-reject {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }
    body .cky-consent-container .cky-consent-bar .cky-notice-btn-wrapper .cky-btn-customize {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
    }
}

/* ============================================================
   9) Móvil: una barra baja (16-oct-2026, owner). Medido en un iPhone
      (393 × 852, el navegador de Instagram): con la sección 8 el aviso
      seguía ocupando 296 px de 852 al llegar a la ficha y al pago, y
      tapaba el título, el precio y el botón. Ahora, unos 104 px:
      - una línea de texto, «Usamos cookies para mejorar tu visita.», con
        el enlace a la política (la pone `inloff-cookieyes.js`). El texto
        largo de CookieYes sigue en escritorio; en el móvil, el detalle de
        las cookies propias y de terceros está en «Configurar» (categoría a
        categoría) y en la política;
      - «Configurar», el botón de CookieYes, con aspecto de enlace al final
        de esa línea;
      - «Rechazar todas» y «Aceptar todas» en la misma fila y del mismo tamaño,
        en la primera capa. «Aceptar todas» destaca (owner, 16-oct): relleno
        navy y texto blanco, como «Añadir al carrito». «Rechazar todas», con
        contorno y texto navy (15:1 sobre la crema), nunca en gris claro ni más
        pequeño: destacar el de aceptar vale para la AEPD; esconder el de
        rechazar sería un diseño engañoso.
      Solo el aspecto: los botones, sus textos y lo que hacen son los de
      CookieYes.
   ============================================================ */

/* La línea corta solo se ve en el móvil (abajo). */
body .cky-consent-bar .cky-notice-des .inloff-aviso-breve {
    display: none !important;
}

@media (max-width: 768px) {
    body .cky-consent-container .cky-consent-bar.cky-consent-bar {
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        background: var(--inloff-cream-light, #FDFBF7) !important;
        border-top: 2px solid var(--inloff-heart, #C5A184) !important;
        box-shadow: 0 -6px 24px rgba(27, 37, 64, 0.10) !important;
    }

    /* Fuera el título y el texto largo; en su lugar, la línea corta. */
    body .cky-consent-container .cky-consent-bar .cky-title,
    body .cky-consent-container .cky-consent-bar .cky-notice-des > :not(.inloff-aviso-breve) {
        display: none !important;
    }

    /* Una fila con el texto y «Configurar»; debajo, los dos botones. El envoltorio de
       los botones se disuelve (`display: contents`) para que los tres entren en la
       misma rejilla flexible que el texto. */
    body .cky-consent-container .cky-consent-bar .cky-notice-group {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        align-items: baseline !important;
        gap: 0 6px !important;
    }
    body .cky-consent-container .cky-consent-bar .cky-notice-btn-wrapper {
        display: contents !important;
    }
    /* El salto de fila: los dos botones van siempre debajo, también en pantallas anchas. */
    body .cky-consent-container .cky-consent-bar .cky-notice-group::after {
        content: "";
        order: 3;
        flex: 0 0 100%;
        height: 8px;
    }

    body .cky-consent-container .cky-consent-bar .cky-notice-des {
        order: 1;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body .cky-consent-container .cky-consent-bar .cky-notice-des > .inloff-aviso-breve {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body .cky-consent-container .cky-consent-bar .cky-notice-des .inloff-aviso-breve,
    body .cky-consent-container .cky-consent-bar .cky-notice-des .inloff-aviso-breve a {
        font-size: 13px !important;
        line-height: 1.4 !important;
        letter-spacing: 0 !important;
        color: var(--inloff-ink-soft, #4A4A4A) !important;
    }

    /* Los dos enlaces de la línea: «Política» y «Configurar». */
    body .cky-consent-container .cky-consent-bar .cky-notice-des .inloff-aviso-breve a,
    body .cky-consent-container .cky-consent-bar .cky-notice-btn-wrapper .cky-btn.cky-btn-customize {
        color: var(--inloff-navy, #1B2540) !important;
        font-weight: 600 !important;
        text-decoration: underline !important;
        text-decoration-thickness: 1px !important;
        text-underline-offset: 3px !important;
    }
    /* Más zona de toque que la del texto, sin mover la línea. */
    body .cky-consent-container .cky-consent-bar .cky-notice-des .inloff-aviso-breve a {
        padding: 6px 0 !important;
    }
    body .cky-consent-container .cky-consent-bar .cky-notice-btn-wrapper .cky-btn.cky-btn-customize {
        order: 2;
        flex: 0 0 auto !important;
        width: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 6px 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }
    body .cky-consent-container .cky-consent-bar .cky-notice-btn-wrapper .cky-btn.cky-btn-customize::before {
        content: "·";
        display: inline-block;
        margin-right: 6px;
        color: var(--inloff-ink-soft, #4A4A4A);
        text-decoration: none;
    }
    body .cky-consent-container .cky-consent-bar .cky-notice-btn-wrapper .cky-btn.cky-btn-customize:hover,
    body .cky-consent-container .cky-consent-bar .cky-notice-btn-wrapper .cky-btn.cky-btn-customize:active {
        background: transparent !important;
        color: var(--inloff-navy-soft, #2A3656) !important;
    }

    /* «Rechazar todas» y «Aceptar todas»: la misma caja (ancho, alto, letra), en la
       misma fila. Cambia solo el relleno. */
    body .cky-consent-container .cky-consent-bar .cky-notice-btn-wrapper .cky-btn.cky-btn-reject,
    body .cky-consent-container .cky-consent-bar .cky-notice-btn-wrapper .cky-btn.cky-btn-accept {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 10px 8px !important;
        border: 1.5px solid var(--inloff-navy, #1B2540) !important;
        border-radius: 6px !important;
        font-size: 11.5px !important;
        letter-spacing: 0.06em !important;
    }
    body .cky-consent-container .cky-consent-bar .cky-notice-btn-wrapper .cky-btn.cky-btn-reject {
        background: transparent !important;
        color: var(--inloff-navy, #1B2540) !important;
    }
    body .cky-consent-container .cky-consent-bar .cky-notice-btn-wrapper .cky-btn.cky-btn-reject:hover,
    body .cky-consent-container .cky-consent-bar .cky-notice-btn-wrapper .cky-btn.cky-btn-reject:active {
        background: rgba(27, 37, 64, 0.06) !important;
        color: var(--inloff-navy, #1B2540) !important;
    }
    /* El color de «Añadir al carrito» (inloff-pdp.css), también al pasar por encima. */
    body .cky-consent-container .cky-consent-bar .cky-notice-btn-wrapper .cky-btn.cky-btn-accept {
        background: var(--inloff-navy, #1B2540) !important;
        color: #fff !important;
    }
    body .cky-consent-container .cky-consent-bar .cky-notice-btn-wrapper .cky-btn.cky-btn-accept:hover,
    body .cky-consent-container .cky-consent-bar .cky-notice-btn-wrapper .cky-btn.cky-btn-accept:active {
        background: #2A3656 !important;
        border-color: #2A3656 !important;
        color: #fff !important;
    }
    body .cky-consent-container .cky-consent-bar .cky-notice-btn-wrapper .cky-btn.cky-btn-reject { order: 4; }
    body .cky-consent-container .cky-consent-bar .cky-notice-btn-wrapper .cky-btn.cky-btn-accept { order: 5; }

    /* Foco de teclado visible (el general, cobre al 40 %, no llega a 3:1 sobre la crema). */
    body .cky-consent-container .cky-consent-bar .cky-btn:focus-visible,
    body .cky-consent-container .cky-consent-bar .inloff-aviso-breve a:focus-visible {
        outline: 2px solid var(--inloff-navy, #1B2540) !important;
        outline-offset: 2px !important;
    }
}