@font-face { font-family: 'AleteveDisplay'; src: url('assets/berlin.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --bg: #070a0f;
  --bg-soft: #0d1219;
  --panel: #101720;
  --panel-2: #141d28;
  --text: #f7fbf9;
  --muted: #9eabb6;
  --line: rgba(255,255,255,.09);
  --green: #45f882;
  --green-soft: rgba(69,248,130,.15);
  --yellow: #ffbe18;
  --shadow: 0 24px 70px rgba(0,0,0,.34);
  --radius: 24px;
  --max: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .26;
  background-image:
    linear-gradient(rgba(69,248,130,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(69,248,130,.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
  z-index: -2;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }

.container { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--green);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 20px; height: 2px; background: var(--green); box-shadow: 0 0 12px var(--green); }
.section-title {
  font-family: "AleteveDisplay", system-ui, sans-serif;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -.04em;
  margin: 12px 0 14px;
}
.section-copy { color: var(--muted); max-width: 660px; margin: 0; font-size: 1.04rem; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(7,10,15,.76);
  backdrop-filter: blur(18px);
}
.nav {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}
.brand img { width: 178px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-links a {
  padding: 10px 14px;
  color: #dce4e9;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
  border-radius: 12px;
  transition: .2s ease;
}
.nav-links a:hover, .nav-links a.active { background: var(--green-soft); color: var(--green); }
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: #10161d;
  color: var(--text);
  border-radius: 13px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}

.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 880;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
  background: #000;
}
.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  z-index: -3;
}
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(3,5,9,.18) 0%, rgba(3,5,9,.04) 38%, rgba(3,5,9,.02) 66%, rgba(3,5,9,.10) 100%),
    linear-gradient(0deg, rgba(7,10,15,.92) 0%, rgba(7,10,15,.20) 22%, transparent 48%);
}
.hero-content {
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding-bottom: 62px;
}
.hero-intro {
  width: min(520px, 100%);
  padding: 22px 24px 24px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 22px;
  background: rgba(5,8,13,.70);
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 70px rgba(0,0,0,.28);
}
.hero h1 {
  font-family: "AleteveDisplay", system-ui, sans-serif;
  font-size: clamp(2.7rem, 5.7vw, 4.8rem);
  line-height: .92;
  letter-spacing: -.055em;
  margin: 12px 0 15px;
}
.hero h1 span { color: var(--green); text-shadow: 0 0 30px rgba(69,248,130,.18); }
.hero p { color: #d0d8dd; max-width: 440px; font-size: clamp(.96rem, 1.3vw, 1.07rem); margin: 0; }
.hero .actions { margin-top: 22px; }
.hero-scroll {
  position: absolute;
  right: max(22px, calc((100vw - var(--max)) / 2));
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255,255,255,.72);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .7rem;
  font-weight: 800;
}
.hero-scroll b {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  color: var(--green);
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 31px; }
.btn {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-weight: 900;
  letter-spacing: .045em;
  text-transform: uppercase;
  font-size: .88rem;
  transition: transform .2s ease, filter .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--green); color: #06110a; box-shadow: 0 12px 32px rgba(69,248,130,.16); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-secondary { border-color: var(--line); background: rgba(255,255,255,.06); color: var(--text); }
.btn-secondary:hover { border-color: rgba(69,248,130,.36); background: rgba(5,10,8,.72); }

.section { padding: 100px 0; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 34px; }

.game-slider-wrap { position: relative; display: flex; align-items: center; gap: 14px; }
.game-cards {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1 1 auto;
  padding-bottom: 2px;
}
.game-cards::-webkit-scrollbar { display: none; }
.slider-btn {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  transition: .2s ease;
}
.slider-btn:hover { border-color: rgba(69,248,130,.36); color: var(--green); background: rgba(69,248,130,.08); }
.slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.slider-dot { width: 10px; height: 10px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); cursor: pointer; }
.slider-dot.active { background: var(--green); box-shadow: 0 0 16px rgba(69,248,130,.35); }

