/*
  RoamRiders: hoja de estilo del sitio.

  Un solo archivo para todas las páginas, sin framework y sin paso de
  compilación: se sube tal cual a cualquier hosting, incluido el estático de
  Hostinger, y carga entero antes de que el móvil de quien la abre en una
  gasolinera termine de pensárselo.

  Los colores son los de la aplicación, para que quien llega desde la web y se
  la instala reconozca lo que abre.
*/

:root {
  --verde: #02f66c;
  --verde-hondo: #0a7a3d;
  --tinta: #0e1216;
  --tinta-alta: #14181c;
  --tinta-borde: #262d34;
  --texto: #f4f6f8;
  --texto-suave: #9ba6b2;
  --naranja: #ff9147;
  --ancho: 1080px;
  --curva: 14px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--tinta);
  color: var(--texto);
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* --- El paisaje del fondo ----------------------------------------------

   Una sola capa fija detrás de todo el sitio: cordillera, huella de camino y
   la R de la marca, las tres en transparencia sobre el negro.

   `fixed` es deliberado. Anclada al documento, la cordillera se quedaría
   arriba y el resto del sitio bajaría sobre un negro liso; anclada a la
   ventana acompaña a quien lee y se ve siempre, que es lo que se buscaba.

   Vive en un pseudoelemento del `body` con `z-index: -1` para que nunca se
   cruce con un texto ni con una captura: pasa por detrás de todo, y
   `pointer-events: none` evita que se coma un clic.

   Y no lleva parallax a propósito, que es la tentación obvia: en un celular,
   un fondo que se desliza a otra velocidad que el texto marea.
*/

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='none' stroke='%2302f66c' stroke-width='1.4' opacity='0.20'%3E%3Cpath d='M0 612 L182 470 L268 546 L402 398 L534 540 L628 462 L742 588 L860 452 L968 560 L1090 430 L1216 566 L1330 486 L1440 590'/%3E%3C/g%3E%3Cg fill='none' stroke='%2302f66c' stroke-width='1.8' opacity='0.30'%3E%3Cpath d='M0 742 L146 640 L262 706 L370 596 L470 684 L590 574 L706 690 L818 604 L942 716 L1064 618 L1188 724 L1308 646 L1440 736'/%3E%3C/g%3E%3Cg fill='none' stroke='%2302f66c' stroke-width='2.2' opacity='0.26'%3E%3Cpath d='M-20 900 C 180 852, 300 806, 470 818 S 760 872, 940 828 S 1250 780, 1460 836'/%3E%3Cpath d='M-20 900 C 220 880, 380 846, 560 856 S 880 900, 1080 862 S 1300 826, 1460 872'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(
      120% 80% at 50% 100%,
      rgba(2, 246, 108, 0.09) 0%,
      rgba(2, 246, 108, 0) 62%
    );
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;

  opacity: 0.55;
}

/* La marca, en su propia capa y muchísimo más apagada: tiene que
   reconocerse cuando uno la busca y desaparecer cuando uno lee. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* La silueta recortada, no el ícono: la plancha verde del ícono, por
     apagada que vaya, se lee como un cuadrado y no como una marca. */
  background: url("img/marca-silueta.png") no-repeat center 44%;
  background-size: min(58vmin, 460px) auto;

  /* A 0.07 la R se lee de golpe y compite con el titular. Esto tiene que
     ser lo que se nota al segundo vistazo, no lo primero. */
  opacity: 0.042;
}

/* Detrás de una marca al 50% no se lee nada seguido. Donde el texto es largo
   (las páginas legales, la de cambiar la contraseña) se apaga bastante más. */
body:has(.documento)::before,
body:has(.hoja)::before {
  opacity: 0.22;
}

body:has(.documento)::after,
body:has(.hoja)::after {
  opacity: 0.03;
}


.envoltorio {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 24px;
}

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

header.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(14, 18, 22, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--tinta-borde);
}

header.barra .envoltorio {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 68px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--texto);
}

.marca img {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: block;
}

.marca strong {
  font-size: 21px;
  letter-spacing: 0.2px;
}

header.barra nav {
  margin-left: auto;
  display: flex;
  gap: 22px;
}

header.barra nav a {
  color: var(--texto-suave);
  text-decoration: none;
  font-size: 15px;
}

header.barra nav a:hover {
  color: var(--texto);
}

/* --- Portada ------------------------------------------------------------ */

.portada {
  padding-block: 72px 40px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 56px;
  align-items: center;
}

.portada h1 {
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.1;
  margin: 0 0 20px;
  letter-spacing: -0.5px;
}

