/* Hero de EA SPORTS WRC, bloque centrado, con la foto MUY tenue de fondo.

   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`.

   Mismo rediseño que los sitios de DiRT Rally 2.0 y DiRT Rally (2015), con los
   colores de este juego: el hero era una foto a sangre con una cabecera
   pegajosa encima y ahora es el bloque centrado que usan las paginas de
   "Proximamente", marca arriba, escarapela de la beta, titulo, bajada, boton,
   y la pastilla de juegos al final. La cabecera se fue con la foto a sangre: lo
   que hacia falta de ella (volver a la home, cambiar de idioma) quedo flotando
   en `.barra-hero`.

   ⚠ ORDEN DEL ARCHIVO: los bloques `@media (max-width: 760px)` y
   `@media (max-height: 820px)` van FISICAMENTE AL FINAL. Media query no suma
   especificidad, asi que una regla base declarada mas abajo le gana a la misma
   regla dentro del @media, y el sintoma es mudo: la compresion simplemente no
   pasa y no hay error en ningun lado. Regla nueva del hero = ARRIBA de esos dos
   bloques. */

.hero {
  overflow: hidden;
  position: relative;
  padding-top: 0;
  /* 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;
  justify-content: center;
  isolation: isolate;
  /* 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. */
  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);
}

/* 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. */
.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: .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(74, 168, 255, .17), transparent 70%),
    linear-gradient(to bottom, transparent 48%, rgba(16,18,22,.55) 66%, rgba(16,18,22,.93) 88%, var(--bg) 100%);
}

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

/* --- 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 a sangre ni cabecera,
   el titulo es lo unico que sostiene la parte de arriba. */
.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;
}

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

/* Arriba, el camino de vuelta a la izquierda y el grupo de atajos a la derecha:
   la pastilla de juegos vive al final del hero. `space-between` separa los dos
   extremos. */
.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;
}

/* El grupo de la derecha. Los atajos a precio, preguntas y anti-bugs nacen con
   el lanzamiento: en el hilo de Reddit de DiRT Rally 2.0 la unica objecion real
   fue creer que era un alquiler mensual, y la respuesta estaba a tres pantallas
   de scroll. Aca ya arranca a un click. */
.barra-der {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Los links de la barra. Sin caja: son ayudas, no botones. El de precio es la
   excepcion y lleva contorno visible, porque si es lo que frena la compra tiene
   que leerse como algo en que se puede hacer click. */
.volver,
.precio-flotante,
.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,
.precio-flotante:hover,
.idioma-flotante:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--txt);
}

.precio-flotante {
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--txt);
}

/* El atajo a Anti-bugs. Va en ambar y no con el contorno neutro del resto: el
   que lo busca ya tiene un problema encima y tiene que encontrarlo de un
   vistazo, sin leer las otras pastillas. */
.bug-flotante {
  border-color: rgba(255, 196, 107, 0.34);
  color: #ffd79a;
}

.bug-flotante:hover {
  background: rgba(255, 196, 107, 0.12);
  border-color: rgba(255, 196, 107, 0.5);
  color: #ffe2b8;
}

.barra-der .corto {
  display: none;
}

/* Con cinco pastillas en la barra (volver, precio, preguntas, anti-bugs e
   idioma) el telefono se queda sin ancho y se pisan con el "◂ TrueTriple" de la
   izquierda. Aca se achican y los textos largos pasan a su version corta
   ("Preguntas" a "FAQ", "¿Tenes un bug?" a "Bug"), el mismo recurso que ya usa
   el cambiador de juego mas abajo.

   Ojo si se suma una sexta: a 360px no entra. La siguiente que llegue tiene que
   sacar a otra, o la barra pasa a dos filas. */
@media (max-width: 620px) {
  .volver,
  .precio-flotante,
  .idioma-flotante {
    padding: 6px 9px;
    font-size: 12px;
  }

  .barra-der {
    gap: 4px;
  }

  .barra-der .largo {
    display: none;
  }

  .barra-der .corto {
    display: inline;
  }
}

/* --- 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: 26px;
  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);
}

/* --- escarapela de acceso ------------------------------------------------ */

