:root {
  color-scheme: light;
  --platy-star-img: url("https://cdn-icons-png.flaticon.com/512/1985/1985879.png");
  --ink: #271e43;
  --muted: #665d8e;
  --panel: rgba(255, 255, 255, 0.62);
  --panel-strong: rgba(255, 255, 255, 0.84);
  --pink: #ff78bd;
  --hot-pink: #ff5aaf;
  --blue: #6bcfff;
  --aqua: #63e4d8;
  --purple: #a67dff;
  --yellow: #ffd15d;
  --peach: #ffb47c;
  --green: #8be58c;
  --line: rgba(255, 255, 255, 0.52);
  --shadow: 0 28px 80px rgba(66, 45, 140, 0.28);
  --platyverse-head-mt: clamp(10px, 1.35vw, 14px);
  --platyverse-head-mb: clamp(12px, 1.85vw, 18px);
  --platyverse-section-gap-before-headline: clamp(18px, 3vw, 32px);
  /* Solo “The collection”: margen del título — referencia fija */
  --platyverse-space-collection-lead-mt: calc(
    var(--platyverse-head-mt) + var(--platyverse-section-gap-before-headline)
  );
  /* Carrusel y “More…”: compensan que no hay mismo cierre de bloque máquina/shop (~aire extra que Ves ante The collection) */
  --platyverse-headline-match-collection-gap: clamp(12px, 2vw, 22px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
  scrollbar-color: #9469f0 rgba(196, 164, 255, 0.22);
  scrollbar-width: auto;
  min-height: 100%;
  background-color: #e8dff5;
  /*
   * Rebote (pull) en iOS/Safari muestra MUCHA más área detrás que un par de vw.
   * Franja alta y muy alta (= varias vh): mismo violeta hero (#d9c4ed → lilado página)
   * para que el hero/video no parezcan “despegados” del borde superior.
   */
  background-image: linear-gradient(
    180deg,
    #d9c4ed 0%,
    #d7c5ea calc(8% + env(safe-area-inset-top, 0px)),
    #e8dff5 100%
  );
  background-repeat: no-repeat;
  background-size: 100% min(240vh, 2800px);
  background-position: top center;
}

html::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

html::-webkit-scrollbar-track {
  margin-block: 8px;
  border-radius: 999px;
  background: rgba(196, 164, 255, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}

html::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  background: linear-gradient(180deg, #c4a4ff 0%, #9469f0 42%, #7a4dde 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.38),
    0 3px 0 rgba(79, 52, 163, 0.45);
}

html::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #d4b8ff 0%, #a07ff5 40%, #8a5eea 100%);
}

html::-webkit-scrollbar-corner {
  background: transparent;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
  letter-spacing: 0;
  /* Primera capa: continúa tono hero bajo overscroll antes de vignette + arte */
  background-color: #e8dff5;
  background-image:
    linear-gradient(
      180deg,
      #d9c4ed 0%,
      rgba(232, 223, 245, 0) min(560px, 85vh)
    ),
    radial-gradient(ellipse 120% 85% at 50% 15%, rgba(255, 252, 255, 0.55) 0%, transparent 45%),
    linear-gradient(180deg, rgba(255, 250, 253, 0.35) 0%, rgba(235, 225, 250, 0.12) 42%, rgba(222, 208, 242, 0.55) 100%),
    url("assets/we.webp");
  background-size:
    100% min(760px, 100vh),
    100% 100%,
    100% 100%,
    cover;
  background-position:
    center top,
    50% 0,
    50% 0,
    center 28%;
  background-repeat: no-repeat;
  background-attachment: scroll, scroll, scroll, scroll;
  overflow-x: hidden;
}

/* Pantalla inicial: vídeo Enter a pantalla completa + botón (script.js). */
html.site-enter-gate-open {
  overflow: hidden;
  scrollbar-width: none;
}

html.site-enter-gate-open::-webkit-scrollbar {
  width: 0;
  height: 0;
}

body.site-enter-gate-open {
  overflow: hidden;
  scrollbar-width: none;
}

body.site-enter-gate-open::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.site-enter-gate {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  z-index: 2147483645;
  overflow: hidden;
  background: #060210;
}

.site-enter-gate__video {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  display: block;
  object-fit: cover;
  background: #060210;
  transform: translate(-50%, -50%);
  /* Elimina líneas/franjas tipo “scrollbar” donde 100%/100% + cover no llega por subpíxeles. */
}

.site-enter-gate__logo {
  pointer-events: none;
  display: block;
  width: min(420px, 78vw);
  height: auto;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 6px 28px rgba(0, 0, 0, 0.5));
}

/* Sin vídeo hasta el primer `playing`: evita un frame negro muy breve antes de decodificar. */
.site-enter-gate__video.site-enter-gate__video--prestart {
  opacity: 0;
  visibility: hidden;
}

.site-enter-gate__ui {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(18px, 4.5vh, 40px);
  padding:
    clamp(40px, 10vh, 100px)
    clamp(14px, 4vw, 28px)
    max(clamp(20px, 5vh, 40px), env(safe-area-inset-bottom, 0px))
    clamp(14px, 4vw, 28px);
  background: linear-gradient(
    185deg,
    rgba(12, 4, 24, 0.05) 0%,
    rgba(8, 2, 18, 0.22) 45%,
    rgba(6, 2, 16, 0.78) 100%
  );
}

.site-enter-gate__cta.primary-action {
  pointer-events: auto;
  min-width: min(320px, 100%);
  min-height: clamp(54px, 12vw, 60px);
  font-size: clamp(0.95rem, 2.5vw, 1.1rem);
  letter-spacing: 0.04em;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.72),
    0 6px 0 #d39d3d,
    0 18px 40px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .site-enter-gate__video {
    object-fit: cover;
  }

  .site-enter-gate__ui {
    background: transparent;
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 900px) {
  body {
    background-attachment: scroll, scroll, scroll, fixed;
  }
}

body::before {
  content: none;
}
a,
input {
  font: inherit;
}

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

.page-shell {
  width: min(1500px, 100%);
  margin: 0 auto;
  padding: 24px;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: reduce) {
  .hero-section {
    --mx: 0 !important;
    --my: 0 !important;
  }

  .hero-section::before,
  .hero-section,
  .hero-bg-video,
  .sky-particles,
  .hero-copy,
  .hero-s1,
  .hero-season-stack {
    transition-duration: 0.01ms;
  }

  .hero-bg-video {
    display: none;
  }

  .hero-s1__video {
    display: none;
  }

  .stories-motion-card video {
    display: none;
  }

  .stories-motion-card:not(.stories-motion-card--cta) {
    background:
      radial-gradient(circle at 42% 32%, rgba(255, 255, 255, 0.92), transparent 58%),
      linear-gradient(165deg, #f2e8ff, #ffd6f8);
  }

  .hero-section::before,
  .sky-particles,
  .hero-copy,
  .hero-s1,
  .hero-season-stack {
    transform: none !important;
  }

  .hero-logo {
    transform: none !important;
  }

  .hero-logo:hover {
    transform: none !important;
  }

  .stories-carousel__slide .stories-motion-card,
  .stories-carousel__slide .stories-motion-card:hover {
    box-shadow: none !important;
  }

  .stories-motion-card {
    transition-duration: 0.01ms !important;
  }

  .stories-motion-card:hover {
    transform: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 14px 28px rgba(67, 54, 140, 0.12) !important;
  }

  .premium-nav-sparkles i {
    animation: none !important;
    opacity: 0.5;
  }

  .site-header,
  .site-header .header-nav-pill.premium-nav-bar,
  .site-header .header-nav-pill.premium-nav-bar .premium-nav-links,
  .site-header .header-nav-pill.premium-nav-bar .premium-nav-links a,
  .site-header .header-nav-pill.premium-nav-bar .premium-nav-links a::after {
    transition-duration: 0.01ms !important;
  }

  .pillar-tile:hover,
  .pillar-tile:hover .pillar-tile-img {
    transform: none;
  }

  .premium-nav-badge:hover,
  .header-nav-pill.premium-nav-bar .premium-nav-links a:hover,
  .header-nav-pill.premium-nav-bar .premium-nav-links a:focus-visible {
    transform: none !important;
  }
}

.hero-header-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -24px;
  position: relative;
  /* Fixes main headings stacking over the fixed bar (wrapped with hero) */
  z-index: 50;
}

.page-about-us main,
.page-roadmap main {
  box-sizing: border-box;
  width: min(1320px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-top: calc(env(safe-area-inset-top, 0px) + clamp(88px, 12vw, 124px));
  padding-inline: max(14px, env(safe-area-inset-left), env(safe-area-inset-right));
}

.page-collection main {
  box-sizing: border-box;
  width: min(1540px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-top: calc(env(safe-area-inset-top, 0px) + clamp(88px, 12vw, 124px));
  padding-inline: max(14px, env(safe-area-inset-left), env(safe-area-inset-right));
}

/* Collection: fondo pastel / hero suave tipo mock (montañas, bruma) — panel “cristal” en `.collection-deck`. */
body.page-collection {
  background-color: #ebe2f8;
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 251, 255, 0.52) 0%,
      rgba(232, 223, 245, 0.08) min(560px, 82vh),
      rgba(218, 190, 240, 0.32) 100%
    ),
    url("assets/hero2.webp");
  background-size: 100% 100%, cover;
  background-position: center top, center center;
  background-repeat: no-repeat;
  background-attachment: scroll, scroll;
}

body.page-collection #collection-lead.platyverse-plunge {
  filter: drop-shadow(0 4px 18px rgba(78, 50, 120, 0.22));
}

body.page-collection .collection-deck {
  margin-inline: auto;
  width: min(1220px, 100%);
  padding: clamp(18px, 3.8vw, 34px);
  border-radius: clamp(28px, 4vw, 42px);
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.58) 0%,
      rgba(251, 244, 255, 0.45) 40%,
      rgba(246, 235, 255, 0.42) 100%
    );
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 18px 52px rgba(72, 48, 120, 0.14),
    0 2px 0 rgba(180, 150, 220, 0.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
  backdrop-filter: blur(16px) saturate(1.12);
}

body.page-collection .collection-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.8vw, 12px);
  margin-bottom: clamp(20px, 3.2vw, 30px);
}

body.page-collection .collection-filters__epic-leg {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(8px, 1.8vw, 12px);
}

body.page-collection .collection-filter-pill {
  appearance: none;
  border: none;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
  padding: clamp(9px, 1.9vw, 12px) clamp(14px, 2.4vw, 18px);
  border-radius: 999px;
  font: inherit;
  font-size: clamp(0.68rem, 2.05vw, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(52, 32, 88, 0.88);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 3px 10px rgba(90, 50, 130, 0.08);
  transition:
    transform 0.14s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

body.page-collection .collection-filter-pill:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.75);
}

body.page-collection .collection-filter-pill:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 3px 10px rgba(90, 50, 130, 0.08),
    0 0 0 3px rgba(255, 146, 200, 0.55),
    0 0 0 5px rgba(120, 80, 200, 0.12);
}

body.page-collection .collection-filter-pill.is-active {
  color: #fffdf8;
  text-shadow: 0 1px 0 rgba(60, 20, 80, 0.35);
  background: linear-gradient(125deg, #b06cff 0%, #7844d9 52%, #4e5cff 100%);
  border-color: rgba(230, 210, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 5px 16px rgba(90, 50, 200, 0.22);
}

body.page-collection .collection-section .card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: clamp(22px, 3.2vw, 36px);
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

body.page-collection .collection-section .rarity-card.rarity-card--deck {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  aspect-ratio: 744 / 1039;
  min-height: 0;
  height: auto;
  padding: 0;
  border-radius: clamp(22px, 3.2vw, 30px);
  overflow: hidden;
  background:
    radial-gradient(
      ellipse 95% 90% at 50% 45%,
      rgba(252, 250, 255, 1) 0%,
      rgba(236, 224, 250, 0.95) 100%
    );
  border: none;
  box-shadow: 0 14px 36px rgba(48, 28, 96, 0.16);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.page-collection .collection-section .rarity-card.rarity-card--deck::before {
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

@media (max-width: 980px) {
  body.page-collection .collection-section .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
  body.page-collection .collection-section .card-grid {
    grid-template-columns: 1fr;
  }
}

/* Roadmap: fondo en `body` (no sólo `.roadmap-page-band`), así el header fijo muestra el mismo arte que el resto del sitio en esa página. */
body.page-roadmap {
  background-color: #140a26;
  background-image:
    radial-gradient(
      ellipse 130% 95% at 50% 38%,
      rgba(200, 160, 255, 0.14),
      transparent 55%
    ),
    url("assets/hero2.png");
  background-position:
    center 38%,
    center center;
  background-size:
    auto,
    cover;
  background-repeat: no-repeat;
  background-attachment: scroll, scroll;
}

.page-roadmap .site-footer {
  border-top-color: rgba(255, 255, 255, 0.26);
}

.page-roadmap .site-footer__love,
.page-roadmap .site-footer__love-text,
.page-roadmap .site-footer__social a {
  color: rgba(245, 235, 255, 0.84);
}

.page-roadmap .site-footer__love:hover .site-footer__love-text,
.page-roadmap .site-footer__social a:hover {
  color: #fffdfd;
}

.page-roadmap .site-footer__legal {
  color: rgba(218, 200, 255, 0.68);
}

.about-team-lede {
  margin: clamp(14px, 2.8vw, 22px) auto clamp(26px, 4.5vw, 40px);
  max-width: 36rem;
  text-align: center;
  font-size: clamp(0.94rem, 2.15vw, 1.08rem);
  font-weight: 600;
  line-height: 1.55;
  color: rgba(60, 40, 105, 0.78);
}

.header-nav-pill.premium-nav-bar .premium-nav-links a[aria-current="page"] {
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-line: underline;
  text-decoration-color: rgba(255, 120, 180, 0.55);
}

.line-divider {
  display: block;
  width: 100vw;
  max-width: 100vw;
  height: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -44px;
  margin-bottom: clamp(4px, 0.9vw, 12px);
  position: relative;
  z-index: 3;
  pointer-events: none;
  transform: scaleY(1.18);
  transform-origin: top center;
}

.site-header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 120;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(12px, 1.6vw, 20px);
  min-height: 0;
  padding: clamp(14px, 1.8vw, 24px) 18px 0;
  border: none;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  transition:
    background 0.5s ease-out,
    backdrop-filter 0.5s ease-out,
    -webkit-backdrop-filter 0.5s ease-out,
    box-shadow 0.5s ease-out;
}

.hero-header-wrap > .site-header {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: center;
  width: 100%;
  margin-top: 0;
}

/* —— Premium pastel fantasy nav (glass pill) —— */
.header-nav-pill.premium-nav-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: min(1400px, 100%);
  min-height: 42px;
  max-width: 100%;
  padding: 0 clamp(16px, 2.4vw, 42px);
  border-radius: 0;
  isolation: isolate;
  overflow: visible;
  border: 0 solid transparent;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  transition:
    background 0.5s ease-out,
    backdrop-filter 0.5s ease-out,
    -webkit-backdrop-filter 0.5s ease-out,
    box-shadow 0.5s ease-out,
    border-radius 0.5s ease-out,
    padding 0.5s ease-out,
    border-width 0.5s ease-out,
    border-color 0.5s ease-out;
}

.header-nav-pill.premium-nav-bar::before {
  display: none;
}

.header-nav-pill.premium-nav-bar::after {
  display: none;
}

.premium-nav-sparkles {
  display: none;
}

.premium-nav-sparkles i {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 0;
  background-color: transparent;
  background-image: var(--platy-star-img);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  box-shadow: none;
  filter: drop-shadow(0 0 8px rgba(255, 200, 100, 0.85));
  animation: premiumNavSparkle 2.8s ease-in-out infinite;
}

.premium-nav-sparkles i:nth-child(1) { left: 4%; top: 0; animation-delay: 0s; }
.premium-nav-sparkles i:nth-child(2) { left: 14%; bottom: -4px; animation-delay: 0.4s; }
.premium-nav-sparkles i:nth-child(3) { left: 42%; top: -6px; animation-delay: 0.2s; transform: scale(0.75); }
.premium-nav-sparkles i:nth-child(4) { right: 38%; bottom: -2px; animation-delay: 0.7s; }
.premium-nav-sparkles i:nth-child(5) { right: 12%; top: -4px; animation-delay: 0.15s; }
.premium-nav-sparkles i:nth-child(6) { right: 2%; bottom: 0; animation-delay: 0.55s; }
.premium-nav-sparkles i:nth-child(7) { left: 28%; top: 8px; width: 10px; height: 10px; animation-delay: 0.9s; opacity: 0.85; }
.premium-nav-sparkles i:nth-child(8) { right: 22%; top: 4px; width: 12px; height: 12px; animation-delay: 0.35s; }

@keyframes premiumNavSparkle {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

.premium-nav-badge {
  position: absolute;
  left: max(clamp(10px, 1.8vw, 22px), env(safe-area-inset-left, 0px));
  top: 0;
  bottom: 0;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 0;
  border-radius: 50%;
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
}

.premium-nav-badge:hover {
  transform: scale(1.06) rotate(-4deg);
  filter: brightness(1.08);
}

.premium-nav-badge:focus-visible {
  outline: 2px solid rgba(255, 180, 230, 0.95);
  outline-offset: 3px;
}

.premium-nav-badge-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from 140deg, #ffd6f8, #ddc8f7, #e8d4ff, #ffd6f8);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.75),
    0 0 14px rgba(255, 150, 210, 0.55),
    inset 0 2px 2px rgba(255, 255, 255, 0.85);
}

.premium-nav-badge-core {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 78%;
  height: 78%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95), transparent 42%),
    linear-gradient(165deg, #fff5ff, #e8d8ff 45%, #e2d4f8);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.95),
    inset 0 -4px 8px rgba(120, 80, 160, 0.12);
}

.premium-nav-badge-star {
  display: block;
  width: clamp(17px, 1.2vw, 22px);
  height: clamp(17px, 1.2vw, 22px);
  margin: 0;
  padding: 0;
  border: 0;
  object-fit: contain;
  pointer-events: none;
  filter:
    drop-shadow(0 1px 1px rgba(180, 120, 30, 0.35))
    drop-shadow(0 0 10px rgba(255, 220, 120, 0.75));
}

.header-nav-pill.premium-nav-bar .premium-nav-links {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: clamp(22px, 3vw, 48px);
  margin: 0;
  /* Reserve space for absolute home badge (left) + social icons (right) */
  padding: 0 clamp(110px, 16vw, 180px) 0
    calc(env(safe-area-inset-left, 0px) + clamp(54px, 7vw, 70px));
  color: #fff;
  font-size: clamp(0.78rem, 0.95vw, 1rem);
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow:
    0 2px 0 rgba(72, 52, 150, 0.38),
    0 0 16px rgba(255, 255, 255, 0.42),
    0 10px 28px rgba(47, 32, 112, 0.2);
  scrollbar-width: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  transition: color 0.5s ease-out, text-shadow 0.5s ease-out;
}

.header-nav-pill.premium-nav-bar .premium-nav-links::-webkit-scrollbar {
  display: none;
}

.header-nav-pill.premium-nav-bar .premium-nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 4px 0;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  transition:
    color 0.5s ease-out,
    transform 0.2s ease,
    text-shadow 0.5s ease-out;
}

