/* ══════════════════════════════════════════════════════════════════
   AVISO DE COOKIES
   Se carga en todas las páginas, así que no depende de hero.css ni de
   legal.css: define sus propios valores.

   Sobre la igualdad de botones: «Rechazar» y «Aceptar» comparten
   exactamente la misma clase, el mismo tamaño y el mismo contraste.
   No es un detalle estético — que rechazar sea visualmente más
   costoso que aceptar es precisamente lo que la AEPD considera
   consentimiento no válido.

   Y ninguna animación parte de opacidad 0: si el motor se atasca, el
   aviso tiene que verse igual. Solo se anima la posición.
   ══════════════════════════════════════════════════════════════════ */
.ck, .ckp {
  --ck-tinta: #16150f;
  --ck-papel: #ffffff;
  --ck-linea: rgba(22,21,15,.16);
  --ck-suave: rgba(22,21,15,.62);
  font-family: "Poppins", system-ui, sans-serif;
}

/* ── Primera capa: barra inferior, no bloquea la navegación ── */
.ck { position: fixed; z-index: 90; left: 0; right: 0; bottom: 0;
  padding: clamp(12px,2vw,18px);
  display: none; }
.ck.is-on { display: block; }
/* El desplazamiento se aplica a la CAJA, no al contenedor, y es de 10 px
   contra un relleno de 12: si la animación se congela en el fotograma 0
   —cosa que pasa— la caja se come el relleno pero no se sale de la
   ventana. Animándolo sobre .ck se quedaba 14 px por debajo del borde
   inferior y el aviso aparecía cortado. Y ni un fotograma toca la
   opacidad: un aviso legal invisible no es un aviso legal. */
.ck.is-on .ck__caja { animation: ckSube .4s cubic-bezier(.16,1,.3,1); }
@keyframes ckSube { from { transform: translateY(10px) } to { transform: none } }

.ck__caja { max-width: 1240px; margin-inline: auto;
  background: var(--ck-papel); color: var(--ck-tinta);
  border: 1px solid var(--ck-linea); border-radius: 6px;
  box-shadow: 0 18px 44px -14px rgba(8,10,8,.32);
  padding: clamp(16px,2.2vw,22px) clamp(18px,2.4vw,26px);
  display: grid; gap: 16px clamp(24px,4vw,48px); align-items: center;
  grid-template-columns: 1fr; }

