/* WINGRUSH — el sitio.
   Paleta sacada del juego: el morado de los botones, el oro del Flow y la
   crema del HUD. Nada de gris corporativo: la web tiene que oler a lo mismo
   que huele el juego cuando lo abres. */

:root{
  --tinta:#150E24;
  --tinta-2:#1E1533;
  --crema:#FFF7E0;
  --crema-apagada:rgba(255,247,224,.72);
  --morado:#7C5BD6;
  --morado-claro:#A98CF2;
  --oro:#E0A419;
  --linea:rgba(255,247,224,.14);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--tinta);
  color:var(--crema-apagada);
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--morado-claro)}

/* ── barra de arriba ─────────────────────────────────────────────── */
.barra{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:14px 22px;
  background:rgba(21,14,36,.86);
  border-bottom:1px solid var(--linea);
  position:sticky;top:0;z-index:10;
  backdrop-filter:blur(10px);
}
.marca{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--crema);
  font-family:"Lilita One",Impact,sans-serif;
  font-size:21px;letter-spacing:.06em;
}
.marca img{width:32px;height:32px;border-radius:8px;display:block}
.barra nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.barra nav a{
  text-decoration:none;color:var(--crema-apagada);
  font-size:14.5px;font-weight:600;
  padding:7px 13px;border-radius:99px;
}
.barra nav a:hover{color:var(--crema);background:rgba(255,247,224,.08)}
.barra nav a[aria-current="page"]{color:var(--tinta);background:var(--crema)}

.lenguas{display:flex;gap:5px;flex-wrap:wrap}
.lenguas button{
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  color:var(--crema-apagada);background:none;
  border:1px solid var(--linea);border-radius:99px;padding:5px 11px;
}
.lenguas button:hover{color:var(--crema);border-color:var(--morado-claro)}
.lenguas button[aria-current="true"]{background:var(--morado);border-color:var(--morado);color:#fff}
.lenguas button:focus-visible,.barra nav a:focus-visible,.descarga:focus-visible{
  outline:3px solid var(--oro);outline-offset:3px;
}

/* ── portada ─────────────────────────────────────────────────────── */
.heroe{
  position:relative;overflow:hidden;isolation:isolate;
  /* Alto generoso a proposito: la portada es vertical y en una franja baja
     salia un recorte del pajaro, con el titulo justo encima de su cara.
     Con la portada entera hay sitio para el titulo en el cielo y Talon
     debajo, que es como esta compuesto el dibujo. */
  min-height:min(88vh,860px);
  display:flex;align-items:flex-start;
}
.heroe-fondo{
  position:absolute;inset:0;z-index:-1;
  background:url("img/portada.jpg") center top / cover no-repeat;
}
.heroe-fondo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(21,14,36,.30) 0%,rgba(21,14,36,.30) 34%,rgba(21,14,36,.66) 66%,var(--tinta) 100%);
}
.heroe-dentro{
  max-width:820px;margin:0 auto;
  padding:70px 22px 108px;
  text-align:center;
}
.heroe h1{
  font-family:"Lilita One",Impact,sans-serif;
  font-size:clamp(42px,10vw,124px);
  line-height:.94;margin:0;
  color:var(--crema);
  letter-spacing:.03em;
  text-shadow:0 7px 0 rgba(21,14,36,.85), 0 22px 48px rgba(0,0,0,.5);
}
.lema{
  /* Se aparta de la cara de Talon en pantallas estrechas. */
  font-family:"Lilita One",Impact,sans-serif;
  font-size:clamp(15px,3.4vw,23px);
  letter-spacing:.22em;
  color:var(--oro);
  margin:16px 0 40px;
  text-shadow:0 3px 0 rgba(21,14,36,.7);
}
.descarga{
  display:inline-block;
  background:var(--oro);color:#2A1B06;
  font-weight:600;font-size:16px;text-decoration:none;
  padding:16px 34px;border-radius:99px;
  box-shadow:0 7px 0 #8A6208, 0 18px 36px rgba(0,0,0,.42);
}
.descarga:hover{filter:brightness(1.07)}
/* Estado "proximamente": el mismo boton, pero apagado y sin puntero, porque
   todavia no hay ficha en la App Store a la que llevar. */
.proxima{
  background:rgba(255,247,224,.13);
  color:var(--crema);
  box-shadow:none;border:1px solid var(--linea);
  cursor:default;
}
.proxima:hover{filter:none}
.descarga:active{transform:translateY(3px);box-shadow:0 4px 0 #8A6208}

/* ── cuerpo ──────────────────────────────────────────────────────── */
.ancho{max-width:860px;margin:0 auto;padding:0 22px 90px}
.pitch{
  font-size:clamp(18px,2.4vw,21px);
  text-align:center;
  max-width:38ch;margin:0 auto 56px;
  color:var(--crema);
}
.tiras{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:18px;
}
.tiras img{
  width:100%;height:auto;display:block;
  border-radius:18px;
  border:1px solid var(--linea);
  box-shadow:0 16px 40px rgba(0,0,0,.42);
}

/* ── páginas de texto ────────────────────────────────────────────── */
.texto{padding-top:54px;max-width:740px}
.texto h1{
  font-family:"Lilita One",Impact,sans-serif;
  font-size:clamp(32px,6vw,46px);
  color:var(--crema);margin:0 0 34px;letter-spacing:.02em;
}
.texto h2{
  font-size:1.28em;color:var(--crema);
  margin:0 0 .15em;letter-spacing:.01em;
}
.texto h3{
  font-size:1.02em;color:var(--oro);
  margin:2.2em 0 .45em;letter-spacing:.04em;
}
.texto p{margin:0 0 1em}
.texto ul{margin:.3em 0 1.2em 1.15em;padding:0}
.texto li{margin-bottom:.35em}
.texto .fecha{color:rgba(255,247,224,.45);font-size:.88em;margin-bottom:2.4em}
.texto hr{margin:4em 0;border:0;border-top:1px solid var(--linea)}

/* ── pie ─────────────────────────────────────────────────────────── */
footer{
  border-top:1px solid var(--linea);
  padding:34px 22px 50px;
  text-align:center;font-size:14.5px;
  color:rgba(255,247,224,.55);
}
footer p{margin:0 0 6px}
footer .peq{font-size:12.5px;opacity:.6}

[hidden]{display:none!important}

@media (max-width:760px){
  /* La cabecera cabia en tres filas —marca, idiomas y menu— y empujaba la
     portada fuera de la primera pantalla. Aqui se aprieta a dos. */
  .barra{gap:10px;padding:10px 14px}
  .marca{font-size:18px}
  .marca img{width:28px;height:28px}
  .barra nav{margin-left:auto;order:2;gap:2px}
  .barra nav a{font-size:13px;padding:6px 11px}
  .lenguas{order:3;width:100%;justify-content:center;gap:4px}
  .lenguas button{font-size:11.5px;padding:4px 9px}
  .heroe{min-height:min(80vh,720px)}
  .heroe-dentro{padding:44px 18px 60px}
  .lema{margin:12px 0 30px;letter-spacing:.16em}
  .descarga{padding:14px 26px;font-size:15px}
  .ancho{padding-bottom:64px}
  .texto{padding-top:38px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}