/* Hero de DiRT Rally 2.0, bloque centrado, sin foto.

   Va en un archivo aparte de `/css/estilo.css` A PROPOSITO: esa hoja sale del
   contenedor del hub (el que sirve la home) para TODO el dominio, y la copia
   que hay en este repo, en `sitio/css/estilo.css`, no llega nunca al navegador.
   Lo propio de este juego va en un archivo bajo la ruta de este juego, que si
   lo sirve este contenedor. Se carga despues de la comun y pisa `.hero`.

   El hero era una foto a sangre con una cabecera pegajosa encima. Ahora es el
   mismo bloque centrado que usan las paginas de "Proximamente": marca arriba,
   titulo, bajada y botones, sobre el fondo liso con el resplandor de marca.
   La cabecera se fue con la foto, una barra solida arriba le comia el aire al
   bloque, y lo que hacia falta de ella (volver a la home, cambiar de idioma,
   saltar a otro juego) quedo flotando en `.barra-hero`.

   `hero.webp` y `hero-sm.webp` siguen en el repo aunque ya nadie las pida: son
   el arte del banner y no cuesta nada tenerlas si el hero vuelve a llevar foto.
   Ya no se precargan, claro. */

.hero {
  position: relative;
  /* Pantalla completa: el hero es lo unico que se ve al entrar. */
  min-height: 100vh;
  /* En el telefono `100vh` mide con la barra de direcciones RETRAIDA, asi que
     el hero queda mas alto que lo que se ve de entrada y la pastilla de los
     juegos, que va justo al final, nace cortada. `100svh` es el alto chico, el
     de la barra desplegada, y garantiza que entre todo. Va en una linea aparte
     a proposito: el navegador que no conozca la unidad descarta esta y se
     queda con la de arriba. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  /* La foto de atras sale del contenedor al cubrirlo entero; sin esto asoma. */
  overflow: hidden;
  /* Sin espacio arriba: el bloque se centra en el alto que sobra y la barra
     flotante no ocupa lugar en el flujo, asi que no hay nada que reservar.
     Verificado que no se pisan. */
  padding: 0 0 64px;
  text-align: center;
  /* La forma corta y no `background-color`: la hoja comun ya le pone un
     degradado de marca a `.hero`, y con `background-color` solo se le cambia el
     color de atras, el degradado sigue ahi y se suma al del ::before, con el
     resplandor de arriba al doble. Asi queda uno solo. */
  background: var(--bg);
}

/* El bloque se centra con margenes automaticos y NO con `justify-content:
   center`. Los dos centran igual cuando sobra lugar, pero cuando el contenido no
   entra `justify-content` reparte el faltante a los dos lados y se lleva media
   pantalla para arriba, ignorando el padding; los margenes automaticos se
   achican a cero primero, asi que el bloque nunca sube mas alla del padding.
   Se nota en un telefono chico (360x640), donde el hero no alcanza. */
.hero > .envoltorio {
  margin-top: auto;
  margin-bottom: auto;
}

/* La foto del juego, MUY tenue y detras de todo. Al 10 % y cubriendo el hero
   entero no es una imagen que compita: es una textura que le da identidad al
   bloque y deja el texto limpio. La mascara la arranca desvanecida arriba, para
   que nazca de la nada en vez de cortarse contra la barra flotante.

   Probamos antes con la foto desenfocada de fondo y con el arte de tapa
   flotando al costado, y las dos se descartaron: estas fotos tienen mucho polvo
   y nieve, asi que el desenfoque da gris en vez de atmosfera, y la pieza suelta
   rompia la simetria del bloque centrado. */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  z-index: -2;
  pointer-events: none;
  background: url("hero.webp") center 35% / cover no-repeat;
  opacity: 0.1;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 40%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 40%, #000 100%);
}

/* Resplandor de marca arriba, y un velo que apaga el ultimo tercio: ahi caen el
   renglon del pie y la pastilla de juegos, y sin el velo quedaban sobre la parte
   clara de la foto. Termina en el color de fondo exacto, asi que la costura con
   la seccion de abajo no se ve. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255, 138, 61, 0.17), transparent 70%),
    linear-gradient(
      to bottom,
      transparent 48%,
      rgba(16, 18, 22, 0.55) 66%,
      rgba(16, 18, 22, 0.93) 88%,
      var(--bg) 100%
    );
}

/* --- titulo y botones ---------------------------------------------------- */

