:root{
  --ink:#1A1819;
  --ink-2:#201E1E;
  --surface:#2A2727;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.16);
  --text:#EDEDEF;
  --muted:#9A959C;
  --muted-2:#66626A;
  --accent:#0098DA;
  --accent-2:#6E4D8B;
  --accent-dim:rgba(0,152,218,.14);
  --pad:clamp(20px,5vw,40px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;background:var(--ink);color:var(--text);
  font-family:"Instrument Sans",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:44px var(--pad);position:relative;
}
h1,h2{font-family:"Bricolage Grotesque",sans-serif;letter-spacing:-.02em;line-height:1.04}
.mono{font-family:"JetBrains Mono",monospace}

/* Ambient background */
.backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.grid{position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 20%,transparent 75%);
          mask-image:radial-gradient(120% 80% at 50% 0%,#000 20%,transparent 75%);opacity:.5}
.aura{position:absolute;top:-10%;left:50%;width:min(680px,120vw);height:min(680px,120vw);
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(0,152,218,.20),rgba(110,77,139,.14) 45%,transparent 66%);
  filter:blur(30px)}

.wrap{position:relative;z-index:1;width:100%;max-width:460px;text-align:center}

/* Header */
.brand-logo{width:96px;height:96px;margin:0 auto 22px;display:block;
  filter:drop-shadow(0 10px 26px rgba(0,152,218,.28));
  animation:pop .7s cubic-bezier(.2,.8,.2,1) both}
.name{font-size:30px;font-weight:800;
  background:linear-gradient(100deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.tagline{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-top:12px}
.divider{width:54px;height:3px;border-radius:3px;margin:20px auto 0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2))}

/* Link buttons */
.links{display:flex;flex-direction:column;gap:14px;margin-top:34px}
.link{
  display:flex;align-items:center;gap:16px;width:100%;
  background:var(--ink-2);border:1px solid var(--line);border-radius:14px;
  padding:16px 20px;color:var(--text);text-decoration:none;position:relative;
  transition:transform .18s ease,border-color .2s ease,background .2s ease;
  animation:rise .6s ease both}
.link:hover{transform:translateY(-3px);border-color:var(--accent);background:var(--surface);
  box-shadow:0 10px 30px rgba(0,152,218,.16),0 3px 14px rgba(110,77,139,.14)}
.link:active{transform:translateY(-1px)}
.link .ic{width:40px;height:40px;flex:none;display:grid;place-items:center;color:#fff;border-radius:11px;
  background:linear-gradient(135deg,rgba(0,152,218,.22),rgba(110,77,139,.22));
  border:1px solid var(--line-strong);transition:background .2s,border-color .2s}
.link:hover .ic{background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent}
.link .ic svg{width:22px;height:22px}
.link .lbl{font-weight:600;font-size:16px}
.link .sub{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted);margin-top:2px}
.link .txt{flex:1;text-align:left;display:flex;flex-direction:column}
.link .arw{color:var(--muted-2);font-family:"JetBrains Mono",monospace;transition:color .2s,transform .2s}
.link:hover .arw{color:var(--accent);transform:translateX(3px)}

.links .link:nth-child(1){animation-delay:.10s}
.links .link:nth-child(2){animation-delay:.18s}
.links .link:nth-child(3){animation-delay:.26s}
.links .link:nth-child(4){animation-delay:.34s}
.links .link:nth-child(5){animation-delay:.42s}
.links .link:nth-child(6){animation-delay:.50s}

.foot{margin-top:36px;font-family:"JetBrains Mono",monospace;font-size:11.5px;
  letter-spacing:.06em;color:var(--muted-2)}
.foot a{color:var(--muted);text-decoration:none}

a:focus-visible,.link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}

/* ---------- Construcción page ---------- */
.build{position:relative;z-index:1;width:100%;max-width:560px;text-align:center}
.stage{position:relative;width:220px;height:220px;margin:0 auto 40px;display:grid;place-items:center}
.ring{position:absolute;inset:-26px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--accent),var(--accent-2),var(--accent));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));
  opacity:.55;filter:blur(.3px);animation:spin 7s linear infinite}
