/* Jugabet — jugabett.cl */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#12161d;color:#f3f4f6;
 font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
 font-size:16px;line-height:1.65;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:#aec32c;text-decoration:none}
a:hover{text-decoration:underline}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}

/* — шапка — */
.hd{position:sticky;top:0;z-index:50;background:#0e1016;
 border-bottom:1px solid #383b41;backdrop-filter:blur(8px)}
.hd-in{display:flex;align-items:center;gap:18px;height:80px}
.hd-in{justify-content:center;flex-wrap:wrap}
.logo img{max-height:40px;width:auto}
.wordmark{font-weight:900;font-size:1.45rem;letter-spacing:-.03em;
 color:#f3f4f6;white-space:nowrap}
.wordmark::first-letter{color:#aec32c}
.logo:hover{text-decoration:none}
.nav{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.nav{margin-left:0}
.nav a{color:#94979b;font-weight:600;font-size:.95rem;white-space:nowrap}
.nav a:hover,.nav a[aria-current]{color:#f3f4f6;text-decoration:none}
.cta{display:inline-block;background:#aec32c;color:#0b0b0d;font-weight:800;
 padding:11px 22px;border-radius:14px;border:0;cursor:pointer;letter-spacing:.01em}
.cta:hover{background:#bbcd4e;text-decoration:none}
.cta--ghost{background:transparent;color:#aec32c;border:2px solid #aec32c}
.cta--ghost:hover{background:#aec32c;color:#0b0b0d}

/* На узких экранах шапка в две строки, меню — горизонтальная прокрутка.
   Без JS: бургер тут не нужен, пунктов всего шесть. */
@media(max-width:860px){
 .hd-in{height:auto;padding:10px 0;flex-wrap:wrap;gap:10px}
 .logo{margin-right:auto}
 .nav{order:3;width:100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;
  gap:18px;padding-bottom:2px;scrollbar-width:none}
 .nav::-webkit-scrollbar{display:none}
 .cta{padding:9px 16px;font-size:.92rem}
}

/* — герой — */
.hero{padding:86px 0 70px;
 background:radial-gradient(1100px 420px at 50% -10%,#313920,#12161d)}
.hero h1{font-size:clamp(2.2rem,5vw,3.7rem);line-height:1.1;margin:0 0 14px;letter-spacing:-.02em}
.hero p.lead{font-size:1.1rem;color:#94979b;margin:0 0 26px;max-width:62ch}
.hero,.hero .lead{text-align:center;margin-inline:auto}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.hero-split{display:grid;gap:30px;align-items:center;
 grid-template-columns:1fr}
@media(max-width:860px){.hero-split{grid-template-columns:1fr}}
.hero-art img{border-radius:22px;width:100%}

/* — секции — */
.sec{padding:72px 0}
.sec h2{font-size:clamp(1.35rem,2.6vw,2rem);margin:0 0 8px;letter-spacing:-.01em}
.sec .sub{color:#94979b;margin:0 0 22px;max-width:72ch}
.sec p{margin:0 0 14px}
.sec p+h3{margin-top:22px}
.sec h3{font-size:1.12rem;margin:0 0 8px}

/* — карточки и плитки — */
.cards{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
@media(max-width:880px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}
.card{background:#1f2329;border:1px solid #383b41;border-radius:22px;padding:20px}
.card h3{margin:0 0 6px;color:#aec32c}
.card p{margin:0;color:#94979b;font-size:.96rem}

.tiles{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{background:#1f2329;border:1px solid #383b41;border-radius:22px;overflow:hidden}
.tile img{aspect-ratio:1/1;object-fit:cover;width:100%}
.tile span{display:block;padding:9px 10px;font-size:.85rem;color:#94979b;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* — таблица — */
.tbl{width:100%;border-collapse:collapse;margin:18px 0;font-size:.95rem}
.tbl th,.tbl td{border:1px solid #383b41;padding:10px 12px;text-align:left}
.tbl th{background:#2a2d34;font-weight:700}
.tbl-scroll{overflow-x:auto}

/* — шаги — */
.steps{counter-reset:s;display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
@media(max-width:880px){.steps{grid-template-columns:1fr}}
.step{background:#1f2329;border:1px solid #383b41;border-radius:22px;padding:18px 18px 18px 58px;position:relative}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:16px;top:16px;
 width:28px;height:28px;border-radius:999px;background:#aec32c;color:#0b0b0d;
 display:grid;place-items:center;font-weight:800;font-size:.9rem}
.step h3{margin:0 0 5px;font-size:1rem}
.step p{margin:0;color:#94979b;font-size:.93rem}

/* — FAQ — */
.faq{border-top:1px solid #383b41}
.faq details{border-bottom:1px solid #383b41}
.faq summary{cursor:pointer;padding:15px 0;font-weight:700;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;color:#aec32c;font-weight:800}
.faq details[open] summary::after{content:'−'}
.faq p{margin:0 0 15px;color:#94979b}

/* — призыв — */
.band{background:linear-gradient(100deg,#414a22,#2a3417);
 border:1px solid #383b41;border-radius:22px;padding:28px;text-align:center;margin:26px 0}
.band h2{margin:0 0 8px}
.band p{color:#94979b;margin:0 0 18px}

/* — подвал — */
.ft{border-top:1px solid #383b41;background:#0d0f14;margin-top:72px;padding:34px 0 26px}
.ft-cols{display:grid;gap:26px;grid-template-columns:1.4fr 1fr 1fr}
@media(max-width:760px){.ft-cols{grid-template-columns:1fr}}
.ft h4{margin:0 0 10px;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;color:#94979b}
.ft a{color:#94979b;display:block;padding:3px 0;font-size:.94rem}
.ft a:hover{color:#f3f4f6}
.ft-note{margin-top:24px;padding-top:18px;border-top:1px solid #383b41;
 color:#94979b;font-size:.85rem;display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.age{flex:none;background:#aec32c;color:#0b0b0d;font-weight:800;border-radius:999px;padding:3px 11px;font-size:.8rem}
.crumbs{color:#94979b;font-size:.87rem;padding:14px 0 0}
.crumbs a{color:#94979b}