@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#f7f6f2;--ink:#25252c;--muted:#696972;--purple:#7053d6;--line:#e1dfd9}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid var(--purple);outline-offset:5px}.header,main,footer{max-width:1240px;margin:auto}.header{height:114px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;font-family:Manrope,sans-serif;font-size:23px;font-weight:800;letter-spacing:-1px}.brand small{display:block;font-size:8px;letter-spacing:2px;margin-top:5px;color:var(--muted)}.purple{color:var(--purple)}.mark{position:relative;background:var(--purple);color:white;display:grid;place-items:center;width:41px;height:43px;border-radius:12px;font-size:29px;letter-spacing:-4px;padding-right:7px}.mark span{font-size:15px;position:absolute;right:4px;top:1px;letter-spacing:0}nav{display:flex;gap:32px;font-size:14px}nav a:hover,footer>a:last-of-type:hover{color:var(--purple)}.nav-button{border:1px solid #cfccd9;border-radius:30px;padding:12px 21px;font-size:13px}.nav-button span{margin-left:24px}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;padding:76px 36px 72px;align-items:center}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.7px;margin:0 0 22px;display:flex;align-items:center;gap:9px}.dot{width:7px;height:7px;border-radius:50%;background:var(--purple)}h1,h2,h3{font-family:Manrope,sans-serif}h1{font-size:clamp(46px,5.7vw,73px);line-height:1.08;letter-spacing:-3.8px;margin:0 0 24px;font-weight:800}em{font-style:normal;color:var(--purple)}.intro{max-width:440px;font-size:16px;line-height:1.8;color:var(--muted)}.hero-actions{display:flex;gap:13px;margin:28px 0 19px}.button{display:inline-flex;gap:35px;align-items:center;justify-content:center;border-radius:9px;padding:15px 20px;font-size:13px;font-weight:600;border:0}.primary{background:var(--purple);color:white}.primary:hover{background:#6042c4}.secondary{border:1px solid #ccc8d4;background:transparent}.hero-note{font-size:11px;color:var(--muted)}.hero-art{height:453px;background:#eeebf6;border:1px solid #e3dff0;border-radius:24px;position:relative;overflow:hidden;background-image:radial-gradient(#d9d2e8 .8px,transparent .8px);background-size:20px 20px}.art-top{display:flex;justify-content:space-between;padding:26px;font-size:8px;letter-spacing:1.5px;color:#847499}.orbit{border:1px solid #d5cce9;border-radius:50%;position:absolute;width:320px;height:320px;left:50%;top:47%;transform:translate(-50%,-50%)}.o2{width:240px;height:240px}.music-core{position:absolute;width:144px;height:144px;display:grid;place-items:center;left:50%;top:45%;transform:translate(-50%,-50%) rotate(-8deg);font-size:89px;background:#7256cf;color:#fff;border-radius:34px;box-shadow:9px 12px 0 #d7cdea}.floating{position:absolute;font-size:60px}.note-a{left:12%;top:18%;color:#e3905a;transform:rotate(-15deg)}.note-b{right:10%;top:17%;color:#7f70ae;transform:rotate(15deg)}.sound-card{position:absolute;left:6%;top:47%;background:#fff;border:1px solid #e5dfec;border-radius:14px;width:175px;padding:18px;transform:rotate(-8deg);box-shadow:0 8px 24px #33205a0b}.mini-label{font-size:9px;letter-spacing:1.3px;font-weight:700}.wave{height:53px;display:flex;align-items:center;gap:5px;margin:8px 0}.wave i{width:6px;background:#9a89ca;border-radius:5px;height:20px}.wave i:nth-child(3n){height:46px}.wave i:nth-child(2n){height:33px}.sound-foot{font-size:9px;color:var(--muted)}.pattern-card{position:absolute;right:6%;bottom:19%;padding:18px;width:215px;background:#fff;border:1px solid #e5dfec;border-radius:14px;transform:rotate(7deg);box-shadow:0 8px 24px #33205a0b}.pattern-card .mini-label{display:flex;justify-content:space-between}.steps{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin-top:16px}.steps i{height:20px;background:#eeebf5;border-radius:3px}.steps .on{background:#a592dc}.steps i:nth-child(5n){background:#e5a375}.art-caption{position:absolute;bottom:26px;left:26px;font-size:11px;color:#80718e}.spark{position:absolute;right:28px;bottom:21px;font-size:39px;color:#8c76bc}.explore{padding:20px 36px 70px}.section-heading h2{font-size:29px;letter-spacing:-1px;margin:0 0 25px}.section-heading .eyebrow{margin-bottom:12px}.paths{display:grid;grid-template-columns:1fr 1fr;gap:20px}.path{padding:27px;display:flex;gap:20px;align-items:center;border:1px solid var(--line);border-radius:13px;background:#fff9;transition:transform .2s}.path:hover{transform:translateY(-4px)}.path-icon{width:49px;height:49px;border-radius:13px;display:grid;place-items:center;font-size:31px;background:#eee8fa;color:var(--purple);flex-shrink:0}.apps-path .path-icon{background:#e5ece3;color:#59755c}.path h3{font-size:20px;letter-spacing:-.7px;margin:8px 0}.path p{font-size:12px;color:var(--muted);line-height:1.6;margin:0}.path-arrow{margin-left:auto;font-size:23px}.catalog{padding:0 36px 74px}.catalog-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:26px}.catalog-heading h2{font-size:30px;letter-spacing:-1.2px;margin:0}.catalog-heading .eyebrow{margin-bottom:12px}.catalog-heading>p{font-size:12px;line-height:1.8;color:var(--muted);margin:0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:21px}.card{border:1px solid var(--line);background:#fff;border-radius:14px;overflow:hidden}.card-art{height:177px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.card-art svg{width:100%;height:100%}.card-body{padding:23px}.card-type{font-size:9px;text-transform:uppercase;letter-spacing:1.2px;color:var(--purple);font-weight:700}.card h3{font-size:21px;letter-spacing:-.8px;margin:10px 0}.card p{font-size:13px;line-height:1.8;color:var(--muted);margin:0;min-height:70px}.tags{display:flex;gap:6px;margin:18px 0;flex-wrap:wrap}.tags span{font-size:9px;background:#f4f3f7;border-radius:5px;padding:5px 8px;color:#737078}.card-action{background:transparent;border:0;border-top:1px solid #eeecf1;width:100%;display:flex;align-items:center;justify-content:space-between;padding:15px 0 0;color:var(--purple);font-size:12px;font-weight:600}.card-action small{font-size:9px;color:#8c8797;font-weight:400}.card-action>span:last-child{font-size:21px}.app-cards{grid-template-columns:1fr 1fr}.app-cards .card{display:grid;grid-template-columns:38% 62%}.app-cards .card-art{height:100%;min-height:280px}.app-cards .card p{min-height:70px}.about{margin:0 36px 60px;border-top:1px solid var(--line);padding-top:55px;display:grid;grid-template-columns:1fr 1fr;gap:60px}.about h2{font-size:36px;letter-spacing:-1.5px;line-height:1.3;margin:0}.about p{font-size:14px;color:var(--muted);line-height:1.9;margin:0 0 15px}.about strong{color:var(--ink)}.about-tag{font-size:10px;color:#7b7290}footer{padding:28px 36px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}footer .brand{font-size:18px}footer .mark{width:30px;height:31px;font-size:23px;border-radius:9px}footer .mark span{font-size:10px}footer p,footer>a:last-of-type{font-size:11px;color:var(--muted)}footer small{width:100%;font-size:9px;color:#8d8992}dialog{border:1px solid var(--line);border-radius:18px;max-width:450px;width:calc(100% - 32px);padding:35px;box-shadow:0 20px 80px #25252c33}dialog::backdrop{background:#25252c66}dialog h2{font-size:25px;letter-spacing:-1px}dialog p:not(.eyebrow){font-size:14px;color:var(--muted);line-height:1.8}.close{position:absolute;right:15px;top:10px;border:0;background:none;font-size:26px}.close-dialog{margin-top:15px}@media(max-width:950px){.hero{gap:25px}.hero-art{height:400px}h1{letter-spacing:-2.5px}.catalog-heading h2{font-size:25px}.path{padding:20px;gap:12px}.path h3{font-size:17px}.app-cards .card{display:block}.app-cards .card-art{height:170px;min-height:0}}@media(max-width:680px){.header{height:88px;padding:0 22px}.brand{font-size:20px}.brand small{font-size:6px}.header nav{gap:17px;font-size:12px}.nav-button{display:none}.hero{grid-template-columns:1fr;padding:45px 22px;gap:30px}h1{font-size:59px}.hero-art{height:365px}.hero-copy .eyebrow{font-size:8px}.intro{font-size:15px}.paths,.cards,.app-cards{grid-template-columns:1fr}.explore,.catalog{padding:15px 22px 48px}.section-heading h2{font-size:25px}.catalog-heading{display:block}.catalog-heading>p{margin-top:15px}.cards{gap:18px}.card-art{height:185px}.card p{min-height:0}.app-cards .card-art{height:185px}.about{margin:0 22px 42px;padding-top:35px;grid-template-columns:1fr;gap:25px}.about h2{font-size:31px}footer{padding:25px 22px}footer p{display:none}.eyebrow{font-size:9px}.path{padding:24px}.path h3{font-size:19px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.coming-soon{color:#7c718e}.coming-soon small{display:block;margin-top:6px;font-size:10px;font-weight:400;letter-spacing:0}.card-action[href]:hover{color:#5133a8}

