/* ══════════════════════════════════════════════════════════════
   WOBBLEDASH STUDIOS — Design System
   Wobble (comedia física, goma, calidez) + Fright (terror, frío, tensión)
   ══════════════════════════════════════════════════════════════ */

:root{
  /* — Fondo — */
  --void:        #0A0910;   /* negro violeta profundo, fondo base */
  --void-2:      #100E19;   /* panel / secciones alternas */
  --void-3:      #17141F;   /* cards */
  --void-line:   rgba(243,239,231,0.08);

  /* — Wobble (comedia, goma, calidez) — */
  --wobble:      #FF5C39;   /* Squish Orange — signature juego 1 */
  --wobble-2:    #FFB199;   /* Squish Orange claro — hover/glow */
  --wobble-deep: #C23D1E;   /* Squish Orange oscuro — pressed */

  /* — Fright (terror, tensión, frío) — */
  --fright:      #7C6CFF;   /* Dread Violet — signature juego 2 */
  --fright-2:    #B7ACFF;   /* Dread Violet claro */
  --fright-deep: #2C2350;   /* Dread Violet oscuro — sombras/glow */

  /* — Texto — */
  --bone:        #F3EFE7;   /* blanco hueso/papel, texto principal */
  --mist:        #9994A6;   /* gris violeta, texto secundario */
  --mist-2:      #635D75;   /* gris violeta oscuro, texto terciario */

  /* — Semánticos — */
  --ok:          #4ADE80;
  --warn:        #FFC857;

  /* — Tipografía — */
  --f-display: 'Unbounded', sans-serif;
  --f-body:    'Manrope', sans-serif;
  --f-mono:    'JetBrains Mono', monospace;

  /* — Layout — */
  --max-w: 1280px;
  --pad: clamp(20px, 6vw, 80px);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:auto; }
body{
  background:var(--void);
  color:var(--bone);
  font-family:var(--f-body);
  font-weight:400;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; }
::selection{ background:var(--wobble); color:var(--void); }

/* Cursor personalizado — solo en dispositivos con puntero fino */
@media (pointer:fine){
  body.has-cursor{ cursor:none; }
  body.has-cursor a, body.has-cursor button{ cursor:none; }
}
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:10000;
  border-radius:50%; transform:translate(-50%,-50%);
}
.cursor-dot{ width:7px; height:7px; background:var(--wobble); transition:opacity .2s, background .3s; }
.cursor-ring{
  width:34px; height:34px; border:1px solid rgba(243,239,231,.35);
  transition:width .35s cubic-bezier(.16,1,.3,1), height .35s cubic-bezier(.16,1,.3,1), border-color .3s, background .3s;
}
body.cursor-hover .cursor-ring{ width:56px; height:56px; border-color:var(--wobble); background:rgba(255,92,57,.08); }
body.cursor-fright .cursor-ring{ border-color:var(--fright); background:rgba(124,108,255,.1); }
body.cursor-fright .cursor-dot{ background:var(--fright); }

