/* =====================================================================
   RONDA · link.juegaronda.com
   Landing de descarga · glassmorphism + fondo dinámico
   ---------------------------------------------------------------------
   Tokens de marca y ajustes rápidos en :root.
   Para cambiar la tipografía: edita --font-display.
   ===================================================================== */

:root {
  /* Paleta de marca RONDA */
  --c-azul:    #00AEEF;
  --c-naranja: #FF7900;
  --c-fucsia:  #FF00C8;
  --c-lima:    #75FF33;
  --c-marino:  #07122E;
  --c-blanco:  #FFFFFF;

  /* Tipografía (cambiar aquí la fuente de toda la web) */
  --font-display: "Plus Jakarta Sans", "Manrope", "Inter", system-ui, -apple-system, sans-serif;

  /* Cristal */
  --glass-bg:     rgba(255, 255, 255, 0.08);
  --glass-bg-2:   rgba(255, 255, 255, 0.14);
  --glass-border: rgba(255, 255, 255, 0.22);
  --glass-blur:   18px;

  /* Sombras suaves */
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.45);
  --shadow-btn:  0 10px 30px rgba(0, 0, 0, 0.35);

  /* Radios generosos */
  --radius-card: 32px;
  --radius-btn:  18px;
}

/* ------------------------- Reset básico ------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-display);
  color: var(--c-blanco);
  background: var(--c-marino);
  overflow-x: hidden;
  /* respeta el notch en móviles */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

/* =====================================================================
   CAPA 1 · FONDO DINÁMICO (blobs)
   Solo transform/opacity para que sea barato de animar (compositing GPU).
   ===================================================================== */
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 50% -10%, #0b1b46 0%, var(--c-marino) 60%);
}

.blob {
  position: absolute;
  width: 52vmax;
  height: 52vmax;
  border-radius: 50%;
  filter: blur(64px) saturate(1.5);
  opacity: 0.92;
  will-change: transform;
  mix-blend-mode: screen;
}

.blob--azul {
  background: radial-gradient(circle at 30% 30%, var(--c-azul), transparent 70%);
  top: -12%; left: -10%;
  animation: float-azul 17s ease-in-out infinite;
}
.blob--fucsia {
  background: radial-gradient(circle at 30% 30%, var(--c-fucsia), transparent 70%);
  top: -8%; right: -14%;
  animation: float-fucsia 21s ease-in-out infinite;
}
.blob--naranja {
  background: radial-gradient(circle at 30% 30%, var(--c-naranja), transparent 70%);
  bottom: -16%; left: -6%;
  animation: float-naranja 19s ease-in-out infinite;
}
.blob--lima {
  background: radial-gradient(circle at 30% 30%, var(--c-lima), transparent 70%);
  bottom: -18%; right: -8%;
  animation: float-lima 15s ease-in-out infinite;
}

/* Velo MUY ligero solo en los bordes para mantener legibilidad sin apagar el color */
.bg-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 110% at 50% 45%, transparent 55%, rgba(7, 18, 46, 0.30) 100%);
}

/* Movimiento amplio + rotación para un fondo bien dinámico */
@keyframes float-azul {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  25%      { transform: translate(26vw, 12vh) scale(1.2) rotate(8deg); }
  50%      { transform: translate(40vw, 30vh) scale(0.9) rotate(-6deg); }
  75%      { transform: translate(14vw, 20vh) scale(1.1) rotate(4deg); }
}
@keyframes float-fucsia {
  0%, 100% { transform: translate(0, 0) scale(1.05) rotate(0deg); }
  25%      { transform: translate(-22vw, 16vh) scale(0.85) rotate(-8deg); }
  50%      { transform: translate(-34vw, 4vh) scale(1.25) rotate(6deg); }
  75%      { transform: translate(-12vw, -10vh) scale(1) rotate(-4deg); }
}
@keyframes float-naranja {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  25%      { transform: translate(24vw, -18vh) scale(1.2) rotate(10deg); }
  50%      { transform: translate(38vw, -6vh) scale(0.88) rotate(-8deg); }
  75%      { transform: translate(16vw, -24vh) scale(1.08) rotate(5deg); }
}
@keyframes float-lima {
  0%, 100% { transform: translate(0, 0) scale(0.95) rotate(0deg); }
  25%      { transform: translate(-26vw, -14vh) scale(1.18) rotate(-10deg); }
  50%      { transform: translate(-40vw, -30vh) scale(0.9) rotate(8deg); }
  75%      { transform: translate(-16vw, -8vh) scale(1.05) rotate(-5deg); }
}

