/* TurnoMiner · landing de prelanzamiento */
:root {
  color-scheme: dark;
  --ink: #111318;
  --ink-soft: #171a20;
  --ink-raised: #1e222a;
  --ink-deep: #0b0d11;
  --line: #343943;
  --line-soft: rgba(255, 255, 255, .1);
  --text: #f6f5f1;
  --muted: #b7bac1;
  --quiet: #8b909b;
  --gold: #f5b400;
  --gold-light: #ffd24d;
  --gold-dark: #241d0a;
  --rose: #d778af;
  --red: #f36565;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --type-body: clamp(1rem, calc(.96rem + .2vw), 1.125rem);
  --type-small: clamp(.8125rem, calc(.79rem + .12vw), .875rem);
  --type-button: clamp(.9375rem, calc(.91rem + .14vw), 1rem);
  --type-menu: clamp(.9375rem, calc(.9rem + .18vw), 1rem);
  --type-h1: clamp(2.15rem, calc(1.29rem + 4.17vw), 4.65rem);
  --type-h2: clamp(1.8125rem, calc(1.29rem + 2.6vw), 3.375rem);
  --type-h3: clamp(1.375rem, calc(1.23rem + .73vw), 1.8125rem);
  --type-h4: clamp(1.1875rem, calc(1.12rem + .34vw), 1.375rem);
  --type-h5: clamp(1.0625rem, calc(1.02rem + .2vw), 1.1875rem);
  --type-h6: clamp(1rem, calc(.98rem + .1vw), 1.0625rem);
  --container: 1160px;
  --header-height: 76px;
  --motion-fast: 180ms;
  --motion-medium: 320ms;
  --motion-enter: 560ms;
  --ease-motion: cubic-bezier(.2, .7, .2, 1);
  --motion-distance: 16px;
  font-family: var(--font-body);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 20px);
}

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

html { min-width: 320px; background: var(--ink); }
body {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  background: var(--ink);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.65;
}
body, button, a { -webkit-tap-highlight-color: transparent; }
button, a { font: inherit; }
button { color: inherit; }
img, svg { max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1rem; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); line-height: 1.14; letter-spacing: -.035em; }
h1 { font-size: clamp(2.55rem, 5.5vw, 4.65rem); font-weight: 700; }
h2 { font-size: clamp(2rem, 4vw, 3.35rem); font-weight: 600; }
h3 { font-size: clamp(1.18rem, 2vw, 1.45rem); font-weight: 600; }
::selection { color: var(--ink); background: var(--gold-light); }

.container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }
.section-anchor { scroll-margin-top: calc(var(--header-height) + 18px); }
.section-pad { padding-block: clamp(4.6rem, 9vw, 7.6rem); }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link {
  position: fixed;
  z-index: 20;
  top: 10px;
  left: 10px;
  padding: .7rem 1rem;
  transform: translateY(-160%);
  border-radius: 8px;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 4px; }
.reading-progress { position: fixed; z-index: 30; top: 0; left: 0; display: block; width: 100%; height: 3px; margin: 0; appearance: none; border: 0; background: transparent; pointer-events: none; }
.reading-progress::-webkit-progress-bar { background: rgba(255, 255, 255, .045); }
.reading-progress::-webkit-progress-value { background: linear-gradient(90deg, var(--gold), var(--gold-light)); box-shadow: 0 0 12px rgba(245, 180, 0, .38); }
.reading-progress::-moz-progress-bar { background: linear-gradient(90deg, var(--gold), var(--gold-light)); box-shadow: 0 0 12px rgba(245, 180, 0, .38); }