/* Los dos van acotados a `.hero` a proposito: `.botones` tambien lo usa la
   seccion "Que estas apoyando" mas abajo, y ahi el espaciado esta bien como
   esta. Sin el prefijo, tocar uno movia el otro. */

/* Mas grande que en la hoja comun (34/6vw/58): sin foto de fondo ni cabecera,
   el titulo es lo unico que sostiene la parte de arriba, y con el tamaño de
   antes le quedaba grande el espacio. */
.hero h1 {
  font-size: clamp(38px, 6.8vw, 68px);
}

/* La bajada trae 28px de margen abajo; esto los sube a 44. El boton es la
   accion, y separarlo del parrafo lo hace leer como decision y no como el
   renglon siguiente. */
.hero .botones {
  margin-top: 16px;
}

@media (min-width: 860px) {
  .hero {
    padding: 0 0 76px;
  }
}

/* --- barra flotante ------------------------------------------------------ */

/* Arriba quedan solo los dos links de los costados: el cambiajuego se fue al
   final del hero. Con dos elementos alcanza `space-between`; la grilla de tres
   columnas que habia aca existia unicamente para centrar el del medio. */
.barra-hero {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 16px;
}

/* Los dos links de los costados. Sin caja: son ayudas, no botones. */
.volver,
.idioma-flotante {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--txt2);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}

.volver:hover,
.idioma-flotante:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--txt);
}

/* Sin la pastilla arriba, el bloque puede arrancar mas arriba. */
@media (max-width: 760px) {
  /* En escritorio el hero va sin espacio arriba y no molesta: la marca esta
     centrada y los dos links de la barra en las esquinas, asi que aunque
     compartan altura no se tocan. En un telefono el bloque es tan ancho como la
     pantalla y SI le llega al "◂ TrueTriple" de la izquierda. Medido: se
     pisaban de verdad. Aca se le devuelve el alto de la barra, y nada mas. */
  .hero {
    padding-top: 62px;
  }
}

/* --- marca centrada ------------------------------------------------------ */

/* El mismo bloque que abre las paginas de "Proximamente". Linkea a la home:
   sin cabecera, es la forma principal de salir de este juego. */
.marca-grande {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 34px;
  text-decoration: none;
  color: var(--txt);
  border-radius: 10px;
  padding: 6px 10px;
  transition: background 0.15s;
}

.marca-grande:hover {
  background: rgba(255, 255, 255, 0.05);
}

.marca-grande svg {
  flex: none;
}

.marca-grande strong {
  display: block;
  font-size: 20px;
  letter-spacing: 0.3px;
  line-height: 1.2;
}

.marca-grande .juego {
  display: block;
  font-size: 13px;
  color: var(--txt2);
}

/* --- boton del video ----------------------------------------------------- */

/* Debajo del boton principal, no al lado: el que llega quiere el mod, y el
   video es la segunda intencion. Arranca con [hidden] en el HTML y lo destapa
   `video.js` SOLO si hay un id cargado. */
/* El boton del video vive dentro de .botones, al lado del CTA, asi que hereda
   la forma de .btn de la hoja comun. Aca solo va lo propio: el tono secundario
   (el naranja es del CTA, y dos botones llenos compiten) y el icono. */
.btn-video {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--txt);
  font-family: inherit;
  cursor: pointer;
  gap: 9px;
}

.btn-video:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.22);
}

/* Sin esto el boton se ve igual cuando no hay video: el `display` que .btn trae
   de la hoja comun le gana al `display:none` que el atributo [hidden] trae del
   navegador, asi que hay que repetirlo con la misma especificidad o mayor. */
.btn-video[hidden] {
  display: none;
}

.btn-video svg {
  flex: none;
}

/* --- cambiador de juego -------------------------------------------------- */

/* Antes flotaba solo, centrado con position:absolute. Ahora es la celda del
   medio de `.barra-hero`, que es la que lo centra: por eso aca ya no hay
   posicionamiento, solo la pastilla. El juego abierto se marca con aria-current
   en el HTML, el selector sale de ahi y no de una clase, asi que no hay forma
   de que el estado visual y el que anuncia el lector de pantalla queden
   distintos. */

