/*
|--------------------------------------------------------------------------
| Apuestas Bonaerenses — style.css
|--------------------------------------------------------------------------
| Single stylesheet, no build step. Sections:
|   1. Tokens          5. Header / nav       9. Review (casino page)
|   2. Reset / base    6. Breadcrumbs       10. Guides / legal / lists
|   3. Layout          7. Home / sections   11. Footer / consent
|   4. Buttons / icons 8. Cards / tables    12. Responsive / a11y / print
| Colour contrast: every text/background pair below meets WCAG AA (4.5:1).
*/

/* ---------- 1. Tokens ---------- */
:root {
  --green: #145a4a;
  --green-deep: #0e4538;
  --green-soft: #e4efe9;
  --red: #cf3f2e;          /* CTA; white text on it = 4.7:1 */
  --red-deep: #a7301f;
  --red-soft: #fbe9e6;
  --ink: #172121;
  --ink-2: #39474a;
  --ink-3: #5a6a6d;        /* 5.4:1 on white */
  --bg: #fbfbf8;
  --paper: #f2f4f1;
  --paper-deep: #e6eae6;
  --white: #ffffff;
  --line: #d6dcd8;
  --line-soft: #e5e9e6;
  --ok: #1f7a4d;
  --ok-soft: #e4f3ea;
  --warn: #9a4a10;
  --warn-soft: #fbeee0;
  --pending: #7a5a00;
  --pending-soft: #fff4d6;

  /* aliases kept so shared rules read naturally */
  --navy: var(--green);
  --navy-deep: var(--green-deep);
  --navy-soft: var(--green-soft);
  --wine: var(--red);
  --wine-deep: var(--red-deep);
  --wine-soft: var(--red-soft);
  --gold: #e3b341;
  --gold-soft: #fff4d6;

  --font: "IBM Plex Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-0: 0.875rem;
  --fs-1: 1rem;
  --fs-2: 1.125rem;
  --fs-3: 1.375rem;
  --fs-4: 1.75rem;
  --fs-5: 2.25rem;
  --fs-6: clamp(2rem, 1.1rem + 2.6vw, 3rem);

  --radius: 4px;
  --radius-lg: 8px;
  --shadow: 0 1px 2px rgba(23, 33, 33, 0.05), 0 10px 24px -14px rgba(23, 33, 33, 0.22);
  --container: 1180px;
  --narrow: 800px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --header-h: 66px;
}

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-1);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: inline-block; max-width: 100%; height: auto; vertical-align: middle; }
h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.2; font-weight: 700; letter-spacing: 0; color: var(--ink); }
h1, h2 { font-family: var(--font-display); }
h3, h4 { font-weight: 700; }
h1 { font-size: var(--fs-6); }
h2 { font-size: var(--fs-4); }
h3 { font-size: var(--fs-2); }
p, ul, ol, dl { margin: 0 0 1rem; }
ul, ol { padding-left: 1.25rem; }
li { margin-bottom: 0.35rem; }
a { color: var(--wine); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--wine-deep); }
strong { font-weight: 700; }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; }
time { white-space: nowrap; }
::selection { background: var(--green-soft); }

:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 3px; }
.skip-link { position: absolute; left: 0; top: 0; transform: translateY(-140%); background: var(--wine); color: #fff; padding: 0.6rem 1rem; z-index: 100; font-weight: 700; }
.skip-link:focus { transform: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 3. Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--narrow); }
.site-main { display: block; }
.lead { font-size: var(--fs-2); line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.muted { color: var(--ink-3); }
.mono { font-family: var(--mono); font-size: 0.92em; word-break: break-all; }

.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section--tint { background: var(--paper); }
.section__head { max-width: 62ch; margin-bottom: 1.75rem; }
.section__head p { color: var(--ink-2); font-size: var(--fs-2); }
.section__more { margin: 1.5rem 0 0; font-weight: 700; }

/* ---------- 4. Buttons / icons / badges ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.7rem 1.15rem; border-radius: var(--radius);
  background: var(--wine); color: #fff; border: 2px solid var(--wine);
  font-weight: 700; font-size: var(--fs-1); line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn:hover { background: var(--wine-deep); border-color: var(--wine-deep); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn--lg { padding: 0.9rem 1.5rem; font-size: var(--fs-2); }
.btn--block { width: 100%; }
.btn .ic { flex: none; }

.ic { width: 1.25em; height: 1.25em; flex: none; }
.ic--xs { width: 1em; height: 1em; }
.ic--h { width: 1.35em; height: 1.35em; vertical-align: -0.28em; margin-right: 0.45rem; color: var(--navy); }
.ic--ok { color: var(--ok); }
.ic--warn { color: var(--warn); }
.ic--age { width: 2.4rem; height: 2.4rem; color: var(--wine); }
h2 .ic--h, h3 .ic--h { color: var(--navy); }

.badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.25rem 0.6rem; border-radius: 999px;
  font-size: var(--fs-0); font-weight: 700; line-height: 1.3;
  background: var(--paper-deep); color: var(--ink-2);
}
.badge--ok { background: var(--ok-soft); color: var(--ok); }

/* Brand mark: text tile (no invented logos) or the configured image */
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; color: var(--ink); }
.brand__tile {
  display: inline-grid; place-items: center; flex: none;
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius);
  background: var(--green); color: #fff; font-family: var(--font-display); font-size: 1.15rem; line-height: 1;
}
.brand__name { font-size: var(--fs-2); }
.brand--sm .brand__tile { width: 1.9rem; height: 1.9rem; font-size: 0.95rem; }
.brand--sm .brand__name { font-size: var(--fs-1); }
.brand--lg .brand__tile { width: 3rem; height: 3rem; font-size: 1.4rem; }
.brand--lg .brand__name { font-size: var(--fs-3); }
.brand--xl .brand__tile { width: 3.6rem; height: 3.6rem; font-size: 1.7rem; border-radius: var(--radius-lg); }
.brand--xl .brand__name { font-size: var(--fs-4); }
.brand--img img { width: auto; height: 40px; }
.brand--sm.brand--img img { height: 28px; }
.brand--xl.brand--img img { height: 56px; }

/* ---------- 5. Header / navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: saturate(140%) blur(6px);
}
.site-header__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); }
.logo { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); }
.logo__mark { width: 40px; height: 40px; flex: none; }
.logo__text { display: flex; flex-direction: column; line-height: 1.05; font-family: var(--font-display); font-weight: 700; }
.logo__a { font-size: 0.95rem; color: var(--ink); }
.logo__b { font-size: 1.05rem; color: var(--green); }
.logo--footer .logo__a { color: #fff; }
.logo--footer .logo__b { color: #9fd3bd; }

.nav__list { display: flex; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.nav__list li { margin: 0; }
.nav__list a {
  display: block; padding: 0.55rem 0.75rem; border-radius: var(--radius);
  color: var(--ink-2); font-weight: 700; font-size: 0.95rem; text-decoration: none;
}
.nav__list a:hover { background: var(--paper); color: var(--ink); }
.nav__list a[aria-current="page"] { color: var(--green); box-shadow: inset 0 -3px 0 var(--red); border-radius: var(--radius) var(--radius) 0 0; }

.nav-toggle {
  display: none; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.75rem; border: 2px solid var(--navy); border-radius: var(--radius);
  background: #fff; color: var(--navy); font: inherit; font-weight: 700; cursor: pointer;
}
.nav-toggle .ic { width: 1.3rem; height: 1.3rem; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: inline-block; }

/* ---------- 6. Breadcrumbs ---------- */
.breadcrumbs { background: var(--paper); border-bottom: 1px solid var(--line-soft); font-size: var(--fs-0); }
.breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem; list-style: none; margin: 0; padding: 0.55rem 0; }
.breadcrumbs__list li { display: inline-flex; align-items: center; gap: 0.2rem; margin: 0; }
.breadcrumbs__list a { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--ink-2); text-decoration: none; }
.breadcrumbs__list a:hover { color: var(--wine); text-decoration: underline; }
.breadcrumbs__list [aria-current="page"] { color: var(--ink); font-weight: 700; }
.breadcrumbs__sep { color: var(--ink-3); }

