/* Banner de cookies (prefijo ck-) */
#ck-banner {
  --ck-navy: #17203a;
  --ck-cream: #fff6ea;
  --ck-tan: #e8a85f;
  --ck-choc: #4a2a1c;

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Encima del header (99), menú móvil (100) y tarjetas; debajo de los modales
     de Bootstrap (1050), SweetAlert2 (1060) y el preloader. */
  z-index: 1039;
  box-sizing: border-box;
  padding: 14px 24px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--ck-cream);
  color: var(--ck-navy);
  border-top: 2px solid var(--ck-navy);
  box-shadow: 0 -6px 0 var(--ck-tan);
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: left;
  animation: ck-in 0.7s cubic-bezier(.3, 1.4, .5, 1) 0.4s both;
}
#ck-banner[hidden] { display: none !important; }
#ck-banner.ck-out { animation: ck-away 0.45s ease-in forwards; }
#ck-banner *, #ck-banner *::before, #ck-banner *::after { box-sizing: border-box; }

/* Contenido centrado: galleta + texto + botón en una sola fila */
.ck-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  max-width: 980px;
  margin: 0 auto;
  padding-left: 112px;
}

.ck-cookie {
  position: absolute;
  left: 0;
  top: -48px;
  width: 92px;
  height: 92px;
  transform-origin: 50% 60%;
  animation: ck-wiggle 1.1s ease-in-out 1.3s 1 both;
}
.ck-cookie svg { display: block; width: 100%; height: 100%; overflow: visible; }
#ck-banner.ck-out .ck-cookie { animation: ck-roll 0.45s ease-in forwards; }

/* Los selectores van bajo #ck-banner para que los estilos globales del tema
   (h2, p, button) no sobrescriban el diseño. */
.ck-copy { min-width: 0; }
#ck-banner .ck-title {
  margin: 0 0 2px;
  padding: 0;
  color: var(--ck-navy);
  font-family: "Fredoka", "Nunito", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.15;
  letter-spacing: normal;
  text-transform: none;
}
#ck-banner .ck-text {
  margin: 0;
  padding: 0;
  color: var(--ck-navy);
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.4;
}

.ck-actions { flex: none; }
#ck-banner .ck-btn {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  margin: 0;
  border: 2px solid var(--ck-navy);
  border-radius: 999px;
  padding: 10px 32px;
  background: var(--ck-navy);
  color: var(--ck-cream);
  font-family: "Fredoka", "Nunito", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: normal;
  text-transform: none;
  box-shadow: 0 4px 0 var(--ck-tan);
  transition: transform .15s ease, box-shadow .15s ease;
}
#ck-banner .ck-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ck-tan); }
#ck-banner .ck-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ck-tan); }
#ck-banner .ck-btn:focus { outline: none; }
#ck-banner .ck-btn:focus-visible { outline: 3px solid var(--ck-tan); outline-offset: 3px; }

@keyframes ck-in {
  from { transform: translateY(130%); }
  to   { transform: translateY(0); }
}
@keyframes ck-away {
  to { transform: translateY(140%); opacity: 0; }
}
@keyframes ck-wiggle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-14deg); }
  40% { transform: rotate(10deg); }
  60% { transform: rotate(-7deg); }
  80% { transform: rotate(4deg); }
}
@keyframes ck-roll {
  to { transform: translateX(60px) rotate(200deg); }
}

/* Mientras el banner está visible (cookie-banner.js añade html.ck-open):
   - --ck-space: alto de la barra + franja + lo que asoma la galleta. Se reserva
     al final de la página para que el footer y sus enlaces queden visibles.
   - --ck-bar: alto de la barra + franja. Sube los botones flotantes de la
     esquina inferior derecha (reCAPTCHA, WhatsApp, .cs2) por encima de ella. */
html.ck-open body { padding-bottom: var(--ck-space, 0px); }
html.ck-open .grecaptcha-badge { bottom: calc(var(--ck-bar, 0px) + 14px) !important; }
html.ck-open .btn_whatsapp { bottom: calc(var(--ck-bar, 0px) + 80px) !important; }
html.ck-open .cs2 { bottom: calc(var(--ck-bar, 0px) + 170px) !important; }

/* Móvil: la galleta se asoma por arriba y todo se apila centrado */
@media (max-width: 640px) {
  #ck-banner { padding: 14px 18px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .ck-inner {
    flex-direction: column;
    gap: 12px;
    padding: 40px 0 0;
    text-align: center;
  }
  .ck-cookie { left: 50%; top: -62px; margin-left: -46px; }
  .ck-actions { width: 100%; }
  #ck-banner .ck-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  #ck-banner, .ck-cookie, #ck-banner.ck-out, #ck-banner.ck-out .ck-cookie { animation: none; }
  #ck-banner .ck-btn { transition: none; }
}