/* ============ Tokens de diseño (colores de marca, fuentes, sombras) ============ */
:root {
  --brand-navy: #0b0e29;
  --brand-dark-violet: #17113f;
  --brand-purple: #5d26d8;
  --brand-vibrant-blue: #1371fc;
  --brand-cyan: #06d4e8;
  --brand-orange: #ff671f;
  --brand-magenta: #f11984;
  --brand-green: #24ce4d;

  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-600: #475569;
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --yellow-400: #facc15;
  --emerald-400: #34d399;

  --bs-body-font-family: "Plus Jakarta Sans", sans-serif;
  --bs-body-bg: #0b0e29;
  --bs-body-color: #f1f5f9;

  --shadow-glow-orange: 0 0 30px rgba(255, 103, 31, 0.45);
  --shadow-phone-3d: 0 30px 60px -12px rgba(12, 10, 36, 0.6), 0 18px 36px -18px rgba(0, 0, 0, 0.5);
}

body { background-color: var(--brand-navy); color: #f1f5f9; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
::selection { background: var(--brand-magenta); color: #fff; }
section[id] { scroll-margin-top: 5rem; }

.font-game { font-family: "Fredoka", cursive, sans-serif; }
h1, h2, h3, h4 { font-family: "Fredoka", cursive, sans-serif; }

/* ============ Utilidades de texto / color ============ */
.text-s200 { color: var(--slate-200); }
.text-s300 { color: var(--slate-300); }
.text-s400 { color: var(--slate-400); }
.text-s600 { color: var(--slate-600); }
.text-amber3 { color: var(--amber-300); }
.text-amber4 { color: var(--amber-400); }
.text-yellow4 { color: var(--yellow-400); }
.text-emerald4 { color: var(--emerald-400); }
.text-cyan-brand { color: var(--brand-cyan); }
.fs-10 { font-size: 10px; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: .75rem; }
.fs-14 { font-size: .875rem; }
.tracking-wide { letter-spacing: .025em; }
.tracking-widest { letter-spacing: .1em; }

.text-grad-sunset {
  background: linear-gradient(90deg, #fde047, #fb923c, #ec4899);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.text-grad-hero {
  background: linear-gradient(90deg, #fb923c, #f472b6, #fcd34d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============ Contenedores anchos (max-w-7xl / 6xl / 5xl) ============ */
.wrap { width: 100%; margin-inline: auto; padding-inline: 1rem; }
.wrap-7xl { max-width: 80rem; }
.wrap-6xl { max-width: 72rem; }
.wrap-5xl { max-width: 64rem; }
@media (min-width: 576px) { .wrap { padding-inline: 1.5rem; } }

/* ============ Radios ============ */
.r-xl { border-radius: .75rem; }
.r-2xl { border-radius: 1rem; }
.r-3xl { border-radius: 1.5rem; }

/* ============ Efectos glass ============ */
.glass-panel {
  background: rgba(23, 17, 63, 0.72);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.glass-pill {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.tile-shadow { box-shadow: 0 8px 0 rgba(0, 0, 0, 0.25); }

/* ============ Animaciones ============ */
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes pulse { 50% { opacity: .5; } }
@keyframes bounce {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); }
  50% { transform: none; animation-timing-function: cubic-bezier(0, 0, .2, 1); }
}
.anim-ping { animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite; }
.anim-pulse { animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
.anim-bounce { animation: bounce 1s infinite; }
@media (prefers-reduced-motion: reduce) {
  .anim-ping, .anim-pulse, .anim-bounce { animation: none; }
}

/* ============ Header ============ */
.site-header { transition: padding .3s; }
.header-bar { max-width: 80rem; margin-inline: auto; box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); }
.brand-logo { height: 2.5rem; width: auto; object-fit: contain; transition: transform .3s; }
.brand-link:hover .brand-logo { transform: scale(1.05); }
@media (min-width: 768px) { .brand-logo { height: 3rem; } }
.nav-link-x { color: var(--slate-300); font-weight: 500; font-size: .875rem; text-decoration: none; transition: color .2s; }
.nav-link-x:hover { color: var(--yellow-400); }

.btn-green {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1.25rem; border-radius: 999px; border: 0;
  font-family: "Fredoka", sans-serif; font-weight: 600; font-size: .875rem; color: #fff;
  background: linear-gradient(90deg, #10b981, #22c55e);
  box-shadow: 0 10px 15px -3px rgba(2, 44, 34, .4);
  text-decoration: none; transition: all .3s;
}
.btn-green:hover { background: linear-gradient(90deg, #34d399, #4ade80); color: #fff; }
.btn-green:active { transform: scale(.95); }
.ping-dot { position: relative; width: .5rem; height: .5rem; border-radius: 50%; background: #fff; }
.badge-android {
  padding: .125rem .375rem; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; font-weight: 700;
  background: rgba(6, 78, 59, .5); border-radius: .375rem; color: #a7f3d0; border: 1px solid rgba(52, 211, 153, .3);
}

/* ============ Hero ============ */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding: 8rem 0 5rem; }
@media (min-width: 768px) { .hero { padding: 10rem 0 7rem; } }
.hero-bg-img { position: absolute; inset: -15% 0; pointer-events: none; opacity: .4; mix-blend-mode: screen; background-size: cover; background-position: center; background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuC5ajza3spMkR6bH1imHCunVtT2Qt7c8gYKKUI4G-p10CmwC8rx2CoGmF-RiMiWyTSedjx_aLEzHo4dkrklvhQgZaz-4hUXhOZyTzb7PtBE6twmG_X4MPzBtdIxsZeblGhH8XQcyl72_sk2sTTUmx6zXNTag_n_j2Wj4Xfir1DKE7ihPr2qES1-gywMCWxygXxSH5u5j7XkCwzCChn7WQ-fDrDGGhsH5frwQjdDMQ-6ftY8pPuY_F3L7tWw0pbSIr1usA'); }
.hero-bg-grad { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(11,14,41,.6), rgba(23,17,63,.8), var(--brand-navy)); }
.hero-inner { position: relative; z-index: 10; width: 100%; }

.pill-category {
  display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 999px;
  font-size: .75rem; font-weight: 500; color: var(--amber-300); border-color: rgba(251,191,36,.3) !important;
}
@media (min-width: 768px) { .pill-category { font-size: .875rem; } }

.hero-logo { height: 5rem; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(255,103,31,.3)); }
@media (min-width: 768px) { .hero-logo { height: 7rem; } }

.hero-title { font-size: clamp(2.25rem, 1.3rem + 3.2vw, 3.75rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; color: #fff; }
.hero-lead { color: var(--slate-300); font-size: 1rem; line-height: 1.625; max-width: 36rem; }
@media (min-width: 768px) { .hero-lead { font-size: 1.125rem; } }

/* Botones Play Store */
.btn-play {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  padding: 1rem 2rem; border-radius: 1rem; border: 0; border-bottom: 4px solid #c2410c;
  font-family: "Fredoka", sans-serif; font-size: 1.125rem; font-weight: 700; color: #fff;
  background: linear-gradient(90deg, #f97316, #f59e0b, #eab308);
  box-shadow: var(--shadow-glow-orange);
  text-decoration: none; transition: all .3s;
}
.btn-play:hover { filter: brightness(1.1); color: #fff; transform: translateY(-2px); }
.btn-play:active { transform: translateY(0); }
.btn-play svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.btn-play-lg { padding: 1.25rem 2.5rem; font-size: 1.25rem; }
.btn-play-lg svg { width: 1.75rem; height: 1.75rem; }
.btn-play-lg:hover { transform: translateY(-4px); }
@media (min-width: 576px) { .w-sm-auto { width: auto !important; } }

.free-chip {
  display: flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 600; color: var(--slate-300);
  background: rgba(255,255,255,.05); padding: .75rem 1rem; border-radius: .75rem; border: 1px solid rgba(255,255,255,.1);
}
.dot { display: inline-block; border-radius: 50%; }
.dot-sm { width: .625rem; height: .625rem; }
.dot-md { width: .75rem; height: .75rem; }

.social-proof { max-width: 36rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .75rem; color: var(--slate-400); }

/* Teléfonos */
.phones-stage { position: relative; width: 100%; max-width: 380px; height: 520px; display: flex; align-items: center; justify-content: center; }
@media (min-width: 576px) { .phones-stage { max-width: 420px; height: 580px; } }
.phones-glow {
  position: absolute; width: 18rem; height: 18rem; border-radius: 50%; z-index: -1; opacity: .5; filter: blur(64px);
  background: linear-gradient(to top right, var(--brand-purple), var(--brand-vibrant-blue), var(--brand-magenta));
}
@media (min-width: 768px) { .phones-glow { width: 24rem; height: 24rem; } }
.phone { position: absolute; padding: .5rem; transition: transform .5s; }
.phone-screen { overflow: hidden; background: var(--brand-navy); aspect-ratio: 9 / 16; position: relative; }
.phone-screen img { width: 100%; height: 100%; object-fit: cover; user-select: none; display: block; }
.phone-back {
  left: .5rem; top: 1.5rem; width: 220px; border-radius: 38px; z-index: 10; transform: rotate(-6deg);
  background: linear-gradient(to bottom, #334155, #0f172a, #000); box-shadow: var(--shadow-phone-3d);
  border: 1px solid rgba(51,65,85,.6);
}
.phone-back:hover { transform: rotate(-3deg); }
.phone-back .phone-screen { border-radius: 30px; }
.phone-front {
  right: .5rem; bottom: 1rem; width: 230px; border-radius: 40px; z-index: 20; transform: rotate(6deg);
  background: linear-gradient(to bottom, rgba(251,191,36,.4), rgba(59,7,100,.6), #000);
  box-shadow: 0 25px 50px -12px rgba(93,38,216,.5); border: 2px solid rgba(255,255,255,.2);
}
.phone-front:hover { transform: rotate(3deg); }
.phone-front .phone-screen { border-radius: 32px; }
@media (min-width: 576px) {
  .phone-back { left: 0; width: 250px; }
  .phone-front { width: 265px; }
}
.phone-note {
  position: absolute; left: .75rem; right: .75rem; bottom: .75rem; padding: .625rem; text-align: center;
  background: rgba(11,14,41,.9); backdrop-filter: blur(12px); border-radius: .75rem; border: 1px solid rgba(255,255,255,.1);
}
.tile {
  position: absolute; z-index: 30; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700;
  border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0,0,0,.3);
}
.tile-64 { top: -.75rem; right: 1.5rem; width: 3rem; height: 3rem; font-size: 1.125rem; background: linear-gradient(to bottom, #ec4899, var(--brand-magenta)); border: 2px solid #f9a8d4; }
.tile-256 { bottom: 4rem; left: -1rem; width: 2.75rem; height: 2.75rem; font-size: 1rem; background: linear-gradient(to bottom, #fbbf24, #f97316); border: 2px solid #fde68a; }

/* ============ Secciones ============ */
.section-pad { padding: 6rem 0; position: relative; }
.sec-steps { background: rgba(23,17,63,.4); border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.sec-about { background: rgba(23,17,63,.6); border-top: 1px solid rgba(255,255,255,.1); }
.sec-title { font-weight: 700; letter-spacing: -.025em; color: #fff; font-size: clamp(1.875rem, 1.2rem + 2.2vw, 3rem); }
.sec-lead { color: var(--slate-300); font-size: 1rem; }
@media (min-width: 768px) { .sec-lead { font-size: 1.125rem; } }
.gap-8 { --bs-gutter-x: 2rem; --bs-gutter-y: 2rem; }
.gap-12 { --bs-gutter-x: 3rem; --bs-gutter-y: 3rem; }

/* Tarjetas de pasos */
.step-card { padding: 2rem; position: relative; overflow: hidden; height: 100%; transition: all .3s; }
.step-card:hover { transform: translateY(-4px); }
.step-card .corner { position: absolute; top: 0; right: 0; width: 8rem; height: 8rem; border-bottom-left-radius: 100%; pointer-events: none; transition: background .3s; }
.step-amber:hover { border-color: rgba(250,204,21,.5); }
.step-amber .corner { background: rgba(245,158,11,.1); } .step-amber:hover .corner { background: rgba(245,158,11,.2); }
.step-pink:hover { border-color: rgba(236,72,153,.5); }
.step-pink .corner { background: rgba(236,72,153,.1); } .step-pink:hover .corner { background: rgba(236,72,153,.2); }
.step-blue:hover { border-color: rgba(19,113,252,.5); }
.step-blue .corner { background: rgba(59,130,246,.1); } .step-blue:hover .corner { background: rgba(59,130,246,.2); }
.step-num {
  width: 3.5rem; height: 3.5rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center;
  font-family: "Fredoka", sans-serif; font-size: 1.5rem; font-weight: 900; color: #fff; margin-bottom: 1.5rem;
}
.num-amber { background: linear-gradient(to top right, #f59e0b, #facc15); box-shadow: 0 10px 15px -3px rgba(245,158,11,.3); }
.num-pink { background: linear-gradient(to top right, #ec4899, var(--brand-magenta)); box-shadow: 0 10px 15px -3px rgba(236,72,153,.3); }
.num-blue { background: linear-gradient(to top right, var(--brand-vibrant-blue), var(--brand-cyan)); box-shadow: 0 10px 15px -3px rgba(59,130,246,.3); }
.step-card h3 { font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: .75rem; }
.step-card p { color: var(--slate-300); font-size: .875rem; line-height: 1.625; margin-bottom: 1.5rem; }
.step-foot { display: flex; align-items: center; gap: .5rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.1); }
.step-foot span.lbl { font-size: .75rem; font-weight: 600; color: var(--slate-300); letter-spacing: .025em; text-transform: uppercase; }

/* Power-ups */
.pill-yellow {
  display: inline-flex; align-items: center; padding: .375rem .75rem; border-radius: 999px; font-size: .75rem; font-weight: 600;
  background: rgba(250,204,21,.1); color: var(--amber-300); border: 1px solid rgba(250,204,21,.2);
}
.tool-card { padding: 1.25rem; display: flex; align-items: flex-start; gap: 1rem; height: 100%; border-color: rgba(255,255,255,.1) !important; }
.tool-icon { padding: .75rem; border-radius: .75rem; font-size: 1.5rem; font-weight: 700; flex-shrink: 0; line-height: 1.33; }
.tool-orange { background: rgba(249,115,22,.2); color: #fb923c; }
.tool-emerald { background: rgba(16,185,129,.2); color: var(--emerald-400); }
.tool-amber { background: rgba(245,158,11,.2); color: var(--yellow-400); }
.tool-cyan { background: rgba(6,182,212,.2); color: var(--brand-cyan); }
.tool-card h4 { font-size: 1rem; font-weight: 700; color: #fff; margin: 0; }
.tool-card p { font-size: .75rem; color: var(--slate-300); margin: .25rem 0 0; }

.showcase { position: relative; max-width: 20rem; width: 100%; }
@media (min-width: 576px) { .showcase { max-width: 24rem; } }
.showcase-glow { position: absolute; inset: 0; border-radius: 44px; filter: blur(40px); opacity: .3; transform: scale(.95); background: linear-gradient(to right, #f59e0b, #ec4899); }
.showcase-phone { position: relative; border-radius: 40px; padding: .5rem; background: linear-gradient(to bottom, #475569, #1e293b, #000); box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); border: 2px solid rgba(255,255,255,.2); }
.showcase-phone .phone-screen { border-radius: 32px; }
.showcase-tag { position: absolute; bottom: -1.25rem; right: .5rem; padding: .75rem 1.25rem; text-align: center; box-shadow: 0 20px 25px -5px rgba(0,0,0,.3); border-color: rgba(255,255,255,.2) !important; }

/* Estudio */
.studio-box { padding: 2rem; position: relative; overflow: hidden; border-color: rgba(255,255,255,.15) !important; }
@media (min-width: 576px) { .studio-box { padding: 3rem; } }
@media (min-width: 992px) { .studio-box { padding: 4rem; } }
.studio-watermark { position: absolute; right: -3rem; bottom: -3rem; opacity: .05; pointer-events: none; }
.studio-watermark img { width: 24rem; height: 24rem; object-fit: contain; }
.pill-emerald {
  display: inline-flex; align-items: center; padding: .375rem .875rem; border-radius: 999px; font-size: .75rem; font-weight: 700;
  letter-spacing: .025em; text-transform: uppercase; background: rgba(16,185,129,.1); color: var(--emerald-400); border: 1px solid rgba(16,185,129,.2);
}
.check-box { width: 2rem; height: 2rem; border-radius: .5rem; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: var(--amber-300); font-weight: 700; flex-shrink: 0; }
.btn-mail {
  display: inline-flex; align-items: center; gap: .625rem; padding: .75rem 1.25rem; border-radius: .75rem;
  background: rgba(255,255,255,.1); color: #fff; font-weight: 500; font-size: .875rem; border: 1px solid rgba(255,255,255,.2);
  text-decoration: none; transition: background .2s;
}
.btn-mail:hover { background: rgba(255,255,255,.15); color: #fff; }
.btn-mail svg { width: 1rem; height: 1rem; color: var(--amber-400); }
.emblem-card { padding: 1.5rem; border-radius: 1rem; background: linear-gradient(to bottom, rgba(255,255,255,.05), rgba(255,255,255,0)); border: 1px solid rgba(255,255,255,.1); }
.emblem-ring { width: 6rem; height: 6rem; border-radius: 1rem; padding: .25rem; margin-bottom: 1rem; box-shadow: 0 20px 25px -5px rgba(0,0,0,.3); background: linear-gradient(to top right, #f97316, #ec4899, var(--brand-vibrant-blue)); }
.emblem-inner { width: 100%; height: 100%; background: var(--brand-navy); border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.pill-blue { margin-top: 1rem; padding: .25rem .75rem; border-radius: 999px; background: rgba(19,113,252,.2); color: var(--brand-cyan); font-size: .75rem; font-weight: 600; }

/* CTA final */
.sec-cta { position: relative; padding: 7rem 0; overflow: hidden; }
.cta-bg-img { position: absolute; inset: -15% 0; pointer-events: none; opacity: .5; background-size: cover; background-position: center; background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuC5ajza3spMkR6bH1imHCunVtT2Qt7c8gYKKUI4G-p10CmwC8rx2CoGmF-RiMiWyTSedjx_aLEzHo4dkrklvhQgZaz-4hUXhOZyTzb7PtBE6twmG_X4MPzBtdIxsZeblGhH8XQcyl72_sk2sTTUmx6zXNTag_n_j2Wj4Xfir1DKE7ihPr2qES1-gywMCWxygXxSH5u5j7XkCwzCChn7WQ-fDrDGGhsH5frwQjdDMQ-6ftY8pPuY_F3L7tWw0pbSIr1usA'); }
.cta-bg-grad { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--brand-navy), rgba(23,17,63,.85), var(--brand-navy)); }
.cta-inner { position: relative; z-index: 10; }
.cta-logo { height: 6rem; object-fit: contain; filter: drop-shadow(0 15px 30px rgba(0,0,0,.5)); }
@media (min-width: 768px) { .cta-logo { height: 9rem; } }
.cta-title { font-weight: 900; letter-spacing: -.025em; line-height: 1.2; color: #fff; font-size: clamp(2.25rem, 1.3rem + 3.2vw, 3.75rem); }
.cta-lead { color: var(--slate-200); font-size: 1.125rem; }
@media (min-width: 576px) { .cta-lead { font-size: 1.25rem; } }

/* Footer */
.site-footer { padding: 3rem 0; background: rgba(0,0,0,.6); border-top: 1px solid rgba(255,255,255,.1); color: var(--slate-400); font-size: .875rem; }
.footer-logo { height: 2.25rem; width: auto; object-fit: contain; }
.footer-link { color: var(--slate-300); text-decoration: none; transition: color .2s; }
.footer-link:hover { color: var(--amber-400); }

/* =========================================================
   Base global
   ========================================================= */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--yellow-400);
  outline-offset: 3px;
}

/* =========================================================
   Estados previos a la animación (GSAP)
   El hero se oculta hasta que arranca su animación de entrada.
   Si GSAP no carga, main.js quita la clase "js" y todo se ve normal.
   ========================================================= */
.js [data-hero] { visibility: hidden; }

/* =========================================================
   Barra de progreso de scroll
   ========================================================= */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1060;
  transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
  background: linear-gradient(90deg, #f97316, #ec4899, var(--brand-vibrant-blue));
}

/* =========================================================
   Menú móvil (Bootstrap Offcanvas)
   ========================================================= */
.menu-toggle {
  width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
  transition: background .2s;
}
.menu-toggle:hover { background: rgba(255, 255, 255, .18); }
.menu-toggle svg { width: 1.25rem; height: 1.25rem; }

.mobile-menu {
  --bs-offcanvas-width: min(86vw, 22rem);
  background: linear-gradient(to bottom, rgba(23, 17, 63, .97), rgba(11, 14, 41, .98));
  border-left: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.mobile-menu .offcanvas-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.mobile-menu .offcanvas-body { padding: 1rem 1.5rem 2rem; display: flex; flex-direction: column; }
.mobile-menu-logo { height: 2.5rem; width: auto; object-fit: contain; }

.mobile-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 0; border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-family: "Fredoka", sans-serif; font-size: 1.375rem; font-weight: 600;
  color: var(--slate-200); text-decoration: none; transition: color .2s;
}
.mobile-link:hover, .mobile-link:focus-visible { color: var(--yellow-400); }
.mobile-link span.arrow { color: var(--slate-600); font-size: 1rem; }
.mobile-cta { margin-top: auto; padding-top: 2rem; }
.mobile-cta .btn-play { width: 100%; }
.mobile-meta { margin-top: 1.25rem; text-align: center; font-size: .75rem; color: var(--slate-400); }

/* =========================================================
   Ajustes para pantallas pequeñas (header)
   ========================================================= */
@media (max-width: 575.98px) {
  .brand-logo { height: 2.25rem; }
  .btn-green { padding: .4rem .9rem; font-size: .8rem; }
  .hero { padding-top: 7rem; }
}