/* IslaSuerte landing pages — shared styles.
   Values come from the Figma file (fadir tokens). Breakpoints follow the
   three Figma frames: mobile (390), tablet (800), desktop (1730, content capped at 1280). */

:root {
  --bg-page: #051d19;
  --bg-default: #0a2a1a;
  --bg-mobilemenu: #0a2a17;
  --bg-paper: #143d2d;
  --bg-soft: #284139;
  --bg-provider: #20684a;
  --shadow: rgba(0, 0, 0, 0.12);

  --green: #72f278;
  --green-icon-bg: rgba(114, 242, 120, 0.16);
  --on-green: #163300;
  --cta-dark: #0a1700;
  --text-primary: #ffffff;
  --text-secondary: #cddecc;
  --divider: rgba(172, 190, 182, 0.2);

  --radius: 8px;
  --font: "DM Sans", system-ui, sans-serif;

  /* Responsive values (mobile first) */
  --gutter-x: 16px;
  --gutter-y: 16px;
  --section-gap: 16px;
  --tile-gap: 8px;
}

@media (min-width: 768px) {
  :root {
    --gutter-x: 32px;
    --gutter-y: 20px;
    --section-gap: 20px;
  }
}

@media (min-width: 1200px) {
  :root {
    --tile-gap: 16px;
  }
}

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

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

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font);
  font-optical-sizing: auto;
  /* Match Figma: macOS browsers otherwise thicken light text on dark backgrounds */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

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

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 64px;
  border-radius: var(--radius);
  font-family: var(--font);
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.15s ease;
}

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

.btn:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 3px;
}

.btn--xl {
  height: 64px;
  padding: 0 32px;
  font-size: 16px;
  line-height: 22px;
}

.btn--lg {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  font-size: 16px;
  line-height: 22px;
}

.btn--green {
  background: var(--green);
  color: var(--on-green);
}

.btn--dark {
  background: var(--cta-dark);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 28px;
}

/* Pulsing CTA — from the Figma animation (2s loop, scale 1 → 1.04 → 1 twice) */
.pulse {
  animation: pulse 2s linear infinite;
}

@keyframes pulse {
  0%,
  50%,
  100% {
    animation-timing-function: ease-in-out;
    scale: 1;
  }
  25%,
  75% {
    animation-timing-function: ease-in-out;
    scale: 1.04;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulse {
    animation: none;
  }
}

/* Light sweep across the main CTAs every few seconds (all pages) */
.shine {
  position: relative;
  overflow: hidden;
}

.shine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%);
  translate: -120% 0;
  animation: shine 4.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shine {
  0% { translate: -120% 0; }
  30%, 100% { translate: 120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .shine::after {
    display: none;
  }
}

/* ---------- Header ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 8px;
  background: var(--bg-mobilemenu);
}

.site-header img {
  width: 120px;
  height: 33.6px;
}

@media (min-width: 768px) {
  .site-header {
    height: 64px;
    padding: 0 24px;
    background: var(--bg-default);
    box-shadow: 0 2px 16px 0 var(--shadow);
    position: relative;
    z-index: 1;
  }
}

/* ---------- Hero (starfield) ---------- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 56px 40px 34px;
  text-align: center;
  background:
    linear-gradient(to bottom, rgba(5, 29, 25, 0) 35%, var(--bg-page) 100%),
    url("img/hero-stars.png") center / cover no-repeat,
    #121b0e;
}

.hero__title {
  max-width: 520px;
  font-size: 32px;
  font-weight: 700;
  line-height: normal;
  color: var(--green);
}

.hero__cta img {
  width: 24px;
  height: 24px;
}

@media (min-width: 768px) {
  .hero {
    gap: 32px;
    min-height: 420px;
    padding: 40px;
  }

  .hero__title {
    max-width: 510px;
    font-size: 56px;
  }
}

@media (min-width: 1200px) {
  .hero__title {
    max-width: 968px;
  }
}

/* ---------- Main content column ---------- */

.content {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--gutter-y) var(--gutter-x);
}

/* ---------- USP cards ---------- */

.usps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0 0 12px;
  list-style: none;
}

.usp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 0;
  border-radius: var(--radius);
  background: var(--bg-paper);
}

.usp__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  background: var(--green-icon-bg);
}

