/* ==========================================================================
   BetWinner Uruguay — styles.css
   BetWinner dark + gold (Sol de Mayo) · tipografía del sistema · mobile-first.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* fondo oscuro de marca */
  --ink:    #0b0e15;
  --ink-2:  #11151f;
  --ink-3:  #181d2b;
  --ink-4:  #212838;
  --line:   #2a3142;
  --line-2: #3a4255;

  /* brand — betwinner gold (verified from official logo SVG) */
  --gold:      #FFCE06;
  --gold-deep: #e0ad00;
  --gold-soft: rgba(255,206,6,.14);

  /* cultural — Uruguay */
  --celeste:    #7fb2dc;
  --celeste-deep:#5a93c4;
  --artigas-red:#c8443a;

  /* interactive */
  --link:   #4d9be6;
  --on-gold:#1a1500;

  /* semantic */
  --ok:   #36b37e;
  --warn: #e9b949;
  --bad:  #e5534d;

  /* text */
  --text:  #e9edf4;
  --muted: #98a3b4;
  --faint: #919cab;

  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* radii */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-pill:999px;

  /* shadow */
  --shadow-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px -12px rgba(0,0,0,.6);
  --shadow-pop:  0 18px 50px -14px rgba(0,0,0,.75);

  /* type */
  --font: -apple-system, "Segoe UI", Roboto, system-ui, "Helvetica Neue", Arial, sans-serif;

  /* layout */
  --container: 1240px;
  --section-pad: clamp(40px, 7vw, 96px);
  --section-pad-tight: clamp(28px, 4vw, 56px);

  /* nav height for scroll offset */
  --nav-h: 60px;
}

/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; scroll-padding-top:calc(var(--nav-h) + 12px); }
html:focus-within{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font);
  font-size:clamp(1rem,1.05vw,1.075rem);
  line-height:1.65;
  color:var(--text);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  padding-top:var(--nav-h); /* room for fixed header */
}
img,svg,video{ display:block; max-width:100%; height:auto; }
img{ vertical-align:middle; }
a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }
/* enlaces del cuerpo: subrayado además del color */
main p a:not(.btn), main li a:not(.btn), .compare-note a, #contenido-principal a, .faq a, .legal-teaser a{
  text-decoration:underline; text-decoration-color:var(--link); text-underline-offset:2px; text-decoration-thickness:1px;
}
main p a:not(.btn):hover, #contenido-principal a:hover{ text-decoration-thickness:2px; }
button{ font:inherit; color:inherit; cursor:pointer; }
ul,ol{ margin:0; padding:0; }
li{ list-style:none; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
h1,h2,h3,h4{ font-weight:800; letter-spacing:-0.02em; line-height:1.08; }
h1{ font-size:clamp(1.9rem,4.4vw,3.2rem); }
h2{ font-size:clamp(1.5rem,3vw,2.2rem); }
h3{ font-size:clamp(1.15rem,1.8vw,1.4rem); letter-spacing:-0.01em; line-height:1.2; }
h4{ font-size:1.05rem; letter-spacing:0; line-height:1.3; }
p{ margin-block:0 var(--s4); }
p:last-child{ margin-block-end:0; }
strong{ font-weight:700; color:#fff; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:4px; }

/* ---------- 3. LAYOUT HELPERS ---------- */
.container{ max-width:var(--container); margin-inline:auto; padding-inline:clamp(16px,4vw,32px); }
/* Nested .container inside page wrappers must NOT shrink the column again */
.container .container{
  max-width:none;
  width:100%;
  margin-inline:0;
  padding-inline:0;
}
.section{ padding-block:var(--section-pad); }
.section--tight{ padding-block:var(--section-pad-tight); }
.section--alt{ background:var(--ink-2); }
.stack > * + *{ margin-block-start:var(--s4); }
.stack-sm > * + *{ margin-block-start:var(--s2); }
.cluster{ display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; }
.cluster--center{ justify-content:center; }
.grid{ display:grid; gap:var(--s5); }
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.text-center{ text-align:center; }
.muted{ color:var(--muted); }
.faint{ color:var(--faint); }
.celeste{ color:var(--celeste); }
.gold{ color:var(--gold); }
.nowrap{ white-space:nowrap; }
.tnum{ font-variant-numeric:tabular-nums; font-weight:600; }

/* skip link */
.skip-link{
  position:absolute; left:8px; top:-48px; z-index:200;
  background:var(--gold); color:var(--on-gold);
  padding:10px 16px; border-radius:var(--r-sm); font-weight:700;
  transition:top .15s ease;
}
.skip-link:focus{ top:8px; text-decoration:none; }

/* ---------- 4. EYEBROW / SECTION LABELS ---------- */
.eyebrow{
  display:inline-block;
  font-size:0.78rem; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--gold);
  margin-block-end:var(--s3);
}
.eyebrow--celeste{ color:var(--celeste); }
.eyebrow::before{
  content:""; display:inline-block; width:10px; height:10px;
  background:currentColor; margin-inline-end:8px;
  /* tiny Sol de Mayo triangle motif */
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  vertical-align:-1px;
}
.section-head{ margin-block-end:var(--s6); }
.section-head p{ color:var(--muted); }

/* section divider — Sol bullet */
.sol-divider{
  display:flex; align-items:center; gap:var(--s3);
  margin-block:var(--s6) var(--s5);
}
.sol-divider::before,.sol-divider::after{
  content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent);
}