.cambiajuego {
  /* inline-flex y no flex: asi lo centra el `text-align: center` del hero, sin
     tener que fijarle un ancho. */
  display: inline-flex;
  margin-top: 70px;
  vertical-align: top;
  gap: 4px;
  max-width: 100%;
  /* 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 aunque el item no este seleccionado:
   es lo que lo hace reconocible de un vistazo. Lo que baja es la intensidad.
   Assetto Gallery no es un juego, usa su propio logo y no el triple-monitor
   tintado, pero comparte el mismo tratamiento de opacidad. */
.cambiajuego svg {
  flex: none;
  opacity: 0.55;
}

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

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

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

/* El juego abierto. El resplandor va en el color de ESTE juego (DiRT Rally 2.0), no en
   el acento de la hoja comun. */
.cambiajuego a[aria-current] {
  background: rgba(255, 255, 255, 0.1);
  border-color: #ff8a3d59;
  color: #fff;
  box-shadow: 0 0 20px -6px #ff8a3d;
  cursor: default;
}

.cambiajuego a[aria-current] svg {
  opacity: 1;
}

.cambiajuego .corto {
  display: none;
}

/* En un telefono los cuatro 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;
  }
}

/* Pantallas BAJAS (un portatil de 1366x700, un telefono acostado). Pedir
   `100vh` no sirve de nada si el contenido mide mas que eso: min-height deja
   crecer al hero, y la pastilla de los juegos, que va ultima, nace abajo del
   pliegue. Medido: sin esto el hero pide 799 px y en una ventana de 700 se
   corta. Aca no se achica nada, solo se junta el aire vertical. */
@media (max-height: 820px) {
  /* ESTE BLOQUE VA ULTIMO, y no es un detalle de prolijidad: media query no
     suma especificidad. `.hero h1` de aca adentro pesa exactamente lo mismo que
     el `.hero h1` de afuera, asi que gana el que este mas abajo en el archivo.
     Con el bloque de titulo debajo de este, lo de aca no tenia NINGUN efecto y
     el sintoma era mudo: el titulo se quedaba en 68px y no habia error en
     ningun lado. Si se agrega una regla nueva al hero, va ARRIBA de este bloque. */
  .hero {
    padding-bottom: 44px;
  }

  /* El titulo grande no entra en una pantalla baja: dos renglones al tope de
     68px se comen los 17px que faltaban. Aca vuelve al tope de la hoja comun.
     Se achica el TOPE, no el minimo: en una ventana angosta y baja el clamp
     sigue mandando y el titulo no cambia. */
  .hero h1 {
    font-size: clamp(38px, 6.8vw, 56px);
  }

  .hero .botones {
    margin-top: 10px;
  }

  .marca-grande {
    margin-bottom: 20px;
  }

  /* Los 70 de arriba no entran en una pantalla baja: en 1366x700 el hero pide
     700 justos y ese margen se lleva la pastilla abajo del pliegue. */
  .cambiajuego {
    margin-top: 24px;
  }
}

/* --- capturas comparativas (seccion "Lo que vas a sentir") ----------------
   Van en esta hoja y no en /css/estilo.css porque esa sale del contenedor
   del hub, para todo el dominio: lo propio de este juego vive aca.
   Las dos fotos ya traen los rotulos "Fixed" y "Streched" quemados arriba
   de la imagen, asi que el pie no los repite: aclara que es la misma curva
   con y sin el mod, que es lo unico que la foto no puede decir sola. */
.captura {
  margin: 0 0 26px;
}

.captura.abajo {
  margin: 30px 0 0;
}

.captura img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--bg3);
}

.captura figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--txt2);
}

/* --- el dibujo del problema, traido de la home ----------------------------
   Copia del bloque de `#que-es` del hub. Las clases (.comparativa, .caso,
   .punto) ya vienen en /css/estilo.css, que sale del hub para todo el
   dominio: aca solo hace falta el aire alrededor. Los dos dibujos ocupan el
   ancho entero del envoltorio, el mismo de las fotos de arriba y abajo,
   porque .comparativa es una grilla de 1fr 1fr y los svg van a width 100%. */
.dibujo-problema {
  margin: 34px 0 0;
}

.dibujo-problema > p {
  color: var(--txt2);
  font-size: 14.5px;
  margin: 0 0 16px;
  max-width: 680px;
}

