/* <MRmiguel/> · blanco y negro, JetBrains Mono, esquinas rectas */
:root{
  --bg:#0A0A0A; --card:#141414; --line:#2B2B2B; --gray:#8C8C8C; --sub:#C8C8C8; --tx:#FAFAFA;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --w:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0; background:var(--bg); color:var(--tx); font:400 16px/1.6 var(--mono);
  -webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:60px 60px;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.08}
p{margin:0}
.wrap{width:min(var(--w), 100% - 32px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--tx);color:var(--bg);padding:8px 12px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--tx);outline-offset:3px}

/* marca */
.brand{display:inline-flex;align-items:baseline;text-decoration:none;font-size:20px;letter-spacing:-.02em}
.brand .g{color:var(--gray);font-weight:300}
.brand b{font-weight:800;letter-spacing:-.05em}
.brand .l{font-weight:300}
.inv{background:var(--tx);color:var(--bg);padding:0 .14em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:0 26px;
  background:var(--tx);color:var(--bg);border:2px solid var(--tx);font:800 16px var(--mono);letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;transition:transform .15s, background .2s, color .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:none}
.btn-ghost{background:transparent;color:var(--tx)}
.btn-ghost:hover{background:var(--tx);color:var(--bg)}
.btn-sm{min-height:44px;padding:0 18px;font-size:14px}
.btn-full{width:100%}
.link{display:inline-block;font-weight:800;text-decoration:none;border-bottom:2px solid var(--tx);padding-bottom:2px}
.link:hover{background:var(--tx);color:var(--bg)}

/* cabecera */
.top{position:sticky;top:0;z-index:20;background:rgba(10,10,10,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:24px;height:68px}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{color:var(--sub);text-decoration:none;font-size:14px;padding:10px 12px}
.nav a:hover,.nav a.on{color:var(--tx)}
.nav a.on::before{content:"> ";color:var(--gray)}

/* inicio */
.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center;padding:72px 0 96px;min-height:calc(100svh - 68px)}
.kicker,.label{color:var(--gray);font-size:15px;margin-bottom:22px}
.kicker::after{content:"█";margin-left:2px;animation:blink 1s steps(1) infinite}
.kicker.done::after{display:none}
h1{font-size:clamp(44px, 7vw, 92px);margin-bottom:28px}
.lead{color:var(--sub);font-size:clamp(16px, 1.6vw, 19px);max-width:56ch;margin-bottom:36px}
.ctas{display:flex;flex-wrap:wrap;gap:14px}
@keyframes blink{50%{opacity:0}}