/* ---------- 5. BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:var(--r-pill); border:1px solid transparent;
  font-weight:700; font-size:1rem; line-height:1; text-decoration:none;
  transition:transform .12s ease, background-color .15s ease, border-color .15s ease;
  min-height:48px; white-space:nowrap;
}
.btn:hover{ text-decoration:none; }
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--gold); color:var(--on-gold); }
.btn--primary:hover{ background:var(--gold-deep); }
.btn--ghost{ background:transparent; color:var(--text); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn--block{ display:flex; width:100%; }
.btn--sm{ padding:9px 16px; min-height:38px; font-size:0.9rem; }

/* ---------- 6. HEADER / NAV ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:linear-gradient(180deg, rgba(14,18,28,.98), rgba(11,14,21,.96));
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid rgba(255,206,6,.12);
  box-shadow:0 6px 22px rgba(0,0,0,.32);
}
.site-header::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent 4%, rgba(255,206,6,.5), transparent 96%);
  pointer-events:none;
}
.site-header__inner{
  display:flex; align-items:center; gap:12px;
  min-height:var(--nav-h); padding-block:0; min-width:0;
  flex-wrap:nowrap;
}
.site-header__logo{
  display:inline-flex; align-items:center; flex-shrink:0;
}
.site-header__logo img{ height:22px; width:154px; }
.brand-link:hover{ text-decoration:none; filter:brightness(1.08); }

.main-nav{
  margin-inline-start:4px;
  min-width:0;
  flex:1 1 auto;
  overflow:hidden; /* never bleed under header-actions */
}
.main-nav__list{
  display:flex; align-items:center; justify-content:flex-start;
  gap:1px; flex-wrap:nowrap; min-width:0;
}
.main-nav__list > li{ position:relative; flex-shrink:0; }
.main-nav a{
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 8px; border-radius:999px;
  color:var(--muted); font-weight:600; font-size:0.78rem; line-height:1;
  white-space:nowrap;
  overflow-wrap:normal;
  border:1px solid transparent;
  transition:color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.main-nav a:hover{
  color:var(--text); background:rgba(255,255,255,.045);
  border-color:rgba(255,206,6,.16); text-decoration:none;
}
.main-nav a[aria-current="true"]{
  color:var(--gold);
  background:rgba(255,206,6,.1);
  border-color:rgba(255,206,6,.32);
  box-shadow:0 0 0 1px rgba(255,206,6,.08);
}
.nav-icon{
  width:14px; height:14px; flex-shrink:0; display:none; /* desktop strip: text only — icons in drawer */
  opacity:.85;
}
.main-nav a:hover .nav-icon,
.main-nav a[aria-current="true"] .nav-icon{ opacity:1; }
.nav-icon--sub{ width:14px; height:14px; opacity:.75; }
.main-nav__sub > a::after{
  content:""; width:9px; height:9px; margin-inline-start:1px; opacity:.65; flex-shrink:0;
  background:center / contain no-repeat url("assets/icons/chevron-down.svg");
}
.main-nav__sub-list{
  position:absolute; top:calc(100% + 10px); right:0; left:auto; min-width:220px;
  background:rgba(18,22,32,.98); border:1px solid rgba(255,206,6,.2);
  border-radius:14px; padding:8px; box-shadow:0 16px 40px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  z-index:20;
}
.main-nav__sub:hover .main-nav__sub-list,
.main-nav__sub:focus-within .main-nav__sub-list{
  opacity:1; visibility:visible; transform:translateY(0);
}
.main-nav__sub-list a{
  display:flex; width:100%; padding:10px 12px; font-size:0.88rem;
  border-radius:10px; white-space:nowrap; overflow-wrap:normal;
}
.main-nav__sub-list .nav-icon{ display:block; }

.header-actions{
  margin-inline-start:10px;
  display:flex; align-items:center; gap:8px;
  flex-shrink:0;
  position:relative;
  z-index:4;
  padding-inline-start:14px;
  border-inline-start:1px solid rgba(255,206,6,.18);
  min-height:40px;
  /* solid cover so nav never shows through/under */
  background:linear-gradient(180deg, rgba(14,18,28,.98), rgba(11,14,21,.96));
}
.header-actions .btn--primary{
  box-shadow:0 0 0 1px rgba(255,206,6,.22), 0 6px 16px rgba(255,206,6,.16);
  padding:0 16px; min-height:34px; height:34px; font-size:0.78rem; letter-spacing:.06em;
  border-radius:999px;
}
.header-actions .btn--primary:hover{
  box-shadow:0 0 0 1px rgba(255,206,6,.35), 0 8px 20px rgba(255,206,6,.22);
}

/* country chip */
.country-chip{
  display:inline-flex; align-items:center; gap:7px;
  height:34px; padding:0 11px;
  border:1px solid rgba(255,255,255,.08); border-radius:999px;
  font-size:0.74rem; color:var(--muted); font-weight:600;
  background:rgba(255,255,255,.035);
  white-space:nowrap;
  line-height:1;
  overflow:hidden;
  flex-shrink:0;
}
.country-chip__flag{
  display:inline-flex; align-items:center; justify-content:center;
  line-height:0; flex-shrink:0; width:18px; height:12px;
}
.country-chip__flag-img{
  width:18px !important; height:12px !important; max-width:none !important;
  border-radius:2px; object-fit:cover; display:block;
  box-shadow:0 0 0 1px rgba(255,255,255,.14);
}

/* lite toggle — reset native button chrome (was white box on desktop) */
.lite-toggle{
  appearance:none; -webkit-appearance:none;
  display:inline-flex; align-items:center; gap:8px;
  height:34px; padding:0 11px;
  margin:0;
  font:inherit; font-size:0.74rem; font-weight:600; line-height:1;
  color:var(--muted);
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.lite-toggle:hover,
.lite-toggle:focus-visible{
  color:var(--text);
  border-color:rgba(255,206,6,.28);
  background:rgba(255,206,6,.06);
  outline:none;
}
.lite-toggle[aria-pressed="true"]{
  color:var(--gold);
  border-color:rgba(255,206,6,.35);
  background:rgba(255,206,6,.1);
}
.lite-toggle__switch{
  position:relative; width:32px; height:18px; border-radius:999px;
  background:#0b0e15; border:1px solid rgba(255,255,255,.12);
  transition:background .15s ease, border-color .15s ease; flex-shrink:0; padding:0;
  display:block;
}
.lite-toggle__switch::after{
  content:""; position:absolute; top:1px; left:1px; width:14px; height:14px;
  border-radius:50%; background:#9aa3b5;
  box-shadow:0 1px 3px rgba(0,0,0,.45);
  transition:transform .18s ease, background .15s ease;
}
.lite-toggle[aria-pressed="true"] .lite-toggle__switch{
  background:rgba(255,206,6,.22); border-color:var(--gold);
}
.lite-toggle[aria-pressed="true"] .lite-toggle__switch::after{
  transform:translateX(14px); background:var(--gold);
}
.lite-toggle__label{ display:none; }

/* hamburger — bars live inside .nav-toggle__icon so nth-child is stable */
.nav-toggle{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; padding:0;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,206,6,.28);
  border-radius:12px; flex-shrink:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.25) inset;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.nav-toggle:hover,
.nav-toggle:focus-visible{
  border-color:rgba(255,206,6,.55);
  background:rgba(255,206,6,.08);
  outline:none;
}
.nav-toggle[aria-expanded="true"]{
  border-color:var(--gold);
  background:rgba(255,206,6,.12);
  box-shadow:0 0 0 1px rgba(255,206,6,.2), 0 6px 16px rgba(255,206,6,.12);
}
.nav-toggle__icon{
  position:relative;
  display:block; width:18px; height:14px;
}
.nav-toggle__bar{
  position:absolute; left:0; right:0;
  display:block; height:2px; border-radius:2px;
  background:var(--text);
  transition:transform .22s ease, opacity .18s ease, top .22s ease, background .2s ease;
}
.nav-toggle__bar:nth-child(1){ top:0; }
.nav-toggle__bar:nth-child(2){ top:6px; }
.nav-toggle__bar:nth-child(3){ top:12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar{ background:var(--gold); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){
  top:6px; transform:rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){
  opacity:0; transform:scaleX(0);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){
  top:6px; transform:rotate(-45deg);
}

/* Compact desktop strip */
@media(min-width:1101px) and (max-width:1280px){
  .main-nav a{ padding:6px 7px; font-size:0.76rem; gap:0; }
  .country-chip > span:not(.country-chip__flag){ display:none; }
  .country-chip{ padding:0 8px; }
}
@media(min-width:1281px){
  .main-nav a{ padding:7px 9px; font-size:0.8rem; gap:0; }
  .site-header__logo img{ height:24px; width:168px; }
  .lite-toggle__label{ display:inline; }
  .header-actions{ gap:8px; padding-inline-start:14px; margin-inline-start:12px; }
}
@media(min-width:1440px){
  /* roomy screens: show nav icons again */
  .main-nav > .main-nav__list > li > a .nav-icon{ display:block; }
  .main-nav a{ gap:6px; padding:7px 10px; font-size:0.82rem; }
}

/* Drawer below 1100 — guarantees one-row header chrome */
@media(max-width:1100px){
  .site-header__inner{
    justify-content:flex-start;
    gap:10px;
    width:100%;
  }
  .main-nav{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    background:rgba(14,18,28,.98);
    border-bottom:1px solid rgba(255,206,6,.16);
    max-height:calc(100vh - var(--nav-h)); overflow-y:auto;
    padding:var(--s4) clamp(16px,4vw,32px);
    transform:translateY(-120%); transition:transform .25s ease;
    margin:0; flex:0 0 0; width:100%; min-width:0; min-height:0;
    box-shadow:0 18px 40px rgba(0,0,0,.4);
    order:99; /* out of the header row visually */
    overflow-x:hidden;
  }
  .main-nav[data-open="true"]{ transform:translateY(0); overflow-y:auto; }
  .main-nav__list{ flex-direction:column; align-items:stretch; gap:4px; flex-wrap:nowrap; }
  .main-nav__list a{
    padding:14px 14px; font-size:1rem; border-radius:12px; width:100%;
    gap:10px;
  }
  .main-nav .nav-icon{ display:block; width:18px; height:18px; }
  .main-nav__sub-list{ right:auto; left:0; }
  .main-nav__sub-list{ position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; background:transparent; padding:0 0 0 16px; }
  .site-header__logo{ order:1; flex-shrink:0; margin-inline-end:0; }
  .header-actions{
    order:2;
    margin-inline-start:auto; /* push controls to the right edge */
    gap:6px;
    padding-inline-start:0;
    border-inline-start:0;
    min-height:0;
    background:transparent;
  }
  .nav-toggle{ display:inline-flex; order:3; flex-shrink:0; }
  .country-chip > span:not(.country-chip__flag){ display:none; }
  .country-chip{ padding:0 8px; height:34px; }
  .lite-toggle{ padding:0 8px; }
}
@media(min-width:1101px){
  .nav-toggle{ display:none; }
}

/* ===== MOBILE HEADER FIT (≤640) ===== */
@media(max-width:640px){
  .site-header__inner{ gap:8px; }
  .site-header__logo img{ width:124px; height:18px; }
  .header-actions{ gap:6px; }
  .lite-toggle{ gap:0; padding:0 7px; }
  .lite-toggle__switch{ width:30px; height:16px; }
  .lite-toggle__switch::after{ width:12px; height:12px; top:1px; left:1px; }
  .lite-toggle[aria-pressed="true"] .lite-toggle__switch::after{ transform:translateX(12px); }
  .header-actions .btn--sm{ padding:7px 11px; min-height:32px; font-size:0.78rem; }
}
@media(max-width:400px){
  .site-header__inner{ gap:6px; }
  .site-header__logo img{ width:108px; height:16px; }
  .header-actions{ gap:5px; }
  .header-actions .btn--sm{ padding:6px 9px; min-height:30px; }
  .lite-toggle{ display:none; }
}

/* ---------- 7. HERO ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(255,206,6,.10), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(127,178,220,.08), transparent 60%),
    var(--ink);
  padding-block:clamp(40px,7vw,80px);
  border-bottom:1px solid var(--line);
}
.hero__bg-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.38; z-index:0;
}
.hero::after{
  /* readability scrim */
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(11,14,21,.88) 0%, rgba(11,14,21,.72) 48%, rgba(11,14,21,.55) 100%);
}
.hero--page .hero__bg-img{ opacity:.42; }
/* Charrúa-inspired geometric texture */
.hero::before{
  content:""; position:absolute; inset:0; z-index:2; opacity:.06; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%23FFCE06' stroke-width='1'><polygon points='40,4 50,24 72,24 54,38 62,60 40,48 18,60 26,38 8,24 30,24'/><polygon points='0,70 10,60 20,70 10,80'/><polygon points='60,70 70,60 80,70 70,80'/></g></svg>");
  background-size:80px 80px;
}
.hero__sol{
  position:absolute; right:-40px; top:-40px; width:clamp(220px,30vw,460px); max-width:55vw; opacity:.10; z-index:1; pointer-events:none;
}
@media(max-width:640px){
  .hero__sol{ right:-20px; top:-20px; width:200px; max-width:55vw; }
}
.hero__inner{ position:relative; z-index:3; }
.hero__inner > .cluster{ margin-block-start:var(--s5); }
.hero:not(.hero--page) h1{ max-width:22ch; }
.hero .lead{
  font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--text); max-width:62ch; margin-block-start:var(--s4);
}
.hero--page .lead{
  max-width:none;
}
.hero__sub-line{ color:var(--muted); font-size:0.95rem; max-width:70ch; }
.trust-chips{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-block-start:var(--s4); }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border:1px solid var(--line); border-radius:var(--r-pill);
  font-size:0.8rem; color:var(--muted); font-weight:600; background:rgba(17,21,31,.6);
}
.chip--gold{ border-color:var(--gold); color:var(--gold); }
.chip--celeste{ border-color:var(--celeste); color:var(--celeste); }