.portada p.entrada {
  font-size: 20px;
  color: var(--texto-suave);
  margin: 0 0 32px;
  max-width: 34em;
}

.portada img.pantalla {
  width: 100%;
  border-radius: 26px;
  border: 1px solid var(--tinta-borde);
  display: block;
}

/* --- Botones ------------------------------------------------------------ */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 0;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}

.boton.principal {
  background: var(--verde);
  color: #05130a;
}

.boton.principal:hover {
  filter: brightness(1.08);
}

/* El de descargar todavía no lleva a ninguna parte: la aplicación no está
   publicada. Se dice, en vez de fingir que funciona. */
.boton.pendiente {
  background: var(--tinta-alta);
  color: var(--texto-suave);
  border: 1px solid var(--tinta-borde);
  cursor: default;
}

.boton:disabled {
  opacity: 0.55;
  cursor: default;
}

.aparte {
  display: block;
  margin-top: 14px;
  font-size: 14px;
  color: var(--texto-suave);
}

/* --- Secciones ---------------------------------------------------------- */

section {
  padding: 56px 0;
  border-top: 1px solid var(--tinta-borde);
}

section h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  margin: 0 0 12px;
  letter-spacing: -0.3px;
}

section > .envoltorio > p {
  color: var(--texto-suave);
  max-width: 62ch;
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 34px;
}

/* La norma de la portada. Grande y con la marca al lado, porque es lo que
   hay que leer aunque se venga con prisa; y sobre fondo propio, para que no
   se confunda con un párrafo más de la sección. */
.norma {
  font-size: clamp(21px, 3.4vw, 30px);
  line-height: 1.35;
  font-weight: 700;
  color: var(--texto);
  max-width: 22em;
  margin: 0 0 22px;
  padding: 22px 26px;
  border-left: 4px solid var(--verde);
  border-radius: 0 12px 12px 0;
  background: rgba(0, 232, 92, 0.06);
  text-wrap: balance;
}

@media (max-width: 620px) {
  .norma {
    padding: 18px 20px;
  }
}

.tarjeta {
  background: var(--tinta-alta);
  border: 1px solid var(--tinta-borde);
  border-radius: var(--curva);
  padding: 24px;
}

.tarjeta h3 {
  margin: 0 0 8px;
  font-size: 19px;
}

.tarjeta p {
  margin: 0;
  color: var(--texto-suave);
  font-size: 16px;
}

.tarjeta .marca-agua {
  display: block;
  font-size: 24px;
  margin-bottom: 12px;
}

/* --- Capturas ----------------------------------------------------------- */

.galeria {
  display: flex;
  gap: 20px;
  margin-top: 34px;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x mandatory;
}

.galeria figure {
  margin: 0;
  flex: 0 0 236px;
  scroll-snap-align: start;
}

.galeria img {
  width: 100%;
  border-radius: 20px;
  border: 1px solid var(--tinta-borde);
  display: block;
}

.galeria figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--texto-suave);
}

/* --- Formularios -------------------------------------------------------- */

.hoja {
  max-width: 460px;
  margin: 64px auto;
}

.hoja h1 {
  font-size: 30px;
  margin: 0 0 8px;
}

.hoja p.entrada {
  color: var(--texto-suave);
  margin: 0 0 28px;
}

label {
  display: block;
  font-size: 14px;
  color: var(--texto-suave);
  margin: 18px 0 6px;
}

input[type="password"],
input[type="email"],
input[type="text"],
textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--tinta-alta);
  border: 1px solid var(--tinta-borde);
  border-radius: 12px;
  color: var(--texto);
  font-size: 16px;
  font-family: inherit;
}

input:focus,
textarea:focus {
  outline: 2px solid var(--verde);
  outline-offset: -1px;
}

.aviso {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 15px;
}

.aviso.malo {
  background: rgba(255, 92, 92, 0.12);
  border: 1px solid rgba(255, 92, 92, 0.35);
  color: #ffb3b3;
}

.aviso.bueno {
  background: rgba(2, 246, 108, 0.1);
  border: 1px solid rgba(2, 246, 108, 0.3);
  color: #86ffbd;
}

/* --- Textos legales ----------------------------------------------------- */

.documento {
  max-width: 760px;
  margin: 56px auto;
}

.documento h1 {
  font-size: 34px;
  margin: 0 0 6px;
}

.documento .fecha {
  color: var(--texto-suave);
  font-size: 15px;
  margin: 0 0 40px;
}

.documento h2 {
  font-size: 22px;
  margin: 40px 0 10px;
  border: 0;
  padding: 0;
}

