/* ===== Variables ===== */
:root{
  --bg:#0b0d11;
  --fg:#fff;
  --muted:#a7b0c0;
  --accent:#4f9cff;
  --card:#151923;
  --card-ink:#e9ecf2;
  --ring: rgba(79,156,255,.5);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,Arial,sans-serif;
}

/* ===== Sección ===== */
.evt{max-width:1200px; margin:auto; padding:32px 20px 80px}
.evt__head{margin-bottom:22px}
.evt__head h1{font-size:clamp(24px,3.4vw,36px); margin:0 0 8px}
.evt__sub{color:var(--muted); margin:0}

/* ===== Grid ===== */
.evt__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
@media (max-width: 992px){ .evt__grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width: 640px){ .evt__grid{ grid-template-columns:1fr;} }

/* ===== Tarjeta ===== */
.evt-card{
  display:block; position:relative; overflow:hidden; border-radius:18px;
  background:var(--card); text-decoration:none; outline:none;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  transition: transform .35s ease, box-shadow .35s ease;
  will-change: transform;
}
.evt-card:focus-visible{ box-shadow:0 0 0 3px var(--ring); }

.evt-card:hover{ transform: translateY(-4px); box-shadow:0 14px 34px rgba(0,0,0,.35); }

.evt-card__media{ position:relative; aspect-ratio: 4/5; }
.evt-card__media img,
.evt-card__media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:opacity .4s ease;
}
.evt-card__media img{ filter:brightness(72%) contrast(1.02); opacity:1; }
.evt-card__media video{ opacity:0; z-index:2; }

.evt-card__shade{
  position:absolute; inset:0; z-index:3;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 68%, rgba(0,0,0,.9) 100%);
  pointer-events:none;
}

.evt-card__badge{
  position:absolute; top:12px; left:12px; z-index:4;
  padding:6px 10px; font-size:.85rem; font-weight:600;
  color:#0b0d11; background:#fff; border-radius:999px;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}

.evt-card__body{
  padding:16px 16px 18px; display:flex; flex-direction:column; gap:8px;
}
.evt-card__title{
  margin:0; color:var(--card-ink); font-weight:800; letter-spacing:.2px;
  font-size: clamp(18px, 2.2vw, 20px);
}
.evt-card__meta{ margin:0; color:var(--muted); font-size:.95rem; }
.evt-card__cta{
  margin-top:6px; display:inline-flex; align-items:center; gap:10px;
  font-weight:700; letter-spacing:.3px; font-size:.95rem; color:var(--accent);
}
.evt-card__cta::after{
  content:"→"; transform: translateX(0); transition: transform .25s ease;
}
.evt-card:hover .evt-card__cta::after{ transform: translateX(3px); }

/* Estado “video activo” en hover */
.evt-card.is-hover .evt-card__media img{ opacity:0; }
.evt-card.is-hover .evt-card__media video{ opacity:1; }

/* Respeto a usuarios con “reduced motion” */
@media (prefers-reduced-motion: reduce){
  .evt-card,
  .evt-card *{ transition:none !important; }
}