/* ---------- 8. RATING BOX + SUB-SCORES ---------- */
.rating-box{
  background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s5); box-shadow:var(--shadow-card);
}
.rating-box__main{ display:flex; align-items:baseline; gap:var(--s3); }
.rating-box__score{ font-size:clamp(2.6rem,5vw,3.4rem); font-weight:800; color:var(--gold); line-height:1; font-variant-numeric:tabular-nums; }
.rating-box__out{ color:var(--muted); font-size:1rem; }
.rating-box__count{ color:var(--muted); font-size:0.88rem; margin-block-start:6px; }
.stars{ color:var(--gold); letter-spacing:2px; font-size:1.1rem; line-height:1; }
.stars span{ color:var(--line-2); }
.sub-scores{ margin-block-start:var(--s5); display:grid; gap:var(--s3); }
.sub-score{ display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center; }
.sub-score__label{ color:var(--muted); font-size:0.9rem; }
.sub-score__bar{ grid-column:1 / -1; height:6px; background:var(--ink-4); border-radius:var(--r-pill); overflow:hidden; }
.sub-score__fill{ height:100%; background:linear-gradient(90deg,var(--gold-deep),var(--gold)); border-radius:inherit; }
.sub-score__val{ color:var(--gold); font-variant-numeric:tabular-nums; font-weight:700; }