.usp__icon img {
  width: 20px;
  height: 20px;
}

.usp__label {
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .usps {
    grid-template-columns: repeat(4, 1fr);
  }

  .usp {
    padding: 24px 0;
  }
}

@media (min-width: 1200px) {
  .usp {
    padding: 32px 0;
  }
}

/* ---------- Game groups ---------- */

.game-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.game-group__title {
  display: flex;
  align-items: center;
  height: 36px;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

.game-line {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tile-gap);
}

.game-tile {
  position: relative;
  display: block;
  aspect-ratio: 108 / 144;
  overflow: hidden;
  border-radius: var(--radius);
}

.game-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile shows 3 tiles per row; tablet and desktop show all 6 */
.game-tile:nth-child(n + 4) {
  display: none;
}

@media (min-width: 768px) {
  .game-group__title {
    height: auto;
    padding: 8px 0;
    font-size: 18px;
  }

  .game-line {
    grid-template-columns: repeat(6, 1fr);
  }

  .game-tile:nth-child(n + 4) {
    display: block;
  }
}

/* ---------- Providers ---------- */

.provider-line {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tile-gap);
}

.provider {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 108 / 45;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-provider);
}

/* Logo widths as a share of the tile, measured from each Figma frame */
.provider img {
  width: var(--logo-m);
  height: auto;
}

@media (min-width: 768px) {
  .provider-line {
    grid-template-columns: repeat(6, 1fr);
  }

  .provider img {
    width: var(--logo-t);
  }
}

@media (min-width: 1200px) {
  .provider img {
    width: var(--logo-d);
  }
}

.provider--hacksaw { --logo-m: 59%; --logo-t: 50%; --logo-d: 50%; }
.provider--pragmatic { --logo-m: 57%; --logo-t: 47%; --logo-d: 47%; }
.provider--playngo { --logo-m: 51%; --logo-t: 47%; --logo-d: 45%; }
.provider--booming { --logo-m: 44%; --logo-t: 40%; --logo-d: 34%; }
.provider--iconic21 { --logo-m: 43%; --logo-t: 41%; --logo-d: 36%; }
.provider--pushgaming { --logo-m: 68%; --logo-t: 56%; --logo-d: 56%; }

/* ---------- Onboarding banner ("3 steps") ---------- */

.onboarding-wrap {
  padding: 12px 0;
}

.onboarding {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 40px 32px;
  border-radius: 10px;
  background: url("img/onboarding-mobile.jpg") center / cover no-repeat, #a0e870;
  color: var(--on-green);
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.step__num {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  background: var(--bg-paper);
  color: var(--text-primary);
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
}

.step__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 40px;
  text-transform: uppercase;
}

.step__text {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}

.onboarding__cta {
  width: 100%;
}

@media (min-width: 768px) {
  .onboarding-wrap {
    padding: 12px 0 0;
  }

  .onboarding {
    gap: 32px;
    padding: 64px;
  }

  .steps,
  .onboarding__cta {
    width: 320px;
  }
}

@media (min-width: 1200px) {
  .onboarding {
    padding: 64px 32px;
    background-image: url("img/onboarding-desktop.jpg");
  }

  .steps {
    flex-direction: row;
    justify-content: center;
    gap: 47px;
    width: 100%;
  }

  .steps > li {
    flex: 0 1 300px;
  }

  .step {
    gap: 16px;
  }

  .step__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .step__title {
    font-size: 28px;
  }

  .step__text {
    font-size: 16px;
  }

  .onboarding__cta {
    width: 258px;
  }
}

/* Bottom spacer inside the content column (Figma "space" layer) */
.content__end {
  height: 8px;
}

@media (min-width: 1200px) {
  .content__end {
    height: 24px;
  }
}

/* ---------- Closing CTA band ---------- */

.closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 316px;
  padding: 48px 20px;
  text-align: center;
  background: linear-gradient(50deg, #0f3023 0.9%, #216248 100%);
}

.closing__title {
  font-size: 42px;
  font-weight: 700;
  line-height: 48px;
  color: var(--green);
}

.closing__text {
  font-size: 14px;
  line-height: 20px;
}

.closing__cta {
  width: 236px;
}