/* La pagina de ayuda es la unica con tres niveles: h2 agrupa (Rutas, Salidas)
   y h3 es cada pregunta. Sin esto el h3 sale con el estilo por defecto del
   navegador, que en fondo oscuro se ve negro sobre negro. */
.documento h3 {
  font-size: 17px;
  font-weight: 650;
  margin: 26px 0 6px;
  color: #eef2f6;
}

.documento p,
.documento li {
  color: #d7dde3;
}

.documento ul {
  padding-left: 22px;
}

.documento li {
  margin-bottom: 8px;
}

.documento a {
  color: var(--verde);
}

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

footer {
  border-top: 1px solid var(--tinta-borde);
  padding: 40px 0 60px;
  color: var(--texto-suave);
  font-size: 15px;
}

footer .envoltorio {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
}

footer nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

footer a {
  color: var(--texto-suave);
}

footer a:hover {
  color: var(--texto);
}

/* --- Pantallas estrechas ------------------------------------------------ */

@media (max-width: 820px) {
  .portada {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-top: 44px;
    text-align: left;
  }

  .portada img.pantalla {
    max-width: 280px;
  }

  header.barra nav {
    gap: 16px;
  }

  header.barra nav a {
    font-size: 14px;
  }
}

/* --- Apuntarse a la lista de espera ------------------------------------- */

.apuntarse {
  display: flex;
  flex-wrap: wrap;
  /* Dos pastillas del mismo alto, una al lado de la otra, piden más hueco
     del que parece: con doce píxeles el botón se lee como pegado al campo,
     casi como si fueran una sola pieza partida. Y más aire aún arriba y
     abajo, que es la separación que queda cuando el botón baja de línea. */
  gap: 20px 18px;
  margin-top: 30px;
  max-width: 520px;
}

.apuntarse input[type="email"],
.apuntarse .boton {
  /* El mismo alto exacto en los dos. Sin esto, el relleno idéntico da
     alturas distintas (el tipo de letra del campo y el del botón no son el
     mismo) y una pastilla queda un par de píxeles más baja que la otra. */
  min-height: 54px;
}

.apuntarse input[type="email"] {
  /* Base corta para que el botón quepa al lado en cuanto hay sitio: 220 del
     campo más el botón caben de sobra en los 520 del formulario. */
  flex: 1 1 220px;
  min-width: 0;
  width: auto;
  border-radius: 999px;
  padding: 14px 22px;
}

.apuntarse .boton {
  flex: 0 0 auto;
  padding-inline: 30px;
}

.letra-chica {
  margin-top: 18px;
  font-size: 14px;
  color: var(--texto-suave);
  max-width: 52ch;
}

.letra-chica a {
  color: var(--texto-suave);
}

.letra-chica a:hover {
  color: var(--verde);
}

/* --- El celular ---------------------------------------------------------

   La mitad de quien abra esto llega desde un enlace de WhatsApp, en la mano
   y con una barra a la que le falta ancho. Lo que cambia aquí no es la
   maqueta (esa ya se apila sola) sino las tres cosas que en pantalla
   estrecha se rompen: la barra de arriba, el formulario y los tamaños de
   letra pensados para un monitor.
*/

@media (max-width: 620px) {
  /* La barra pasa a dos filas. Los tres enlaces no caben al lado de la
     marca, y encogerlos hasta que quepan los deja ilegibles; puestos en su
     propia fila y repartidos, se tocan bien con el pulgar. */
  header.barra .envoltorio {
    flex-wrap: wrap;
    row-gap: 2px;
    padding-block: 10px;
  }

  header.barra nav {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
    gap: 0;
  }

  header.barra nav a {
    font-size: 14px;
    padding: 6px 0;
  }

  .marca img {
    width: 32px;
    height: 32px;
  }

  .marca strong {
    font-size: 19px;
  }

  /* Sin sitio para dos pastillas al lado, el botón ocupa la fila entera en
     lugar de quedarse corto y descolgado a la izquierda. */
  .apuntarse .boton {
    width: 100%;
  }

  .portada {
    padding-block: 40px 32px;
  }

  section {
    padding-block: 52px;
  }

  h2 {
    font-size: 27px;
  }

  body {
    font-size: 16px;
  }

  .portada p.entrada {
    font-size: 18px;
  }

  /* El pie, en columna: cuatro enlaces y un copyright en una fila de 390
     píxeles salen amontonados. */
  footer .envoltorio {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  footer nav {
    flex-wrap: wrap;
    gap: 8px 18px;
  }

  /* La marca del fondo, más pequeña: a 58vmin en vertical ocupa casi todo el
     ancho y deja de leerse como una marca de agua. */
  body::after {
    background-size: min(62vmin, 300px) auto;
  }
}