/* ---------- 9. PROS / CONS ---------- */
.proscons{ display:grid; gap:var(--s5); }
@media(min-width:641px){ .proscons{ grid-template-columns:1fr 1fr; } }
.proscons__card{
  background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s5);
}
.proscons__card--cons{ border-color:rgba(229,83,77,.25); }
.proscons__title{ display:flex; align-items:center; gap:8px; margin-block-end:var(--s3); color:#fff; }
.proscons__list li{ position:relative; padding-inline-start:28px; margin-block-end:var(--s2); }
.proscons__list li::before{
  position:absolute; left:0; top:1px; font-weight:800; font-size:0.95rem;
}
.proscons__list--pros li::before{ content:"✓"; color:var(--ok); }
.proscons__list--cons li::before{ content:"✗"; color:var(--bad); }

/* ---------- 10. BONUS BOX + 5-STEP LIST ---------- */
.bonus-box{
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s6); box-shadow:var(--shadow-card); position:relative; overflow:hidden;
}
.bonus-box::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--gold);
}
.bonus-box__head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s3) var(--s4); }
.bonus-box__pct{ font-size:clamp(2.2rem,4vw,3rem); font-weight:800; color:var(--gold); line-height:1; font-variant-numeric:tabular-nums; }
.bonus-box__cap{ color:var(--muted); }
.bonus-box__terms{
  margin-block-start:var(--s4); padding:var(--s4); background:rgba(255,206,6,.05);
  border:1px dashed var(--line-2); border-radius:var(--r-md); font-size:0.9rem; color:var(--muted);
}
.bonus-box__terms strong{ color:var(--text); }

.steps{ counter-reset:step; display:grid; gap:var(--s4); margin-block-start:var(--s5); }
.steps__item{ position:relative; padding-inline-start:64px; min-height:48px; counter-increment:step; }
.steps__item::before{
  content:counter(step); position:absolute; left:0; top:0;
  width:44px; height:44px; border-radius:50%;
  background:var(--gold-soft); border:1px solid var(--gold); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.1rem;
}
.steps__item h4{ margin-block-end:4px; }
.steps__item p{ color:var(--muted); font-size:0.92rem; }

