/* FactorNube Karaoke — landing */
:root{
  --stage:#120B1E; --stage-2:#1B1030; --ink:#FBF7F2; --muted:#B9AECB;
  --magenta:#FF2D95; --cyan:#22E4FF; --amber:#FFB020;
  --line:rgba(251,247,242,.12);
  --font-display:'Unbounded',system-ui,sans-serif;
  --font-body:'Instrument Sans',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--stage);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:4px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:0}
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:999px;font-weight:700;font-size:16px;border:1px solid transparent;transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--magenta);color:#fff}
.btn-primary:hover{box-shadow:0 12px 40px -8px rgba(255,45,149,.7)}
.btn-ghost{border-color:var(--line);background:rgba(255,255,255,.03)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}

/* header */
.nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:700;font-size:17px}
.brand-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--magenta),var(--amber));display:grid;place-items:center;font-size:18px}
.nav-links{display:flex;gap:28px;font-size:15px;color:var(--muted)}
.nav-links a:hover{color:var(--ink)}
.nav-cta{font-size:14px;padding:10px 18px}
@media(max-width:820px){.nav-links{display:none}}

/* hero */
.hero{position:relative;padding:60px 0 90px;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero::before{content:"";position:absolute;inset:-200px -40% auto;height:700px;background:radial-gradient(60% 50% at 30% 30%,rgba(255,45,149,.22),transparent 70%),radial-gradient(40% 40% at 85% 20%,rgba(34,228,255,.16),transparent 70%);pointer-events:none;z-index:-1;filter:blur(20px)}
.hero h1{font-size:clamp(40px,6vw,76px);margin:18px 0 22px}
.lyric{display:inline-block;position:relative;color:rgba(251,247,242,.28)}
.lyric span{position:absolute;inset:0;color:var(--ink);clip-path:inset(0 100% 0 0);animation:sing 1.1s cubic-bezier(.4,0,.2,1) forwards;animation-delay:var(--d,0s)}
.lyric.hot span{color:var(--magenta)}
@keyframes sing{to{clip-path:inset(0 0 0 0)}}
.hero p.lead{font-size:20px;color:var(--muted);max-width:520px;margin:0 0 34px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-note{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-top:22px}
.hero-note b{color:var(--amber);font-weight:500}

/* monitor mock */
.tv-wrap{position:relative}
.tv{position:relative;background:#000;border:10px solid #221735;border-radius:22px;box-shadow:0 40px 100px -30px rgba(255,45,149,.45),0 0 0 1px var(--line);aspect-ratio:16/10;overflow:hidden;font-family:var(--font-mono)}
.tv-now{position:absolute;inset:0;background:linear-gradient(160deg,#2A1250,#0B0716 70%)}
.tv-now .bars{position:absolute;left:8%;bottom:26%;display:flex;gap:6px;align-items:flex-end;height:80px}
.tv-now .bars i{width:10px;background:linear-gradient(to top,var(--magenta),var(--cyan));border-radius:3px;animation:eq 1s ease-in-out infinite alternate}
.tv-now .bars i:nth-child(2){animation-delay:.15s}.tv-now .bars i:nth-child(3){animation-delay:.3s}.tv-now .bars i:nth-child(4){animation-delay:.45s}.tv-now .bars i:nth-child(5){animation-delay:.6s}.tv-now .bars i:nth-child(6){animation-delay:.2s}
@keyframes eq{from{height:18%}to{height:100%}}
.tv-label{position:absolute;left:8%;top:10%;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.tv-title{position:absolute;left:8%;top:18%;right:38%;font-family:var(--font-display);font-size:clamp(14px,1.6vw,22px);line-height:1.15;color:#fff}
.tv-table{position:absolute;left:8%;bottom:12%;font-size:12px;color:var(--cyan)}
.tv-queue{position:absolute;right:0;top:0;bottom:0;width:36%;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);padding:14px 12px;border-left:1px solid var(--line)}
.tv-queue h4{margin:0 0 10px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:500}
.tv-queue ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.tv-queue li{display:flex;gap:8px;align-items:center;font-size:10.5px;padding:7px 8px;border-radius:8px;background:rgba(255,255,255,.05)}
.tv-queue li .m{color:var(--amber);white-space:nowrap}
.tv-queue li .t{color:#ddd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tv-queue li.enter{animation:slidein .6s cubic-bezier(.2,.8,.2,1)}
@keyframes slidein{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
.tv-ping{position:absolute;bottom:10px;right:12px;font-size:9px;color:var(--muted)}
.tv-ping::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);margin-right:6px;animation:blink 2s infinite}
@keyframes blink{50%{opacity:.2}}
.phone{position:absolute;left:-30px;bottom:-40px;width:160px;background:#0E0A18;border:6px solid #2C2040;border-radius:26px;padding:14px 12px;box-shadow:0 30px 60px -20px rgba(0,0,0,.8);font-size:10px;transform:rotate(-6deg);font-family:var(--font-mono)}
.phone .search{background:rgba(255,255,255,.08);border-radius:8px;padding:7px 8px;color:var(--muted);margin-bottom:8px}
.phone .res{display:flex;gap:6px;align-items:center;padding:6px 0;border-top:1px solid var(--line);color:#ddd}
.phone .res i{width:26px;height:18px;border-radius:3px;background:linear-gradient(135deg,#5b2b8a,#c02669);flex-shrink:0}
.phone .add{margin-top:8px;background:var(--magenta);color:#fff;text-align:center;border-radius:8px;padding:7px;font-weight:700}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding:30px 0 70px}.phone{left:auto;right:-10px;bottom:-30px;width:130px}}

/* strip */
.strip{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:12.5px;color:var(--muted);letter-spacing:.04em}
.strip span::before{content:"✓ ";color:var(--cyan)}

/* sections */
section.block{padding:100px 0}
.sec-head{max-width:640px;margin-bottom:56px}
.sec-head h2{font-size:clamp(30px,4vw,48px);margin:14px 0 16px}
.sec-head p{color:var(--muted);font-size:18px;margin:0}

/* steps (secuencia real mesa -> pantalla) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{position:relative;padding:32px 28px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01))}
.step .num{font-family:var(--font-display);font-size:13px;color:var(--amber);letter-spacing:.1em}
.step h3{font-size:22px;margin:14px 0 12px}
.step p{color:var(--muted);margin:0;font-size:16px}
.step .who{display:inline-block;margin-top:18px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid var(--line);color:var(--cyan)}
@media(max-width:900px){.steps{grid-template-columns:1fr}}

/* features */
.feats{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.feat{border:1px solid var(--line);border-radius:22px;padding:30px;background:var(--stage-2);grid-column:span 4}
.feat.wide{grid-column:span 8;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.feat h3{font-size:20px;margin:0 0 10px}
.feat p{color:var(--muted);margin:0;font-size:15.5px}
.feat .glyph{font-size:28px;margin-bottom:18px;display:block}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chips span{font-family:var(--font-mono);font-size:11.5px;padding:6px 10px;border-radius:8px;background:rgba(34,228,255,.08);color:var(--cyan);border:1px solid rgba(34,228,255,.2)}
@media(max-width:900px){.feat,.feat.wide{grid-column:span 12}.feat.wide{grid-template-columns:1fr}}

/* tenants mock */
.tenant-list{font-family:var(--font-mono);font-size:12.5px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.tenant-list div{display:flex;justify-content:space-between;padding:11px 14px;border-top:1px solid var(--line)}
.tenant-list div:first-child{border-top:0;background:rgba(255,255,255,.04);color:var(--muted)}
.tenant-list b{font-weight:500;color:var(--amber)}
.tenant-list em{font-style:normal;color:var(--cyan)}

/* para quién */
.who-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.who-card{border-radius:18px;padding:24px;border:1px solid var(--line);text-align:center}
.who-card .glyph{font-size:30px}
.who-card b{display:block;font-family:var(--font-display);font-size:15px;margin-top:10px}
.who-card small{color:var(--muted)}
@media(max-width:900px){.who-grid{grid-template-columns:repeat(2,1fr)}}

/* faq */
.faq{max-width:760px}
.faq details{border-top:1px solid var(--line);padding:22px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:700;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-display);color:var(--magenta);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);margin:12px 0 0}

/* cta */
.cta{position:relative;overflow:hidden;border-radius:30px;padding:70px 40px;text-align:center;background:linear-gradient(135deg,#2A1250,#3B0F3A 50%,#0E0A18);border:1px solid var(--line)}
.cta::after{content:"";position:absolute;inset:auto -20% -60% -20%;height:300px;background:radial-gradient(50% 50% at 50% 50%,rgba(255,45,149,.4),transparent 70%);filter:blur(30px)}
.cta>*{position:relative;z-index:1}
.cta h2{font-size:clamp(30px,4.6vw,54px);margin:0 0 16px}
.cta p{color:var(--muted);font-size:18px;max-width:560px;margin:0 auto 32px}
.cta .row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* footer */
footer{padding:44px 0 40px;border-top:1px solid var(--line);color:var(--muted);font-size:14px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
footer .mono{font-family:var(--font-mono);font-size:12px}

/* scroll reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}
  .rv{opacity:1;transform:none}.lyric{color:var(--ink)}.lyric.hot{color:var(--magenta)}.lyric span{display:none}
}