:root{--bg:#0f0d0c;--p:#1b1714;--l:#2c2622;--ink:#F4EFE7;--dim:#A79E92;--accent:#E08A3C;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:"IBM Plex Sans",system-ui,sans-serif;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:1440px;margin:0 auto;padding:26px 36px 20px}
.logo{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.02em;font-size:22px}
.logo b{color:var(--accent);font-weight:800}
.disp{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.02em}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.top span,.top a.back{color:var(--dim);font-size:14px}.top a.back:hover{color:var(--accent)}
.th{position:relative;overflow:hidden;width:100%;background:#14110F}
.th iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;pointer-events:none}
/* home */
h1.hero{font-size:clamp(34px,5vw,46px);margin:0 0 6px;line-height:1}
h1.hero em{font-style:normal;color:var(--accent)}
.sub{color:var(--dim);margin:0 0 22px}
.g{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:150px;gap:14px}
.c{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--l);background:var(--p);display:block;transition:transform .2s,border-color .2s}
.c:hover{transform:translateY(-3px);border-color:var(--accent)}
.c .th{position:absolute;inset:0;height:100%}
.c:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 22%,rgba(15,13,12,.95))}
.c .t{position:absolute;left:18px;right:18px;bottom:16px;z-index:2}
.c .t small{font:600 10px "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.c .t h2{margin:3px 0 0;font-size:19px;line-height:1.15}.c.big .t h2{font-size:30px}
.c .new{position:absolute;z-index:2;top:14px;right:14px;background:var(--accent);color:#14110F;font:600 10px "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:99px}
.c0{grid-column:span 4;grid-row:span 3}.c1,.c2{grid-column:span 2;grid-row:span 2}.c3,.c4{grid-column:span 3;grid-row:span 2}
.c5,.c6,.c7,.c8,.c9{grid-column:span 2;grid-row:span 2}
.foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-top:28px;padding-top:16px;border-top:1px solid var(--l);color:var(--dim);font:12px "IBM Plex Mono",monospace;letter-spacing:.03em}
.pwrap{display:flex;align-items:center;gap:9px}.pwrap a:not(.qr){border-bottom:1px solid var(--l)}.pwrap a:hover{color:var(--accent)}
.qr{display:block;line-height:0;border-radius:3px}.qr svg{display:block;width:34px;height:34px}
.tr{display:flex;align-items:center;gap:18px}
.yt{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--l);border-radius:8px;padding:7px 12px;font-size:13px;color:var(--dim);transition:color .18s,border-color .18s,background .18s}
.yt svg{width:18px;height:13px;flex:none}.yt .body{fill:currentColor;opacity:.6;transition:fill .18s,opacity .18s}.yt .play{fill:var(--bg)}
.yt:hover,.yt:focus-visible{color:var(--ink);border-color:#4A4139;background:var(--p)}.yt:hover .body,.yt:focus-visible .body{fill:#E62117;opacity:1}
/* detalle */
.crumb{font:600 11px "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.dh{margin:4px 0 20px;max-width:980px}.dh h1{font-size:clamp(28px,4vw,40px);line-height:1.05;margin:6px 0 8px}.dh p{margin:0;color:var(--dim)}
.dl{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.viewer{background:var(--p);border:1px solid var(--l);border-radius:14px;overflow:hidden}
.vbar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--l);font:12px "IBM Plex Mono",monospace;color:var(--dim)}
.vbar .sp{margin-left:auto;display:flex;gap:8px}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--l);background:none;color:var(--ink);border-radius:8px;padding:7px 12px;font:500 13px "IBM Plex Sans",sans-serif;cursor:pointer}
.btn:hover{border-color:var(--accent)}.btn.p{background:var(--accent);border-color:var(--accent);color:#14110F;font-weight:600}
.viewer iframe{display:block;width:100%;height:78vh;min-height:560px;border:0;background:#14110F}
.viewer:fullscreen iframe{height:calc(100vh - 49px)}
.side{background:var(--p);border:1px solid var(--l);border-radius:14px;padding:18px}
.side h3{font:600 11px "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:0 0 10px}
.side p{margin:0 0 14px;font-size:14.5px}.side ul{margin:0;padding-left:18px;color:var(--dim);font-size:14px}.side li{margin-bottom:8px}
.side dl{margin:16px 0 0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:13px;border-top:1px solid var(--l);padding-top:14px}.side dt{color:var(--dim)}.side dd{margin:0}
.more h2{font:600 11px "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:30px 0 12px}
.mg{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mc{border:1px solid var(--l);border-radius:12px;overflow:hidden;background:var(--p);display:block}.mc:hover{border-color:var(--accent)}
.mc .th{aspect-ratio:16/10}.mc b{display:block;padding:10px 12px;font-size:13.5px;line-height:1.25;font-weight:500}
@media (max-width:1000px){
  .g{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  .c,.c0,.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9{grid-column:span 1;grid-row:auto;min-height:230px}
  .c0{grid-column:span 2;min-height:300px}
  .dl{grid-template-columns:1fr}.mg{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .wrap{padding:18px 16px 16px}
  .g{grid-template-columns:minmax(0,1fr)}.c0{grid-column:span 1;min-height:240px}.c .t h2,.c.big .t h2{font-size:20px}
  .top{flex-wrap:wrap}.tr{gap:10px}.yt span,.top #count{display:none}.yt{padding:7px 10px}.mg{grid-template-columns:1fr}.viewer iframe{height:72vh;min-height:480px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}