/* ---------- 11. CATEGORY TILES ---------- */
.cat-tiles{ grid-template-columns:repeat(2,1fr); }
@media(min-width:641px){ .cat-tiles{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:961px){ .cat-tiles{ grid-template-columns:repeat(4,1fr); } }
.cat-tile{
  display:flex; flex-direction:column; gap:8px; padding:var(--s4);
  background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-md);
  color:var(--text); text-decoration:none; min-height:96px; transition:border-color .15s ease, transform .12s ease;
}
.cat-tile:hover{ text-decoration:none; border-color:var(--gold); transform:translateY(-2px); }
.cat-tile__icon{ font-size:1.4rem; }
.cat-tile__title{ font-weight:700; color:#fff; }
.cat-tile__desc{ font-size:0.82rem; color:var(--muted); }

/* ---------- 12. GAME CAROUSEL ---------- */
.carousel{ position:relative; max-width:100%; overflow:hidden; }
.carousel__viewport{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(200px,240px);
  align-items:start;
  gap:var(--s4); overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding-inline:4px;
  padding-block:4px var(--s4);
  -ms-overflow-style:none; scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
  max-width:100%;
}
@media(max-width:640px){
  .carousel__viewport{ grid-auto-columns:minmax(168px,200px); }
}
.carousel__viewport::-webkit-scrollbar{ height:8px; }
.carousel__viewport::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:var(--r-pill); }
@media(min-width:961px){ .carousel__viewport{ grid-auto-columns:minmax(220px,260px); } }

.game-card{
  position:relative;
  scroll-snap-align:start; align-self:start;
  display:flex; flex-direction:column;
  background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.game-card[data-open="true"]{
  border-color:rgba(255,206,6,.45);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  z-index:2;
}
.game-card__cover{
  position:relative; display:block; width:100%; aspect-ratio:360/250; overflow:hidden; background:var(--ink-4);
  z-index:0;
}
.game-card__cover img{ width:100%; height:100%; object-fit:cover; }
.game-card__body{ padding:10px 12px 12px; position:static; }
.game-card__name{ font-weight:700; font-size:0.92rem; color:#fff; line-height:1.2; }
.game-card__prov{ font-size:0.78rem; color:var(--muted); margin-block-start:2px; }
.game-card__toggle{
  margin-block-start:8px; width:100%; padding:6px 10px;
  background:transparent; border:1px solid var(--line-2); border-radius:var(--r-sm);
  font-size:0.8rem; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:6px;
  position:relative; z-index:3;
}
.game-card__toggle:hover{ border-color:var(--gold); color:var(--gold); }
.game-card__toggle[aria-expanded="true"]{
  border-color:var(--gold); color:var(--gold); background:rgba(255,206,6,.08);
}
.game-card__toggle[aria-expanded="true"] .game-card__toggle-icon{ transform:rotate(45deg); }
.game-card__toggle-icon{ transition:transform .15s ease; display:inline-block; }
/* Overlay anchored to the card (not body) — covers only the image */
.game-card__panel{
  position:absolute; left:0; right:0; top:0;
  width:100%;
  aspect-ratio:360/250;
  height:auto;
  z-index:2;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:14px 12px;
  background:linear-gradient(180deg, rgba(11,14,21,.2) 0%, rgba(11,14,21,.88) 48%, rgba(11,14,21,.98) 100%);
  opacity:0; visibility:hidden;
  transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  pointer-events:none;
  box-sizing:border-box;
}
.game-card[data-open="true"] .game-card__panel{
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
}
.game-card__panel-inner{ overflow:visible; }
.game-card__panel p{ margin:0 0 10px; font-size:0.82rem; color:#e8ecf4; line-height:1.45; }
.game-card__panel .btn{ margin:0; width:100%; min-height:40px; }

.carousel__controls{ display:flex; gap:var(--s2); }
.carousel__btn{
  width:44px; height:44px; border-radius:50%; background:var(--ink-3); border:1px solid var(--line-2);
  color:var(--text); font-size:1.2rem; display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .15s ease, color .15s ease, opacity .15s ease;
}
.carousel__btn:hover{ border-color:var(--gold); color:var(--gold); }
.carousel__btn[disabled]{ opacity:.4; cursor:not-allowed; }
.carousel__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s4); margin-block-end:var(--s5); flex-wrap:wrap; }

/* ---------- 13. PROMO BANNERS ---------- */
.banner-grid{ grid-template-columns:1fr; }
@media(min-width:641px){ .banner-grid{ grid-template-columns:1fr 1fr; } }
.banner{
  position:relative; display:block; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:var(--ink-3); min-height:180px;
}
.banner img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.banner__overlay{
  position:relative; z-index:1; padding:var(--s5); min-height:inherit;
  display:flex; flex-direction:column; justify-content:flex-end; gap:8px;
  background:linear-gradient(180deg, rgba(11,14,21,.15) 0%, rgba(11,14,21,.88) 100%);
}
.banner__title{ font-size:1.15rem; color:#fff; font-weight:800; line-height:1.15; }
.banner__sub{ font-size:0.86rem; color:var(--muted); }
.banner:hover{ text-decoration:none; border-color:var(--gold); }
.banner--hero img{ position:relative; }

/* ---------- 14. PROVIDER GRID ---------- */
.logo-grid{ grid-template-columns:repeat(2,1fr); }
@media(min-width:481px){ .logo-grid{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:641px){ .logo-grid{ grid-template-columns:repeat(4,1fr); } }
@media(min-width:961px){ .logo-grid{ grid-template-columns:repeat(6,1fr); } }
.logo-tile{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, #171c28, #12161f);
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--s4) var(--s3); min-height:72px; transition:border-color .15s ease, transform .15s ease;
}
.logo-tile:hover{ border-color:var(--gold); transform:translateY(-1px); }
.logo-tile img{
  width:100%; max-width:148px; height:36px; max-height:36px;
  object-fit:contain; display:block;
}

/* ---------- 15. PAYMENT GRID + TABLES ---------- */
.pay-grid{ grid-template-columns:repeat(3,1fr); }
@media(min-width:481px){ .pay-grid{ grid-template-columns:repeat(4,1fr); } }
@media(min-width:641px){ .pay-grid{ grid-template-columns:repeat(6,1fr); } }
@media(min-width:961px){ .pay-grid{ grid-template-columns:repeat(8,1fr); } }
.pay-tile{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--s4) var(--s3); min-height:80px; transition:border-color .15s ease;
}
.pay-tile:hover{ border-color:var(--gold); }
.pay-tile img{ max-height:32px; width:auto; object-fit:contain; }
.pay-tile__name{ font-size:0.72rem; color:var(--muted); text-align:center; }

/* tables — base */
.table-wrap{ margin-block:var(--s5); max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.data{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  font-variant-numeric:tabular-nums;
}
table.data caption{ text-align:left; padding:var(--s4); color:var(--muted); font-size:0.88rem; font-style:italic; }
table.data th,table.data td{ padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
table.data thead th{
  background:var(--ink-4); color:var(--gold); font-weight:700; font-size:0.82rem;
  text-transform:uppercase; letter-spacing:0.06em;
}
table.data tbody tr:last-child td{ border-bottom:0; }
table.data tbody tr:hover{ background:var(--ink-4); }
table.data .method-cell{ display:flex; align-items:center; gap:10px; }
table.data .method-cell img{ width:32px; height:20px; object-fit:contain; flex-shrink:0; }

/* card-stack on mobile — tables must NEVER horizontal-scroll */
@media(max-width:640px){
  table.data{
    display:block; width:100%;
  }
  table.data caption{
    display:block; width:100%; max-width:100%;
    box-sizing:border-box; padding:var(--s4);
    text-align:left; white-space:normal;
  }
  table.data thead{ display:none; }
  table.data tbody, table.data tr, table.data td{ display:block; width:100%; }
  table.data tr{
    border-bottom:1px solid var(--line); padding:var(--s3) var(--s4);
  }
  table.data tbody tr:last-child{ border-bottom:0; }
  table.data td{
    padding:8px 0; border:0;
    display:flex; flex-direction:column; align-items:stretch; gap:4px;
    overflow-wrap:normal; word-break:normal;
  }
  table.data td::before{
    content:attr(data-label);
    color:var(--muted); font-size:0.78rem; text-transform:uppercase;
    letter-spacing:0.06em; font-weight:700;
    display:block; width:100%;
    white-space:nowrap; overflow-wrap:normal; word-break:keep-all;
  }
  table.data td[data-full]{ display:flex; }
  table.data .method-cell{ flex-wrap:wrap; }
  table.data .method-cell img{ width:28px; height:18px; }
}

/* ---------- 16. TRUST STRIP ---------- */
.trust-strip{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--s4) var(--s6);
  padding:var(--s5); background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-lg);
}
.trust-item{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:0.9rem; }
.trust-item strong{ color:var(--text); }
.badge{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-width:40px; height:40px; padding:0 10px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:var(--ink-3); font-weight:800; font-size:0.78rem; color:var(--gold);
}
.badge--ok{ border-color:var(--ok); color:var(--ok); }

/* ---------- 17. FAQ <details> ---------- */
.faq{ display:grid; gap:var(--s3); max-width:none; width:100%; }
.faq details{
  background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-md);
  padding:0; transition:border-color .15s ease;
}
.faq details[open]{ border-color:var(--gold); }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:var(--s4) var(--s5); cursor:pointer; font-weight:700; color:#fff;
  list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; color:var(--gold); font-weight:800; font-size:1.3rem; line-height:1; flex-shrink:0;
  width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
}
.faq details[open] summary::after{ content:"−"; }
.faq__answer{ padding:0 var(--s5) var(--s5); color:var(--muted); }
.faq__answer p{ margin-block-end:var(--s3); }
.faq__answer a{ color:var(--link); }