.ck__t { margin: 0 0 6px; font-size: .62rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ck-suave); }
.ck__p { margin: 0; font-size: .84rem; font-weight: 300; line-height: 1.65;
  color: #35322a; max-width: 78ch; }
.ck__p a { color: var(--ck-tinta); text-underline-offset: 3px; }

/* Rejilla, no flex.
   Con flex y wrap, «Aceptar» se quedaba con el espacio sobrante de la fila
   y acababa midiendo 313 px frente a los 177 de «Rechazar» en una pantalla
   de móvil. Aceptar el doble de grande que rechazar es exactamente el
   patrón que invalida el consentimiento. Con dos columnas iguales miden lo
   mismo siempre, en cualquier ancho de pantalla. */
.ck__bot { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ck__b { min-height: 46px;
  padding: 12px 22px; border: 1px solid var(--ck-tinta); border-radius: 999px;
  background: var(--ck-tinta); color: #fff; cursor: pointer;
  font-family: inherit; font-size: .68rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  transition: background .25s, color .25s, transform .25s cubic-bezier(.16,1,.3,1); }
.ck__b:hover { transform: translateY(-1px); background: #2c2a20; border-color: #2c2a20; }
.ck__b:focus-visible { outline: 2px solid var(--ck-tinta); outline-offset: 3px; }
/* «Configurar» sí es secundario: no es una opción de consentimiento,
   es un enlace a la segunda capa. */
.ck__b--txt { grid-column: 1 / -1; background: none; border-color: transparent;
  color: var(--ck-suave); text-decoration: underline; text-underline-offset: 4px; }
.ck__b--txt:hover { background: none; border-color: transparent; color: var(--ck-tinta); }

@media (min-width: 861px) {
  .ck__caja { grid-template-columns: 1fr auto; }
  /* en escritorio: configurar a un lado y los dos de consentimiento con
     ancho idéntico fijado por la rejilla */
  .ck__bot { grid-template-columns: auto 150px 150px; align-items: center; }
  .ck__b--txt { grid-column: auto; }
}

/* ── Segunda capa: panel de configuración ── */
.ckp { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center;
  padding: clamp(14px,3vw,28px); }
.ckp[hidden] { display: none; }
.ckp__fondo { position: absolute; inset: 0; background: rgba(12,14,11,.5);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.ckp__caja { position: relative; width: min(620px,100%);
  max-height: min(86vh, 760px); overflow-y: auto;
  background: var(--ck-papel); color: var(--ck-tinta);
  border-radius: 8px; padding: clamp(22px,3.4vw,34px);
  box-shadow: 0 30px 70px -20px rgba(8,10,8,.5); }
.ckp__t { margin: 0 0 6px; font-size: 1.3rem; font-weight: 500; letter-spacing: -.02em; }

.ckp__cat { padding: 20px 0; border-bottom: 1px solid var(--ck-linea); }
.ckp__cat p { margin: 10px 0 0; font-size: .84rem; font-weight: 300; line-height: 1.7;
  color: #4a463c; }
.ckp__cabe { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ckp__cabe h3 { margin: 0; font-size: .98rem; font-weight: 500; letter-spacing: -.01em; }
.ckp__fijo { font-size: .58rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ck-suave);
  border: 1px solid var(--ck-linea); border-radius: 999px; padding: 6px 12px; }

/* conmutador */
.ckp__sw { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.ckp__sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ckp__pista { width: 46px; height: 26px; flex: none; border-radius: 999px;
  background: rgba(22,21,15,.2); position: relative;
  transition: background .3s cubic-bezier(.16,1,.3,1); }
.ckp__pista::after { content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(8,10,8,.3);
  transition: transform .3s cubic-bezier(.16,1,.3,1); }
.ckp__sw input:checked + .ckp__pista { background: #2f6b4f; }
.ckp__sw input:checked + .ckp__pista::after { transform: translateX(20px); }
.ckp__sw input:focus-visible + .ckp__pista { outline: 2px solid var(--ck-tinta); outline-offset: 3px; }
.ckp__et { font-size: .68rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ck-suave); }

.ckp__bot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px;
  justify-content: flex-end; align-items: center; }
.ckp__pie { margin: 16px 0 0; font-size: .72rem; font-weight: 300; color: var(--ck-suave); }
.ckp__pie a { color: inherit; }

body.ck-abierto { overflow: hidden; }

/* botón de la política de cookies para reabrir el panel */
.legal__boton { min-height: 46px; padding: 12px 22px; cursor: pointer;
  border: 1px solid #16150f; border-radius: 999px; background: #16150f; color: #fff;
  font-family: "Poppins", system-ui, sans-serif; font-size: .68rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; }
.legal__boton:hover { background: #2c2a20; }

/* tabla de la política de cookies */
.legal__tabla { width: 100%; border-collapse: collapse; margin: 18px 0;
  font-size: .82rem; font-weight: 300; }
.legal__tabla th, .legal__tabla td { text-align: left; vertical-align: top;
  padding: 11px 12px; border-bottom: 1px solid rgba(22,21,15,.14); }
.legal__tabla th { font-weight: 600; font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(22,21,15,.6); }
.legal__tabla code { font-size: .92em; }
/* en móvil la tabla se desplaza en su propia caja, nunca ensancha la página */
@media (max-width: 640px) {
  .legal__tabla { display: block; overflow-x: auto; white-space: nowrap; }
  .legal__tabla td { white-space: normal; min-width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .ck.is-on { animation: none; }
  .ck__b, .ckp__pista, .ckp__pista::after { transition: none; }
}