.header-nav-pill.premium-nav-bar .premium-nav-links a::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 1px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #fff, #ffb7e7, transparent);
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0.96;
  transition:
    transform 0.3s ease,
    background 0.5s ease-out,
    box-shadow 0.5s ease-out;
  box-shadow: 0 0 14px rgba(255, 180, 231, 0.8);
}

.header-nav-pill.premium-nav-bar .premium-nav-links a:hover,
.header-nav-pill.premium-nav-bar .premium-nav-links a:focus-visible {
  color: #fff8fd;
  text-shadow:
    0 2px 0 rgba(72, 52, 150, 0.3),
    0 0 22px rgba(255, 255, 255, 0.9),
    0 0 34px rgba(255, 143, 215, 0.58);
  transform: translateY(-1px);
}

.header-nav-pill.premium-nav-bar .premium-nav-links a:hover::after,
.header-nav-pill.premium-nav-bar .premium-nav-links a:focus-visible::after {
  transform: scaleX(1);
}

.header-social-links {
  position: absolute;
  top: 0;
  right: clamp(10px, 1.8vw, 26px);
  bottom: 0;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 22px);
  margin-left: 0;
  padding-right: 0;
}

.header-social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #fff;
  transition: color 0.5s ease-out, transform 0.2s ease;
}

.header-social-links a:hover,
.header-social-links a:focus-visible {
  transform: translateY(-1px);
}

.header-social-links svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* Past hero: barra más sólida al scroll (sin blur “vidrio” para evitar el efecto cristal) */
.site-header--scrolled {
  padding-bottom: clamp(10px, 1.2vw, 16px);
  background: rgba(248, 244, 255, 0.94);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 12px 36px rgba(56, 38, 108, 0.07);
}

