/* ============================================================
   AVISO DE COOKIES — estilos (archivo independiente)
   Usa los colores de la web si existen; si no, los de respaldo.
   ============================================================ */

/* Banner (primera capa) */
.ck-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;max-width:980px;margin:0 auto;display:flex;align-items:center;gap:16px 28px;flex-wrap:wrap;padding:18px 20px;background:var(--tinta,#1F1813);color:var(--papel,#F3EEE5);border-radius:10px;box-shadow:0 20px 50px -15px rgba(0,0,0,.55);font:400 .93rem/1.55 var(--sans,system-ui,sans-serif);animation:ck-entrar .45s cubic-bezier(.2,.7,.2,1)}
.ck-banner__texto{flex:1 1 380px;margin:0}
.ck-banner__texto a{color:var(--roble-claro,#E2BF8F)}
.ck-banner__botones{display:flex;gap:8px;flex-wrap:wrap}
@keyframes ck-entrar{from{opacity:0;transform:translateY(20px)}}

/* Botones: Aceptar y Rechazar con el mismo estilo (lo exige la AEPD) */
.ck-btn{min-height:44px;padding:0 20px;border-radius:999px;border:1.5px solid var(--papel,#F3EEE5);background:var(--papel,#F3EEE5);color:var(--tinta,#1F1813);font:600 .92rem/1 var(--sans,system-ui,sans-serif);cursor:pointer;transition:background-color .2s,color .2s}
.ck-btn:hover{background:var(--roble-claro,#E2BF8F);border-color:var(--roble-claro,#E2BF8F)}
.ck-btn--borde{background:transparent;color:var(--papel,#F3EEE5)}
.ck-btn--borde:hover{background:rgba(243,238,229,.12);color:var(--papel,#F3EEE5);border-color:var(--papel,#F3EEE5)}
.ck-btn:focus-visible{outline:2px solid var(--roble-claro,#E2BF8F);outline-offset:3px}

/* Panel (segunda capa) */
.ck-abierto{overflow:hidden}
.ck-fondo{position:fixed;inset:0;z-index:210;background:rgba(19,15,12,.55);display:grid;place-items:center;padding:16px;opacity:0;transition:opacity .25s}
.ck-fondo.visible{opacity:1}
.ck-panel{width:100%;max-width:560px;max-height:calc(100vh - 32px);overflow:auto;background:var(--blanco,#FCFAF6);color:var(--tinta,#1F1813);border-radius:12px;padding:28px;font:400 .95rem/1.55 var(--sans,system-ui,sans-serif);box-shadow:0 30px 70px -20px rgba(0,0,0,.6)}
.ck-panel h2{font:500 1.7rem/1.1 var(--serif,Georgia,serif);margin:0 0 10px}
.ck-panel>p{color:var(--tinta-2,#3E342C);margin:0 0 14px}
.ck-fila{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:16px 0;border-top:1px solid var(--linea,rgba(31,24,19,.14))}
.ck-fila p{margin:4px 0 0;font-size:.88rem;color:var(--gris,#6A5F55)}
.ck-fila__titulo{font-weight:600}
.ck-panel__botones{display:flex;flex-wrap:wrap;gap:8px;padding-top:18px;border-top:1px solid var(--linea,rgba(31,24,19,.14))}
.ck-panel__botones .ck-btn{flex:1 1 auto;background:var(--tinta,#1F1813);color:var(--papel,#F3EEE5);border-color:var(--tinta,#1F1813)}
.ck-panel__botones .ck-btn--borde{background:transparent;color:var(--tinta,#1F1813)}
.ck-panel__botones .ck-btn:hover{background:var(--roble-osc,#8A5A2B);border-color:var(--roble-osc,#8A5A2B);color:#fff}
.ck-panel__mas{margin:16px 0 0;font-size:.85rem}
.ck-panel__mas a{color:var(--roble-osc,#8A5A2B)}

/* Interruptor */
.ck-interruptor{-webkit-appearance:none;appearance:none;flex-shrink:0;width:46px;height:26px;margin-top:2px;border-radius:999px;background:#c9c0b3;position:relative;cursor:pointer;transition:background-color .2s}
.ck-interruptor::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.ck-interruptor:checked{background:var(--whatsapp,#1E8E4E)}
.ck-interruptor:checked::after{transform:translateX(20px)}
.ck-interruptor:disabled{opacity:.55;cursor:not-allowed}
.ck-interruptor:focus-visible{outline:2px solid var(--roble-osc,#8A5A2B);outline-offset:3px}

/* Mientras el banner está visible, subir el botón de WhatsApp para que no se tapen */
body:has(.ck-banner) .flotante{bottom:150px}

@media (max-width:600px){
  .ck-banner{left:10px;right:10px;bottom:10px;padding:16px}
  .ck-banner__botones{width:100%}
  .ck-banner__botones .ck-btn{flex:1 1 0;padding:0 10px}
  .ck-panel{padding:22px 18px}
  body:has(.ck-banner) .flotante{bottom:230px}
}
@media (prefers-reduced-motion:reduce){.ck-banner{animation:none}.ck-fondo{transition:none}}