/* ===== Variables locales ===== */
:root{
  --navH-estimada: 84px; /* respaldo si el JS aún no calcula altura real */
}

/* ===== Layout base de esta página ===== */
.menu-wrap{
  width:100%;
  max-width:900px;
  margin:16px auto;            /* menos respiro arriba */
  padding:8px 16px;            /* y padding lateral uniforme */
  padding-bottom: calc(var(--navH, var(--navH-estimada)) + 24px) !important; /* espacio real para el bottom-nav */
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* ===== Hero (evento principal) ===== */
#heroSlot img{
  width:100%;
  border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.6);
  display:block;
  transition:transform .3s ease, filter .3s ease;
}
#heroSlot img:hover{ transform:scale(1.03); filter:brightness(.85); }

/* ===== Botón HEX ===== */
.status-container{ display:flex; justify-content:center; }
.btn-hex{
  --hex-bg1:#e00119; --hex-bg2:#a80012; --hex-shadow:#002f5a;
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:12px 28px; min-width:200px; color:#fff; font-weight:800; text-decoration:none; letter-spacing:.2px;
  background:linear-gradient(180deg,var(--hex-bg1),var(--hex-bg2));
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.35)) drop-shadow(0 0 10px var(--hex-shadow));
  transition:transform .15s ease, filter .25s ease;
  clip-path:polygon(10% 0,90% 0,100% 50%,90% 100%,10% 100%,0 50%);
}
.btn-hex:hover,.btn-hex:focus{ transform:translateY(-2px); filter:drop-shadow(0 10px 24px rgba(0,0,0,.5)) drop-shadow(0 0 14px var(--hex-shadow)); }

/* ===== Grid de side events ===== */
#gridSlot{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:20px;
}
.grid-cards img{
  width:100%; border-radius:10px; cursor:pointer;
  box-shadow:0 6px 15px rgba(0,0,0,.5);
  transition:transform .3s ease, filter .3s ease;
  display:block;
}
.grid-cards img:hover{ transform:scale(1.05); filter:brightness(.85); }

/* ===== Responsive ===== */
@media (max-width:600px){
  .btn-hex{ min-width:160px; padding:10px 20px; font-size:14px; }
  #gridSlot{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:15px; }
}

/* ===== Apariencia consistente del bottom-nav en esta página ===== */
.bottom-nav{
  background:#101114 !important;
  border-top:1px solid #27282c !important;
  bottom:env(safe-area-inset-bottom, 0);
}

/* ===== Kill bandas de color del footer si existieran ===== */
#site-footer::before,
#site-footer .footer-gradient,
#site-footer .color-band,
.footer-gradient,
.color-band{
  display:none !important;
  background:transparent !important;
  height:0 !important;
  padding:0 !important;
  border:0 !important;
}