/* ==================================================================== asbtube · landing — paleta noche + dualidad video(violeta)/audio(cian) Colores --primary / --accent / --bg llegan inyectados desde . ==================================================================== */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --text:#E9ECF6; --muted:#98A2BD; --faint:#6B7590; --surface:rgba(255,255,255,.035); --surface-2:rgba(255,255,255,.06); --border:rgba(255,255,255,.09); --border-2:rgba(255,255,255,.14); --radius:18px; --radius-sm:12px; --grad:linear-gradient(120deg,var(--primary),var(--accent)); --shadow:0 24px 60px -20px rgba(0,0,0,.6); --maxw:1160px; } html{scroll-behavior:smooth} body{ font-family:Inter,system-ui,sans-serif; color:var(--text); background:var(--bg); line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* fondo con dos halos muy tenues */ body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(70% 55% at 82% -5%, color-mix(in srgb,var(--primary) 22%, transparent), transparent 70%), radial-gradient(55% 45% at 5% 8%, color-mix(in srgb,var(--accent) 14%, transparent), transparent 70%); } h1,h2,h3,.brand{font-family:"Bricolage Grotesque",Inter,sans-serif;letter-spacing:-.02em;line-height:1.05} a{color:inherit;text-decoration:none} .ic{width:1.15em;height:1.15em;fill:none;flex:0 0 auto;vertical-align:-.15em} .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px} .wrap-narrow{max-width:780px} /* ------------------------------ NAV ------------------------------ */ .nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px); background:color-mix(in srgb,var(--bg) 78%, transparent); border-bottom:1px solid var(--border)} .nav-in{display:flex;align-items:center;justify-content:space-between;height:68px} .brand{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;font-size:1.35rem} .brand-dot{width:14px;height:14px;border-radius:5px;background:var(--grad); box-shadow:0 0 18px -2px var(--primary)} .brand-logo{height:34px;width:auto;max-width:190px;display:block;object-fit:contain} .nav-links{display:flex;align-items:center;gap:1.7rem} .nav-links a{color:var(--muted);font-weight:500;font-size:.95rem;transition:color .18s} .nav-links a:hover{color:var(--text)} .nav-cta{color:var(--text)!important} .nav-toggle{display:none;background:none;border:0;color:var(--text);font-size:1.5rem;cursor:pointer} /* ---------------------------- BOTONES ---------------------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem; font-family:Inter;font-weight:600;font-size:.98rem;line-height:1; padding:.85rem 1.35rem;border-radius:12px;border:1px solid transparent; cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap} .btn:active{transform:translateY(1px)} .btn-primary{background:var(--primary);color:#fff;box-shadow:0 12px 30px -10px var(--primary)} .btn-primary:hover{filter:brightness(1.08);box-shadow:0 16px 38px -10px var(--primary)} .btn-outline{background:transparent;color:var(--text);border-color:var(--border-2)} .btn-outline:hover{border-color:var(--primary);background:var(--surface)} .btn-ghost{background:var(--surface-2);color:var(--text);border-color:var(--border)} .btn-ghost:hover{border-color:var(--border-2)} .btn-wa{padding:.55rem 1rem;font-size:.9rem;background:transparent;border:1px solid var(--border-2)} .btn-wa:hover{border-color:var(--accent)} .btn-lg{padding:1.05rem 1.8rem;font-size:1.05rem;border-radius:14px} /* ----------------------------- HERO ------------------------------ */ .hero{position:relative;padding:clamp(3rem,7vw,6rem) 0 clamp(3rem,6vw,5.5rem)} .hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center} .eyebrow{display:inline-block;font-size:.82rem;font-weight:600;color:var(--accent); padding:.4rem .8rem;border:1px solid var(--border-2);border-radius:999px; background:var(--surface);margin-bottom:1.4rem} .hero-copy h1{font-size:clamp(2.3rem,5.2vw,3.7rem);font-weight:800;margin-bottom:1.1rem} .lead{font-size:clamp(1.02rem,2vw,1.18rem);color:var(--muted);max-width:34ch;margin-bottom:2rem} .hero-actions{display:flex;flex-wrap:wrap;gap:.85rem} /* ------- mockup del reproductor (el momento memorable) ------- */ .hero-art{position:relative;display:flex;justify-content:center} .player{position:relative;z-index:2;width:min(100%,420px); background:linear-gradient(180deg,var(--surface-2),var(--surface)); border:1px solid var(--border);border-radius:22px;padding:14px;box-shadow:var(--shadow)} .player-screen{position:relative;border-radius:15px;overflow:hidden;aspect-ratio:16/10; background:#05070d;display:flex;align-items:center;justify-content:center} .player-cover{position:absolute;inset:0; background: radial-gradient(120% 120% at 20% 15%, color-mix(in srgb,var(--primary) 70%, transparent), transparent 55%), radial-gradient(120% 120% at 90% 90%, color-mix(in srgb,var(--accent) 60%, transparent), transparent 55%), #0b1020; opacity:.92} .player-play{position:relative;z-index:2;width:62px;height:62px;border-radius:50%; border:0;cursor:pointer;color:#0A0E1A;background:#fff;display:grid;place-items:center; box-shadow:0 10px 30px -6px rgba(0,0,0,.5)} .player-play .ic{width:26px;height:26px;margin-left:3px} .player-modes{position:absolute;top:12px;left:12px;z-index:2;display:flex;gap:6px} .player-modes .mode{display:inline-flex;align-items:center;gap:.35rem;font-size:.76rem;font-weight:600; padding:.32rem .6rem;border-radius:8px;background:rgba(6,9,16,.55);color:var(--muted); border:1px solid rgba(255,255,255,.08)} .player-modes .mode.active{color:#fff;border-color:transparent;background:color-mix(in srgb,var(--primary) 55%, #06090f)} .player-bar{display:flex;align-items:center;gap:.9rem;padding:.9rem .6rem .4rem} .player-meta strong{display:block;font-size:.9rem} .player-meta small{color:var(--faint);font-size:.78rem} .eq{display:flex;align-items:flex-end;gap:3px;height:30px;flex:0 0 auto} .eq i{width:4px;border-radius:3px;background:var(--grad);height:30%; animation:eq 1s ease-in-out infinite} .eq i:nth-child(1){animation-delay:-.9s}.eq i:nth-child(2){animation-delay:-.2s} .eq i:nth-child(3){animation-delay:-.6s}.eq i:nth-child(4){animation-delay:-.35s} .eq i:nth-child(5){animation-delay:-.75s}.eq i:nth-child(6){animation-delay:-.1s} .eq i:nth-child(7){animation-delay:-.5s} @keyframes eq{0%,100%{height:22%}50%{height:100%}} .glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;z-index:1} .glow-a{width:230px;height:230px;background:var(--primary);top:-30px;right:-20px} .glow-b{width:200px;height:200px;background:var(--accent);bottom:-30px;left:-10px} /* --------------------------- SECCIONES --------------------------- */ .section{padding:clamp(3rem,6vw,5rem) 0} .band{background:var(--surface);border-block:1px solid var(--border)} .sec-head{text-align:center;max-width:620px;margin:0 auto 2.6rem} .sec-title{font-size:clamp(1.7rem,3.6vw,2.4rem);font-weight:700} .sec-head .sec-title{margin-bottom:.6rem} .sec-sub{color:var(--muted);font-size:1.05rem} /* --------------------------- FEATURES ---------------------------- */ .features .sec-title{text-align:center;margin-bottom:2.4rem} .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} .feat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:1.5rem} .feat-ic{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px; background:color-mix(in srgb,var(--primary) 16%, transparent);color:var(--accent);margin-bottom:1rem} .feat-ic .ic{width:24px;height:24px} .feat h3{font-size:1.12rem;margin-bottom:.35rem} .feat p{color:var(--muted);font-size:.96rem} /* ---------------------------- PLANES ----------------------------- */ .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;align-items:stretch} .plan{position:relative;display:flex;flex-direction:column; background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:1.8rem 1.6rem} .plan-feat{border-color:transparent;background: linear-gradient(var(--bg),var(--bg)) padding-box, var(--grad) border-box; box-shadow:0 30px 70px -30px color-mix(in srgb,var(--primary) 60%, transparent); transform:translateY(-6px)} .plan-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%); font-size:.75rem;font-weight:700;padding:.32rem .8rem;border-radius:999px; color:#fff;background:var(--grad);white-space:nowrap} .plan-name{font-size:1.3rem;font-weight:700} .plan-desc{color:var(--muted);font-size:.92rem;margin-top:.25rem} .plan-credits{margin-top:.7rem;font-family:"Bricolage Grotesque";font-weight:700;font-size:1.5rem;color:var(--accent)} .plan-credits span{font-family:Inter;font-size:.85rem;color:var(--muted);font-weight:500} .plan-price{display:flex;align-items:baseline;gap:.35rem;margin:1rem 0 1.2rem} .plan-price .amount{font-family:"Bricolage Grotesque";font-weight:800;font-size:2.6rem} .plan-price .per{color:var(--muted);font-size:.95rem} .plan-feats{list-style:none;display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.6rem} .plan-feats li{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem;color:#d5dbec} .plan-feats .ic{width:20px;height:20px;color:var(--accent);margin-top:.05rem} .plan-cta{margin-top:auto;width:100%} /* ----------------------------- FAQ ------------------------------- */ .faq{margin-top:2.2rem;display:flex;flex-direction:column;gap:.7rem} .faq-item{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden} .faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between; gap:1rem;padding:1.1rem 1.3rem;font-weight:600;font-size:1.02rem} .faq-item summary::-webkit-details-marker{display:none} .faq-chev{width:20px;height:20px;color:var(--muted);transition:transform .22s} .faq-item[open] .faq-chev{transform:rotate(180deg)} .faq-a{padding:0 1.3rem 1.15rem;color:var(--muted);font-size:.97rem} /* --------------------------- CTA FINAL --------------------------- */ .cta-final{padding:clamp(3rem,6vw,5rem) 0} .cta-in{position:relative;text-align:center;border-radius:26px;padding:clamp(2.4rem,5vw,3.6rem) 1.5rem; background: linear-gradient(var(--surface-2),var(--surface-2)) padding-box, var(--grad) border-box; border:1px solid transparent;overflow:hidden} .cta-in::after{content:"";position:absolute;inset:0;z-index:0;opacity:.14; background:radial-gradient(60% 120% at 50% -20%,var(--primary),transparent 60%)} .cta-in>*{position:relative;z-index:1} .cta-in h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;margin-bottom:.5rem} .cta-in p{color:var(--muted);margin-bottom:1.6rem} /* ---------------------------- FOOTER ----------------------------- */ .foot{border-top:1px solid var(--border);padding:2.6rem 0 1.6rem;margin-top:1rem} .foot-in{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start} .foot-brand .brand{font-size:1.2rem} .foot-brand p{color:var(--muted);font-size:.92rem;margin-top:.5rem;max-width:32ch} .foot-links,.foot-social{display:flex;flex-direction:column;gap:.6rem} .foot-links a,.foot-social a{color:var(--muted);font-size:.94rem;transition:color .18s} .foot-links a:hover,.foot-social a:hover{color:var(--text)} .foot-note{color:var(--faint);font-size:.85rem;margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--border)} /* --------------------------- RESPONSIVE -------------------------- */ @media(max-width:900px){ .hero-in{grid-template-columns:1fr;text-align:center} .hero-copy .eyebrow{margin-inline:auto} .lead{margin-inline:auto} .hero-actions{justify-content:center} .hero-art{order:-1} .feat-grid{grid-template-columns:repeat(2,1fr)} .plans{grid-template-columns:1fr;max-width:420px;margin-inline:auto} .plan-feat{transform:none} } @media(max-width:640px){ .nav-links{position:fixed;inset:68px 0 auto 0;flex-direction:column;align-items:stretch; gap:0;background:var(--bg);border-bottom:1px solid var(--border);padding:.5rem 22px 1.2rem; transform:translateY(-140%);transition:transform .28s ease;visibility:hidden} .nav-links.open{transform:translateY(0);visibility:visible} .nav-links a{padding:.9rem 0;border-bottom:1px solid var(--border)} .nav-cta{margin-top:.7rem;justify-content:center} .nav-toggle{display:inline-flex} .feat-grid{grid-template-columns:1fr} .foot-in{flex-direction:column;gap:1.4rem} } /* ------------------------ DISPOSITIVOS --------------------------- */ .devices-sec .sec-head{margin-bottom:2.2rem} .dev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem} .device{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem; background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.8rem 1rem} .dev-ic{display:grid;place-items:center;width:60px;height:60px;border-radius:16px; background:color-mix(in srgb,var(--accent) 14%, transparent);color:var(--accent); transition:transform .25s ease} .dev-ic .ic{width:30px;height:30px} .device:hover .dev-ic{transform:translateY(-4px)} .device h3{font-size:1.05rem} .device p{color:var(--muted);font-size:.85rem} /* onda de audio animada */ .wave{display:flex;align-items:center;justify-content:center;gap:4px;height:64px;margin-top:2.6rem} .wave span{width:4px;height:12%;border-radius:4px;background:var(--grad);opacity:.85; animation:wave 1.4s ease-in-out infinite} .wave span:nth-child(3n){animation-duration:1.9s} .wave span:nth-child(3n+1){animation-duration:1.1s} .wave span:nth-child(4n){animation-delay:-.6s} .wave span:nth-child(2n){animation-delay:-.3s} .wave span:nth-child(5n){animation-delay:-.9s} @keyframes wave{0%,100%{height:12%}50%{height:100%}} /* ------------------------- GALERÍA ------------------------------- */ .shots{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} .shot{position:relative;padding:0;border:1px solid var(--border);border-radius:var(--radius); overflow:hidden;cursor:pointer;background:var(--surface);aspect-ratio:16/10;display:block} .shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease} .shot:hover img{transform:scale(1.06)} .shot-ov{position:absolute;inset:0;display:grid;place-items:center;color:#fff; background:linear-gradient(180deg,transparent 40%,rgba(6,9,16,.55));opacity:0;transition:opacity .25s} .shot-ov .ic{width:30px;height:30px;transform:translateY(6px);transition:transform .25s} .shot:hover .shot-ov{opacity:1} .shot:hover .shot-ov .ic{transform:none} .shot-cap{position:absolute;left:12px;bottom:10px;right:12px;z-index:2;color:#fff;font-size:.85rem; font-weight:500;text-align:left;text-shadow:0 1px 6px rgba(0,0,0,.6);opacity:0;transform:translateY(6px);transition:.25s} .shot:hover .shot-cap{opacity:1;transform:none} /* lightbox */ .lb{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:1.5rem; background:rgba(4,6,12,.86);backdrop-filter:blur(6px)} .lb[hidden]{display:none} .lb-fig{max-width:min(1000px,92vw);max-height:88vh;margin:0;text-align:center} .lb-fig img{max-width:100%;max-height:80vh;border-radius:14px;border:1px solid var(--border-2); box-shadow:0 30px 80px -20px rgba(0,0,0,.7)} .lb-fig figcaption{color:var(--muted);margin-top:.9rem;font-size:.95rem} .lb-close{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:12px;cursor:pointer; background:var(--surface-2);border:1px solid var(--border-2);color:var(--text);display:grid;place-items:center} .lb-close:hover{border-color:var(--border-2);filter:brightness(1.2)} .lb-close .ic{width:22px;height:22px} /* ------------------ notas flotantes en el hero ------------------- */ .notes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .notes .note{position:absolute;bottom:-40px;color:var(--primary);opacity:0; animation:floatNote 9s linear infinite} .notes .note .ic{width:26px;height:26px} .notes .note:nth-child(1){left:12%;animation-delay:0s;color:var(--primary)} .notes .note:nth-child(2){left:28%;animation-delay:2.4s;color:var(--accent)} .notes .note:nth-child(3){left:46%;animation-delay:4.1s} .notes .note:nth-child(4){left:63%;animation-delay:1.3s;color:var(--accent)} .notes .note:nth-child(5){left:78%;animation-delay:5.6s} .notes .note:nth-child(6){left:90%;animation-delay:3.2s;color:var(--accent)} @keyframes floatNote{ 0%{transform:translateY(0) rotate(0);opacity:0} 12%{opacity:.5} 85%{opacity:.35} 100%{transform:translateY(-78vh) rotate(22deg);opacity:0} } .hero .wrap{position:relative;z-index:1} /* -------------- aparición al hacer scroll (reveal) --------------- */ .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease} .reveal.in{opacity:1;transform:none} @media(max-width:900px){ .dev-grid{grid-template-columns:repeat(2,1fr)} .shots{grid-template-columns:repeat(2,1fr)} } @media(max-width:560px){ .shots{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .eq i,.wave span,.notes .note{animation:none} .wave span{height:55%} .notes{display:none} .btn,.faq-chev,.nav-links,.shot img,.dev-ic{transition:none} .reveal{opacity:1;transform:none;transition:none} }