:root {
  --bg: #0a0a0a;
  --surface: #1d1d1d;
  --surface-2: #2e2f2e;
  --green: #8bdb5b;
  --green-dark: #1e8e3e;
  --green-deep: #0b5c2e;
  --ink-on-green: #1f1f1f;
  --red: #d92d2d;
  --red-ink: #791212;
  --white: #ffffff;
  --gray: #adadad;
  --line: rgba(255, 255, 255, 0.1);
  --font: 'Onest', system-ui, sans-serif;
  --font-display: 'Unbounded', 'Onest', sans-serif;
  --container: 1040px;
  --gutter: 200px;
  --section-gap: 80px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font);
  font-size: 20px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1, h2, h3, h4, p, ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

b {
  font-weight: 700;
  color: var(--white);
}

.green {
  color: var(--green);
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 32px);
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 1100px) {
  .container {
    max-width: var(--container);
    padding: 0;
  }
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 234px;
  height: 52px;
  border-radius: 26px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  transition: filter 0.2s, transform 0.2s;
}

.btn:hover {
  filter: brightness(1.1);
}

.btn:active {
  transform: translateY(1px);
}

.btn--sm {
  width: 131px;
}

.btn--green {
  background: var(--green);
  color: var(--surface);
  box-shadow: 0 0 20px rgba(139, 219, 91, 0.45);
}

.btn--dark {
  background: var(--surface);
  color: var(--white);
}

/* +18 badge */
.badge18 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--green-dark);
  color: var(--green-dark);
  font-weight: 700;
  line-height: 1;
}

.badge18--sm {
  width: 45px;
  height: 30px;
  border-radius: 12px;
  font-size: 16px;
  border-width: 1.5px;
}

.badge18--lg {
  width: 104px;
  height: 68px;
  border-radius: 30px;
  font-size: 40px;
  border-color: var(--green);
  color: var(--green);
  border-width: 2.5px;
}

.badge18--footer {
  flex-shrink: 0;
  width: 64px;
  height: 46px;
  border-radius: 20px;
  font-size: 20px;
}

/* header */
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
}

.logo {
  padding-left: 4px;
  flex-shrink: 0;
}

.header__info {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  color: var(--gray);
}

.header__actions {
  display: flex;
  gap: 12px;
}

/* hero */
.hero {
  position: relative;
  padding: 141px 0 48px;
  overflow-x: clip;
}

.hero__inner {
  position: relative;
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 480px;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 60px;
  line-height: 1;
  letter-spacing: 0.005em;
}

.hero__subtitle {
  margin-top: 10px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--green);
}

.hero__text {
  margin-top: 26px;
  color: var(--gray);
}

.hero__actions {
  display: flex;
  gap: 12px;
  margin-top: 25px;
}

.hero__note {
  margin-top: 27px;
  font-size: 16px;
  color: var(--gray);
}

.hero__art img {
  width: 100%;
  height: auto;
}

.hero__art {
  position: absolute;
  top: -141px;
  left: 490px;
  width: 670px;
  height: auto;
  pointer-events: none;
}

/* sections */
.section {
  padding-top: var(--section-gap);
}

.section__title {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  margin-bottom: 27px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.section__title img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}

.section__title--lg {
  min-height: 62px;
}

.section__title--lg img {
  width: 62px;
  height: 62px;
}

.text {
  color: var(--gray);
}

.text--sm {
  font-size: 18px;
  line-height: 23px;
}

.text--gap {
  margin-top: 16px;
}

.text--gap-lg {
  margin-top: 20px;
}

.lead {
  margin-bottom: 14px;
  color: var(--green);
  font-weight: 600;
}

.subtitle {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}

.notice {
  display: flex;
  align-items: center;
  min-height: 53px;
  margin-top: 25px;
  padding: 12px 30px;
  border-radius: 14px;
  background: var(--green);
  color: var(--ink-on-green);
  font-size: 16px;
  font-weight: 500;
}

.divider {
  height: 1px;
  margin: 24px 0 27px;
  border: 0;
  background: var(--line);
}

/* table of contents */
.toc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 70px;
  padding: 11px 30px 13px;
  border-radius: 20px;
  background: var(--surface);
}

.toc__item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 66px;
  border-bottom: 1px solid var(--line);
  transition: color 0.2s;
}

.toc__item:nth-last-child(-n + 2) {
  border-bottom: 0;
  height: 65px;
}