/* Dos mitades separadas por una linea: a la izquierda el sello (que nivel), a
   la derecha la explicacion de por que hace falta. El sello solo se entendia
   si ya sabias que "Driver" es un nivel de Patreon; con la frase al lado se
   entiende sin saber nada.

   Todo es UN solo enlace al checkout del nivel: partirlo en dos daria dos
   destinos y no hay un segundo lugar al que mandar a alguien. */
.cocarda {
  /* `flex` y no `inline-flex`: la marca de arriba tambien es inline y las dos
     se acomodaban en el MISMO renglon, con la escarapela colgando al costado
     del logo. Al ser de bloque arranca en su propia linea, y se centra con el
     ancho al contenido mas los margenes automaticos. */
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: stretch;
  margin: 0 auto 22px;
  border: 1px solid rgba(255, 66, 77, 0.45);
  border-radius: 14px;
  background: rgba(14, 10, 12, 0.55);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
  color: var(--txt);
  text-decoration: none;
  line-height: 1.12;
  text-align: left;
  overflow: hidden;
}

.cocarda:hover {
  border-color: #ff424d;
  background: rgba(38, 12, 16, 0.7);
}

/* El sello. La foto de fondo quedo al 10%, tan tenue que ya no hace falta la
   sombra de texto que este bloque tenia cuando el hero era una foto a sangre. */
.cocarda .c-sello {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  flex: none;
  padding: 10px 18px 11px;
  text-align: center;
}

.cocarda .c-patreon {
  font-size: 8px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #ff424d;
}

.cocarda .c-tier {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.6px;
}

.cocarda .c-acceso {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #c9d0da;
}

/* La explicacion. La linea divisoria es el `border-left` de esta mitad, va
   POR DENTRO del contenedor, y con `align-items: stretch` + `overflow: hidden`
   llega de borde a borde sin pelearse con las esquinas redondeadas. */
.cocarda .c-nota {
  display: flex;
  align-items: center;
  border-left: 1px solid rgba(255, 66, 77, 0.32);
  padding: 10px 16px;
  max-width: 300px;
  font-size: 12.5px;
  line-height: 1.42;
  color: var(--txt2);
}

.cocarda .c-nota strong {
  color: var(--txt);
  font-weight: 600;
}

/* En un telefono las dos mitades una al lado de la otra dejan la frase en una
   columna de tres palabras. Se apilan, y la linea divisoria pasa a ser
   horizontal, es el mismo borde, cambiado de lado. */
@media (max-width: 560px) {
  .cocarda {
    flex-direction: column;
    max-width: 320px;
  }

  .cocarda .c-nota {
    border-left: 0;
    border-top: 1px solid rgba(255, 66, 77, 0.32);
    max-width: none;
    padding: 9px 16px 11px;
    text-align: center;
    justify-content: center;
  }
}

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

/* Al lado del boton principal, dentro de `.botones`: el hero ya venia largo y
   apilarlos sumaba una fila entera. Sin caja llena sigue leyendose como la
   segunda intencion. Arranca con [hidden] en el HTML y lo destapa `video.js`
   SOLO si hay un id cargado. */
.btn-video {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--txt2);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}

/* Sin esto el boton se ve igual cuando no hay video: el `display` de la regla de
   arriba 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:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--txt);
}

.btn-video svg {
  flex: none;
}

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

/* Al final del hero y no arriba: arriba era lo primero que veia el ojo y le
   competia a la marca, con la pagina abriendo en "elegi un juego" en vez de en
   "esto es TrueTriple para EA SPORTS WRC". Aca abajo llega en el orden correcto.
   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, 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. */
