/* betplayguatemala.com — directorio deportivo */
:root{
  --navy:#0d1b42;
  --navy-mid:#142962;
  --navy-deep:#08122e;
  --green:#33f57c;
  --green-hover:#1fe06a;
  --green-ink:#0a7d3c;
  --teal:#64e1da;
  --sun:#ffcd00;
  --sky:#3cb4e5;
  --paper:#f1f7fd;
  --card:#ffffff;
  --line:#d9e3f1;
  --ink:#15213f;
  --muted:#56627e;
  --font-head:"Exo 2",system-ui,sans-serif;
  --font-text:"Open Sans",system-ui,sans-serif;
  --wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:20px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16.5px/1.7 var(--font-text)}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy-mid)}
a:hover{color:var(--green-ink)}
.u-wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.u-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- SiteHeader ---------- */
.SiteHeader{background:var(--navy);position:relative;z-index:20}
.SiteHeader::after{content:"";display:block;height:2px;background:linear-gradient(90deg,rgba(100,225,218,0),var(--teal) 50%,rgba(100,225,218,0))}
.SiteHeader-bar{display:flex;align-items:center;gap:28px;height:70px}
.SiteHeader-brand{display:flex;align-items:center;flex:none}
.SiteHeader-brand img{width:152px;height:auto}
.SiteHeader-menu{display:flex;align-items:stretch;gap:4px;margin:0;padding:0;list-style:none;height:100%;flex:1}
.SiteHeader-menu li{display:flex}
.SiteHeader-menu li.SiteHeader-extra{display:none}
.SiteHeader-link{display:flex;align-items:center;padding:0 12px;color:#e6ecf8;text-decoration:none;font:600 15px/1 var(--font-head);letter-spacing:.01em;box-shadow:inset 0 -3px 0 transparent;transition:box-shadow .15s,color .15s}
.SiteHeader-link:hover{color:#fff;box-shadow:inset 0 -3px 0 rgba(51,245,124,.45)}
.SiteHeader-link.is-active{color:#fff;box-shadow:inset 0 -3px 0 var(--green)}
.SiteHeader-go{margin-left:auto;flex:none}
.SiteHeader-toggle{display:none;margin-left:auto;align-items:center;gap:8px;background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:6px;padding:8px 12px;font:600 14px/1 var(--font-head);cursor:pointer}
.SiteHeader-toggle svg{width:18px;height:18px}

/* ---------- Buttons ---------- */
.GoButton{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:var(--navy);text-decoration:none;font:700 15px/1 var(--font-head);padding:12px 20px;border-radius:6px;white-space:nowrap;transition:background .15s}
.GoButton:hover{background:var(--green-hover);color:var(--navy)}
.GoButton::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);margin-left:2px}
.GoButton--wide{padding:14px 26px;font-size:16px}
.TextArrow{font:700 15px/1.2 var(--font-head);color:var(--navy-mid);text-decoration:none;border-bottom:2px solid var(--green)}
.TextArrow:hover{color:var(--green-ink)}

/* ---------- Trail ---------- */
.Trail{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0;list-style:none;font-size:13.5px;color:var(--muted)}
.Trail-item+.Trail-item::before{content:"/";margin-right:6px;color:#9aa7c2}
.Trail a{color:var(--muted);text-decoration:none}
.Trail a:hover{color:var(--navy-mid);text-decoration:underline}

/* ---------- Home ---------- */
.Front{background:#fff;border-bottom:1px solid var(--line)}
.Front-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;padding-top:48px;padding-bottom:44px;align-items:start}
.Front-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;font:700 13px/1 var(--font-head);text-transform:uppercase;letter-spacing:.12em;color:var(--green-ink)}
.Front-kicker::before{content:"";width:28px;height:3px;background:linear-gradient(90deg,var(--sun) 0 33%,var(--green-ink) 33% 66%,var(--sky) 66%)}
.Front-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:26px}