/* ---------- 7. Home hero and content sections ---------- */
.hero {
  background: linear-gradient(180deg, var(--green-soft) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line-soft);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.hero__copy h1 { max-width: 20ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; margin: 0; padding: 0; font-weight: 700; color: var(--ink-2); font-size: 0.95rem; }
.hero__facts li { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
.hero__facts .ic--h { margin: 0; }

/* Official registry block (signature element) */
.registry {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden;
}
.registry__head { display: flex; align-items: center; gap: 0.85rem; padding: 1rem 1.15rem; background: var(--navy); color: #fff; }
.registry__icon { width: 2rem; height: 2rem; color: #fff; }
.registry__title { margin: 0; font-weight: 700; font-size: var(--fs-2); line-height: 1.2; }
.registry__sub { margin: 0.15rem 0 0; font-size: var(--fs-0); opacity: 0.85; }
.registry__list { list-style: none; margin: 0; padding: 0.25rem 0; }
.registry__list li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.3rem 0.65rem;
  padding: 0.6rem 1.15rem; margin: 0; border-bottom: 1px solid var(--line-soft);
}
.registry__list li:last-child { border-bottom: 0; }
.registry__name { font-weight: 700; }
.registry__host { grid-column: 2; font-family: var(--mono); font-size: 0.8rem; color: var(--ink-3); word-break: break-all; }
.registry__link { grid-column: 3; grid-row: 1 / span 2; font-weight: 700; font-size: var(--fs-0); }
.registry__soon { grid-column: 3; grid-row: 1 / span 2; font-size: var(--fs-0); color: var(--ink-3); }
.registry__foot { margin: 0; padding: 0.75rem 1.15rem; background: var(--paper); font-size: var(--fs-0); color: var(--ink-2); border-top: 1px solid var(--line-soft); }

/* Two-column text + aside */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }

/* Numbered verification steps */
.verify { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.verify__step {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.9rem; align-items: start;
  padding: 1rem 0; margin: 0; border-top: 1px solid var(--line);
}
.verify__step:first-child { border-top: 0; padding-top: 0; }
.verify__n {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--wine); color: #fff; font-weight: 700; font-size: 1.1rem;
}
.verify__step h3 { margin-bottom: 0.25rem; }
.verify__step p { margin: 0; color: var(--ink-2); }

/* Feature grid */
.features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.feature { margin: 0; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.feature__icon { width: 2.25rem; height: 2.25rem; color: var(--wine); margin-bottom: 0.75rem; }
.feature h3 { font-size: var(--fs-2); }
.feature p { margin: 0; color: var(--ink-2); font-size: 0.95rem; }

/* Responsible-gambling band */
.rg-band {
  display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start;
  padding: clamp(1.25rem, 3vw, 2rem); background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--red); border-radius: var(--radius-lg);
}
.rg-band__icon { width: 3rem; height: 3rem; color: var(--wine); }
.rg-band h2 { font-size: var(--fs-3); }
.rg-band p { color: var(--ink-2); max-width: 70ch; }

/* FAQ (details/summary) */
.faq h2 { display: flex; align-items: center; margin-bottom: 1rem; }
.faq__item { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin-bottom: 0.6rem; }
.faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.9rem 1.1rem; cursor: pointer; font-weight: 700; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--wine); }
.faq__chev { transition: transform 0.2s ease; color: var(--ink-3); transform: rotate(90deg); }
.faq__item[open] .faq__chev { transform: rotate(-90deg); }
.faq__item[open] summary { border-bottom: 1px solid var(--line-soft); }
.faq__body { padding: 0.9rem 1.1rem 0.25rem; color: var(--ink-2); }