/* ---------- 18. REVIEWS ---------- */
.reviews-honesty{
  display:flex; gap:12px; padding:var(--s4); margin-block-end:var(--s5);
  background:rgba(127,178,220,.06); border:1px solid rgba(127,178,220,.25); border-left:4px solid var(--celeste);
  border-radius:var(--r-md); font-size:0.9rem; color:var(--muted);
}
.reviews-honesty strong{ color:var(--celeste); }
.reviews-grid{ grid-template-columns:1fr; }
@media(min-width:641px){ .reviews-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:961px){ .reviews-grid{ grid-template-columns:repeat(3,1fr); } }
.review-card{
  display:flex; flex-direction:column; gap:var(--s3);
  background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s5); box-shadow:var(--shadow-card);
}
.review-card__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }
.review-card__author{ display:flex; align-items:center; gap:10px; }
.review-avatar{
  width:40px; height:40px; border-radius:50%; background:var(--gold-soft); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0;
}
.review-card__name{ font-weight:700; color:#fff; font-size:0.95rem; line-height:1.1; }
.review-card__meta{ font-size:0.78rem; color:var(--faint); }
.review-card__title{ font-weight:700; color:var(--gold); font-size:1rem; }
.review-card__body{ color:var(--muted); font-size:0.92rem; }
.review-card--skeleton{ min-height:180px; background:var(--ink-3); border:1px dashed var(--line); }
.reviews-fallback{ padding:var(--s5); text-align:center; color:var(--muted); background:var(--ink-3); border-radius:var(--r-md); }

/* aggregate */
.aggregate{ display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; }
.aggregate__score{ font-size:2.2rem; font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums; line-height:1; }
.aggregate__out{ color:var(--muted); }

/* ---------- 19. FOOTER ---------- */
.site-footer{
  background:var(--ink-2); border-top:1px solid var(--line);
  padding-block:var(--section-pad-tight) var(--s5);
}
.site-footer::before{
  /* Artigas ribbon — celeste/white/red hairline */
  content:""; display:block; height:3px; margin-block-end:var(--s6);
  background:linear-gradient(90deg,var(--celeste) 0 33%, #fff 33% 66%, var(--artigas-red) 66% 100%);
  border-radius:var(--r-pill);
}
.footer-grid{ grid-template-columns:1fr; gap:var(--s6); }
@media(min-width:641px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:961px){ .footer-grid{ grid-template-columns:2fr 1fr 1.4fr 1.4fr; } }
.footer-col h3{ font-size:0.95rem; color:var(--gold); margin-block-end:var(--s3); }
.footer-col ul li{ margin-block-end:8px; }
.footer-col a{ color:var(--muted); font-size:0.9rem; }
.footer-col a:hover{ color:var(--text); }
.footer-brand{ display:flex; flex-direction:column; gap:var(--s3); }
.footer-brand img{ height:26px; width:183px; }
.footer-honesty{
  font-size:0.82rem; color:var(--faint); padding:var(--s3); border:1px dashed var(--line); border-radius:var(--r-md);
}
.footer-badges{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.footer-badges .badge{ font-size:0.7rem; min-width:auto; height:auto; padding:6px 10px; }
.footer-bottom{
  margin-block-start:var(--s6); padding-block-start:var(--s5); border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:var(--s3); font-size:0.8rem; color:var(--faint);
}
.footer-bottom .licence{ color:var(--muted); font-size:0.82rem; }
@media(min-width:641px){ .footer-bottom{ flex-direction:row; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; } }

/* ---------- 20. AGE-GATE MODAL ---------- */
.age-gate{
  position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  padding:var(--s4); background:rgba(11,14,21,.94); backdrop-filter:blur(6px);
}
.age-gate[hidden]{ display:none; }
.age-gate__card{
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s6); max-width:460px; width:100%; text-align:center; box-shadow:var(--shadow-pop);
  position:relative;
}
.age-gate__card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--celeste) 0 33%, #fff 33% 66%, var(--artigas-red) 66% 100%);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.age-gate__sun{ width:64px; height:64px; margin:0 auto var(--s3); }
.age-gate__title{ font-size:1.4rem; margin-block-end:var(--s2); }
.age-gate__body{ color:var(--muted); font-size:0.92rem; margin-block-end:var(--s5); }
.age-gate__actions{ display:flex; gap:var(--s3); justify-content:center; flex-wrap:wrap; }
.age-gate__small{ margin-block-start:var(--s4); font-size:0.78rem; color:var(--faint); }
.age-gate[aria-hidden="false"]{ animation:fadeIn .2s ease; }

/* ---------- 21. BREADCRUMBS ---------- */
.breadcrumbs{ padding-block:var(--s3) 0; font-size:0.85rem; color:var(--muted); }
.breadcrumbs ol{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.breadcrumbs li{ display:flex; align-items:center; gap:6px; }
.breadcrumbs li + li::before{ content:"/"; color:var(--faint); }
.breadcrumbs a{ color:var(--muted); }
.breadcrumbs a:hover{ color:var(--gold); }
.breadcrumbs [aria-current]{ color:var(--text); }

/* ---------- 22. AUTHOR BYLINE ---------- */
.byline{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s4);
  padding:var(--s4); background:rgba(18,22,32,.72); border:1px solid var(--line); border-radius:var(--r-md);
  font-size:0.88rem; color:var(--muted);
  backdrop-filter:blur(6px);
}
.byline strong{ color:var(--text); }
.byline__dot{ width:4px; height:4px; border-radius:50%; background:var(--line-2); flex-shrink:0; }
.byline__verified{ color:var(--ok); display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.byline__check{
  width:14px; height:14px; display:block; flex-shrink:0;
}

/* ---------- 23. RESPONSIBLE-GAMING BLOCK ---------- */
.rg-block{
  background:var(--ink-2); border:1px solid var(--line); border-left:4px solid var(--celeste);
  border-radius:var(--r-md); padding:var(--s5);
}
.rg-block h3{ color:var(--celeste); }
.rg-block p{ color:var(--muted); font-size:0.92rem; }
.rg-block__links{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-block-start:var(--s3); }
.rg-block__links a{ font-size:0.88rem; }

/* ---------- 24. UY-vs-AR DISAMBIGUATION ---------- */
.disambig{
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
  border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s6);
}
.disambig__grid{ grid-template-columns:1fr; }
@media(min-width:641px){ .disambig__grid{ grid-template-columns:1fr 1fr; } }
.disambig__card{ padding:var(--s4); background:var(--ink); border:1px solid var(--line); border-radius:var(--r-md); }
.disambig__flag{ font-size:1.6rem; }
.disambig__card h4{ color:var(--gold); margin-block:var(--s2) 6px; }

/* ---------- 25. LEGALIDAD TEASER ---------- */
.legal-teaser{
  background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s6);
  position:relative; overflow:hidden;
}
.legal-teaser::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--celeste) 0 33%, #fff 33% 66%, var(--artigas-red) 66% 100%);
}
.legal-teaser h2 .celeste{ color:var(--celeste); }
.legal-teaser__points{ display:grid; gap:var(--s3); margin-block:var(--s5); }
.legal-teaser__points li{ position:relative; padding-inline-start:32px; color:var(--muted); }
.legal-teaser__points li::before{
  content:""; position:absolute; left:0; top:6px; width:14px; height:14px;
  background:var(--celeste);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}

