/* /reels/<slug>/ — la página de cada reel. Lo común está en base.css. Lo enlaza tools/generar-reels.py */
.reel{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start;padding-top:clamp(22px,4vw,40px)}
.video{position:sticky;top:calc(var(--alto-cab) + 20px)}
.facade{position:relative;display:block;width:100%;aspect-ratio:9/16;border-radius:16px;overflow:hidden;cursor:pointer;
  background:var(--navy-2);border:1px solid rgba(247,67,11,.42);padding:0;box-shadow:0 26px 70px rgba(0,0,0,.45)}
.facade img{width:100%;height:100%;object-fit:cover;display:block}
.facade .bigplay{position:absolute;inset:0;margin:auto;width:78px;height:78px;border-radius:50%;
  background:rgba(247,67,11,.92);display:grid;place-items:center;transition:transform .2s}
.facade:hover .bigplay{transform:scale(1.08)}
.facade .bigplay::before{content:"";border-left:24px solid #070b1e;border-top:15px solid transparent;border-bottom:15px solid transparent;margin-left:7px}
.facade .hint{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 14px;font-family:var(--mono);font-size:11px;
  letter-spacing:2px;text-transform:uppercase;color:#fff;background:linear-gradient(transparent,rgba(5,8,22,.85));text-align:center}
.embed{width:100%}
.embed .instagram-media{min-width:0!important;width:100%!important;margin:0!important;border-radius:14px!important}
.video .alt{display:block;margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--dim);
  text-transform:uppercase;text-decoration:none;text-align:center}
.video .alt:hover{color:var(--primary)}
.meta{font-family:var(--mono);font-size:11px;letter-spacing:3px;color:var(--dim);text-transform:uppercase;
  display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:14px}
.meta .v{color:var(--primary)}
.autoria{font-size:13px;line-height:1.55;color:var(--dim);margin:28px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.autoria a{color:inherit}
h1{font-weight:700;font-size:clamp(34px,5.4vw,56px);line-height:1.02;letter-spacing:-1.6px;color:var(--white);text-wrap:balance}
.sub{font-size:clamp(18px,2.2vw,22px);line-height:1.45;color:var(--mid);margin-top:16px}
.bloque{margin-top:28px}
.bloque h2{font-family:var(--mono);font-size:12px;letter-spacing:4px;color:var(--primary);text-transform:uppercase;font-weight:400;margin-bottom:10px}
.bloque p{color:var(--text);margin-bottom:12px;max-width:40rem}
.fuentes{margin-top:28px;font-size:15px;color:var(--dim)}
.fuentes h2{font-family:var(--mono);font-size:11px;letter-spacing:3px;text-transform:uppercase;font-weight:400;margin-bottom:8px}
.fuentes li{list-style:none;margin:4px 0}
.fuentes a{color:var(--mid)} .fuentes a:hover{color:var(--primary)}
.sigue{margin-top:40px;padding:26px;border:1px solid rgba(247,67,11,.42);border-radius:16px;background:rgba(18,24,56,.6)}
.sigue b{display:block;font-size:22px;letter-spacing:-.5px;color:var(--white);margin-bottom:6px}
.sigue p{color:var(--mid);font-size:16px;margin-bottom:18px}
@media (max-width:820px){
  .reel{grid-template-columns:1fr}
  .video{position:static;max-width:420px;width:100%;margin:0 auto}
}