/* =====================================================================
   CAPA 2 · GAMEY (mascota flotando)
   Listo para sustituir <img> por <video> transparente sin tocar nada.
   ===================================================================== */
.gamey-layer {
  position: fixed;
  inset: 0;
  z-index: 3; /* por ENCIMA de la tarjeta (la capa no captura clics) */
  pointer-events: none;
  overflow: hidden;
}

.gamey {
  position: absolute;
  right: clamp(-20px, 4vw, 110px);
  bottom: -24px;
  width: clamp(240px, 34vw, 480px);
  height: auto;
  filter: drop-shadow(0 28px 52px rgba(0, 0, 0, 0.55));
  animation: gamey-float 6s ease-in-out infinite;
  will-change: transform;
}

@keyframes gamey-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-18px) rotate(2deg); }
}

/* =====================================================================
   CAPA 3 · CONTENIDO
   ===================================================================== */
.page {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 40px 20px 86px; /* hueco inferior para la barra del footer */
}

/* ---------- Tarjeta glass central ---------- */
.card {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 40px 28px 36px;
  text-align: center;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  /* brillo superior tipo cristal */
  background-image: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 40%);
}

/* Glow de marca difuso (azul -> fucsia) detrás de la tarjeta */
.card::before {
  content: "";
  position: absolute;
  inset: -36px;
  z-index: -1;
  border-radius: calc(var(--radius-card) + 24px);
  background: linear-gradient(135deg, var(--c-azul), var(--c-fucsia) 60%, var(--c-naranja));
  filter: blur(58px);
  opacity: 0.6;
  animation: card-glow 12s ease-in-out infinite;
}

@keyframes card-glow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 0.72; transform: scale(1.04); }
}

/* ---------- Logo ---------- */
.logo {
  width: min(92%, 400px);
  height: auto;
  margin: 0 auto 22px;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.4));
  /* entrada: fade + scale; luego float sutil en bucle */
  animation:
    logo-in 900ms cubic-bezier(0.16, 1, 0.3, 1) both,
    logo-float 6s ease-in-out 900ms infinite;
}

@keyframes logo-in {
  from { opacity: 0; transform: scale(0.82) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes logo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ---------- Texto ---------- */
.headline {
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 5.4vw, 2.1rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}
.subhead {
  margin: 0 0 28px;
  font-size: clamp(1rem, 3.8vw, 1.15rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
}

/* =====================================================================
   BADGES DE TIENDA (imágenes oficiales, sin glass)
   ===================================================================== */
.store-buttons {
  display: flex;
  flex-direction: row;          /* los dos badges en fila */
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: stretch;
}

.badge-link {
  display: flex;
  align-items: center;
  justify-content: center;
  /* mismo tamaño para ambos badges; se reparten el ancho y caben en fila en móvil */
  flex: 1 1 130px;
  max-width: 168px;
  height: 56px;
  padding: 3px 0;
  border-radius: 12px;
  /* base para el efecto magnético (JS escribe --mx/--my) */
  --mx: 0px;
  --my: 0px;
  transform: translate(var(--mx), var(--my));
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 220ms ease, opacity 220ms ease, filter 220ms ease;
}

.badge-img {
  display: block;
  /* encajan dentro de la misma caja sin deformarse */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 9px;
}

/* micro-escala de hover MUY sutil */
.badge-link:hover { transform: translate(var(--mx), var(--my)) scale(1.01); }
.badge-link:active { transform: translate(var(--mx), var(--my)) scale(0.99); }

.badge-link:focus-visible {
  outline: 3px solid var(--c-lima);
  outline-offset: 4px;
  border-radius: 12px;
}

/* Badge principal (lo marca main.js según dispositivo): glow/borde de marca */
.badge-link.is-primary {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.85),
    0 0 22px 3px rgba(0, 174, 239, 0.6),
    0 0 38px 10px rgba(255, 0, 200, 0.4);
  animation: badge-glow 2.8s ease-in-out infinite;
}

@keyframes badge-glow {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.75),
      0 0 20px 3px rgba(0, 174, 239, 0.5),
      0 0 32px 8px rgba(255, 0, 200, 0.32);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.95),
      0 0 28px 6px rgba(0, 174, 239, 0.7),
      0 0 46px 14px rgba(255, 0, 200, 0.5);
  }
}