.site-header--scrolled .header-nav-pill.premium-nav-bar {
  padding: 0;
  border-radius: 0;
  border-width: 0;
  border-color: transparent;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

.site-header--scrolled .header-nav-pill.premium-nav-bar .premium-nav-links {
  color: #141414;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.82),
    0 0 1px rgba(255, 255, 255, 0.45);
}

.site-header--scrolled .header-nav-pill.premium-nav-bar .premium-nav-links a:hover,
.site-header--scrolled .header-nav-pill.premium-nav-bar .premium-nav-links a:focus-visible {
  color: #0d0d0d;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 20px rgba(255, 170, 210, 0.38);
}

.site-header--scrolled .header-nav-pill.premium-nav-bar .premium-nav-links a::after {
  background: linear-gradient(90deg, transparent, #ff8bc4, #6bcfff, transparent);
  box-shadow: 0 0 12px rgba(255, 110, 185, 0.55);
}

.site-header--scrolled .header-social-links a {
  color: #161616;
}

.nav-new-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.52rem;
  font-weight: 1000;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  vertical-align: middle;
  color: #fff;
  background: linear-gradient(180deg, #ffa8e8, #ff4db2 55%, #e8309a);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 2px 0 rgba(180, 40, 120, 0.35),
    0 4px 14px rgba(255, 80, 170, 0.55);
  text-shadow: 0 1px 0 rgba(120, 20, 70, 0.35);
}

.nav-link-roadmap .nav-new-badge {
  text-shadow: 0 1px 0 rgba(120, 20, 70, 0.35);
}

.primary-action,
.ghost-action,
.trait-controls button {
  border: 0;
  cursor: pointer;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-width: max-content;
}

.brand-logo-img {
  display: block;
  width: clamp(132px, 14vw, 196px);
  height: 70px;
  object-fit: contain;
  object-position: left center;
}

.brand.small .brand-logo-img {
  width: 132px;
  height: 58px;
}

.primary-action {
  display: inline-grid;
  place-items: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-weight: 1000;
  text-transform: uppercase;
  transition: transform 180ms ease, filter 180ms ease;
  color: #111;
  background: linear-gradient(180deg, #fff2a8 0%, #ffd86b 52%, #ffbe58 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.72),
    0 5px 0 #d39d3d,
    0 14px 26px rgba(212, 164, 72, 0.28);
}

.primary-action:hover,
.ghost-action:hover,
.trait-controls button:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.hero-section {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  width: 100%;
  margin: 0;
  max-width: none;
  min-height: max(820px, 100vh);
  min-height: max(820px, 100svh);
  display: grid;
  grid-template-columns: minmax(280px, 0.54fr) minmax(360px, 0.46fr);
  align-items: end;
  gap: 20px;
  padding: clamp(108px, 12vw, 152px) clamp(20px, 5vw, 72px) clamp(52px, 6vw, 90px);
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;
  --mx: 0;
  --my: 0;
  background-color: #d9c4ed;
  background-image:
    linear-gradient(90deg, rgba(45, 30, 90, 0.14) 0%, rgba(70, 38, 110, 0.09) 38%, rgba(255, 162, 210, 0.05) 100%),
    linear-gradient(180deg, rgba(72, 44, 120, 0.05), rgba(255, 124, 194, 0.07));
  background-position: 0 0, 0 0;
  background-size: auto, auto;
  background-repeat: no-repeat;
  box-shadow: none;
}

.hero-bg-video {
  position: absolute;
  left: 0;
  right: 0;
  /* Ligero bleed en todos los bordes: evita línea/techo en móvil y subpíxeles */
  top: -6px;
  left: -2px;
  right: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 16px);
  z-index: 0;
  border: 0;
  object-fit: cover;
  /* No usar calc(100% + Npx): en varios tamaños/aspect-ratio deja franja superior del fondo del hero visible */
  object-position: center bottom;
  pointer-events: none;
}

/*
 * Encuadre hero en TV / escritorio grande: usar SOLO breakpoints por ancho.
 * Muchas TVs y WebViews viejas ignoran o fallan con `aspect-ratio` en @media,
 * así que antes ninguna capa llegaba a aplicarse y todo quedaba en `center bottom`.
 * Lo último: ultrapanorámicos reales (~≥2∶1), vuelve al foco inferior.
 */
@media (min-width: 1121px) {
  .hero-bg-video {
    object-position: 50% 28%;
  }
}

@media (min-width: 1160px) and (max-width: 1580px) {
  .hero-bg-video {
    object-position: 50% 3%;
  }
}

@media (min-width: 1760px) and (max-width: 2260px) {
  .hero-bg-video {
    object-position: 50% 5%;
  }
}

@media (min-width: 2280px) {
  .hero-bg-video {
    object-position: 50% 4%;
  }
}

@media (min-width: 1121px) and (min-aspect-ratio: 2 / 1) {
  .hero-bg-video {
    object-position: center bottom;
  }
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 30%, rgba(255, 255, 255, 0.08), transparent 16rem),
    linear-gradient(180deg, rgba(15, 17, 88, 0.04) 0%, rgba(255, 128, 196, 0.04) 100%);
  transform: translate3d(calc(var(--mx, 0) * 10px), 0, 0);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.machine-section::before,
.story-section::before {
  content: "";
  position: absolute;
  inset: auto -8% -1px;
  height: 34%;
  background:
    radial-gradient(ellipse at 18% 95%, #55d26e 0 22%, transparent 23%),
    radial-gradient(ellipse at 52% 90%, #8be46b 0 28%, transparent 29%),
    radial-gradient(ellipse at 84% 93%, #53d884 0 22%, transparent 23%);
  filter: saturate(1.2);
}

.sky-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transform: translate3d(calc(var(--mx, 0) * -14px), 0, 0);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.sky-particles span,
.cloud {
  position: absolute;
  pointer-events: none;
}

.machine-hero-stars span,
.hero-world-stars span,
.hero-s1-deco-stars span {
  position: absolute;
  pointer-events: none;
}

.sky-particles span,
.machine-hero-stars span,
.hero-world-stars span,
.hero-s1-deco-stars span {
  width: 18px;
  height: 18px;
  clip-path: none;
  border-radius: 0;
  background-color: transparent;
  background-image: var(--platy-star-img);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 0 10px rgba(255, 239, 120, 0.9));
  animation: twinkle 2.6s ease-in-out infinite alternate;
}

.sky-particles span:nth-child(1) { left: 22%; top: 18%; }
.sky-particles span:nth-child(2) { left: 46%; top: 10%; animation-delay: .3s; }
.sky-particles span:nth-child(3) { right: 18%; top: 22%; animation-delay: .6s; }
.sky-particles span:nth-child(4) { left: 12%; top: 58%; animation-delay: .9s; }
.sky-particles span:nth-child(5) { right: 7%; top: 58%; animation-delay: 1.2s; }

/* Más estrellas decorativas en la zona baja del hero */
.sky-particles span:nth-child(6) { left: 6%; top: 62%; width: 14px; height: 14px; animation-delay: 0.18s; }
.sky-particles span:nth-child(7) { left: 26%; top: 71%; width: 20px; height: 20px; animation-delay: 0.42s; }
.sky-particles span:nth-child(8) { left: 48%; top: 66%; width: 15px; height: 15px; animation-delay: 0.78s; }
.sky-particles span:nth-child(9) { right: 34%; top: 69%; width: 17px; height: 17px; animation-delay: 0.62s; }
.sky-particles span:nth-child(10) { right: 9%; top: 73%; width: 13px; height: 13px; animation-delay: 1.08s; }
.sky-particles span:nth-child(11) { left: 14%; top: 84%; width: 22px; height: 22px; animation-delay: 0.28s; }
.sky-particles span:nth-child(12) { left: 54%; top: 88%; width: 16px; height: 16px; animation-delay: 0.94s; }
.sky-particles span:nth-child(13) { right: 11%; top: 91%; width: 19px; height: 19px; animation-delay: 1.32s; }

.machine-hero-stars {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}

.machine-hero-stars span:nth-child(1) { left: 3%; top: 14%; width: 16px; height: 16px; animation-delay: 0.12s; }
.machine-hero-stars span:nth-child(2) { left: 10%; top: 42%; width: 13px; height: 13px; animation-delay: 0.55s; }
.machine-hero-stars span:nth-child(3) { left: 5%; bottom: 18%; width: 20px; height: 20px; animation-delay: 0.88s; }
.machine-hero-stars span:nth-child(4) { left: 18%; bottom: 6%; width: 14px; height: 14px; animation-delay: 1.05s; }
.machine-hero-stars span:nth-child(5) { right: 6%; top: 20%; width: 18px; height: 18px; animation-delay: 0.22s; }
.machine-hero-stars span:nth-child(6) { right: 2%; top: 48%; width: 15px; height: 15px; animation-delay: 0.66s; }
.machine-hero-stars span:nth-child(7) { right: 8%; bottom: 22%; width: 22px; height: 22px; animation-delay: 0.94s; }
.machine-hero-stars span:nth-child(8) { right: 22%; bottom: 8%; width: 13px; height: 13px; animation-delay: 1.18s; }
.machine-hero-stars span:nth-child(9) { left: 38%; top: 8%; width: 17px; height: 17px; animation-delay: 0.33s; }
.machine-hero-stars span:nth-child(10) { right: 38%; top: 10%; width: 14px; height: 14px; animation-delay: 0.77s; }
.machine-hero-stars span:nth-child(11) { left: 44%; bottom: 4%; width: 19px; height: 19px; animation-delay: 1.12s; }
.machine-hero-stars span:nth-child(12) { left: 28%; bottom: 14%; width: 12px; height: 12px; animation-delay: 0.41s; }
.machine-hero-stars span:nth-child(13) { right: 30%; bottom: 12%; width: 16px; height: 16px; animation-delay: 0.82s; }
.machine-hero-stars span:nth-child(14) { left: 49%; top: 28%; width: 15px; height: 15px; animation-delay: 0.25s; }
.machine-hero-stars span:nth-child(15) { left: 32%; top: 56%; width: 13px; height: 13px; animation-delay: 1.28s; }
.machine-hero-stars span:nth-child(16) { right: 14%; bottom: 38%; width: 17px; height: 17px; animation-delay: 0.48s; }

.hero-world-stars {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}

.hero-world-stars span:nth-child(1) { left: 4%; top: 10%; width: 16px; height: 16px; animation-delay: 0.2s; }
.hero-world-stars span:nth-child(2) { left: 22%; top: 4%; width: 13px; height: 13px; animation-delay: 0.6s; }
.hero-world-stars span:nth-child(3) { right: 18%; top: 8%; width: 18px; height: 18px; animation-delay: 0.35s; }
.hero-world-stars span:nth-child(4) { right: 4%; top: 22%; width: 14px; height: 14px; animation-delay: 0.9s; }
.hero-world-stars span:nth-child(5) { left: 12%; bottom: 28%; width: 20px; height: 20px; animation-delay: 0.72s; }
.hero-world-stars span:nth-child(6) { left: 38%; bottom: 8%; width: 15px; height: 15px; animation-delay: 1.1s; }
.hero-world-stars span:nth-child(7) { right: 28%; bottom: 14%; width: 17px; height: 17px; animation-delay: 0.18s; }
.hero-world-stars span:nth-child(8) { right: 10%; bottom: 6%; width: 13px; height: 13px; animation-delay: 0.85s; }
.hero-world-stars span:nth-child(9) { left: 52%; top: 18%; width: 14px; height: 14px; animation-delay: 0.42s; }
.hero-world-stars span:nth-child(10) { right: 44%; bottom: 22%; width: 12px; height: 12px; animation-delay: 1.22s; }
.hero-world-stars span:nth-child(11) { left: 62%; bottom: 36%; width: 16px; height: 16px; animation-delay: 0.58s; }
.hero-world-stars span:nth-child(12) { right: 52%; top: 36%; width: 15px; height: 15px; animation-delay: 0.95s; }

.hero-s1-deco-stars {
  position: absolute;
  inset: -10% -8% -8% -8%;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

.hero-s1-deco-stars span:nth-child(1) { left: -2%; top: 18%; width: 14px; height: 14px; animation-delay: 0.15s; }
.hero-s1-deco-stars span:nth-child(2) { left: 12%; bottom: -2%; width: 18px; height: 18px; animation-delay: 0.62s; }
.hero-s1-deco-stars span:nth-child(3) { right: 8%; top: -4%; width: 15px; height: 15px; animation-delay: 0.38s; }
.hero-s1-deco-stars span:nth-child(4) { right: -3%; bottom: 32%; width: 13px; height: 13px; animation-delay: 1.02s; }
.hero-s1-deco-stars span:nth-child(5) { left: 38%; top: -6%; width: 16px; height: 16px; animation-delay: 0.28s; }
.hero-s1-deco-stars span:nth-child(6) { right: 38%; bottom: -4%; width: 17px; height: 17px; animation-delay: 0.75s; }
.hero-s1-deco-stars span:nth-child(7) { left: 52%; bottom: 8%; width: 12px; height: 12px; animation-delay: 1.14s; }
.hero-s1-deco-stars span:nth-child(8) { right: -1%; top: 42%; width: 14px; height: 14px; animation-delay: 0.5s; }

.hero-copy {
  position: relative;
  z-index: 6;
  width: 100%;
  min-width: 0;
  max-width: min(900px, 98vw);
  align-self: start;
  margin-top: 0;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translate3d(calc(var(--mx, 0) * -12px), calc(var(--my, 0) * -5px), 0);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes heroFadeUp {
    from {
      opacity: 0;
      transform: translate3d(0, 18px, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  .hero-section.hero-motion-ready .hero-copy h1 {
    animation: heroFadeUp 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
  }

  .hero-section.hero-motion-ready .hero-copy > p {
    animation: heroFadeUp 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
  }

  .hero-section.hero-motion-ready .hero-copy .hero-actions {
    animation: heroFadeUp 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.36s both;
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 18px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 1000;
  text-transform: uppercase;
  background: rgba(255, 144, 202, 0.46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.hero-logo-title {
  margin: 0 0 18px;
  line-height: 1;
}

.hero-logo {
  display: block;
  width: min(100%, clamp(440px, 65vw, 1020px));
  height: auto;
  margin-top: clamp(-110px, -9vw, -52px);
  margin-left: clamp(-40px, -2vw, -10px);
  filter: drop-shadow(0 12px 28px rgba(34, 22, 72, 0.45));
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease;
  transform: translate3d(calc(var(--mx, 0) * -8px), 0, 0);
}

.hero-logo:hover {
  transform: translate3d(calc(var(--mx, 0) * -8px), 0, 0) scale(1.035);
  filter: drop-shadow(0 16px 36px rgba(34, 22, 72, 0.55));
}

@media (min-width: 1200px) {
  .hero-logo {
    width: min(100%, clamp(480px, 58vw, 1120px));
  }
}

@media (min-width: 1600px) {
  .hero-logo {
    width: min(100%, clamp(520px, 52vw, 1280px));
  }
}

@media (min-width: 2400px) {
  .hero-logo {
    width: min(100%, clamp(600px, 56vw, 1520px));
  }
}

.hero-copy p,
.story-copy p {
  width: min(100%, 520px);
  max-width: 100%;
  margin: 0 0 28px;
  color: #fff;
  font-size: clamp(1.05rem, 1.95vw, 1.35rem);
  line-height: 1.45;
  text-shadow: 0 2px 12px rgba(46, 26, 94, 0.36);
}

.hero-copy p {
  max-width: min(440px, 100%);
  font-weight: 800;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.hero-actions .primary-action {
  position: relative;
  color: #fff;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.22),
    0 2px 10px rgba(100, 55, 10, 0.35);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(190, 120, 30, 0.25),
    0 6px 0 #c9922e,
    0 7px 0 rgba(120, 75, 12, 0.22),
    0 18px 32px rgba(190, 130, 40, 0.35);
  transition:
    transform 0.2s ease,
    filter 0.2s ease,
    box-shadow 0.25s ease;
}

.hero-actions .primary-action:hover {
  filter: brightness(1.07);
  transform: translateY(-3px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.88),
    inset 0 -1px 0 rgba(190, 120, 30, 0.18),
    0 8px 0 #b88426,
    0 10px 0 rgba(100, 62, 8, 0.2),
    0 24px 40px rgba(190, 130, 40, 0.42);
}

.hero-actions .primary-action:active {
  transform: translateY(3px);
  filter: brightness(0.99);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 3px 8px rgba(110, 70, 15, 0.2),
    0 2px 0 #c9922e,
    0 10px 20px rgba(160, 105, 28, 0.28);
}

.hero-opensea {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px 0 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 1000;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
  background: linear-gradient(180deg, #c4a4ff 0%, #9469f0 42%, #7a4dde 100%);
  border: 0;
  cursor: pointer;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(42, 18, 98, 0.38),
    0 6px 0 #4f34a3,
    0 7px 0 rgba(28, 12, 72, 0.38),
    0 18px 34px rgba(76, 42, 168, 0.48);
  transition:
    transform 0.2s ease,
    filter 0.2s ease,
    box-shadow 0.25s ease;
}

.hero-opensea__icon {
  display: flex;
  flex-shrink: 0;
}

.hero-opensea__mark {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  filter: brightness(0) invert(1);
}

.hero-opensea__text {
  padding-right: 2px;
}

.hero-opensea:hover {
  filter: brightness(1.08);
  transform: translateY(-3px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(42, 18, 98, 0.32),
    0 8px 0 #432988,
    0 10px 0 rgba(22, 8, 58, 0.34),
    0 24px 42px rgba(88, 48, 190, 0.52);
}

.hero-opensea:active {
  transform: translateY(3px);
  filter: brightness(0.98);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 3px 8px rgba(32, 14, 78, 0.38),
    0 2px 0 #4f34a3,
    0 10px 22px rgba(56, 32, 130, 0.38);
}

.hero-opensea:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.ghost-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  color: #6849b8;
  font-weight: 1000;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 #fff, 0 14px 24px rgba(67, 49, 137, 0.18);
  transition: transform 180ms ease;
}

.full {
  width: 100%;
}

.play-dot {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid var(--purple);
}

/*
  Pantalla del vídeo dentro de season.png: caja con proporción fija + contain = nunca se estira.
  Ajusta --s1-screen-* (hueco sobre season.png) y, si hace falta, aspect-ratio (9/16 móvil, 16/9 si yap es horizontal).
*/
.hero-season-stack {
  position: absolute;
  top: 598px;
  right: 14px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  max-width: min(332px, 47vw);
  width: max-content;
  pointer-events: none;
  transform: translate3d(calc(var(--mx, 0) * 16px), 0, 0);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Contiene la deco del TV + el hit del audio; así al cerrar la deco el botón puede seguir encima del hueco */
.hero-tv-mount {
  --tv-mount-w: min(332px, 47vw);
  position: relative;
  display: inline-block;
  vertical-align: top;
  align-self: center;
  width: var(--tv-mount-w);
  max-width: 100%;
  line-height: 0;
  pointer-events: none;
}

.hero-tv-mount:has(.hero-s1.hero-s1--dismissed) {
  min-height: clamp(52px, 14vw, 72px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(6px, 2vw, 10px);
}

.hero-s1 {
  --s1-screen-top: 33%;
  --s1-screen-w: 55%;
  --s1-screen-max-h: 43%;
  --s1-screen-x-nudge: -12px;
  --s1-screen-radius: clamp(10px, 4%, 18px);
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: 100%;
  max-width: 100%;
  pointer-events: none;
  line-height: 0;
}

.hero-s1--dismissed {
  display: none;
}

.hero-s1__close {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 6;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  color: #fff;
  background: rgba(28, 24, 45, 0.58);
  box-shadow: 0 2px 10px rgba(15, 10, 35, 0.35);
  opacity: 0;
  transition: background 0.2s ease, transform 0.15s ease, opacity 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {
  .hero-s1:hover .hero-s1__close {
    opacity: 1;
  }
}

@media (hover: none), (pointer: coarse) {
  .hero-s1__close {
    opacity: 0.4;
  }
}

.hero-s1__close:hover {
  background: rgba(28, 24, 45, 0.82);
}

.hero-s1__close:active {
  transform: scale(0.94);
}

.hero-s1__close:focus-visible {
  opacity: 1;
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

.hero-s1__close-icon {
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  margin-top: -1px;
}

.hero-s1__screen {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: var(--s1-screen-top);
  transform: translateX(calc(-50% + var(--s1-screen-x-nudge)));
  width: var(--s1-screen-w);
  max-height: var(--s1-screen-max-h);
  aspect-ratio: 9 / 16;
  border-radius: var(--s1-screen-radius);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  isolation: isolate;
}

/* Contenedor extra: recorte redondo fiable para <video> (WebKit a menudo ignora radius solo en el video). */
.hero-s1__vid-clip {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.hero-s1__vid-cross {
  position: absolute;
  inset: 0;
}

.hero-s1__vid-cross .hero-s1__video {
  transition: opacity 1s ease-in-out;
}

.hero-s1__vid-cross .hero-s1__video.is-back {
  opacity: 0;
  z-index: 0;
}

.hero-s1__vid-cross .hero-s1__video.is-front {
  opacity: 1;
  z-index: 1;
}

.hero-s1__video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
  object-position: center;
  background: transparent;
  border-radius: 0;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.hero-s1__img {
  position: relative;
  z-index: 2;
  display: block;
  width: auto;
  max-width: min(332px, 47vw);
  height: auto;
  user-select: none;
}

.hero-world {
  display: none;
  position: relative;
}

.island {
  position: absolute;
  right: -10px;
  bottom: 78px;
  width: min(900px, 100%);
  height: 300px;
  border-radius: 54% 46% 36% 58% / 55% 58% 36% 42%;
  background:
    radial-gradient(circle at 22% 22%, rgba(255, 255, 255, 0.8), transparent 4rem),
    linear-gradient(180deg, #75e07a, #3eba61 76%, #2aa650);
  box-shadow: inset 0 -30px 0 rgba(42, 138, 78, 0.18), 0 38px 80px rgba(34, 35, 94, 0.28);
}

.island::before {
  content: "";
  position: absolute;
  inset: auto 8% -16px 10%;
  height: 55px;
  border-radius: 50%;
  background: rgba(78, 57, 105, 0.2);
  filter: blur(12px);
}

.pal-row {
  position: absolute;
  inset: auto 5% 104px;
  display: flex;
  justify-content: center;
  align-items: end;
  gap: clamp(8px, 1.4vw, 22px);
}

.pal {
  --scale: 1;
  position: relative;
  width: calc(128px * var(--scale));
  height: calc(184px * var(--scale));
  filter: drop-shadow(0 16px 12px rgba(45, 34, 89, 0.18));
  animation: bob 4s ease-in-out infinite;
}

.pal:nth-child(2) { animation-delay: .4s; }
.pal:nth-child(3) { animation-delay: .8s; }
.pal:nth-child(4) { animation-delay: 1.2s; }
.pal:nth-child(5) { animation-delay: 1.6s; }

.pal span {
  position: absolute;
  left: 50%;
  bottom: -42px;
  z-index: 6;
  transform: translateX(-50%);
  min-width: 92px;
  padding: 7px 14px;
  border-radius: 999px;
  color: #fff;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 1000;
  text-shadow: 0 2px 0 rgba(52, 36, 96, 0.4);
  background: rgba(40, 29, 70, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.pal .body {
  position: absolute;
  left: 19%;
  bottom: 18%;
  width: 68%;
  height: 72%;
  border-radius: 50% 50% 45% 45% / 45% 45% 56% 56%;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.22), transparent 18%),
    repeating-linear-gradient(100deg, transparent 0 10px, rgba(0, 0, 0, 0.06) 11px 13px),
    var(--fur);
  border: 3px solid rgba(37, 26, 64, 0.16);
}

.pal .body::before,
.pal .body::after {
  content: "";
  position: absolute;
  bottom: 23%;
  width: 24%;
  height: 30%;
  border-radius: 55% 45% 48% 52%;
  background: color-mix(in srgb, var(--fur), #fff 22%);
  border: 2px solid rgba(37, 26, 64, 0.1);
}

.pal .body::before { left: -9%; transform: rotate(12deg); }
.pal .body::after { right: -8%; transform: rotate(-10deg); }

.pal .tail {
  position: absolute;
  left: 0;
  bottom: 25%;
  width: 42%;
  height: 38%;
  border-radius: 58% 42% 56% 44%;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0 6px, rgba(0, 0, 0, 0.16) 7px 10px),
    var(--tail);
  border: 3px solid rgba(37, 26, 64, 0.18);
  transform: rotate(-12deg);
}

.pal .bill {
  position: absolute;
  left: 28%;
  top: 43%;
  width: 71%;
  height: 25%;
  z-index: 5;
  border-radius: 58% 64% 50% 48%;
  background:
    radial-gradient(circle at 30% 45%, #2a2635 0 3px, transparent 4px),
    radial-gradient(circle at 70% 48%, #2a2635 0 3px, transparent 4px),
    linear-gradient(180deg, color-mix(in srgb, var(--bill), #fff 16%), var(--bill));
  border: 3px solid rgba(38, 31, 54, 0.26);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.08);
}

.pal .eyes {
  position: absolute;
  left: 37%;
  top: 24%;
  z-index: 6;
  width: 47%;
  height: 28%;
  background:
    radial-gradient(circle at 27% 43%, #fff 0 11%, transparent 12%),
    radial-gradient(circle at 29% 50%, var(--eye) 0 29%, #151626 31% 44%, transparent 46%),
    radial-gradient(circle at 72% 43%, #fff 0 11%, transparent 12%),
    radial-gradient(circle at 73% 50%, var(--eye) 0 29%, #151626 31% 44%, transparent 46%);
}

.pal .feet {
  position: absolute;
  left: 28%;
  bottom: 7%;
  width: 62%;
  height: 20%;
  z-index: 4;
  background:
    radial-gradient(ellipse at 18% 65%, #8d8792 0 16%, transparent 17%),
    radial-gradient(ellipse at 36% 66%, #8d8792 0 16%, transparent 17%),
    radial-gradient(ellipse at 58% 66%, #8d8792 0 16%, transparent 17%),
    radial-gradient(ellipse at 82% 65%, #8d8792 0 16%, transparent 17%);
}

.cosmic-body {
  background:
    radial-gradient(circle at 24% 22%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 58% 35%, #7ee6ff 0 2px, transparent 3px),
    radial-gradient(circle at 72% 62%, #ff79ce 0 2px, transparent 3px),
    radial-gradient(circle at 38% 76%, #fff 0 1px, transparent 2px),
    repeating-linear-gradient(100deg, transparent 0 10px, rgba(255, 255, 255, 0.09) 11px 13px),
    var(--fur) !important;
}

.cosmic-tail {
  background:
    radial-gradient(circle at 35% 30%, #7ee6ff 0 3px, transparent 4px),
    radial-gradient(circle at 64% 56%, #ff79ce 0 3px, transparent 4px),
    var(--tail) !important;
}

.mocha,
.aurora {
  --scale: .95;
}

.shadow,
.cosmic {
  --scale: .9;
}

.cobalt {
  --scale: 1.02;
}

.rainbow {
  position: absolute;
  left: -8%;
  bottom: 224px;
  width: 300px;
  height: 170px;
  overflow: hidden;
  transform: rotate(-8deg);
}

.rainbow i {
  position: absolute;
  inset: 0;
  border: 18px solid transparent;
  border-radius: 300px 300px 0 0;
  border-bottom: 0;
}

.rainbow i:nth-child(1) { border-color: #ff6ba6; }
.rainbow i:nth-child(2) { inset: 24px; border-color: #ffb657; }
.rainbow i:nth-child(3) { inset: 48px; border-color: #ffe86b; }
.rainbow i:nth-child(4) { inset: 72px; border-color: #72dbff; }
.rainbow i:nth-child(5) { inset: 96px; border-color: #aa88ff; }

.cloud {
  width: 130px;
  height: 58px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  filter: blur(0.2px);
  box-shadow: 32px -6px 0 8px rgba(255, 255, 255, 0.86), 64px 7px 0 0 rgba(255, 255, 255, 0.86);
  animation: float 7s ease-in-out infinite;
}

.cloud-a { right: 7%; top: 16%; }
.cloud-b { left: 54%; top: 34%; transform: scale(.72); animation-delay: 1s; }

.mini-icon {
  width: 40px;
  height: 40px;
  display: inline-block;
  flex: 0 0 auto;
  filter: drop-shadow(0 6px 6px rgba(97, 57, 144, 0.16));
}

.star-icon {
  background-color: transparent;
  background-image: var(--platy-star-img);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  clip-path: none;
}

.gem-icon {
  background: linear-gradient(135deg, #f6c8ff, #8a6cff);
  clip-path: polygon(50% 0, 90% 30%, 72% 100%, 28% 100%, 10% 30%);
}

.crown-icon {
  background: linear-gradient(#ffe382, #ffae39);
  clip-path: polygon(7% 84%, 93% 84%, 86% 28%, 65% 56%, 50% 14%, 35% 56%, 14% 28%);
}

.wand-icon {
  background: linear-gradient(135deg, #ff8ad2 0 34%, #fff 35% 46%, #8a6cff 47%);
  clip-path: polygon(34% 8%, 92% 66%, 78% 80%, 20% 22%);
}

.machine-section,
.trait-shop,
.story-section {
  position: relative;
  margin-top: 28px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 36px;
  background: rgba(255, 255, 255, 0.43);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.trait-shop,
.story-section {
  overflow: hidden;
}

.machine-section {
  overflow: visible;
  padding: 34px;
  background:
    radial-gradient(circle at 9% 18%, rgba(143, 246, 237, 0.44), transparent 17rem),
    radial-gradient(circle at 86% 78%, rgba(255, 135, 198, 0.45), transparent 18rem),
    rgba(255, 255, 255, 0.4);
}

.section-heading {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 28px;
}

.section-heading h2,
.trait-shop h2,
.story-copy h2,
.shop-preview h2 {
  max-width: 720px;
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 4vw, 4.5rem);
  line-height: 0.96;
  text-transform: uppercase;
  text-shadow: 0 4px 0 #5d4da1, 0 12px 28px rgba(72, 45, 130, 0.2);
  -webkit-text-stroke: 1px rgba(83, 63, 160, 0.2);
}

.section-heading.compact {
  display: block;
}

.section-heading.compact .eyebrow {
  margin-bottom: 12px;
}

.machine-stage {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(210px, 0.74fr) minmax(330px, 1.25fr) minmax(260px, 0.95fr);
  gap: 18px;
  align-items: stretch;
}

.machine-panel,
.reveal-panel,
.trait-lab,
.shop-preview,
.story-copy,
.episode-row article,
.rarity-card {
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 20px 40px rgba(67, 54, 140, 0.14);
}

.machine-panel {
  display: grid;
  align-content: center;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
}

.ticket-card {
  position: relative;
  min-height: 148px;
  padding: 24px;
  border-radius: 24px;
  overflow: hidden;
  color: #5841a8;
  background:
    radial-gradient(circle at 82% 24%, rgba(255, 255, 255, 0.85), transparent 3.6rem),
    linear-gradient(135deg, #fff4a8, #ff9bd2 52%, #b18cff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 12px 28px rgba(122, 70, 168, 0.24);
}

.ticket-card::before,
.ticket-card::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.62);
}

.ticket-card::before { left: -14px; }
.ticket-card::after { right: -14px; }

.ticket-card span,
.ticket-card small {
  display: block;
  color: #fff;
  font-weight: 1000;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(92, 68, 164, 0.28);
}

.ticket-card strong {
  display: block;
  margin: 8px 0;
  font-size: 2.6rem;
  color: #fff;
  text-shadow: 0 4px 0 #7d5ccf;
}

.gachapon {
  position: relative;
  margin-top: clamp(12px, 2.2vw, 28px);
  min-height: 520px;
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.38), transparent 17rem),
    linear-gradient(180deg, rgba(170, 129, 255, 0.22), rgba(255, 114, 186, 0.18));
}

.machine-sign {
  position: absolute;
  left: 50%;
  top: 18px;
  z-index: 7;
  transform: translateX(-50%) rotate(-2deg);
  padding: 10px 22px;
  border: 4px solid #fff;
  border-radius: 18px;
  color: #fff;
  font-size: clamp(1rem, 2vw, 1.6rem);
  font-weight: 1000;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffd95a, #ff71b7);
  text-shadow: 0 3px 0 #51418f;
  box-shadow: 0 8px 0 #5c4aa4, 0 18px 34px rgba(69, 44, 124, 0.22);
}

.dome {
  position: absolute;
  left: 50%;
  top: 66px;
  width: min(390px, 78%);
  height: 330px;
  transform: translateX(-50%);
  overflow: hidden;
  border: 7px solid rgba(255, 255, 255, 0.76);
  border-bottom: 0;
  border-radius: 210px 210px 38px 38px;
  background:
    radial-gradient(circle at 26% 18%, rgba(255, 255, 255, 0.92), transparent 3.6rem),
    linear-gradient(120deg, rgba(255, 255, 255, 0.48), rgba(139, 220, 255, 0.34) 42%, rgba(255, 174, 220, 0.28));
  box-shadow: inset 0 0 34px rgba(255, 255, 255, 0.8), 0 24px 55px rgba(83, 48, 148, 0.24);
}

.dome::before {
  content: "";
  position: absolute;
  inset: 20px auto auto 44px;
  width: 80px;
  height: 210px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.24);
  transform: rotate(28deg);
}

.capsules {
  position: absolute;
  inset: 0;
}

.capsules i,
.grabbed-capsule {
  position: absolute;
  width: 86px;
  height: 68px;
  border: 4px solid rgba(255, 255, 255, 0.64);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.64) 0 47%, transparent 48% 52%, rgba(0, 0, 0, 0.05) 53%),
    linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c), white 35%));
  box-shadow: inset 0 8px 10px rgba(255, 255, 255, 0.36), 0 8px 18px rgba(80, 53, 130, 0.22);
}

.capsules i {
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%) rotate(var(--r, -8deg));
}

.gachapon.shaking .capsules {
  animation: shake 520ms ease-in-out 3;
}

.grabbed-capsule {
  --c: #ff8fc8;
  left: 50%;
  top: 62%;
  z-index: 6;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.75);
}

.gachapon.capsule-caught .grabbed-capsule {
  opacity: 1;
  animation: capsuleDrop 1.4s cubic-bezier(.19,1,.22,1) both;
}

.machine-base {
  position: absolute;
  left: 50%;
  bottom: 38px;
  width: min(470px, 88%);
  height: 168px;
  transform: translateX(-50%);
  border: 5px solid rgba(255, 255, 255, 0.7);
  border-radius: 40px 40px 56px 56px;
  background:
    radial-gradient(circle at 18% 35%, #fff7a3 0 12px, transparent 13px),
    radial-gradient(circle at 82% 35%, #fff7a3 0 12px, transparent 13px),
    linear-gradient(180deg, #ff95d2, #e86ab4 52%, #a763e7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 22px 44px rgba(73, 44, 128, 0.24);
}

.coin-slot {
  position: absolute;
  right: 70px;
  top: 44px;
  width: 46px;
  height: 90px;
  border: 4px solid #5e3c9c;
  border-radius: 999px;
  background: linear-gradient(90deg, #502d85 0 42%, #c98cff 45% 100%);
}

.turn-knob {
  position: absolute;
  left: 50%;
  top: 36px;
  width: 92px;
  height: 92px;
  transform: translateX(-50%);
  border: 6px solid #fff0a8;
  border-radius: 50%;
  background:
    linear-gradient(135deg, transparent 36%, #a36225 37% 50%, transparent 51%),
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.65), transparent 1.5rem),
    linear-gradient(180deg, #ffcf5d, #f39a35);
  box-shadow: 0 7px 0 #ad5f30, inset 0 -8px 0 rgba(135, 73, 41, 0.14);
}

.gachapon.shaking .turn-knob {
  animation: spinKnob 900ms ease-in-out;
}

.gift-door {
  position: absolute;
  left: 50px;
  top: 66px;
  width: 78px;
  height: 70px;
  border-radius: 18px 18px 26px 26px;
  background: linear-gradient(180deg, #6a4ab2, #3e2b77);
  box-shadow: inset 0 8px 0 rgba(255, 255, 255, 0.12);
}

.lever {
  position: absolute;
  right: 14px;
  top: 225px;
  width: 90px;
  height: 210px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.lever::before {
  content: "";
  position: absolute;
  left: 34px;
  top: 60px;
  width: 24px;
  height: 128px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ccd4e6, #fff, #8d9db8);
  box-shadow: 0 8px 18px rgba(74, 47, 130, 0.18);
  transform-origin: bottom;
  transition: transform 260ms ease;
}

.lever span {
  position: absolute;
  left: 13px;
  top: 4px;
  width: 68px;
  height: 68px;
  border: 5px solid rgba(255,255,255,.75);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 22%, #fff8, transparent 1.2rem), linear-gradient(180deg, #ff84c8, #ed4da1);
  box-shadow: 0 9px 0 #bd4e91, 0 18px 26px rgba(75, 49, 129, 0.22);
  transition: transform 260ms ease;
}

.lever.pulled::before {
  transform: rotate(18deg);
}

.lever.pulled span {
  transform: translate(38px, 86px);
}

.reveal-panel {
  position: relative;
  display: grid;
  align-content: center;
  gap: 18px;
  min-height: 520px;
  padding: 24px;
  border-radius: 28px;
  overflow: hidden;
}

.reveal-glow {
  position: absolute;
  inset: 24px;
  border-radius: 26px;
  background:
    conic-gradient(from 0deg, #fff0 0 5%, rgba(255, 255, 255, 0.7) 6% 8%, #fff0 9% 14%),
    radial-gradient(circle, rgba(255, 240, 132, 0.72), rgba(255, 141, 211, 0.22) 48%, transparent 70%);
  animation: rotateGlow 10s linear infinite;
}

.reveal-kicker {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #7a55ce;
  text-align: center;
  font-weight: 1000;
  text-transform: uppercase;
}

.mystery-card {
  position: relative;
  z-index: 2;
  min-height: 330px;
  display: grid;
  place-items: center;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.reveal-pal {
  --scale: .96;
}

.mystery-card:not(.revealed) .reveal-pal {
  filter: brightness(0) saturate(0) opacity(0.52) drop-shadow(0 16px 12px rgba(45, 34, 89, 0.18));
}

.mystery-card strong {
  margin-top: -8px;
  color: #fff;
  font-size: 1.7rem;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 3px 0 #6b55b7;
}

.mystery-card > span {
  margin-top: -4px;
  padding: 8px 18px;
  border-radius: 999px;
  color: #fff;
  font-weight: 1000;
  text-transform: uppercase;
  background: linear-gradient(180deg, #8fe7ff, #6a72ff);
}

.mystery-card.revealed {
  animation: revealPop 700ms cubic-bezier(.19,1,.22,1);
}

.machine-section {
  isolation: isolate;
  padding: clamp(26px, 3.1vw, 42px) clamp(26px, 3.1vw, 42px) 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  /* Heredaba blur del grupo de máquina/shop; con fondo transparente se veía “vidrio” raro */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /* Deja que el carrusel de Stories haga bleed horizontal casi hasta el borde de la ventana */
  overflow-x: visible;
  overflow-y: visible;
}

.machine-section::before {
  display: none;
}

.machine-section::after {
  display: none;
}

.machine-section .section-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.machine-pal-splash,
.machine-shop-splash {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto clamp(10px, 2vw, 22px);
  object-fit: contain;
  pointer-events: none;
  filter: none;
}

.machine-sparkles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.machine-sparkles i,
.machine-stars i,
.pass-pill span,
.reveal-kicker span {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 0;
  clip-path: none;
  background-color: transparent;
  background-image: var(--platy-star-img);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 0 9px rgba(255, 238, 139, 0.95));
}

.machine-sparkles i:nth-child(1) { left: 3%; top: 7%; transform: scale(.55); }
.machine-sparkles i:nth-child(2) { left: 24%; top: 12%; transform: scale(.34); }
.machine-sparkles i:nth-child(3) { left: 62%; top: 5%; transform: scale(.44); }
.machine-sparkles i:nth-child(4) { left: 92%; top: 9%; transform: scale(.38); }
.machine-sparkles i:nth-child(5) { left: 29%; top: 84%; transform: scale(.5); }
.machine-sparkles i:nth-child(6) { left: 71%; top: 86%; transform: scale(.42); }

.machine-stage {
  grid-template-columns: minmax(250px, 0.82fr) minmax(460px, 1.24fr) minmax(300px, 0.9fr);
  gap: clamp(18px, 2vw, 28px);
  min-height: 630px;
  align-items: stretch;
}

.machine-panel,
.reveal-panel,
.gachapon {
  border: 3px solid rgba(255, 255, 255, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 238, 255, 0.65), rgba(255, 255, 255, 0.34)),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.58), transparent 18rem);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
  backdrop-filter: blur(24px) saturate(1.35);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.94),
    inset 0 -18px 36px rgba(126, 77, 204, 0.08),
    0 30px 62px rgba(73, 44, 139, 0.22),
    0 0 30px rgba(255, 190, 241, 0.35);
}

.machine-panel {
  position: relative;
  min-height: 620px;
  align-content: start;
  gap: 20px;
  padding: clamp(22px, 2.1vw, 30px);
  padding-bottom: 156px;
  border-radius: 32px;
  overflow: hidden;
}

.pass-pill {
  justify-self: center;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 176px;
  min-height: 50px;
  padding: 10px 24px;
  color: #7743cf;
  font-weight: 1000;
  text-transform: uppercase;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 206, 245, 0.74));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.9),
    0 7px 0 rgba(188, 94, 183, 0.2),
    0 14px 28px rgba(131, 77, 170, 0.18);
}

.pass-pill span {
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

.ticket-card {
  min-height: 178px;
  padding: 28px 132px 26px 28px;
  border: 3px solid rgba(255, 255, 255, 0.82);
  border-radius: 28px;
  background:
    radial-gradient(circle at 78% 36%, rgba(255, 255, 255, 0.72), transparent 5.4rem),
    linear-gradient(135deg, #ffb8dd 0%, #fb72c8 45%, #8d5cf7 100%);
}

.ticket-card strong {
  margin: 12px 0 8px;
  font-size: clamp(2.65rem, 4vw, 4rem);
  letter-spacing: 0;
  text-shadow:
    0 4px 0 #8b4dd2,
    0 0 16px rgba(255, 255, 255, 0.58);
}

.ticket-card small {
  display: flex;
  align-items: center;
  gap: 9px;
}

.ticket-card small i {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #88f47f;
  box-shadow: 0 0 12px rgba(113, 255, 126, 0.82);
}

.ticket-gem {
  position: absolute;
  right: 30px;
  top: 50%;
  width: 78px;
  height: 118px;
  transform: translateY(-48%);
  background:
    linear-gradient(150deg, rgba(255,255,255,.75), transparent 31%),
    linear-gradient(45deg, #7ddcff 0 35%, #8d54ff 36% 70%, #ffd7ff 71%);
  clip-path: polygon(50% 0, 88% 27%, 72% 100%, 50% 80%, 28% 100%, 12% 27%);
  filter: drop-shadow(0 12px 13px rgba(79, 57, 158, 0.28));
}

.machine-helper {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  align-items: end;
  gap: 14px;
}

.helper-pal {
  --scale: .72;
  align-self: end;
}

.machine-helper p {
  position: relative;
  margin: 0 0 52px;
  padding: 16px 18px;
  color: #7d4dd3;
  font-weight: 900;
  line-height: 1.35;
  border: 2px solid rgba(255, 255, 255, 0.76);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 14px 24px rgba(111, 76, 156, 0.16), inset 0 1px 0 #fff;
}

.machine-helper p::before {
  content: "";
  position: absolute;
  left: -15px;
  bottom: 22px;
  width: 28px;
  height: 24px;
  background: inherit;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.gachapon {
  min-height: 620px;
  margin-top: 0;
  border-radius: 34px;
  overflow: visible;
}

.machine-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
}

.machine-stars i:nth-child(1) { left: 7%; top: 10%; transform: scale(1.25) rotate(-8deg); }
.machine-stars i:nth-child(2) { right: 8%; top: 18%; transform: scale(.85) rotate(12deg); }
.machine-stars i:nth-child(3) { left: 13%; bottom: 20%; transform: scale(.55); }
.machine-stars i:nth-child(4) { right: 17%; bottom: 16%; transform: scale(.45); }

.machine-sign {
  top: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 30px;
  border-width: 5px;
  border-radius: 24px;
  font-size: clamp(1.45rem, 2.2vw, 2.25rem);
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 255, 255, 0.9), transparent 2.8rem),
    linear-gradient(180deg, #ff8ed0, #d63cae 58%, #9e4ed2);
  box-shadow:
    0 7px 0 #874ab7,
    0 0 0 7px rgba(255, 203, 105, 0.45),
    0 20px 42px rgba(69, 44, 124, 0.26),
    0 0 28px rgba(255, 238, 145, 0.65);
}

.machine-sign span {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 0;
  clip-path: none;
  background-color: transparent;
  background-image: var(--platy-star-img);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 0 9px rgba(255, 238, 139, 0.95));
}

.dome {
  top: 78px;
  width: min(510px, 82%);
  height: 420px;
  border-width: 9px;
  border-radius: 270px 270px 48px 48px;
  background:
    radial-gradient(ellipse at 32% 18%, rgba(255, 255, 255, 0.9), transparent 4.8rem),
    radial-gradient(ellipse at 72% 24%, rgba(255, 255, 255, 0.42), transparent 8rem),
    linear-gradient(125deg, rgba(255, 255, 255, 0.62), rgba(146, 218, 255, 0.36) 45%, rgba(255, 180, 229, 0.32));
  box-shadow:
    inset 0 0 48px rgba(255, 255, 255, 0.92),
    inset 0 -18px 28px rgba(111, 96, 205, 0.12),
    0 26px 58px rgba(83, 48, 148, 0.26),
    0 0 46px rgba(255, 255, 255, 0.48);
}

.capsules i,
.grabbed-capsule {
  width: 112px;
  height: 96px;
  border-width: 5px;
  background:
    radial-gradient(circle at 27% 20%, rgba(255, 255, 255, 0.86) 0 12%, transparent 20%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.64) 0 47%, transparent 48% 52%, rgba(0, 0, 0, 0.06) 53%),
    linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c), white 42%));
  box-shadow:
    inset 0 12px 13px rgba(255, 255, 255, 0.38),
    0 12px 24px rgba(80, 53, 130, 0.2);
}

.capsules i:nth-child(1) { --r: -18deg; }
.capsules i:nth-child(2) { --r: -9deg; }
.capsules i:nth-child(3) { --r: -4deg; z-index: 3; }
.capsules i:nth-child(4) { --r: -7deg; }
.capsules i:nth-child(5) { --r: 15deg; }
.capsules i:nth-child(6) { --r: 6deg; z-index: 5; }
.capsules i:nth-child(7) { --r: 12deg; }

.machine-base {
  bottom: 52px;
  width: min(560px, 90%);
  height: 210px;
  border-width: 6px;
  border-radius: 46px 46px 62px 62px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent 18% 82%, rgba(255, 255, 255, 0.12)),
    linear-gradient(180deg, #ff96d5, #ef63ba 46%, #8f5bec);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.82),
    inset 0 -16px 0 rgba(85, 47, 151, 0.18),
    0 24px 46px rgba(73, 44, 128, 0.26);
}

.light-rail {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 13px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.light-rail i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff48f;
  box-shadow: 0 0 16px rgba(255, 239, 114, 0.96), inset 0 2px 0 rgba(255, 255, 255, 0.8);
}

.light-rail i:nth-child(even) {
  background: #ffc2ee;
  box-shadow: 0 0 16px rgba(255, 135, 221, 0.9), inset 0 2px 0 rgba(255, 255, 255, 0.8);
}

.turn-knob {
  top: 62px;
  width: 112px;
  height: 112px;
  border-width: 7px;
  box-shadow:
    0 8px 0 #ad5f30,
    0 18px 24px rgba(112, 58, 102, 0.22),
    inset 0 -9px 0 rgba(135, 73, 41, 0.14);
}

.coin-slot {
  right: 72px;
  top: 72px;
  width: 60px;
  height: 104px;
  border-width: 5px;
  background:
    linear-gradient(90deg, #381d66 0 38%, #ff95d8 41% 64%, #6f36a2 67% 100%);
}

.gift-door {
  left: 58px;
  top: 82px;
  width: 94px;
  height: 84px;
  background:
    radial-gradient(circle at 50% 50%, #c57aff 0 7px, transparent 8px),
    linear-gradient(180deg, #6b4dc1, #33236f);
}

.gift-door::after {
  content: "";
  position: absolute;
  inset: 25px;
  clip-path: none;
  border-radius: 0;
  background-color: transparent;
  background-image: var(--platy-star-img);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 0 8px rgba(206, 144, 255, 0.75));
}

.lever {
  right: -2px;
  top: 300px;
  z-index: 9;
}

.lever::before {
  top: 46px;
  height: 152px;
  width: 26px;
}

.lever span {
  width: 80px;
  height: 80px;
  border-width: 6px;
  background:
    radial-gradient(circle at 28% 23%, rgba(255, 255, 255, 0.82), transparent 1.45rem),
    linear-gradient(180deg, #ff85ca, #ed4da1);
}

.machine-caption {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 10;
  transform: translateX(-50%);
  width: min(430px, 78%);
  padding: 12px 22px;
  color: #7a4bd0;
  text-align: center;
  font-weight: 1000;
  text-transform: uppercase;
  border: 3px solid rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 22px rgba(91, 58, 154, 0.18), inset 0 1px 0 #fff;
}

.reveal-panel {
  min-height: 620px;
  padding: clamp(22px, 2.1vw, 30px);
  border-radius: 32px;
}

.reveal-glow {
  inset: 74px 26px 94px;
  border-radius: 30px;
  background:
    conic-gradient(from 0deg, transparent 0 5%, rgba(255, 255, 255, 0.72) 6% 8%, transparent 9% 15%),
    radial-gradient(circle, rgba(255, 242, 133, 0.42), rgba(255, 141, 211, 0.2) 48%, transparent 70%);
  opacity: 0.82;
}

.reveal-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 46px;
  font-size: clamp(.9rem, 1.2vw, 1.15rem);
}

.reveal-kicker span {
  position: relative;
  width: 20px;
  height: 20px;
}

.mystery-card {
  min-height: 390px;
  grid-template-rows: minmax(205px, 1fr) auto auto auto;
  border: 2px solid rgba(255, 255, 255, 0.76);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 25%, rgba(255, 255, 255, 0.76), transparent 7rem),
    radial-gradient(ellipse at 20% 86%, rgba(255, 255, 255, 0.8) 0 16%, transparent 34%),
    radial-gradient(ellipse at 80% 88%, rgba(255, 255, 255, 0.68) 0 13%, transparent 30%),
    linear-gradient(160deg, rgba(255, 214, 238, 0.76), rgba(255, 245, 205, 0.34), rgba(186, 243, 255, 0.2));
}

.reveal-pal {
  --scale: 1.18;
  align-self: end;
  margin-top: 18px;
}

.mystery-card:not(.revealed) .reveal-pal {
  filter:
    brightness(0) saturate(0) opacity(0.54)
    drop-shadow(0 18px 18px rgba(74, 43, 98, 0.24))
    drop-shadow(0 0 34px rgba(255, 123, 213, 0.32));
}

.mystery-card.revealed .mystery-mark {
  display: none;
}

.mystery-mark {
  position: absolute;
  top: 35%;
  left: 50%;
  z-index: 4;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.62);
  font-size: 4.6rem;
  font-weight: 1000;
  text-shadow: 0 3px 0 rgba(88, 55, 136, 0.2);
}

.reveal-dots {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: -2px 0 8px;
}

.reveal-dots i {
  width: 36px;
  height: 10px;
  border-radius: 999px;
  background: rgba(111, 80, 164, 0.48);
}

.reveal-dots i:last-child {
  opacity: .34;
}

.mystery-card strong {
  font-size: clamp(2rem, 2.4vw, 3rem);
  color: #7945d0;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.7),
    0 8px 20px rgba(112, 66, 176, 0.16);
}

.mystery-card > span {
  margin-top: 4px;
  min-width: 190px;
  text-align: center;
  background:
    linear-gradient(180deg, #e8c4ff, #6471f3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 5px 0 rgba(73, 82, 194, 0.38),
    0 12px 20px rgba(92, 96, 223, 0.2);
}

.gift-action {
  min-height: 70px;
  gap: 16px;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
}

.gift-action span {
  position: relative;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 0 38%, rgba(255,255,255,.85) 39% 60%, transparent 61%),
    linear-gradient(180deg, transparent 0 42%, rgba(255,255,255,.85) 43% 58%, transparent 59%),
    linear-gradient(135deg, #b86cff, #ff60be);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.62), 0 8px 12px rgba(116, 56, 136, 0.22);
}

.gift-action span::before,
.gift-action span::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 18px;
  height: 18px;
  border: 5px solid #ffe873;
  border-radius: 50% 50% 0 50%;
}

.gift-action span::before {
  left: 1px;
  transform: rotate(-25deg);
}

.gift-action span::after {
  right: 1px;
  transform: scaleX(-1) rotate(-25deg);
}

/* stories + pal + shop + yess: ancho alineado (bleed = padding de .machine-section) */
.machine-hero-backdrop {
  /* Igual que el padding horizontal de .machine-section */
  --machine-hero-bleed: clamp(26px, 3.1vw, 42px);
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: calc(100% + 2 * var(--machine-hero-bleed));
  max-width: none;
  margin: 0 calc(-1 * var(--machine-hero-bleed)) 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow-x: visible;
  overflow-y: visible;
}

@media (max-width: 760px) {
  .machine-hero-backdrop {
    --machine-hero-bleed: 18px;
  }
}

/* Carrusel de historias — encima de pal.png */
.stories-motion {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-bottom: 0;
  padding-inline: 0;
}

.platyverse-plunge {
  position: relative;
  z-index: 2;
  margin-top: var(--platyverse-head-mt);
  margin-bottom: var(--platyverse-head-mb);
  margin-inline: auto;
  padding: 0 clamp(12px, 4vw, 28px);
  max-width: min(1280px, 100%);
  text-align: center;
  font-family: "Rubik Bubbles", "Trebuchet MS", system-ui, sans-serif;
  font-size: clamp(1.96rem, 9.6vw, 5rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fffcef;
  text-shadow:
    0 3px 0 #ffb8e8,
    0 7px 0 #e848a8,
    0 11px 0 #a056c8,
    0 14px 36px rgba(70, 35, 120, 0.55),
    0 0 56px rgba(255, 140, 210, 0.55);
  -webkit-text-stroke: 1.38px rgba(92, 46, 140, 0.32);
}

/* Hueco antes del texto: “The collection” define la referencia; el bloque pillar conserva ese aire vía margin-top */
#collection-lead.platyverse-plunge {
  margin-top: var(--platyverse-space-collection-lead-mt);
}

.stories-motion > .platyverse-plunge {
  margin-top: calc(
    var(--platyverse-space-collection-lead-mt) + var(--platyverse-headline-match-collection-gap)
  );
}
/* Título "The collection": sin márgenes extra; el hueco al panel usa --platyverse-head-mb */
#collection-lead + #collection.collection-section {
  margin-top: 0;
}

#roadmap-lead + #roadmap.roadmap-section {
  margin-top: 0;
}

#about-history-lead.platyverse-plunge,
#about-team-lead.platyverse-plunge,
#roadmap-lead.platyverse-plunge {
  margin-top: clamp(36px, 7vw, 72px);
  font-size: clamp(2.35rem, 11vw, 6.25rem);
  -webkit-text-stroke: 1.55px rgba(92, 46, 140, 0.32);
}

/* About: pegar el bloque del vídeo al título “Our history” */
#about-history-lead + .about-history-band {
  margin-top: 0;
}

#about-team-lead + .about-team-lede + .team-section + #about-history-lead.platyverse-plunge {
  margin-top: clamp(40px, 8vw, 88px);
}

#about-team-lead + .about-team-lede + .team-section {
  margin-top: 0;
}

.stories-carousel {
  --stories-edge-gutter: 0px;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(4px, 1.4vw, 12px);
  box-sizing: border-box;
  width: calc(100vw - 2 * var(--stories-edge-gutter));
  max-width: none;
  margin-left: calc(50% - 50vw + var(--stories-edge-gutter));
  margin-right: calc(50% - 50vw + var(--stories-edge-gutter));
  padding-inline: 0;
}

@media (max-width: 760px) {
  .stories-carousel {
    --stories-edge-gutter: max(0px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  }
}

@supports (width: 100svw) {
  .stories-carousel {
    width: calc(100svw - 2 * var(--stories-edge-gutter));
    margin-left: calc(50% - 50svw + var(--stories-edge-gutter));
    margin-right: calc(50% - 50svw + var(--stories-edge-gutter));
  }

  .hero-header-wrap {
    width: 100svw;
    max-width: 100svw;
    margin-left: calc(50% - 50svw);
    margin-right: calc(50% - 50svw);
  }

  .line-divider {
    width: 100svw;
    max-width: 100svw;
    margin-left: calc(50% - 50svw);
    margin-right: calc(50% - 50svw);
  }
}

.stories-carousel__viewport {
  display: block;
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(12px, 3vw, 24px);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  outline: none;
}

.stories-carousel__viewport:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.65), 0 0 0 5px rgba(93, 77, 161, 0.45);
  border-radius: 14px;
}

.stories-carousel__viewport::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.stories-carousel__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: clamp(12px, 2.4vw, 18px);
  width: max-content;
  padding: 6px clamp(8px, 1.5vw, 16px) 10px;
}

.stories-carousel__slide {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  max-width: none;
  scroll-snap-align: center;
  align-self: flex-start;
}

.stories-carousel__slide .stories-motion-card {
  box-sizing: border-box;
  flex-shrink: 0;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  min-height: 0;
  border-radius: 18px;
  box-shadow: none;
}

.stories-carousel__slide .stories-motion-card:not(.stories-motion-card--cta) {
  background: transparent;
}

.stories-carousel__slide .stories-motion-card--paris,
.stories-carousel__slide .stories-motion-card--janeiro,
.stories-carousel__slide .stories-motion-card--rome,
.stories-carousel__slide .stories-motion-card--japan,
.stories-carousel__slide .stories-motion-card--dream,
.stories-carousel__slide .stories-motion-card--sm,
.stories-carousel__slide .stories-motion-card--dub,
.stories-carousel__slide .stories-motion-card--nyc {
  background: radial-gradient(ellipse 95% 88% at 50% 38%, #4a3a72 0%, #2a1f45 45%, #161022 100%);
}

.stories-carousel__arrow {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(36px, 8vw, 46px);
  height: clamp(36px, 8vw, 46px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: #1a1230;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 20px rgba(67, 54, 140, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.stories-carousel__arrow:hover {
  background: #fff;
  transform: scale(1.06);
}

.stories-carousel__arrow:active {
  transform: scale(0.96);
}

.stories-carousel__arrow:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.85),
    0 0 0 5px rgba(93, 77, 161, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 20px rgba(67, 54, 140, 0.18);
}

@media (max-width: 380px) {
  .stories-carousel__arrow {
    display: none;
  }
}

.stories-motion-card {
  position: relative;
  flex-shrink: 0;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 14px 28px rgba(67, 54, 140, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stories-motion-card--tall {
  aspect-ratio: auto;
}

.stories-motion-card--sq {
  aspect-ratio: 1;
}

.stories-motion-card__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Carrusel Stories: miniaturas cuadradas (equilibrio entre legible y compacto) */
.stories-carousel__slide .stories-motion-card__media {
  --stories-thumb: min(320px, calc(100vw - 96px));
  width: var(--stories-thumb);
  height: var(--stories-thumb);
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

@supports (width: 100svw) {
  .stories-carousel__slide .stories-motion-card__media {
    --stories-thumb: min(320px, calc(100svw - 72px));
  }
}

.stories-motion-card--cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 12px;
  text-decoration: none;
  color: #1a1230;
  font-weight: 1000;
  text-align: center;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.stories-motion-card__icon-svg {
  flex-shrink: 0;
  color: #1a1230;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.5));
}

.stories-motion-card__cta-text {
  font-size: clamp(0.72rem, 2.1vw, 1.05rem);
  max-width: 12ch;
}

.stories-motion-card--cta-youtube {
  background: linear-gradient(165deg, #ffc9e8, #ff7ab8 55%, #ff4a9a);
}

.stories-motion-card--cta-instagram {
  background: linear-gradient(165deg, #c8ffd8, #7ae8a8 50%, #3ecf8e);
}

.stories-motion-card--cta-x {
  background: linear-gradient(165deg, #e8deff, #c4b0ff 52%, #9b7dff);
}

.stories-motion-card--cta-tiktok {
  background: linear-gradient(165deg, #fff9d6, #ffe873 55%, #ffd54a);
}

@media (prefers-reduced-motion: no-preference) {
  .stories-motion-card:hover {
    transform: scale(1.05);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.75),
      0 18px 36px rgba(67, 54, 140, 0.18);
  }

  .stories-carousel__slide .stories-motion-card:hover {
    box-shadow: none;
  }
}

.machine-hero-backdrop .machine-pal-splash,
.machine-hero-backdrop .machine-shop-splash {
  width: 100%;
  max-width: 100%;
  margin: 0 0 clamp(10px, 2vw, 20px);
}

.machine-hero-backdrop .platy-zoo-cams {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: min(1360px, 100%);
  margin: 0 auto clamp(16px, 3.6vw, 36px);
  padding: 0;
  box-sizing: border-box;
  border: none;
  background: transparent;
  box-shadow: none;
}

.machine-hero-backdrop .platy-zoo-cams .platy-zoo-cams__plunge.platyverse-plunge {
  margin-top: clamp(8px, 2vw, 22px);
  margin-bottom: clamp(14px, 3vw, 26px);
  padding-inline: clamp(10px, 3vw, 24px);
  font-size: clamp(1.45rem, 6.8vw, 3.35rem);
  line-height: 1.06;
  text-shadow:
    0 3px 0 #ffb8e8,
    0 7px 0 #e848a8,
    0 11px 0 #a056c8,
    0 14px 36px rgba(70, 35, 120, 0.55),
    0 0 56px rgba(255, 140, 210, 0.55);
  -webkit-text-stroke: 1.38px rgba(92, 46, 140, 0.32);
}

.machine-hero-backdrop .platy-zoo-cams__glass {
  padding: clamp(18px, 3.2vw, 28px) clamp(16px, 3vw, 28px);
  box-sizing: border-box;
  border-radius: clamp(22px, 4vw, 38px);
  border: 1px solid rgba(255, 255, 255, 0.75);
  background:
    linear-gradient(
      160deg,
      rgba(255, 252, 255, 0.94) 0%,
      rgba(246, 236, 255, 0.88) 45%,
      rgba(238, 224, 255, 0.86) 100%
    );
  box-shadow:
    0 16px 44px rgba(56, 32, 110, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.platy-zoo-cams__inner {
  max-width: 66rem;
  margin-inline: auto;
}

.platy-zoo-cams__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2.8vw, 22px);
  align-items: start;
}

.platy-zoo-cams__figure {
  margin: 0;
  padding: 0;
  min-width: 0;
}

.platy-zoo-cams__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: clamp(14px, 2.4vw, 20px);
  background: #0f0a1a;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.12),
    0 10px 28px rgba(40, 20, 80, 0.2);
}

.platy-zoo-cams__frame .platy-zoo-cams__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: contain;
  background: #050208;
}

.platy-zoo-cams__caption {
  margin: 8px 2px 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(88, 58, 130, 0.72);
}

@media (max-width: 720px) {
  .platy-zoo-cams__grid {
    grid-template-columns: 1fr;
  }
}

.machine-hero-backdrop .machine-memory-frame {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: min(1200px, 100%);
  margin: 0 auto clamp(12px, 2.2vw, 28px);
  border-radius: clamp(28px, 5vw, 48px);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.52);
  box-shadow:
    var(--shadow),
    0 24px 52px rgba(45, 26, 105, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.machine-hero-backdrop .machine-memory-frame.memory-embed-host {
  container-type: inline-size;
  container-name: memory-embed;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  box-sizing: border-box;
}

/* Sin zoom/transform: desincronizan clics y layout con overflow en el marco */
.machine-hero-backdrop .memory-embed-host .game-shell {
  min-height: 0;
  max-height: none;
  height: auto;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  min-width: 0;
  overflow-x: clip;
  overflow-y: visible;
  padding-bottom: clamp(12px, 2.5vw, 22px);
  box-sizing: border-box;
}

@media (max-width: 1180px) {
  .machine-hero-backdrop .machine-memory-frame.memory-embed-host {
    overflow: hidden;
  }

  .machine-hero-backdrop .memory-embed-host .game-shell {
    min-height: 0;
    overflow-y: visible;
  }
}

.machine-hero-backdrop .memory-embed-host .sparkles,
.machine-hero-backdrop .memory-embed-host .magic-stars,
.machine-hero-backdrop .memory-embed-host .sky-haze {
  display: none !important;
}

/* Embed: ocultar HOW TO PLAY y nav (home / logui / settings / pause); en memory/index.html siguen visibles */
.machine-hero-backdrop .memory-embed-host .how-panel {
  display: none !important;
}

.machine-hero-backdrop .memory-embed-host .topbar .nav-cluster {
  display: none !important;
}

/* Misma banda horizontal y padding que .content-grid; MM + stats alineados al tablero */
.machine-hero-backdrop .memory-embed-host .topbar {
  grid-template-columns: 1fr;
  justify-items: start;
  width: 100%;
  max-width: min(1136px, 100%);
  margin-inline: 0;
  padding-inline: clamp(8px, 1.8vw, 16px);
  box-sizing: border-box;
}

.machine-hero-backdrop .memory-embed-host .hero-stack {
  width: min(800px, 100%);
  max-width: 100%;
  align-items: center;
  margin-inline: 0;
  gap: clamp(14px, 2.4vw, 24px);
  margin-bottom: clamp(6px, 1.4vw, 14px);
}

.machine-hero-backdrop .memory-embed-host .title-image {
  width: min(460px, 90%);
}

.machine-hero-backdrop .memory-embed-host .stats-row {
  width: 100%;
  max-width: 100%;
  gap: clamp(7px, 1.5vw, 12px);
}

@media (max-width: 1180px) {
  .machine-hero-backdrop .memory-embed-host .topbar {
    max-width: min(840px, 100%);
    margin-inline: auto;
    padding-inline: clamp(6px, 2.8vw, 16px);
  }

  .machine-hero-backdrop .memory-embed-host .hero-stack {
    width: 100%;
    max-width: min(780px, 100%);
    margin-inline: auto;
  }
}

/* Solo corrige bloque tablero+laterales tirado a la derecha al ocultar HOW TO PLAY */
.machine-hero-backdrop .machine-memory-frame.memory-embed-host .game-shell .content-grid {
  display: grid;
  grid-template-columns: minmax(0, min(780px, 100%)) minmax(208px, 292px);
  justify-content: start;
  align-items: start;
  gap: clamp(14px, 2vw, 26px);
  width: 100%;
  max-width: min(1136px, 100%);
  margin-inline: 0;
  padding-inline: clamp(8px, 1.8vw, 16px);
  box-sizing: border-box;
}

.machine-hero-backdrop .machine-memory-frame.memory-embed-host .game-shell .board-wrap {
  width: 100%;
  max-width: min(800px, 100%);
  margin-inline: auto;
  box-sizing: border-box;
  padding: clamp(9px, 1.8vw, 18px);
  transform: none;
}

.machine-hero-backdrop .machine-memory-frame.memory-embed-host .game-shell .memory-board {
  width: 100%;
  max-width: min(780px, 100%);
  margin-inline: auto;
  gap: clamp(6px, 1.4vw, 13px);
  box-sizing: border-box;
}

.machine-hero-backdrop .machine-memory-frame.memory-embed-host .game-shell .right-stack {
  width: 100%;
  max-width: 292px;
  margin-inline: auto;
  box-sizing: border-box;
}

@media (max-width: 1180px) {
  .machine-hero-backdrop .machine-memory-frame.memory-embed-host .game-shell .content-grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    max-width: min(840px, 100%);
    margin-inline: auto;
    padding-inline: clamp(6px, 2.8vw, 16px);
  }

  .machine-hero-backdrop .machine-memory-frame.memory-embed-host .game-shell .board-wrap {
    max-width: 100%;
  }

  .machine-hero-backdrop .machine-memory-frame.memory-embed-host .game-shell .memory-board {
    max-width: min(780px, 100%);
    margin-inline: auto;
  }

  .machine-hero-backdrop .machine-memory-frame.memory-embed-host .game-shell .right-stack {
    max-width: min(440px, 100%);
    margin-inline: auto;
  }
}

.machine-hero-backdrop .memory-embed-host .bottom-controls {
  margin-top: clamp(14px, 2.6vw, 26px);
  margin-bottom: clamp(10px, 2vw, 18px);
}

@media (max-width: 900px) {
  .machine-hero-backdrop .memory-embed-host .bottom-controls {
    margin-top: clamp(12px, 2.4vw, 22px);
    margin-bottom: clamp(10px, 2.2vw, 16px);
  }
}

.machine-memory-teaser {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 100%;
  margin: 0 0 clamp(10px, 2vw, 20px);
  padding: clamp(26px, 5vw, 44px) clamp(18px, 4vw, 32px);
  border-radius: clamp(22px, 3vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.machine-memory-teaser__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      168deg,
      rgba(120, 172, 255, 0.38) 0%,
      rgba(135, 103, 230, 0.22) 48%,
      rgba(255, 151, 218, 0.2) 100%
    ),
    url("memory/assets/sx.webp") center / cover no-repeat;
  filter: saturate(1.06);
}

.machine-memory-teaser__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(10px, 2.2vw, 16px);
  max-width: 28rem;
}

.machine-memory-teaser__logo {
  width: min(400px, 86vw);
  height: auto;
  display: block;
  filter:
    drop-shadow(0 6px 0 rgba(74, 40, 150, 0.28))
    drop-shadow(0 14px 24px rgba(45, 24, 100, 0.22));
}

.machine-memory-teaser__subtitle {
  margin: 0;
  font-size: clamp(0.9rem, 2.1vw, 1.05rem);
  font-weight: 800;
  line-height: 1.45;
  color: #392265;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.machine-memory-teaser__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 26px 0 18px;
  margin-top: 6px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 1000;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  background: linear-gradient(180deg, #4ebfff 0%, #2081e2 46%, #166fae 100%);
  border: 0;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(10, 52, 96, 0.45),
    0 6px 0 #0f537e,
    0 14px 32px rgba(17, 100, 160, 0.42);
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.22s ease;
}

.machine-memory-teaser__cta:hover {
  filter: brightness(1.07);
  transform: translateY(-3px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.52),
    inset 0 -1px 0 rgba(10, 52, 96, 0.35),
    0 8px 0 #0c4569,
    0 22px 40px rgba(17, 100, 160, 0.48);
}

.machine-memory-teaser__cta:active {
  transform: translateY(2px);
  filter: brightness(0.97);
}

.machine-memory-teaser__cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.machine-memory-teaser__cta-icon {
  display: block;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 50%;
  filter: brightness(0) invert(1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
}

.machine-hero-backdrop .machine-memory-frame + .machine-shop-splash {
  margin-top: clamp(16px, 3.5vw, 36px);
}

/* Section envuelve la grid (accesibilidad / landmark); sin caja pastel: fondo viene de body.page-collection */
.collection-section {
  position: relative;
  margin-top: clamp(12px, 2vw, 24px);
  border: none;
  border-radius: 0;
  --collection-side-bleed: 0px;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  overflow: visible;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  background: transparent;
}

body.page-collection .collection-section {
  margin-inline: auto;
  padding-block: clamp(4px, 1.6vw, 16px);
  padding-inline: clamp(4px, 1.2vw, 10px);
}

/* Roadmap band: bleed ancho/layout; fondo violeta/`hero2.png` vive en `body.page-roadmap` para el header también. */
.page-roadmap .roadmap-page-band {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: clamp(24px, 5vw, 56px);
  padding:
    0
    clamp(18px, 5vw, 36px)
    clamp(40px, 10vw, 120px)
    clamp(18px, 5vw, 36px);
  padding-left: max(clamp(18px, 5vw, 36px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(18px, 5vw, 36px), env(safe-area-inset-right, 0px));
  padding-top: max(0px, env(safe-area-inset-top, 0px));
  padding-bottom: max(clamp(40px, 10vw, 120px), env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  background: transparent;
}

.page-roadmap .roadmap-page-band #roadmap-lead.platyverse-plunge {
  margin-top: 0;
  margin-bottom: clamp(10px, 2.2vw, 24px);
  transform: translateY(clamp(6px, 1.2vw, 20px));
}

.page-roadmap #roadmap-lead + #roadmap.roadmap-section {
  margin-top: clamp(20px, 4.5vw, 52px);
}

.page-roadmap .roadmap-page-band .roadmap-section {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

.roadmap-section {
  border: none;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
}

.page-about-us .about-history-band {
  width: min(1320px, 100%);
  margin-inline: auto;
  margin-bottom: clamp(6px, 1.8vw, 18px);
  padding-inline: max(14px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

.page-roadmap .platy-roadmap-stage,
.page-about-us .about-history-band .platy-roadmap-stage {
  position: relative;
  width: 100%;
  margin-inline: 0;
  isolation: isolate;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
  padding-top: 0;
  padding-bottom: clamp(18px, 4vw, 44px);
}

.page-roadmap .platy-roadmap-stage .roadmap-chart--image,
.page-about-us .about-history-band .platy-roadmap-stage .about-history-chart--video {
  width: 100%;
  max-width: min(1200px, 98%);
  margin-inline: auto;
  display: block;
  object-fit: contain;
  outline: none;
  border-radius: clamp(14px, 2.4vw, 22px);
  box-shadow:
    0 12px 40px rgba(60, 20, 100, 0.22),
    0 24px 56px rgba(0, 0, 0, 0.18);
}

.page-roadmap .platy-roadmap-stage .roadmap-chart--image {
  height: auto;
  object-position: center;
}

.page-about-us .about-history-band .platy-roadmap-stage .about-history-chart--video {
  width: auto;
  max-width: min(1320px, 100%);
  height: auto;
  max-height: min(88vh, 1040px);
  aspect-ratio: auto;
  background: #0f0a1a;
  object-position: center;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.8vw, 28px);
  width: 100%;
  max-width: min(1040px, 100%);
  margin-inline: auto;
}

.collection-section .card-grid {
  max-width: min(1260px, 100%);
}

.rarity-card {
  position: relative;
  min-height: clamp(300px, 28vw + 160px, 480px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 18px;
  border-radius: 24px;
  overflow: hidden;
}

.rarity-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .82;
}

.rarity-card.rarity-card--slot-1,
.rarity-card.rarity-card--slot-2,
.rarity-card.rarity-card--slot-3,
.rarity-card.rarity-card--slot-4,
.rarity-card.rarity-card--slot-5 {
  padding: 0;
}

.rarity-card.rarity-card--slot-1::before {
  opacity: 1;
  background: url("assets/card1.webp") center / cover no-repeat;
}

.rarity-card.rarity-card--slot-2::before {
  opacity: 1;
  background: url("assets/card2.webp") center / cover no-repeat;
}

.rarity-card.rarity-card--slot-3::before {
  opacity: 1;
  background: url("assets/card3.webp") center / cover no-repeat;
}

.rarity-card.rarity-card--slot-4::before {
  opacity: 1;
  background: url("assets/card4.webp") center / cover no-repeat;
}

.rarity-card.rarity-card--slot-5::before {
  opacity: 1;
  background: url("assets/card5.webp") center / cover no-repeat;
}

.collection-section .rarity-card {
  background:
    linear-gradient(
      152deg,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(246, 236, 255, 0.9) 48%,
      rgba(238, 224, 255, 0.88) 100%
    );
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 3px 0 rgba(132, 98, 200, 0.1),
    0 20px 42px rgba(48, 28, 96, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
  backdrop-filter: blur(10px) saturate(1.08);
}

.collection-section .rarity-card.rarity-card--slot-1::before,
.collection-section .rarity-card.rarity-card--slot-2::before,
.collection-section .rarity-card.rarity-card--slot-3::before,
.collection-section .rarity-card.rarity-card--slot-4::before,
.collection-section .rarity-card.rarity-card--slot-5::before {
  inset: clamp(10px, 2.2vw, 16px);
  border-radius: clamp(18px, 2.4vw, 22px);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

/* Collection deck: arte completa sin recorte (contain); bandas suaves en el `.rarity-card--deck`). */
body.page-collection .collection-section .rarity-card.rarity-card--deck.rarity-card--slot-1::before,
body.page-collection .collection-section .rarity-card.rarity-card--deck.rarity-card--slot-2::before,
body.page-collection .collection-section .rarity-card.rarity-card--deck.rarity-card--slot-3::before,
body.page-collection .collection-section .rarity-card.rarity-card--deck.rarity-card--slot-4::before,
body.page-collection .collection-section .rarity-card.rarity-card--deck.rarity-card--slot-5::before {
  inset: 0;
  border-radius: inherit;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
}

.card-label,
.rarity-card h3,
.small-pal {
  position: relative;
  z-index: 2;
}

.card-label {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  min-height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  font-size: .8rem;
  font-weight: 1000;
  text-transform: uppercase;
  background: rgba(43, 32, 76, 0.6);
}

.small-pal {
  --scale: .78;
  margin-top: 42px;
}

.rarity-card h3 {
  margin: -2px 0 0;
  color: #fff;
  font-size: 1.3rem;
  text-shadow: 0 3px 0 rgba(58, 42, 101, .5);
}

@media (max-width: 900px) {
  .collection-section .card-grid {
    gap: clamp(12px, 3.2vw, 20px);
    max-width: min(1020px, 100%);
  }

  .collection-section .rarity-card {
    min-height: clamp(220px, 42vw + 100px, 400px);
  }
}

/* —— Team —— */
.team-section {
  position: relative;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  max-width: min(1320px, 100%);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.8vw, 32px);
}

.team-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(18px, 2.6vw, 26px);
  border-radius: clamp(22px, 2.8vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.68);
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.48) 0%,
    rgba(244, 236, 255, 0.34) 55%,
    rgba(248, 240, 255, 0.42) 100%
  );
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset 0 -14px 36px rgba(120, 80, 180, 0.06);
  overflow: hidden;
}

.team-card__media {
  position: relative;
  border-radius: clamp(18px, 2.2vw, 26px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.52);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 10px 28px rgba(70, 45, 130, 0.12);
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.22);
}

.team-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card__body {
  flex: 0 0 auto;
  padding: clamp(16px, 2.5vw, 22px) 4px 2px;
  text-align: center;
}

.team-card__name {
  margin: 0 0 6px;
  font-family: "Rubik Bubbles", "Trebuchet MS", system-ui, sans-serif;
  font-size: clamp(1.12rem, 2.55vw, 1.52rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: #5a2d86;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 3px 12px rgba(255, 150, 200, 0.25);
}

.team-card__role {
  margin: 0;
  font-size: clamp(0.7rem, 1.62vw, 0.82rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6f5a9e;
}

@media (max-width: 820px) {
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .team-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.trait-shop {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  padding: 24px;
}

.trait-lab,
.shop-preview {
  border-radius: 28px;
  padding: 26px;
}

.builder {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 20px;
  align-items: center;
}

.builder-preview {
  min-height: 410px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 36%, rgba(255,255,255,.82), transparent 9rem),
    linear-gradient(180deg, rgba(255, 191, 226, 0.4), rgba(143, 231, 255, 0.36));
}

.builder-pal {
  --scale: 1.25;
}

.winter-hat {
  position: absolute;
  left: 20%;
  top: 4%;
  z-index: 8;
  width: 72%;
  height: 45%;
  border-radius: 52% 48% 36% 38%;
  background:
    radial-gradient(circle at 54% 0, #cba7ff 0 17px, transparent 18px),
    linear-gradient(180deg, #b482ff 0 48%, #8d62d7 49%);
  transform: rotate(-4deg);
  box-shadow: inset 0 8px 0 rgba(255, 255, 255, 0.15);
}

.winter-hat::after {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: 8%;
  height: 28%;
  border-radius: 999px;
  background: linear-gradient(90deg, #b482ff, #d6b7ff, #8f70e9);
  border: 3px solid rgba(58, 42, 101, 0.16);
}

.trait-controls {
  display: grid;
  gap: 12px;
}

.trait-controls button {
  min-height: 58px;
  border-radius: 16px;
  color: #fff;
  font-weight: 1000;
  text-transform: uppercase;
  background: rgba(116, 83, 202, .68);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 20px rgba(78, 57, 145, .18);
}

.trait-controls button.active {
  background: linear-gradient(180deg, #ff9bd0, #ff65b6);
}

.shop-preview {
  display: grid;
  align-content: center;
  background:
    radial-gradient(circle at 80% 16%, rgba(255, 242, 151, 0.62), transparent 8rem),
    linear-gradient(135deg, rgba(255, 190, 221, .68), rgba(177, 233, 255, .56));
}

.shop-preview h2 {
  color: #fff;
  font-size: clamp(2rem, 3.6vw, 3.8rem);
}

.product-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 28px;
}

.product-row article {
  min-height: 170px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.6);
  box-shadow: inset 0 1px 0 #fff;
}

.product-row span {
  width: 72px;
  height: 72px;
  border-radius: 26px;
  background: linear-gradient(135deg, #ff9bd0, #7bdfff);
  box-shadow: inset 0 1px 0 #fff, 0 12px 18px rgba(91, 63, 146, .16);
}

.product-row article:nth-child(2) span {
  background: linear-gradient(135deg, #b989ff, #ffd45d);
}

.product-row article:nth-child(3) span {
  border-radius: 50%;
  background: linear-gradient(135deg, #89e6a5, #ff95ce);
}

.product-row strong {
  color: #5b43aa;
  text-transform: uppercase;
  font-size: .85rem;
}

.story-section {
  min-height: 440px;
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 22px;
  padding: 28px;
  background:
    linear-gradient(180deg, rgba(42, 53, 139, 0.52), rgba(255, 156, 209, 0.36)),
    radial-gradient(circle at 84% 12%, rgba(255, 230, 132, .55), transparent 12rem);
}

.story-section::before {
  height: 54%;
  opacity: .85;
}

.story-copy {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  padding: 28px;
  border-radius: 28px;
}

.episode-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: end;
}

.episode-row article {
  min-height: 260px;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 18px;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,.8), transparent 5rem),
    linear-gradient(180deg, #85e4ff, #a37dff 58%, #ff85c8);
}

.episode-row article:nth-child(2) { background: linear-gradient(180deg, #b9f48a, #49bce7 60%, #6d73ff); }
.episode-row article:nth-child(3) { background: linear-gradient(180deg, #125da6, #5be0ff 60%, #b1fff2); }
.episode-row article:nth-child(4) { background: linear-gradient(180deg, #ffd6ee, #ff93c7 54%, #b074ff); }

.episode-row span,
.episode-row strong {
  position: relative;
  z-index: 2;
  color: #fff;
  text-shadow: 0 3px 0 rgba(57, 42, 100, .45);
}

.episode-row span {
  font-size: .76rem;
  font-weight: 1000;
}

.episode-row strong {
  font-size: 1.1rem;
  line-height: 1.1;
}

/* —— Bottom promo tiles (p1, p2, p3, p5): full artwork, whole card is the link —— */
.pillar-promo {
  padding: 0 0 clamp(20px, 3vw, 36px);
  margin-top: calc(
    var(--platyverse-space-collection-lead-mt) + var(--platyverse-headline-match-collection-gap)
  );
}

.pillar-promo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  width: 100%;
  max-width: min(1500px, 100%);
  margin: 0 auto;
}

.pillar-tile {
  display: block;
  border-radius: clamp(22px, 2.4vw, 30px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35),
    0 16px 40px rgba(55, 35, 110, 0.28),
    0 0 36px rgba(255, 150, 200, 0.18);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
  text-decoration: none;
  color: inherit;
}

.pillar-tile:hover {
  transform: translateY(-6px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55),
    0 22px 52px rgba(55, 35, 110, 0.35),
    0 0 48px rgba(255, 160, 210, 0.35);
}

.pillar-tile:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.95);
  outline-offset: 3px;
}

.pillar-tile-img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1.02);
  transition: transform 0.45s ease;
}

.pillar-tile:hover .pillar-tile-img {
  transform: scale(1.05);
}

@media (max-width: 1100px) {
  .pillar-promo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .pillar-promo-grid {
    grid-template-columns: 1fr;
  }
}

.site-footer {
  position: relative;
  margin-top: clamp(28px, 5vw, 44px);
  padding: clamp(14px, 3vw, 22px) 0 clamp(18px, 3vw, 26px);
  border-top: 1px solid rgba(255, 255, 255, 0.42);
  background: transparent;
  display: grid;
  gap: clamp(14px, 2.8vw, 20px);
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.site-footer__inner {
  display: contents;
}

.site-footer__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 2.4vw, 20px);
  justify-content: center;
  width: min(100%, max-content);
  min-width: 0;
}

.site-footer__love {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
  font-size: clamp(0.8rem, 1.85vw, 0.92rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-decoration: none;
  opacity: 0.9;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.site-footer__love-text {
  color: var(--muted);
  transition: color 0.2s ease;
}

.site-footer__love:hover .site-footer__love-text,
.site-footer__love:focus-visible .site-footer__love-text {
  color: var(--ink);
}

.site-footer__love:hover,
.site-footer__love:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
  outline: none;
}

.site-footer__love:focus-visible {
  border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(255, 189, 230, 0.75), 0 0 0 4px rgba(140, 100, 220, 0.2);
}

.site-footer__love-icon {
  flex-shrink: 0;
  color: var(--hot-pink);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.65));
  transform: translateY(0.5px);
  transition: color 0.2s ease, transform 0.2s ease;
}

.site-footer__love:hover .site-footer__love-icon,
.site-footer__love:focus-visible .site-footer__love-icon {
  color: var(--pink);
  transform: translateY(0.5px) scale(1.06);
}

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.5vw, 12px);
  width: auto;
}

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  padding: 6px;
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  border: none;
  transition: color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
  color: var(--ink);
  opacity: 1;
  outline: none;
}

.site-footer__social a:hover {
  transform: translateY(-1px);
}

.site-footer__social a:focus-visible {
  border-radius: 4px;
  box-shadow:
    0 0 0 2px rgba(255, 189, 230, 0.65),
    0 0 0 4px rgba(140, 100, 220, 0.18);
}

.site-footer__social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.site-footer__aside {
  justify-self: center;
  width: 100%;
  max-width: min(340px, 100%);
  min-width: 0;
}

.site-footer__legal {
  margin: 0;
  padding: 0;
  max-width: 42rem;
  justify-self: center;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.03em;
  color: rgba(103, 93, 142, 0.78);
}

@media (min-width: 761px) {
  .site-footer {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
    grid-template-rows: auto auto;
    column-gap: clamp(14px, 2.4vw, 28px);
    row-gap: clamp(10px, 1.8vw, 14px);
    align-items: center;
    justify-items: unset;
    width: 100%;
    box-sizing: border-box;
  }

  /* Dream sound dock a la izquierda; centro = made with love + ©; redes a la derecha */
  .site-footer__aside {
    grid-column: 1;
    grid-row: 1 / span 2;
    justify-self: start;
    align-self: center;
    width: auto;
    max-width: min(340px, 34vw);
  }

  .site-footer__main {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    justify-content: center;
  }

  .site-footer__legal {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    text-align: center;
    max-width: min(42rem, 94%);
  }

  .site-footer__social {
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-self: end;
    align-self: center;
    justify-content: flex-end;
  }
}

@media (max-width: 760px) {
  .site-footer__legal {
    max-width: 100%;
    padding-inline: clamp(12px, 4vw, 20px);
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.platy-player {
  min-width: 0;
}

.platy-player--tv-hit {
  position: absolute;
  inset: 0;
  z-index: 5;
  min-width: 0;
  pointer-events: none;
}

/* Alineado al botón “pause” pintado en season.webp (inferior-derecha del aparato); ajusta vars si cambia el arte */
.platy-player--tv-hit .platy-player__toggle--tv-hit {
  position: absolute;
  right: clamp(158px, 39%, 234px);
  bottom: clamp(8px, 7.6%, 32px);
  width: clamp(32px, 9.3vw, 40px);
  height: clamp(32px, 9.3vw, 40px);
  padding: 0;
  margin: 0;
  pointer-events: auto;
  border-radius: 50%;
  cursor: pointer;
  color: rgba(255, 252, 253, 0.96);
  background: rgba(10, 8, 22, 0.24);
  border: 2px solid rgba(255, 255, 255, 0.52);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.42),
    0 4px 18px rgba(24, 14, 62, 0.48);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition:
    transform 0.18s ease,
    filter 0.18s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.platy-player--tv-hit .platy-player__toggle--tv-hit svg {
  width: 18px;
  height: 18px;
}

.platy-player--tv-hit.is-playing .platy-player__toggle--tv-hit {
  background: rgba(74, 42, 128, 0.42);
  border-color: rgba(255, 208, 238, 0.78);
}

.platy-player--tv-hit .platy-player__toggle--tv-hit:hover,
.platy-player--tv-hit .platy-player__toggle--tv-hit:focus-visible {
  transform: scale(1.07);
  filter: brightness(1.1);
  outline: none;
}

.platy-player--tv-hit .platy-player__toggle--tv-hit:focus-visible {
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.5),
    0 4px 18px rgba(24, 14, 62, 0.48),
    0 0 0 3px rgba(255, 182, 226, 0.75);
}

.platy-player--tv-hit .platy-player__tv-metrics {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

.hero-tv-mount:has(.hero-s1.hero-s1--dismissed) .platy-player--tv-hit {
  position: relative;
  inset: auto;
  display: grid;
  place-items: center;
  min-height: 0;
}

.hero-tv-mount:has(.hero-s1.hero-s1--dismissed) .platy-player--tv-hit .platy-player__toggle--tv-hit {
  position: relative;
  right: auto;
  bottom: auto;
}

.platy-player__audio {
  display: none;
}

.platy-player__shell {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 8px;
  border-radius: 999px;
  /* Casi sólido: evita “vidrio” que dejaba ver demasiado el fondo animado */
  background: linear-gradient(180deg, #faf6ff 0%, #f3ecfc 100%);
  border: 1px solid rgba(255, 255, 255, 0.88);
  box-shadow:
    inset 0 1px 0 #fff,
    0 10px 24px rgba(67, 54, 140, 0.1),
    inset 0 0 0 1px rgba(255, 182, 220, 0.25);
}

.platy-player__toggle {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(180deg, #ffa8e8, #ff4db2 55%, #e8309a);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 2px 0 rgba(180, 40, 120, 0.35),
    0 5px 14px rgba(255, 80, 170, 0.48);
  transition: transform 0.18s ease, filter 0.18s ease;
}

.platy-player__toggle:hover,
.platy-player__toggle:focus-visible {
  transform: scale(1.05);
  filter: brightness(1.06);
  outline: none;
}

.platy-player__toggle:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 2px 0 rgba(180, 40, 120, 0.35),
    0 5px 14px rgba(255, 80, 170, 0.48),
    0 0 0 3px rgba(255, 169, 220, 0.65);
}

.platy-player__icon {
  display: grid;
  place-items: center;
}

.platy-player__icon--pause {
  display: none;
}

.platy-player.is-playing .platy-player__icon--play {
  display: none;
}

.platy-player.is-playing .platy-player__icon--pause {
  display: grid;
}

.platy-player__body {
  flex: 1;
  display: grid;
  gap: 6px;
  min-width: 0;
}

.platy-player__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.7rem;
  color: #4b378d;
  font-weight: 800;
}

.platy-player__title {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

.platy-player__time {
  font-variant-numeric: tabular-nums;
  opacity: 0.88;
  letter-spacing: 0.03em;
}

.platy-player__seek {
  width: 100%;
  height: 8px;
  margin: 0;
  border-radius: 999px;
  appearance: none;
  cursor: pointer;
  accent-color: #ff4db2;
  background: linear-gradient(90deg, rgba(212, 68, 148, 0.25), rgba(107, 92, 232, 0.18));
}

.platy-player__seek::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-top: -4px;
  background: linear-gradient(180deg, #fff 0%, #ffd6ee 42%, #ff5aa8 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 2px 0 rgba(180, 40, 120, 0.32),
    0 6px 12px rgba(255, 80, 170, 0.35);
}

.platy-player__seek::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(107, 75, 180, 0.16);
}

.platy-player__seek::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff 0%, #ffd6ee 42%, #ff5aa8 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 2px 0 rgba(180, 40, 120, 0.32),
    0 6px 12px rgba(255, 80, 170, 0.35);
}

.platy-player__seek::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(107, 75, 180, 0.16);
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

@keyframes twinkle {
  from { transform: scale(.72) rotate(0deg); opacity: .58; }
  to { transform: scale(1.18) rotate(35deg); opacity: 1; }
}

@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-12px) rotate(-2deg); }
  40% { transform: translateX(10px) rotate(2deg); }
  60% { transform: translateX(-7px) rotate(-1deg); }
  80% { transform: translateX(6px) rotate(1deg); }
}

@keyframes spinKnob {
  to { transform: translateX(-50%) rotate(360deg); }
}

@keyframes capsuleDrop {
  0% { transform: translate(-50%, -90%) scale(.6) rotate(-20deg); opacity: 0; }
  35% { transform: translate(-50%, -70%) scale(1) rotate(12deg); opacity: 1; }
  100% { transform: translate(-165%, 115%) scale(.9) rotate(385deg); opacity: 1; }
}

@keyframes rotateGlow {
  to { transform: rotate(360deg); }
}

@keyframes revealPop {
  0% { transform: scale(.82); filter: brightness(1.3); }
  70% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@media (max-width: 1120px) {
  .site-header {
    gap: 10px;
  }

  .header-nav-pill.premium-nav-bar {
    width: 100%;
    min-height: 38px;
    padding: 0;
    gap: 0;
  }

  .header-nav-pill.premium-nav-bar .premium-nav-links {
    gap: clamp(16px, 2.6vw, 34px);
    font-size: clamp(0.68rem, 1.3vw, 0.86rem);
    letter-spacing: 0.08em;
    padding-left: calc(env(safe-area-inset-left, 0px) + clamp(50px, 6.5vw, 64px));
    /* 5 iconos × 40px + 4 gaps (~14–22px) + margen (antes solo reservaba 4 iconos) */
    padding-right: calc(
      5 * 40px + 4 * clamp(14px, 1.8vw, 22px) + env(safe-area-inset-right, 0px) + 24px
    );
  }

  .nav-new-badge {
    padding: 2px 6px;
    font-size: 0.48rem;
    margin-left: 4px;
  }

  .header-social-links {
    right: max(10px, env(safe-area-inset-right, 0px));
  }

  .hero-section {
    grid-template-columns: 1fr;
    min-height: max(740px, 100vh);
    min-height: max(740px, 100svh);
    align-items: start;
    padding-top: clamp(102px, 12vw, 132px);
    padding-inline: 34px;
    padding-bottom: max(clamp(56px, 14vw, 120px), env(safe-area-inset-bottom, 0px));
    background-position: 0 0, 0 0;
  }

  /* Misma foto que desktop: videofondo con más vértigo arriba (evita franja del color del hero) */
  .hero-bg-video {
    object-position: 50% 54%;
    top: -8px;
    height: calc(100% + 20px);
  }

  .hero-copy {
    max-width: min(780px, 94vw);
  }

  /* Espacio bajo logo: baja texto + CTAs; bleed horizontal = logo puede usar más vw */
  .hero-section .hero-copy .hero-logo-title {
    margin-bottom: clamp(56px, 13vw, 150px);
    --hero-logo-bleed: clamp(12px, 4vw, 28px);
    width: calc(100% + 2 * var(--hero-logo-bleed));
    max-width: min(1200px, calc(100vw - 44px));
    margin-inline: calc(-1 * var(--hero-logo-bleed));
    box-sizing: border-box;
  }

  /* Logo a ancho real del wrapper + scale leve para que sí se note en móvil */
  .hero-section .hero-logo {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-inline: auto;
    margin-top: clamp(-126px, -10vw, -58px);
    transform: translate3d(calc(var(--mx, 0) * -8px), 0, 0) scale(1.06);
    transform-origin: top center;
  }

  .hero-section .hero-logo:hover {
    transform: translate3d(calc(var(--mx, 0) * -8px), 0, 0) scale(1.097);
    filter: drop-shadow(0 16px 36px rgba(34, 22, 72, 0.55));
  }

  .hero-world {
    display: none;
  }

  .hero-season-stack {
    top: 486px;
    right: 10px;
    max-width: min(298px, 51vw);
  }

  .hero-tv-mount {
    --tv-mount-w: min(298px, 51vw);
  }

  .hero-s1__img {
    max-width: min(298px, 51vw);
  }

  .machine-stage,
  .trait-shop,
  .story-section {
    grid-template-columns: 1fr;
  }

  .episode-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  /*
   * iOS puede seguir mostrando #e8dff5 entre status bar y el hero; forzamos un bloque alto
   * del mismo tono que .hero-section para que esa “costura” sea invisible incluso tras rebote/nudge.
   */
  html {
    scrollbar-gutter: auto;
    background-color: #e8dff5;
    background-image: linear-gradient(
      180deg,
      #d9c4ed 0%,
      #d9c4ed min(calc(env(safe-area-inset-top, 0px) + 720px), 130vh),
      #e8dff5 min(calc(env(safe-area-inset-top, 0px) + 840px), 145vh),
      #e8dff5 100%
    );
    background-repeat: no-repeat;
    /* Alto generoso: si el gradiente corta antes del pie, se veía una costura sobre el pastel */
    background-size: 100% min(520vh, 7200px);
    background-position: top center;
  }

  /*
   * Misma primera capa: evita pastel distinto donde el navegador compone encima/bajo el hero.
   */
  body {
    background-image:
      linear-gradient(
        180deg,
        #d9c4ed 0%,
        #d9c4ed min(calc(env(safe-area-inset-top, 0px) + 620px), 124vh),
        rgba(217, 196, 237, 0) min(calc(env(safe-area-inset-top, 0px) + 780px), 142vh)
      ),
      radial-gradient(ellipse 120% 85% at 50% 15%, rgba(255, 252, 255, 0.55) 0%, transparent 45%),
      linear-gradient(180deg, rgba(255, 250, 253, 0.35) 0%, rgba(235, 225, 250, 0.12) 42%, rgba(222, 208, 242, 0.55) 100%),
      url("assets/we.webp");
    background-size:
      100% auto,
      100% 100%,
      100% 100%,
      cover;
    background-position:
      center top,
      50% 0,
      50% 0,
      center 12%;
    background-attachment: scroll, scroll, scroll, scroll;
  }

  body.page-collection {
    background-color: #ebe2f8;
    background-image:
      linear-gradient(
        180deg,
        rgba(255, 251, 255, 0.54) 0%,
        rgba(232, 223, 245, 0.1) min(calc(env(safe-area-inset-top, 0px) + 500px), 112vh),
        rgba(218, 190, 240, 0.3) 100%
      ),
      url("assets/hero2.webp");
    background-size: 100% 100%, cover;
    background-position: center top, center 22%;
    background-repeat: no-repeat;
    background-attachment: scroll, scroll;
  }

  .page-collection .page-shell {
    background-color: transparent;
  }

  .page-shell {
    /*
     * Fondo de la caja útil (= #body base): transparente revelaba otros tonos junto al
     * padding-bottom (home indicator / rebote), “línea” bajo el footer.
     */
    background-color: #e8dff5;
    /*
     * padding-top causaba una franja fija (~safe-area entera) bajo status bar que el hero
     * no llegaba a tapar bien (header fixed + vídeo clipado por overflow:hidden).
     * El notch lo cubre hero + header desde y=0; safe-area sólo dentro del nav.
     */
    padding-top: 0;
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
  }

  .hero-header-wrap {
    margin-top: 0;
  }

  .hero-header-wrap > .site-header {
    width: 100%;
    margin-top: 0;
  }

  .site-header {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    top: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 10px)
      max(10px, env(safe-area-inset-left), env(safe-area-inset-right))
      6px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    row-gap: 0;
  }

  .page-roadmap .platy-roadmap-stage .roadmap-chart--image {
    margin-top: clamp(0px, 3vw, 28px);
  }

  .header-nav-pill.premium-nav-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 10px clamp(12px, 4vw, 18px);
    align-items: center;
    min-height: unset;
    padding: 10px max(12px, env(safe-area-inset-left), env(safe-area-inset-right)) 12px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .premium-nav-badge {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: center;
    width: 38px;
    height: 38px;
    z-index: 5;
    margin-inline: 0;
  }

  .header-nav-pill.premium-nav-bar .premium-nav-links {
    position: relative;
    z-index: 2;
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-start;
    align-self: center;
    gap: clamp(14px, 3.8vw, 22px);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 6px 0 10px;
    font-size: clamp(0.6rem, 2.95vw, 0.74rem);
    letter-spacing: 0.065em;
    box-sizing: border-box;
    mask-image: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .header-social-links {
    grid-column: 1 / -1;
    grid-row: 2;
    position: relative;
    inset: unset;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: clamp(10px, 4vw, 16px);
    row-gap: 8px;
    width: 100%;
    padding: 2px 0 0;
    margin: 0;
    box-sizing: border-box;
    margin-left: 0;
    padding-right: 0;
    flex-shrink: 0;
  }

  .header-social-links a {
    width: clamp(38px, 11vw, 44px);
    height: clamp(38px, 11vw, 44px);
  }

  .header-social-links svg {
    width: 22px;
    height: 22px;
  }

  .premium-nav-badge-star {
    width: clamp(14px, 3.8vw, 18px);
    height: clamp(14px, 3.8vw, 18px);
  }

  .machine-section,
  .trait-shop,
  .story-section {
    border-radius: 26px;
    padding: 18px;
  }

  /* Colección “The collection”: un poco más de aire y encuadre del arte en móvil */
  #collection-lead.platyverse-plunge--collection-lead {
    font-size: clamp(1.74rem, 7.85vw, 3rem);
    line-height: 1.06;
    -webkit-text-stroke: 0.72px rgba(92, 46, 140, 0.26);
    text-shadow:
      0 2px 0 #ffb8e8,
      0 5px 0 #e848a8,
      0 9px 0 #a056c8,
      0 13px 32px rgba(70, 35, 120, 0.48),
      0 0 44px rgba(255, 140, 210, 0.48);
  }

  .collection-section {
    margin-top: clamp(8px, 2vw, 16px);
  }

  .page-roadmap .roadmap-page-band {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
    padding:
      clamp(4px, 2vw, 12px)
      clamp(14px, 4vw, 20px)
      clamp(22px, 5vw, 30px)
      clamp(14px, 4vw, 20px);
    padding-left: max(clamp(12px, 3.5vw, 18px), env(safe-area-inset-left, 0px));
    padding-right: max(clamp(12px, 3.5vw, 18px), env(safe-area-inset-right, 0px));
  }

  /* Antes bottom ~330px: reservaba zona de la isla/pals ocultos en ≤760 → hueco gigante tras bajar botones */
  .hero-section {
    min-height: max(680px, 100vh);
    min-height: max(680px, 100svh);
    padding-top: clamp(124px, 22vw, 168px);
    padding-inline: 18px;
    padding-bottom: max(clamp(48px, 12vw, 96px), env(safe-area-inset-bottom, 0px));
    background-position: 0 0, 0 0;
    overflow: visible;
  }

  .hero-bg-video {
    object-position: 50% 53%;
    top: calc(-18px - env(safe-area-inset-top, 0px));
    height: calc(100% + 18px + env(safe-area-inset-top, 0px) + 24px);
  }

  .hero-section .hero-copy .hero-logo-title {
    align-self: center;
    width: calc(100% + 2 * var(--hero-logo-bleed, 0px));
    max-width: min(1320px, calc(100vw - 26px));
    display: grid;
    justify-items: center;
    margin-inline: calc(-1 * var(--hero-logo-bleed, 0px));
    box-sizing: border-box;
    text-align: center;
    order: -1;
    --hero-logo-bleed: clamp(18px, 7vw, 44px);
    margin-bottom: clamp(180px, 50vw, 460px);
  }

  .hero-section .hero-logo {
    width: 100%;
    max-width: none;
    margin-top: clamp(-96px, -15vw, -48px);
    margin-left: 0;
    margin-inline: auto;
    transform: translate3d(calc(var(--mx, 0) * -8px), 0, 0) scale(1.12);
    transform-origin: top center;
  }

  .hero-section .hero-logo:hover {
    transform: translate3d(calc(var(--mx, 0) * -8px), 0, 0) scale(1.159);
    filter: drop-shadow(0 16px 36px rgba(34, 22, 72, 0.55));
  }

  /* “Sweet dreams…” inmediatamente encima de los CTAs (sin hueco enorme) */
  .hero-section .hero-copy > p {
    width: min(100%, min(38ch, calc(100vw - 36px)));
    max-width: 100%;
    margin-inline: auto;
    margin-bottom: 0;
    order: 0;
    text-align: center;
    font-size: clamp(1.18rem, 5vw, 1.48rem);
    line-height: 1.43;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-wrap: balance;
  }

  /* Flex: logo → texto → botones (hueco grande solo bajo logo, vía margin en .hero-logo-title) */
  .hero-section .hero-copy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(12px, 3.8vw, 22px);
    width: 100%;
    max-width: 100%;
  }

  .hero-section .hero-actions {
    margin-top: 0;
    order: 1;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    align-self: stretch;
    gap: clamp(8px, 3vw, 14px);
    box-sizing: border-box;
  }

  .hero-section .hero-actions .primary-action {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding: 0 clamp(10px, 3vw, 16px);
    font-size: clamp(0.65rem, 3.1vw, 0.8rem);
    letter-spacing: 0.04em;
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.75),
      inset 0 -1px 0 rgba(190, 120, 30, 0.22),
      0 4px 0 #c9922e,
      0 5px 0 rgba(120, 75, 12, 0.2),
      0 12px 22px rgba(190, 130, 40, 0.3);
  }

  .hero-section .hero-opensea {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding: 0 clamp(8px, 2.8vw, 14px);
    gap: 7px;
    font-size: clamp(0.6rem, 2.85vw, 0.72rem);
    letter-spacing: 0.06em;
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.34),
      inset 0 -1px 0 rgba(42, 18, 98, 0.34),
      0 4px 0 #4f34a3,
      0 5px 0 rgba(28, 12, 72, 0.32),
      0 12px 26px rgba(76, 42, 168, 0.4);
  }

  .hero-section .hero-opensea__mark {
    width: 22px;
    height: 22px;
  }

  .hero-season-stack {
    position: relative;
    top: auto;
    right: auto;
    align-self: center;
    max-width: min(340px, calc(100% - 32px));
    width: auto;
    margin: clamp(4px, 2.5vw, 16px) auto 0;
    transform: none;
    z-index: 7;
  }

  .hero-tv-mount {
    width: min(340px, calc(100% - 32px));
    --tv-mount-w: min(340px, calc(100% - 32px));
  }

  .hero-s1 {
    display: none;
  }

  /* Sin deco del TV en móvil: el mismo clic play/pausa centrado para el sueño/audio */
  .platy-player--tv-hit {
    position: relative;
    inset: auto;
    z-index: auto;
    pointer-events: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: clamp(6px, 2.2vw, 14px);
  }

  .platy-player--tv-hit .platy-player__toggle--tv-hit {
    position: relative;
    inset: auto;
    right: auto;
    bottom: auto;
    width: clamp(40px, 11vw, 48px);
    height: clamp(40px, 11vw, 48px);
  }

  .platy-player--tv-hit .platy-player__toggle--tv-hit svg {
    width: 20px;
    height: 20px;
  }

  .island {
    right: -48%;
    width: 760px;
    bottom: -84px;
    transform: scale(.7);
    transform-origin: bottom center;
  }

  .pal-row {
    gap: 8px;
  }

  .episode-row,
  .product-row {
    grid-template-columns: 1fr 1fr;
  }

  .section-heading {
    display: block;
  }

  .section-heading h2,
  .trait-shop h2,
  .story-copy h2,
  .shop-preview h2 {
    margin-top: 12px;
    font-size: clamp(2.2rem, 11vw, 3.6rem);
  }

  .gachapon {
    min-height: 470px;
  }

  .lever {
    right: -8px;
    transform: scale(.84);
  }

  .reveal-panel {
    min-height: 480px;
  }

  .builder {
    grid-template-columns: 1fr;
  }

  .trait-controls {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 470px) {
  .episode-row,
  .product-row {
    grid-template-columns: 1fr;
  }

  .collection-section .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 2.8vw, 14px);
    max-width: 100%;
  }

  .collection-section .rarity-card {
    min-height: clamp(168px, 46vw + 72px, 260px);
  }

  .hero-section .hero-copy .hero-logo-title {
    --hero-logo-bleed: clamp(22px, 9vw, 52px);
    width: calc(100% + 2 * var(--hero-logo-bleed));
    max-width: min(1360px, calc(100vw - 22px));
    margin-inline: calc(-1 * var(--hero-logo-bleed));
    margin-bottom: clamp(216px, 58vw, 520px);
  }

  .hero-section .hero-logo {
    margin-top: clamp(-104px, -16vw, -52px);
    transform: translate3d(calc(var(--mx, 0) * -8px), 0, 0) scale(1.16);
    transform-origin: top center;
  }

  .hero-section .hero-logo:hover {
    transform: translate3d(calc(var(--mx, 0) * -8px), 0, 0) scale(1.2);
    filter: drop-shadow(0 16px 36px rgba(34, 22, 72, 0.55));
  }

  .hero-section .hero-copy > p {
    font-size: clamp(1.2rem, 5.35vw, 1.54rem);
  }

  .hero-section .hero-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: clamp(8px, 2.8vw, 12px);
    justify-content: center;
    align-items: stretch;
    margin-top: 0;
  }

  .hero-section {
    min-height: max(620px, 100vh);
    min-height: max(620px, 100svh);
    padding-bottom: max(clamp(40px, 10vw, 80px), env(safe-area-inset-bottom, 0px));
    background-position: 0 0, 0 0;
  }

  .hero-bg-video {
    object-position: 52% 50%;
    top: calc(-18px - env(safe-area-inset-top, 0px));
    height: calc(100% + 18px + env(safe-area-inset-top, 0px) + 24px);
  }
  .hero-section .hero-actions .hero-opensea {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
    box-sizing: border-box;
  }

  .island {
    right: -82%;
    bottom: -112px;
    transform: scale(.58);
  }

}

/* Episodes: lectura táctil en teléfonos en vertical (≤680px sobre 760px ×2 cols) */
@media (max-width: 680px) {
  .episode-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .episode-row article {
    min-height: 0;
  }
}

@media (max-width: 600px) {
  .trait-shop {
    padding: clamp(14px, 4vw, 20px);
  }

  .story-section {
    min-height: 0;
    padding: clamp(16px, 4vw, 22px);
  }

  .machine-section {
    padding: clamp(14px, 4vw, 22px);
  }

  .gachapon {
    min-height: clamp(360px, 92vw, 470px);
  }

  .reveal-panel {
    min-height: 0;
  }
}

@media (max-width: 599px) {
  .machine-hero-backdrop .memory-embed-host .topbar {
    padding-left: max(clamp(6px, 2.8vw, 14px), env(safe-area-inset-left, 0px));
    padding-right: max(clamp(6px, 2.8vw, 14px), env(safe-area-inset-right, 0px));
  }

  .machine-hero-backdrop .machine-memory-frame.memory-embed-host .game-shell .content-grid {
    padding-left: max(clamp(6px, 2.8vw, 14px), env(safe-area-inset-left, 0px));
    padding-right: max(clamp(6px, 2.8vw, 14px), env(safe-area-inset-right, 0px));
  }

  .machine-hero-backdrop .memory-embed-host .bottom-controls {
    justify-content: center;
    gap: clamp(10px, 4vw, 24px);
    padding-left: max(8px, env(safe-area-inset-left, 0px));
    padding-right: max(8px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
  }

  .machine-hero-backdrop .machine-memory-frame.memory-embed-host {
    border-radius: clamp(16px, 5.2vw, 36px);
  }
}