/* =============================================================================
   JAKËLI CSS — PERLA ONLY (NO NIGHT MODE)
   Responsive · Safe Areas · Onboarding · UI Kit
   ========================================================================== */

/* ---------- Variables base ---------- */
:root{
  /* Brand */
  --cherry:#9E1234;
  --cherryDeep:#5A0A18;
  --gold:#C3A36A;
  --gold2:#E6D1A3;
  --gold3:#8E7447;

  /* Palette */
  --pearl:#FAF7F2;
  --bone:#F3EEE7;
  --ink:#1C1B1B;
  --graphite:#4A4747;

  /* Status */
  --ok:#0a7a3e;
  --warn:#a86b00;
  --err:#b3261e;

  /* Layout */
  --tgt:44px;
  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:10px;

  --shadow:0 20px 44px rgba(0,0,0,.08);
  --shadow-soft:0 12px 28px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.06);
  --shadow-glow:0 10px 32px rgba(195,163,106,.25);

  --border:1px solid rgba(159,132,83,.60);
  --border-soft:1px solid rgba(159,132,83,.40);

  --glass:saturate(1.15) blur(10px);
  --focus-ring:0 0 0 3px rgba(195,163,106,.35);

  /* Typography */
  --font-ui:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --font-title:'Playfair Display',ui-serif,Georgia,serif;

  /* Widths */
  --w-max:1100px;
  --w-onboard:780px;
}

/* ---------- Reset ---------- */
*{ box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,.08); }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-ui);
  color:var(--ink);
  background:
    linear-gradient(160deg, rgba(207,186,151,.08), transparent 40%, rgba(158,18,52,.05) 90%),
    var(--pearl);
  background-size:200% 200%;
  animation:bg-pan 45s ease infinite;
  line-height:1.6;
}
html,body{ max-width:100%; overflow-x:hidden; }
img{ max-width:100%; display:block; }
button,input,select,textarea{ font-family:inherit; }
input,select,textarea{ font-size:16px; }
button:disabled{ opacity:.55; cursor:not-allowed; }
:focus{ outline:none; box-shadow:var(--focus-ring); }

/* ---------- Background grain ---------- */
@keyframes bg-pan{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
body::before{
  content:"";
  position:fixed;
  inset:-10vmax;
  pointer-events:none;
  z-index:-1;
  background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAJUlEQVRoQ+3IMQEAAAgDoC25/08qDW0g6MECIAiCIAiCIAiCIAiCIAhm4QAD3pBUoLS3cQAAAABJRU5ErkJggg==');
  opacity:.035;
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-10%,10%)}
}

/* ---------- Utilities ---------- */
.center{text-align:center}
.hidden{display:none!important}
.micro{font-size:12px;opacity:.75}
.muted{opacity:.75}

/* ---------- Header ---------- */
header{
  position:sticky;
  top:0;
  z-index:200;
  margin:10px;
  padding:12px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-radius:var(--radius-md);
  border:var(--border-soft);
  background:color-mix(in oklab, var(--bone) 60%, transparent);
  backdrop-filter:var(--glass);
  box-shadow:var(--shadow-soft);
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand .name{
  font-family:var(--font-title);
  font-weight:700;
  letter-spacing:.6px;
}

/* ---------- Badges & Buttons ---------- */
.badge{
  background:color-mix(in oklab, var(--bone) 75%, transparent);
  border:var(--border-soft);
  color:var(--graphite);
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
}

.btn{
  background:linear-gradient(96deg,var(--cherry),var(--cherryDeep));
  color:#fff;
  border:1px solid var(--cherryDeep);
  border-radius:var(--radius-md);
  min-height:var(--tgt);
  padding:.85rem 1.1rem;
  box-shadow:var(--shadow-glow);
  transition:transform .12s ease, filter .2s;
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.03); }
.btn:active{ transform:none; }

.ghost{
  background:color-mix(in oklab, var(--bone) 70%, transparent);
  border:var(--border-soft);
  border-radius:var(--radius-md);
  padding:.75rem 1rem;
}

