/* =====================================================================
   ENTREVISTAS — colección de vídeos (YouTube)
   Reutiliza .breadcrumbs, .ar-banner, .ar-filters, .ar-chips/.ar-chip,
   .ar-select, .ar-empty (styles.css). Aquí: aside del hero, tarjeta de
   vídeo (miniatura real + marco + play + duración) y lightbox.
   Estética editorial: esquinas cuadradas, hairlines, amarillo = activación.
   ===================================================================== */

/* ---------- Hero: bloque lateral con recuento ---------- */
.iv-banner-aside{
  display:flex;align-items:center;gap:14px;justify-content:flex-end;
}
.iv-banner-count{
  font-family:var(--serif);font-weight:400;font-size:52px;line-height:.9;
  letter-spacing:-.02em;color:var(--navy);
}
.iv-banner-meta{display:flex;flex-direction:column;gap:5px}
.iv-banner-line{
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);
}
.iv-banner-src{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:11px;color:var(--muted);
}
.iv-banner-src svg{width:15px;height:15px}

/* ---------- Grid ---------- */
.iv-grid-wrap{padding-top:26px;padding-bottom:8px}
.iv-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px 22px;
}
[data-iv-cols="two"] .iv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
[data-density="spacious"] .iv-grid{gap:34px 28px}

/* ---------- Tarjeta ---------- */
.iv-card{
  min-width:0;
  display:flex;flex-direction:column;
  background:var(--paper);
  border:1px solid var(--rule);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.iv-card:hover{
  transform:translateY(-2px);
  border-color:var(--navy);
  box-shadow:0 14px 30px -18px rgba(11,29,58,.4);
}

/* Miniatura (botón) */
.iv-thumb{
  min-width:0;
  position:relative;display:block;width:100%;
  aspect-ratio:16/9;overflow:hidden;
  background:var(--ink-block);
  border:0;padding:0;margin:0;cursor:pointer;
  border-bottom:1px solid var(--rule);
}
.iv-thumb-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform .4s ease, filter .25s ease;
}
.iv-card:hover .iv-thumb-img{transform:scale(1.04)}
.iv-thumb-shade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(11,29,58,.45) 0%, rgba(11,29,58,0) 42%);
}

/* Marco editorial sobre la miniatura */
.iv-frame{position:absolute;inset:12px;pointer-events:none}
.iv-frame .fc{
  position:absolute;width:14px;height:14px;
  border:1px solid rgba(250,250,248,.7);
}
.iv-frame .fc.tl{top:0;left:0;border-right:0;border-bottom:0}
.iv-frame .fc.tr{top:0;right:0;border-left:0;border-bottom:0}
.iv-frame .fc.bl{bottom:0;left:0;border-right:0;border-top:0}
.iv-frame .fc.br{bottom:0;right:0;border-left:0;border-top:0}

/* Botón play — blanco por defecto, ámbar (activación) al intentar */
.iv-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;display:grid;place-items:center;
  background:rgba(250,250,248,.92);
  color:var(--azul-marino);
  box-shadow:0 6px 20px -6px rgba(11,29,58,.5);
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.iv-play svg{width:26px;height:26px;fill:currentColor;margin-left:2px}
.iv-thumb:hover .iv-play,
.iv-thumb:focus-visible .iv-play{
  background:var(--insight);color:var(--on-amber);transform:translate(-50%,-50%) scale(1.06);
}
.iv-thumb:focus-visible{outline:2px solid var(--insight);outline-offset:-4px}

/* Píldora de duración (mono) */
.iv-dur{
  position:absolute;right:10px;bottom:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.02em;
  color:#F2EDE6;background:rgba(11,29,58,.82);
  padding:3px 7px;
}

/* Cuerpo */
.iv-body{display:flex;flex-direction:column;padding:18px 18px 16px;flex:1}
[data-density="spacious"] .iv-body{padding:22px 22px 20px}
.iv-cat{
  font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber-2);margin-bottom:9px;
}
.iv-title{
  overflow-wrap:anywhere;
  font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.26;
  letter-spacing:-.01em;color:var(--navy);margin:0 0 9px;
  text-wrap:pretty;
}
.iv-desc{
  font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--ink-2);
  margin:0 0 16px;text-wrap:pretty;
}
.iv-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:13px;border-top:1px solid var(--rule);
}
.iv-meta{display:inline-flex;align-items:center;gap:8px;min-width:0}
.iv-host{
  font-family:var(--mono);font-size:11.5px;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.iv-dot{color:var(--muted)}
.iv-year{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.iv-cta{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--navy);
  background:none;border:0;padding:0;cursor:pointer;white-space:nowrap;
}
.iv-cta:hover{color:var(--navy-2)}
.iv-cta .theme-cta{transition:transform .18s ease}
.iv-cta:hover .theme-cta{transform:translateX(2px)}

/* ---------- Lightbox ---------- */
body.iv-modal-open{overflow:hidden}
.iv-lightbox{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  padding:32px;
}
.iv-lb-backdrop{
  position:absolute;inset:0;
  background:rgba(7,18,38,.86);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  animation:iv-fade .2s ease;
}
@keyframes iv-fade{from{opacity:0}to{opacity:1}}
.iv-lb-inner{
  position:relative;z-index:1;width:100%;max-width:980px;
  display:flex;flex-direction:column;gap:18px;
  animation:iv-rise .24s cubic-bezier(.2,.7,.3,1);
}
@keyframes iv-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.iv-lb-close{
  align-self:flex-end;
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:#EEE6D2;
  background:none;border:0;padding:4px;cursor:pointer;
  transition:color .15s ease;
}
.iv-lb-close:hover{color:var(--insight)}
.iv-lb-close svg{width:20px;height:20px}
.iv-lb-player{
  position:relative;width:100%;aspect-ratio:16/9;
  background:#000;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7);
}
.iv-lb-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.iv-lb-caption{display:flex;flex-direction:column;gap:5px;max-width:760px}
.iv-lb-cat{
  font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--insight);
}
.iv-lb-title{
  font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.22;
  letter-spacing:-.01em;color:#FAFAF8;margin:0;text-wrap:pretty;
}
.iv-lb-host{font-family:var(--mono);font-size:12.5px;color:#C3CCDD;margin:0}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .iv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-iv-cols="two"] .iv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .iv-banner-aside{justify-content:flex-start}
}
@media (max-width:720px){
  .iv-grid,
  [data-iv-cols="two"] .iv-grid{grid-template-columns:minmax(0,1fr)}
  .iv-card{min-width:0}
  .iv-foot{flex-wrap:wrap;gap:8px 12px}
  .iv-banner-count{font-size:42px}
  .iv-lightbox{padding:16px}
  .iv-lb-title{font-size:20px}
}