@media (min-width: 768px) {
  .closing {
    min-height: 372px;
    background: linear-gradient(35deg, #0f3023 0.9%, #216248 100%);
  }

  .closing__title {
    font-size: 56px;
    line-height: normal;
  }

  .closing__text {
    font-size: 16px;
    line-height: 24px;
  }
}

@media (min-width: 1200px) {
  .closing {
    background: linear-gradient(18deg, #0f3023 0.9%, #216248 100%);
  }
}

/* ---------- Footer ---------- */

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 56px 16px;
  background: var(--bg-default);
}

.site-footer__logo {
  width: 120px;
  height: 33.6px;
}

.trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.trust__rg {
  font-family: "Inter", var(--font);
  font-size: 14px;
  font-weight: 800;
  line-height: 18px;
  color: var(--green);
}

.trust__age {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50px;
  background: var(--bg-soft);
}

.site-footer hr {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--divider);
}

.copyright {
  padding: 15px 0;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  color: var(--text-secondary);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* =====================================================================
   Landing pages 2 & 3 — variants and new components
   Everything below is opt-in via modifier/new classes, so page 1 is untouched.
   ===================================================================== */

/* ---------- Hero: tall variant (page 2, starfield, larger two-line title) ---------- */

.hero--tall {
  min-height: 350px;
}

.hero--tall .hero__title {
  font-size: 40px;
}

@media (min-width: 768px) {
  .hero--tall {
    min-height: 471px;
  }

  .hero--tall .hero__title {
    max-width: 692px;
    font-size: 64px;
  }
}

/* ---------- Hero: light variant (page 3, green dice art, dark title + CTA) ---------- */

.hero--light {
  padding: 52px 40px;
}

.hero--light .hero__title {
  font-size: 40px;
  color: var(--cta-dark);
}

.hero__cta-wrap {
  width: 238px;
}

@media (min-width: 768px) {
  .hero--light {
    min-height: 372px;
    padding: 40px 64px;
  }

  .hero--light .hero__title {
    max-width: 620px;
    font-size: 56px;
  }
}

@media (min-width: 1200px) {
  .hero--light {
    min-height: 471px;
    padding: 40px;
  }

  .hero--light .hero__title {
    max-width: 692px;
    font-size: 64px;
  }
}

/* ---------- Content column: extra top padding (page 3 tablet/desktop) ---------- */

@media (min-width: 768px) {
  .content--pt32 {
    padding-top: 32px;
  }
}

/* ---------- USP cards: solid-icon variant (pages 2 & 3) ---------- */

.usps--solid {
  padding: 12px 0;
}

.usps--solid .usp__icon {
  background: var(--green);
}

@media (min-width: 768px) {
  .usps--solid {
    gap: 8px;
    padding: 20px 0;
  }

  .usps--solid .usp {
    padding: 20px 0;
  }
}

@media (min-width: 1200px) {
  .usps--solid {
    gap: 16px;
  }

  .usps--solid .usp {
    padding: 32px 0;
  }
}

/* ---------- Onboarding banner: titled variant ("TU SUERTE COMIENZA AQUÍ") ---------- */

.onboarding-wrap--titled {
  padding: 8px 0 0;
}

.onboarding-wrap--tight {
  padding-top: 4px;
}

.onboarding--titled {
  align-items: stretch;
  gap: 32px;
  padding: 32px;
}

.onboarding__title {
  font-size: 36px;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  color: #000;
}

.onboarding__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.onboarding--titled .steps {
  gap: 16px;
}

.onboarding--titled .step__num {
  width: 36px;
  height: 36px;
}

.onboarding--titled .step__title {
  font-size: 20px;
  line-height: 36px;
}

/* Figma sets the first step's description to a 20px line, the others to 24px */
.onboarding--titled .step:first-child .step__text {
  line-height: 20px;
}

/* Page 3: plain gradient instead of the dice art */
.onboarding--plain {
  background: linear-gradient(to bottom, #9fe773, #bcf798);
}

@media (min-width: 768px) {
  .onboarding-wrap--titled {
    padding: 0;
  }

  .onboarding--titled {
    gap: 40px;
    padding: 64px 80px;
  }

  .onboarding__title {
    font-size: 42px;
    text-align: center;
  }

  .onboarding__body {
    gap: 42px;
  }

  .onboarding--titled .steps {
    align-items: center;
    gap: 32px;
    width: 100%;
  }

  .onboarding--titled .steps > li {
    width: 300px;
  }

  .onboarding--titled .onboarding__cta {
    width: 316px;
  }
}

@media (min-width: 1200px) {
  .onboarding--titled {
    background-image: url("img/green-dice-wide.jpg");
  }

  .onboarding--plain {
    background: linear-gradient(to bottom, #9fe773, #bcf798);
  }

  .onboarding--titled .steps {
    align-items: flex-start;
    gap: 32px;
  }

  .onboarding--titled .steps > li {
    flex: 0 0 300px;
  }

  .onboarding--titled .step {
    gap: 10px;
  }

  .onboarding--titled .step__body {
    gap: 0;
  }

  .onboarding--titled .step__title {
    font-size: 20px;
  }

  .onboarding--titled .step__text {
    font-size: 14px;
  }
}

/* ---------- Promo cards ("Lo mejor del casino en vivo", "Retiradas en menos de 24h") ---------- */

.promos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding-top: 20px;
}

.promo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 20px 20px 0;
  overflow: hidden;
  border-radius: 10px;
  /* The background stops 1px short of the bottom edge: the image owns that last
     row, so no card green can bleed into the antialiased edge under it. */
  background: linear-gradient(to bottom, var(--bg-paper) 0%, #35a377 64.02%) top / 100% calc(100% - 1px) no-repeat;
}

.promo__title {
  align-self: stretch;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
}

.promo__img {
  flex-shrink: 0;
  width: 149px;
  height: auto;
  /* As in Figma, the art may extend into the card padding (not past the card).
     On very narrow phones it scales down instead of being cropped. */
  max-width: calc(100% + 40px);
  aspect-ratio: 149 / 174;
  /* Bleed 1px past the card's bottom edge (the card clips it): heights land on
     fractional pixels at some sizes, which otherwise leaves a thin line of the
     card background showing under the image. */
  margin: auto 0 -1px;
  object-fit: cover;
}

@media (min-width: 768px) {
  .promo {
    padding: 32px 32px 0;
  }

  .promo__title {
    font-size: 32px;
  }

  .promo__img {
    width: 163px;
  }
}

@media (min-width: 1200px) {
  .promos {
    gap: 16px;
  }

  .promo {
    flex-direction: row;
    padding: 0 32px;
    background: linear-gradient(108.42deg, var(--bg-paper) 0%, #35a377 99.264%) top / 100% calc(100% - 1px) no-repeat;
  }

  .promo__title {
    flex: 1 1 0;
    align-self: center;
    max-width: 274px;
  }

  .promo__img {
    width: 181px;
    align-self: flex-end;
    margin: 0 0 -1px auto;
  }
}

/* ---------- Closing CTA band: fade variant (pages 2 & 3) ---------- */

.closing--fade {
  min-height: 301px;
  background: linear-gradient(to bottom, var(--bg-page) 15.449%, var(--bg-default) 100%);
}

@media (min-width: 768px) {
  .closing--fade {
    min-height: 360px;
  }
}

/* Line break that only applies on mobile (Figma breaks some headlines by hand there) */
@media (min-width: 768px) {
  .br-mobile {
    display: none;
  }
}

/* ---------- Hero video background (pages 1 & 2) ----------
   The video sits behind the hero content. The fallback image is the hero's own
   background, so it shows while the video loads, if it fails, or if autoplay is blocked. */

.hero--video {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: url("img/hero-video-poster-mob.jpg") center / cover no-repeat, var(--bg-page);
}

.hero--video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(5, 29, 25, 0) 35%, var(--bg-page) 100%);
}

.hero__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .hero--video {
    background-image: url("img/hero-video-poster.jpg");
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__video {
    display: none;
  }
}

/* ---------- Section transitions (driven by assets/motion.js) ----------
   Only active once the script adds .motion to <html>. Uses the individual
   `translate`/`scale` properties so it never fights the hover lift on game
   tiles or the pulse on CTAs. */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-time: 0.8s;
  --reveal-step: 70ms;
}