.cambiajuego a[aria-current] {
  background: rgba(255, 255, 255, 0.1);
  border-color: #4aa8ff59;
  color: #fff;
  box-shadow: 0 0 20px -6px #4aa8ff;
  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 ANGOSTAS. Va aca abajo por lo mismo que el bloque siguiente: media
   query no suma especificidad, y las reglas base de .marca-grande, .cocarda
   y .cambiajuego estan declaradas mas arriba en este archivo.
   Este sitio tiene la escarapela de la beta, que el de DiRT Rally 2.0 no tiene:
   son ~55 px mas de alto y sin esto la pastilla de juegos se iba abajo del
   pliegue en un telefono chico. */
@media (max-width: 760px) {
  /* Reserva para la barra flotante. Era `0`, y con la barra de dos links solos
     alcanzaba: el bloque centrado nunca le llegaba. Con las pastillas de precio,
     preguntas y anti-bugs la barra pasa a ocupar todo el ancho, y en el telefono
     el contenido del hero mide mas que la pantalla, asi que el bloque arranca
     pegado arriba y la marca centrada terminaba DEBAJO de las pastillas. El hero
     no recorta (crece con `min-height`), asi que reservar el alto aca alcanza. */
  .hero {
    padding-top: 56px;
  }

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

  .cocarda {
    margin-bottom: 16px;
  }

  .cambiajuego {
    margin-top: 44px;
  }
}

/* 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 juegos, que va ultima, nace abajo del
   pliegue. Aca no se achica nada, solo se junta el aire vertical.

   ESTE BLOQUE VA ULTIMO. Ver el aviso del encabezado del archivo. */
@media (max-height: 820px) {
  .hero {
    /* Igual que en el bloque de ancho: el espacio de la barra flotante no se
       puede devolver, es lo unico que evita que la marca quede abajo de las
       pastillas. Lo que se junta en pantalla baja es el resto del aire. */
    padding-top: 56px;
    padding-bottom: 38px;
  }

  /* 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, 50px);
  }

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

  /* La bajada pasa del tope de 20px al piso de 16 y se junta el interlineado:
     con el aviso abajo, es donde queda alto para recuperar sin desarmar nada. */
  .hero .bajada {
    font-size: 16.5px;
    line-height: 1.5;
    margin-bottom: 20px;
  }

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

  .cocarda {
    margin-bottom: 7px;
    padding: 5px 14px 6px;
  }

  .cambiajuego {
    margin-top: 8px;
  }
}

/* --- el visor que no existe ------------------------------------------------
   La seccion que explica el mecanismo del mod, la que no tiene equivalente en
   los sitios de DiRT Rally: alla se parchean shaders, aca se emula un visor.
   Es LO QUE DIFERENCIA a este mod, y es tambien la primera duda de cualquiera
   que lea "SteamVR" ("¿tengo que comprar un visor?"), asi que va apenas pasado
   el video, arriba de "Lo que vas a sentir", y con dibujo, no perdida en una
   respuesta del acordeon.

   El dibujo es una planta: el punto de vista abajo, los tres paneles arriba, y
   los dos conos de las vistas canteadas. Va en SVG inline y no en imagen porque
   son cuatro trazos y asi acompaña el tema del sitio sin pedir otro archivo.

   Las etiquetas NO van adentro del SVG: escalado a un telefono, un texto de 13
   en un viewBox de 640 termina en 6px. Van como leyenda HTML abajo, que se
   achica sola y ademas la lee un lector de pantalla. */
/* El dibujo y su leyenda, lado a lado en pantalla ancha. Apilados quedaba el
   dibujo centrado y el texto de la seccion alineado a la izquierda, o sea dos
   ejes distintos en el mismo bloque, y ademas dejaba media pantalla vacia al
   costado justo donde hay que leer que significa cada trazo. */
.figura-visor {
  display: grid;
  gap: 26px;
  align-items: center;
  margin-top: 26px;
  /* `minmax(0, …)` y no `1fr` a secas: una celda de grid no baja de su
     contenido minimo, y sin esto el SVG se niega a achicarse y desborda. */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}

@media (max-width: 860px) {
  .figura-visor {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}

/* El dibujo va en su propia caja y no suelto sobre el fondo de la seccion: sin
   el marco quedaba flotando, sin borde donde apoyarse, y se leia como un error
   de maquetado en vez de como una figura. */
.marco-plano {
  padding: 18px 20px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: var(--bg2);
}

.plano-visor {
  width: 100%;
  height: auto;
  display: block;
}

.leyenda-visor {
  margin: 0;
  display: grid;
  gap: 11px;
  padding: 0;
  list-style: none;
}

.leyenda-visor li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--txt2);
  font-size: 14.5px;
  line-height: 1.55;
}

/* La marca de color de cada renglon, del mismo tono que su trazo en el dibujo.
   `flex: none` y el margen de arriba la dejan alineada con la primera linea de
   texto y no estirada cuando el renglon ocupa dos. */