.FactCard{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 10px 30px -18px rgba(13,27,66,.45)}
.FactCard-top{background:var(--navy);color:#fff;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.FactCard-label{font:700 15px/1.2 var(--font-head);letter-spacing:.02em}
.FactCard-flag{display:flex;gap:3px}
.FactCard-flag span{width:8px;height:18px;border-radius:2px;background:var(--sun)}
.FactCard-flag span:nth-child(2){background:#00ae42}
.FactCard-flag span:nth-child(3){background:var(--sky)}
.FactCard-list{margin:0;padding:6px 20px 12px}
.FactCard-row{display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:14.5px;line-height:1.45}
.FactCard-row:last-child{border-bottom:0}
.FactCard-row dt{color:var(--muted)}
.FactCard-row dd{margin:0;font-weight:600;color:var(--ink)}

.SportIndex{padding-top:44px;padding-bottom:8px}
.SportIndex-caption{margin:0 0 16px;color:var(--muted);font-size:15px;max-width:720px}
.SportIndex-caption strong{font:800 22px/1.3 var(--font-head);color:var(--navy);display:block;margin-bottom:4px}
.SportIndex-list{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.SportIndex-head{display:grid;grid-template-columns:64px 190px 170px minmax(0,1fr) 150px;gap:20px;padding:12px 22px;background:#e7eef9;font:700 12.5px/1.2 var(--font-head);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.SportIndex-row{display:grid;grid-template-columns:64px 190px 170px minmax(0,1fr) 150px;gap:20px;align-items:center;padding:16px 22px;border-top:1px solid var(--line);transition:background .15s}
.SportIndex-row:hover{background:#f6faff}
.SportIndex-icon{width:52px;height:52px;border-radius:50%;background:var(--navy);color:var(--green);display:grid;place-items:center}
.SportIndex-icon svg{width:28px;height:28px}
.SportIndex-name{font:700 19px/1.2 var(--font-head);color:var(--navy)}
.SportIndex-count{font:800 20px/1 var(--font-head);color:var(--ink);font-variant-numeric:tabular-nums}
.SportIndex-count small{display:block;font:600 12px/1.3 var(--font-text);color:var(--muted);margin-top:4px}
.SportIndex-meter{display:block;height:4px;border-radius:2px;background:#e3eaf5;margin-top:8px;overflow:hidden}
.SportIndex-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--green-ink),var(--green))}
.SportIndex-note{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.SportIndex-link{justify-self:end;font:700 14px/1.2 var(--font-head);color:var(--navy-mid);text-decoration:none;border-bottom:2px solid var(--green);padding-bottom:2px;text-align:right}
.SportIndex-link:hover{color:var(--green-ink)}
.SportIndex-row--extra .SportIndex-icon{background:var(--green);color:var(--navy)}

.HomeText{padding-top:36px;padding-bottom:64px}
.HomeText .Article{max-width:820px}

/* ---------- Inner layout ---------- */
.Page{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:40px;padding-top:34px;padding-bottom:70px;align-items:start}
.Page-aside{grid-column:2;grid-row:1;position:sticky;top:20px}
.Page-main{grid-column:1;grid-row:1;min-width:0}
.Sheet{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:40px 46px 46px}

.Toc{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.Toc-title{display:block;background:var(--navy);color:#fff;font:700 14px/1 var(--font-head);letter-spacing:.06em;text-transform:uppercase;padding:15px 18px;list-style:none;cursor:default}
.Toc-title::-webkit-details-marker{display:none}
.Toc-list{list-style:none;margin:0;padding:8px 0}
.Toc-link{display:block;padding:8px 18px 8px 16px;border-left:3px solid transparent;color:var(--ink);text-decoration:none;font-size:14px;line-height:1.4}
.Toc-link:hover{background:#f3f7fd;color:var(--navy-mid)}
.Toc-link.is-active{border-left-color:var(--green);background:#f0fbf4;font-weight:600;color:var(--navy)}
.Toc-go{padding:14px 18px 18px;border-top:1px solid var(--line)}
.Toc-go .GoButton{width:100%;justify-content:center}

/* ---------- Article ---------- */
.Article{min-width:0}
.Article-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
.Article-chip{display:inline-flex;align-items:center;gap:7px;background:var(--navy);color:#fff;font:700 12.5px/1 var(--font-head);letter-spacing:.06em;text-transform:uppercase;padding:7px 11px;border-radius:999px}
.Article-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.Article-tag{font:600 13px/1 var(--font-head);color:var(--muted)}
.Article h1{font:800 clamp(28px,3.6vw,42px)/1.15 var(--font-head);color:var(--navy);margin:0 0 18px;letter-spacing:-.01em}
.Article h2{font:800 clamp(22px,2.4vw,27px)/1.25 var(--font-head);color:var(--navy);margin:44px 0 14px;padding-top:4px;scroll-margin-top:20px}
.Article h2::before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--green);margin-bottom:12px}
.Article h3{font:700 18.5px/1.35 var(--font-head);color:var(--ink);margin:26px 0 8px}
.Article p{margin:0 0 16px}
.Article-lead{font-size:18px;line-height:1.65;color:#22305a}
.Article ul,.Article ol{margin:0 0 18px;padding-left:22px}
.Article li{margin-bottom:8px}
.Article ul li::marker{color:var(--green-ink)}
.Article ol li::marker{font:700 15px var(--font-head);color:var(--navy-mid)}
.Article strong{color:var(--navy)}
.Article ul.SportIndex-list,.Article ul.ClubRow,.Article ul.PayStrip-list,.Article ul.Links,.Article ul.Shortcuts-list{padding-left:0;margin-left:0}
.Article ul.SportIndex-list>li,.Article ul.ClubRow>li,.Article ul.PayStrip-list>li,.Article ul.Links>li,.Article ul.Shortcuts-list>li{margin-bottom:0}
.Article-qa{border-top:1px solid var(--line);margin-top:10px}
.Article-qa h3{margin-top:22px}
.Article-qa h3::before{content:"P ·";color:var(--green-ink);margin-right:6px}

.TableScroll{overflow-x:auto;margin:20px 0 24px;border:1px solid var(--line);border-radius:8px;-webkit-overflow-scrolling:touch}
.TableScroll table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5;min-width:480px}
.TableScroll th{background:var(--navy);color:#fff;text-align:left;font:700 13.5px/1.3 var(--font-head);letter-spacing:.03em;padding:12px 14px;vertical-align:bottom}
.TableScroll td{padding:11px 14px;border-top:1px solid var(--line);vertical-align:top}
.TableScroll tr:nth-child(even) td{background:#f5f9fe}
.TableScroll td:first-child{font-weight:600;color:var(--navy)}

.Shot{margin:26px 0 28px}
.Shot img{width:100%;border-radius:10px;background:#dfe7f3}
.Shot figcaption{font-size:13.5px;color:var(--muted);margin-top:8px;padding-left:12px;border-left:3px solid var(--green)}

.ClubRow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:22px 0 24px;padding:0;list-style:none}
.ClubRow-item{background:#f5f9fe;border:1px solid var(--line);border-radius:8px;padding:14px 8px 10px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font:600 13px/1.25 var(--font-head);color:var(--navy)}
.ClubRow-item img{height:64px;width:auto}

.PayStrip{background:var(--navy);border-radius:10px;padding:20px 22px;margin:22px 0 26px}
.PayStrip-label{display:block;color:#b9c6e4;font:600 12.5px/1 var(--font-head);text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px}
.PayStrip-list{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin:0;padding:0;list-style:none}
.PayStrip-list img{height:26px;width:auto}
.PayStrip-list .is-tall img{height:34px}

.GoBox{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin:34px 0 8px;padding:20px 22px;border-radius:10px;background:linear-gradient(110deg,var(--navy) 0 60%,var(--navy-mid));color:#e9effb}
.GoBox p{margin:0;font:600 16px/1.45 var(--font-head);max-width:520px}

.Links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0 26px;padding:0;list-style:none}
.Links a{display:block;height:100%;padding:14px 16px;background:#f5f9fe;border:1px solid var(--line);border-left:4px solid var(--green);border-radius:6px;text-decoration:none;color:var(--navy);font:700 15.5px/1.3 var(--font-head)}
.Links a span{display:block;font:400 14px/1.45 var(--font-text);color:var(--muted);margin-top:4px}
.Links a:hover{background:#eef6ff}

/* ---------- SiteFooter ---------- */
.SiteFooter{background:var(--navy);color:#c3cde4;font-size:14.5px}
.SiteFooter::before{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--sun) 0 33.3%,#00ae42 33.3% 66.6%,var(--sky) 66.6%)}
.SiteFooter-cols{display:grid;grid-template-columns:1.3fr 1fr 1.2fr 1.3fr;gap:36px;padding-top:46px;padding-bottom:36px}
.SiteFooter-brand img{width:138px;height:auto;margin-bottom:16px}
.SiteFooter-brand p{margin:0 0 12px;line-height:1.6}
.SiteFooter-title{display:block;color:#fff;font:700 14px/1.2 var(--font-head);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.SiteFooter-list{list-style:none;margin:0;padding:0}
.SiteFooter-list li{margin-bottom:9px}
.SiteFooter a{color:#dfe7f7;text-decoration:none}
.SiteFooter a:hover{color:var(--green);text-decoration:underline}
.SiteFooter-care{display:flex;gap:14px;align-items:flex-start}
.SiteFooter-care img{width:44px;height:44px;flex:none}
.SiteFooter-care p{margin:0;line-height:1.6}
.SiteFooter-legal{background:var(--navy-deep);color:#93a1c3;font-size:13.5px}
.SiteFooter-legal .u-wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:16px;padding-bottom:16px}

/* ---------- 404 ---------- */
.Lost{padding-top:70px;padding-bottom:90px}
.Lost-box{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:46px;max-width:820px}
.Lost-code{font:800 84px/1 var(--font-head);color:var(--navy);margin:0 0 10px;letter-spacing:-.02em}
.Lost-code span{color:var(--green-ink)}
.Lost-title{font:800 28px/1.2 var(--font-head);color:var(--navy);margin:0 0 12px}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .SportIndex-head,.SportIndex-row{grid-template-columns:56px 170px 150px minmax(0,1fr)}
  .SportIndex-head span:last-child{display:none}
  .SportIndex-link{grid-column:2/-1;justify-self:start;text-align:left}
}
@media (max-width:980px){
  .SiteHeader-toggle{display:inline-flex}
  .SiteHeader-go{display:none}
  .SiteHeader-menu{display:none;position:absolute;left:0;right:0;top:72px;background:var(--navy);flex-direction:column;height:auto;padding:8px 20px 20px;gap:0;border-top:1px solid rgba(255,255,255,.12);box-shadow:0 18px 30px -10px rgba(4,15,32,.6)}
  .SiteHeader.is-open .SiteHeader-menu{display:flex}
  .SiteHeader-link{flex:1;padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.08);box-shadow:none;font-size:16px}
  .SiteHeader-link.is-active{box-shadow:inset 4px 0 0 var(--green);padding-left:14px}
  .SiteHeader.is-open .SiteHeader-menu li.SiteHeader-extra{display:flex;margin-top:14px}
  .Front-grid{grid-template-columns:1fr;gap:30px;padding-top:34px}
  .Page{grid-template-columns:1fr;gap:18px;padding-top:20px}
  .Page-aside,.Page-main{grid-column:1}
  .Page-aside{grid-row:1;position:static}
  .Page-main{grid-row:2}
  .Toc-title{cursor:pointer;display:flex;justify-content:space-between;align-items:center}
  .Toc-title::after{content:"+";font-size:20px;line-height:1;color:var(--green)}
  .Toc[open] .Toc-title::after{content:"–"}
  .Toc-go{display:none}
  .SiteFooter-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  .Sheet{padding:26px 18px 30px;border-radius:8px}
  .SportIndex-head{display:none}
  .SportIndex-row{grid-template-columns:48px minmax(0,1fr) auto;gap:6px 14px;padding:16px}
  .SportIndex-icon{width:46px;height:46px;grid-row:1/3}
  .SportIndex-icon svg{width:24px;height:24px}
  .SportIndex-name{grid-column:2;font-size:18px}
  .SportIndex-count{grid-column:3;grid-row:1;text-align:right;font-size:17px}
  .SportIndex-count small{display:none}
  .SportIndex-meter{display:none}
  .SportIndex-note{grid-column:2/-1;font-size:14.5px}
  .SportIndex-link{grid-column:2/-1;font-size:14px;margin-top:4px}
  .ClubRow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .Links{grid-template-columns:1fr}
  .FactCard-row{grid-template-columns:104px minmax(0,1fr)}
  .SiteFooter-cols{grid-template-columns:1fr;gap:28px}
  .Lost-box{padding:28px 20px}
  .Lost-code{font-size:64px}
  .PayStrip-list{gap:16px 22px}
  .PayStrip-list img{height:22px}
  .PayStrip-list .is-tall img{height:30px}
}

/* ---------- Home text + atajos ---------- */
.HomeText{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.HomeText-body{min-width:0;max-width:800px}
.HomeText-aside{position:sticky;top:20px}
.Shortcuts{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--green);border-radius:10px;padding:18px 20px 20px}
.Shortcuts-title{display:block;font:800 17px/1.2 var(--font-head);color:var(--navy);margin-bottom:10px}
.Shortcuts-list{list-style:none;margin:0 0 12px;padding:0}
.Shortcuts-list li{border-bottom:1px solid var(--line)}
.Shortcuts-list a{display:block;padding:9px 0;color:var(--ink);text-decoration:none;font-size:14.5px;line-height:1.4}
.Shortcuts-list a:hover{color:var(--green-ink)}
.Shortcuts-all{font:700 14px/1.2 var(--font-head);color:var(--navy-mid)}
.Shot{max-width:640px}
@media (max-width:980px){
  .HomeText{grid-template-columns:1fr;gap:28px}
  .HomeText-aside{position:static}
}