/* Boletox · identidad "Taquilla". Se apoya en Bootstrap 5.3: solo redefinimos sus variables. */
:root {
  --bx-navy: #0B2545;
  --bx-navy-2: #13315C;
  --bx-coral: #F25C54;         /* acentos, íconos, detalles */
  --bx-coral-boton: #C23F37;   /* fondo de botones: blanco encima pasa contraste AA */
  --bx-coral-hover: #A5332C;
  --bx-niebla: #DCE3EC;
  --bx-fondo: #F7F8FA;
  --bx-gris: #5A6B82;

  --bs-body-font-family: "Inter Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-color: var(--bx-navy);
  --bs-body-bg: var(--bx-fondo);
  --bs-secondary-color: var(--bx-gris);
  --bs-border-color: #E2E6EC;
  --bs-link-color: var(--bx-coral-boton);
  --bs-link-color-rgb: 194, 63, 55;
  --bs-link-hover-color: var(--bx-coral-hover);
  --bs-border-radius: .5rem;
}

.btn-primary {
  --bs-btn-bg: var(--bx-coral-boton);
  --bs-btn-border-color: var(--bx-coral-boton);
  --bs-btn-hover-bg: var(--bx-coral-hover);
  --bs-btn-hover-border-color: var(--bx-coral-hover);
  --bs-btn-active-bg: var(--bx-coral-hover);
  --bs-btn-active-border-color: var(--bx-coral-hover);
  --bs-btn-disabled-bg: var(--bx-coral-boton);
  --bs-btn-disabled-border-color: var(--bx-coral-boton);
  --bs-btn-focus-shadow-rgb: 242, 92, 84;
  font-weight: 500;
}
.btn-outline-light { font-weight: 500; }

/* ---- Barra superior ---- */
.bx-nav { background: var(--bx-navy); }
.bx-logo { display: inline-block; line-height: 0; }
.bx-logo img { height: 36px; width: auto; }

/* ---- Portada ---- */
.bx-hero { background: var(--bx-navy); color: #fff; }
.bx-hero p { color: var(--bx-niebla); }
.bx-hero .bx-acento { color: var(--bx-coral); }

/* ---- Tarjeta de evento ---- */
.bx-card { border: 1px solid var(--bs-border-color); border-radius: .75rem; overflow: hidden; background: #fff;
           color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.bx-card:hover { border-color: var(--bx-coral); transform: translateY(-2px); color: inherit; }
.bx-card-img { aspect-ratio: 16 / 9; background: var(--bx-niebla); position: relative;
               display: flex; align-items: center; justify-content: center; color: var(--bx-gris); }
.bx-card-img img { width: 100%; height: 100%; object-fit: cover; }
.bx-fecha { position: absolute; left: .75rem; bottom: .75rem; background: var(--bx-navy); color: #fff;
            font-size: .75rem; font-weight: 500; padding: .2rem .6rem; border-radius: .35rem; }
.bx-precio { font-weight: 600; }

/* ---- Sección organizadores ---- */
.bx-beneficio-icono { width: 2.5rem; height: 2.5rem; border-radius: .5rem; background: #FDE8E6; color: var(--bx-coral-boton);
                      display: inline-flex; align-items: center; justify-content: center; }

/* ---- Pie ---- */
.bx-pie { background: var(--bx-navy); color: var(--bx-niebla); }
.bx-pie a { color: #fff; }

@media (prefers-reduced-motion: reduce) { .bx-card, .bx-card:hover { transition: none; transform: none; } }