/* Navegación */
.site-header {
  position: sticky;
  z-index: 10;
  top: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .075);
  background: rgba(17, 19, 24, .92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: background-color var(--motion-medium) ease, box-shadow var(--motion-medium) ease;
}
.site-header.is-scrolled { background: rgba(11, 13, 17, .97); box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }
.header-inner { display: flex; min-height: var(--header-height); align-items: center; gap: 1.5rem; transition: min-height var(--motion-medium) ease; }
.site-header.is-scrolled .header-inner { min-height: calc(var(--header-height) - 8px); }
.brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .58rem;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.13rem;
  font-weight: 700;
  letter-spacing: -.025em;
  text-decoration: none;
}
.brand-mark { width: 34px; height: 31px; color: var(--gold); }
.primary-nav { display: flex; align-items: center; justify-content: center; gap: clamp(.9rem, 2vw, 1.7rem); margin-left: auto; }
.primary-nav a { 
  position: relative;
  padding-block: .5rem;
  color: var(--muted);
  font-size: .84rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--motion-fast) ease;
}
.primary-nav a::after {
  position: absolute;
  right: 0;
  bottom: .12rem;
  left: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--gold);
  content: "";
  transition: transform var(--motion-fast) ease;
}
.primary-nav a:hover, .primary-nav a[aria-current="location"] { color: var(--text); }
.primary-nav a:hover::after, .primary-nav a[aria-current="location"]::after { transform: scaleX(1); }
.header-socials { display: flex; flex: 0 0 auto; align-items: center; gap: .38rem; }
.header-social-label { margin-right: .12rem; color: var(--muted); font-size: .72rem; font-weight: 600; white-space: nowrap; }
.header-social-link { display: inline-grid; width: 31px; height: 31px; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; background: rgba(255,255,255,.035); transition: transform var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.header-social-link svg { display: block; width: 23px; height: 23px; }
.header-social-link:hover { transform: translateY(-2px); border-color: rgba(245,180,0,.5); box-shadow: 0 5px 13px rgba(245,180,0,.12); }
.header-social-link:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.menu-toggle { display: none; }

.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: .8rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: .94rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.button:hover { transform: translateY(-2px); }
.button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; transition: transform var(--motion-fast) ease; }
.button:hover svg { transform: translateX(3px); }
.button-small { min-height: 42px; padding: .6rem .9rem; font-size: .82rem; }
.header-cta { flex: 0 0 auto; border-color: rgba(245, 180, 0, .5); color: var(--gold-light); }
.header-cta:hover { border-color: var(--gold); background: rgba(245, 180, 0, .1); }
.button-primary { background: var(--gold); color: #17150c; box-shadow: 0 8px 26px rgba(245, 180, 0, .16); }
.button-primary:hover { background: var(--gold-light); box-shadow: 0 12px 30px rgba(245, 180, 0, .23); }
.button-dark { background: var(--ink); color: var(--text); }
.button-dark:hover { background: #292b2f; }

/* Portada */
.hero {
  position: relative;
  overflow: hidden;
  padding: 3rem 0 1.1rem;
  background:
    radial-gradient(ellipse at 77% 36%, rgba(245, 180, 0, .1), transparent 36%),
    radial-gradient(ellipse at 10% 2%, rgba(255, 255, 255, .045), transparent 35%),
    var(--ink);
}
.hero-layout { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.hero-copy { position: relative; z-index: 2; padding-block: 1rem 2.5rem; }
.status-pill {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: .55rem;
  margin-bottom: 2rem;
  padding: .35rem .75rem;
  border: 1px solid rgba(245, 180, 0, .32);
  border-radius: 99px;
  background: rgba(245, 180, 0, .07);
  color: #ffe18a;
  font-size: .77rem;
  font-weight: 600;
}
.status-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(245, 180, 0, .48); animation: status-dot-pulse 2s ease-out infinite; }
@keyframes status-dot-pulse { 0% { box-shadow: 0 0 0 0 rgba(245, 180, 0, .48); } 75%, 100% { box-shadow: 0 0 0 8px rgba(245, 180, 0, 0); } }
.pill-divider { color: var(--quiet); }
.eyebrow { margin-bottom: 1.15rem; color: var(--gold); font-size: .76rem; font-weight: 700; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; }
.hero h1 { max-width: 13ch; }
.hero-title-line { display: block; overflow: hidden; padding-block: .035em .08em; margin-block: -.035em -.08em; }
.hero-title-text { display: block; }
.hero-title-accent { color: var(--gold); }
.hero-lead { max-width: 37rem; margin: 1.3rem 0 1.65rem; color: #d1d2d5; font-size: clamp(1.05rem, 1.8vw, 1.22rem); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.35rem; }
.text-link { color: var(--text); font-size: .9rem; font-weight: 600; text-decoration-color: rgba(245, 180, 0, .65); text-underline-offset: 5px; }
.text-link span { margin-left: .35rem; color: var(--gold); }
.hero-note { max-width: 35rem; margin: .9rem 0 1.65rem; color: var(--quiet); font-size: .8rem; }
.launch-status { position: relative; display: grid; gap: .4rem; max-width: 34rem; margin: -.7rem 0 1.35rem; padding: 1rem 1.1rem; overflow: hidden; border: 1px solid rgba(245, 180, 0, .42); border-radius: 13px; background: radial-gradient(ellipse at 95% 0, rgba(245, 180, 0, .15), transparent 55%), linear-gradient(135deg, rgba(245, 180, 0, .08), rgba(255, 255, 255, .025)); box-shadow: 0 12px 34px rgba(0, 0, 0, .2), inset 0 0 24px rgba(245, 180, 0, .035); }
.release-status-kicker { color: var(--gold-light); font-size: clamp(.82rem, 1.2vw, .92rem); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.release-status-detail { display: flex; align-items: center; gap: .65rem; color: #f6f5f1; font-size: clamp(1.04rem, 1.65vw, 1.2rem); font-weight: 600; }
.play-store-icon { width: 27px; height: 27px; flex: 0 0 auto; }
.release-wait-indicator { position: relative; display: block; width: 100%; height: 5px; flex: 0 0 5px; align-self: stretch; overflow: hidden; margin-top: .3rem; border-radius: 99px; background: rgba(245, 180, 0, .22); }
.release-wait-indicator span { position: absolute; inset: 0 auto 0 -38%; width: 38%; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--gold), #fff0ae, transparent); box-shadow: 0 0 14px rgba(245, 180, 0, .62); animation: release-wait-sweep 2.8s ease-in-out infinite; }
@keyframes release-wait-sweep { 0% { transform: translateX(0); } 100% { transform: translateX(365%); } }
.release-status-note { margin-top: .12rem; color: #a4a8b1; font-size: .76rem; }
.hero-proof { display: flex; flex-wrap: wrap; gap: .75rem 1.1rem; padding-top: 1.25rem; border-top: 1px solid var(--line-soft); }
.hero-proof span { display: inline-flex; align-items: center; gap: .45rem; color: #c5c6ca; font-size: .75rem; font-weight: 500; }
.hero-proof svg { width: 17px; height: 17px; fill: none; stroke: var(--gold); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.hero-visual { position: relative; display: flex; min-height: 500px; align-items: center; justify-content: center; isolation: isolate; }
.hero-orbit { position: absolute; z-index: -1; border: 1px solid rgba(245, 180, 0, .13); border-radius: 50%; }
.hero-orbit-one { width: 440px; height: 440px; }
.hero-orbit-two { width: 350px; height: 350px; border-style: dashed; border-color: rgba(255, 255, 255, .075); }
.device { position: relative; overflow: hidden; margin: 0; padding: 7px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 32px; background: linear-gradient(145deg, #333844, #12151a 45%, #292d35); box-shadow: 0 34px 80px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .035); }
.device img { display: block; width: 100%; height: auto; border-radius: 25px; }
.device-main { z-index: 1; width: clamp(228px, 23vw, 278px); transform: perspective(1000px) translate3d(var(--tilt-x, 0px), var(--tilt-y, 0px), 0) rotate(-3deg) rotateY(var(--tilt-ry, 0deg)); transition: transform var(--motion-medium) var(--ease-motion); }
.device-secondary { position: absolute; top: 8%; right: 0; z-index: 0; width: clamp(180px, 19vw, 225px); opacity: .88; transform: rotate(5deg); }
.hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.45rem .85rem; border-top: 1px solid rgba(255, 255, 255, .07); }
.hero-bottom p { max-width: 42rem; margin: 0; color: var(--quiet); font-size: .82rem; }
.scroll-cue { flex: 0 0 auto; color: var(--muted); font-size: .78rem; text-decoration: none; }
.scroll-cue span { margin-left: .35rem; color: var(--gold); }

/* Problema cotidiano */
.problem { background: #f1eee6; color: #17181b; }
.section-heading-split { display: grid; grid-template-columns: 1fr minmax(260px, .72fr); align-items: end; gap: 2rem; }
.problem .eyebrow { color: #8d6500; }
.problem h2 { max-width: 14ch; }
.section-intro { max-width: 43rem; color: var(--muted); font-size: 1.02rem; line-height: 1.7; }
.section-heading-split .section-intro { margin: 0 0 .35rem; color: #575a5d; }
.problem-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem; }
.problem-card { min-height: 215px; padding: 1.65rem; border: 1px solid #dddad1; border-radius: 14px; background: #f8f6f0; transition: transform var(--motion-fast) var(--ease-motion), box-shadow var(--motion-fast) ease; }
.problem-card:hover { transform: translateY(-4px); box-shadow: 0 16px 35px rgba(21, 22, 24, .08); }
.problem-index { display: block; margin-bottom: 2rem; color: #927000; font-family: var(--font-display); font-size: .76rem; font-weight: 700; letter-spacing: .08em; }
.problem-card h3 { margin-bottom: .65rem; font-size: 1.22rem; }
.problem-card p { max-width: 30rem; margin: 0; color: #5c5e61; font-size: .92rem; }

/* Funciones */
.features { background: var(--ink); }
.section-heading-centered { max-width: 760px; margin: 0 auto 3rem; text-align: center; }
.section-heading-centered .section-intro { margin: 1rem auto 0; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(335px, 1fr); gap: 1rem; }
.feature-card { display: flex; min-height: 335px; flex-direction: column; padding: 1.5rem; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg, rgba(255, 255, 255, .035), transparent 50%), var(--ink-soft); transition: transform var(--motion-fast) var(--ease-motion), border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.feature-card-highlight { border-color: rgba(245, 180, 0, .55); background: linear-gradient(145deg, rgba(245, 180, 0, .11), rgba(255, 255, 255, .025) 66%), var(--ink-soft); }
.feature-card-highlight .feature-icon { color: var(--gold); }
.feature-card:hover, .feature-card:focus-within { transform: translateY(-3px); border-color: rgba(245, 180, 0, .52); background-color: #1b1e24; box-shadow: 0 14px 28px rgba(0, 0, 0, .18); }
.feature-icon { display: grid; width: 46px; height: 46px; place-items: center; margin-bottom: 1.3rem; border: 1px solid rgba(245, 180, 0, .27); border-radius: 12px; background: rgba(245, 180, 0, .09); color: var(--gold); transition: transform var(--motion-fast) var(--ease-motion), border-color var(--motion-fast) ease, background-color var(--motion-fast) ease; }
.feature-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; transition: transform var(--motion-fast) var(--ease-motion); }
.feature-card:hover .feature-icon, .feature-card:focus-within .feature-icon { transform: translateY(-2px); border-color: rgba(245, 180, 0, .55); background: rgba(245, 180, 0, .14); }
.feature-card:hover .feature-icon svg, .feature-card:focus-within .feature-icon svg { transform: scale(1.04); }
.feature-card h3 { margin-bottom: .7rem; }
.feature-card > p:not(.feature-benefit), .feature-card > div > p { color: #c0c1c5; font-size: .9rem; }
.feature-card .feature-benefit { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line-soft); color: #d7d6d1 !important; font-size: .82rem !important; }
.feature-benefit strong { color: var(--gold-light); }

/* Demo interactiva de ciclo */
.schedule-demo { position: relative; overflow: hidden; background: radial-gradient(ellipse at 10% 10%, rgba(245, 180, 0, .06), transparent 36%), #111318; color: #f6f5f1; }
.schedule-demo, .schedule-demo button { font-family: var(--font-body); }
.schedule-demo .eyebrow { color: var(--gold); }
.schedule-demo .section-intro { color: #c4c7ce; }
.schedule-demo-panel { position: relative; overflow: hidden; max-width: 920px; margin-inline: auto; padding: clamp(.7rem, 2vw, 1rem); border: 1px solid #343943; border-radius: 24px; background: linear-gradient(145deg, #191c22, #111318); box-shadow: 0 24px 70px rgba(0, 0, 0, .32); }
.schedule-demo-panel::before { position: absolute; top: 0; right: 8%; left: 8%; height: 2px; border-radius: 0 0 5px 5px; background: linear-gradient(90deg, transparent, #f5b400 25%, #ffda66 50%, #f5b400 75%, transparent); content: ""; }
.schedule-demo-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.schedule-demo-kicker { margin-bottom: .35rem; color: #8d6500; font-size: .68rem; font-weight: 700; letter-spacing: .13em; }
.schedule-demo-hint { margin: 0; color: #68665f; font-size: .82rem; }
.schedule-demo-legend { display: flex; flex: 0 0 auto; gap: .85rem; padding: .65rem .8rem; border: 1px solid #e8e2d5; border-radius: 999px; background: rgba(255, 255, 255, .72); color: #55534d; font-size: .76rem; }
.schedule-demo-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.schedule-demo-legend i { width: 10px; height: 10px; border-radius: 3px; }
.legend-work { background: #f5b400; }
.legend-rest { border: 1px solid #c9cbd0; background: #e9ebef; }
.demo-calendar-wrap { display: flex; min-width: 0; flex-direction: column; padding: clamp(.7rem, 2vw, 1.15rem); border: 1px solid #343943; border-radius: 20px; background: #0e1014; }
.demo-calendar-controls { display: flex; align-items: flex-end; justify-content: center; gap: clamp(.75rem, 3vw, 2rem); margin-bottom: 1rem; }
.demo-control-group { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: .35rem; }
.demo-control-label { padding-left: .35rem; color: #adb2bc; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.demo-cycle-options { display: flex; width: fit-content; gap: .25rem; margin: 0 auto 1rem; padding: .25rem; border: 1px solid #353943; border-radius: 12px; background: #171a20; }
.demo-calendar-controls .demo-cycle-options { margin: 0; }
.demo-shift-options { display: flex; width: fit-content; gap: .25rem; padding: .25rem; border: 1px solid #353943; border-radius: 12px; background: #171a20; }
.demo-cycle-option { min-width: 58px; min-height: 36px; padding: .35rem .65rem; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #c1c5ce; font-family: var(--font-display); font-size: .75rem; font-weight: 700; cursor: pointer; transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease; }
.demo-cycle-option:hover { color: #fff; transform: translateY(-1px); }
.demo-cycle-option.is-active { border-color: rgba(197, 145, 0, .3); background: linear-gradient(135deg, #ffd963, #f5b400); color: #312300; box-shadow: 0 3px 9px rgba(173, 124, 0, .18); }
.demo-calendar-legend { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: .8rem; color: #aeb3bd; font-size: .76rem; }
.demo-calendar-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.demo-calendar-legend i { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; }
.demo-legend-day { background: #f5b400; }
.demo-legend-night { background: #9a83ef; }
.demo-legend-holiday { background: #ec4248; }
.demo-calendar-legend.is-day-only .demo-legend-night-item { display: none; }
.demo-month-controls { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; order: 4; margin: .9rem 0 0; }
.demo-month-controls h3 { margin: 0; color: #f2f2f4; font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.demo-month-controls button { display: grid; width: 42px; height: 42px; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #f5f5f6; font-size: 1.7rem; line-height: 1; cursor: pointer; transition: background-color .18s ease, color .18s ease, transform .18s ease; }
.demo-month-controls button:hover { transform: scale(1.08); background: #252932; color: var(--gold-light); }
.demo-month-controls button:disabled { transform: none; background: transparent; color: #686d76; cursor: pointer; }
.demo-calendar-note { order: 5; margin: .65rem 0 0; color: #afb3bb; font-size: .76rem; line-height: 1.5; text-align: center; }
.demo-calendar-note.is-notice { color: #ffcf45; font-weight: 700; animation: demo-note-pop .32s ease both; }
@keyframes demo-note-pop { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.demo-weekdays, .demo-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; }
.demo-weekdays { order: 1; margin-bottom: 0; border: 1px solid #292d35; border-bottom: 0; border-radius: 15px 15px 0 0; background: #13161b; color: #9ba0aa; font-size: .76rem; font-weight: 600; text-align: center; }
.demo-weekdays span { padding-block: .72rem; }
.demo-weekdays span + span { border-left: 1px solid #242831; }
.demo-calendar { order: 2; grid-auto-rows: minmax(clamp(60px, 8vw, 90px), auto); overflow: hidden; border: 1px solid #292d35; border-radius: 0 0 15px 15px; background: #111419; }
.demo-calendar.is-updating > .demo-day, .demo-calendar.is-updating > .demo-day-empty { animation: demo-calendar-cell-in .36s var(--ease-motion) both; }
.demo-calendar.is-updating > :nth-child(-n + 7) { animation-delay: 0ms; }
.demo-calendar.is-updating > :nth-child(n + 8):nth-child(-n + 14) { animation-delay: 30ms; }
.demo-calendar.is-updating > :nth-child(n + 15):nth-child(-n + 21) { animation-delay: 60ms; }
.demo-calendar.is-updating > :nth-child(n + 22):nth-child(-n + 28) { animation-delay: 90ms; }
.demo-calendar.is-updating > :nth-child(n + 29):nth-child(-n + 35) { animation-delay: 120ms; }
.demo-calendar.is-updating > :nth-child(n + 36):nth-child(-n + 42) { animation-delay: 150ms; }
@keyframes demo-calendar-cell-in { from { opacity: .25; transform: translateY(5px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
.demo-day { position: relative; display: flex; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .3rem; padding: clamp(.38rem, 1vw, .7rem); border: 0; border-right: 1px solid #252932; border-bottom: 1px solid #252932; border-radius: 0; background: #111419; color: #f1f2f4; font-family: var(--font-body); text-align: left; }
.demo-day strong { font-family: var(--font-display); font-size: clamp(.9rem, 1.5vw, 1.15rem); font-weight: 500; }
.demo-day small { font-size: clamp(.58rem, .8vw, .72rem); font-weight: 700; line-height: 1.1; }
.demo-day.is-work { background: rgba(245, 180, 0, .2); color: #f4f1e6; }
.demo-day.is-work small { color: #ffc928; }
.demo-day.is-night { background: rgba(113, 91, 193, .26); color: #f4f1e6; }
.demo-day.is-night small { color: #b6a3ff; }
.demo-day.is-rest { background: #111419; color: #f1f2f4; }
.demo-day.is-rest small { color: #c7cad0; }
.demo-day.is-holiday { padding-bottom: 1.45rem; }
.demo-holiday-tag { position: absolute; right: 0; bottom: 0; left: 0; display: block; padding: .16rem .2rem; border-radius: 0 0 9px 9px; background: #c92d35; color: #fff; font-size: .52rem; font-weight: 700; letter-spacing: .08em; line-height: 1.3; text-align: center; }
.demo-day.is-today { z-index: 1; box-shadow: inset 0 0 0 2px #e7a900; }
.demo-day-empty { min-height: 1px; border-right: 1px solid #252932; border-bottom: 1px solid #252932; background: #111419; }

/* Galería de capturas reales */
.gallery { overflow: hidden; background: linear-gradient(180deg, #111318 0, rgba(17, 19, 24, .72) 60px, transparent 150px), linear-gradient(0deg, #101216 0, rgba(16, 18, 22, .72) 60px, transparent 150px), linear-gradient(120deg, #191c22, #101216 66%); }
.gallery-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(330px, 1.1fr); align-items: center; gap: clamp(2rem, 8vw, 7rem); }
.gallery-copy h2 { max-width: 12ch; }
.gallery-copy .section-intro { margin: 1.1rem 0 1.7rem; }
.gallery-display { position: relative; display: grid; min-height: 735px; justify-items: center; align-content: center; gap: .5rem; }
.gallery-glow { position: absolute; top: 43%; left: 50%; width: min(80%, 390px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(245, 180, 0, .16), rgba(245, 180, 0, 0) 69%); transform: translate(-50%, -50%); pointer-events: none; }
.gallery-deck { position: relative; z-index: 1; width: min(100%, 640px); height: 680px; overflow: hidden; perspective: 1100px; }
.gallery-device { position: absolute; top: 50%; left: 50%; width: clamp(270px, 28vw, 320px); max-height: 660px; transform-style: preserve-3d; transition: opacity var(--motion-medium) var(--ease-motion), transform var(--motion-medium) var(--ease-motion); }
.gallery-device img { display: block; width: 100%; max-height: 640px; object-fit: contain; object-position: top; }
.gallery-device-active { z-index: 3; transform: translate(-50%, -50%); }
.gallery-device-side { z-index: 2; width: clamp(200px, 22vw, 255px); max-height: 530px; opacity: .66; }
.gallery-device-prev { transform: translate(-95%, -50%) scale(.84) rotateY(9deg); }
.gallery-device-next { transform: translate(-5%, -50%) scale(.84) rotateY(-9deg); }
.gallery-device-active img.is-changing { animation: gallery-screen-arrive .9s cubic-bezier(.22, .68, .28, 1) both; }
.gallery-deck:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; border-radius: 18px; }
.gallery-caption-wrap { position: relative; z-index: 2; width: min(100%, 34rem); margin-inline: auto; }
.gallery-caption { position: relative; max-width: 100%; margin: 0; padding: .7rem .95rem; border: 1px solid var(--line); border-radius: 9px; background: #171a20; color: #dedfe1; font-size: .8rem; text-align: center; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); transition: opacity .35s ease, border-color .45s ease; }
.gallery-caption.is-changing { border-color: rgba(245, 180, 0, .35); opacity: .72; }
.gallery-device-active .gallery-timer { position: absolute; right: 7px; bottom: 7px; left: 7px; z-index: 4; height: 5px; overflow: hidden; border-radius: 0 0 22px 22px; background: rgba(255, 255, 255, .2); box-shadow: 0 0 8px rgba(0, 0, 0, .55); }
.gallery-timer-fill { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #e6a600, #ffd34f); transform: scaleX(0); transform-origin: left center; }
.gallery-timer.is-running .gallery-timer-fill { animation: gallery-timer-progress 4s linear forwards; }
@keyframes gallery-timer-progress { to { transform: scaleX(1); } }
@keyframes gallery-screen-arrive { from { opacity: .45; filter: blur(3px); transform: translateY(5px) scale(1.012); } to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); } }

/* Cómo funciona */
.how { background: #f1eee6; color: #17181b; }
.how .eyebrow { color: #8d6500; }
.how .section-intro { color: #575a5d; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin: 3.5rem 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding-top: 1.25rem; border-top: 1px solid #c8c4ba; }
.step-number { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; margin-bottom: 1.5rem; border-radius: 50%; background: var(--gold); color: #15140f; font-family: var(--font-display); font-size: .9rem; font-weight: 700; }
.step-line { position: absolute; top: 2.73rem; right: -2rem; width: 2rem; height: 1px; transform: scaleX(0); transform-origin: left center; background: #b5a46f; transition: transform var(--motion-enter) var(--ease-motion) .12s; }
.steps li.is-visible .step-line { transform: scaleX(1); }
.steps li:last-child .step-line { display: none; }
.steps h3 { margin-bottom: .7rem; font-size: 1.24rem; }
.steps p { max-width: 20rem; margin: 0; color: #5c5e61; font-size: .92rem; }

/* Proyecto independiente */
.release { background: linear-gradient(180deg, #101216 0, rgba(16, 18, 22, .7) 65px, transparent 150px), radial-gradient(ellipse at 12% 40%, rgba(245, 180, 0, .09), transparent 42%), #101216; }
.release-layout { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.release-copy { width: 100%; max-width: none; }
.release-copy h2 { max-width: 13ch; }
.release-story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: .65rem clamp(2rem, 5vw, 4rem); }
.release-story-grid p { max-width: 72ch; margin-bottom: .8rem; color: var(--muted); font-size: .94rem; }
.release-story-grid .release-lead { grid-column: 1 / -1; max-width: 76ch; margin: .65rem 0 .55rem; color: #dedfe2; font-size: 1.13rem; }
.release-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-top: 1.6rem; }
.release-socials, .footer-socials { display: flex; align-items: center; gap: .65rem; }
.social-icon-link { display: inline-grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; background: rgba(255, 255, 255, .035); transition: transform var(--motion-fast) ease, border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.social-icon-link svg { display: block; width: 27px; height: 27px; }
.social-icon-link:hover { transform: translateY(-2px); border-color: rgba(245, 180, 0, .48); background: rgba(255, 255, 255, .07); box-shadow: 0 6px 18px rgba(245, 180, 0, .1); }
.release-copy > p a { color: var(--gold-light); text-underline-offset: 3px; }
.early-access-copy { max-width: 39rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.early-access-copy .eyebrow { margin-bottom: .55rem; }
.early-access-copy h2 { max-width: 24ch; margin-bottom: .65rem; font-size: clamp(2rem, 4vw, 3.35rem); }
.early-access-copy > p:not(.eyebrow) { max-width: 36rem; color: var(--muted); font-size: .9rem; }
.early-access-copy .button { margin-top: .35rem; }

/* Preguntas frecuentes */
.faq { background: var(--ink); }
.faq-layout { display: grid; grid-template-columns: minmax(230px, .66fr) minmax(0, 1.34fr); gap: clamp(2rem, 8vw, 7rem); }
.faq-heading h2 { max-width: 10ch; }
.faq-heading .section-intro { margin-top: 1rem; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { position: relative; min-height: 62px; padding: 1.15rem 2.5rem 1.15rem 0; color: #f0efeb; cursor: pointer; font-size: .98rem; font-weight: 600; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; top: 50%; right: .2rem; color: var(--gold); content: "+"; font-family: var(--font-display); font-size: 1.65rem; font-weight: 400; transform: translateY(-50%); transition: transform var(--motion-fast) ease; }
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-list details p { max-width: 48rem; margin: -.2rem 2rem 1.2rem 0; color: var(--muted); font-size: .9rem; }
.faq-list details a { color: var(--gold-light); text-underline-offset: 3px; }
.codes { overflow: hidden; background: radial-gradient(ellipse at 50% 100%, rgba(245, 180, 0, .12), transparent 56%), #f1eee6; color: #17181b; }
.codes-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: clamp(2rem, 5vw, 4rem); padding: clamp(1.5rem, 4vw, 3.2rem); overflow: hidden; border: 1px solid rgba(183, 132, 0, .65); border-radius: 20px; background: radial-gradient(ellipse at 100% 0, rgba(255, 214, 94, .46), transparent 42%), linear-gradient(135deg, #fffdf7, #f8edc9 55%, #f2d981); box-shadow: 0 18px 55px rgba(71, 52, 4, .16), inset 0 1px 0 rgba(255, 255, 255, .8); animation: codes-card-glow 4.8s ease-in-out infinite; }
.codes-inner::after { position: absolute; z-index: 0; top: -30%; bottom: -30%; left: -45%; width: 28%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); content: ""; pointer-events: none; transform: skewX(-18deg); animation: codes-sheen 7s ease-in-out infinite; }
.codes-copy, .codes-action { position: relative; z-index: 1; }
.codes-copy { max-width: 47rem; }
.codes-badge { display: inline-flex; align-items: center; gap: .65rem; margin-bottom: 1rem; padding: .4rem .75rem .4rem .4rem; border: 1px solid rgba(141, 101, 0, .22); border-radius: 99px; background: rgba(255, 255, 255, .55); color: #765500; font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.codes-gift-mark { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 50%; background: var(--gold); color: #211900; box-shadow: 0 5px 14px rgba(166, 119, 0, .22); animation: codes-gift-bob 2.8s ease-in-out infinite; }
.codes-gift-mark svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.codes h2 { max-width: 21ch; margin-bottom: .8rem; font-size: clamp(2rem, 3.7vw, 3.15rem); }
.codes-copy > p:not(.codes-badge) { color: #494536; font-size: .92rem; }
.codes-copy .codes-quantity { margin-bottom: .65rem; color: #795800; font-family: var(--font-display); font-size: 1.15rem; }
.codes-quantity strong { color: #a87300; }
.codes-copy .codes-note { margin-bottom: 0; color: #71694f; font-size: .8rem; }
.codes-copy .codes-share-copy { margin-top: 1rem; margin-bottom: .45rem; padding: .8rem .9rem; border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; background: rgba(255, 255, 255, .55); color: #494536; font-size: .82rem; }
.codes-copy .codes-copy-button { padding: 0; border: 0; background: transparent; color: #654a00; font: inherit; font-size: .8rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.codes-copy .codes-copy-button:hover { color: #9a6a00; }
.codes-action { display: grid; flex: 0 0 min(250px, 27%); justify-items: center; gap: 1.1rem; }
.codes-prize { position: relative; display: grid; width: min(100%, 180px); aspect-ratio: 1.55; align-content: center; justify-items: center; gap: .08rem; overflow: hidden; border: 1px dashed #9a6a00; border-radius: 12px; outline: 1px solid rgba(255, 239, 177, .9); outline-offset: -6px; background: radial-gradient(circle at 12% 18%, rgba(255,255,255,.72), transparent 25%), linear-gradient(135deg, #fff3c4 0%, #f5d778 34%, #e9bd4e 62%, #fff0b6 100%); color: #684500; box-shadow: 0 12px 28px rgba(74, 57, 12, .2), inset 0 0 24px rgba(255,255,255,.38); transform: rotate(2deg); transition: transform .35s var(--ease-motion), box-shadow .35s var(--ease-motion); }
.codes-prize::before, .codes-prize::after { position: absolute; top: 50%; width: 20px; height: 20px; border: 1px solid #9a6a00; border-radius: 50%; background: #fff8dc; content: ""; transform: translateY(-50%); }
.codes-prize::before { left: -11px; }
.codes-prize::after { right: -11px; }
.codes-inner:hover .codes-prize { transform: rotate(0) translateY(-3px); }
.codes-prize span { font-size: .62rem; font-weight: 700; letter-spacing: .25em; }
.codes-prize strong { color: #9b6500; font-family: var(--font-display); font-size: 1.75rem; line-height: 1.2; text-shadow: 0 1px rgba(255,255,255,.65); }
.codes-prize small { color: #624d24; font-size: .72rem; }
.codes .button { width: 100%; justify-content: center; }
.codes .button-primary { box-shadow: 0 8px 22px rgba(165, 117, 0, .22); animation: codes-button-pulse 3.2s ease-in-out infinite; }
.codes .button-primary:hover { animation-play-state: paused; box-shadow: 0 12px 28px rgba(165, 117, 0, .32); }
.codes .button-share { border: 1px solid rgba(112, 80, 0, .28); background: rgba(255, 255, 255, .62); color: #4a390b; }
.codes .button-share:hover { border-color: rgba(112, 80, 0, .5); background: #fffdf7; }
.codes-rules-link { display: inline-flex; align-items: center; gap: .4rem; color: #654a00; font-size: .82rem; font-weight: 700; text-underline-offset: 4px; }
.codes-rules-link svg { width: 16px; height: 16px; }
.bonus-game { padding-top: 2rem; background: #101216; }
.bonus-game-card { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2rem; overflow: hidden; padding: clamp(1.4rem, 4vw, 2.4rem); border: 1px solid rgba(245, 180, 0, .48); border-radius: 18px; background: radial-gradient(ellipse at 88% 50%, rgba(116, 80, 18, .24), transparent 34%), radial-gradient(ellipse at 100% 0, rgba(245, 180, 0, .13), transparent 48%), linear-gradient(135deg, #191c22, #111216 70%, #19150d); box-shadow: 0 16px 44px rgba(0, 0, 0, .3), inset 0 0 28px rgba(245, 180, 0, .035); isolation: isolate; }
.bonus-game-card::after { position: absolute; z-index: -1; top: -80%; bottom: -80%; left: -45%; width: 28%; background: linear-gradient(90deg, transparent, rgba(255, 220, 122, .12), transparent); content: ""; transform: rotate(18deg); animation: bonus-game-sheen 8s ease-in-out infinite; pointer-events: none; }
.bonus-game-card > div { max-width: 42rem; }
.bonus-game-kicker { margin-bottom: .65rem; color: var(--gold-light); font-size: .68rem; font-weight: 700; letter-spacing: .13em; }
.bonus-game-card h2 { margin-bottom: .5rem; font-size: clamp(1.45rem, 3vw, 2.15rem); }
.bonus-game-card p:not(.bonus-game-kicker) { margin-bottom: 0; color: var(--muted); font-size: .92rem; }
.bonus-game-link { position: relative; flex: 0 0 auto; min-width: 132px; justify-content: center; border: 1px solid rgba(255, 228, 150, .72); background: linear-gradient(145deg, #ffd45a, #e6a900); box-shadow: 0 0 0 5px rgba(245, 180, 0, .08), 0 0 26px rgba(245, 180, 0, .24); animation: bonus-game-pulse 2.8s ease-in-out infinite; }
.bonus-game-link:hover { transform: translateY(-2px); box-shadow: 0 0 0 7px rgba(245, 180, 0, .1), 0 0 36px rgba(245, 180, 0, .4); }
@keyframes bonus-game-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(245, 180, 0, .07), 0 0 20px rgba(245, 180, 0, .2); } 50% { box-shadow: 0 0 0 8px rgba(245, 180, 0, .11), 0 0 32px rgba(245, 180, 0, .34); } }
@keyframes bonus-game-sheen { 0%, 72%, 100% { left: -45%; opacity: 0; } 78% { opacity: 1; } 92% { left: 125%; opacity: 0; } }
@keyframes codes-card-glow { 0%, 100% { box-shadow: 0 18px 48px rgba(71, 52, 4, .13), inset 0 1px 0 rgba(255, 255, 255, .8); } 50% { box-shadow: 0 22px 60px rgba(133, 94, 0, .21), inset 0 1px 0 rgba(255, 255, 255, .9); } }
@keyframes codes-sheen { 0%, 68%, 100% { left: -45%; opacity: 0; } 75% { opacity: .9; } 90% { left: 125%; opacity: 0; } }
@keyframes codes-gift-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-4deg); } }
@keyframes codes-button-pulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* Llamado final y footer */
.closing-cta { padding-block: clamp(4rem, 8vw, 6.5rem); background: linear-gradient(120deg, #ffca36, var(--gold) 55%, #e4a400); color: #17150f; text-align: center; }
.closing-inner { display: grid; justify-items: center; }
.closing-logo { width: 52px; height: 48px; margin-bottom: 1rem; }
.closing-cta .eyebrow { margin-bottom: .7rem; color: #4f3d0d; }
.closing-cta h2 { max-width: 18ch; font-size: clamp(2.1rem, 4vw, 3.3rem); }
.closing-cta p:not(.eyebrow) { margin: 1rem 0 1.4rem; color: #40371e; }
.site-footer { background: #0b0d11; }
.footer-main { display: grid; grid-template-columns: minmax(260px, 1.2fr) repeat(2, minmax(140px, .55fr)); gap: 3rem; padding-block: 3.2rem; }
.footer-brand-block .brand { margin-bottom: .9rem; }
.footer-brand-block p { max-width: 19rem; margin: 0; color: var(--quiet); font-size: .86rem; }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.footer-column h2 { margin-bottom: .45rem; color: var(--text); font-family: var(--font-body); font-size: .81rem; font-weight: 700; letter-spacing: .02em; }
.footer-column a { color: var(--muted); font-size: .82rem; text-decoration: none; }
.footer-column a:hover, .footer-bottom a:hover { color: var(--gold-light); }
.footer-socials .social-icon-link { width: 36px; height: 36px; border-radius: 9px; }
.footer-socials .social-icon-link svg { width: 24px; height: 24px; }
.footer-bottom { display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid rgba(255, 255, 255, .09); }
.footer-bottom p, .footer-bottom a { margin: 0; color: var(--quiet); font-size: .75rem; }
.footer-bottom a { text-decoration: none; }
.footer-bottom-links { display: flex; align-items: center; gap: 1.25rem; }
.footer-bottom-links a { min-height: 38px; display: inline-flex; align-items: center; }
.footer-bottom-links a:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; border-radius: 2px; }
.back-to-top { position: fixed; z-index: 50; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(255, 228, 150, .72); border-radius: 50%; background: linear-gradient(145deg, #ffd45a, #e6a900); color: #15120a; font-size: 1.5rem; font-weight: 700; line-height: 1; text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .35), 0 0 0 4px rgba(245, 180, 0, .1); }
.back-to-top[hidden] { display: none; }
.back-to-top:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Motion system: entradas cortas, espaciamiento progresivo y contenido visible sin JavaScript. */
@supports (clip-path: inset(100% 0 0)) {
  .motion-ready:not(.reduce-motion) .site-header .brand-mark { clip-path: inset(100% 0 0); animation: brand-mark-reveal .62s var(--ease-motion) .06s both; }
}
.motion-ready:not(.reduce-motion) .site-header .brand > span { animation: brand-name-reveal .42s var(--ease-motion) .2s both; }
.motion-ready:not(.reduce-motion) .hero-copy [data-hero-step] { opacity: 0; animation: hero-element-in .5s var(--ease-motion) both; animation-delay: var(--hero-delay, 0s); }
.hero-copy [data-hero-step="0"] { --hero-delay: .08s; }
.hero-copy [data-hero-step="1"] { --hero-delay: .16s; }
.hero-copy [data-hero-step="3"] { --hero-delay: .42s; }
.hero-copy [data-hero-step="4"] { --hero-delay: .52s; }
.hero-copy [data-hero-step="5"] { --hero-delay: .62s; }
.hero-copy [data-hero-step="6"] { --hero-delay: .7s; }
.motion-ready:not(.reduce-motion) .hero-title-line:first-child .hero-title-text { animation: hero-title-reveal .62s var(--ease-motion) .25s both; }
.motion-ready:not(.reduce-motion) .hero-title-line:nth-child(2) .hero-title-text { animation: hero-title-reveal .62s var(--ease-motion) .36s both, hero-accent-reveal .3s ease-out .65s both; }
.motion-ready:not(.reduce-motion) .hero-visual.is-visible .device-main { animation: hero-device-arrive .82s var(--ease-motion) .05s backwards; }
.motion-ready:not(.reduce-motion) .hero-visual.is-visible .device-secondary { animation: hero-device-depth .8s var(--ease-motion) .15s backwards; }
@keyframes brand-mark-reveal { to { clip-path: inset(0); } }
@keyframes brand-name-reveal { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }
@keyframes hero-element-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-title-reveal { from { opacity: 0; transform: translateY(108%); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-accent-reveal { from { color: var(--text); } to { color: var(--gold); } }
@keyframes hero-device-arrive {
  from { opacity: 0; transform: perspective(1000px) translate3d(0, 18px, 0) rotate(-3deg) scale(.96); }
  to { opacity: 1; transform: perspective(1000px) translate3d(var(--tilt-x, 0px), var(--tilt-y, 0px), 0) rotate(-3deg) rotateY(var(--tilt-ry, 0deg)) scale(1); }
}
@keyframes hero-device-depth { from { opacity: 0; transform: translate3d(8px, 14px, 0) rotate(5deg) scale(.98); } to { opacity: .88; transform: translate3d(0, 0, 0) rotate(5deg) scale(1); } }
.js-ready [data-reveal] { opacity: 0; transform: translate3d(0, var(--motion-distance), 0); transition: opacity var(--motion-enter) ease, transform var(--motion-enter) var(--ease-motion); }
.js-ready [data-reveal="from-left"] { transform: translate3d(-18px, 0, 0); }
.js-ready [data-reveal="scale"] { transform: translate3d(0, 10px, 0) scale(.985); }
.js-ready [data-reveal].is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.js-ready .problem-grid > [data-reveal]:nth-child(2),
.js-ready .feature-grid > [data-reveal]:nth-child(2),
.js-ready .steps > [data-reveal]:nth-child(2) { transition-delay: 70ms; }
.js-ready .problem-grid > [data-reveal]:nth-child(3),
.js-ready .feature-grid > [data-reveal]:nth-child(3),
.js-ready .steps > [data-reveal]:nth-child(3) { transition-delay: 140ms; }
.js-ready .feature-grid > [data-reveal]:nth-child(4) { transition-delay: 210ms; }
.js-ready .feature-grid > [data-reveal]:nth-child(5) { transition-delay: 280ms; }
.js-ready .feature-grid > [data-reveal]:nth-child(6) { transition-delay: 350ms; }
.js-ready.reduce-motion [data-reveal] { opacity: 1; transform: none; transition: none; }

@media (max-width: 960px) {
  :root { --header-height: 70px; }
  .header-inner { gap: .8rem; }
  .primary-nav { gap: .85rem; }
  .primary-nav a { font-size: .77rem; }
  .header-cta { padding-inline: .7rem; font-size: .76rem; }
  .hero-layout { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 1rem; }
  .hero-visual { min-height: 440px; }
  .hero-orbit-one { width: 360px; height: 360px; }
  .hero-orbit-two { width: 290px; height: 290px; }
  .device-main { width: 235px; }
  .device-secondary { width: 185px; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-layout { row-gap: 2.5rem; }
}

@media (max-width: 760px) {
  :root { --header-height: 66px; }
  .bonus-game-card { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .bonus-game-link { width: 100%; justify-content: center; }
  .container { width: min(calc(100% - 36px), var(--container)); }
  .header-inner { position: relative; justify-content: space-between; }
  .brand { gap: .42rem; font-size: 1rem; }
  .brand-mark { width: 30px; height: 28px; }
  .header-socials { order: 2; gap: .22rem; margin-left: auto; }
  .header-social-label { font-size: .65rem; }
  .header-social-link { width: 29px; height: 29px; border-radius: 7px; }
  .header-social-link svg { width: 21px; height: 21px; }
  .menu-toggle { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; order: 3; border: 1px solid var(--line); border-radius: 9px; background: var(--ink-soft); color: var(--text); cursor: pointer; }
  body.menu-open { overflow: hidden; }
  .menu-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
  .menu-icon-close { display: none; }
  .menu-open .menu-icon-open { display: none; }
  .menu-open .menu-icon-close { display: block; }
  .primary-nav { position: absolute; top: calc(100% + 1px); right: -18px; left: -18px; display: flex; visibility: visible; align-items: stretch; flex-direction: column; gap: 0; margin: 0; padding: .55rem 18px .8rem; transform: translateY(0); border-bottom: 1px solid var(--line); background: rgba(17, 19, 24, .98); box-shadow: 0 18px 22px rgba(0, 0, 0, .24); opacity: 1; transition: opacity var(--motion-fast) ease, transform var(--motion-fast) var(--ease-motion), visibility var(--motion-fast) ease; }
  .js-ready:not(.menu-open) .primary-nav { visibility: hidden; transform: translateY(-8px); pointer-events: none; opacity: 0; }
  .primary-nav a { min-height: 46px; padding: .65rem .2rem; border-bottom: 1px solid rgba(255, 255, 255, .06); color: #d6d6d8; font-size: .92rem; }
  .primary-nav a:last-child { border-bottom: 0; }
  .demo-header-cta { display: inline-flex; }
  .primary-nav a::after { display: none; }
  .header-cta { min-height: 40px; order: 2; margin-left: auto; padding: .55rem .68rem; font-size: .76rem; }
  .header-cta svg { display: none; }
  .hero { padding-top: 1rem; }
  .hero-layout { grid-template-columns: 1fr; gap: .5rem; }
  .hero-copy, .hero-visual, .gallery-copy, .gallery-display, .release-copy, .faq-heading, .faq-list, .codes-copy, .codes-action { min-width: 0; }
  .hero-copy { padding-top: 0; padding-bottom: 0; }
  .launch-status { width: 100%; max-width: 100%; box-sizing: border-box; }
  .hero h1 { max-width: 15ch; font-size: clamp(2.55rem, 10vw, 4rem); }
  .hero-visual { min-height: 465px; margin-top: .65rem; }
  .hero-bottom { align-items: flex-start; }
  .scroll-cue { display: none; }
  .section-heading-split, .gallery-layout, .release-layout, .faq-layout { grid-template-columns: 1fr; }
  .section-heading-split { gap: .7rem; }
  .section-heading-split .section-intro { max-width: 42rem; }
  .problem-grid { gap: .75rem; margin-top: 2rem; }
  .problem-card { min-height: 195px; padding: 1.3rem; }
  .problem-index { margin-bottom: 1.35rem; }
  .gallery-layout { gap: 2rem; }
  .gallery-copy h2 { max-width: 17ch; }
  .gallery-display { min-height: 720px; }
  .gallery-deck { height: 570px; }
  .gallery-device { width: min(290px, 73vw); }
  .gallery-device-side { width: min(235px, 60vw); }
  .release-layout { gap: 2rem; }
  .release-story-grid { grid-template-columns: 1fr; gap: 0; }
  .release-story-grid .release-lead { grid-column: auto; }
  .codes-inner { align-items: flex-start; flex-direction: column; gap: .7rem; }
  .codes-action { width: min(100%, 320px); flex: initial; align-self: center; }
  .codes .button { width: 100%; justify-content: center; }
  .faq-layout { gap: 2rem; }
  .faq-heading h2 { max-width: 20ch; }
  .footer-main { gap: 2rem; }
}

@media (max-width: 560px) {
  .container { width: min(calc(100% - 30px), var(--container)); }
  .section-pad { padding-block: 2.65rem; }
  .header-inner { gap: .48rem; }
  .header-socials { gap: .16rem; }
  .header-social-label { margin-right: 0; font-size: .59rem; }
  .header-social-link { width: 27px; height: 27px; }
  .header-social-link svg { width: 19px; height: 19px; }
  .brand { font-size: .93rem; }
  .brand-mark { width: 27px; height: 25px; }
  .header-cta { min-height: 38px; padding-inline: .58rem; font-size: .7rem; }
  .menu-toggle { width: 39px; height: 39px; }
  .primary-nav { right: -15px; left: -15px; padding-inline: 15px; }
  .status-pill { gap: .4rem; font-size: .68rem; }
  .hero { padding-top: .65rem; }
  .hero-title-line { padding-block: .03em .07em; }
  .hero h1 { font-size: clamp(2.28rem, 10.5vw, 3.4rem); }
  .hero-lead { font-size: 1rem; }
  .release-status-kicker { font-size: .78rem; letter-spacing: .06em; }
  .release-status-detail { font-size: 1.02rem; }
  .hero-actions { align-items: stretch; gap: .8rem; }
  .hero-actions .button { width: 100%; }
  .hero-actions .text-link { align-self: center; }
  .hero-proof { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem .55rem; }
  .hero-proof span { font-size: .7rem; }
  .hero-visual { min-height: 390px; }
  .hero-orbit-one { width: 310px; height: 310px; }
  .hero-orbit-two { width: 240px; height: 240px; }
  .device-main { width: 205px; }
  .device-secondary { top: 10%; right: -2%; width: 155px; }
  .hero-bottom p { font-size: .76rem; }
  .problem-grid, .feature-grid, .steps { grid-template-columns: 1fr; }
  .feature-grid { grid-auto-rows: auto; }
  .problem-card { min-height: 0; }
  .problem-index { margin-bottom: .9rem; }
  .section-heading-centered { margin-bottom: 1.4rem; text-align: left; }
  .section-heading-centered .section-intro { margin-inline: 0; }
  .feature-card { min-height: 0; padding: 1.3rem; }
  .gallery-display { min-height: 0; align-content: start; gap: .35rem; padding-block: 1.25rem; }
  .gallery-deck { width: 100%; height: min(145vw, 620px); overflow: hidden; }
  .gallery-device { width: min(280px, 68vw); }
  .gallery-device-side { width: min(195px, 46vw); }
  .gallery-caption { max-width: 94%; padding: .65rem .75rem; font-size: .72rem; }
  .schedule-demo-panel { border-radius: 19px; }
  .schedule-demo-legend { gap: .6rem; padding: .55rem .7rem; }
  .demo-calendar-wrap { padding: .5rem; }
  .demo-weekdays, .demo-calendar { gap: .22rem; }
  .demo-calendar { grid-auto-rows: minmax(48px, auto); }
  .demo-day { padding: .35rem .28rem; }
  .demo-day strong { font-size: .78rem; }
  .demo-day small { font-size: .56rem; }
  .demo-month-controls { grid-template-columns: 38px 1fr 38px; }
  .demo-month-controls button { width: 34px; height: 34px; }
  .steps { gap: 1.7rem; margin-top: 2.6rem; }
  .steps li { padding-top: .9rem; }
  .step-number { margin-bottom: .9rem; }
  .step-line { display: none; }
  .faq-list summary { font-size: .91rem; }
  .closing-cta { padding-block: 3.8rem; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; padding-block: 2.5rem; }
  .footer-brand-block { grid-column: 1 / -1; }
  .footer-bottom { min-height: 68px; align-items: flex-start; justify-content: center; flex-direction: column; gap: .3rem; padding-block: .8rem; }
}

@media (max-width: 360px) {
  .container { width: calc(100% - 24px); }
  .brand { font-size: .84rem; }
  .brand-mark { width: 24px; }
  .header-cta { padding-inline: .45rem; font-size: .66rem; }
  .header-inner { gap: .38rem; }
  .status-pill { flex-wrap: wrap; }
  .hero h1 { font-size: 2.16rem; }
  .hero-visual { min-height: 345px; }
  .device-main { width: 184px; }
  .device-secondary { width: 135px; }
  .hero-proof span { font-size: .66rem; }
  .gallery-display { min-height: 0; padding-block: 1.25rem; }
  .gallery-deck { height: min(145vw, 560px); overflow: hidden; }
  .gallery-device { width: min(240px, 68vw); }
  .gallery-device-side { width: min(175px, 46vw); }
}

@media (max-width: 340px) {
  .header-cta { max-width: 138px; white-space: normal; line-height: 1.15; text-align: center; }
  .launch-status { margin-top: -.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .release-wait-indicator span { animation: none; inset-inline-start: 31%; width: 38%; opacity: .8; }
}

@media (min-width: 961px) {
  .release-copy h2 { max-width: none; white-space: nowrap; }
  .gallery-layout { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(3.5rem, 7vw, 7rem); }
  .gallery-display { min-height: 755px; }
  .gallery-deck { width: min(100%, 680px); height: 700px; }
  .gallery-device { width: clamp(290px, 24vw, 340px); max-height: 680px; }
  .gallery-device img { max-height: 660px; }
  .gallery-device-side { width: clamp(210px, 18vw, 265px); max-height: 560px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js-ready [data-reveal] { opacity: 1; transform: none; }
  .motion-ready .site-header .brand > span { animation: none !important; }
}

/* Legibilidad y adaptación global */
body { line-height: 1.7; }
.section-intro { line-height: 1.75; }
.hero-note, .release-status-note, .footer-brand-block p, .footer-bottom p, .footer-bottom a { color: #aeb3bd; }
.hero-bottom p { color: #aeb3bd; }
.problem-card p, .steps p { color: #4e5156; line-height: 1.7; }
.schedule-demo .section-intro { color: #c4c7ce; }
.demo-calendar-note { color: #afb3bb; font-size: .76rem; line-height: 1.5; }
.demo-weekdays { color: #65676d; }
.demo-day small { font-size: .65rem; font-weight: 700; }
.feature-card > p:not(.feature-benefit), .feature-card > div > p { color: #d0d2d7; line-height: 1.7; }
.release-story-grid p, .early-access-copy > p:not(.eyebrow), .faq-list details p, .bonus-game-card p:not(.bonus-game-kicker) { color: #c9cbd1; line-height: 1.75; }
.gallery-caption { color: #f0f1f3; line-height: 1.6; }
.codes-copy .codes-note, .codes-prize small { color: #5d543c; }
.footer-column a { color: #c5c8cf; }
.social-icon-link { color: #e0e2e6; }
.faq-list summary { line-height: 1.5; }
.faq-list details p { font-size: .94rem; }
button, a { touch-action: manipulation; }
.official-channels { gap: .85rem; min-width: 0; }
.official-channels h2 { margin-bottom: .25rem; font-size: 1.05rem; }
.official-channels .footer-socials { gap: .8rem; }
.official-channels .social-icon-link { width: 48px; height: 48px; border-radius: 12px; }
.official-channels .social-icon-link svg { width: 31px; height: 31px; }
.official-channels > a { font-size: .95rem; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .section-pad { padding-block: clamp(2.75rem, 7vw, 3.8rem); }
  .section-heading-centered { margin-bottom: 2rem; }
  .section-intro { font-size: 1rem; }
  .hero-layout { gap: .25rem; }
  .hero-copy { max-width: 42rem; }
  .hero-proof { gap: .7rem 1rem; }
  .hero-proof span { font-size: .78rem; }
  .problem-card { padding: 1.35rem; }
  .feature-card { padding: 1.4rem; }
  .feature-card > p:not(.feature-benefit), .feature-card > div > p { font-size: .96rem; }
  .gallery-layout { row-gap: 2.5rem; }
  .gallery-copy .section-intro { margin-bottom: 0; }
  .gallery-display { min-height: 0; padding-block: 1.25rem; }
  .gallery-deck { width: 100%; height: min(145vw, 620px); overflow: hidden; }
  .gallery-device { width: min(280px, 68vw); }
  .gallery-device-side { width: min(195px, 46vw); }
  .demo-calendar-wrap { padding: clamp(.55rem, 2.5vw, .85rem); }
  .demo-calendar-note { font-size: .78rem; }
  .release-story-grid p, .early-access-copy > p:not(.eyebrow), .faq-list details p { font-size: .98rem; }
  .faq-list summary { min-height: 58px; padding-block: 1rem; font-size: 1rem; }
  .codes-copy > p:not(.codes-badge) { font-size: .98rem; line-height: 1.7; }
  .codes-copy .codes-note { font-size: .88rem; }
  .footer-brand-block p { font-size: .92rem; line-height: 1.65; }
  .footer-column a { min-height: 38px; display: inline-flex; align-items: center; font-size: .9rem; }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .container { width: min(calc(100% - 32px), var(--container)); }
  .section-pad { padding-block: 2.7rem; }
  h2 { font-size: clamp(1.85rem, 8.5vw, 2.45rem); line-height: 1.12; }
  .eyebrow { margin-bottom: .9rem; font-size: .72rem; letter-spacing: .1em; }
  .section-intro { font-size: .98rem; line-height: 1.7; }
  .section-heading-centered { margin-bottom: 1.65rem; }
  .hero h1 { font-size: clamp(2.35rem, 10.6vw, 3.4rem); line-height: 1.08; }
  .hero-lead { font-size: 1.02rem; line-height: 1.65; }
  .hero-note { font-size: .88rem; line-height: 1.6; }
  .hero-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-proof span { align-items: flex-start; font-size: .76rem; line-height: 1.4; }
  .problem-grid { gap: .7rem; }
  .problem-card { padding: 1.2rem; }
  .problem-card p { font-size: .96rem; }
  .feature-grid { gap: .75rem; }
  .feature-card { padding: 1.2rem; }
  .gallery-deck { height: min(145vw, 620px); }
  .gallery-device { width: min(280px, 68vw); }
  .gallery-device-side { width: min(195px, 46vw); }
  .gallery-caption { max-width: 100%; font-size: .84rem; line-height: 1.5; }
  .schedule-demo-panel { padding: .6rem; }
  .demo-calendar-wrap { padding: .55rem .4rem; border-radius: 14px; }
  .demo-calendar-controls { align-items: center; flex-direction: column; gap: .65rem; }
  .demo-control-group { align-items: center; }
  .demo-control-label { padding: 0; }
  .demo-shift-options { max-width: calc(100vw - 52px); }
  .demo-cycle-option { min-width: 56px; min-height: 38px; padding-inline: .55rem; font-size: .72rem; }
  .demo-weekdays, .demo-calendar { gap: 0; }
  .demo-weekdays { font-size: .72rem; }
  .demo-calendar { grid-auto-rows: minmax(50px, auto); }
  .demo-day { min-height: 58px; padding: .38rem .26rem; border-radius: 0; }
  .demo-day strong { font-size: .84rem; }
  .demo-day small { font-size: clamp(.52rem, 2.1vw, .63rem); line-height: 1.15; }
  .demo-day.is-holiday { padding-bottom: 1.25rem; }
  .demo-holiday-tag { font-size: .46rem; }
  .demo-month-controls h3 { font-size: .98rem; }
  .demo-month-controls button { width: 36px; height: 36px; }
  .demo-cycle-option { min-width: 62px; min-height: 38px; font-size: .8rem; }
  .demo-calendar-note { margin-top: .7rem; font-size: .77rem; }
  .release-story-grid .release-lead { font-size: 1.05rem; line-height: 1.6; }
  .faq-list summary { padding-right: 2.2rem; font-size: .96rem; }
  .faq-list details p { margin-right: .2rem; font-size: .94rem; }
  .codes-inner { padding: 1.2rem; }
  .codes-copy > p:not(.codes-badge) { font-size: .96rem; }
  .codes-copy .codes-share-copy { font-size: .88rem; line-height: 1.6; }
  .codes-action { width: 100%; max-width: 340px; }
  .codes .button { min-height: 48px; }
  .bonus-game-card { padding: 1.25rem; }
  .bonus-game-card p:not(.bonus-game-kicker) { font-size: .96rem; }
  .closing-cta p:not(.eyebrow) { font-size: .98rem; line-height: 1.65; }
  .footer-main { gap: 1.5rem 1rem; }
}

@media (max-width: 380px) {
  .container { width: calc(100% - 26px); }
  .header-inner { gap: .3rem; }
  .brand { gap: .32rem; font-size: .88rem; }
  .brand-mark { width: 24px; height: 23px; }
  .header-cta { max-width: 132px; padding-inline: .48rem; font-size: .68rem; }
  .menu-toggle { width: 37px; height: 37px; }
  .status-pill { font-size: .66rem; }
  .hero h1 { font-size: clamp(2.15rem, 10.8vw, 2.55rem); }
  .hero-visual { min-height: 330px; }
  .device-main { width: 178px; }
  .device-secondary { width: 130px; }
  .demo-day small { font-size: .5rem; }
  .demo-cycle-option { min-width: 55px; }
  .footer-main { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .footer-main > .official-channels { grid-column: 1 / -1; align-items: center; width: 100%; }
  .official-channels .footer-socials { justify-content: center; gap: .9rem; width: 100%; }
  .official-channels .social-icon-link { width: 31px; height: 31px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .official-channels .social-icon-link:hover { transform: none; border: 0; background: transparent; box-shadow: none; }
  .official-channels .social-icon-link svg { width: 27px; height: 27px; }
  .official-channels > a[href^="mailto:"] { justify-content: center; align-self: center; text-align: center; }
}

/* Higher text contrast and sharper type across the full landing page. */
:root { --muted: #c2c5cd; --quiet: #adb3be; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }
body { line-height: 1.7; }
.section-intro,.hero-lead,.feature-card>p:not(.feature-benefit),.feature-card>div>p,.release-story-grid p,.early-access-copy>p:not(.eyebrow),.faq-list details p,.bonus-game-card p:not(.bonus-game-kicker),.closing-cta p:not(.eyebrow) { color:#d3d6dc; line-height:1.72; }
.hero-note,.release-status-note,.footer-brand-block p,.footer-bottom p,.footer-bottom a,.hero-bottom p { color:#c0c5ce; }
.problem-card p,.steps p { color:#373b42; line-height:1.72; }
.schedule-demo .section-intro { color:#d0d3da; }
.demo-calendar-note { color:#c2c7d0; font-size:.82rem; line-height:1.55; }
.demo-weekdays { color:#aab1bd; }
.demo-day small { font-size:clamp(.58rem,2vw,.68rem); font-weight:700; line-height:1.25; }
.gallery-caption { color:#fff; line-height:1.65; }
.codes-copy .codes-note,.codes-prize small { color:#51451f; }
.footer-column a { color:#d4d7dd; }
.faq-list summary { color:#fff; line-height:1.55; }
.eyebrow { text-shadow:0 0 .01px currentColor; }
.hero-proof span,.release-status-kicker,.release-wait-indicator span,.bonus-game-kicker { font-weight:700; }
.release-status-detail { color:#fff; line-height:1.45; }
.official-channels>a { color:#f1f2f5; }
.demo-calendar-note,.codes-copy .codes-share-copy { line-height:1.65; }
@media(max-width:560px){.section-intro,.hero-lead,.feature-card>p:not(.feature-benefit),.feature-card>div>p,.release-story-grid p,.early-access-copy>p:not(.eyebrow),.faq-list details p,.bonus-game-card p:not(.bonus-game-kicker),.closing-cta p:not(.eyebrow){font-size:1rem;line-height:1.7}.demo-calendar-note{font-size:.8rem}}

/* Invitacion previa a la DEMO */
.demo-invite{position:fixed;width:min(560px,calc(100vw - 32px));max-width:none;max-height:min(88dvh,760px);overflow:auto;padding:clamp(24px,5vw,42px);border:1px solid rgba(245,180,0,.4);border-radius:22px;background:radial-gradient(ellipse at 88% 0,rgba(245,180,0,.14),transparent 45%),linear-gradient(145deg,#171a20,#101216);color:#f6f5f1;box-shadow:0 28px 90px rgba(0,0,0,.62)}.demo-invite[open]{animation:demo-invite-enter .24s cubic-bezier(.2,.8,.2,1) both}.demo-invite::backdrop{background:rgba(3,5,8,.76);backdrop-filter:blur(7px)}.demo-invite-close{position:absolute;top:13px;right:14px;display:grid;width:38px;height:38px;place-items:center;border:1px solid rgba(255,255,255,.12);border-radius:50%;background:rgba(255,255,255,.04);color:#c5cbd3;font-size:1.5rem;cursor:pointer}.demo-invite>.eyebrow{margin:0 42px 12px 0;color:#f5bd22;font-size:var(--type-small);font-weight:700;letter-spacing:.16em}.demo-invite h2{max-width:15ch;margin:0 0 12px;font:600 var(--type-h2)/1.1 var(--font-display);letter-spacing:-.04em}.demo-invite>p:not(.eyebrow){margin:0;color:#c0c5ce;font-size:var(--type-body);line-height:1.7}.demo-invite-features{display:grid;gap:9px;margin:20px 0 24px;padding:17px 18px 17px 36px;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:rgba(255,255,255,.025);color:#e4e6e9;font-size:var(--type-small);line-height:1.5}.demo-invite-features li::marker{color:#f5b400}.demo-invite-actions{display:grid;gap:13px}.demo-invite-actions .button{min-height:48px;justify-content:center;text-decoration:none}.demo-invite-coming-soon{margin:0;color:#e3c66c;font-size:var(--type-small);font-weight:600;line-height:1.5;text-align:center}@keyframes demo-invite-enter{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:520px){.demo-invite{width:calc(100vw - 24px);padding:27px 20px 22px;border-radius:18px}.demo-invite>p:not(.eyebrow){font-size:var(--type-body)}.demo-invite-features{gap:8px;margin:17px 0 20px;padding:14px 14px 14px 32px;font-size:var(--type-small)}.demo-invite-coming-soon{font-size:var(--type-small)}}@media(prefers-reduced-motion:reduce){.demo-invite[open]{animation:none}}
.demo-invite.is-closing{animation:demo-invite-exit .18s ease-in both}.demo-invite-enter{position:relative;overflow:hidden;transition:transform .22s ease,filter .22s ease,background-color .22s ease}.demo-invite-enter:hover{transform:translateY(-2px)}.demo-invite-enter:disabled{cursor:wait;opacity:1}.demo-invite-enter.is-loading{background:#29261d;color:#fff;transform:none}.demo-invite-progress-track{position:absolute;right:9px;bottom:5px;left:9px;height:4px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.2)}.demo-invite-progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:#ffe08a;animation:demo-invite-progress 2s linear forwards}.demo-invite-progress-text{position:relative;z-index:1;padding-bottom:5px}.demo-invite-enter.is-welcome{background:#e9b52f;color:#17130a;animation:demo-invite-welcome 1s ease both}@keyframes demo-invite-progress{to{width:100%}}@keyframes demo-invite-exit{to{opacity:0;transform:translateY(8px) scale(.985)}}@keyframes demo-invite-welcome{50%{transform:scale(1.035)}to{transform:scale(1)}}@media(prefers-reduced-motion:reduce){.demo-invite.is-closing,.demo-invite-enter.is-welcome{animation:none}.demo-invite-progress-track span{animation-duration:0s}}

/* Promocion de la version Web en la portada */
.web-version-promo{display:grid;gap:.7rem;margin:-.45rem 0 1.1rem;padding:1rem 1.05rem;border:1px solid rgba(245,180,0,.34);border-radius:14px;background:linear-gradient(120deg,rgba(245,180,0,.1),rgba(255,255,255,.025));box-shadow:0 10px 28px rgba(0,0,0,.16)}.web-version-kicker{margin:0 0 .3rem;color:var(--gold-light);font-size:.63rem;font-weight:700;letter-spacing:.14em}.web-version-copy h2{margin:0 0 .25rem;font:650 1.25rem/1.2 var(--font-display);letter-spacing:-.025em}.web-version-copy>p:last-child{margin:0;color:#c6c9d0;font-size:.82rem;line-height:1.5}.web-version-actions{display:flex;flex-wrap:wrap;gap:.55rem}.web-version-actions .button{min-height:43px;flex:1 1 150px;justify-content:center;padding:.65rem .8rem;font-size:.82rem}
@media(max-width:560px){.web-version-promo{gap:.6rem;margin:-.2rem 0 1rem;padding:.85rem}.web-version-copy h2{font-size:1.15rem}.web-version-copy>p:last-child{font-size:.78rem}.web-version-actions{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}.web-version-actions .button{min-width:0;min-height:42px;padding:.6rem .42rem;font-size:.74rem}}
@media(max-width:350px){.web-version-actions{grid-template-columns:1fr}}

@media(max-width:760px){
  .feature-grid{grid-auto-rows:auto;gap:.55rem}
  .feature-card{display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:.6rem;row-gap:0;min-height:0;padding:.75rem;border-radius:12px}
  .feature-card .feature-icon{grid-column:1;grid-row:1;width:30px;height:30px;margin:0;border-radius:9px}
  .feature-card .feature-icon svg{width:17px;height:17px}
  .feature-card h3{grid-column:2;grid-row:1;align-self:center;margin:0;font-size:.9rem;line-height:1.25}
  .feature-card>p:not(.feature-benefit),.feature-card>div>p{grid-column:1/-1;margin:.45rem 0 0;font-size:.8rem;line-height:1.45}
  .feature-card .feature-benefit{grid-column:1/-1;margin-top:.5rem;padding-top:.5rem;font-size:.75rem!important}
}

@media (min-width: 761px) { .hero-copy:has(> .launch-status) { display: flex; flex-direction: column; } .hero-copy:has(> .launch-status) > .launch-status, .hero-copy:has(> .launch-status) > .web-version-promo { width: min(100%, 35rem); max-width: 35rem; box-sizing: border-box; } .hero-copy:has(> .launch-status) > .launch-status { min-height: 137px; margin-bottom: .9rem; } .hero-copy:has(> .launch-status) > .web-version-promo { min-height: 178px; margin: 0 0 1.1rem; } .hero-copy:has(> .launch-status) > .web-version-promo .web-version-actions { margin-top: auto; } }
@media (max-width: 560px) {
  .web-version-coming-soon .web-version-actions { display:grid; grid-template-columns:minmax(0,1fr); width:100%; }
  .web-version-coming-soon .web-version-actions .button { width:100%; min-width:0; }
}

/* Initial cycle setup for the interactive schedule preview. */
.schedule-demo-panel { isolation:isolate; }
.demo-setup-overlay[hidden] { display:none; }
.demo-setup-overlay { position:absolute; inset:0; z-index:5; display:grid; place-items:center; padding:clamp(14px,3vw,30px); border-radius:inherit; background:rgba(7,9,13,.9); backdrop-filter:blur(10px); }
.demo-setup-card { display:grid; width:min(100%,520px); max-height:100%; gap:12px; overflow:auto; padding:clamp(18px,3vw,28px); border:1px solid rgba(245,180,0,.38); border-radius:18px; background:linear-gradient(145deg,#1b1e24,#111318); box-shadow:0 20px 60px #0008; }
.demo-setup-card .eyebrow { margin:0; font-size:.65rem; }
.demo-setup-card h3 { margin:0; font:600 clamp(1.25rem,3vw,1.65rem)/1.2 var(--font-display); }
.demo-setup-card>p:not(.eyebrow) { margin:0; color:#c5c9d1; font-size:.85rem; line-height:1.5; }
.demo-setup-field { display:grid; gap:6px; }
.demo-setup-field .demo-control-label { color:#c5c9d1; font-size:.72rem; font-weight:700; }
.demo-setup-options { display:flex; flex-wrap:wrap; gap:5px; }
.demo-setup-options .demo-cycle-option { min-width:0; min-height:34px; padding:.35rem .58rem; font-size:.7rem; }
.demo-setup-phases .demo-cycle-option { flex:1 1 calc(50% - 5px); }
.demo-setup-day { display:grid; gap:7px; color:#e7e8eb; font-size:.78rem; font-weight:600; }
.demo-setup-day select { width:100%; min-height:44px; padding:8px 12px; border:1px solid #3c414a; border-radius:9px; background:#101318; color:#fff; font:inherit; }
.demo-setup-day select:focus-visible { outline:2px solid #f5b400; outline-offset:2px; }
.demo-setup-submit { min-height:44px; justify-content:center; }
.demo-reconfigure-button { align-self:flex-start; order:6; margin:0 0 .65rem; padding:.35rem 0; border:0; background:transparent; color:#f2c237; font-size:.72rem; font-weight:600; cursor:pointer; }
@media(max-width:560px) {
  .demo-setup-overlay { padding:10px; }
  .demo-setup-card { gap:9px; padding:15px; border-radius:14px; }
  .demo-setup-card h3 { font-size:1.2rem; }
  .demo-setup-card>p:not(.eyebrow) { font-size:.75rem; }
  .demo-setup-options { gap:4px; }
  .demo-setup-options .demo-cycle-option { min-height:30px; padding:.28rem .42rem; font-size:.64rem; }
  .demo-setup-phases .demo-cycle-option { flex:1 1 calc(50% - 4px); }
  .demo-setup-day { font-size:.72rem; }
  .demo-setup-submit { min-height:40px; }
  .demo-cycle-options { gap:2px; padding:3px; }
  .demo-calendar-controls .demo-cycle-option { min-width:42px; min-height:31px; padding:.28rem .38rem; font-size:.64rem; }
  .demo-shift-options .demo-cycle-option { min-width:0; padding-inline:.42rem; font-size:.62rem; }
  .demo-reconfigure-button { font-size:.68rem; }
}

/* The welcome and setup steps stay inside the demo card without covering the page. */
.demo-setup-flow { position:relative; display:grid; place-items:center; min-height:230px; padding:clamp(12px,2.5vw,24px); }
.demo-setup-flow[hidden],.demo-setup-card[hidden],.demo-calendar-wrap[hidden] { display:none !important; }
.demo-setup-flow .demo-setup-card { width:min(100%,680px); max-height:none; overflow:visible; margin:auto; }
.demo-setup-flow .demo-setup-welcome { width:min(100%,480px); text-align:center; justify-items:center; padding:clamp(22px,4vw,38px); }
.demo-setup-flow .demo-setup-welcome .demo-setup-submit { width:min(100%,300px); }
.demo-setup-flow .demo-setup-config { width:min(100%,680px); }
.demo-setup-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:4px; }
.demo-setup-actions .button { min-height:42px; padding:.65rem 1rem; }
.demo-setup-back { border:1px solid #444954; background:#171a20; color:#e2e5ea; }
@media(max-width:560px) {
  .demo-setup-flow { min-height:250px; padding:8px; }
  .demo-setup-flow .demo-setup-card { gap:9px; padding:14px; }
  .demo-setup-flow .demo-setup-welcome { padding:22px 16px; }
  .demo-setup-actions { display:grid; grid-template-columns:.75fr 1.25fr; gap:7px; }
  .demo-setup-actions .button { min-height:40px; padding:.55rem .5rem; font-size:.72rem; }
}
.demo-calendar-controls { align-items:center; justify-content:space-between; margin-bottom:.7rem; }
.demo-projection-title { margin:0; color:#f4f4f2; font:600 1.05rem/1.25 var(--font-display); }
.demo-calendar-controls .demo-reconfigure-button { order:0; margin:0; }
@media(max-width:560px) {
  .demo-calendar-controls { align-items:center; flex-direction:row; gap:8px; }
  .demo-projection-title { font-size:.95rem; }
  .demo-calendar-controls .demo-reconfigure-button { font-size:.66rem; white-space:nowrap; }
}
.demo-setup-config .demo-setup-options { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); width:100%; }
.demo-setup-config .demo-setup-field:nth-of-type(2) .demo-setup-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
.demo-setup-config .demo-setup-phases { grid-template-columns:repeat(4,minmax(0,1fr)); }
.demo-setup-config .demo-setup-options .demo-cycle-option { width:100%; min-width:0; padding-inline:.35rem; }
.demo-setup-actions { display:grid; grid-template-columns:1fr 1.5fr; width:100%; }
.demo-setup-actions .button { width:100%; justify-content:center; }
@media(max-width:560px) {
  .demo-setup-config .demo-setup-options { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .demo-setup-config .demo-setup-phases { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .demo-setup-config .demo-setup-options .demo-cycle-option { padding-inline:.2rem; font-size:.6rem; }
  .demo-setup-actions { grid-template-columns:1fr 1.35fr; }
}
.demo-setup-config .demo-setup-field:nth-of-type(2) .demo-setup-options { grid-template-columns:repeat(3,minmax(0,1fr)); }
.demo-setup-config .demo-setup-phases { grid-template-columns:repeat(3,minmax(0,1fr)); }
.demo-legend-afternoon { background:#6684db; }
.demo-calendar-legend.is-triple .demo-legend-afternoon-item { display:inline-flex; }
.demo-day.is-morning { background:rgba(111,91,190,.22); color:#f4f1e6; }
.demo-day.is-morning small { color:#c6adff; }
.demo-day.is-afternoon { background:rgba(79,105,183,.24); color:#f4f1e6; }
.demo-day.is-afternoon small { color:#b9c6ff; }
@media(max-width:560px) {
  .demo-setup-config .demo-setup-field:nth-of-type(2) .demo-setup-options { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .demo-setup-config .demo-setup-phases { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .demo-setup-config .demo-setup-field:nth-of-type(2) .demo-cycle-option { padding-inline:.16rem; font-size:.56rem; }
}
.demo-calendar-legend .demo-legend-afternoon-item[hidden] { display:none; }
.demo-setup-config .demo-setup-phases { grid-template-columns:repeat(4,minmax(0,1fr)); }
.demo-setup-config .demo-setup-phases.is-rotation { grid-template-columns:repeat(3,minmax(0,1fr)); }
.demo-setup-config .demo-setup-phases.is-day-only { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:560px) {
  .demo-setup-config .demo-setup-phases { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .demo-setup-config .demo-setup-phases.is-rotation { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .demo-setup-config .demo-setup-phases.is-day-only { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Overrides finales para mantener la escala en todos los breakpoints. */
:root { font-synthesis:none; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { font-size:var(--type-body); line-height:1.65; }
p { text-wrap:pretty; }
h1,h2,h3,h4,h5,h6 { text-wrap:balance; line-height:1.2; letter-spacing:-.025em; }
h1 { font-size:var(--type-h1); line-height:1.12; }
h2 { font-size:var(--type-h2); }
h3 { font-size:var(--type-h3); }
h4 { font-size:var(--type-h4); }
h5 { font-size:var(--type-h5); }
h6 { font-size:var(--type-h6); }
.hero h1 { font-size:var(--type-h1); }
.hero-lead,.section-intro { max-width:68ch; font-size:var(--type-body); line-height:1.65; }
.release-story-grid p,.faq-list details p,.early-access-copy>p:not(.eyebrow),.bonus-game-card p:not(.bonus-game-kicker),.release-story-grid .release-lead,.codes-copy>p:not(.codes-badge) { max-width:68ch; }
.button { min-height:44px; font-size:var(--type-button); }
.button-small { min-height:44px; }
.primary-nav a { display:inline-flex; min-height:44px; align-items:center; font-size:var(--type-menu); }
.footer-column a { min-height:44px; }
.demo-cycle-option,.demo-setup-config .demo-setup-options .demo-cycle-option { min-height:44px; font-size:var(--type-small); }
.demo-setup-actions .button { min-height:44px; }
.demo-month-controls button { width:44px; height:44px; }
.schedule-demo-hint,.demo-weekdays { color:#aeb3bd; }
.demo-invite>.eyebrow,.demo-invite-features,.demo-invite-coming-soon { font-size:var(--type-small); }
.demo-invite h2 { font-size:var(--type-h2); }
.demo-invite>p:not(.eyebrow) { font-size:var(--type-body); }
.demo-invite-close { width:44px; height:44px; font-size:1.5rem; }
.demo-invite-actions .button { min-height:48px; }
@media(max-width:680px) {
  .official-channels .social-icon-link { width:44px; height:44px; border:0; border-radius:0; background:transparent; box-shadow:none; }
  .official-channels .social-icon-link:hover { transform:none; border:0; background:transparent; box-shadow:none; }
}

@media (max-width: 680px) {
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .5rem; row-gap: 1.5rem; padding-block: 2rem; }
  .footer-brand-block { grid-column: 1; display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; }
  .footer-brand-block .brand { justify-content: center; margin-inline: auto; }
  .footer-brand-block p { max-width: 17ch; font-size: .84rem; line-height: 1.5; }
  .footer-main > .official-channels { grid-column: 2; align-items: center; justify-self: stretch; width: 100%; gap: .65rem; }
  .official-channels h2 { margin: 0; font-size: .95rem; text-align: center; white-space: nowrap; }
  .official-channels .footer-socials { width: 100%; justify-content: center; gap: .35rem; }
  .official-channels .social-icon-link { width: 44px; height: 44px; }
  .official-channels .social-icon-link svg { width: 32px; height: 32px; }
  .official-channels > a[href^="mailto:"] { max-width: 100%; align-self: center; font-size: .74rem; overflow-wrap: anywhere; text-align: center; }
  .footer-main > .footer-demo-card { grid-column: 1 / -1; justify-self: center; width: min(100%, 420px); }
}