/* ---------- 26. LONG-FORM SEO TEXT ---------- */
#contenido-principal{ max-width:none; width:100%; }
#contenido-principal p{ margin-block-end:var(--s4); color:var(--text); }
#contenido-principal h2{ margin-block:var(--s6) var(--s4); }
#contenido-principal h3{ margin-block:var(--s5) var(--s3); color:#fff; }
#contenido-principal ul{ margin:0 0 var(--s4); padding-inline-start:20px; }
#contenido-principal ul li{ list-style:disc; margin-block-end:6px; }
#contenido-principal a{ color:var(--link); }
.lead-block{ font-size:1.1rem; color:var(--muted); width:100%; max-width:none; }

/* ---------- 27. UTILITIES: lite mode, reduced motion ---------- */
body.lite-mode{
  --section-pad:clamp(28px,4vw,56px);
}
body.lite-mode .hero::before,
body.lite-mode .hero__sol,
body.lite-mode .banner img{ display:none; }
body.lite-mode .banner{ min-height:120px; }
body.lite-mode .logo-grid,
body.lite-mode .pay-grid{ gap:var(--s3); }
body.lite-mode img{ } /* keep covers; grids already lighter */

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
}

/* ---------- 28. MISC ANIMATIONS ---------- */
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

/* ---------- 29. SPORTS / CASINO / APP TEASERS (generic feature card) ---------- */
.feature-grid{ grid-template-columns:1fr; }
@media(min-width:641px){ .feature-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:961px){ .feature-grid{ grid-template-columns:repeat(3,1fr); } }
.feature{
  background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--s5); display:flex; flex-direction:column; gap:var(--s2);
}
.feature h3{ color:#fff; }
.feature p{ color:var(--muted); font-size:0.92rem; }
.feature__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px;
  background:rgba(255,206,6,.08); border:1px solid rgba(255,206,6,.22);
  margin-block-end:4px;
}
.feature__icon-img{ width:22px; height:22px; display:block; }
.feature__icon-img--flag{ width:28px; height:18px; border-radius:2px; object-fit:cover; }
.disambig__flag img{ width:36px; height:24px; border-radius:3px; object-fit:cover; box-shadow:0 0 0 1px rgba(255,255,255,.12); }

