/* Hero de DiRT Rally (2015), 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`.

   Mismo rediseño que el sitio de DiRT Rally 2.0, 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: lo que hacia falta de ella (volver a
   la home, cambiar de idioma) 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.

   ⚠ ORDEN DEL ARCHIVO: el bloque `@media (max-height: 820px)` va FISICAMENTE
   ULTIMO. 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 ese bloque. */

.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(215, 225, 74, 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%
    );
}

@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 de fondo 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 quedan solo los dos links de los costados: la pastilla de juegos vive
   al final del hero. Con dos elementos alcanza `space-between`. */
.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;
}

/* A la derecha ya no hay un link solo: el atajo a Anti-bugs viaja con el de
   idioma, asi que van agrupados y `space-between` sigue alcanzando. */
.barra-der {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Los links de la barra. Sin caja: son ayudas, no botones. Los del medio son la
   excepcion y llevan contorno visible mas abajo: el de precio porque si es lo
   que frena la compra tiene que leerse como algo en que se puede hacer click, y
   el de anti-bugs porque el que lo busca ya tiene un problema encima. */
.volver,
.precio-flotante,
.bug-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);
}

/* El de precio, con el contorno neutro. Mismo tratamiento que en DiRT Rally
   2.0: es el link que contesta la objecion mas repetida (creer que es un
   alquiler mensual) y estaba a tres pantallas de scroll. */
.precio-flotante {
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--txt);
}

/* Ambar y no el verde de este juego por el mismo motivo que el aviso del hero:
   el color de marca es el del reclamo, y una pastilla de "algo te falla" en ese
   tono se lee como parte del reclamo en vez de como una salida de emergencia.
   El ambar es el mismo en los cuatro sitios: el problema no cambia de color
   segun el juego. */
.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,
  .bug-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);
}

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

/* Debajo del boton principal, no al lado: el que llega quiere el acceso, y el
   video es 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;
  gap: 9px;
  margin-top: 18px;
  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;
}

/* --- modal del video ----------------------------------------------------- */

/* Lo crea `video.js` al hacer click y lo destruye al cerrar: sacar el nodo
   destruye el iframe, y eso es lo que corta la reproduccion (si solo se
   ocultara, el video seguiria sonando de fondo). */
.modal-video {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: modal-aparece 0.18s ease-out;
}

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

.modal-fondo {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 7, 0.84);
  backdrop-filter: blur(4px);
}

.modal-caja {
  position: relative;
  width: min(1120px, 100%);
}

.modal-marco {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--linea);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65);
}

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