.toc__item img:first-child {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.toc__item span {
  flex: 1;
}

.toc__arrow {
  flex-shrink: 0;
  width: 20px;
  height: 18px;
  margin-right: 5px;
  transition: transform 0.2s;
}

.toc__item:hover {
  color: var(--green);
}

.toc__item:hover .toc__arrow {
  transform: translateX(4px);
}

/* chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 41px;
  padding: 0 16px;
  border-radius: 20px;
  background: var(--surface);
  color: var(--green);
  font-size: 16px;
  font-weight: 600;
}

.chips--red .chip {
  background: var(--red);
  color: var(--red-ink);
}

.text--after-chips {
  margin-top: 26px;
}

/* channels */
.channels {
  display: grid;
  grid-template-columns: 265px 1fr 407px;
  margin-top: 28px;
}

.channels__col {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.channels__col + .channels__col {
  padding-left: 50px;
  border-left: 1px solid var(--line);
}

.social {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 18px;
}

.social__icon {
  display: flex;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--green);
  transition: background 0.2s, color 0.2s;
}

.social__icon svg {
  width: 48px;
  height: 48px;
}

.social__handle {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.social:hover .social__icon {
  background: var(--green);
  color: var(--surface-2);
}

.channels__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
  padding: 30px;
  border-radius: 14px;
  background: var(--green);
  color: var(--ink-on-green);
  font-size: 16px;
  font-weight: 500;
}

.channels__card b {
  color: var(--ink-on-green);
}

.channels__date {
  color: var(--green-deep);
  font-weight: 400;
}

/* fake accounts */
#cuentas-falsas .subtitle {
  margin-top: 26px;
}

.patterns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 20px;
}

.pattern {
  min-height: 268px;
  padding: 30px;
  border-radius: 20px;
  background: var(--surface);
}

.pattern__title {
  font-size: 20px;
  font-weight: 500;
}

.pattern__text {
  margin-top: 20px;
  color: var(--gray);
}

.pattern .chips {
  margin-top: 20px;
}

.subtitle--rules {
  margin-top: 30px;
}

.rules {
  margin-top: 21px;
  padding-left: 30px;
  color: var(--gray);
}

.rules li {
  position: relative;
}

.rules li + li {
  margin-top: 16px;
}

.rules li::before {
  content: '';
  position: absolute;
  left: -17px;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gray);
}

.divider--rules {
  margin: 24px 0 30px;
}

.contact-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

.contact-row > .text {
  max-width: 660px;
}

.contact-row__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.mail-pill {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 16px;
  border-radius: 20px;
  background: var(--surface);
  color: var(--green);
  font-weight: 600;
  transition: background 0.2s;
}

.mail-pill:hover {
  background: var(--surface-2);
}

/* faq */
.faq__item + .faq__item {
  margin-top: 25.5px;
  padding-top: 25.5px;
  border-top: 1px solid var(--line);
}

.faq .text {
  margin-top: 22.5px;
}

.contact-row--faq {
  align-items: center;
  margin-top: 22px;
}

/* responsible gaming */
#juego-responsable .subtitle {
  margin-top: 27px;
}

.lines {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 26px;
}

.line-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 278px;
  padding: 30px;
  border-radius: 20px;
  background: var(--surface);
}

.line-card__flag {
  position: absolute;
  top: 30px;
  right: 31px;
  width: 50px;
  height: 50px;
}

.line-card__country {
  color: var(--green);
  font-size: 16px;
  font-weight: 500;
}

.line-card__title {
  margin-top: 6px;
  padding-right: 60px;
  font-size: 20px;
  font-weight: 500;
}

.line-card__text {
  max-width: 262px;
  margin: auto 0;
  padding: 16px 0;
  color: var(--gray);
}

.line-card__meta {
  padding-top: 0;
  color: var(--gray);
  font-size: 16px;
}

.text--lines-note {
  margin-top: 25px;
}

.text--contact {
  margin-top: 80.5px;
}

.link-mail {
  font-weight: 600;
}

/* warning banner */
.warning {
  padding: 140px 0 160px;
  text-align: center;
}

.warning__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

.warning .badge18 {
  margin-top: 16px;
}

/* footer */
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 80px;
}

.footer p {
  font-size: 20px;
  font-weight: 600;
}

#canal-oficial {
  padding-top: 77px;
}

#canales-oficiales .section__title {
  margin-bottom: 31px;
}

#preguntas-frecuentes .section__title {
  margin-bottom: 25.5px;
}

#juego-responsable {
  padding-top: 78.5px;
}

#juego-responsable .section__title {
  margin-bottom: 26px;
}

.section--toc {
  padding-top: 72px;
}

.section--toc .section__title {
  margin-bottom: 20px;
}

.channels__date--out,
.m-br {
  display: none;
}