.leyenda-visor .marca-color {
  flex: none;
  width: 13px;
  height: 13px;
  margin-top: 5px;
  border-radius: 4px;
  background: var(--tono, #4aa8ff);
}

.leyenda-visor strong {
  color: var(--txt);
}

/* --- preguntas frecuentes --------------------------------------------------
   `<details>` nativo: sin JavaScript, con Ctrl+F del navegador encontrando el
   texto de las respuestas aunque esten cerradas. Se ve como la lista de "Que
   incluye" (linea fina arriba, sin tarjetas) para que las dos secciones se lean
   como la misma pagina. Gemelo del de los sitios de DiRT Rally. */
.faq {
  display: grid;
  gap: 0;
  max-width: 820px;
}

.faq details {
  border-top: 1px solid var(--linea);
}

.faq details:first-child {
  border-top: 0;
}

.faq details:last-child {
  border-bottom: 1px solid var(--linea);
}

/* El triangulo propio del navegador se saca en los dos dialectos: `marker` es
   el estandar y `-webkit-details-marker` es el que entiende Safari. */
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 17px 34px 17px 0;
  position: relative;
  font-weight: 600;
  font-size: 16.5px;
}

.faq summary::marker,
.faq summary::-webkit-details-marker {
  display: none;
}

/* La cruz de abrir/cerrar, dibujada con dos barras y no con un caracter: un
   glifo cambia de forma segun la tipografia que resuelva cada sistema. */
.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: 4px;
  /* La barra mide 2px: restarle 1 la deja centrada sin gastar el `transform`,
     que aca lo necesita la rotacion de la cruz. */
  top: calc(50% - 1px);
  width: 13px;
  height: 2px;
  border-radius: 2px;
  background: var(--txt2);
  transition: transform 0.18s ease;
}

.faq summary::after {
  transform: rotate(90deg);
}

.faq details[open] summary::after {
  transform: rotate(0deg);
}

.faq summary:hover {
  color: var(--acento);
}

.faq summary:hover::before,
.faq summary:hover::after {
  background: var(--acento);
}

.faq details p {
  color: var(--txt2);
  margin: 0 0 15px;
  padding-right: 34px;
}

/* Las listas dentro de una respuesta. `.faq details p` ya trae el gris y el
   sangrado de la derecha; sin esto un `<li>` saldria blanco y pegado al borde
   al lado de un parrafo que no lo esta. */
.faq details ul,
.faq details ol {
  margin: 0 0 15px;
  padding-left: 20px;
  padding-right: 34px;
  color: var(--txt2);
}

.faq details li {
  margin-bottom: 7px;
}

.faq details li:last-child {
  margin-bottom: 0;
}

.faq details li strong {
  color: var(--txt);
}

/* El renglon que cierra un caso con lo que se sabe de verdad: como se arregla,
   o que es lo que NO se pierde. Va en el color del texto fuerte porque es la
   linea que baja la ansiedad, y en el gris del parrafo se perdia. */
.faq .resuelto {
  color: var(--txt);
  font-weight: 600;
}

/* El `<code>` de los nombres de archivo y las teclas. No habia ninguno en el
   resto del sitio, asi que sin esto lo dibuja el navegador con su monoespaciada
   gigante. */
.faq code {
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.9em;
}

/* --- anti-bugs -------------------------------------------------------------
   La seccion reusa el acordeon de las preguntas frecuentes (`.faq`), asi que
   aca abajo solo esta el recuadro de las tres pruebas rapidas.

   Por que el recuadro y no otro `<details>` mas: las tres pruebas resuelven la
   mayoria de los casos, y un acordeon cerrado es una pared. Eso se lee sin
   hacer click; lo demas se abre solo si hace falta. */
.primeros-auxilios {
  max-width: 820px;
  margin: 0 0 30px;
  padding: 18px 22px;
  border: 1px solid rgba(255, 196, 107, 0.3);
  border-radius: 12px;
  background: rgba(38, 30, 18, 0.42);
}

.primeros-auxilios h3 {
  margin: 0 0 10px;
  color: #ffd79a;
}

.primeros-auxilios ol {
  margin: 0;
  padding-left: 20px;
  color: var(--txt2);
}

