/* Landing de Crimeoku — misma identidad que el juego: fondo de madera oscura, dorado, crema y rojo */
:root{
  --bg:#0f0b08;--bg2:#17110b;--panel:#241b13;--line:#4d3b27;
  --ink:#eee2c6;--muted:#a99878;--gold:#d6aa4f;--red:#c9392b;--paper:#e6d3a3;--paper-ink:#2a1d10;
  --fh:'Special Elite','Courier New',monospace;--fb:'Barlow',system-ui,sans-serif;--fc:'Barlow Condensed','Arial Narrow',sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;touch-action:pan-x pan-y}
body{touch-action:pan-x pan-y}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--fb);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:var(--gold)}
/* grano de papel: va en el fondo del body (con opacidad dentro del SVG). La capa fija a pantalla completa con mix-blend-mode impedía que la barra cubriera la zona de la cámara en iOS */
body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E")}

/* Barra superior */
/* La barra es 120px más alta y sube con top negativo: así su fondo también cubre la zona de la cámara/reloj, sin cambiar dónde se ven los botones */
.bar{position:fixed;top:-120px;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:132px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));
  background:linear-gradient(rgba(15,11,8,.92) 120px,rgba(15,11,8,0));pointer-events:none}
.bar>*{pointer-events:auto}
.home{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font:600 14px var(--fb);opacity:.85}
.home:hover{opacity:1}
.home img{background:#fff;border-radius:6px;padding:3px;width:24px;height:auto}
.lang{font:600 13px var(--fc);letter-spacing:.06em;color:var(--gold);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 8px;cursor:pointer}

/* Capas: .px recibe el desplazamiento de parallax (--py); el hijo .rv la animación de aparición */
.px{transform:translate3d(0,var(--py,0px),0);will-change:transform}
.rv{--p:1;--q:calc(1 - var(--p));opacity:var(--p);transform:translateY(calc(var(--q) * 42px))}
.rv.l{transform:translateX(calc(var(--q) * -70px))}
.rv.r{transform:translateX(calc(var(--q) * 70px))}
.rv.z{transform:scale(calc(.86 + .14 * var(--p)))}
.rv.up{transform:translateY(calc(var(--q) * 70px))}
.rv.drop{transform:translateY(calc(var(--q) * -50px)) rotate(calc(var(--q) * -12deg)) scale(calc(.8 + .2 * var(--p)))}

/* Teléfono */
.phone{width:min(300px,68vw);aspect-ratio:390/844;border-radius:44px;padding:9px;background:#090605;
  box-shadow:0 0 0 1.5px #3a2c1f,0 0 0 7px #0d0907,0 50px 90px -30px rgba(0,0,0,.9),0 0 120px -20px rgba(214,170,79,.18)}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:36px;background:#15100b}

/* Sprites flotantes */
.fl{position:absolute;z-index:3;pointer-events:none}
.fl img{width:100%;filter:drop-shadow(0 18px 18px rgba(0,0,0,.55))}

/* ---------- Portada ---------- */
.hero{position:relative;min-height:100svh;overflow:clip;display:flex;align-items:center;padding:96px 20px 140px;
  background:radial-gradient(120% 80% at 75% 35%,#2a1f14 0,var(--bg) 60%)}
.glow{position:absolute;inset:-10% -10% auto auto;width:80vw;height:80vw;max-width:900px;max-height:900px;border-radius:50%;
  background:radial-gradient(circle,rgba(214,170,79,.16),transparent 62%);pointer-events:none}
.hero-in{position:relative;width:100%;max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
.kick{font:700 13px var(--fc);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.logo{font:400 clamp(54px,11vw,118px)/.95 var(--fh);letter-spacing:.06em;color:var(--gold);margin:0;text-shadow:0 3px 0 #000}
.slogan{display:inline-block;font:400 clamp(20px,3vw,28px)/1.2 var(--fh);color:var(--ink);margin:18px 0 22px;padding-top:16px;border-top:3px solid var(--red)}
.lead{color:#cdbf9f;max-width:46ch;margin:0 0 30px;font-size:clamp(17px,2vw,19px)}
.hero-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:700 16px var(--fc);letter-spacing:.12em;text-transform:uppercase;padding:14px 24px;border-radius:10px}
.btn.gold{background:var(--gold);color:#1b1409;box-shadow:0 10px 30px -10px rgba(214,170,79,.6)}
.btn.gold:hover{background:#e3bb63}
.soon-dot{display:inline-flex;align-items:center;gap:8px;font:600 14px var(--fb);color:var(--muted)}
.soon-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(201,57,43,.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(201,57,43,0)}100%{box-shadow:0 0 0 0 rgba(201,57,43,0)}}
.hero-art{position:relative;display:grid;place-items:center;min-height:540px}
.hero-art>.px{grid-area:1/1}
.art{width:min(420px,84vw);border-radius:28px;transform-origin:center;opacity:.55;rotate:-9deg;translate:22% -6%;filter:saturate(.8)}
.art.in{opacity:.55}
.f1{width:96px;left:2%;top:4%}
.f2{width:110px;right:0;bottom:6%}
.f3{width:84px;left:-2%;bottom:14%}
.f4{width:80px;right:6%;top:0}
.tape-wrap{position:absolute;left:-5%;right:-5%;bottom:56px;z-index:4;pointer-events:none}
.tape{rotate:-3deg;background:#e8c43a;color:#16110a;border-block:3px solid #16110a;box-shadow:0 14px 30px -10px rgba(0,0,0,.7);overflow:hidden;white-space:nowrap}
.tape-run{display:inline-flex;animation:tape 40s linear infinite}
.tape-run span{font:700 22px/44px var(--fc);letter-spacing:.3em;padding-right:.3em}
@keyframes tape{to{transform:translateX(-50%)}}
@media (min-width:900px){
  .hero-in{grid-template-columns:1.05fr 1fr}
  .hero-art{min-height:640px}
}

/* ---------- Secciones ---------- */
.sec{position:relative;padding:110px 20px;overflow:clip;background:var(--bg)}
.sec.dark{background:linear-gradient(var(--bg2),#120d09)}
.sec::before{content:"";position:absolute;left:50%;top:0;width:min(1080px,90%);height:1px;translate:-50% 0;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.split{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:56px;align-items:center}
.num{font:700 13px var(--fc);letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin:0 0 12px}
h2{font:400 clamp(32px,5vw,52px)/1.08 var(--fh);color:var(--gold);margin:0 0 18px;letter-spacing:.01em}
.copy p,.center-copy p{color:#cdbf9f;max-width:48ch;margin:0}
.visual{position:relative;display:grid;place-items:center;min-height:560px}
.visual>.px{grid-area:1/1}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr;gap:80px}
  .split.rev .copy{order:2}
}
.f5{width:110px;left:4%;top:8%}
.f6{width:86px;right:6%;bottom:10%}
.f7{width:96px;right:4%;top:10%}
.f8{width:100px;left:2%;bottom:6%}

/* Pared de evidencias (tableros de distintos escenarios) */
.board-wall{position:relative;max-width:1120px;margin:90px auto 0;display:grid;grid-template-columns:repeat(2,1fr);gap:34px 22px;padding:0 4px}
.thread{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
/* hilo de lana roja: pathLength=1 para animar el trazo */
/* hilo de lana roja: pathLength=1; --t1..--t3 (0→1) los escribe landing.js según el scroll */
.thread path{fill:none;stroke:#c9392b;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;filter:drop-shadow(0 2px 1.5px rgba(0,0,0,.55))}
.thread path:nth-child(1){stroke-dashoffset:calc(1 - var(--t1,1))}.thread path:nth-child(2){stroke-dashoffset:calc(1 - var(--t2,1))}.thread path:nth-child(3){stroke-dashoffset:calc(1 - var(--t3,1))}
/* chinche roja clavada en el corcho: cabeza redonda con brillo, sombra y aguja */
.pin{position:absolute;left:50%;top:-9px;width:20px;height:20px;translate:-50% 0;z-index:3;border-radius:50%;background:radial-gradient(circle at 34% 30%,#ffd3c9 0 8%,#ff6a55 22%,#d02a1b 55%,#7d1209 100%);box-shadow:inset -2px -3px 4px rgba(60,0,0,.55),3px 5px 5px rgba(0,0,0,.55)}
.pin::before{content:"";position:absolute;inset:5px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#e8442f,#9c1a0f);box-shadow:0 0 0 1px rgba(80,0,0,.35)}
.pin::after{content:"";position:absolute;left:34%;top:18%;width:26%;height:20%;border-radius:50%;background:rgba(255,255,255,.75);rotate:-30deg}
.polaroid{margin:0;position:relative;z-index:1}
.polaroid>div{background:#efe6d2;padding:10px 10px 0;border-radius:3px;box-shadow:0 24px 40px -18px rgba(0,0,0,.9)}
.polaroid img{width:100%;aspect-ratio:1;object-fit:cover;background:#1d150e}
.polaroid figcaption{font:400 17px/44px var(--fh);color:#3a2a19;text-align:center}
.p1>div{rotate:-4deg}.p2>div{rotate:3deg}.p3>div{rotate:-2deg}.p4>div{rotate:4deg}
.polaroid>div.rv.drop{transform:translateY(calc(var(--q) * -70px)) rotate(calc(var(--q) * 10deg)) scale(calc(.9 + .1 * var(--p)))}
@media (min-width:900px){.board-wall{grid-template-columns:repeat(4,1fr);gap:28px}}

/* Sospechosos: carpeta y cards */
.notes{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:12px}
.notes li{display:flex;align-items:center;gap:14px;font:500 16px var(--fb);color:var(--ink)}
.notes b{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line)}
.notes .ini{font:700 18px var(--fc);color:#1b1409;background:#7fb0e6;border-radius:50%;border:0}
.notes .ex{font:700 20px var(--fb);color:var(--ink)}
.notes .hold{position:relative}
.notes .hold::after{content:"";width:18px;height:18px;border-radius:50%;border:3px solid var(--gold);border-right-color:transparent;animation:spin 1.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.folder-wrap{min-height:700px}
.folder{grid-area:1/1;width:min(420px,88vw);aspect-ratio:4/5;background:linear-gradient(160deg,#e9d6a6,#cdb47c);border-radius:6px 14px 14px 14px;position:relative;rotate:-4deg;
  box-shadow:inset 0 0 60px rgba(120,80,30,.35),0 40px 70px -30px rgba(0,0,0,.9)}
.folder.in{rotate:-4deg}
.folder-tab{position:absolute;left:18px;top:-30px;height:32px;padding:0 18px;border-radius:10px 10px 0 0;background:#e3cf9c;font:400 15px/34px var(--fh);color:#5a4022;letter-spacing:.08em}
.cardx{width:250px;z-index:2}
.cardx img{width:100%;filter:drop-shadow(0 22px 26px rgba(0,0,0,.6))}
.c1{translate:-53% -56%;rotate:-5deg}
.c2{translate:53% -44%;rotate:4deg}
.c3{translate:-53% 52%;rotate:-2deg}
.c4{translate:53% 62%;rotate:5deg}
@media (max-width:899px){
  .folder-wrap{display:flex;flex-direction:column;align-items:center;min-height:0;padding:10px 0 20px}
  .folder{display:none}
  .cardx{width:min(320px,84vw);margin-top:-14px}
  .cardx.c1{margin-top:0}
  .c1,.c3{translate:-5% 0}
  .c2,.c4{translate:5% 0}
}

/* Razonamiento */
.bulb-glow{width:min(520px,90vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(232,194,90,.28),transparent 60%);pointer-events:none}

/* Niveles */
.center-copy{max-width:760px;margin:0 auto;text-align:center}
.center-copy p{margin:0 auto}
.levels{position:relative;z-index:2;max-width:860px;margin:56px auto 0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.lv{position:relative;background:linear-gradient(#efdcae,#e1c98f);color:var(--paper-ink);border-radius:4px 10px 10px 10px;padding:16px 16px 14px 22px;box-shadow:0 14px 26px -14px rgba(0,0,0,.9);border-left:7px solid var(--lc)}
.lv::before{content:"";position:absolute;right:14px;top:-9px;width:46px;height:12px;border-radius:6px 6px 0 0;background:#e9d4a0}
.lv b{display:block;font:400 clamp(20px,2.6vw,25px)/1.15 var(--fh)}
.lv small{font:600 13px var(--fb);color:#6b5434}
@media (min-width:760px){.levels{grid-template-columns:repeat(3,1fr)}}
.f9{width:110px;left:3%;top:14%}
.f10{width:120px;right:3%;top:20%}
.f11{width:84px;right:5%;bottom:4%}
@media (max-width:899px){
  .f9,.f10{width:64px;top:auto;bottom:26px}
  .f9{left:6%}.f10{right:6%}
  .f11{display:none}
  #levels{padding-bottom:130px}
}

/* Veredicto: sello */
.verdict{position:relative;width:min(520px,92vw);margin:56px auto 0;border-radius:10px;overflow:hidden;border:3px solid #6f8f4e;box-shadow:0 40px 80px -30px rgba(0,0,0,.95)}
.verdict{--vg:1;--vs:1;--vso:1;--vk:1;translate:var(--shx,0px) var(--shy,0px)}
.vboard{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(var(--vg)) brightness(calc(1 - .45 * var(--vg)))}
/* Todo el veredicto avanza (y retrocede) con el scroll: gris → sello → sacudón → nombre */
.killer{position:absolute;left:50%;top:9%;translate:-50% 0;text-align:center;background:rgba(18,13,9,.82);border:1px solid #6b5536;padding:8px 22px 6px;opacity:var(--vk);transform:translateY(calc((1 - var(--vk)) * -14px));white-space:nowrap}
.killer small{display:block;font:400 clamp(12px,2.4vw,16px) var(--fh);letter-spacing:.18em;text-transform:uppercase;color:#e9dcc0}
.killer b{font:400 clamp(28px,6vw,46px)/1.1 var(--fh);color:#f3e7cb}
.stamp{position:absolute;left:50%;top:52%;translate:-50% -50%;rotate:-14deg;opacity:var(--vso);transform:scale(var(--vs));pointer-events:none}
.stamp span{display:block;font:700 clamp(40px,10vw,78px)/1 var(--fc);letter-spacing:.06em;color:#d8382b;border:clamp(5px,1.1vw,8px) solid #d8382b;padding:.08em .22em .02em;border-radius:6px;background:rgba(216,56,43,.06);white-space:nowrap}

/* Características */
.feats{max-width:1080px;margin:50px auto 0;display:grid;grid-template-columns:1fr;gap:16px}
.feat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px}
.feat svg{width:30px;height:30px;fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px}
.feat h3{font:700 20px var(--fc);letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px;color:var(--ink)}
.feat p{margin:0;color:var(--muted);font-size:15.5px}
@media (min-width:640px){.feats{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.feats{grid-template-columns:repeat(4,1fr)}}

/* Descarga */
.cta{position:relative;overflow:clip;padding:130px 20px 150px;text-align:center;background:#0b0806}
.cta-bg{position:absolute;inset:-25% 0;background:url(img/banner-bg.webp) center/cover;opacity:.35;filter:blur(2px)}
.cta::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 50%,transparent,#0b0806 85%);pointer-events:none}
.cta-in{position:relative;z-index:2;max-width:720px;margin:0 auto}
.cta-icon{width:112px;height:112px;border-radius:26px;margin:0 auto 26px;box-shadow:0 20px 50px -10px rgba(0,0,0,.9),0 0 0 1px #3a2c1f}
.cta p{color:#cdbf9f}
.stores{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:34px}
.store{display:inline-flex;align-items:center;gap:12px;min-width:210px;padding:12px 22px;border-radius:12px;background:#000;border:1px solid #5a4630;color:var(--ink);text-align:left;cursor:default}
.store svg{width:26px;height:26px;fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linejoin:round}
.store small{display:block;font:700 11px var(--fc);letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.store b{display:block;font:600 20px/1.15 var(--fb)}

/* Pie */
.foot{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;align-items:center;padding:30px max(20px,env(safe-area-inset-left)) 40px;border-top:1px solid var(--line);background:#0b0806;color:var(--muted);font-size:14px}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}

/* Sin animaciones si el sistema lo pide */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .px{transform:none!important}
  .rv{opacity:1!important;transform:none!important;transition:none!important}
  .tape-run,.soon-dot::before,.notes .hold::after{animation:none}
  .thread path{stroke-dashoffset:0!important}
}