/* ---------- Onboarding ---------- */
#onboarding{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:clamp(16px,4vw,28px);
  color:#fff;
  background:
    radial-gradient(1400px 780px at 20% 10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(1000px 680px at 80% 80%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg,var(--cherry) 0%, #2F0610 100%);

  /* ✅ FIX: crea un contexto de capas estable */
  isolation:isolate;
}
#onboarding.hidden{opacity:0;visibility:hidden;pointer-events:none}
#onboarding::before{
  content:"JAKËLI";
  position:absolute;
  inset:auto 0 8%;
  font-family:var(--font-title);
  font-size:clamp(3rem,18vw,9rem);
  letter-spacing:.6rem;
  color:rgba(255,255,255,.06);

  /* ✅ FIX: NO bloquear clicks/teclado en inputs */
  pointer-events:none;
  z-index:0;
}

/* ✅ Sparkles (no deben bloquear inputs) */
.sparkles,
#spark{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.sparkles i{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.75);
  filter:blur(.2px);
  animation:twinkle 6s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{ transform:translateY(0) scale(1); opacity:.25; }
  50%{ transform:translateY(-6px) scale(1.15); opacity:.65; }
}

/* ---------- Gates ---------- */
.gate{display:none}
.gate.active{display:block}

/* ✅ FIX: contenido por encima del watermark/sparkles */
.gate, .intro, .ritual-center{
  position:relative;
  z-index:1;
}

.intro{
  width:min(var(--w-onboard),92vw);
  margin:0 auto;
}
.ritual-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

/* ---------- Titles ---------- */
.intro h1{
  font-family:var(--font-title);
  font-size:clamp(2rem,6vw,3.6rem);
  background:linear-gradient(92deg,var(--gold3),var(--gold2),#fff,var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.goldline{
  width:min(560px,70vw);
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold2),transparent);
  margin:10px auto;
}

/* ---------- Text ---------- */
.manifesto{
  max-width:70ch;
  font-size:clamp(.92rem,2.6vw,1.02rem);
  opacity:.92;
}
.hint{ font-size:13px; opacity:.85; }

/* ---------- Inputs ---------- */
.input-ux{
  background:rgba(255,255,255,.08);
  border:none;
  border-bottom:2px solid rgba(255,255,255,.35);
  border-radius:6px;
  color:#fff;
  padding:12px 10px;
  width:min(760px,84vw);
  min-height:var(--tgt);
  transition:border .2s, box-shadow .2s;
}
.input-ux::placeholder{ color:rgba(255,255,255,.7); }
.input-ux:focus{
  border-bottom-color:var(--gold2);
  box-shadow:0 7px 24px rgba(226,198,146,.18);
}

/* ---------- Seed grid ---------- */
.seed-grid{
  width:min(760px,84vw);
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
@media (min-width:700px){
  .seed-grid{ grid-template-columns:repeat(3,1fr); }
  .seed-grid .input-ux{ width:100%; }
}

/* ---------- Sections ---------- */
.section{
  padding:clamp(2.2rem,6vw,4rem) 1.25rem;
}
.h1{
  font-family:var(--font-title);
  font-size:clamp(2rem,4.8vw,3.2rem);
}
.lead{
  max-width:820px;
  margin:0 auto;
  color:var(--graphite);
}

/* ---------- Cards ---------- */
.card{
  border-radius:var(--radius-lg);
  border:var(--border-soft);
  background:color-mix(in oklab, var(--bone) 88%, transparent);
  box-shadow:var(--shadow-soft);
  transition:transform .2s, box-shadow .2s;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 36px rgba(0,0,0,.16);
}
.card .img{
  height:clamp(220px,52dvh,420px);
  background:#ddd center/cover no-repeat;
}
.card .content{ padding:16px; }

/* ---------- Safe areas ---------- */
@supports(padding:max(0px)){
  header{ padding-top:calc(12px + env(safe-area-inset-top)); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  body,body::before{ animation:none; }
  .card:hover{ transform:none; }
}