@charset "UTF-8";
:root {
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body { margin: 0; background: #0d1018; }
main, section, article, figure, img, a, button, h1, h2, h3, p, figcaption { max-width: 100%; }
main * { min-width: 0; }
main {
  --primary: #ebb300;
  --secondary: #8b6cdb;
  --text: #f5f3eb;
  --accent: #35d6a0;
  --background: #0d1018;
  --surface: #191e2b;
  --border: #333b4d;
  background: var(--background);
  color: var(--text);
  font: 400 17px/1.65 "Segoe UI", Arial, sans-serif;
  overflow-wrap: anywhere;
  overflow-x: clip;
}
main ::selection { background: var(--primary); color: var(--background); }
main a { color: var(--primary); text-underline-offset: 3px; overflow-wrap: anywhere; }
main a:hover { color: #fff0ad; }
main a:focus-visible, main summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
main h1, main h2, main h3, main p, main a, main button, main figcaption {
  overflow-wrap: anywhere;
  white-space: normal;
}
main h1, main h2, main h3 { line-height: 1.16; margin: 0 0 .75em; letter-spacing: 0; }
main h1 { font-size: clamp(2.25rem, 4vw, 4.5rem); }
main h2 { font-size: clamp(1.75rem, 2.5vw, 2.5rem); }
main h3 { font-size: 1.2rem; }
main p { margin: 0 0 1.05em; max-width: 72ch; }
main strong { color: #fff2b6; }
main img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: cover; }
main figure { margin: 0; }
main figcaption { color: #c5c9d4; font-size: .85rem; margin-top: .55rem; }
main .bc-wrap { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
main .bc-hero { padding: 68px 0 55px; background: linear-gradient(150deg, #191e2b 0%, #0d1018 68%); }
main .bc-hero-inner { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr); align-items: center; gap: clamp(28px, 5vw, 72px); }
main .bc-lead { font-size: 1.12rem; line-height: 1.65; }
main .bc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 23px 0 0; }
main .bc-button { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 10px 21px; border: 1px solid var(--primary); border-radius: 6px; background: var(--primary); color: #10131a; font-weight: 750; line-height: 1.3; text-align: center; text-decoration: none; transition: background .18s ease, color .18s ease, transform .18s ease; }
main .bc-button:hover { background: #ffe064; color: #10131a; transform: translateY(-2px); }
main .bc-button--quiet { color: var(--text); background: transparent; border-color: var(--border); }
main .bc-button--quiet:hover { color: var(--background); background: var(--accent); border-color: var(--accent); }
main .bc-section { padding: 70px 0; }
main .bc-section--surface { background: var(--surface); }
main .bc-section--compact { padding: 48px 0; }
main .bc-intro { max-width: 72ch; margin-bottom: 28px; }
main .bc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
main .bc-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
main .bc-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
main .bc-tile { border: 1px solid var(--border); border-radius: 7px; padding: 22px; background: #111621; }
main .bc-tile p:last-child { margin-bottom: 0; }
main .bc-tile a:not(.bc-button) { font-weight: 700; }
main .bc-media { overflow: hidden; border-radius: 7px; }
main .bc-media img { aspect-ratio: 16 / 9; }
main .bc-media--card img { aspect-ratio: 4 / 3; }
main .bc-media--square img { aspect-ratio: 1; }
main .bc-media--mobile { width: min(330px, 100%); margin-inline: auto; }
main .bc-media--mobile img { aspect-ratio: 9 / 16; }
main .bc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 68px); }
main .bc-split--reverse .bc-media { order: -1; }
main .bc-list { padding-left: 1.25em; margin: 0; }
main .bc-list li { padding: 0 0 13px 4px; }
main .bc-list li::marker { color: var(--primary); }
main .bc-strip { border-block: 1px solid var(--border); padding: 24px 0; background: #121825; }
main .bc-strip .bc-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
main .bc-strip p { margin: 0; }
main .bc-table-wrap { overflow-x: auto; max-width: 100%; }
main table { width: 100%; border-collapse: collapse; text-align: left; }
main th, main td { padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
main th { color: var(--primary); font-weight: 700; }
main details { border-bottom: 1px solid var(--border); padding: 13px 0; }
main summary { cursor: pointer; font-weight: 700; padding: 4px 28px 4px 0; }
main details p { margin: 10px 0 4px; color: #d7d9df; }
main .bc-final { padding: 64px 0 76px; background: #272036; border-top: 2px solid var(--primary); }
main .bc-final p { max-width: 68ch; }
main .bc-note { color: #c9cbd3; font-size: .88rem; }
main.bonoclub-inicio-c .bc-hero { border-bottom: 1px solid var(--primary); }
main.bonoclub-login-c .bc-hero-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
main.bonoclub-login-c .bc-section { padding-block: 44px; }
main.bonoclub-app-c .bc-hero-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
main.bonoclub-app-c .bc-media--mobile { width: min(290px, 100%); }
main.bonoclub-descargar-c .bc-tile { border-top-color: var(--primary); }
main.bonoclub-registro-c .bc-strip { background: #242033; }
main.bonoclub-promociones-c .bc-grid--four .bc-tile { background: #211e31; }
main.bonoclub-casino-c .bc-grid--four .bc-tile { border-bottom-color: var(--primary); }
main.bonoclub-retiro-c .bc-list { max-width: 72ch; }
@media (max-width: 850px) {
  main .bc-hero-inner, main .bc-split, main.bonoclub-login-c .bc-hero-inner, main.bonoclub-app-c .bc-hero-inner { grid-template-columns: 1fr; }
  main .bc-grid--four, main .bc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  main { font-size: 16px; }
  main .bc-wrap { width: min(100% - 32px, 1180px); }
  main h1 { font-size: 2.1rem; }
  main h2 { font-size: 1.65rem; }
  main .bc-hero { padding: 38px 0 42px; }
  main .bc-section { padding: 44px 0; }
  main .bc-section--compact { padding: 32px 0; }
  main .bc-grid, main .bc-grid--two, main .bc-grid--four { grid-template-columns: 1fr; gap: 13px; }
  main .bc-split, main .bc-hero-inner { gap: 25px; }
  main .bc-tile { padding: 19px; }
  main .bc-actions { flex-direction: column; align-items: stretch; }
  main .bc-button, main .bc-actions .bc-button { width: 100%; max-width: 100%; }
  main .bc-strip .bc-wrap { flex-direction: column; align-items: stretch; gap: 15px; }
  main .bc-final { padding: 45px 0; }
  main th, main td { padding: 10px 8px; font-size: .9rem; }
}