/* V3: fondo original y portadas con recursos reales de los juegos. */
.hero{position:relative;isolation:isolate;margin:32px 36px 48px;padding:64px 42px;min-height:540px;border:1px solid #e3dff0;border-radius:24px;background:#eeebf6;overflow:hidden;grid-template-columns:1fr 1fr;gap:24px}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:url('assets/musicrunlab-fondo.png') center right/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(247,246,242,.98) 0%,rgba(247,246,242,.9) 32%,rgba(247,246,242,.42) 55%,transparent 77%)}
.hero-copy{max-width:510px}.hero-world{min-height:390px;align-self:stretch}.hero h1{font-size:clamp(46px,5.4vw,68px)}
.card-art{height:210px;background:#eeeaf4}.card-art>img{display:block;width:100%;height:100%;object-fit:contain}
.art-run{background:#eaf7ff}.art-race{background:#e5ebe5}.art-timbres{background:#fff}
.app-cards .card{display:block}.app-cards .card-art{height:220px;min-height:0}.app-cards .card-body{padding:23px}
.fantasy-scene{width:100%;height:100%;display:flex;align-items:end;justify-content:center;gap:8px;padding:24px 14px 21px;position:relative;isolation:isolate;background:linear-gradient(#eee5f5 0%,#e0d4ec 74%,#cbc1dd 75%,#ded5e9 100%)}
.fantasy-scene img{width:auto;height:140px;max-width:30%;object-fit:contain;image-rendering:pixelated}.fantasy-scene img:nth-of-type(2){height:154px}.fantasy-scene img:nth-of-type(3){height:116px}.fantasy-staff{position:absolute;top:10px;left:28px;font-size:70px;color:#baa7cf;z-index:-1}
.sequencer-art{width:100%;height:100%;padding:32px 38px;background:#ece7f5}.sequencer-grid{height:116px;position:relative;border:1px solid #d7cbea;border-radius:9px;background:repeating-linear-gradient(0deg,transparent 0,transparent 27px,#dcd3ea 28px,#dcd3ea 29px),repeating-linear-gradient(90deg,#f7f4fb 0,#f7f4fb 31px,#dcd3ea 32px,#dcd3ea 33px)}
.sequencer-grid i{position:absolute;height:20px;width:18%;background:#9372cf;border-radius:4px}.sequencer-grid i:nth-child(1){left:2%;bottom:5px}.sequencer-grid i:nth-child(2){left:22%;bottom:34px}.sequencer-grid i:nth-child(3){left:42%;bottom:63px}.sequencer-grid i:nth-child(4){left:62%;bottom:92px}.sequencer-grid i:nth-child(5){left:82%;bottom:63px;width:16%}.sequencer-grid i:nth-child(n+6){display:none}.piano-keys{margin:12px auto 0;height:24px;color:#493b64;font-size:29px;letter-spacing:12px;overflow:hidden;text-align:center}
@media(max-width:950px){.hero{margin:26px 36px 42px;padding:48px 32px;min-height:520px}.hero h1{font-size:54px}.hero::after{background:linear-gradient(90deg,#f7f6f2f5 0%,#f7f6f2e8 40%,#f7f6f24d 75%)}.hero-world{min-height:300px}.card-art{height:180px}.fantasy-scene{gap:2px;padding:18px 8px}.fantasy-scene img{height:115px}.fantasy-scene img:nth-of-type(2){height:124px}.fantasy-scene img:nth-of-type(3){height:96px}}
@media(max-width:680px){.hero{display:block;margin:22px 22px 36px;padding:35px 25px 0;min-height:0}.hero h1{font-size:53px;letter-spacing:-2.6px}.hero-copy{max-width:none}.hero-world{height:225px;min-height:0;margin:20px -25px 0;background:url('assets/musicrunlab-fondo.png') 83% 65%/auto 100% no-repeat}.hero::before{display:none}.hero::after{display:none}.hero{background:#f1eef6}.hero .intro{font-size:14px}.hero .button{gap:20px;padding:14px 17px}.hero .hero-actions{gap:10px}.hero .eyebrow{font-size:8px;letter-spacing:1px}.card-art,.app-cards .card-art{height:220px}.fantasy-scene{gap:10px;padding:24px 14px}.fantasy-scene img{height:140px}.fantasy-scene img:nth-of-type(2){height:154px}.fantasy-scene img:nth-of-type(3){height:116px}.sequencer-art{padding:32px 22px}}
