/* PokeWarden — landing.
   Solo el logo y un "próximamente". No hay nada más que contar todavía, y una
   página con secciones vacías se nota más que una página corta.

   PALETA. Verde de ruta, el del pasto del mapa. Es una lectura del aspecto de
   la tercera generación, NO valores extraídos: las paletas reales viven
   comprimidas dentro de la ROM en BGR555 de 15 bits, que es justo lo que el
   extractor del juego va a leer. Cuando eso funcione, estos colores se
   reemplazan por los de verdad.

   El contorno del logo es VERDE MUY OSCURO y nunca azul. El par amarillo con
   azul es el elemento que hace que un logo se lea como el de la franquicia;
   sobre este verde el contorno oscuro da el mismo contraste sin esa lectura. */

:root {
  --pasto:      #4E9A4E;
  --pasto-osc:  #3B7A3E;
  --hoja-osc:   #1E3A26;
  --canto:      #8B5018;
  --amarillo:   #FFCB05;
  --claro:      #DFF0D8;
  --tenue:      #A9CFA9;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: linear-gradient(180deg, var(--pasto) 0%, var(--pasto-osc) 100%);
  background-attachment: fixed;
  color: var(--claro);
  font-family: Fredoka, system-ui, -apple-system, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

.idioma {
  position: absolute; top: 14px; right: 16px;
  color: var(--claro); text-decoration: none;
  font-size: 13px; font-weight: 500;
  padding: 5px 13px;
  border: 1px solid rgba(255,255,255,.3); border-radius: 999px;
}
.idioma:hover { border-color: rgba(255,255,255,.75); }

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 32px 20px;
  text-align: center;
}

/* Todo el logo se dimensiona con una sola variable: contorno y relieve se
   calculan a partir de ella, así escala sin descuadrarse. */
.pw-logo { --pw-logo-size: 46px; --pw-outline: var(--hoja-osc); margin: 0; }
@media (min-width: 560px) { .pw-logo { --pw-logo-size: 76px; } }
@media (min-width: 900px) { .pw-logo { --pw-logo-size: 92px; } }

.pronto {
  margin: 0;
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--claro);
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

footer {
  padding: 0 20px 22px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--tenue);
  max-width: 60ch;
  margin: 0 auto;
}