@font-face { font-family:'PPMori'; src:url('/wp-content/uploads/2026/06/PPMori-Regular.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'PPMori'; src:url('/wp-content/uploads/2026/06/PPMori-SemiBold.woff') format('woff'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'PPMori'; src:url('/wp-content/uploads/2026/06/PPMori-Extralight.woff') format('woff'); font-weight:200; font-style:normal; font-display:swap; }

#js{--m:#FF00FF;--a:#00FFAA;--line:rgba(255,255,255,.12);--dim:rgba(255,255,255,.68);--px:clamp(24px,6vw,100px)}
#js{display:block;font-family:'PPMori',-apple-system,BlinkMacSystemFont,sans-serif;font-size:16px;font-weight:400;line-height:1.5;color:#fff;background:#000;overflow-x:hidden;text-align:left;width:100vw;position:relative;left:50%;margin-left:-50vw;padding:0;-webkit-font-smoothing:antialiased}
#js *,#js *::before,#js *::after{box-sizing:border-box;font-family:'PPMori',-apple-system,BlinkMacSystemFont,sans-serif;font-style:normal;text-align:left}
#js h1,#js h2,#js h3{margin:0;padding:0;font-weight:600;line-height:1.05;letter-spacing:-.03em;color:#fff;text-align:left}
#js p{margin:0;padding:0;font-weight:400;text-align:left}
#js a{text-decoration:none;color:inherit}
#js ul{list-style:none;margin:0;padding:0}

/* HERO */
#js .js-hero{position:relative;width:100%;height:100vh;overflow:hidden;background:#000}
#js .js-hero__vwrap{position:absolute;inset:0;pointer-events:none;z-index:0}
#js .js-hero__vwrap iframe{position:absolute;top:50%;left:50%;width:max(100vw,177.78vh);height:max(56.25vw,100vh);transform:translate(-50%,-50%);border:none;pointer-events:none}
#js .js-hero__ov{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.2) 0%,rgba(0,0,0,.05) 40%,rgba(0,0,0,.55) 75%,rgba(0,0,0,.95) 100%);z-index:1}
#js .js-hero__cnt{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--px) clamp(64px,9vh,96px)}
#js .js-hero__h1{font-size:clamp(40px,7vw,100px);font-weight:600;line-height:1;letter-spacing:-.04em;color:#fff;max-width:16ch}
#js .js-hero__sub{margin-top:clamp(20px,3vh,32px);font-size:clamp(15px,1.3vw,18px);font-weight:400;line-height:1.62;color:rgba(255,255,255,.78);max-width:52ch}

/* INTRO */
#js .js-intro{padding:clamp(72px,10vh,120px) var(--px);background:#000;border-bottom:1px solid var(--line)}
#js .js-intro__q{font-size:clamp(24px,3.5vw,50px);font-weight:600;letter-spacing:-.035em;line-height:1.12;color:rgba(255,255,255,.35);max-width:26ch}
#js .js-cm{color:#fff}
#js .js-ca{color:var(--a)}

/* TICKER */
#js .js-ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;background:#000;white-space:nowrap}
#js .js-ticker__track{display:inline-flex;align-items:center;animation:js-tick 32s linear infinite}
#js .js-ticker__i{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.32);padding:0 32px;white-space:nowrap}
#js .js-ticker__dot{color:var(--a);font-size:8px;flex-shrink:0}
@keyframes js-tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ══════════════════════════════════════
   VINYL SECTION
   ══════════════════════════════════════ */
#js .js-vsec{position:relative;background:#000;border-top:1px solid var(--line)}
#js .js-vsticky{position:absolute;top:0;left:0;right:0;height:100vh;overflow:hidden;background:#000}
#js .js-vcanvas{position:absolute;inset:0;pointer-events:none}

/* Degradado de color — debajo de TODO, cubre pantalla completa */
#js .js-glow-bg{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    transition:background .5s ease;
}

/* Panel derecho — solo items, debajo del disco */
#js .js-panel{
    position:absolute;
    right:0; top:0; bottom:0;
    /* left calculado para que el texto quede claramente a la derecha del disco */
    left:52%;
    z-index:2;
    display:flex;
    align-items:center;
    pointer-events:none;
    overflow:hidden;
    transition:opacity .15s;
}
#js .js-panel__inner{
    padding:0 clamp(24px,3vw,56px);
    width:100%;
}
#js .js-panel__items{display:flex;flex-direction:column;gap:0}
#js .js-panel__item{
    display:flex;align-items:flex-start;gap:14px;
    padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,.09);
}
#js .js-panel__item:first-child{border-top:1px solid rgba(255,255,255,.09)}
#js .js-panel__item-dot{
    width:6px;height:6px;border-radius:50%;
    flex-shrink:0;margin-top:6px;
    transition:background .3s;
}
#js .js-panel__item-title{
    font-size:14px;font-weight:600;color:#fff;
    display:block;margin-bottom:3px;letter-spacing:-.01em;
}
#js .js-panel__item-desc{
    font-size:12px;font-weight:400;
    color:rgba(255,255,255,.52);line-height:1.55;display:block;
}

