/* ============================================================
   NACKLY STUDIO — banner de cookies
   Archivo aparte porque lo cargan TODAS las páginas, incluida la
   landing, que por lo demás tiene sus propios estilos.
   Los botones usan .nk-btn, que ya existe en las dos partes.
   ============================================================ */
/* ============================================================
   BANNER DE COOKIES
   Abajo a la izquierda para no chocar con el botón de WhatsApp.
   Sale con retardo para no tapar el hero nada más entrar.
   ============================================================ */
.nk-cookie{position:fixed;left:20px;bottom:20px;z-index:120;width:min(440px,calc(100vw - 40px));
  background:var(--ink-800);border:1px solid var(--border-subtle);border-radius:20px;
  padding:26px 26px 24px;box-shadow:0 24px 60px rgba(0,0,0,.55);
  opacity:0;transform:translateY(20px) scale(.97);pointer-events:none;
  transition:opacity .35s linear,transform .45s var(--ease-spring)}
.nk-cookie.is-open{opacity:1;transform:none;pointer-events:auto}
.nk-cookie h2{font-family:'Futura PT',sans-serif;font-weight:800;font-style:italic;
  text-transform:uppercase;font-size:22px;line-height:1;margin:0 0 10px;color:var(--bone)}
.nk-cookie p{margin:0 0 18px;font-size:15px;line-height:1.55;color:rgba(237,233,224,.75)}
.nk-cookie p a{color:var(--mint-400);text-decoration:underline;text-underline-offset:2px}
.nk-cookie__actions{display:flex;gap:10px;flex-wrap:wrap}
.nk-cookie__actions .nk-btn{flex:1 1 auto;padding:13px 20px;font-size:14px}
/* El botón de guardar solo aparece con el panel de detalle abierto */
/* Ver también, al final del archivo, la regla que lo oculta:
   tiene que ir después de los estilos de .nk-btn para poder ganarles. */
.nk-cookie.is-detail .nk-cookie__save{flex-basis:100%}

.nk-cookie__link{background:none;border:0;padding:0;margin:14px 0 0;cursor:pointer;
  font:inherit;font-size:13px;color:rgba(237,233,224,.55);text-decoration:underline;
  text-underline-offset:3px}
.nk-cookie__link:hover{color:var(--mint-400)}

/* Panel de ajuste fino */
.nk-cookie__panel{display:none;margin:4px 0 18px;border-top:1px solid var(--border-subtle);
  padding-top:16px}
.nk-cookie.is-detail .nk-cookie__panel{display:block}
.nk-cookie__row{display:flex;gap:14px;align-items:flex-start;padding:12px 0;
  border-bottom:1px solid var(--border-subtle)}
.nk-cookie__row:last-child{border-bottom:0}
.nk-cookie__row h3{margin:0 0 3px;font-size:15px;font-weight:700;color:var(--bone)}
.nk-cookie__row p{margin:0;font-size:13px;line-height:1.5}
.nk-cookie__fixed{flex-shrink:0;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mint-400);padding-top:3px}

/* Interruptor */
.nk-switch{flex-shrink:0;position:relative;width:48px;height:28px;margin-top:1px}
.nk-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;
  cursor:pointer;z-index:2}
.nk-switch span{position:absolute;inset:0;border-radius:999px;background:rgba(237,233,224,.2);
  transition:background .22s linear;pointer-events:none}
.nk-switch span::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;
  border-radius:50%;background:var(--bone);transition:transform .26s var(--ease-spring)}
.nk-switch input:checked + span{background:var(--mint-600)}
.nk-switch input:checked + span::after{transform:translateX(20px)}
.nk-switch input:focus-visible + span{outline:3px solid var(--mint-400);outline-offset:3px}

/* Botón para reabrir los ajustes desde el pie */
/* El :not(.nk-btn) importa: en el pie este botón va como un enlace más
   de la fila legal, pero en la página de cookies el mismo botón lleva
   .nk-btn--mint y ahí tiene que verse como un botón de verdad. */
.nk-cookie-reopen:not(.nk-btn){background:none;border:0;padding:0 11px;cursor:pointer;font:inherit;
  font-size:14px;color:rgba(237,233,224,.65);display:inline-flex;align-items:center;
  min-height:44px}
.nk-cookie-reopen:not(.nk-btn):hover{color:var(--mint-400)}

/* ---------- Responsive ---------- */
@media(max-width:640px){
  /* A lo ancho de la pantalla: en un móvil un banner flotante
     estrecho se queda sin sitio para los dos botones. */
  .nk-cookie{left:12px;right:12px;bottom:12px;width:auto;padding:22px 20px 20px}
  .nk-cookie__actions{flex-direction:column}
  .nk-cookie__actions .nk-btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .nk-cookie{transition-duration:.01ms}
}

/* ---------- Botones del banner ----------
   Se pintan aquí enteros, sin heredar de la página. Este banner se
   inyecta tanto en la landing como en las legales, que tienen hojas
   distintas, y además un <button> trae fondo y borde propios del
   navegador que hay que anular a mano. */
.nk-cookie .nk-btn{
  appearance:none;-webkit-appearance:none;border:0;background:none;
  font:inherit;font-weight:700;font-size:14px;line-height:1.2;
  padding:13px 20px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-align:center;flex:1 1 auto;
  transition:background .18s linear,color .18s linear,
             border-color .18s linear,box-shadow .18s linear}
.nk-cookie .nk-btn--primary{background:#e6007e;color:#fff}
.nk-cookie .nk-btn--primary:hover{background:#c40069;box-shadow:0 0 28px rgba(230,0,126,.45)}
.nk-cookie .nk-btn--ghost{background:transparent;border:2px solid rgba(237,233,224,.5);color:#ede9e0}
.nk-cookie .nk-btn--ghost:hover{border-color:#ede9e0;background:rgba(237,233,224,.08)}
.nk-cookie .nk-btn--mint{background:linear-gradient(135deg,#55f9ba,#31c488);color:#232323}
.nk-cookie .nk-btn--mint:hover{box-shadow:0 0 28px rgba(85,249,186,.4)}

/* "Guardar mi elección" solo tiene sentido con los interruptores a la
   vista. Va al final y con :not() para ganar en especificidad a las
   reglas de .nk-btn de arriba, que ponen display:inline-flex. */
.nk-cookie:not(.is-detail) .nk-cookie__save{display:none}