/* ---------- 8. Cards and tables ---------- */
.cards { display: grid; gap: 1.25rem; }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ocard {
  display: flex; flex-direction: column; gap: 0.9rem;
  padding: 1.35rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow);
}
.ocard__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
.ocard__summary { margin: 0; color: var(--ink-2); }
.ocard__meta { display: grid; gap: 0.35rem; margin: 0; padding: 0.85rem 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); font-size: 0.95rem; }
.ocard__meta > div { display: grid; grid-template-columns: 9rem 1fr; gap: 0.5rem; }
.ocard__meta dt { color: var(--ink-3); font-weight: 700; }
.ocard__meta dd { margin: 0; word-break: break-word; }
.ocard__actions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: auto; }
.ocard__actions .btn { width: 100%; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.cmp { min-width: 980px; font-size: 0.95rem; }
.cmp .mono { word-break: normal; white-space: nowrap; }
.cmp .badge, .cmp time { white-space: nowrap; }
.cmp thead th { white-space: nowrap; }
.cmp th, .cmp td { padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.cmp thead th { background: var(--green); color: #fff; font-size: var(--fs-0); text-transform: none; }
.cmp tbody tr:last-child td, .cmp tbody tr:last-child th { border-bottom: 0; }
.cmp tbody tr:nth-child(even) { background: var(--paper); }
.cmp tbody th { font-weight: 700; }
.cmp td .ic--ok { margin-right: 0.3rem; vertical-align: -0.15em; }
.cmp--tools { min-width: 560px; }
.cmp--tools th, .cmp--tools td { vertical-align: top; }
.table-note { font-size: var(--fs-0); color: var(--ink-3); margin-top: 0.75rem; }

/* ---------- 9. Review (casino page) ---------- */
.review__hero { background: linear-gradient(180deg, var(--green-soft) 0%, var(--bg) 100%); border-bottom: 1px solid var(--line-soft); padding-block: clamp(2rem, 5vw, 3.5rem); }
.review__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.8fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.review__brandrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; margin-bottom: 1.25rem; }
.review__intro h1 { max-width: 26ch; }
.review__dates, .review__disclosure { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; font-size: var(--fs-0); color: var(--ink-3); margin: 0 0 0.5rem; }
.review__dates .ic, .review__disclosure .ic { color: var(--navy); }
.review__aside { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.25rem; }
.review__aside-title { font-size: var(--fs-2); margin-bottom: 0.75rem; }
.review__aside-note { margin: 0.75rem 0 0; font-size: var(--fs-0); color: var(--ink-3); }
.ficha { margin: 0 0 1rem; }
.ficha__row { display: grid; grid-template-columns: 10rem 1fr; gap: 0.6rem; padding: 0.55rem 0; border-top: 1px solid var(--line-soft); font-size: 0.95rem; }
.ficha__row:first-child { border-top: 0; padding-top: 0; }
.ficha__row dt { color: var(--ink-3); font-weight: 700; }
.ficha__row dd { margin: 0; word-break: break-word; }

.review__body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); padding-block: clamp(2rem, 5vw, 3.5rem); align-items: start; }

/* Table of contents: sticky with bounded height so it never overflows the viewport */
.toc { position: sticky; top: calc(var(--header-h) + 1rem); max-height: calc(100vh - var(--header-h) - 2rem); overflow-y: auto; padding: 1rem 1.1rem; background: var(--paper); border-radius: var(--radius-lg); font-size: 0.95rem; }
.toc__title { margin: 0 0 0.5rem; font-weight: 700; color: var(--ink); }
.toc ol { margin: 0; padding-left: 1.2rem; }
.toc li { margin-bottom: 0.3rem; }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--wine); text-decoration: underline; }

/* Long-form article body */
.article { max-width: 72ch; }
.article__section { padding-block: 1.25rem; border-top: 1px solid var(--line-soft); }
.article__section:first-child { border-top: 0; padding-top: 0; }
.article__section h2 { display: flex; align-items: center; font-size: var(--fs-3); scroll-margin-top: calc(var(--header-h) + 12px); }
.article__section h3 { font-size: var(--fs-2); margin-top: 1.25rem; }
.article__section p, .article__section li { color: var(--ink-2); }
.article__section strong { color: var(--ink); }
.article--legal p { color: var(--ink-2); }
.article--legal h2 { display: block; }

.callout { padding: 1rem 1.15rem; border-radius: var(--radius); margin: 1.25rem 0; border: 1px solid var(--line); background: var(--paper); }
.callout--info { border-left: 5px solid var(--navy); }
.callout--verify { border-left: 5px solid var(--ok); background: var(--ok-soft); }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }

.cta { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem 1rem; align-items: center; margin: 1.5rem 0; padding: 1.25rem 1.35rem; background: var(--navy); color: #fff; border-radius: var(--radius-lg); }
.cta__icon { width: 2.25rem; height: 2.25rem; color: #fff; grid-row: 1 / span 3; }
.cta__lead { margin: 0; font-weight: 700; font-size: var(--fs-2); line-height: 1.35; }
.cta p, .article__section .cta p { color: #fff; }
.cta .btn { justify-self: start; background: var(--red); border-color: #fff; color: #fff; }
.cta .btn:hover { background: var(--red-deep); border-color: #fff; color: #fff; }
.cta__note { margin: 0; font-size: var(--fs-0); opacity: 0.85; }

.proscons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.proscons__col { padding: 1.1rem 1.2rem; border-radius: var(--radius-lg); border: 1px solid var(--line); background: #fff; }
.proscons__col h3 { display: flex; align-items: center; margin: 0 0 0.6rem; font-size: var(--fs-2); }
.proscons__col--pro { border-top: 4px solid var(--ok); }
.proscons__col--con { border-top: 4px solid var(--warn); }
.proscons__col--pro h3 .ic { color: var(--ok); }
.proscons__col--con h3 .ic { color: var(--warn); }
.proscons__col ul { margin: 0; padding-left: 1.15rem; }
.proscons__col li { margin-bottom: 0.45rem; }

.verdict { background: var(--paper); margin-top: 1rem; padding: 1.5rem; border-radius: var(--radius-lg); border-top: 0; }
.verdict__rg { display: flex; gap: 0.5rem; align-items: flex-start; font-size: var(--fs-0); color: var(--ink-3); margin: 0; }
.verdict__rg .ic { color: var(--wine); margin-top: 0.2rem; }

.sources { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.95rem; }
.sources h2 { font-size: var(--fs-2); }
.sources ul { padding-left: 1.2rem; }
.sources a { word-break: break-word; }

/* ---------- 10. Guides, legal pages, lists ---------- */
.page-head { background: linear-gradient(180deg, var(--green-soft) 0%, var(--bg) 100%); border-bottom: 1px solid var(--line-soft); padding-block: clamp(2rem, 5vw, 3.5rem); }
.page-head__kicker { display: inline-flex; align-items: center; margin: 0 0 0.75rem; font-weight: 700; color: var(--green); font-size: var(--fs-0); }
.page-head__kicker .ic--h { color: var(--green); }
.page-head--404 { text-align: left; }
.notfound__icon { width: 4rem; height: 4rem; color: var(--navy); margin-bottom: 1rem; }
.container--narrow > .article { max-width: none; padding-block: clamp(2rem, 5vw, 3rem); }
.container--narrow > .toc { position: static; max-height: none; margin: clamp(2rem, 5vw, 3rem) 0 0; }

.timeline { list-style: none; margin: 0; padding: 0; border-left: 3px solid var(--line); }
.timeline__item { position: relative; display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 0 0 1.25rem 1.5rem; margin: 0; }
.timeline__item::before { content: ""; position: absolute; left: -9px; top: 0.35rem; width: 15px; height: 15px; border-radius: 50%; background: var(--red); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.timeline__when { font-weight: 700; color: var(--navy); }
.timeline__body h3 { margin: 0 0 0.25rem; font-size: var(--fs-2); }
.timeline__body p { margin: 0; }

.checklist { list-style: none; padding: 0; margin: 0 0 1rem; }
.checklist li { position: relative; padding-left: 1.85rem; margin-bottom: 0.55rem; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.32em; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d7a4a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 3.8 3.8L18 8'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}
.checklist--warn li::before {
  background: var(--warn-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a4a10' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}

.steps { list-style: none; padding: 0; margin: 0 0 1rem; counter-reset: s; }
.steps li { position: relative; padding-left: 2.6rem; margin-bottom: 0.9rem; counter-increment: s; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0.05rem; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #fff; font-weight: 700; font-size: 0.9rem; }

.postlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.postlist__item { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; margin: 0; }
.postlist__icon { width: 2.25rem; height: 2.25rem; color: var(--wine); }
.postlist__item h2 { font-size: var(--fs-3); margin-bottom: 0.35rem; }
.postlist__item p { margin: 0 0 0.5rem; color: var(--ink-2); }

/* ---------- 11. Footer / consent ---------- */
.site-footer { background: var(--green-deep); color: #d5e2dc; margin-top: clamp(2rem, 5vw, 4rem); padding-block: clamp(2rem, 5vw, 3.5rem) 1.5rem; font-size: 0.95rem; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--gold); }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.site-footer__brand p { margin: 1rem 0 0; max-width: 40ch; }
.site-footer__col h2 { font-family: var(--font); font-size: var(--fs-0); color: #fff; margin-bottom: 0.75rem; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col li { margin-bottom: 0.45rem; }
.site-footer__col a { text-decoration: none; }
.site-footer__col a:hover { text-decoration: underline; }
.site-footer__rg { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 1.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.site-footer__rg .ic--age { color: #fff; }
.site-footer__rg p { margin: 0; }
.site-footer__disclosure { margin: 1.25rem 0; font-size: var(--fs-0); color: #bccfc6; max-width: 90ch; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; font-size: var(--fs-0); color: #bccfc6; }
.site-footer__bottom p { margin: 0; }

.consent {
  position: fixed; inset: auto 0 0 0; z-index: 90;
  background: #fff; border-top: 4px solid var(--green);
  box-shadow: 0 -8px 30px -10px rgba(27, 34, 48, 0.35);
  padding: 1rem var(--gutter);
}
.consent[hidden] { display: none; }
.consent__in { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; max-width: var(--container); margin-inline: auto; }
.consent__icon { width: 2.25rem; height: 2.25rem; color: var(--wine); }
.consent__title { margin: 0 0 0.2rem; font-weight: 700; }
.consent__text p:last-child { margin: 0; font-size: 0.95rem; color: var(--ink-2); }
.consent__actions { display: flex; gap: 0.6rem; }

/* ---------- 12. Responsive ---------- */
@media (max-width: 1024px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review__body { grid-template-columns: 200px minmax(0, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; gap: 0; padding: 0.5rem var(--gutter) 0.75rem; }
  .nav__list a { padding: 0.75rem 0.5rem; border-radius: 0; border-bottom: 1px solid var(--line-soft); }
  .nav__list a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--red); padding-left: 0.85rem; }
  .hero__grid, .split, .review__grid { grid-template-columns: 1fr; }
  .review__body { grid-template-columns: 1fr; }
  .toc { position: static; max-height: none; }
  .cards--2 { grid-template-columns: 1fr; }
  .rg-band { grid-template-columns: 1fr; }
  .consent__in { grid-template-columns: auto 1fr; }
  .consent__actions { grid-column: 1 / -1; justify-content: flex-end; }
}

@media (max-width: 600px) {
  :root { --header-h: 60px; }
  .logo__mark { width: 34px; height: 34px; }
  .logo__a { font-size: 0.85rem; }
  .logo__b { font-size: 0.95rem; }
  .nav-toggle__label { display: none; }
  .features, .cards--3, .proscons { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .ocard__meta > div, .ficha__row { grid-template-columns: 1fr; gap: 0.1rem; }
  .timeline__item { grid-template-columns: 1fr; gap: 0.2rem; }
  .cta { grid-template-columns: 1fr; }
  .cta__icon { grid-row: auto; }
  .cta .btn { width: 100%; }
  .hero__actions .btn, .consent__actions .btn { width: 100%; }
  .consent__actions { flex-direction: column-reverse; }
  .review__aside { padding: 1rem; }
  .verify__step { grid-template-columns: 2rem 1fr; }
  .verify__n { width: 2rem; height: 2rem; font-size: 0.95rem; }
}

/* ---------- Accessibility & print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .site-header, .breadcrumbs, .consent, .nav-toggle, .cta, .ocard__actions, .skip-link, .site-footer__rg { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
  .toc { position: static; }
  .review__grid, .review__body, .hero__grid, .split { grid-template-columns: 1fr; }
}

/* ---------- 13. Site-specific components ---------- */
.topbar { background: var(--green-deep); color: #fff; font-size: 0.85rem; }
.topbar__in { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin: 0; padding: 0.4rem 0; }
.topbar__in .ic { color: #fff; }
.topbar__in a { color: #fff; font-weight: 700; }
.topbar__ind { margin-left: auto; opacity: 0.85; }

.nav__search a { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--green) !important; }

.badge--pending { background: var(--pending-soft); color: var(--pending); }
.pending { color: var(--pending); font-weight: 700; }

/* product cells */
.prod { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--fs-0); margin: 0.1rem 0.6rem 0.1rem 0; white-space: nowrap; }
.prod--ok { color: var(--ok); font-weight: 700; }
.prod--na { color: var(--ink-3); }
.ocard__prods { display: flex; flex-wrap: wrap; }
.ocard__blocked { font-size: var(--fs-0); color: var(--pending); font-weight: 700; }
.cmp__prods .prod { display: flex; margin: 0.15rem 0; }

/* filters */
.filters { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto auto; gap: 1rem 1.5rem; align-items: start; padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.filters__search { display: grid; gap: 0.3rem; font-weight: 700; font-size: var(--fs-0); }
.filters__search input { font: inherit; font-weight: 400; font-size: var(--fs-1); padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); width: 100%; }
.filters__group { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.filters__group legend { font-weight: 700; font-size: var(--fs-0); margin-bottom: 0.4rem; }
.filters__group label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; cursor: pointer; }
.filters__group input { width: 1.1rem; height: 1.1rem; accent-color: var(--green); }
.filters__count { margin: 0; font-size: var(--fs-0); color: var(--ink-3); min-height: 1.4em; align-self: end; padding-bottom: 0.6rem; }
#filtro-reset { align-self: end; }
.btn--sm { padding: 0.5rem 0.85rem; font-size: var(--fs-0); }
.is-filtered-out { display: none !important; }

/* criteria list on the home page */
.criteria { margin: 0; padding-left: 1.4rem; counter-reset: c; list-style: none; }
.criteria li { position: relative; margin-bottom: 0.7rem; padding-left: 1.6rem; color: var(--ink-2); }
.criteria li::before { counter-increment: c; content: counter(c); position: absolute; left: 0; top: 0.1rem; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #fff; font-size: 0.8rem; font-weight: 700; }
.criteria strong { color: var(--ink); }

/* rich steps (methodology) */
.steps--rich li { padding-left: 2.8rem; margin-bottom: 1.25rem; }
.steps--rich h3 { display: flex; align-items: center; margin: 0 0 0.3rem; font-size: var(--fs-2); }
.steps--rich p { margin: 0; color: var(--ink-2); }

/* responsible-gambling resources */
.rgres { display: grid; gap: 1rem; margin-bottom: 1rem; }
.rgres__item { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.1rem 1.2rem; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--green); border-radius: var(--radius-lg); }
.rgres__icon { width: 2rem; height: 2rem; color: var(--green); }
.rgres__item h3 { font-size: var(--fs-2); margin-bottom: 0.3rem; }
.rgres__item p { margin: 0 0 0.4rem; color: var(--ink-2); }

/* other operators strip */
.otherlist { display: flex; flex-wrap: wrap; gap: 0.75rem; list-style: none; margin: 0; padding: 0; }
.otherlist li { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); margin: 0; }
.otherlist a { text-decoration: none; }
.otherlist .mono { font-size: 0.78rem; color: var(--ink-3); }

/* dates line */
.dates { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; font-size: var(--fs-0); color: var(--ink-3); margin: 0.75rem 0 0; }
.dates .ic { color: var(--green); }

/* callouts */
.callout--warn { border-left: 5px solid var(--warn); background: var(--warn-soft); }
.callout ul { margin: 0.5rem 0 0; }
.cta--off { background: var(--pending-soft); color: var(--ink); grid-template-columns: auto 1fr; }
.cta--off .cta__icon, .cta--off p, .article__section .cta--off p { color: var(--pending); }

/* ficha */
.ficha--pub { margin-bottom: 1.25rem; }
.ficha__row--na dd { color: var(--ink-3); font-style: italic; }

/* contact form */
.form { display: grid; gap: 1rem; max-width: 640px; }
.form__row { display: grid; gap: 0.35rem; }
.form__row label { font-weight: 700; font-size: var(--fs-0); }
.form__row input, .form__row select, .form__row textarea { font: inherit; padding: 0.65rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); width: 100%; }
.form__row textarea { resize: vertical; min-height: 8rem; }
.form__row--check label { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; font-size: 0.95rem; }
.form__row--check input { width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; accent-color: var(--green); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { justify-self: start; }
.form__note { margin: 0; font-size: var(--fs-0); }

.page-head .dates { margin-top: 0.75rem; }
.review__disclosure { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0.4rem; max-width: 62ch; }
.review__disclosure .ic { margin-top: 0.25rem; }
.cmp td:last-child { white-space: nowrap; }
.verdict { background: var(--green-soft); }

@media (max-width: 1024px) {
  .filters { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .topbar__ind { display: none; }
  .filters { grid-template-columns: 1fr; }
  .registry__list li { grid-template-columns: auto 1fr auto; }
}
@media (max-width: 600px) {
  .topbar__in { font-size: 0.78rem; }
  .rgres__item { grid-template-columns: 1fr; }
  .otherlist li { width: 100%; }
}