/* Canvas SVG — encima del glow y del panel */
#js .js-vcanvas{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:3;
}

/* Bloques girando — encima del disco */
#js-svc-blocks{position:absolute;inset:0;pointer-events:none;z-index:4}
#js .js-sblock{position:absolute;pointer-events:none;will-change:transform;transition:opacity .3s}
#js .js-sblock__inner{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:clamp(180px,20vw,280px)}
#js .js-sblock__icon{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);flex-shrink:0;margin-bottom:4px}
#js .js-sblock__num{font-size:10px;font-weight:600;letter-spacing:.2em;opacity:.5;line-height:1;display:block;text-transform:uppercase}
#js .js-sblock__title{font-size:clamp(18px,2.2vw,30px);font-weight:600;letter-spacing:-.03em;line-height:1.05;margin:0;padding:0}
#js .js-sblock__desc{font-size:clamp(11px,1.1vw,14px);font-weight:400;line-height:1.55;color:rgba(255,255,255,.6);margin:0;padding:0;max-width:24ch}

/* Label lateral */
#js .js-vlabel{position:absolute;left:var(--px);top:50%;transform:translateY(-50%);font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.3);writing-mode:vertical-rl;z-index:10}

/* Contador */
#js .js-vcounter{position:absolute;right:var(--px);bottom:clamp(28px,4vh,48px);z-index:10;font-size:clamp(36px,4vw,56px);font-weight:600;letter-spacing:-.04em;color:rgba(255,255,255,.15)}
#js .js-vcounter span{color:rgba(255,255,255,.7)}

/* Scroll space */
#js .js-vspace{height:500vh}

/* DISTRIBUCIÓN */
#js .js-dist{padding:clamp(72px,10vh,120px) var(--px);background:#060606;border-top:1px solid var(--line)}
#js .js-dist__intro{font-size:clamp(24px,3.2vw,44px);font-weight:600;letter-spacing:-.035em;line-height:1.12;color:rgba(255,255,255,.4);margin-bottom:clamp(48px,6vh,72px);max-width:28ch}
#js .js-dist__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,8vw,112px);align-items:start}
@media(max-width:720px){#js .js-dist__grid{grid-template-columns:1fr}}
#js .js-dist__title{font-size:clamp(24px,3vw,40px);font-weight:600;letter-spacing:-.035em;line-height:1.1;color:#fff;margin-bottom:16px}
#js .js-dist__desc{font-size:15px;font-weight:400;line-height:1.7;color:var(--dim);margin-bottom:32px}
#js .js-dist__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.1);margin-bottom:32px}
#js .js-dist__stat{padding:20px 16px;background:#060606}
#js .js-dist__sv{display:block;font-size:clamp(22px,2.8vw,34px);font-weight:600;letter-spacing:-.04em;color:var(--a);line-height:1;margin-bottom:6px}
#js .js-dist__sl{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);line-height:1.3}
#js .js-dist__feats{display:flex;flex-direction:column}
#js .js-dist__feat{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line)}
#js .js-dist__feat:first-child{border-top:1px solid var(--line)}
#js .js-dist__fdot{width:26px;height:26px;border:1px solid rgba(0,255,170,.35);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;color:var(--a)}
#js .js-dist__ft{font-size:14px;font-weight:600;color:#fff;margin-bottom:4px;letter-spacing:-.01em}
#js .js-dist__fd{font-size:13px;color:rgba(255,255,255,.55);line-height:1.62;font-weight:400}

/* BOTONES */
#js .js-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;transition:opacity .18s,transform .18s;background:var(--m);color:#000}
#js .js-btn:hover{opacity:.82;color:#000;transform:translateY(-1px)}
#js .js-btn--a{background:var(--a)}
#js .js-btn svg{flex-shrink:0;transition:transform .18s}
#js .js-btn:hover svg{transform:translateX(3px)}

/* CTA FINAL */
#js .js-final{padding:clamp(100px,14vh,160px) var(--px);background:#000;border-top:1px solid var(--line);text-align:center;position:relative;overflow:hidden}
#js .js-final::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 50% 100%,rgba(255,0,255,.07) 0%,transparent 70%);pointer-events:none}
#js .js-final *{text-align:center}
#js .js-final__in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:clamp(28px,4vh,40px);max-width:640px;margin:0 auto}
#js .js-final__h{font-size:clamp(36px,5.5vw,72px);font-weight:600;line-height:1.04;letter-spacing:-.04em;color:#fff}

@media(prefers-reduced-motion:reduce){#js .js-ticker__track{animation:none}}