.primeros-auxilios li {
  margin-bottom: 8px;
}

.primeros-auxilios li:last-child {
  margin-bottom: 0;
}

.primeros-auxilios strong {
  color: var(--txt);
}

@media (max-width: 620px) {
  .primeros-auxilios {
    padding: 15px 16px;
  }

  .faq details ul,
  .faq details ol {
    padding-right: 0;
  }
}

/* Reserva para la barra flotante, en el hueco entre los dos bloques de arriba.
   El de `max-width: 760px` no llega a una tablet de 768 u 820 de ancho, y el de
   `max-height: 820px` tampoco (miden 1024 de alto): justo ahi el contenido del
   hero pasa a medir mas que la pantalla, el bloque centrado arranca pegado
   arriba, y la marca centrada se metia abajo de las pastillas de la derecha.
   Medido a 768x1024, que es un iPad de pie. Va al final del archivo a proposito:
   asi este valor gana sin depender de en que orden quedaron los otros dos. */
@media (max-width: 900px) {
  .hero {
    padding-top: 56px;
  }
}

/* --- el video, abajo del hero ----------------------------------------------
   Portado de DiRT Rally 2.0 cuando se saco el cartel de limitaciones del hero.
   Antes el boton abria un modal; ahora el video tiene bloque propio, y el hero
   necesita algo que invite a bajar: mide una pantalla entera, y si abajo no
   asoma nada, para el que llega la pagina termina ahi.

   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.

   ⚠ POR QUE ESTE BLOQUE VA AL FINAL DEL ARCHIVO, incluso despues de los dos
   bloques que el encabezado manda dejar ultimos: el padding del hero se declara
   con `padding` corto y se pisa en TRES lugares (base, `min-width: 860px` y
   `max-height: 820px`). Media query no suma especificidad, asi que la unica
   forma de sumarle el asomo a los tres sin depender del orden de los otros es
   repetir aca las mismas media queries, y despues de todas ellas. */
:root {
  --asomo: 120px;
}

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

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

/* Va DESPUES del de ancho, igual que el original: en una ventana ancha y baja
   aplican los dos, y el que manda el aire vertical es este. */
@media (max-height: 820px) {
  .hero {
    padding-bottom: calc(38px + 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;
  }
}

/* --- la app por dentro ------------------------------------------------------
   Grilla de capturas + visor. Copiado de /dirt-rally2/hero.css (2026-08-29):
   `visor.js` es IDENTICO al de DR2 y DR1, y estas reglas tambien. Un arreglo se
   lleva a los tres lados. */

.pantallas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 22px;
  margin: 26px 0 0;
}

.pantallas figure {
  margin: 0;
}

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

.pantallas figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--txt2);
}

@media (max-width: 760px) {
  .pantallas {
    grid-template-columns: 1fr;
  }
}

/* --- el visor de las capturas ----------------------------------------------
   Lo abre `visor.js`, que es el que envuelve cada captura en un `<button>` y le
   pone la clase `ampliable` a la grilla. Nada de esto se dibuja si el JS no
   corre: sin la clase, las reglas de abajo no matchean y la seccion queda como
   estaba. Por eso el estilo del boton cuelga de `.ampliable` y no del `figure`.

   Este bloque es IDENTICO en los dos juegos, igual que el `visor.js`. */

.pantallas.ampliable .lupa {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 10px;
  cursor: zoom-in;
}

/* El borde de la captura es el de `.pantallas img`; aca solo se le cambia el
   color al pasar por encima. Es toda la senal que hace falta junto con el
   cursor de lupa: un icono flotando arriba de la imagen tapa justo la parte de
   la interfaz que la captura viene a mostrar. */
.pantallas.ampliable .lupa img {
  transition: border-color 0.15s;
}

.pantallas.ampliable .lupa:hover img {
  border-color: var(--acento);
}

.pantallas.ampliable .lupa:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}

/* La pista de la bajada, que tambien la agrega el JS. Va en el color del texto
   fuerte para que se despegue del gris de la bajada, sin ser otro parrafo. */
.pista {
  color: var(--txt);
}

.visor {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: visor-aparece 0.18s ease-out;
}

@keyframes visor-aparece {
  from {
    opacity: 0;
  }
}

