/* ============================================================
   NACKLY STUDIO — estilos compartidos
   Los usan las páginas legales, el 404 y el banner de cookies.
   La landing tiene los suyos propios dentro del <helmet>, porque
   la gestiona el editor visual y no conviene sacárselos fuera.
   Los tokens de color y las fuentes vienen del design system
   (_ds/.../styles.css), que se carga antes que este archivo.
   ============================================================ */
:root{
  --mint-400:#55f9ba; --mint-600:#31c488; --magenta:#e6007e; --magenta-700:#c40069;
  --ink:#232323; --ink-800:#2e2e2e; --bone:#ede9e0; --white:#fff;
  --gradient-mint:linear-gradient(135deg,#55f9ba 0%,#31c488 100%);
  --border-subtle:rgba(237,233,224,.16);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.16,1,.3,1);
  --header-h:72px;
  --pad-x:clamp(20px,5vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:Inter,system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.6;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--mint-400);text-decoration:none}
a:hover{color:var(--magenta)}
::selection{background:var(--magenta);color:#fff}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--mint-400);outline-offset:3px;border-radius:6px}

.nk-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--mint-400);
  color:var(--ink);padding:14px 22px;font-weight:700;border-radius:0 0 12px 0}
.nk-skip:focus{left:0;color:var(--ink)}

.nk-wrap{max-width:1280px;margin:0 auto;padding:0 var(--pad-x)}

/* ---------- Tipografía de marca ---------- */
.nk-display{font-family:'Futura PT',sans-serif;font-weight:800;font-style:italic;
  text-transform:uppercase;line-height:.86;letter-spacing:-.01em;margin:0}
.nk-kicker{display:inline-block;font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:#ff8fc9}
.nk-mark-text{background:var(--gradient-mint);-webkit-background-clip:text;
  background-clip:text;color:transparent}

/* ---------- Botones ---------- */
.nk-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:999px;font-weight:700;cursor:pointer;text-align:center;border:0;
  font-family:inherit;font-size:15px;padding:14px 28px;
  transition:background .18s linear,box-shadow .18s linear,color .18s linear,
             border-color .18s linear,transform .18s var(--ease-spring)}
.nk-btn:active{transform:scale(.97)}
.nk-btn--primary{background:var(--magenta);color:#fff}
.nk-btn--primary:hover{background:var(--magenta-700);color:#fff;box-shadow:0 0 32px rgba(230,0,126,.5)}
.nk-btn--ghost{border:3px solid rgba(237,233,224,.7);color:var(--bone);background:transparent}
.nk-btn--ghost:hover{border-color:var(--magenta);color:var(--magenta);background:rgba(230,0,126,.08)}
.nk-btn--mint{background:var(--gradient-mint);color:var(--ink)}
.nk-btn--mint:hover{color:var(--ink);box-shadow:0 0 32px rgba(85,249,186,.4)}
.nk-btn .nk-arrow{transition:transform .25s var(--ease-spring);display:inline-block}
.nk-btn:hover .nk-arrow{transform:translateX(5px)}

/* ---------- Cabecera de las páginas internas ----------
   Aquí SÍ está siempre visible: en una página de texto largo el
   camino de vuelta tiene que estar a mano en todo momento. */
.nk-topbar{position:sticky;top:0;z-index:60;background:rgba(35,35,35,.86);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--border-subtle)}
.nk-topbar__inner{max-width:1280px;margin:0 auto;padding:0 var(--pad-x);height:var(--header-h);
  display:flex;align-items:center;gap:20px}
.nk-topbar__logo{display:flex;align-items:center;min-width:44px;min-height:44px}
.nk-topbar__logo img{width:34px;height:34px;object-fit:contain;display:block;
  transition:transform .3s var(--ease-spring)}
.nk-topbar__logo:hover img{transform:rotate(-8deg) scale(1.08)}
.nk-topbar__back{margin-left:auto;font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone);display:inline-flex;align-items:center;
  gap:8px;min-height:44px}
.nk-topbar__back:hover{color:var(--mint-400)}

/* ---------- Cabecera de página legal ---------- */
.nk-legal-hero{padding:clamp(48px,7vw,88px) 0 clamp(28px,4vw,44px);
  border-bottom:1px solid var(--border-subtle)}
.nk-legal-hero h1{font-family:'Futura PT',sans-serif;font-weight:800;font-style:italic;
  text-transform:uppercase;font-size:clamp(36px,6vw,76px);line-height:.88;
  margin:16px 0 0;color:var(--bone)}
.nk-updated{margin:20px 0 0;font-size:14px;color:rgba(237,233,224,.55)}

/* ---------- Cuerpo de texto legal ----------
   Medida de 68 caracteres: más ancho y el ojo se pierde al saltar de línea. */
.nk-legal{padding:clamp(36px,5vw,64px) 0 clamp(64px,8vw,110px)}
.nk-legal__body{max-width:68ch}
.nk-legal h2{font-family:'Futura PT',sans-serif;font-weight:800;font-style:italic;
  text-transform:uppercase;font-size:clamp(22px,2.6vw,30px);line-height:1;
  margin:52px 0 16px;color:var(--bone);scroll-margin-top:calc(var(--header-h) + 20px)}