.game-card {
  position: relative;
  min-width: 0;
  flex: 0 0 calc((100% - 20px) / 2);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.game-card:hover { transform: translateY(-6px); border-color: rgba(69,248,130,.28); box-shadow: var(--shadow); }
.game-thumb { aspect-ratio: 16/10; overflow: hidden; background: #0d1117; }
.game-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 36%; transition: transform .4s ease; }
.game-thumb-wide img { object-position: center center; }
.game-thumb-focus-top img { object-position: center 4%; }
.game-thumb-focus-top-strong img { object-position: center 3%; }
.game-card:hover .game-thumb img { transform: scale(1.035); }
.game-card-content { padding: 22px; display: flex; flex-direction: column; flex: 1 1 auto; }
.game-kicker { color: var(--green); text-transform: uppercase; font-size: .75rem; letter-spacing: .12em; font-weight: 800; }
.game-card h3 { font-family: "AleteveDisplay", system-ui, sans-serif; margin: 7px 0 8px; font-size: 1.32rem; line-height: 1.1; }
.game-card p { color: var(--muted); margin: 0 0 14px; font-size: .95rem; }
.card-facts { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 17px; }
.card-facts span { padding: 5px 8px; border-radius: 999px; background: rgba(69,248,130,.075); border: 1px solid rgba(69,248,130,.13); color: #b8c6ce; font-size: .72rem; font-weight: 750; }
.text-link { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-weight: 800; }
.game-card-content .text-link { margin-top: auto; }
.text-link:hover { gap: 11px; }

.feature-strip {
  display: grid;
  grid-template-columns: 1.22fr .78fr;
  gap: 28px;
  padding: 28px 32px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: linear-gradient(120deg, rgba(69,248,130,.075), rgba(255,255,255,.02) 44%, rgba(255,190,24,.04));
  overflow: hidden;
}
.feature-strip .cover-mini { display: grid; place-items: center; }
.feature-strip .cover-mini img { width: min(225px, 72%); border-radius: 20px; transform: rotate(2.5deg); box-shadow: var(--shadow); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
.tag { padding: 7px 10px; border-radius: 999px; border: 1px solid var(--line); color: #c8d2d9; background: rgba(255,255,255,.035); font-size: .78rem; font-weight: 700; }

.about { position: relative; }
.about::before { content: ""; position: absolute; left: -12%; top: 14%; width: 340px; height: 340px; border-radius: 50%; background: rgba(69,248,130,.07); filter: blur(80px); pointer-events: none; }
.about-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 58px; align-items: center; }
.profile-card {
  position: relative;
  min-height: 390px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: #0d131b;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.profile-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(69,248,130,.18), transparent 38%); }
.profile-card::after { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(69,248,130,.13); border-radius: 22px; pointer-events: none; z-index: 2; }
.profile-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 36%;
}
.profile-card::before { z-index: 1; background: linear-gradient(0deg, rgba(7,10,15,.50) 0%, rgba(7,10,15,.04) 42%, transparent 72%); }
.pixel-avatar {
  position: relative;
  z-index: 2;
  width: 148px;
  height: 148px;
  display: grid;
  place-items: center;
  border: 2px solid var(--green);
  border-radius: 28px;
  background: #090d12;
  color: var(--green);
  font-family: "AleteveDisplay", system-ui, sans-serif;
  font-size: 5.1rem;
  font-weight: 800;
  line-height: 1;
  transform: rotate(-4deg);
  box-shadow: 12px 12px 0 rgba(69,248,130,.08), 0 0 50px rgba(69,248,130,.12);
}
.profile-note { position: absolute; left: 30px; bottom: 28px; z-index: 4; font-family: "AleteveDisplay", system-ui, sans-serif; font-size: .78rem; color: #9fa9b2; }
.about-copy p { color: #b0bbc3; font-size: 1.05rem; }
.about-copy strong { color: var(--text); }

.page-hero { padding: 86px 0 58px; position: relative; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; width: 430px; height: 430px; right: -120px; top: -220px; background: radial-gradient(circle, rgba(69,248,130,.17), transparent 68%); filter: blur(10px); pointer-events: none; }
.page-hero h1 { font-family: "AleteveDisplay", system-ui, sans-serif; font-size: clamp(2.8rem, 8vw, 5.6rem); line-height: .96; letter-spacing: -.055em; margin: 14px 0 18px; }
.page-hero p { color: var(--muted); max-width: 680px; margin: 0; font-size: 1.08rem; }

.game-browser { padding: 12px 0 110px; }
.game-selector {
  display: grid;
  grid-template-columns: 280px minmax(0,1fr);
  gap: 20px;
  align-items: stretch;
}
.game-tabs { display: flex; flex-direction: column; gap: 11px; }
.game-tab {
  width: 100%;
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 14px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #0d131a;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: .2s ease;
}
.game-tab:hover { border-color: rgba(69,248,130,.24); background: #101922; }
.game-tab.active { border-color: rgba(69,248,130,.52); background: linear-gradient(100deg, rgba(69,248,130,.12), #0f171f 60%); box-shadow: inset 3px 0 0 var(--green); }
.game-tab img { width: 72px; height: 86px; object-fit: cover; border-radius: 12px; }
.game-tab small { display: block; color: var(--green); font-size: .69rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.game-tab strong { display: block; margin-top: 4px; font-family: "AleteveDisplay", system-ui, sans-serif; line-height: 1.1; font-size: .96rem; }

.game-stage {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
  background: #0c1218;
  box-shadow: var(--shadow);
}
.video-wrap { position: relative; aspect-ratio: 16/9; background: #020304; overflow: hidden; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.game-info { padding: 30px; display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; }
.game-info h2 { font-family: "AleteveDisplay", system-ui, sans-serif; font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 10px; }
.game-info p { color: var(--muted); max-width: 740px; margin: 0; }
.game-info .tags { margin-top: 18px; }
.game-facts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; margin-top: 20px; }
.game-facts > div { min-width: 0; padding: 12px 13px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.025); }
.game-facts small { display: block; color: #7f8d97; font-size: .67rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.game-facts strong { display: block; margin-top: 3px; color: #eaf0f3; font-size: .87rem; line-height: 1.25; }
.play-note { color: #778590; font-size: .82rem; margin-top: 13px !important; }

.howto {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.howto-item { border: 1px solid var(--line); border-radius: 19px; padding: 19px; background: rgba(255,255,255,.02); }
.howto-item span { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 11px; background: var(--green-soft); color: var(--green); font-weight: 900; margin-bottom: 12px; }
.howto-item strong { display: block; font-family: "AleteveDisplay", system-ui, sans-serif; font-size: .95rem; }
.howto-item p { color: var(--muted); font-size: .89rem; margin: 4px 0 0; }

.site-footer { border-top: 1px solid var(--line); padding: 34px 0; background: #05070a; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.footer-brand img { width: 142px; margin-bottom: 9px; }
.footer-brand p { margin: 0; color: #77838d; font-size: .87rem; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
.footer-links a { color: #9aa6af; font-size: .88rem; font-weight: 700; }
.footer-links a:hover { color: var(--green); }
.copyright { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.055); color: #5f6c76; font-size: .8rem; display: flex; justify-content: space-between; gap: 18px; }

@media (max-width: 900px) {
  .hero { aspect-ratio: 16 / 8.1; }
  .hero-image { object-position: 62% center; }
  .hero-content { padding-bottom: 34px; }
  .slider-btn { display: none; }
  .feature-strip, .about-grid { grid-template-columns: 1fr; }
  .feature-strip .cover-mini { order: -1; }
  .profile-card { min-height: 320px; }
  .game-selector { grid-template-columns: 1fr; }
  .game-tabs { flex-direction: row; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .game-tab { min-width: 245px; }
}

@media (max-width: 700px) {
  .container { width: min(100% - 28px, var(--max)); }
  .nav { min-height: 68px; }
  .brand img { width: 148px; }
  .menu-toggle { display: inline-flex; }
  .nav-links {
    position: absolute;
    left: 14px;
    right: 14px;
    top: 76px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: rgba(10,14,20,.97);
    box-shadow: var(--shadow);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 14px; }
  .hero { aspect-ratio: auto; height: 56svh; min-height: 390px; max-height: 560px; }
  .hero-image { object-position: 72% center; }
  .hero-shade {
    background:
      linear-gradient(0deg, rgba(7,10,15,.96) 0%, rgba(7,10,15,.62) 36%, rgba(7,10,15,.04) 68%),
      linear-gradient(90deg, rgba(3,5,9,.08), transparent 70%);
  }
  .hero-content { align-items: flex-end; padding-bottom: 30px; }
  .hero-intro { width: 100%; padding: 19px 19px 20px; background: rgba(5,8,13,.74); }
  .hero h1 { font-size: clamp(2.65rem, 13vw, 4.3rem); }
  .hero-scroll { display: none; }
  .section { padding: 76px 0; }
  .section-head { align-items: flex-start; flex-direction: column; }
  .game-card { flex-basis: 100%; }
  .game-thumb { aspect-ratio: 16/9; }
  .slider-dots { margin-top: 14px; }
  .feature-strip { padding: 25px; }
  .about-grid { gap: 30px; }
  .page-hero { padding: 62px 0 45px; }
  .game-browser { padding-bottom: 78px; }
  .game-info { grid-template-columns: 1fr; gap: 22px; padding: 23px; }
  .game-info .btn { width: 100%; }
  .game-facts { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-inner, .copyright { flex-direction: column; align-items: flex-start; }
  .footer-links { justify-content: flex-start; }
}

@media (max-width: 430px) {
  .hero { height: 470px; min-height: 0; }
  .hero-image { object-position: 75% center; }
  .hero-intro { padding: 17px; border-radius: 18px; }
  .hero .eyebrow { font-size: .68rem; }
  .hero h1 { font-size: clamp(2.5rem, 12.5vw, 3.65rem); }
  .hero p { font-size: .92rem; }
  .hero .actions .btn { width: 100%; }
  .actions .btn { width: 100%; }
  .game-tab { min-width: 225px; grid-template-columns: 62px 1fr; }
  .game-tab img { width: 62px; height: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* Ajustes v5: hero sin zoom y bloques compactos */
.accent-word { color: var(--green); }

.hero {
  height: clamp(390px, 31vw, 520px);
  min-height: 0;
  max-height: none;
  background: #000;
}
.hero-image {
  object-fit: contain;
  object-position: center top;
}
.hero-content { padding-bottom: 38px; }
.hero-intro { padding: 18px 21px 20px; }
.hero h1 { font-size: clamp(2.55rem, 4.7vw, 4.15rem); }
.hero-scroll { bottom: 20px; }

.feature-strip {
  grid-template-columns: 1.35fr .65fr;
  gap: 28px;
  padding: 28px 32px;
  align-items: center;
}
.feature-strip .cover-mini img {
  width: min(225px, 76%);
  border-radius: 18px;
  transform: rotate(3deg);
}
.feature-strip .actions { margin-top: 24px; }

@media (max-width: 900px) {
  .hero { height: clamp(350px, 45vw, 430px); min-height: 0; max-height: none; background:#000; }
  .hero-image { object-fit: contain; object-position: center top; }
  .hero-content { padding-bottom: 28px; }
  .feature-strip { grid-template-columns: 1.2fr .8fr; }
  .feature-strip .cover-mini { order: 0; }
}

@media (max-width: 700px) {
  .hero { height: 430px; min-height: 0; background:#000; }
  .hero-image { object-fit: contain; object-position: center top; }
  .hero-content { padding-bottom: 18px; }
  .hero-intro { width: min(430px, 100%); padding: 15px 16px 16px; }
  .hero h1 { font-size: clamp(2.25rem, 10.5vw, 3.45rem); }
  .hero p { font-size: .9rem; }
  .hero .actions { margin-top: 15px; }
  .hero .btn { min-height: 44px; padding-inline: 16px; }
  .feature-strip { grid-template-columns: 1fr; gap: 20px; padding: 23px; }
  .feature-strip .cover-mini { order: -1; }
  .feature-strip .cover-mini img { width: min(190px, 58vw); }
}

@media (max-width: 430px) {
  .hero { height: 405px; min-height: 0; background:#000; }
  .hero-image { object-fit: contain; object-position: center top; }
}

.howto { display:none !important; }
.accent-word { color: var(--green); }


/* Corrección final v5: nunca ampliar el hero para rellenar.
   Si sobra espacio, queda negro. */
.hero-image {
  object-fit: contain !important;
  object-position: center top !important;
}


/* Ritmo vertical de la home v7: separaciones más compactas y uniformes */
.section-games { padding: 56px 0 28px; }
.section-new { padding: 28px 0; }
.section-about { padding: 28px 0 64px; }

@media (max-width: 700px) {
  .section-games { padding: 44px 0 22px; }
  .section-new { padding: 22px 0; }
  .section-about { padding: 22px 0 52px; }
}


/* =========================================================
   APPS · Mundial 2026
   ========================================================= */
.apps-page { overflow: hidden; }
.app-project-hero {
  position: relative;
  padding: 76px 0 72px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 78% 28%, rgba(69,248,130,.10), transparent 28%),
    radial-gradient(circle at 70% 66%, rgba(58,107,255,.13), transparent 32%),
    linear-gradient(180deg, #080c12 0%, #070a0f 100%);
}
.app-project-hero::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,black,transparent 85%);
}
.app-project-grid {
  position:relative;
  display:grid;
  grid-template-columns: 1.02fr .98fr;
  gap:58px;
  align-items:center;
}
.app-project-copy h1 {
  font-family:"AleteveDisplay",system-ui,sans-serif;
  font-size:clamp(3.25rem,6.8vw,6.15rem);
  line-height:.9;
  letter-spacing:-.055em;
  margin:16px 0 22px;
  max-width:720px;
}
.app-project-copy h1 span { color:var(--green); text-shadow:0 0 35px rgba(69,248,130,.15); }
.app-lead { max-width:650px; margin:0 0 14px; color:#eef3f5; font-size:clamp(1.08rem,1.8vw,1.28rem); line-height:1.5; }
.app-project-copy > p:not(.app-lead) { max-width:650px; color:var(--muted); margin:0; }
.app-stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:30px; max-width:660px; }
.app-stat-row div { padding:13px 12px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.028); }
.app-stat-row strong { display:block; color:var(--green); font-family:"AleteveDisplay",system-ui,sans-serif; font-size:1.28rem; line-height:1; }
.app-stat-row span { display:block; margin-top:5px; color:#8d9aa4; font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.app-hero-actions { margin-top:24px; }
.app-cta-note { margin-top:9px; color:#687680; font-size:.78rem; }
.app-section-cta { flex:0 0 auto; }

.app-project-visual { position:relative; min-height:570px; display:flex; align-items:center; justify-content:center; }
.album-glow { position:absolute; width:460px; height:460px; border-radius:50%; background:radial-gradient(circle,rgba(69,248,130,.15),rgba(65,94,255,.08) 42%,transparent 70%); filter:blur(22px); }
.panini-album { position:absolute; width:min(310px,49%); left:3%; bottom:10%; z-index:4; transform:rotate(-8deg); filter:drop-shadow(0 28px 34px rgba(0,0,0,.52)); }
.phone-shell {
  position:relative;
  width:100%;
  padding:8px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:34px;
  background:linear-gradient(145deg,#202832,#05080c 48%,#1b232c);
  box-shadow:0 28px 80px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.04);
}
.phone-shell::after { content:""; position:absolute; inset:8px; border-radius:27px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); pointer-events:none; }
.phone-shell img { width:100%; border-radius:27px; display:block; }
.phone-speaker { position:absolute; z-index:4; top:13px; left:50%; transform:translateX(-50%); width:64px; height:6px; border-radius:99px; background:rgba(0,0,0,.78); box-shadow:0 1px 0 rgba(255,255,255,.09); }
.phone-hero { width:min(330px,62%); margin-left:25%; z-index:2; transform:rotate(4deg); }

.app-story-section { padding:68px 0; }
.app-story-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:start; }
.app-story-copy { padding-left:30px; border-left:1px solid rgba(69,248,130,.28); }
.app-story-copy p { color:#aeb9c1; margin:0 0 16px; font-size:1.05rem; }
.app-story-copy p:last-child { margin-bottom:0; }
.app-story-copy strong { color:#edf3f5; }

.app-screens-section { padding:64px 0 72px; background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0)); border-top:1px solid rgba(255,255,255,.035); border-bottom:1px solid rgba(255,255,255,.035); }
.app-section-head { margin-bottom:44px; align-items:end; }
.phone-gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; align-items:start; }
.app-shot { margin:0; min-width:0; }
.app-shot .phone-shell { max-width:260px; margin:0 auto; }
.app-shot-1 .phone-shell { transform:rotate(-2deg); }
.app-shot-2 { margin-top:32px; }
.app-shot-2 .phone-shell { transform:rotate(2deg); }
.app-shot-3 .phone-shell { transform:rotate(-1.5deg); }
.app-shot-4 { margin-top:32px; }
.app-shot-4 .phone-shell { transform:rotate(2.2deg); }
.app-shot figcaption { max-width:260px; margin:22px auto 0; }
.app-shot figcaption strong { display:block; font-family:"AleteveDisplay",system-ui,sans-serif; font-size:1.02rem; line-height:1.1; }
.app-shot figcaption span { display:block; margin-top:7px; color:#8997a1; font-size:.87rem; line-height:1.5; }

.app-features-section { padding:72px 0; }
.app-feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.app-feature-card { position:relative; min-height:220px; padding:25px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); overflow:hidden; }
.app-feature-card::after { content:""; position:absolute; width:130px; height:130px; border-radius:50%; right:-55px; bottom:-68px; background:rgba(69,248,130,.055); filter:blur(4px); }
.app-feature-highlight { border-color:rgba(69,248,130,.30); background:linear-gradient(145deg,rgba(69,248,130,.085),rgba(255,255,255,.018)); }
.app-feature-num { display:block; color:var(--green); font-family:"AleteveDisplay",system-ui,sans-serif; font-size:.78rem; letter-spacing:.12em; }
.app-feature-card h3 { margin:24px 0 9px; font-family:"AleteveDisplay",system-ui,sans-serif; font-size:1.25rem; line-height:1.1; }
.app-feature-card p { position:relative; z-index:1; margin:0; color:#98a5ae; font-size:.92rem; }

.app-mid-cta { padding:0 0 72px; }
.app-mid-cta-panel { display:flex; align-items:center; justify-content:space-between; gap:34px; padding:30px 34px; border:1px solid rgba(69,248,130,.25); border-radius:26px; background:linear-gradient(110deg,rgba(69,248,130,.09),rgba(255,255,255,.018) 55%,rgba(69,248,130,.04)); }
.app-mid-cta-panel h2 { margin:8px 0 6px; font-family:"AleteveDisplay",system-ui,sans-serif; font-size:clamp(1.8rem,4vw,2.75rem); line-height:1; }
.app-mid-cta-panel p { margin:0; color:var(--muted); max-width:650px; }

.app-home-feature { position:relative; overflow:hidden; }
.app-home-visual { position:relative; min-height:330px; display:flex; align-items:center; justify-content:center; }
.app-home-visual::before { content:""; position:absolute; width:330px; height:330px; border-radius:50%; background:radial-gradient(circle,rgba(69,248,130,.14),rgba(52,92,255,.08) 48%,transparent 72%); filter:blur(16px); }
.app-home-phone { width:min(205px,54%); z-index:2; transform:rotate(4deg) translateX(25px); }
.app-home-album { position:absolute; z-index:4; width:min(190px,46%); left:4%; bottom:3%; transform:rotate(-8deg); filter:drop-shadow(0 20px 28px rgba(0,0,0,.48)); }

.app-tech-section { padding:0 0 72px; }
.app-tech-panel { display:grid; grid-template-columns:1.25fr .75fr; gap:45px; align-items:center; padding:36px 40px; border:1px solid rgba(69,248,130,.19); border-radius:28px; background:linear-gradient(120deg,rgba(69,248,130,.065),rgba(255,255,255,.018) 48%,rgba(62,91,255,.055)); }
.app-tech-chips { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:9px; }
.app-tech-chips span { padding:10px 13px; border-radius:999px; border:1px solid rgba(255,255,255,.1); background:rgba(5,9,13,.62); color:#d6dee3; font-size:.8rem; font-weight:800; letter-spacing:.04em; }
.app-project-note { padding-top:15px; }
.app-project-note p { margin:0; color:#56636c; font-size:.74rem; }

@media(max-width:1000px){
  .app-project-grid { gap:34px; }
  .app-project-visual { min-height:500px; }
  .phone-hero { width:min(300px,66%); }
  .panini-album { width:min(270px,48%); }
  .phone-gallery { grid-template-columns:repeat(2,1fr); gap:46px 30px; }
  .app-shot-2,.app-shot-4 { margin-top:0; }
  .app-feature-grid { grid-template-columns:repeat(2,1fr); }
}

@media(max-width:700px){
  .app-project-hero { padding:54px 0 48px; }
  .app-project-grid { grid-template-columns:1fr; gap:22px; }
  .app-project-copy h1 { font-size:clamp(3rem,15vw,4.65rem); }
  .app-stat-row { grid-template-columns:repeat(2,1fr); }
  .app-project-visual { min-height:440px; margin-top:5px; }
  .phone-hero { width:min(245px,68%); margin-left:25%; }
  .panini-album { width:min(210px,50%); left:0; bottom:14%; }
  .app-story-section,.app-screens-section,.app-features-section { padding:52px 0; }
  .app-story-grid { grid-template-columns:1fr; gap:25px; }
  .app-story-copy { padding-left:18px; }
  .phone-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 14px; }
  .app-shot .phone-shell { max-width:190px; }
  .app-shot figcaption { max-width:190px; margin-top:16px; }
  .app-shot figcaption strong { font-size:.92rem; }
  .app-shot figcaption span { font-size:.8rem; }
  .app-feature-grid { grid-template-columns:1fr; }
  .app-feature-card { min-height:0; }
  .app-tech-panel { grid-template-columns:1fr; gap:25px; padding:28px 24px; }
  .app-tech-chips { justify-content:flex-start; }
  .app-tech-section { padding-bottom:52px; }
  .app-section-cta { width:100%; margin-top:4px; }
  .app-mid-cta { padding-bottom:52px; }
  .app-mid-cta-panel { flex-direction:column; align-items:flex-start; padding:26px 24px; }
  .app-mid-cta-panel .btn { width:100%; }
  .app-home-visual { min-height:280px; }
  .app-home-phone { width:min(185px,58%); transform:rotate(3deg) translateX(22px); }
  .app-home-album { width:min(165px,46%); left:5%; bottom:5%; }
}

@media(max-width:430px){
  .app-project-visual { min-height:390px; }
  .phone-hero { width:218px; margin-left:27%; }
  .panini-album { width:175px; bottom:16%; }
  .phone-gallery { gap:30px 10px; }
  .app-shot .phone-shell { max-width:165px; padding:5px; border-radius:24px; }
  .app-shot .phone-shell img { border-radius:20px; }
  .app-shot .phone-shell::after { inset:5px; border-radius:20px; }
  .phone-speaker { top:9px; width:46px; height:4px; }
  .app-shot figcaption { max-width:165px; }
  .app-shot figcaption span { display:none; }
  .app-home-visual { min-height:250px; }
  .app-home-phone { width:165px; }
  .app-home-album { width:145px; left:2%; }
}


/* =========================================================
   APPS · Guía de instalación móvil
   ========================================================= */
.app-cta-note a { color:var(--green); font-weight:800; }
.app-cta-note a:hover { text-decoration:underline; }
.app-install-section {
  padding:70px 0 76px;
  border-top:1px solid rgba(255,255,255,.04);
  background:
    radial-gradient(circle at 15% 26%,rgba(69,248,130,.075),transparent 27%),
    radial-gradient(circle at 84% 72%,rgba(58,107,255,.08),transparent 30%),
    #080c12;
}
.install-head { margin-bottom:34px; }
.install-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.install-card {
  min-width:0;
  padding:26px;
  border:1px solid var(--line);
  border-radius:26px;
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  box-shadow:0 20px 60px rgba(0,0,0,.18);
}
.install-card-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.install-card-top > strong { color:#a9b5bd; font-size:.84rem; }
.device-badge { display:inline-flex; align-items:center; gap:9px; font-family:"AleteveDisplay",system-ui,sans-serif; font-size:1.08rem; }
.device-dot { width:11px; height:11px; border-radius:50%; box-shadow:0 0 18px currentColor; }
.android-dot { color:#45f882; background:#45f882; }
.ios-dot { color:#b7c5ff; background:#b7c5ff; }
.install-visual { display:grid; place-items:center; min-height:245px; padding:20px; margin-bottom:22px; border-radius:22px; background:linear-gradient(180deg,#101722,#090d13); overflow:hidden; }
.mini-browser { width:min(330px,100%); padding:10px; border-radius:23px; background:#f2f5f8; color:#17202a; box-shadow:0 22px 50px rgba(0,0,0,.28); transform:rotate(-1deg); }
.ios-browser { transform:rotate(1deg); }
.mini-browser-bar { height:48px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 15px; border-radius:15px; background:#fff; box-shadow:0 4px 13px rgba(0,0,0,.08); }
.mini-browser-bar span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#68737d; font-size:.8rem; }
.mini-browser-bar b { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#eef2f5; font-size:1.25rem; }
.share-symbol { font-size:1.05rem!important; }
.mini-browser-menu { width:86%; margin:12px 0 0 auto; padding:8px; border-radius:16px; background:#fff; box-shadow:0 12px 30px rgba(0,0,0,.15); }
.mini-browser-menu span,.mini-browser-menu strong { display:block; padding:10px 12px; border-radius:10px; font-size:.8rem; }
.mini-browser-menu span { color:#69747d; }
.mini-browser-menu strong { color:#07110a; background:rgba(69,248,130,.26); }
.install-steps { list-style:none; padding:0; margin:0; counter-reset:installstep; display:grid; gap:13px; }
.install-steps li { position:relative; counter-increment:installstep; min-height:50px; padding-left:52px; }
.install-steps li::before { content:counter(installstep); position:absolute; left:0; top:0; width:36px; height:36px; display:grid; place-items:center; border-radius:12px; background:var(--green-soft); color:var(--green); font-weight:1000; }
.install-steps b { display:block; font-size:.95rem; }
.install-steps span { display:block; margin-top:2px; color:#8c99a3; font-size:.84rem; line-height:1.45; }
.install-note { margin:20px 0 0; padding:14px 16px; border:1px solid rgba(183,197,255,.18); border-radius:15px; background:rgba(183,197,255,.05); color:#87949e; font-size:.8rem; line-height:1.5; }
.install-note strong { color:#cdd6dc; }

@media(max-width:760px){
  .app-install-section { padding:52px 0 58px; }
  .install-grid { grid-template-columns:1fr; }
  .install-card { padding:21px; }
  .install-visual { min-height:210px; }
  .install-card-top { align-items:flex-start; flex-direction:column; gap:5px; }
}


/* Morcillín y carrusel de juegos (v12) */
@media (max-width: 900px) {
  .game-card { flex-basis: calc((100% - 20px) / 2); }
}

@media (max-width: 700px) {
  .game-slider-wrap { display: block; }
  .slider-btn { display: none; }
  .game-card { flex-basis: 100%; }
}