/* --- "Que incluye" sin tarjetas -------------------------------------------
   Eran seis recuadros en grilla y competian entre si: todos del mismo peso,
   ninguno se leia. Aca va lista corrida, titulo y texto debajo, separada por
   una linea fina, que se recorre de arriba a abajo en vez de barrerse.
   El texto se corta en 760px aunque el envoltorio mida 1080: un parrafo de
   una sola linea a lo ancho de la pantalla no se lee, se adivina. */
.incluye {
  display: grid;
  gap: 0;
}

.incluye > div {
  padding: 20px 0;
  border-top: 1px solid var(--linea);
}

.incluye > div:first-child {
  border-top: 0;
  padding-top: 4px;
}

.incluye h3 {
  font-size: 19px;
  margin: 0 0 7px;
}

.incluye p {
  color: var(--txt2);
  margin: 0;
  max-width: 760px;
}

/* La bajada del hero pasa a 850px de ancho. La hoja comun la corta en 640,
   que estaba bien cuando eran tres renglones; ahora cuenta una historia y a
   640 quedaba una columna angosta y muy alta en el medio de la pantalla.
   Mismo selector que la comun, `.hero .bajada`, y esta hoja carga despues:
   con igual especificidad gana la ultima. */
.hero .bajada {
  max-width: 850px;
}

/* --- el bloque del video --------------------------------------------------
   El hero mide una pantalla entera, asi que sin ayuda nada avisa que abajo hay
   algo. El bloque del video se sube y ASOMA sobre el borde del hero: en la
   primera pantalla se ve una franja suya, que es la que invita a bajar.

   El asomo NO se hace comiendole lugar al hero: se le suma al padding de abajo
   del hero exactamente lo mismo que se sube el video. Asi el video ocupa un
   pedazo del hero que por definicion esta vacio, y nunca puede pisarle la
   pastilla de juegos, que es lo ultimo de la columna. Como el padding del hero
   se declara con `padding` corto y ademas se pisa en una media query, aca hay
   que repetir la misma media query: una media query no suma especificidad, y
   sin repetirla esta regla le ganaria en todos los anchos. */
:root {
  --asomo: 120px;
}

.hero {
  padding-bottom: calc(64px + var(--asomo));
}

@media (min-width: 860px) {
  .hero {
    padding-bottom: calc(76px + var(--asomo));
  }
}

#video {
  position: relative;
  /* Los pseudoelementos del hero van en z-index -1 y -2, asi que con crear
     contexto alcanza para quedar por encima del degradado. */
  z-index: 1;
  margin-top: calc(var(--asomo) * -1);
  /* Sin padding arriba: el que trae `section` de la hoja comun se comeria el
     asomo, que es justo lo que se quiere mostrar. */
  padding: 0 0 52px;
}

.video-caja {
  margin: 0;
}

/* La portada es un boton de verdad y no un div con onclick: se llega con Tab,
   se dispara con Enter, y el lector de pantalla lo anuncia. */
.video-portada {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg3);
  cursor: pointer;
  position: relative;
  line-height: 0;
}

.video-portada img {
  display: block;
  width: 100%;
  height: auto;
}

/* Un velo que se aclara al pasar el mouse: sin el, la portada parece una foto
   mas de la pagina y no algo que se puede tocar. */
.video-portada::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 15, 0.28);
  transition: background 0.18s;
}

.video-portada:hover::after,
.video-portada:focus-visible::after {
  background: rgba(10, 12, 15, 0.1);
}

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  line-height: 0;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5));
  transition: transform 0.18s;
}

.video-portada:hover .video-play,
.video-portada:focus-visible .video-play {
  transform: translate(-50%, -50%) scale(1.08);
}

/* El iframe lo crea video.js recien al hacer click, reemplazando a la portada.
   El marco reserva la proporcion para que el salto no mueva la pagina. */
.video-marco-yt {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--linea);
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.video-marco-yt iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-caja figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--txt2);
  text-align: center;
}

/* En un telefono el asomo tiene que ser mas chico: la pantalla es angosta, el
   video entra bajito, y 120px se comian casi todo el bloque. */
@media (max-width: 760px) {
  :root {
    --asomo: 70px;
  }

  #video {
    padding-bottom: 40px;
  }
}