/* Badge secundario: un poco menos de opacidad */
.badge-link.is-secondary { opacity: 0.62; }
.badge-link.is-secondary:hover { opacity: 0.85; }

/* =====================================================================
   QR (escritorio)
   ===================================================================== */
.qr {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.qr__img {
  width: 140px;
  height: 140px;
  padding: 12px;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-btn);
}
.qr__hint {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}

/* =====================================================================
   CAPTACIÓN DE EMAIL (opt-in)
   ===================================================================== */
.optin {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}
.optin__title {
  margin: 0;
  font-size: clamp(1.05rem, 4vw, 1.3rem);
  font-weight: 800;
  line-height: 1.2;
}
.optin__text {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}
.optin__row {
  display: flex;
  gap: 10px;
}
.optin__input {
  flex: 1;
  min-width: 0;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
}
.optin__input::placeholder { color: rgba(255, 255, 255, 0.55); }
.optin__input:focus-visible {
  outline: 2px solid var(--c-lima);
  outline-offset: 1px;
}
.optin__btn {
  flex: none;
  padding: 13px 22px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: linear-gradient(135deg, var(--c-azul), var(--c-fucsia));
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  /* base para efecto magnético */
  --mx: 0px;
  --my: 0px;
  transform: translate(var(--mx), var(--my));
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), filter 220ms ease;
}
.optin__btn:hover { transform: translate(var(--mx), var(--my)) scale(1.01); filter: brightness(1.06); }
.optin__btn:active { transform: translate(var(--mx), var(--my)) scale(0.98); }
.optin__btn:focus-visible { outline: 3px solid var(--c-lima); outline-offset: 3px; }

.optin__consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.4;
}
.optin__consent input { margin-top: 2px; flex: none; accent-color: var(--c-fucsia); }
.optin__consent a { text-decoration: underline; }

.optin__msg {
  margin: 4px 0 0;
  font-size: 0.92rem;
  font-weight: 700;
}
.optin__msg--ok  { color: var(--c-lima); }
.optin__msg--err { color: #ff7a7a; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5; /* barra inferior SIEMPRE por encima de Gamey */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  /* degradado para legibilidad por encima de Gamey/fondo */
  background: linear-gradient(to top, rgba(7, 18, 46, 0.9), rgba(7, 18, 46, 0));
}
.footer a { text-decoration: none; transition: color 160ms ease; }
.footer a:hover { color: #fff; }
.footer__sep { opacity: 0.5; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (min-width: 560px) {
  .card { padding: 48px 40px 40px; }
}

/* El QR NO debe aparecer en móvil ni en ventanas estrechas:
   además de la detección por user-agent (main.js), lo ocultamos por ancho. */
@media (max-width: 899px) {
  .qr { display: none !important; }
}

/* Gamey en móvil: grande, asomando desde abajo a la derecha. En pantallas
   estrechas no hay sitio lateral, así que lo ponemos DETRÁS de la tarjeta
   (se transparenta por el cristal) para que no tape el texto. */
@media (max-width: 600px) {
  .gamey-layer { z-index: 1; }
  .gamey {
    width: clamp(220px, 62vw, 320px);
    right: -34px;
    bottom: -10px;
  }
}

/* =====================================================================
   ACCESIBILIDAD · prefers-reduced-motion
   Congela blobs, float del logo/Gamey y deja todo estático.
   (El efecto magnético se desactiva además desde main.js.)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .blob,
  .gamey,
  .logo,
  .card::before,
  .badge-link.is-primary {
    animation: none !important;
  }
  /* El badge primario mantiene su glow fijo (sin latido) */
  .badge-link.is-primary {
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.85),
      0 0 22px 3px rgba(0, 174, 239, 0.6),
      0 0 38px 10px rgba(255, 0, 200, 0.4);
  }
}