/* ═══════════════════════════════════════════════
   INDEX LABS — hub de labs y herramientas
   Toma los tokens del design system de index-website
   para que entrar acá no se sienta otro sitio.
═══════════════════════════════════════════════ */

:root{
  --paper:#ffffff;
  --blue:#0057FF;
  --cyan:#00CFFF;
  --border:rgba(255,255,255,.07);
  --border-hi:rgba(255,255,255,.16);
  --dim:rgba(255,255,255,.45);
  --dimmer:rgba(255,255,255,.22);
  --syne:'Syne',sans-serif;
  --inter:'Inter',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --r:1120px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:#03030a;color:var(--paper);
  font-family:var(--inter);line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* ───────── fondo: el mismo cosmos del sitio principal ───────── */
.stars{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:
  radial-gradient(1200px 720px at 76% 6%, rgba(0,87,255,.12), transparent 60%),
  radial-gradient(950px 640px at 10% 68%, rgba(120,50,220,.09), transparent 60%),
  radial-gradient(760px 520px at 52% 116%, rgba(0,207,255,.07), transparent 60%)}
.stars::before,.stars::after{content:'';position:absolute;inset:-60%;background-repeat:repeat}
.stars::before{background-image:
  radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.9), transparent 60%),
  radial-gradient(1.3px 1.3px at 65% 18%, rgba(255,255,255,.7), transparent 60%),
  radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,.6), transparent 60%),
  radial-gradient(1.7px 1.7px at 82% 52%, rgba(200,220,255,.85), transparent 60%),
  radial-gradient(1px 1px at 10% 85%, rgba(255,255,255,.5), transparent 60%),
  radial-gradient(1.3px 1.3px at 92% 88%, rgba(255,255,255,.7), transparent 60%);
  background-size:330px 330px;animation:drift 140s linear infinite, twinkle 6s ease-in-out infinite}
.stars::after{background-image:
  radial-gradient(1px 1px at 33% 22%, rgba(255,255,255,.5), transparent 60%),
  radial-gradient(1.5px 1.5px at 55% 40%, rgba(180,200,255,.6), transparent 60%),
  radial-gradient(1px 1px at 15% 55%, rgba(255,255,255,.4), transparent 60%);
  background-size:500px 500px;opacity:.7;animation:drift 240s linear infinite reverse, twinkle 9s ease-in-out infinite}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(-330px)}}
@keyframes twinkle{0%,100%{opacity:.9}50%{opacity:.55}}

.wrap{position:relative;z-index:1;max-width:var(--r);margin:0 auto;padding:0 2rem 6rem}

/* ───────── nav ───────── */
nav{display:flex;align-items:center;justify-content:space-between;padding:1.6rem 0}
.logo{display:flex;align-items:center;gap:.6rem;font-family:var(--syne);font-weight:800;font-size:.9rem;letter-spacing:.03em}
.logo img{width:24px;height:24px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(0,87,255,.55));animation:beat 2.6s ease-in-out infinite}
@keyframes beat{0%,38%,100%{transform:scale(1)}9%{transform:scale(1.18)}18%{transform:scale(1)}27%{transform:scale(1.11)}}
.volver{font-size:.8rem;color:var(--dim);transition:color .2s}
.volver:hover{color:var(--cyan)}

/* ───────── cabecera ───────── */
header{padding:4.5rem 0 3rem;max-width:720px}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);display:block;margin-bottom:1.1rem}
h1{font-family:var(--syne);font-size:clamp(2.6rem,7vw,4.6rem);font-weight:800;line-height:1.02;letter-spacing:-.02em}
h1 em{font-style:normal;background:linear-gradient(120deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
header p{margin-top:1.4rem;color:var(--dim);font-size:1.05rem;max-width:58ch}

/* ───────── stats ───────── */
#stats{display:flex;gap:3rem;flex-wrap:wrap;padding:2.2rem 0 0;border-top:1px solid var(--border);margin-top:2.4rem}
.stat{display:flex;flex-direction:column}
.stat b{font-family:var(--syne);font-size:2.6rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer);margin-top:.5rem}

/* ───────── filtros ───────── */
#filtros{display:flex;gap:.5rem;flex-wrap:wrap;margin:3.2rem 0 1.8rem}
.chip{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  background:transparent;color:var(--dim);border:1px solid var(--border);
  padding:.55rem 1rem;border-radius:999px;cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;
}
.chip:hover{color:var(--paper);border-color:var(--border-hi)}
.chip.on{color:#03030a;background:var(--paper);border-color:var(--paper)}

/* ───────── grilla ───────── */
#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.1rem}

.lab{
  position:relative;display:flex;flex-direction:column;
  padding:1.5rem;border:1px solid var(--border);border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  overflow:hidden;
  opacity:0;transform:translateY(14px);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),border-color .35s,box-shadow .35s;
}
.lab.in{animation:entra .5s cubic-bezier(.2,.7,.3,1) var(--d) forwards}
@keyframes entra{to{opacity:1;transform:none}}

/* Un halo del color del lab que sólo aparece al pasar por encima: la
   grilla en reposo queda tranquila y el color premia el interés. */
.lab::before{
  content:'';position:absolute;inset:-1px;border-radius:16px;pointer-events:none;
  background:radial-gradient(420px 220px at 50% -20%,color-mix(in srgb,var(--c) 22%,transparent),transparent 70%);
  opacity:0;transition:opacity .35s;
}
a.lab:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--c) 45%,transparent);box-shadow:0 18px 44px rgba(0,0,0,.5)}
a.lab:hover::before{opacity:1}

.lab-top{display:flex;align-items:center;gap:.6rem;margin-bottom:1.1rem}
.lab-dot{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c);flex-shrink:0;animation:latir 2.4s ease-in-out infinite}
@keyframes latir{0%,100%{opacity:1}50%{opacity:.35}}
.lab-tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer)}

.lab h3{font-family:var(--syne);font-size:1.45rem;font-weight:800;letter-spacing:-.01em;line-height:1.1}
.lab-claim{color:var(--c);font-size:.82rem;font-weight:600;margin-top:.25rem}
.lab-desc{color:var(--dim);font-size:.87rem;margin-top:.8rem;flex:1}

.lab-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--border)}
.lab-meta{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer)}
.lab-go{font-size:.78rem;font-weight:600;color:var(--c);white-space:nowrap;transition:transform .25s}
a.lab:hover .lab-go{transform:translateX(3px)}
.lab-go.off{color:var(--dimmer)}

/* En el taller: mismo lugar en la grilla, pero sin prometer un link que
   no existe. Se ve apagado a propósito. */
.lab.taller{opacity:.55}
.lab.taller.in{animation:entraTaller .5s cubic-bezier(.2,.7,.3,1) var(--d) forwards}
@keyframes entraTaller{to{opacity:.55;transform:none}}
.lab.taller .lab-dot{animation:none;opacity:.45;box-shadow:none}
.lab.taller:hover{opacity:.8}

footer{margin-top:5rem;padding-top:2rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer)}
footer a:hover{color:var(--cyan)}

@media(max-width:640px){
  .wrap{padding:0 1.25rem 4rem}
  header{padding:3rem 0 2rem}
  #stats{gap:2rem}
  .stat b{font-size:2.1rem}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .lab{opacity:1;transform:none}
  .lab.taller{opacity:.6}
}