/* Time Rewind Sprint — web oficial.
   Misma dirección de arte que el juego: noche synthwave, sol por bandas,
   rejilla en fuga y la tipografía Russo One. Sin dependencias externas
   (la fuente viaja local): carga rápida y funciona aunque un CDN caiga. */

@font-face {
  font-family: 'Russo One';
  src: url('assets/russo-one-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --cian: #00e5ff;
  --verde: #4dffb8;
  --amarillo: #ffe94a;
  --texto: #dfe9ff;
  --apagado: #8899cc;
  --tenue: #55608a;
  --panel: #0a1230;
  --borde: #26326b;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: #05060f;
  color: var(--texto);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3, .titulo { font-family: 'Russo One', 'Segoe UI', sans-serif; font-weight: 400; }

a { color: var(--cian); }
a:hover { color: var(--verde); }

/* ---------- Cielo synthwave del encabezado ---------- */
.cielo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(#131b4d 0%, #0a0f33 55%, #05060f 100%);
  padding: 72px 20px 0;
  text-align: center;
}
.estrella { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #cfe2ff; opacity: .65; }
.sol {
  position: relative;
  width: min(320px, 62vw);
  aspect-ratio: 2 / 1;
  margin: 0 auto -2px;
  background: linear-gradient(#ffd24a 0%, #ff8a3d 55%, #ff2d88 100%);
  border-radius: 999px 999px 0 0;
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 22px, transparent 22px 30px);
  mask-image: repeating-linear-gradient(to bottom, #000 0 22px, transparent 22px 30px);
}
.sol::before {
  content: '';
  position: absolute; left: 50%; bottom: 0;
  width: 260%; aspect-ratio: 1; transform: translate(-50%, 40%);
  background: radial-gradient(circle, rgba(255, 80, 150, .34) 0%, rgba(255, 80, 150, 0) 62%);
  border-radius: 50%;
  z-index: -1;
}
.rejilla {
  height: 190px;
  background-image:
    repeating-linear-gradient(to bottom, rgba(96, 120, 255, .8) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(to right, rgba(96, 120, 255, .55) 0 2px, transparent 2px 60px);
  -webkit-mask-image: linear-gradient(#000 0%, transparent 92%);
  mask-image: linear-gradient(#000 0%, transparent 92%);
  transform: perspective(240px) rotateX(58deg);
  transform-origin: 50% 0;
}

/* ---------- Contenido ---------- */
.marca { font-size: clamp(38px, 9vw, 78px); color: var(--cian); text-shadow: 0 0 30px rgba(0, 229, 255, .75); letter-spacing: 1px; }
.marca span { display: block; font-size: .62em; color: #fff; text-shadow: 0 0 22px rgba(0, 229, 255, .5); }
.lema { color: var(--apagado); margin-top: 14px; font-size: clamp(15px, 3.6vw, 20px); letter-spacing: 2px; }

main { max-width: 880px; margin: 0 auto; padding: 0 22px 90px; }

section { margin-top: 64px; }
section > h2 {
  font-size: clamp(22px, 5vw, 30px);
  color: var(--amarillo);
  margin-bottom: 18px;
}

.acciones { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 34px 0 8px; }
.boton {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 10px;
  font-family: 'Russo One', sans-serif;
  font-size: 17px;
  text-decoration: none;
  border: 2px solid var(--cian);
  color: var(--cian);
  background: rgba(0, 229, 255, .07);
  transition: transform .15s ease, background .15s ease;
}
.boton:hover { transform: translateY(-2px); background: rgba(0, 229, 255, .16); color: var(--cian); }
.boton.primario { background: var(--cian); color: #05060f; }
.boton.primario:hover { background: var(--verde); border-color: var(--verde); color: #05060f; }

.tarjetas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tarjeta {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 22px;
}
.tarjeta h3 { color: var(--cian); font-size: 18px; margin-bottom: 8px; }
.tarjeta p { color: var(--apagado); font-size: 15px; }

.capturas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.capturas img { width: 100%; border-radius: 12px; border: 1px solid var(--borde); display: block; }

/* ---------- Texto legal ---------- */
.legal h2 { margin-top: 40px; font-size: 21px; color: var(--cian); }
.legal p, .legal li { color: var(--texto); font-size: 15.5px; }
.legal ul { margin: 12px 0 0 22px; }
.legal li { margin-bottom: 8px; }
.legal .actualizado { color: var(--tenue); font-size: 14px; }
.legal table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 15px; }
.legal th, .legal td { border: 1px solid var(--borde); padding: 10px 12px; text-align: left; vertical-align: top; }
.legal th { background: var(--panel); color: var(--cian); font-family: 'Russo One', sans-serif; font-weight: 400; }

/* ---------- Pie y utilidades ---------- */
footer {
  border-top: 1px solid var(--borde);
  padding: 30px 22px 44px;
  text-align: center;
  color: var(--tenue);
  font-size: 14px;
}
footer a { margin: 0 9px; }

.idioma {
  position: absolute; top: 16px; right: 18px;
  display: flex; gap: 6px; z-index: 3;
}
.idioma button {
  font-family: 'Russo One', sans-serif;
  background: transparent;
  border: 1px solid var(--borde);
  color: var(--tenue);
  padding: 5px 11px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
}
.idioma button.activo { color: var(--cian); border-color: var(--cian); }

/* El selector se DUPLICA a propósito: así gana por especificidad a reglas
   como `.marca span { display: block }`, que si no dejaban visibles los dos
   idiomas a la vez en los títulos. */
[data-lang][data-lang]:not(.visible) { display: none; }