.halo{position:absolute;inset:-40px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,152,218,.28),rgba(110,77,139,.16) 50%,transparent 68%);
  filter:blur(18px);animation:pulse 3.6s ease-in-out infinite}
.iso{width:150px;height:150px;position:relative;z-index:2;
  animation:float 5s ease-in-out infinite;
  filter:drop-shadow(0 14px 30px rgba(0,152,218,.32))}

/* Assembling cube: 3 copies of the logo, each clipped to one face */
.cube{position:relative;z-index:2;width:158px;aspect-ratio:2629/2831;
  filter:drop-shadow(0 14px 30px rgba(0,152,218,.30));
  animation:float 5s ease-in-out infinite;animation-delay:1.5s}
.face{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* top (blue / D) drops from above; left (dark / S) from the left; right (purple / M) from the right */
.face-top{clip-path:polygon(50% 0,100% 30%,50% 50%,0 30%);
  animation:dropIn 1s cubic-bezier(.2,.85,.25,1) both;animation-delay:.3s}
.face-left{clip-path:polygon(0 30%,50% 50%,50% 100%,0 72%);
  animation:leftIn 1.05s cubic-bezier(.2,.85,.25,1) both;animation-delay:.15s}
.face-right{clip-path:polygon(100% 30%,100% 72%,50% 100%,50% 50%);
  animation:rightIn 1.05s cubic-bezier(.2,.85,.25,1) both;animation-delay:.15s}
/* Logo completo: aparece SOLO cuando todas las piezas ya llegaron (evita el doble fantasma) */
.face-full{opacity:0;animation:fullIn .4s ease both;animation-delay:1.45s}

.build h1{font-size:clamp(28px,6vw,44px);font-weight:800}
.build h1 .g{background:linear-gradient(100deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.build p{color:var(--muted);margin-top:16px;font-size:clamp(15px,2.6vw,18px);max-width:42ch;margin-left:auto;margin-right:auto}

.bar{width:min(320px,80vw);height:6px;border-radius:20px;margin:34px auto 0;overflow:hidden;
  background:var(--ink-2);border:1px solid var(--line);position:relative}
.bar::before{content:"";position:absolute;top:0;bottom:0;width:40%;border-radius:20px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);
  animation:slide 1.8s ease-in-out infinite}
.build .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:"JetBrains Mono",monospace;font-size:14px;
  padding:13px 22px;border-radius:11px;text-decoration:none;color:var(--text);cursor:pointer;
  transition:transform .18s,background .2s,border-color .2s}
.btn-primary{background:var(--accent);color:#08141b;font-weight:600}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--line-strong)}
.btn-ghost:hover{border-color:var(--accent);background:var(--accent-dim)}
.btn svg{width:16px;height:16px}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(-8px)}50%{transform:translateY(8px)}}
@keyframes pulse{0%,100%{opacity:.5;transform:scale(.96)}50%{opacity:.9;transform:scale(1.05)}}
@keyframes slide{0%{left:-40%}100%{left:100%}}
@keyframes dropIn{0%{opacity:0;transform:translateY(-95%)}55%{opacity:1}100%{opacity:1;transform:translateY(0)}}
@keyframes leftIn{0%{opacity:0;transform:translateX(-95%)}55%{opacity:1}100%{opacity:1;transform:translateX(0)}}
@keyframes rightIn{0%{opacity:0;transform:translateX(95%)}55%{opacity:1}100%{opacity:1;transform:translateX(0)}}
@keyframes fullIn{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .brand-logo,.link,.iso,.ring,.halo,.bar::before,.cube,.face-top,.face-left,.face-right,.face-full{animation:none!important}
  .face{transform:none!important;opacity:1!important}
  .face-full{opacity:1!important}
  .iso,.cube{filter:drop-shadow(0 14px 30px rgba(0,152,218,.32))}
}