.motion [data-reveal] {
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity var(--reveal-time) var(--ease-out),
    translate var(--reveal-time) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--reveal-step));
}

.motion .is-in [data-reveal] {
  opacity: 1;
  translate: 0 0;
}

/* Game tiles and provider logos rise a little less, so a row reads as a sweep */
.motion .game-tile[data-reveal],
.motion .provider[data-reveal] {
  translate: 0 16px;
}

.motion .is-in .game-tile[data-reveal],
.motion .is-in .provider[data-reveal] {
  translate: 0 0;
}

/* The onboarding banner settles in as one card before its steps arrive */
.motion .onboarding[data-reveal-group] {
  opacity: 0;
  scale: 0.97;
  transition:
    opacity 0.9s var(--ease-out),
    scale 0.9s var(--ease-out);
}

.motion .onboarding.is-in {
  opacity: 1;
  scale: 1;
}

.motion .onboarding [data-reveal] {
  transition-delay: calc(150ms + var(--i, 0) * 90ms);
}

/* Hero: a slower, larger entrance, and the video eases out of a slight zoom */
.motion .hero [data-reveal] {
  translate: 0 32px;
  transition-duration: 1s;
  transition-delay: calc(120ms + var(--i, 0) * 140ms);
}

.motion .hero.is-in [data-reveal] {
  translate: 0 0;
}