.nk-legal h2:first-child{margin-top:0}
.nk-legal h3{font-family:Inter,system-ui,sans-serif;font-weight:700;font-size:18px;
  margin:28px 0 10px;color:var(--bone)}
.nk-legal p,.nk-legal li{color:rgba(237,233,224,.78);line-height:1.7}
.nk-legal p{margin:0 0 16px}
.nk-legal ul{margin:0 0 16px;padding:0;list-style:none}
.nk-legal ul li{position:relative;padding:6px 0 6px 24px}
.nk-legal ul li::before{content:"";position:absolute;left:2px;top:16px;width:6px;height:6px;
  border-radius:50%;background:var(--magenta)}
.nk-legal strong{color:var(--bone);font-weight:700}
.nk-legal a{text-decoration:underline;text-underline-offset:3px}

/* Dato pendiente de rellenar: se ve a la legua, a propósito */
.nk-todo{background:rgba(230,0,126,.16);border:1px dashed var(--magenta);
  color:#ff8fc9;padding:1px 8px;border-radius:5px;font-weight:700;
  font-size:.92em;white-space:nowrap}

/* Tabla de cookies */
.nk-table-wrap{overflow-x:auto;margin:0 0 24px;-webkit-overflow-scrolling:touch}
.nk-table{width:100%;border-collapse:collapse;font-size:15px;min-width:540px}
.nk-table th,.nk-table td{text-align:left;padding:14px 16px;
  border-bottom:1px solid var(--border-subtle);vertical-align:top}
.nk-table th{font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mint-400);border-bottom-color:rgba(85,249,186,.35)}
.nk-table td{color:rgba(237,233,224,.78)}
.nk-table tr:last-child td{border-bottom:0}

/* Índice lateral de la página legal */
.nk-toc{border:1px solid var(--border-subtle);border-radius:18px;padding:22px 24px;
  margin:0 0 44px;background:var(--ink-800)}
.nk-toc__title{font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(237,233,224,.5);margin:0 0 12px}
.nk-toc ol{margin:0;padding:0 0 0 20px;color:rgba(237,233,224,.55);font-size:15px}
.nk-toc li{margin:7px 0}
.nk-toc a{color:rgba(237,233,224,.78);text-decoration:none}
.nk-toc a:hover{color:var(--mint-400)}

/* ---------- Pie ---------- */
.nk-footer{position:relative;overflow:hidden;padding:clamp(48px,6vw,80px) 0 28px;
  border-top:1px solid var(--border-subtle)}
.nk-footer__pattern{position:absolute;inset:0;background-image:url(pattern-studio.webp);
  background-size:520px;opacity:.06;pointer-events:none}
.nk-footer__inner{position:relative;z-index:2}
.nk-footer__bottom{margin-top:36px;padding-top:12px;border-top:1px solid var(--border-subtle);
  display:flex;flex-wrap:wrap;gap:0 20px;align-items:center;justify-content:space-between;
  font-size:14px;color:rgba(237,233,224,.65)}
.nk-foot-links{display:flex;gap:8px;flex-wrap:wrap;margin:-11px}
.nk-foot-link{display:inline-flex;align-items:center;min-height:44px;padding:0 11px;
  color:rgba(237,233,224,.65);transition:color .18s linear}
.nk-foot-link:hover{color:var(--mint-400)}
.nk-foot-link[aria-current="page"]{color:var(--mint-400)}

/* El banner de cookies vive en nackly-cookie.css (lo comparten
   todas las páginas, la landing incluida). */

/* ============================================================
   PÁGINA 404
   ============================================================ */
.nk-404{min-height:calc(100dvh - var(--header-h));display:flex;align-items:center;
  position:relative;overflow:hidden;
  background-image:linear-gradient(rgba(35,35,35,.72),rgba(35,35,35,.8)),url(bg-leaves-web.webp);
  background-size:cover;background-position:center}
.nk-404__inner{position:relative;z-index:2;padding:clamp(56px,9vw,110px) 0}
.nk-404__code{font-family:'Futura PT',sans-serif;font-weight:800;font-style:italic;
  font-size:clamp(96px,22vw,260px);line-height:.8;margin:0;
  background:var(--gradient-mint);-webkit-background-clip:text;background-clip:text;
  color:transparent}
.nk-404__title{font-family:'Futura PT',sans-serif;font-weight:800;font-style:italic;
  text-transform:uppercase;font-size:clamp(30px,5vw,64px);line-height:.9;
  margin:14px 0 0;color:var(--bone)}
.nk-404__text{margin:22px 0 32px;max-width:46ch;font-size:18px;color:rgba(237,233,224,.78)}
.nk-404__actions{display:flex;gap:12px;flex-wrap:wrap}
.nk-404__monster{position:absolute;right:-40px;bottom:-30px;width:clamp(150px,24vw,380px);
  z-index:1;pointer-events:none;animation:nk-float 6.5s ease-in-out infinite}
@keyframes nk-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-16px) rotate(2deg)}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:640px){
  :root{--header-h:64px}
  body{font-size:16px}
  .nk-404__monster{width:200px;right:-50px;opacity:.5}
  .nk-404__actions .nk-btn{width:100%}
  .nk-footer__bottom{gap:0}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition-duration:.01ms!important}
}