.modal-cerrar {
  position: absolute;
  top: -44px;
  right: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.modal-cerrar:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* En pantallas bajas o angostas la ✕ arriba del marco se sale de la vista. */
@media (max-height: 520px), (max-width: 560px) {
  .modal-cerrar {
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal-video {
    animation: 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 DiRT Rally". 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: #d7e14a59;
  color: #fff;
  box-shadow: 0 0 20px -6px #d7e14a;
  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 y .cambiajuego
   estan declaradas mas arriba en este archivo.
   Los valores que siguen se midieron cuando el hero traia la escarapela de la
   beta, ~55 px mas de alto. La escarapela se saco el 2026-08-25 (el acceso dejo
   de ser por nivel), asi que ahora sobra aire: si algo de esto se vuelve a
   tocar, medir de nuevo contra un telefono de 844 en vez de confiar en estos
   numeros. */
@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-grande {
    margin-bottom: 18px;
  }

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

/* --- el aviso de limitaciones --------------------------------------------
   Va DENTRO del hero, entre el boton del video y la pastilla de juegos: el que
   llega tiene que leerlo antes de suscribirse, no despues de bajar el mod y
   toparse con un artefacto en los costados. Por eso no es una seccion de abajo.

   Flota sobre el fondo del hero (vidrio, borde propio y sombra) pero OCUPA
   LUGAR en el flujo. Un `position: absolute` no le comeria alto al hero,
   cierto, pero el hero es una columna centrada de alto medido al milimetro (ver
   el bloque de `max-height: 820px`): cualquier cosa flotando encima le cae
   justo a la bajada o a la pastilla. Ocupando lugar, el hero se estira y nada
   se pisa.

   El color es ambar y no el lima de este juego a proposito: el lima es el del
   acento, y un aviso del mismo tono se lee como parte del reclamo en vez de
   como una advertencia. Mismo bloque que en el sitio de DiRT Rally 2.0. */
.aviso-hero {
  display: flex;
  gap: 13px;
  max-width: 720px;
  margin: 30px auto 0;
  padding: 16px 20px;
  text-align: left;
  border: 1px solid rgba(255, 196, 107, 0.32);
  border-radius: 12px;
  background: rgba(38, 30, 18, 0.55);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42);
}

.aviso-hero > svg {
  flex: none;
  margin-top: 2px;
  color: #ffc46b;
}

.aviso-hero strong {
  display: block;
  margin-bottom: 5px;
  font-size: 15px;
  color: #ffd79a;
}

.aviso-hero p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--txt2);
}

/* El renglon del compromiso, que cierra el aviso. Va en el color del texto
   fuerte y no en el gris del parrafo: el aviso da una mala noticia, y sin ese
   contraste la unica linea buena se pierde en el mismo tono que la mala. */
.aviso-hero .compromiso {
  margin-top: 9px;
  font-weight: 600;
  color: var(--txt);
}

@media (max-width: 620px) {
  .aviso-hero {
    gap: 10px;
    margin-top: 24px;
    padding: 14px 15px;
  }

  .aviso-hero p {
    font-size: 13.5px;
  }

  /* En el telefono la bajada son once renglones y empujaban el aviso fuera de
     la primera pantalla, que es justo donde tiene que asomar. */
  .hero .bajada {
    font-size: 16px;
    line-height: 1.5;
  }
}

/* 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 {
    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 de este juego son siete renglones, lo mas alto del hero despues
     del titulo. En una pantalla baja, con el aviso abajo, es el unico lugar
     donde queda alto para recuperar sin desarmar nada: pasa del tope de 20px
     al piso de 16 y se junta el interlineado. */
  .hero .bajada {
    font-size: 16.5px;
    line-height: 1.5;
    margin-bottom: 20px;
  }

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

  /* El aviso se junta todo lo que se puede sin dejar de leerse: en 1366x700
     el hero ya venia justo y el aviso son ~150px mas. Cada vez que el aviso
     crece hay que volver a medir aca. */
  .aviso-hero {
    margin-top: 12px;
    padding: 11px 15px;
  }

  .aviso-hero strong {
    margin-bottom: 3px;
    font-size: 14.5px;
  }

  .aviso-hero p {
    font-size: 13.5px;
    line-height: 1.5;
  }

  .aviso-hero .compromiso {
    margin-top: 6px;
  }

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

/* 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;
}

/* --- preguntas frecuentes --------------------------------------------------
   `<details>` nativo: sin JavaScript, con el buscador leyendo el texto de todas
   igual aunque esten cerradas, y con Ctrl+F del navegador funcionando dentro.
   Se ve como la lista de "Que incluye" (linea fina arriba, sin tarjetas) para
   que las dos secciones se lean como la misma pagina.
   Es el mismo bloque que en /dirt-rally2/hero.css: los dos sitios comparten
   diseño y una FAQ que se ve distinta en cada juego se leeria como otra web. */
.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;
}

/* --- anti-bugs -------------------------------------------------------------
   La seccion reusa el acordeon de las preguntas frecuentes (`.faq`), asi que
   aca abajo solo esta lo que no existia antes: el recuadro de las tres pruebas
   rapidas, las listas numeradas de adentro de una respuesta, y el renglon que
   cierra un caso contando como termino.

   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;
}

/* Los pasos numerados NO se estilan aca: `ol.pasos` (tarjeta con la bolita
   naranja) ya existe en `/css/estilo.css` y se usa en todo el dominio. Lo unico
   que hace falta es acomodarla adentro de una respuesta del acordeon, porque
   las reglas de abajo le ganarian por especificidad y le romperian el sangrado
   de la izquierda, que es donde va la bolita. */
.faq details .pasos {
  margin: 0 0 15px;
  padding-right: 34px;
}

/* Las listas comunes 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:not(.pasos) {
  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 termino, 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. No habia ninguno en el resto del
   sitio, asi que sin esto lo dibuja el navegador con su monoespaciada gigante. */
.faq code,
.pasos 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;
}

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

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

  /* Las tarjetas de los pasos ya vienen con su propio relleno; el sangrado
     extra de la derecha les come el ancho justo donde menos sobra. */
  .faq details .pasos {
    padding-right: 0;
  }
}

/* --- las capturas de la app ------------------------------------------------
   Cuatro pantallas en grilla de dos columnas. No reusan `.captura`, que es una
   foto sola a todo el ancho del envoltorio: estas son capturas de interfaz y a
   1080px de ancho la letra de la app quedaria mas grande que la del sitio, que
   se lee raro. A dos columnas cada una entra cerca de su tamano real.
   En el telefono pasan a una sola columna: la interfaz igual no se lee, pero se
   entiende la forma, que es lo que la seccion tiene que dejar. */
.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;
  }
}