/* El fondo es un elemento propio y no el `background` de `.visor`: asi el click
   en el vacio cae en el fondo (que cierra) y no en el contenedor, que tambien
   contiene la imagen. */
.visor-fondo {
  position: absolute;
  inset: 0;
  /* Casi opaco, y SIN `backdrop-filter`. No es gusto: medido en un navegador
     con la aceleracion apagada, el desenfoque se descarta y de paso se lleva
     puesto el relleno, asi que la pagina se seguia leyendo entera detras de la
     captura. Con 0.94 y sin filtro tapa igual en todos lados, y con este nivel
     de opacidad el desenfoque no se veria ni aunque anduviera. */
  background: rgba(4, 5, 7, 0.94);
}

.visor-caja {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(1282px, 100%);
  max-height: 100%;
}

/* `width: auto` con `max-width` y `max-height`: la imagen se achica sola y el
   borde le queda pegado. Con `width: 100%` la caja seguiria midiendo todo el
   ancho y el borde flotaria lejos de la imagen en pantallas bajas. */
.visor-caja img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 74vh;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--bg3);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65);
}

.visor-caja figcaption {
  max-width: 900px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--txt2);
  text-align: left;
}

.visor-cuenta {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  letter-spacing: 1.4px;
  color: var(--txt);
  opacity: 0.6;
}

.visor-btn {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}

.visor-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.visor-cerrar {
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  font-size: 15px;
}

.visor-ant,
.visor-sig {
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  /* El glifo de la flecha se dibuja alto: sin este empujon queda mirando hacia
     abajo dentro del circulo. */
  padding-bottom: 4px;
  font-size: 28px;
}

.visor-ant {
  left: 16px;
}

.visor-sig {
  right: 16px;
}

/* Pantalla angosta: las flechas se corren a los bordes y se achican, y la
   imagen le deja lugar al pie, que aca ocupa mas renglones. */
@media (max-width: 620px) {
  .visor {
    padding: 16px 8px;
  }

  .visor-caja img {
    max-height: 58vh;
  }

  .visor-ant,
  .visor-sig {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }

  .visor-ant {
    left: 6px;
  }

  .visor-sig {
    right: 6px;
  }
}

/* Telefono acostado: 74vh de imagen mas el pie no entran, y el pie es lo que se
   corta. */
@media (max-height: 620px) {
  .visor-caja img {
    max-height: 62vh;
  }

  .visor-caja figcaption {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visor {
    animation: none;
  }
}

/* --- la captura chica dentro de Anti-bugs ----------------------------------
   La caja de "Parametros de inicio" de Steam, recortada. Va DEBAJO de la tercera
   prueba rapida, no en un <details>: es la prueba que mas se falla y la captura
   dice de un vistazo donde va el `-vr`. */
.primeros-auxilios .captura-mini {
  margin: 10px 0 2px;
}

.primeros-auxilios .captura-mini img {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  border: 1px solid var(--linea);
  border-radius: 8px;
}

.primeros-auxilios .captura-mini figcaption {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--txt2);
}

/* --- etiqueta de requisito (Surround) --------------------------------------
   Debajo de la escarapela: hoy el driver dibuja en UNA ventana sobre UN monitor
   de Windows, asi que los tres paneles tienen que ser un solo escritorio
   (Surround / Eyefinity). Es temporal: el "temporalmente" chico es la promesa
   de que se va a intentar con tres pantallas sueltas. Lleva al FAQ que lo
   explica. Ambar, no rojo: es un requisito, no un error. */
.requisito {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: -6px auto 22px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 196, 107, 0.4);
  border-radius: 999px;
  background: rgba(38, 30, 18, 0.55);
  color: #ffd79a;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.requisito small {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: none;
  color: var(--txt2);
}

.requisito:hover {
  border-color: #ffc46b;
  color: #ffe4bd;
}

/* Angosto: el texto en mayusculas ya no entra en un renglon. Se apila, la
   nota chica abajo, todo centrado; sin esto la nota quedaba a la derecha y
   "REQUERIDO" solo en un segundo renglon. */
@media (max-width: 480px) {
  .requisito {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    white-space: normal;
    text-align: center;
    border-radius: 16px;
    padding: 8px 16px;
  }
}