/*
Theme Name: CampoBet México
Theme URI: https://campo-bet.mx/
Author: Equipo editorial CampoBet México
Description: Tema ligero para la guía de CampoBet en México.
Version: 1.8.2
License: GPL-2.0+
Text Domain: cbmx
*/

/* ── Tokens ───────────────────────────────────────────── */
:root{
  --c-bg:#06170f;
  --c-surface:#0e2a1c;
  --c-surface-2:#143a27;
  --c-text:#eaf5ef;
  --c-muted:#9bb3a6;
  --c-brand:#16a34a;
  --c-brand-2:#57bd80;
  --c-cta:#22c55e;
  --c-cta-h:#34d977;
  --c-ink:#04120b;
  --c-gold:#facc15;
  --c-line:rgba(87,189,128,.20);

  --r-sm:8px; --r-md:14px; --r-lg:20px;
  --s-xs:.5rem; --s-sm:.85rem; --s-md:1.2rem; --s-lg:2rem; --s-xl:3.2rem;
  --maxw:1200px;
  --font:'Rubik',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* ── Reset ────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip;max-width:100vw;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--c-bg);color:var(--c-text);line-height:1.72;font-size:17px}
img,video,iframe,svg{max-width:100%;height:auto;display:block}
main img:not([class]),article img:not([class]){height:auto}
a{color:var(--c-brand-2);text-decoration:none}
a:hover{text-decoration:underline}
/* grid/flex дети не распирают контейнер */
.footer-grid>*,.games-grid>*,.fact-grid>*,.proscons>*,.hero__grid>*,.cards>*{min-width:0}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--s-md)}