/* celular con la página desplazándose */
.hero-vis{display:flex;justify-content:center}
.phone{width:min(330px, 78vw);aspect-ratio:1/2.04;padding:10px;border-radius:52px;background:linear-gradient(135deg,#3a3a3a,#1c1c1c 50%,#333);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(255,255,255,.05)}
.phone-scr{height:100%;border-radius:42px;overflow:hidden;background:#0d0d0d;display:flex;flex-direction:column}
.phone-bar{height:9%;display:flex;align-items:center;justify-content:center;flex:none}
.island{width:32%;height:44%;background:#000;border-radius:99px}
.phone-view{flex:1;overflow:hidden;position:relative}
.phone-page{position:relative;animation:tour 22s cubic-bezier(.7,0,.3,1) infinite}
.phone-page>img{width:100%}
/* el vinilo de la captura gira (centro x440 y1592, radio 405 sobre 1000×8378) */
.disc{position:absolute;left:3.5%;top:14.168%;width:81%;aspect-ratio:1;border-radius:50%;overflow:hidden;animation:spin 3.4s linear infinite}
.disc img{position:absolute;width:123.457%;max-width:none;left:-4.321%;top:-146.543%}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes tour{
  0%,10%{transform:translateY(0)}
  16%,30%{transform:translateY(-12.6%)}
  36%,52%{transform:translateY(-33.8%)}
  58%,72%{transform:translateY(-70.2%)}
  78%,92%{transform:translateY(-76%)}
  100%{transform:translateY(0)}
}

/* secciones */
.sec{padding:96px 0;border-top:1px solid var(--line)}
.h2{font-size:clamp(32px, 4.4vw, 56px);margin-bottom:48px;max-width:20ch}

/* proyecto */
.proj{display:grid;grid-template-columns:1.35fr 1fr;gap:48px;align-items:center}
.browser{background:var(--card);border:1px solid #3a3a3a;box-shadow:0 30px 70px rgba(0,0,0,.55)}
.browser-bar{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-bottom:1px solid var(--line)}
.browser-bar i{width:11px;height:11px;border:1.5px solid var(--gray)}
.browser-bar span{flex:1;margin-left:14px;background:#222;color:#bbb;font-size:12px;text-align:center;padding:3px 0}
.proj-txt h2{font-size:clamp(30px, 3.6vw, 46px);margin-bottom:20px}
.proj-txt p{color:var(--sub);margin-bottom:24px}
.proj-txt b{color:var(--tx)}
.tags{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-wrap:wrap;gap:8px}
.tags li{border:1px solid var(--line);padding:6px 10px;font-size:13px;color:var(--sub)}

/* qué incluye: casillas que se marcan */
.checks{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:16px}
.checks li{display:flex;gap:18px;padding:26px;background:var(--card);border:1px solid var(--line)}
.box{flex:none;width:32px;height:32px;border:3px solid #4a4a4a;position:relative;transition:border-color .3s}
.box::after{content:"";position:absolute;inset:5px;background:var(--tx);transform:scale(0);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.checks li.in .box{border-color:var(--tx)}
.checks li.in .box::after{transform:scale(1)}
.checks h3{font-size:19px;margin-bottom:8px}
.checks p{color:var(--sub);font-size:14.5px}

/* proceso */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:16px}
.steps li{padding:28px;border:1px solid var(--line)}
.steps .n{display:inline-block;background:var(--tx);color:var(--bg);font-weight:800;padding:2px 8px;margin-bottom:22px}
.steps h3{font-size:22px;margin-bottom:10px}
.steps p{color:var(--sub);font-size:15px}

/* cotiza */
.quote{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.quote-txt p:not(.label){color:var(--sub);margin-bottom:24px;max-width:44ch}
.quote .h2{margin-bottom:28px}
.form{display:grid;gap:18px;padding:32px;background:var(--card);border:1px solid var(--line)}
.field{display:grid;gap:8px;border:0;padding:0;margin:0;min-width:0}
.field label,.field legend{font-size:14px;color:var(--sub);padding:0}
input,select,textarea{
  width:100%;background:var(--bg);color:var(--tx);border:1px solid #3a3a3a;border-radius:0;
  font:400 16px var(--mono);padding:13px 14px;min-height:48px;
}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--tx);outline-offset:0;border-color:var(--tx)}
.opts{display:flex;gap:10px;flex-wrap:wrap}
.opts label{display:flex;align-items:center;gap:8px;border:1px solid #3a3a3a;padding:0 14px;min-height:44px;cursor:pointer;color:var(--tx)}
.opts input{width:18px;height:18px;min-height:0;accent-color:#FAFAFA;margin:0}
.opts label:has(input:checked){border-color:var(--tx)}
.err{color:var(--tx);background:#2a1010;border:1px solid #6a2a2a;padding:10px 12px;font-size:14px}

/* pie */
.foot{border-top:1px solid var(--line);padding:32px 0;font-size:14px;color:var(--sub)}
.foot-in{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.foot .brand{font-size:18px;color:var(--tx)}
.muted{margin-left:auto;color:var(--gray)}

/* inicio genérico: una página que se arma sola */
/* página gris (Niebla) con botones negros, sobre el fondo oscuro del sitio */
.build{width:min(460px, 100%);background:#C8C8C8;border:1px solid #C8C8C8;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(255,255,255,.05);position:relative}
.build-bar{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-bottom:1px solid #A9A9A9;background:#B8B8B8}
.build-bar i{width:11px;height:11px;border:1.5px solid #555}
.build-bar span{flex:1;margin-left:14px;background:#A9A9A9;color:#111;font-size:12px;text-align:center;padding:3px 0;min-height:24px}
.build-page{padding:22px;display:grid;gap:22px}
.build-page span{display:block;background:#9E9E9E;animation:pop 8s cubic-bezier(.22,1,.36,1) infinite}
.b-nav{display:flex;gap:10px;align-items:center}
.b-nav span{height:8px;width:44px}
.b-nav .b-logo{width:58px;height:16px;background:#0A0A0A;margin-right:auto}
.b-nav .b-btn{width:62px;height:20px;background:#0A0A0A}
.b-hero{display:grid;gap:12px;padding:12px 0 6px}
.b-t1{height:26px;width:88%;background:#1F1F1F!important}
.b-t2{height:26px;width:58%;background:#0A0A0A!important}
.b-p{height:9px;width:76%}
.b-cta{height:34px;width:130px;background:#0A0A0A!important;margin-top:6px}
.b-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.b-cards span{height:86px;border:1px solid #A9A9A9;background:#BDBDBD}
.b-nav span:nth-child(1){animation-delay:.1s}.b-nav span:nth-child(2){animation-delay:.2s}.b-nav span:nth-child(3){animation-delay:.25s}.b-nav span:nth-child(4){animation-delay:.3s}
.b-t1{animation-delay:.6s!important}.b-t2{animation-delay:.8s!important}.b-p{animation-delay:1s!important}.b-cta{animation-delay:1.2s!important}
.b-cards span:nth-child(1){animation-delay:1.5s}.b-cards span:nth-child(2){animation-delay:1.65s}.b-cards span:nth-child(3){animation-delay:1.8s}
/* parte visible; se desarma y se vuelve a armar pieza por pieza */
@keyframes pop{0%,70%{opacity:1;transform:none}76%,82%{opacity:0;transform:translateY(10px)}90%,100%{opacity:1;transform:none}}
.build-tag{position:absolute;right:-14px;bottom:-18px;background:var(--bg);color:var(--tx);border:1px solid var(--tx);font-size:14px;padding:8px 12px;font-weight:300}
.build-tag b{font-weight:800}
.build-tag span{font-weight:400;margin-left:6px}
.build-tag span::before{content:"✓ "}

/* servicios */
.svc{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:16px}
.svc li{padding:28px;border:1px solid var(--line);background:var(--card)}
.svc .n{display:inline-block;color:var(--gray);margin-bottom:26px}
.svc h3{font-size:22px;margin-bottom:10px}
.svc p{color:var(--sub);font-size:14.5px}

/* especialidad música */
.spec{display:grid;gap:10px;margin-top:40px;padding:32px;border:2px solid var(--tx);text-decoration:none;transition:background .2s,color .2s}
.spec-k{color:var(--gray);font-size:14px}
.spec-t{font-weight:800;font-size:clamp(24px, 3vw, 34px);letter-spacing:-.03em}
.spec-p{color:var(--sub);max-width:60ch}
.spec-go{font-weight:800;margin-top:8px}
.spec:hover{background:var(--tx);color:var(--bg)}
.spec:hover .spec-p,.spec:hover .spec-k{color:#333}
.nav .back{color:var(--gray)}
.foot-link{color:var(--sub)}

/* aparición al hacer scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease var(--d,0ms), transform .7s cubic-bezier(.22,1,.36,1) var(--d,0ms)}
.reveal .box::after{transition-delay:calc(var(--d,0ms) + 250ms)}
.reveal.in{opacity:1;transform:none}

/* responsive */
@media (max-width: 960px){
  .hero{grid-template-columns:1fr;min-height:0;padding:48px 0 72px;gap:56px}
  .proj,.quote{grid-template-columns:1fr;gap:36px}
  .checks,.svc{grid-template-columns:repeat(2, minmax(0,1fr))}
  .steps{grid-template-columns:1fr}
  .build-tag{right:-6px}
}
@media (max-width: 640px){
  .nav{display:none}
  .top-in{justify-content:space-between}
  .checks,.svc{grid-template-columns:1fr}
  .sec{padding:72px 0}
  .build-tag{right:8px}
  .form{padding:22px}
  .muted{margin-left:0}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}