:root{
  --bg: #0f172a;
  --card: #111827cc;
  --accent: #003399;
  --accent-2: #003399;
  --text: #ffffff;
}

.banner{
  position:relative;
  overflow:hidden;
  padding: clamp(18px, 3vw, 28px);
  display:flex; align-items:center; justify-content:center;
  min-height: 160px;
  isolation:isolate;

    background:
  /* linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.45)),*/
    url("/images/Banner_eventos.png") center / cover no-repeat;
}
.banner::before{
  content:"";position:absolute;inset:-40% -20% auto -20%;
  height:150%;
  background:radial-gradient(60% 60% at 50% 40%, var(--accent)/.25, transparent 65%),
             radial-gradient(35% 35% at 70% 60%, var(--accent-2)/.25, transparent 75%);
  filter: blur(40px);
  z-index:-1;
  animation: float 16s ease-in-out infinite alternate;
}
@keyframes float{from{transform:translateY(-10px)}to{transform:translateY(10px)}}

/*.card{
  width:min(1100px, 95vw);
  background:linear-gradient(180deg, #0b1220cc, #0b1220aa);
  border:1px solid #33415566;
  border-radius: 18px;
  box-shadow: 0 10px 30px #0006, inset 0 1px 0 #ffffff0d;
  padding: clamp(16px, 2.5vw, 24px);
  display:grid; grid-template-columns: 1fr auto; gap: clamp(14px, 2vw, 22px);
}*/

.left{display:flex; flex-direction:column; gap:8px}
.eyebrow{font-size:.9rem; letter-spacing:.12em; text-transform:uppercase; opacity:.8}
.event-title{font-size:clamp(1.25rem,2.6vw,1.9rem); font-weight:700}
.event-name{color:var(--text);}
.meta{font-size:clamp(.95rem,1.8vw,1.05rem); opacity:.95}

.countdown{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:6px;}
.pill{
  background:#0b1324; border:1px solid #33415599; border-radius:12px; padding:8px 10px; min-width:72px; text-align:center;
}
.pill .num{display:block; font-size:clamp(1.15rem,2.6vw,1.6rem); font-weight:800}
.pill .lab{display:block; font-size:.75rem; opacity:.8}

/*.cta{align-self:center}
.cta a{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:#ffffff; font-weight:700;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 12px; padding: 12px 16px;
  box-shadow: 0 6px 18px #0006; transition: transform .15s ease, box-shadow .2s ease;
}*/
.cta a:hover{transform:translateY(-1px); box-shadow:0 10px 24px #0008}

.hidden{display:none}

/* Anula estilos del tema dentro del banner */
.banner .event-title{
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--text);
  line-height: 1.35;
  margin: 6px 0 2px;
  text-align: left;        /* cámbialo a center si prefieres */
}
.banner .eyebrow{
  color:#cbd5e1;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* Layout: izquierda/derecha */
.card{
  grid-template-columns: 1fr auto;
  align-items: center;
}
.left{ align-items: flex-start; }
.countdown{ margin-top: 8px; }
.cta{ justify-self: end; }