/* ===== Cápsulas Informativas (home) — WIP ===== */

.cap-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  margin-top:8px;
}
@media (max-width:980px){ .cap-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cap-grid{ grid-template-columns:1fr; } }

.cap-card{
  display:flex;
  flex-direction:column;
  text-align:left;
  background:#fff;
  border:none;
  border-radius:16px;
  padding:0;
  cursor:pointer;
  overflow:hidden;
  box-shadow:0 4px 18px rgba(7,24,48,.08);
  transition:transform .25s ease, box-shadow .25s ease;
  font-family:inherit;
  color:inherit;
}
.cap-card:hover,.cap-card:focus-visible{
  transform:translateY(-5px);
  box-shadow:0 16px 36px rgba(7,24,48,.16);
}
.cap-card:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }

.cap-media{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--navy3),var(--navy2));
  overflow:hidden;
}
.cap-poster{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  transition:opacity .3s ease;
}
.cap-preview{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .35s ease;
}
.cap-card:hover .cap-preview,.cap-card:focus-visible .cap-preview{ opacity:1; }
.cap-card:hover .cap-poster,.cap-card:focus-visible .cap-poster{ opacity:0; }

/* Placeholder animado (sin video real todavía) — simula el vaivén boomerang */
.cap-fake{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(120deg,var(--navy3) 0%,var(--navy2) 35%,var(--navy) 65%,var(--navy2) 100%);
  background-size:220% 220%;
  animation:cap-fake-sweep 4s ease-in-out infinite alternate;
}
.cap-fake-icon{
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  border:1.5px solid rgba(255,255,255,.25);
  transition:transform .4s ease;
}
.cap-card:hover .cap-fake-icon,.cap-card:focus-visible .cap-fake-icon{ transform:scale(1.12); }
.cap-fake-badge{
  position:absolute; top:10px; left:10px;
  font-size:9px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  color:var(--navy); background:var(--gold);
  padding:4px 9px; border-radius:20px;
  font-family:Montserrat,sans-serif;
}
@keyframes cap-fake-sweep{
  0%{ background-position:0% 50%; }
  100%{ background-position:100% 50%; }
}

.cap-play{
  position:absolute; right:10px; bottom:10px;
  display:flex; opacity:.9;
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.cap-card:hover .cap-play,.cap-card:focus-visible .cap-play{ opacity:0; transform:scale(.8); }

.cap-body{
  display:flex; flex-direction:column;
  padding:18px 20px 20px;
  gap:4px;
}
.cap-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border-radius:10px;
  background:var(--navy);
  margin-bottom:8px;
}
.cap-icon svg{ width:20px; height:20px; }
.cap-title{
  font-family:Montserrat,sans-serif; font-weight:800; font-size:15.5px; color:var(--navy);
}
.cap-desc{
  font-size:12.5px; line-height:1.5; color:#5a6472; margin-top:2px;
}
.cap-cta{
  margin-top:10px;
  font-family:Montserrat,sans-serif; font-weight:700; font-size:11.5px;
  color:var(--gold2); text-transform:uppercase; letter-spacing:.5px;
  transition:color .2s ease;
}
.cap-card:hover .cap-cta,.cap-card:focus-visible .cap-cta{ color:var(--red); }

/* ===== Modal ===== */
.cap-modal{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.cap-modal[hidden]{ display:none; }
.cap-modal-overlay{
  position:absolute; inset:0;
  background:rgba(7,24,48,.78);
  backdrop-filter:blur(6px);
}
.cap-modal-panel{
  position:relative;
  background:#fff;
  border-radius:18px;
  width:100%; max-width:720px;
  max-height:92vh; overflow-y:auto;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  animation:cap-modal-in .28s cubic-bezier(.34,1.4,.64,1);
}
@keyframes cap-modal-in{
  from{ opacity:0; transform:scale(.94) translateY(10px); }
  to{ opacity:1; transform:none; }
}
.cap-modal-close{
  position:absolute; top:14px; right:14px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(7,24,48,.55); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.cap-modal-close:hover{ background:var(--red); }
.cap-modal-media{
  position:relative; width:100%; aspect-ratio:16/9; background:var(--navy3);
  border-radius:18px 18px 0 0; overflow:hidden;
}
.cap-modal-video{ width:100%; height:100%; display:block; background:#000; }
.cap-modal-fake{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:linear-gradient(135deg,var(--navy3),var(--navy2));
  color:rgba(255,255,255,.85); text-align:center; padding:20px;
}
.cap-modal-fake .cap-fake-icon{ width:64px; height:64px; }
.cap-modal-fake p{ font-size:13px; line-height:1.6; margin:0; }
.cap-modal-fake small{ font-size:11px; color:rgba(255,255,255,.55); }
.cap-modal-info{ padding:20px 26px 26px; }
.cap-modal-info h3{ font-family:Montserrat,sans-serif; font-weight:800; color:var(--navy); font-size:19px; margin:0 0 8px; }
.cap-modal-info p{ font-size:13.5px; line-height:1.6; color:#5a6472; margin:0; }

/* Accesibilidad de movimiento */
@media (prefers-reduced-motion:reduce){
  .cap-card,.cap-fake-icon,.cap-play,.cap-poster,.cap-preview,.cap-cta{ transition:none !important; }
  .cap-fake{ animation:none !important; background-position:50% 50%; }
  .cap-modal-panel{ animation:none !important; }
}