/* Cambiador de juego para la home.

   Va en un archivo propio y no en `css/estilo.css` porque esa hoja la sirve
   ESTE contenedor para todo el dominio, la usan tambien las paginas de los tres
   juegos y la de sponsor, y estas reglas son solo de la home: el hueco de
   arriba del hero solo tiene sentido donde esta el cambiador. Los sitios de
   juego tienen este mismo bloque dentro de su `hero.css`; aca no hay ninguno
   seleccionado, porque la home no es ninguno de los tres. */

.hero {
  position: relative;
  /* El contenido se centra en el alto que sobre, asi que este numero es lo que
     decide el aire de arriba y el de abajo: la mitad de (alto - contenido) a
     cada lado. Con 600 quedaban 142 px entre la cabecera y el titulo, que era
     demasiado; 460 los deja en 71.
     (Antes este 600 estaba igualado con los otros tres heros para que el
     contenido no se moviera al saltar de un juego a otro. Eso ya no aplica:
     DiRT Rally 2.0 y DiRT Rally 2015 pasaron a `100vh`.) */
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Los dos bloques de texto del hero, con la misma separacion. En la hoja comun
   el titulo lleva 14 px y la bajada 28, que es lo que necesita un hero con mas
   aire alrededor; aca, mas compacto, quedan iguales. Van en este archivo y no
   en la hoja comun porque esa la usan tambien las paginas de los tres juegos. */
.hero h1 {
  margin-bottom: 20px;
}

.hero .bajada {
  margin-bottom: 20px;
}

/* El hueco de arriba del hero se fue con el cambiador de juego, que hoy esta
   comentado en el HTML (ver el aviso ahi): existia solo para dejarle lugar a la
   pastilla, que flota y no ocupa espacio en el flujo. Sin ella era un vacio.
   Si el cambiador vuelve, esto vuelve con el.

  padding-top: 100px;
}

@media (min-width: 860px) {
  .hero {
    padding-top: 116px;
  }
}
*/

/* El titulo "Elegi tu juego" y su bajada se sacaron de la vista: las tres
   tarjetas con su foto y su etiqueta de estado ya dicen lo mismo, y el titulo
   solo empujaba el contenido para abajo. El h2 sigue en el HTML pero escondido,
   ver `.solo-lectores` mas abajo, y con el se va tambien el aire que separaba
   el hero de las tarjetas: ahora salen una atras de la otra. */
.hero {
  padding-bottom: 0;
}

#juegos {
  /* El titulo de la seccion se fue, asi que la separacion con el hero la pone
     esto. Son 60 px CONTADOS DESDE EL BORDE DEL HERO: aparte de estos, el hero
     ya deja aire propio debajo de los botones (centra su contenido en el alto
     que le sobra). */
  padding-top: 60px;

  /* El boton "Ver los juegos" y el "Juegos" de la cabecera saltan aca. Sin esto
     el navegador deja el borde de la seccion pegado al borde de arriba de la
     ventana, o sea DEBAJO de la cabecera pegajosa, que mide 63 px, y las
     tarjetas nacian tapadas.
     La cuenta: se quiere que la TARJETA quede 29 px debajo de la cabecera, o
     sea a 92 px del techo. Como los 60 de padding ya empujan la tarjeta para
     abajo, al borde de la seccion le toca frenar en 92 - 60 = 32. Si se cambia
     el padding de arriba, este numero cambia con el. */
  scroll-margin-top: 32px;
}

/* Visible para lectores de pantalla y buscadores, invisible en la pantalla.
   No se usa `display: none` ni `visibility: hidden` a proposito: esos dos lo
   sacan tambien del arbol de accesibilidad, que es justo lo que se quiere
   conservar. El recorte a 1 px es la receta de siempre para eso. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.cambiajuego {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 4px;
  max-width: calc(100% - 24px);
  /* Con Assetto Gallery sumada ya son cuatro; en un telefono chico mejor que
     se deslice a que se corte. */
  overflow-x: auto;
  scrollbar-width: none;
  padding: 5px;
  border-radius: 999px;
  background: rgba(10, 12, 16, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.cambiajuego::-webkit-scrollbar {
  display: none;
}

.cambiajuego a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: #c3cad6;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition:
    background 0.15s,
    color 0.15s;
}

/* El icono de cada juego lleva SU color: es lo que lo hace reconocible de un
   vistazo. Assetto Gallery no es un juego, usa su propio logo en vez del
   triple-monitor tintado, pero comparte el mismo tratamiento de opacidad. */
.cambiajuego svg {
  flex: none;
  opacity: 0.62;
}

.cambiajuego img {
  flex: none;
  width: 19px;
  height: 19px;
  border-radius: 4px;
  opacity: 0.62;
}

.cambiajuego a:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--txt);
}

.cambiajuego a:hover svg,
.cambiajuego a:hover img {
  opacity: 1;
}

.cambiajuego .corto {
  display: none;
}

/* En un telefono los tres nombres largos no entran en la barra. */
@media (max-width: 620px) {
  .cambiajuego a {
    gap: 6px;
    padding: 7px 11px;
    font-size: 12px;
  }

  .cambiajuego .largo {
    display: none;
  }

  .cambiajuego .corto {
    display: inline;
  }
}