/* Medusa Labs: se apoya en ../guias/guias.css (tokens, barra, fondo, tipografías) */
.lab-hero{padding:136px 0 30px}
.lab-hero h1{font-family:var(--head);font-weight:800;font-size:clamp(2.4rem,5.6vw,4.2rem);line-height:1;letter-spacing:-.045em;margin:.25em 0 .3em}
.lab-hero h1 em{font-style:normal;color:var(--teal-hi)}
.lab-hero p{color:var(--muted);max-width:60ch;font-size:1.08rem}
.crumbs{font-size:.88rem;color:var(--muted)}
.crumbs a{color:var(--teal);font-weight:600}

/* Portada de Labs */
.lab-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;padding:26px 0 110px}
.lab-grid>.lab-card{grid-column:span 2}
.lab-grid>.lab-card:nth-child(n+4){grid-column:span 3}
.lab-card{position:relative;display:flex;flex-direction:column;gap:12px;min-height:300px;padding:26px;border-radius:24px;border:1px solid var(--line);background:var(--surface);overflow:hidden;isolation:isolate;transition:transform .45s var(--ease),border-color .35s,box-shadow .35s}
.lab-card::before{content:"";position:absolute;inset:auto -30% -50% auto;width:340px;height:340px;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(31,191,174,.22),transparent);opacity:.6;transition:opacity .35s,transform .6s var(--ease)}
.lab-card:hover{transform:translateY(-6px);border-color:rgba(31,191,174,.6);box-shadow:var(--shadow)}
.lab-card:hover::before{opacity:1;transform:scale(1.15)}
.lab-card.dark{background:linear-gradient(160deg,#0d1b19,#060908);color:#eef4f3;border-color:rgba(255,255,255,.08)}
.lab-card.dark p{color:#9fb0ad}
.lab-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--soft);color:var(--teal-hi);border:1px solid rgba(31,191,174,.3)}
.lab-card.dark .lab-ic{background:rgba(31,191,174,.12)}
.lab-ic svg{width:26px;height:26px}
.lab-chip{align-self:flex-start;font-family:var(--cond);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.74rem;padding:.3em .75em;border-radius:8px;border:1px solid rgba(31,191,174,.45);color:var(--teal-hi)}
.lab-card h2{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:1.75rem;line-height:1.02;margin-top:auto}
.lab-card p{color:var(--muted);font-size:.95rem}
.lab-go{display:inline-flex;align-items:center;gap:.45em;font-family:var(--cond);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-hi);margin-top:6px}
.lab-go svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.lab-card:hover .lab-go svg{transform:translateX(5px)}