.motion .hero__video {
  scale: 1.08;
  transition: scale 2.4s var(--ease-out);
}

.motion .hero.is-in .hero__video {
  scale: 1;
}

/* Footer is quiet: fade only */
.motion .site-footer [data-reveal] {
  translate: none;
  transition-duration: 1s;
}

/* ---------- Page 3 hero: animated 3D dice (replaces the flat dice image) ----------
   Pure CSS cubes: six faces each, pips drawn with radial gradients. Faces are
   shaded as if lit from the top-left; the dice only rock (never flip fully), so
   the lit faces always stay the ones facing up. All motion is transform-only. */

.hero--light {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #9ee772;
}

/* Slowly drifting gradient between the two brand greens. It lives on an
   oversized layer that only slides (transform), so the hero isn't repainted
   every frame. */
.hero--light::before {
  content: "";
  position: absolute;
  top: -10%;
  left: 0;
  z-index: -1;
  width: 300%;
  height: 120%;
  background: linear-gradient(115deg, #9ee772 0%, #bcf798 18%, #9ee772 36%, #bcf798 54%, #9ee772 72%, #bcf798 90%, #9ee772 100%);
  animation: hero-gradient 8s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes hero-gradient {
  from { translate: 0 0; }
  to { translate: -50% 0; }
}

.hero--light.is-paused::before {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .hero--light::before {
    animation: none;
  }
}

.hero--light > :not(.dice-scene) {
  position: relative;
  z-index: 1;
}

.dice-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.die {
  --s: 100px; /* cube edge */
  --r: calc(var(--s) * 0.085); /* pip radius */
  --d: 0s; /* entrance delay */
  --enter: 2.2s; /* entrance length; the idle motion starts exactly when it ends */
  position: absolute;
  width: var(--s);
  height: var(--s);
  /* The camera (perspective) lives on this element, which never moves */
  perspective: calc(var(--s) * 6);
  /* The fade lives here, not on the 3D layers below: opacity < 1 forces 3D
     content to render flat, and switching back mid-fall looked like a jump. */
  animation: die-fade 0.7s ease-out var(--d) backwards;
}

.die--a {
  --s: 104px;
  top: -14px;
  left: -14px;
  --d: 0.1s;
}

.die--b {
  --s: 132px;
  right: -20px;
  bottom: -30px;
  --d: 0.35s;
}

/* Position: fall in, then bob. die-float starts at 0, where die-enter ends. */
.die__float {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation:
    die-enter var(--enter) cubic-bezier(0.22, 0.75, 0.3, 1) var(--d) backwards,
    die-float 6s ease-in-out calc(var(--d) + var(--enter)) infinite alternate;
}

.die--b .die__float {
  animation-name: die-enter, die-float-b;
}

/* Orientation: tumble in and decelerate onto the rocking start pose, then rock */
.die__cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation:
    die-tumble-a var(--enter) cubic-bezier(0.22, 0.75, 0.3, 1) var(--d) backwards,
    die-rock-a 8s ease-in-out calc(var(--d) + var(--enter)) infinite alternate;
}

.die--b .die__cube {
  animation-name: die-tumble-b, die-rock-b;
  animation-duration: var(--enter), 9.5s;
}

.die__face {
  --pip: #d6f8c0 0, #c2f3a4 74%, rgba(194, 243, 164, 0) 100%;
  position: absolute;
  inset: 0;
  border-radius: 18%;
  background-color: var(--face);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset calc(var(--s) * 0.03) calc(var(--s) * 0.03) calc(var(--s) * 0.06) rgba(255, 255, 255, 0.1),
    inset calc(var(--s) * -0.03) calc(var(--s) * -0.03) calc(var(--s) * 0.08) rgba(30, 90, 15, 0.22);
  backface-visibility: hidden;
}

/* Opposite faces add to 7, as on a real die. Shading: top lightest, bottom darkest. */
.die__face--1 { --face: #87d65f; transform: translateZ(calc(var(--s) / 2)); }
.die__face--6 { --face: #80cf59; transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.die__face--2 { --face: #70bf4a; transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.die__face--5 { --face: #93de6b; transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.die__face--3 { --face: #a2e97b; transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.die__face--4 { --face: #68b544; transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }

/* Right-hand die: deeper, more saturated greens so it reads against the background
   without greying out. Pips stay light, which also lifts the contrast. */
.die--b .die__face--1 { --face: #77cf47; }
.die--b .die__face--6 { --face: #70c842; }
.die--b .die__face--2 { --face: #5db533; }
.die--b .die__face--5 { --face: #84d957; }
.die--b .die__face--3 { --face: #93e465; }
.die--b .die__face--4 { --face: #55a72e; }

.die__face--1 {
  background-image: radial-gradient(circle var(--r) at 50% 50%, var(--pip));
}
.die__face--2 {
  background-image:
    radial-gradient(circle var(--r) at 28% 28%, var(--pip)),
    radial-gradient(circle var(--r) at 72% 72%, var(--pip));
}
.die__face--3 {
  background-image:
    radial-gradient(circle var(--r) at 28% 28%, var(--pip)),
    radial-gradient(circle var(--r) at 50% 50%, var(--pip)),
    radial-gradient(circle var(--r) at 72% 72%, var(--pip));
}
.die__face--4 {
  background-image:
    radial-gradient(circle var(--r) at 28% 28%, var(--pip)),
    radial-gradient(circle var(--r) at 72% 28%, var(--pip)),
    radial-gradient(circle var(--r) at 28% 72%, var(--pip)),
    radial-gradient(circle var(--r) at 72% 72%, var(--pip));
}
.die__face--5 {
  background-image:
    radial-gradient(circle var(--r) at 28% 28%, var(--pip)),
    radial-gradient(circle var(--r) at 72% 28%, var(--pip)),
    radial-gradient(circle var(--r) at 50% 50%, var(--pip)),
    radial-gradient(circle var(--r) at 28% 72%, var(--pip)),
    radial-gradient(circle var(--r) at 72% 72%, var(--pip));
}
.die__face--6 {
  background-image:
    radial-gradient(circle var(--r) at 28% 26%, var(--pip)),
    radial-gradient(circle var(--r) at 72% 26%, var(--pip)),
    radial-gradient(circle var(--r) at 28% 50%, var(--pip)),
    radial-gradient(circle var(--r) at 72% 50%, var(--pip)),
    radial-gradient(circle var(--r) at 28% 74%, var(--pip)),
    radial-gradient(circle var(--r) at 72% 74%, var(--pip));
}

/* Entrance: fall from above while fading in. Ends at rest (no overshoot). */
@keyframes die-enter {
  from { translate: 0 -220px; }
  to { translate: 0 0; }
}

@keyframes die-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Idle bob: starts and ends at 0 so it picks up seamlessly from the entrance */
@keyframes die-float {
  from { translate: 0 0; }
  to { translate: 0 -14px; }
}

@keyframes die-float-b {
  from { translate: 0 0; }
  to { translate: 0 12px; }
}

/* Tumble ends on exactly the first frame of the matching rock animation.
   Same function list (X, Y, Z) at both ends, so it interpolates smoothly. */
@keyframes die-tumble-a {
  from { transform: rotateX(-204deg) rotateY(-124deg) rotateZ(118deg); }
  to { transform: rotateX(-24deg) rotateY(-34deg) rotateZ(28deg); }
}

@keyframes die-tumble-b {
  from { transform: rotateX(-202deg) rotateY(122deg) rotateZ(-104deg); }
  to { transform: rotateX(-22deg) rotateY(32deg) rotateZ(-14deg); }
}

/* Rocking only: front, top and one side stay towards the viewer */
@keyframes die-rock-a {
  from { transform: rotateX(-24deg) rotateY(-34deg) rotateZ(28deg); }
  to { transform: rotateX(-34deg) rotateY(-22deg) rotateZ(18deg); }
}

@keyframes die-rock-b {
  from { transform: rotateX(-22deg) rotateY(32deg) rotateZ(-14deg); }
  to { transform: rotateX(-32deg) rotateY(44deg) rotateZ(-6deg); }
}

/* Paused while the hero is off screen (class toggled by motion.js) */
.dice-scene.is-paused * {
  animation-play-state: paused;
}

@media (min-width: 768px) {
  .die--a { --s: 150px; top: -16px; left: -10px; }
  .die--b { --s: 196px; right: -14px; bottom: -40px; }
}

@media (min-width: 1200px) {
  .die--a { --s: 190px; top: -30px; left: 10px; }
  .die--b { --s: 250px; right: 20px; bottom: -60px; }
}

@media (prefers-reduced-motion: reduce) {
  .die,
  .die__float,
  .die__cube {
    animation: none;
  }

  .die__cube {
    transform: rotateX(-28deg) rotateY(-28deg) rotateZ(22deg);
  }

  .die--b .die__cube {
    transform: rotateX(-26deg) rotateY(38deg) rotateZ(-10deg);
  }
}

/* ---------- Auto-scrolling game reels (pages 1 & 4) ----------
   The list holds every game twice; the second copy is aria-hidden.
   The JUGAR hover below is shared with the grid tiles on pages 2 & 3. */

.reel {
  --tile-w: 120px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reel__title {
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

.reel__viewport {
  overflow: hidden;
  margin: 0 calc(var(--gutter-x) * -1);
  padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.reel__track {
  display: flex;
  gap: var(--tile-gap);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: reel 36s linear infinite;
}

/* The list holds every game twice, so shifting by half (plus half a gap) loops seamlessly */
@keyframes reel {
  from { translate: 0 0; }
  to { translate: calc(-50% - var(--tile-gap) / 2) 0; }
}

.reel__track--right {
  animation-direction: reverse;
}

.reel:hover .reel__track,
.reel:focus-within .reel__track {
  animation-play-state: paused;
}

.play-tile {
  position: relative;
  display: block;
  width: var(--tile-w);
  aspect-ratio: 108 / 144;
  overflow: hidden;
  border-radius: var(--radius);
}

.play-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-tile img,
.game-tile img {
  transition: scale 0.35s var(--ease-out, ease-out);
}

.play-tile::after,
.game-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 29, 25, 0.85), rgba(5, 29, 25, 0) 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.play-tile__cta {
  position: absolute;
  bottom: 12px;
  left: 50%;
  z-index: 1;
  padding: 7px 16px;
  border-radius: 100px;
  background: var(--green);
  color: var(--on-green);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0;
  translate: -50% 8px;
  transition: opacity 0.25s ease, translate 0.25s ease;
}

.play-tile:hover img,
.play-tile:focus-visible img,
.game-tile:hover img,
.game-tile:focus-visible img {
  scale: 1.06;
}

.play-tile:hover::after,
.play-tile:focus-visible::after,
.play-tile:hover .play-tile__cta,
.play-tile:focus-visible .play-tile__cta,
.game-tile:hover::after,
.game-tile:focus-visible::after,
.game-tile:hover .play-tile__cta,
.game-tile:focus-visible .play-tile__cta {
  opacity: 1;
}

.play-tile:hover .play-tile__cta,
.play-tile:focus-visible .play-tile__cta,
.game-tile:hover .play-tile__cta,
.game-tile:focus-visible .play-tile__cta {
  translate: -50% 0;
}

.play-tile:focus-visible,
.game-tile:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .reel {
    --tile-w: 150px;
  }

  .reel__title {
    font-size: 18px;
  }
}

@media (min-width: 1200px) {
  .reel {
    --tile-w: 190px;
  }
}

/* Paused while off screen (class toggled by motion.js for [data-pause-offscreen]) */
.is-paused,
.is-paused * {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .reel__track {
    animation: none;
  }

  .reel__viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
    padding-inline: var(--gutter-x);
  }

  .reel__track li[aria-hidden="true"] {
    display: none;
  }
}

/* ---------- FAQ (pages 2 & 4) ---------- */

:root {
  interpolate-size: allow-keywords; /* lets the FAQ animate to height: auto where supported */
}

.faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 860px;
  margin: 24px auto 0; /* extra breathing room above (adds to the section gap) */
}

.faq__title {
  margin-bottom: 4px;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq__item {
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--bg-paper);
  transition: border-color 0.25s ease;
}

.faq__item[open] {
  border-color: rgba(114, 242, 120, 0.3);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 10px;
}

.faq__chev {
  flex-shrink: 0;
  color: var(--green);
  transition: rotate 0.3s var(--ease-out, ease-out);
}

.faq__item[open] .faq__chev {
  rotate: 180deg;
}

.faq__item p {
  padding: 0 18px 18px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.55;
}

/* Smooth open/close where the browser supports animating <details> */
.faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 0.35s var(--ease-out, ease-out),
    content-visibility 0.35s allow-discrete;
}

.faq__item[open]::details-content {
  block-size: auto;
}

@media (min-width: 768px) {
  .faq {
    margin-top: 44px;
  }

  .faq__title {
    font-size: 32px;
  }

  .faq__item summary {
    padding: 20px 24px;
    font-size: 18px;
  }

  .faq__item p {
    padding: 0 24px 22px;
    font-size: 16px;
  }
}

/* ---------- SEO text with "Leer más / Ver menos" (pages 3 & 4) ----------
   Collapsing only happens once read-more.js adds .is-collapsible, so without
   the script the full text shows. Height animates where the browser supports
   interpolate-size (declared with the FAQ); elsewhere it opens instantly. */

.seo-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 860px;
  margin: 24px auto 0;
}

.seo-text__title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.seo-text__body {
  position: relative;
  width: 100%;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.65;
}

.seo-text__body p + h3,
.seo-text__body p + p {
  margin-top: 16px;
}

.seo-text__body h3 {
  margin-bottom: 6px;
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.seo-text.is-collapsible .seo-text__body {
  height: 9.5em;
  overflow: hidden;
  /* keeps the scroll-in reveal (opacity/translate) alongside the height change */
  transition:
    height 0.5s var(--ease-out, ease-out),
    opacity var(--reveal-time, 0.8s) var(--ease-out, ease-out) calc(var(--i, 0) * var(--reveal-step, 70ms)),
    translate var(--reveal-time, 0.8s) var(--ease-out, ease-out) calc(var(--i, 0) * var(--reveal-step, 70ms));
}

.seo-text.is-collapsible.is-open .seo-text__body {
  height: auto;
}

/* Fade the cut-off text into the page */
.seo-text.is-collapsible .seo-text__body::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 5em;
  background: linear-gradient(to bottom, rgba(5, 29, 25, 0), var(--bg-page));
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.seo-text.is-collapsible.is-open .seo-text__body::after {
  opacity: 0;
}

.seo-text__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: 1.5px solid rgba(114, 242, 120, 0.4);
  border-radius: 100px;
  background: transparent;
  color: var(--green);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.seo-text__toggle:hover {
  border-color: var(--green);
  background: rgba(114, 242, 120, 0.08);
}

.seo-text__toggle:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.seo-text__toggle svg {
  transition: rotate 0.3s var(--ease-out, ease-out);
}

.seo-text.is-open .seo-text__toggle svg {
  rotate: 180deg;
}

@media (min-width: 768px) {
  .seo-text {
    margin-top: 44px;
  }

  .seo-text__title {
    font-size: 28px;
  }

  .seo-text__body {
    font-size: 16px;
  }

  .seo-text__body h3 {
    font-size: 18px;
  }

  .seo-text.is-collapsible .seo-text__body {
    height: 8.5em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seo-text.is-collapsible .seo-text__body,
  .seo-text__toggle svg {
    transition: none;
  }
}