/* ── Topbar ───────────────────────────────────────────── */
.topbar{background:#04100a;border-bottom:1px solid var(--c-line);font-size:.82rem;color:var(--c-muted)}
.topbar__in{display:flex;align-items:center;gap:.6rem;padding-top:.45rem;padding-bottom:.45rem}
.topbar__age{background:var(--c-brand);color:var(--c-ink);font-weight:800;border-radius:999px;padding:.05rem .5rem;font-size:.75rem;flex:0 0 auto}
.topbar__txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Header: ДЕСКТОП СТРОГО 1 СТРОКА ──────────────────── */
.site-header{background:#04120b;border-bottom:2px solid var(--c-brand);position:sticky;top:0;z-index:1000}
.hdr-row{display:flex;align-items:center;gap:14px;flex-wrap:nowrap;padding:.6rem 0;position:relative}
.logo{flex:0 0 auto;display:block}
.logo img{height:44px;width:auto}
.logo--text{font-weight:800;font-size:1.45rem;color:#fff;font-style:italic;letter-spacing:-.5px}
.logo--text span{background:var(--c-cta);color:var(--c-ink);border-radius:6px;padding:0 .4rem;margin-left:.15rem}

.nav-menu{display:flex;align-items:center;gap:.1rem;margin-left:auto;flex-wrap:nowrap;min-width:0}
.nav-menu__link,.nav-more__btn{color:var(--c-text);padding:.45rem .6rem;border-radius:var(--r-sm);font-size:.93rem;font-weight:600;white-space:nowrap;background:none;border:0;font-family:inherit;cursor:pointer}
.nav-menu__link:hover,.nav-more__btn:hover{background:var(--c-surface);color:var(--c-brand-2);text-decoration:none}
.nav-more{position:relative;flex:0 0 auto}
.nav-more__list{display:none;position:absolute;right:0;top:calc(100% + 6px);background:#04120b;border:1px solid var(--c-line);border-radius:var(--r-md);padding:.35rem;min-width:210px;box-shadow:0 12px 30px rgba(0,0,0,.5);z-index:1200}
.nav-more__list.open{display:block}
.nav-more__list a{display:block;color:var(--c-text);padding:.55rem .7rem;border-radius:var(--r-sm);font-size:.92rem;font-weight:600}
.nav-more__list a:hover{background:var(--c-surface);color:var(--c-brand-2);text-decoration:none}

.hdr-cta{display:flex;gap:.5rem;flex:0 0 auto}
.burger{display:none;background:none;border:0;cursor:pointer;padding:.4rem;flex:0 0 auto;flex-direction:column;gap:5px;width:42px;min-height:40px;align-items:center;justify-content:center}
.burger span{display:block;width:24px;height:3px;background:var(--c-text);border-radius:2px}

/* ── Buttons ──────────────────────────────────────────── */
.btn,.cta-button{display:inline-flex;align-items:center;justify-content:center;text-align:center;font-family:inherit;font-weight:800;border:0;cursor:pointer;border-radius:var(--r-md);padding:.7rem 1.15rem;font-size:.95rem;min-height:44px;line-height:1.2;transition:transform .15s,box-shadow .15s,background .15s}
.btn--primary,.cta-button{background:linear-gradient(135deg,var(--c-cta),var(--c-brand));color:var(--c-ink);box-shadow:0 6px 18px rgba(34,197,94,.28)}
.btn--primary:hover,.cta-button:hover{background:linear-gradient(135deg,var(--c-cta-h),var(--c-cta));color:var(--c-ink);transform:translateY(-2px);text-decoration:none;box-shadow:0 10px 26px rgba(34,197,94,.42)}
.btn--ghost{background:var(--c-surface-2);color:#fff;border:1px solid var(--c-brand-2)}
.btn--ghost:hover{background:var(--c-brand);color:var(--c-ink);text-decoration:none;transform:translateY(-2px)}
.cta-button{padding:.95rem 1.9rem;font-size:1.05rem}

/* ── Content ──────────────────────────────────────────── */
main{padding:var(--s-lg) 0 var(--s-xl);display:block}
.content-body{max-width:900px;margin:0 auto}
.crumbs{font-size:.85rem;color:var(--c-muted);margin-bottom:var(--s-sm)}
.crumbs a{color:var(--c-muted)}
h1{font-size:2.15rem;line-height:1.2;margin:.2rem 0 var(--s-sm);letter-spacing:-.5px}
h2{font-size:1.55rem;line-height:1.28;margin:var(--s-lg) 0 var(--s-sm);color:#fff;padding-left:.75rem;border-left:4px solid var(--c-cta)}
h3{font-size:1.2rem;margin:var(--s-md) 0 var(--s-xs);color:var(--c-brand-2)}
h4{font-size:1.05rem;margin:var(--s-md) 0 var(--s-xs);color:var(--c-text)}
p{margin:0 0 var(--s-md)}
ul,ol{margin:0 0 var(--s-md) 1.35rem}
li{margin-bottom:.4rem}
strong{color:#fff}
.byline{font-size:.88rem;color:var(--c-muted);border-bottom:1px solid var(--c-line);padding-bottom:var(--s-sm);margin-bottom:var(--s-md)}
.byline strong{color:var(--c-brand-2)}

.content-img{max-width:800px;width:100%;height:auto;margin:1.6rem auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-md);border:1px solid var(--c-line)}
.shot{max-width:320px;width:100%;margin:1.2rem auto;border-radius:var(--r-md);border:1px solid var(--c-line)}

/* ── Hero ─────────────────────────────────────────────── */
.hero{background:radial-gradient(120% 120% at 12% 0%,rgba(34,197,94,.20),transparent 55%),var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:var(--s-lg);margin:0 0 var(--s-lg)}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s-lg);align-items:center}
.hero h1{margin-top:0}
.hero__lead{color:var(--c-muted);font-size:1.08rem}
.hero__cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:var(--s-md)}
.hero__badges{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:var(--s-md);font-size:.82rem;color:var(--c-muted)}
.hero__badges span{background:var(--c-surface-2);border:1px solid var(--c-line);border-radius:999px;padding:.2rem .7rem}
.hero__media img{border-radius:var(--r-md);width:100%}

/* ── Offer card / CTA box ─────────────────────────────── */
.cta-box{background:linear-gradient(135deg,var(--c-surface-2),var(--c-surface));border:1px solid var(--c-brand);border-radius:var(--r-lg);padding:var(--s-lg);text-align:center;margin:var(--s-lg) 0}
.cta-box__title{font-size:1.35rem;font-weight:800;color:#fff;margin-bottom:.4rem}
.cta-box__text{color:var(--c-muted);margin-bottom:var(--s-md)}
.cta-box__note{font-size:.8rem;color:var(--c-muted);margin:var(--s-sm) 0 0}

/* ── Fact grid ────────────────────────────────────────── */
.fact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.8rem;margin:var(--s-md) 0}
.fact{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);padding:.85rem 1rem}
.fact__k{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--c-muted)}
.fact__v{display:block;font-weight:700;color:#fff;font-size:1.02rem;margin-top:.15rem}

/* ── Tables ───────────────────────────────────────────── */
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--s-md) 0;border-radius:var(--r-md);border:1px solid var(--c-line)}
table{width:100%;border-collapse:collapse;background:var(--c-surface);font-size:.95rem}
th,td{padding:.75rem .9rem;text-align:left;border-bottom:1px solid var(--c-line);vertical-align:top}
th{background:#04120b;color:var(--c-brand-2);font-weight:700;white-space:nowrap}
tr:last-child td{border-bottom:0}

/* ── Charts ───────────────────────────────────────────── */
.chart-fig{margin:var(--s-lg) 0;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--s-md);color:var(--c-text)}
.chart-fig__title{font-weight:700;color:#fff;margin-bottom:.6rem;font-size:1.02rem}
.chart{width:100%;height:auto;max-width:100%;display:block}
.chart-fig__cap,.chart-fig__note{font-size:.83rem;color:var(--c-muted);margin:.6rem 0 0}

/* ── Games gallery ────────────────────────────────────── */
.games-grid__title{font-weight:700;color:#fff;margin:var(--s-md) 0 .6rem}
.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin:var(--s-md) 0}
.game-card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden;text-align:center;padding-bottom:.7rem;transition:transform .15s,border-color .15s;color:var(--c-text)}
.game-card:hover{transform:translateY(-3px);border-color:var(--c-cta);text-decoration:none}
.game-card img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.game-card__ph{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:linear-gradient(135deg,#0d3a24,var(--c-cta));color:var(--c-ink);font-weight:800;font-size:.82rem;text-align:center;padding:.5rem;line-height:1.2}
.game-card__name{display:block;font-weight:700;font-size:.92rem;margin-top:.5rem;padding:0 .4rem}
.game-card__meta{display:block;font-size:.78rem;color:var(--c-muted);padding:0 .4rem}

/* ── Pros / Cons ──────────────────────────────────────── */
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin:var(--s-md) 0}
.proscons__col{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);padding:1rem 1.1rem}
.proscons__col--pro{border-left:4px solid var(--c-cta)}
.proscons__col--con{border-left:4px solid #f97316}
.proscons__title{font-weight:700;color:#fff;margin-bottom:.5rem}
.proscons ul{margin:0 0 0 1.1rem}
.proscons li{font-size:.94rem}

/* ── Steps ────────────────────────────────────────────── */
.steps{list-style:none;margin:var(--s-md) 0;padding:0;display:grid;gap:.7rem}
.step{display:flex;gap:.9rem;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);padding:.9rem 1rem;margin:0;min-width:0}
.step__n{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--c-cta);color:var(--c-ink);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.step__body{min-width:0}
.step__title{font-weight:700;color:#fff;margin:0 0 .2rem;overflow-wrap:anywhere}
.step__text{margin:0;font-size:.94rem;color:var(--c-muted)}

/* ── Review block ─────────────────────────────────────── */
.review-block{background:var(--c-surface);border:1px solid var(--c-line);border-left:4px solid var(--c-cta);border-radius:var(--r-md);padding:1.1rem 1.2rem;margin:var(--s-md) 0}
.review-block .byline{border:0;padding:0;margin:0 0 .3rem}
.review-block .rating{font-size:1.05rem;margin:.2rem 0 .5rem;color:#fff}
.review-block .stars{color:var(--c-gold);letter-spacing:2px}
.review-block .rating strong{font-size:1.35rem}
.review-block .rating__max,.review-block .rating__count{color:var(--c-muted);font-size:.9rem;font-weight:400}
.review-block blockquote{margin:.4rem 0 0;padding-left:.9rem;border-left:2px solid var(--c-brand-2);font-style:italic;color:var(--c-muted)}

/* ── FAQ ──────────────────────────────────────────────── */
.faq{margin:var(--s-md) 0;display:grid;gap:.5rem}
.faq__item{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);padding:.8rem 1rem}
.faq__item summary{cursor:pointer;font-weight:700;color:#fff;list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::before{content:'+';color:var(--c-cta);font-weight:800;margin-right:.5rem}
.faq__item[open] summary::before{content:'–'}
.faq__a{padding-top:.5rem;color:var(--c-muted)}
.faq__a p{margin:0}

/* ── Author box ───────────────────────────────────────── */
.author-box{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);padding:1.1rem 1.2rem;margin:var(--s-xl) 0 0}
.author-box__name{font-weight:800;color:#fff;font-size:1.05rem}
.author-box__role{color:var(--c-brand-2);font-size:.88rem;margin-bottom:.5rem}
.author-box__text{color:var(--c-muted);font-size:.94rem;margin:0}
.author-box__upd{font-size:.82rem;color:var(--c-muted);margin:.5rem 0 0}

/* ── Footer ───────────────────────────────────────────── */
.site-footer{background:#04100a;border-top:2px solid var(--c-brand);margin-top:var(--s-xl);padding:var(--s-lg) 0 var(--s-md)}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s-lg)}
.footer-title{color:var(--c-brand-2);font-weight:700;margin:0 0 .6rem;font-size:1rem}
.footer-about,.footer-help,.footer-help-note{color:var(--c-muted);font-size:.9rem}
.footer-age{color:var(--c-muted);font-size:.86rem;margin-top:.7rem}
.footer-col a{display:block;color:var(--c-muted);padding:.22rem 0;font-size:.91rem}
.footer-col a:hover{color:var(--c-brand-2)}
.footer-help-list{list-style:none;margin:.5rem 0;padding:0;color:var(--c-muted);font-size:.89rem}
.footer-help-list li{margin-bottom:.35rem}
.footer-help-note{margin-top:.5rem;font-size:.85rem}
.footer-bottom{border-top:1px solid var(--c-line);margin-top:var(--s-lg);padding-top:var(--s-md);color:var(--c-muted);font-size:.83rem;text-align:center}
.footer-bottom p{margin:0 0 .5rem}

/* ── Cookie notice ────────────────────────────────────── */
#cn-banner{position:fixed;left:0;right:0;bottom:0;z-index:1500;background:#04120b;border-top:1px solid var(--c-brand);color:var(--c-text);padding:12px 0;font-size:13.5px;display:none}
#cn-banner .cn-inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--s-md);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#cn-banner .cn-text{flex:1;min-width:240px;color:var(--c-muted)}
#cn-banner .cn-text strong{display:block;color:#fff;margin-bottom:2px}
.cn-btn{border:0;border-radius:var(--r-sm);padding:.6rem 1.1rem;font-weight:700;cursor:pointer;font-family:inherit;font-size:13.5px;min-height:44px}
.cn-accept{background:var(--c-cta);color:var(--c-ink)}
.cn-reject{background:transparent;color:var(--c-text);border:1px solid var(--c-line)}

/* ── Макет C: offer banner ────────────────────────────── */
.offer{margin:24px 0;border-radius:24px;overflow:hidden;background:linear-gradient(115deg,#0b3d26 0%,var(--c-brand) 55%,var(--c-cta) 100%);position:relative;padding:36px 32px;display:grid;grid-template-columns:1.25fr .75fr;gap:24px;align-items:center}
.offer:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.06) 0 2px,transparent 2px 26px);pointer-events:none}
.offer__main{position:relative;z-index:1;min-width:0}
.offer h1{color:#fff;font-size:2.35rem;line-height:1.1;margin:0 0 .4rem}
.offer__big{font-size:3.1rem;font-weight:800;color:var(--c-gold);line-height:1.05;margin:0 0 .5rem;letter-spacing:-1px}
.offer__big span{display:block;font-size:1.3rem;color:#fff;font-weight:700;letter-spacing:0}
.offer__lead{color:rgba(255,255,255,.92);font-size:1.05rem;margin:0 0 1.1rem}
.offer__cta{display:flex;gap:.6rem;flex-wrap:wrap}
.btn--dark{background:var(--c-ink);color:#fff;box-shadow:0 10px 26px rgba(0,0,0,.35);padding:.9rem 1.6rem;font-size:1rem}
.btn--dark:hover{background:#000;color:#fff;text-decoration:none;transform:translateY(-2px)}
.btn--white{background:#fff;color:var(--c-ink);padding:.9rem 1.6rem;font-size:1rem}
.btn--white:hover{background:#eafff2;color:var(--c-ink);text-decoration:none;transform:translateY(-2px)}

.scorecard{background:rgba(4,18,11,.74);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:18px 20px;position:relative;z-index:1;min-width:0}
.scorecard__h{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:#bff3d3;margin:0 0 .6rem;font-weight:700}
.sc-row{display:flex;justify-content:space-between;gap:10px;font-size:.9rem;padding:.3rem 0;color:var(--c-muted)}
.sc-row b{color:#fff;text-align:right}

/* ── Макет C: плитки категорий ────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 var(--s-lg)}
.tile{background:var(--c-surface);border:1px solid var(--c-line);border-radius:18px;padding:18px;color:var(--c-text);transition:transform .15s,border-color .15s;display:block;min-width:0}
.tile:hover{border-color:var(--c-cta);transform:translateY(-3px);text-decoration:none}
.tile__ic{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--c-cta),var(--c-brand));display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:.6rem}
.tile b{display:block;font-size:1.05rem;color:#fff;margin-bottom:.15rem}
.tile__x{color:var(--c-muted);font-size:.88rem;display:block}

.content-body--wide{max-width:960px}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width:900px){
  .offer{grid-template-columns:1fr;padding:24px 20px;border-radius:18px}
  .offer h1{font-size:1.72rem}
  .offer__big{font-size:2.3rem}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .hdr-row{flex-wrap:wrap;row-gap:.6rem}
  .logo{order:1;margin-right:auto}
  .burger{order:2;display:flex}
  .hdr-cta{order:4;flex:1 0 100%;width:100%;gap:.5rem}
  .hdr-cta .btn{flex:1 1 0;width:50%;padding:.75rem .4rem;font-size:.95rem}
  .nav-menu{order:3;display:none;position:absolute;top:100%;left:0;right:0;background:#04120b;flex-direction:column;align-items:stretch;padding:var(--s-sm);border-bottom:2px solid var(--c-brand);z-index:999;margin:0}
  .nav-menu.open{display:flex}
  .nav-menu__link{padding:.8rem;border-bottom:1px solid var(--c-line)}
  .nav-more{width:100%}
  .nav-more__btn{display:none}
  .nav-more__list{display:block;position:static;border:0;box-shadow:none;padding:0;min-width:0;background:transparent}
  .nav-more__list a{padding:.8rem;border-bottom:1px solid var(--c-line)}
  .hero__grid{grid-template-columns:1fr}
  .hero{padding:var(--s-md)}
  h1{font-size:1.72rem}
  h2{font-size:1.32rem}
  .proscons{grid-template-columns:1fr}
  .topbar__txt{white-space:normal}
}

@media (max-width:600px){
  body{font-size:16px}
  .container{padding:0 14px}
  .games-grid{grid-template-columns:repeat(2,1fr)}
  th,td{padding:.6rem .7rem;font-size:.88rem}
  /* Мобил-страховка: любые инлайновые гриды из контента схлопываются в 1 колонку */
  [style*="grid-template-columns"]{grid-template-columns:1fr!important}
}

@media (max-width:380px){
  h1{font-size:1.52rem}
  .offer h1{font-size:1.48rem}
  .offer__big{font-size:1.95rem}
  .tiles{grid-template-columns:1fr}
  .hdr-cta .btn{font-size:.86rem;padding:.7rem .3rem}
  .logo img{height:36px}
  .sc-row{font-size:.85rem}
}