/* — Reduced motion — respeto total */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ── Utilidades de layout ─────────────────────────────────────── */
.wrap{ max-width:var(--max-w); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.section{ padding:clamp(64px,10vw,140px) 0; position:relative; }
.section-alt{ background:var(--void-2); }
.center{ text-align:center; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:12px; font-weight:500;
  letter-spacing:3px; text-transform:uppercase; color:var(--wobble);
  margin-bottom:20px;
}
.eyebrow.is-fright{ color:var(--fright-2); }
.eyebrow::before{ content:''; width:8px; height:8px; border-radius:2px; background:currentColor; transform:rotate(45deg); flex-shrink:0; }

.h2{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(32px,5vw,58px); line-height:1.08; letter-spacing:-.5px;
  text-wrap:balance;
}
.lede{
  font-size:clamp(15px,1.6vw,18px); color:var(--mist); max-width:640px;
  line-height:1.8; text-wrap:pretty;
}
.lede.center{ margin-left:auto; margin-right:auto; }

/* ── Botones ───────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 30px; border-radius:100px;
  font-family:var(--f-body); font-weight:700; font-size:15px;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, border-color .25s, background .25s;
}
.btn-wobble{ background:var(--wobble); color:var(--void); }
.btn-wobble:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 16px 40px rgba(255,92,57,.35); }
.btn-ghost{ background:transparent; color:var(--bone); border-color:var(--void-line); }
.btn-ghost:hover{ border-color:var(--bone); transform:translateY(-3px); }
.btn-fright{ background:var(--fright); color:var(--void); }
.btn-fright:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 16px 40px rgba(124,108,255,.35); }

/* ── Nav ──────────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding:18px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:linear-gradient(to bottom, rgba(10,9,16,.85), rgba(10,9,16,0));
  backdrop-filter:blur(6px);
  transition:background .3s, border-color .3s, padding .3s;
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{ background:rgba(10,9,16,.88); border-color:var(--void-line); padding-top:12px; padding-bottom:12px; }
.nav-logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; min-height:44px; }
.nav-logo svg{ width:34px; height:34px; flex-shrink:0; }
.nav-wordmark{ font-family:var(--f-display); font-weight:700; font-size:15px; letter-spacing:.5px; }
.nav-wordmark .w-wob{ color:var(--wobble); }
.nav-wordmark .w-fri{ color:var(--fright-2); }
.nav-links{ display:flex; align-items:center; gap:clamp(14px,2.4vw,34px); }
.nav-links a{
  font-family:var(--f-mono); font-size:12px; letter-spacing:1px; text-transform:uppercase;
  color:var(--mist); transition:color .25s; padding:6px 2px;
  display:inline-flex; align-items:center; min-height:44px;
}
.nav-links a:hover{ color:var(--bone); }
.nav-cta{ display:none; }
@media (min-width:900px){ .nav-cta{ display:inline-flex; padding:11px 22px; min-height:44px; font-size:13px; } }
.nav-burger{
  display:flex; flex-direction:column; gap:5px; width:44px; height:44px;
  align-items:center; justify-content:center; background:none; border:none; cursor:pointer;
}
.nav-burger span{ width:20px; height:2px; background:var(--bone); border-radius:2px; transition:transform .3s, opacity .3s; }
@media (min-width:900px){ .nav-burger{ display:none; } }
.nav-links{ display:none; }
@media (min-width:900px){ .nav-links{ display:flex; } }

.nav-mobile{
  position:fixed; inset:0; z-index:899; background:var(--void);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  transform:translateY(-100%); transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.nav-mobile.is-open{ transform:translateY(0); }
.nav-mobile a{ font-family:var(--f-display); font-weight:700; font-size:28px; color:var(--bone); }

/* ── Footer ───────────────────────────────────────────────────── */
.footer{
  background:var(--void); border-top:1px solid var(--void-line);
  padding:56px var(--pad) 32px;
}
.footer-grid{
  max-width:var(--max-w); margin:0 auto;
  display:grid; gap:40px; grid-template-columns:1.4fr 1fr 1fr;
}
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:32px; } }
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-brand svg{ width:30px; height:30px; }
.footer-tag{ color:var(--mist); font-size:14px; max-width:340px; line-height:1.7; }
.footer h4{ font-family:var(--f-mono); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--mist-2); margin-bottom:16px; }
.footer-links{ display:flex; flex-direction:column; gap:2px; }
.footer-links a{ color:var(--mist); font-size:14px; transition:color .2s; display:inline-flex; align-items:center; min-height:44px; }
.footer-links a:hover{ color:var(--wobble); }
.footer-bottom{
  max-width:var(--max-w); margin:44px auto 0; padding-top:24px; border-top:1px solid var(--void-line);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  font-family:var(--f-mono); font-size:12px; color:var(--mist-2); letter-spacing:.5px;
}

/* ── Cookie banner (RGPD) ────────────────────────────────────── */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:9999;
  max-width:920px; margin:0 auto;
  background:var(--void-3); border:1px solid var(--void-line); border-radius:var(--radius-md);
  padding:22px clamp(18px,3vw,28px);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  display:flex; flex-wrap:wrap; align-items:center; gap:20px;
  transform:translateY(140%); transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.cookie-banner.is-visible{ transform:translateY(0); }
.cookie-banner p{ flex:1 1 320px; font-size:13.5px; color:var(--mist); line-height:1.6; }
.cookie-banner p a{ color:var(--wobble-2); text-decoration:underline; display:inline-block; padding:10px 0; margin:-10px 0; }
.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cookie-actions button{
  font-family:var(--f-body); font-weight:700; font-size:12.5px; letter-spacing:.3px;
  padding:11px 18px; border-radius:100px; cursor:pointer; min-height:44px; border:1px solid transparent;
}
.cookie-accept{ background:var(--wobble); color:var(--void); }
.cookie-reject{ background:transparent; color:var(--mist); border-color:var(--void-line); }
.cookie-reject:hover{ color:var(--bone); border-color:var(--bone); }

/* ── Contenido legal (privacidad / cookies) ─────────────────── */
.legal{ padding:140px 0 100px; }
.legal .wrap{ max-width:760px; }
.legal h1{ font-family:var(--f-display); font-weight:700; font-size:clamp(30px,5vw,46px); margin-bottom:10px; }
.legal .updated{ font-family:var(--f-mono); font-size:12px; color:var(--mist-2); margin-bottom:44px; }
.legal h2{ font-family:var(--f-display); font-weight:700; font-size:22px; margin:40px 0 14px; color:var(--wobble-2); }
.legal p, .legal li{ color:var(--mist); font-size:15px; line-height:1.85; margin-bottom:14px; }
.legal ul{ padding-left:20px; list-style:disc; }
.legal a{ color:var(--fright-2); text-decoration:underline; }
.legal strong{ color:var(--bone); }

/* ── Focus visible accesible ─────────────────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--wobble); outline-offset:3px;
}