/* ==========================================================================
   WISD · chasis del showcase. La identidad de las piezas vive en stage.css;
   aqui solo esta la pagina que las enmarca.
   ========================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink-soft);font-family:var(--ui);
  background:
    radial-gradient(1200px 800px at 12% -6%, rgba(164,189,222,.34), transparent 58%),
    radial-gradient(1000px 900px at 92% 8%, rgba(155,189,195,.30), transparent 56%),
    radial-gradient(1100px 900px at 50% 108%, rgba(138,139,128,.22), transparent 60%),
    linear-gradient(170deg,#ffffff 0%,#f7f8f6 44%,#eef0ec 100%);
  background-attachment:fixed;min-height:100vh;
}
a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}

/* ------------------------------- cabecera -------------------------------- */
.top{padding:96px 0 26px}
.brand{
  font-family:var(--mark);font-weight:700;font-size:26px;letter-spacing:.36em;color:var(--ink);
}
.eyebrow{
  margin-top:34px;font-size:14px;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--teal);
}
h1{
  font-family:var(--display);font-weight:200;letter-spacing:-.035em;line-height:.96;
  font-size:clamp(46px,7.2vw,104px);margin:18px 0 0;max-width:15ch;
}
h1 em{font-style:normal;font-weight:600;color:var(--teal)}
.lede{
  margin:32px 0 0;max-width:62ch;font-size:clamp(17px,1.6vw,21px);
  line-height:1.62;color:var(--ink-mute);
}
.facts{display:flex;flex-wrap:wrap;gap:12px;margin:38px 0 0}
.fact{
  display:inline-flex;align-items:center;gap:10px;background:#fff;
  border:1px solid rgba(39,39,42,.22);border-radius:999px;padding:11px 20px;
  font-size:14px;font-weight:500;box-shadow:0 8px 24px rgba(48,53,54,.07);
}
.fact b{color:var(--teal);font-weight:700}
.fact .dot{width:9px;height:9px;border-radius:50%;background:var(--teal-bright)}

/* -------------------------------- rejilla -------------------------------- */
.grid{
  display:grid;gap:30px;padding:60px 0 40px;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
}
.piece{
  background:rgba(255,255,255,.72);border:1px solid rgba(155,189,195,.5);
  border-radius:30px;padding:20px 20px 22px;
  box-shadow:0 20px 60px rgba(48,53,54,.09);
  backdrop-filter:blur(8px);display:flex;flex-direction:column;
  transition:box-shadow .35s,transform .35s,border-color .35s;
}
.piece:hover{
  box-shadow:0 30px 80px rgba(48,53,54,.15);transform:translateY(-4px);
  border-color:rgba(92,144,153,.75);
}
.screen{
  position:relative;border-radius:22px;overflow:hidden;background:#f7f8f6;
  box-shadow:inset 0 0 0 1px rgba(48,53,54,.10),0 12px 32px rgba(48,53,54,.10);
}
.screen .holder{position:relative;overflow:hidden}
.screen .stage{position:absolute;left:0;top:0}
.badge{
  position:absolute;left:14px;top:14px;z-index:3;
  background:rgba(255,255,255,.92);border:1px solid rgba(39,39,42,.2);
  border-radius:999px;padding:6px 13px;font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal);
  box-shadow:0 6px 18px rgba(48,53,54,.1);
}
.n{
  position:absolute;right:14px;top:14px;z-index:3;font-family:var(--display);
  font-size:15px;font-weight:600;color:rgba(48,53,54,.42);letter-spacing:.1em;
}

/* ------------------------------ controles -------------------------------- */
.screen .mp4{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:none;background:#f7f8f6;
}
.piece.video .mp4{display:block}
.piece.video .stage-host{visibility:hidden}
.piece.video .ctl{opacity:.35;pointer-events:none}
.swap{
  position:absolute;right:14px;bottom:14px;z-index:4;cursor:pointer;
  border:1px solid rgba(39,39,42,.22);background:rgba(255,255,255,.94);
  border-radius:999px;padding:8px 15px;font:600 12px/1 var(--ui);color:var(--ink-soft);
  box-shadow:0 6px 18px rgba(48,53,54,.14);transition:background .2s,color .2s;
}
.swap:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.piece.video .swap{background:var(--teal);color:#fff;border-color:var(--teal)}

.ctl{display:flex;align-items:center;gap:12px;margin-top:16px}
.btn{
  width:44px;height:44px;flex:none;border-radius:50%;border:1px solid rgba(39,39,42,.26);
  background:#fff;cursor:pointer;display:grid;place-items:center;color:var(--ink);
  transition:background .2s,color .2s,border-color .2s;
}
.btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn svg{width:16px;height:16px;fill:currentColor}
.btn .ic-pause{display:none}
.piece.playing .btn .ic-play{display:none}
.piece.playing .btn .ic-pause{display:block}
.scrub{
  flex:1;appearance:none;height:4px;border-radius:3px;cursor:pointer;
  background:linear-gradient(90deg,var(--teal) var(--p,0%),rgba(48,53,54,.14) var(--p,0%));
}
.scrub::-webkit-slider-thumb{
  appearance:none;width:15px;height:15px;border-radius:50%;background:#fff;
  border:2px solid var(--teal);box-shadow:0 2px 8px rgba(48,53,54,.25);
}
.scrub::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;background:#fff;border:2px solid var(--teal);
}
.time{
  font-size:12px;font-weight:600;color:var(--ink-mute);min-width:74px;text-align:right;
  font-variant-numeric:tabular-nums;
}
.meta{margin-top:18px;flex:1;display:flex;flex-direction:column}
.meta h2{
  font-family:var(--display);font-weight:400;letter-spacing:-.02em;
  font-size:26px;line-height:1.16;margin:0;
}
.meta p{margin:11px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-mute)}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.tag{
  font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--ink-mute);
  border:1px solid rgba(48,53,54,.16);border-radius:999px;padding:5px 11px;background:rgba(255,255,255,.7);
}
.dl{
  margin-top:16px;display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  font-size:13px;font-weight:600;color:var(--teal);text-decoration:none;
  border-bottom:1px solid rgba(92,144,153,.4);padding-bottom:3px;
}
.dl:hover{color:var(--ink);border-color:var(--ink)}

/* --------------------------------- notas --------------------------------- */
.band{
  margin:40px 0 0;padding:44px;border-radius:30px;background:rgba(255,255,255,.6);
  border:1px solid rgba(155,189,195,.5);
}
.band h3{
  font-family:var(--display);font-weight:400;font-size:clamp(26px,3vw,38px);
  letter-spacing:-.025em;margin:0 0 14px;
}
.band p{margin:0 0 14px;max-width:78ch;line-height:1.68;color:var(--ink-mute);font-size:16px}
.band code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;
  background:rgba(92,144,153,.12);padding:3px 8px;border-radius:7px;color:var(--ink-soft);
}
.band ul{margin:0;padding-left:20px;color:var(--ink-mute);line-height:1.8;font-size:16px}
.band ul b{color:var(--ink-soft)}
.old{
  margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:20px;
  justify-content:space-between;
}
footer{padding:56px 0 80px;color:var(--ink-mute);font-size:14px;line-height:1.7}
footer b{font-family:var(--mark);letter-spacing:.3em;color:var(--ink)}

@media(max-width:700px){
  .wrap{padding:0 18px}
  .top{padding:56px 0 14px}
  .grid{grid-template-columns:1fr;gap:22px;padding-top:40px}
  .band{padding:26px;border-radius:24px}
}
@media(prefers-reduced-motion:reduce){.piece:hover{transform:none}}