.compare-note{ font-size:0.84rem; color:var(--faint); font-style:italic; margin-block-start:var(--s3); }

/* ---------- 30. PRINT ---------- */
@media print{
  .site-header,.site-footer,.age-gate,.nav-toggle,.btn,.carousel__controls,.hero__sol,.to-top{ display:none!important; }
  body{ background:#fff; color:#000; padding-top:0; }
}

/* Long URLs / tokens must wrap on narrow viewports — never overflow (QA fix). */
p, li, dd, td, a, blockquote { overflow-wrap: anywhere; }
/* Keep UI chrome from breaking mid-word */
.chip, .byline, .byline span, .byline a, .main-nav a, .country-chip,
.btn, .nav-icon, .feature__icon, .breadcrumbs a, .site-header {
  overflow-wrap: normal;
  word-break: normal;
}

/* ---------- PAGE HERO (subpages) ---------- */
.hero--page{
  position:relative;
  padding-block:clamp(36px,6vw,72px);
  width:100vw;
  max-width:100vw;
  margin-inline:calc(50% - 50vw);
  box-sizing:border-box;
  overflow:hidden;
  /* same content column as .container > .section */
  padding-inline:clamp(16px,4vw,32px);
}
.hero--page .hero__inner{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:0;
  position:relative;
  z-index:3;
}
.hero--page h1{
  max-width:none;
  width:100%;
  overflow-wrap:normal;
  word-break:normal;
}
.hero--page .lead{
  max-width:none !important; /* override .hero .lead 62ch */
  width:100%;
  overflow-wrap:normal;
}
.hero--page .byline{ position:relative; z-index:3; margin-block-start:var(--s6); width:100%; }
.hero--page .trust-chips{ justify-content:flex-start; width:100%; }

/* Full-bleed sections: one shared content column (fixes eyebrow vs h2 misalignment) */
.container > .section{
  width:100vw;
  max-width:100vw;
  margin-inline:calc(50% - 50vw);
  box-sizing:border-box;
  padding-inline:clamp(16px,4vw,32px);
}
.container > .section > .container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:0;
  width:100%;
}
.container > .section > :not(.container){
  max-width:var(--container);
  margin-inline:auto;
  width:100%;
  box-sizing:border-box;
}
/* inline-block eyebrow was sitting on the left edge while block titles centered */
.container > .section > .eyebrow{
  display:block;
}

/* Centrado profesional de bloques utilitarios */
.section > .section-head,
.carousel__head .section-head{ text-align:left; }
.logo-grid, .pay-grid{ justify-items:center; }
.trust-strip{ text-align:center; }
.game-card__cover img{ object-position:center center; }

/* Banner CTA oficial */
.banner--cta-official{
  min-height:160px;
}
.banner--cta-official img{ object-position:center center; }

/* Evitar que el header logo se vea borroso */
.site-header__logo img{ object-fit:contain; }

/* Mejora mobile */
@media(max-width:640px){
  .hero--page h1{ max-width:none; }
  .hero .lead, .hero--page .lead{ max-width:none; }
  .cluster{
    justify-content:center;
    align-items:center;
    flex-direction:column;
  }
  .cluster .btn{ width:min(100%, 320px); }
  .trust-chips{ justify-content:flex-start; }
  .byline{ gap:var(--s2) var(--s3); padding:var(--s3); font-size:0.82rem; }
  .byline__dot{ display:none; }
}

/* ---------- SCROLL TO TOP ---------- */
.to-top{
  position:fixed; right:max(16px, 2vw); bottom:max(16px, 2vw);
  z-index:90;
  width:48px; height:48px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--gold); color:var(--on-gold);
  border:1px solid rgba(255,206,6,.4);
  box-shadow:0 8px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(255,206,6,.15);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s, background .15s ease;
  cursor:pointer;
}
.to-top.is-visible{
  opacity:1; visibility:visible; transform:none;
}
.to-top:hover{ background:var(--gold-deep); }
.to-top:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.to-top img{ width:22px; height:22px; display:block; }
@media(max-width:640px){
  .to-top{ width:44px; height:44px; right:14px; bottom:14px; }
}
@media print{
  .to-top{ display:none!important; }
}