/* tablet */
@media (max-width: 1099px) {
  .hero__art {
    left: auto;
    right: -60px;
    width: 560px;
  }

  .channels {
    grid-template-columns: 1fr 1fr;
    row-gap: 32px;
  }

  .channels__card {
    grid-column: 1 / -1;
    min-height: 0;
    gap: 24px;
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .header__info {
    display: none;
  }

  .hero {
    padding: 72px 0 40px;
  }

  .hero__art {
    top: -50px;
    right: -40px;
    width: 420px;
  }

  .hero__content {
    max-width: 400px;
  }

  .patterns,
  .lines {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pattern,
  .line-card {
    min-height: 0;
  }

  .line-card__text {
    max-width: none;
    padding-right: 60px;
  }

  .warning {
    padding: 100px 0 110px;
  }
}

/* mobile — макет 390 */
@media (max-width: 767px) {
  body {
    font-size: 18px;
    line-height: 23px;
  }

  .container {
    padding: 0 16px;
  }

  .d-only {
    display: none;
  }

  .m-para {
    display: block;
    margin-top: 20px;
  }

  .header {
    position: static;
  }

  .header__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "info info" "logo actions";
    align-items: center;
    row-gap: 15px;
    height: auto;
    padding-top: 20.5px;
    padding-bottom: 18px;
  }

  .header__info {
    grid-area: info;
    justify-content: space-between;
    font-size: 14px;
    line-height: 18px;
  }

  .logo {
    grid-area: logo;
    padding-left: 3px;
  }

  .logo img {
    width: 80px;
    height: auto;
  }

  .header__actions {
    grid-area: actions;
    justify-content: flex-end;
    gap: 8px;
  }

  .btn--sm {
    width: 91px;
    height: 38px;
    border-radius: 19px;
    font-size: 14px;
  }

  .badge18--sm {
    width: 35px;
    height: 23px;
    border-radius: 8.5px;
    font-size: 12px;
  }

  .hero {
    padding: 0 0 2.5px;
    text-align: center;
  }

  .hero__inner {
    display: flex;
    flex-direction: column;
  }

  .hero__art {
    position: static;
    order: -1;
    width: auto;
    margin: 0 -16px;
  }

  .hero__content {
    max-width: none;
  }

  .hero__title {
    margin-top: 7.5px;
    font-size: min(50px, 12.82vw);
  }

  .hero__subtitle {
    margin-top: 5px;
    font-size: 22px;
    line-height: 28px;
  }

  .hero__text {
    margin-top: 25px;
  }

  .hero__actions {
    flex-direction: column;
    margin-top: 26px;
  }

  .hero__actions .btn {
    width: 100%;
    height: 55px;
    border-radius: 27.5px;
  }

  .hero__note {
    margin-top: 27px;
    font-size: 14px;
    line-height: 18px;
  }

  .section,
  #canal-oficial,
  #juego-responsable {
    padding-top: 80px;
  }

  .section__title,
  .section__title--lg {
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-start;
    min-height: 62px;
    margin-bottom: 25.5px;
    font-size: 26px;
    line-height: 29px;
  }

  .section__title span {
    max-width: 225px;
  }

  .section__title img,
  .section__title--lg img {
    width: 62px;
    height: 62px;
  }

  .section__title--plain {
    min-height: 0;
  }

  #canales-oficiales .section__title,
  #preguntas-frecuentes .section__title,
  #juego-responsable .section__title,
  .section--toc .section__title {
    margin-bottom: 27.5px;
  }

  .lead {
    margin-bottom: 13px;
    font-size: 20px;
    line-height: 24px;
  }

  .text--sm {
    font-size: 18px;
    line-height: 23px;
  }

  .notice {
    min-height: 82px;
    margin-top: 26px;
    padding: 14px;
    font-size: 14px;
    line-height: 18px;
  }

  .toc {
    grid-template-columns: 1fr;
    padding: 0 20px;
  }

  .toc__item,
  .toc__item:nth-last-child(-n + 2) {
    gap: 4px;
    height: 62px;
    border-bottom: 1px solid var(--line);
  }

  .toc__item:nth-child(1) { order: 1; }
  .toc__item:nth-child(3) { order: 2; }
  .toc__item:nth-child(5) { order: 3; }
  .toc__item:nth-child(2) { order: 4; }
  .toc__item:nth-child(4) { order: 5; }
  .toc__item:nth-child(6) { order: 6; border-bottom: 0; }

  .toc__arrow {
    margin-right: 0;
  }

  .toc {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .chips {
    gap: 8px;
    margin-top: 15px;
  }

  .chip {
    height: 38px;
    padding: 0 12px;
    border-radius: 19px;
    font-size: 14px;
  }

  .divider {
    margin: 24px 0 26.5px;
  }

  .subtitle {
    font-size: 20px;
    line-height: 26px;
  }

  .text--after-chips {
    margin-top: 26px;
  }

  .channels {
    grid-template-columns: 1fr;
    row-gap: 0;
    margin-top: 25.5px;
  }

  .channels__col {
    gap: 0;
  }

  .channels__col + .channels__col {
    padding-left: 0;
    border-left: 0;
  }

  .channels__col li {
    padding: 14px 0 13px;
    border-bottom: 1px solid var(--line);
  }

  .channels__col:first-child li:first-child {
    padding-top: 0;
  }

  .channels__col + .channels__col li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .social {
    font-size: 18px;
  }

  .channels__card {
    grid-column: auto;
    min-height: 0;
    margin-top: 26px;
    padding: 14px;
    font-size: 14px;
    line-height: 18px;
  }

  .channels__card .channels__date {
    display: none;
  }

  .channels__date--out {
    display: block;
    margin-top: 26px;
    color: var(--gray);
    font-size: 14px;
    line-height: 18px;
    text-align: center;
  }

  #cuentas-falsas .subtitle {
    margin-top: 27px;
  }

  .patterns,
  .lines {
    grid-template-columns: 1fr;
    gap: 21px;
    margin-top: 19.5px;
  }

  .lines {
    margin-top: 24px;
  }

  .pattern {
    min-height: 0;
    padding: 20px;
  }

  .pattern__title {
    line-height: 26px;
  }

  .pattern__text {
    margin-top: 19.5px;
  }

  .pattern .chips {
    margin-top: 20px;
  }

  .subtitle--rules {
    margin-top: 35px;
  }

  .rules {
    margin-top: 19px;
    padding-left: 27px;
  }

  .rules li::before {
    left: -15px;
    top: 10px;
    width: 4px;
    height: 4px;
  }

  .divider--rules {
    margin: 24px 0 26px;
  }

  .contact-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .contact-row--faq {
    gap: 10px;
  }

  .contact-row__side {
    align-items: flex-start;
    gap: 10px;
  }

  .mail-pill {
    height: 43px;
    padding: 0 14px;
  }

  .text--gap-lg {
    margin-top: 20px;
  }

  .faq .text {
    margin-top: 20.5px;
  }

  .faq__item + .faq__item {
    margin-top: 25.5px;
    padding-top: 27.5px;
  }

  .contact-row--faq {
    margin-top: 22px;
  }

  #juego-responsable .subtitle {
    margin-top: 27.5px;
  }

  .line-card {
    min-height: 0;
    padding: 20px;
  }

  .line-card__flag {
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
  }

  .line-card__country {
    font-size: 14px;
    line-height: 18px;
  }

  .line-card__title {
    margin-top: 6px;
    line-height: 26px;
  }

  .line-card__text {
    max-width: none;
    margin: 0;
    padding: 20px 0 20px;
  }

  .line-card__meta {
    font-size: 14px;
    line-height: 18px;
  }

  .text--lines-note,
  .text--contact,
  #juego-responsable .text--gap {
    font-size: 14px;
    line-height: 18px;
  }

  .text--lines-note {
    margin-top: 26px;
  }

  .text--contact {
    margin-top: 80px;
  }

  #juego-responsable .text--gap {
    margin-top: 16px;
  }

  .warning {
    padding: 141px 0 96px;
  }

  .warning__title {
    font-size: 20px;
    line-height: 26px;
  }

  .warning .badge18 {
    margin-top: 15px;
  }

  .badge18--lg {
    width: 85px;
    height: 57px;
    border-radius: 24.5px;
    font-size: 30px;
    border-width: 2px;
  }

  .footer__inner {
    height: 69px;
    padding: 0 16px;
  }

  .footer p {
    max-width: 260px;
    font-size: 14px;
    line-height: 18px;
  }

  .badge18--footer {
    width: 53px;
    height: 37px;
    border-radius: 14.5px;
    font-size: 18px;
  }

  #nombre-de-la-marca .subtitle {
    font-size: 18px;
    line-height: 23px;
  }

  .lines {
    gap: 26px;
  }

  #canal-oficial,
  #canales-oficiales,
  #normativa-local {
    padding-top: 82.5px;
  }

  #nombre-de-la-marca {
    padding-top: 78px;
  }

  #canal-oficial .section__title,
  #canales-oficiales .section__title {
    margin-bottom: 23px;
  }

  #normativa-local .section__title {
    margin-bottom: 22.5px;
  }

  #preguntas-frecuentes .section__title {
    margin-bottom: 27px;
  }

  .m-br {
    display: inline;
  }

  .section__title--plain {
    flex-direction: row;
    justify-content: flex-start;
  }

  .toc__arrow {
    width: 14px;
    height: 12px;
    margin-right: 4px;
  }

  #normativa-local .text:first-of-type {
    margin-right: -6px;
  }

  .text--lines-note {
    max-width: 330px;
  }

  .badge18--lg {
    width: 81px;
    height: 54px;
    border-radius: 23px;
    font-size: 29px;
  }

  .badge18--footer {
    width: 49px;
    height: 34px;
    border-radius: 13px;
    font-size: 17px;
  }
}