/* zaxfun — portada.
   Misma paleta y tipografías que «¿Cuánto falta?» a propósito: entrar en un
   juguete no debe sentirse como cambiar de web. Mobile-first. */

:root {
  --fondo:        #05060f;
  --panel:        rgba(255, 255, 255, .045);
  --panel-borde:  rgba(255, 255, 255, .09);
  --texto:        #e9edfb;
  --texto-tenue:  #8e97b8;
  --cian:         #6fd3ff;
  --violeta:      #b98cff;
  --oro:          #ffd479;
  --radio:        20px;
  --tipo-titulo:  'Space Grotesk', system-ui, sans-serif;
  --tipo-texto:   'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--tipo-texto);
  line-height: 1.6;
  overflow-x: hidden;
}

/* El cielo va detrás de todo y no captura clics. */
#estrellas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.envoltorio {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(3rem, 10vw, 6rem) clamp(1rem, 4vw, 2rem) 4rem;
}

/* ---------- Cabecera ---------- */

.cabecera { text-align: center; margin-bottom: clamp(2.6rem, 8vw, 4.5rem); }

.marca {
  font-family: var(--tipo-titulo);
  font-weight: 700;
  font-size: clamp(3rem, 13vw, 6rem);
  line-height: 1;
  letter-spacing: -.045em;
  margin: 0 0 .7rem;
  background: linear-gradient(135deg, #fff 10%, var(--cian) 55%, var(--violeta) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lema {
  margin: 0 auto;
  max-width: 34ch;
  color: var(--texto-tenue);
  font-size: clamp(1rem, 2.6vw, 1.18rem);
}

/* Píldora dorada, igual que en los juguetes: en gris se perdía sobre el cielo. */
.idioma {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 5;
  padding: .58rem 1.05rem;
  border: 1px solid rgba(255, 212, 121, .45);
  border-radius: 999px;
  background: rgba(10, 14, 32, .82);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 20px -6px rgba(255, 212, 121, .35);
  color: var(--oro);
  font: 700 .86rem/1 var(--tipo-texto);
  letter-spacing: .08em;
  cursor: pointer;
  transition: color .2s, border-color .2s, box-shadow .2s;
}
.idioma:hover {
  color: #ffe6ab;
  border-color: rgba(255, 212, 121, .85);
  box-shadow: 0 0 26px -4px rgba(255, 212, 121, .55);
}

/* ---------- Rejilla de juguetes ---------- */

.rejilla {
  display: grid;
  gap: clamp(1rem, 3vw, 1.6rem);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.juguete {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--panel-borde);
  border-radius: var(--radio);
  background: var(--panel);
  color: inherit;
  text-decoration: none;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), border-color .22s, box-shadow .22s;
}

.juguete:hover,
.juguete:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(111, 211, 255, .45);
  box-shadow: 0 20px 45px -25px rgba(111, 211, 255, .65);
  outline: none;
}

/* La miniatura es el og.png del propio juguete: no hay que dibujar nada aparte. */
.juguete-imagen {
  position: relative;
  aspect-ratio: 1200 / 630;
  background: #0b0f22;
  overflow: hidden;
}
.juguete-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.2,.8,.3,1);
}
.juguete:hover .juguete-imagen img { transform: scale(1.04); }

.juguete-cuerpo { padding: 1.1rem 1.2rem 1.3rem; }

.juguete-titulo {
  margin: 0 0 .35rem;
  font-family: var(--tipo-titulo);
  font-size: 1.22rem;
  font-weight: 500;
  letter-spacing: -.02em;
}

.juguete-texto {
  margin: 0;
  color: var(--texto-tenue);
  font-size: .93rem;
}

.etiqueta {
  display: inline-block;
  margin-left: .5rem;
  padding: .18rem .5rem;
  border: 1px solid rgba(111, 211, 255, .4);
  border-radius: 999px;
  color: var(--cian);
  font: 600 .62rem/1 var(--tipo-texto);
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Hueco para lo que venga. Con un solo juguete la rejilla se veía coja. */
.proximamente {
  display: grid;
  place-items: center;
  min-height: 140px;
  padding: 1.6rem 1.4rem;
  border: 1px dashed var(--panel-borde);
  border-radius: var(--radio);
  color: var(--texto-tenue);
  font-size: .92rem;
  text-align: center;
}

/* ---------- Qué es zaxfun ----------
   Texto apagado y estrecho: está para que Google tenga algo que leer y para
   quien llegue de fuera, no para robarle protagonismo a las tarjetas. */

.sobre {
  max-width: 62ch;
  margin: clamp(2.5rem, 7vw, 4rem) auto 0;
  color: rgba(233, 237, 251, .68);
  font-size: .92rem;
  line-height: 1.65;
}

.sobre h2 {
  margin: 0 0 .6rem;
  font-family: var(--tipo-titulo);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--texto);
}

.sobre p { margin: 0; }

/* ---------- Pie ---------- */

.pie {
  margin-top: clamp(3rem, 9vw, 5rem);
  text-align: center;
  color: var(--texto-tenue);
  font-size: .84rem;
}
.pie p { margin: .3rem 0; }

.credito {
  color: var(--texto-tenue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.credito:hover { color: var(--texto); border-bottom-color: rgba(255, 212, 121, .5); }

/* El nombre es la marca: dorado SIEMPRE, no solo al pasar por encima. */
.firma-nombre {
  color: var(--oro);
  font-weight: 600;
  letter-spacing: .02em;
  text-shadow: 0 0 14px rgba(255, 212, 121, .35);
}
.credito:hover .firma-nombre,
.credito:focus-visible .firma-nombre {
  color: #ffe6ab;
  text-shadow: 0 0 18px rgba(255, 212, 121, .6);
}

@media (prefers-reduced-motion: reduce) {
  .juguete, .juguete-imagen img { transition: none; }
}