/* Página de herramienta */
.tool-wrap{max-width:1040px;margin-inline:auto;padding-bottom:90px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:var(--surface)}
.ctrl label{display:block;font-family:var(--cond);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.75rem;color:var(--muted);margin-bottom:6px}
.ctrl input[type=number]{width:120px;padding:.65em .8em;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:600 1.05rem var(--body)}
.ctrl .seg{display:inline-flex;flex-wrap:wrap}
.ctrl>div{min-width:0}
.ctrl .seg button{white-space:nowrap;padding:.55em .95em}
.pill svg{width:16px;height:16px}
.hint-pill::before{display:none}
.ctrl .grow{flex:1}
.pill{display:inline-flex;align-items:center;gap:.5em;font-family:var(--cond);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.85rem;color:var(--muted)}
.pill::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--muted)}
.pill[data-s="ready"]::before{background:#1fbfae}
.pill[data-s="live"]{color:var(--ink)}
.pill[data-s="live"]::before{background:#45ff7c;box-shadow:0 0 0 0 rgba(69,255,124,.6);animation:ping 1.2s infinite}
.pill[data-s="done"]::before{background:var(--yellow)}
@keyframes ping{70%{box-shadow:0 0 0 8px rgba(69,255,124,0)}100%{box-shadow:0 0 0 0 rgba(69,255,124,0)}}
.btn-sm{padding:.6em 1.1em;font-size:.85rem}

.stage{position:relative;border-radius:20px;background:linear-gradient(160deg,#0d1b19,#050807);color:#eef4f3;overflow:hidden;isolation:isolate;border:1px solid rgba(255,255,255,.07)}
.stage::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 70% at 50% 40%,rgba(31,191,174,.16),transparent 70%)}
.pbar{position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#1fbfae,#e9cf1d);transform-origin:0 50%;transform:scaleX(0);transition:transform .15s linear}
.zone{margin:22px;min-height:340px;border:1.5px dashed rgba(159,243,234,.22);border-radius:14px;display:grid;place-items:center;text-align:center;padding:24px;cursor:crosshair;user-select:none;-webkit-user-select:none;touch-action:none;position:relative;overflow:hidden;transition:border-color .3s,background .3s}
.zone:hover{border-color:rgba(159,243,234,.45)}
.zone.done{border-style:solid;border-color:rgba(233,207,29,.4)}
.zone .big{display:block;font-family:var(--head);font-weight:800;font-size:clamp(3.2rem,9vw,5.6rem);letter-spacing:-.04em;line-height:1;color:#1fbfae;font-variant-numeric:tabular-nums}
.zone .big.pop{animation:popb .5s var(--ease)}
@keyframes popb{40%{transform:scale(1.12);color:#e9cf1d}}
.zone .msg{display:block;margin-top:14px;font-family:var(--cond);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:1.05rem}
.zone .sub{display:block;margin-top:6px;color:#9fb0ad;font-size:.92rem}
.ripple{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:rgba(31,191,174,.8);pointer-events:none;animation:rip .6s ease-out forwards}
@keyframes rip{to{transform:scale(9);opacity:0}}

.stats{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line);padding:14px 0}
.stats div{text-align:center;padding:4px 8px}
.stats div+div{border-left:1px solid var(--line)}
.stats b{display:block;font-family:var(--head);font-weight:800;font-size:1.9rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stats div:first-child b{color:var(--teal-hi)}
.stats span{font-family:var(--cond);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 18px}
.best{font-size:.92rem;color:var(--muted);text-align:center}
.note{border-left:3px solid var(--teal-hi);padding:6px 0 6px 16px;color:var(--muted);font-size:.9rem}
.note strong{color:var(--ink)}

/* Test de mecanografía */
.ty-box{position:relative;margin:22px;min-height:220px;padding:26px 28px;border:1.5px dashed rgba(159,243,234,.22);border-radius:14px;cursor:text}
#lab-typing.focus .ty-box{border-color:rgba(31,191,174,.7)}
#ty-text{font:500 clamp(1.15rem,2.4vw,1.5rem)/1.8 var(--body);color:#5f706d;word-break:break-word}
#ty-text .ok{color:#eef4f3}
#ty-text .bad{color:#ff8a8a;background:rgba(255,80,80,.18);border-radius:3px}
#ty-text .cur{box-shadow:inset 2px 0 0 #1fbfae;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{box-shadow:inset 2px 0 0 transparent}}
#ty-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;resize:none;cursor:text}
.ty-hint{display:block;margin-top:16px;font-family:var(--cond);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.8rem;color:#9fb0ad}

/* Aim trainer */
.aim-area{position:relative;margin:22px;height:460px;border:1.5px dashed rgba(159,243,234,.22);border-radius:14px;overflow:hidden}
#aim-canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none}
#lab-aim.playing .aim-area{border-style:solid;border-color:rgba(31,191,174,.5)}
.aim-msg[hidden]{display:none}
.aim-msg{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;padding:20px;background:rgba(5,7,6,.55)}
.aim-msg b{font-family:var(--head);font-weight:800;font-size:clamp(2.4rem,6vw,3.6rem);letter-spacing:-.04em;color:#1fbfae}
.aim-msg span{color:#c9d6d3;max-width:42ch}

/* Audio arena */
.au-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:center;margin:22px}
.radar{position:relative;width:min(100%,400px);aspect-ratio:1;margin-inline:auto;border-radius:50%;background:radial-gradient(circle,rgba(31,191,174,.14),transparent 62%),repeating-radial-gradient(circle,rgba(159,243,234,.12) 0 1px,transparent 1px 58px)}
.radar .head{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:#0f1d1b;border:2px solid #1fbfae;display:grid;place-items:center;color:#9ff3ea}
.radar .head svg{width:34px;height:34px}
.dir{position:absolute;width:92px;height:52px;margin:-26px 0 0 -46px;border-radius:14px;border:1px solid rgba(159,243,234,.3);background:rgba(5,7,6,.85);color:#eef4f3;font:600 .72rem/1.15 var(--body);cursor:pointer;transition:background .2s,border-color .2s,transform .2s var(--ease)}
.dir:hover{border-color:#1fbfae;transform:scale(1.06)}
.dir.ok{background:#14532d;border-color:#45ff7c}
.dir.bad{background:#5a1717;border-color:#ff6b6b}
.dir.answer{border-color:#e9cf1d;box-shadow:0 0 0 3px rgba(233,207,29,.35)}
.au-side{text-align:center;display:grid;gap:14px;justify-items:center}
.au-side .msg{font-family:var(--cond);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:1.2rem}
.au-side .sub{color:#9fb0ad;font-size:.92rem;max-width:36ch}
.au-side .btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}

@media (max-width:980px){
  .lab-grid{grid-template-columns:repeat(2,1fr)}
  .lab-grid>.lab-card,.lab-grid>.lab-card:nth-child(n+4){grid-column:span 1}
  .lab-grid>.lab-card:last-child{grid-column:1 / -1}
}
@media (max-width:760px){
  .stats{grid-template-columns:1fr 1fr;gap:12px 0}
  .stats div:nth-child(3){border-left:0}
  .au-stage{grid-template-columns:1fr}
  .dir{width:76px;height:46px;margin:-23px 0 0 -38px;font-size:.66rem}
}
@media (max-width:600px){
  .lab-hero{padding:112px 0 20px}
  .lab-grid{grid-template-columns:1fr}
  .lab-grid>.lab-card:last-child{grid-column:auto}
  .zone,.ty-box,.aim-area,.au-stage{margin:14px}
  .zone{min-height:280px}
  .aim-area{height:380px}
  .ty-box{padding:20px}
  .ctrl input[type=number]{width:100px}
  .ctrl .seg button{padding:.5em .7em;font-size:.85rem}
}
@media (prefers-reduced-motion:reduce){
  .pill[data-s="live"]::before,#ty-text .cur{animation:none}
}