/* ═════════════════════════════════════════════════════════════════════════════
   Estilo Merlin para las demos — el mismo aire que merlinautosys.com.
   ═════════════════════════════════════════════════════════════════════════════
   Las tres demos se enseñan juntas y cada una se componia a su manera. Esto trae
   el sistema de la landing: su tipografia (Archivo + IBM Plex Mono, sacadas del
   propio index.html de la web), sus neutros y su forma de componer —titulares
   muy apretados, rotulos de seccion en mono diminuta, cuerpo justificado—.

   LO QUE NO TRAE, a proposito: el color. Cada demo conserva el de su marca. Solo
   hay que declarar `--acento` (y `--acento-txt` si el de marca no contrasta bien
   sobre blanco) en el :root de cada una; todo lo demas cuelga de ahi.

   Se carga ANTES del <style> propio de cada demo, para que sus reglas manden
   sobre estas cuando haga falta.
   ───────────────────────────────────────────────────────────────────────────── */

@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url(fuentes/Archivo.woff2) format('woff2');
}
@font-face{
  font-family:'PlexMono'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url(fuentes/PlexMono.woff2) format('woff2');
}

:root{
  /* Neutros de la landing. Gris real, no azulado: es lo que hace que el color
     de marca destaque en vez de pelearse con el fondo. */
  --m-ink:#1C1C1E;
  --m-paper:#F2F2F7;
  --m-surface:#FFFFFF;
  --m-muted:#6E6E73;
  --m-line:rgba(60,60,67,.13);
  --m-radio:18px;
  --ff-display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ff-mono:'PlexMono',ui-monospace,Menlo,monospace;
}

body{
  font-family:var(--ff-display);
  color:var(--m-ink);
  background:var(--m-paper);
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.01em;
}

/* Titulares: peso alto, interlineado por debajo de 1 y tracking negativo fuerte.
   Es la firma de la landing y lo que mas cambia el aire de una pagina. */
h1{
  font-family:var(--ff-display); font-weight:800;
  line-height:.96; letter-spacing:-.045em; text-wrap:balance;
}
h2,h3{
  font-family:var(--ff-display); font-weight:800;
  letter-spacing:-.035em; line-height:1.06; text-wrap:balance;
}

/* Rotulo de seccion: monoespaciada diminuta y muy espaciada, en gris. En la
   landing es lo que separa bloques sin necesidad de una linea gorda. */
.m-kicker{
  font-family:var(--ff-mono); font-weight:500;
  font-size:.6rem; text-transform:uppercase; letter-spacing:.16em;
  color:var(--m-muted);
}

/* Cuerpo de seccion justificado, como en la web. Con guionado, porque justificar
   sin partir palabras abre calles blancas feisimas en columna estrecha. */
.m-just{
  text-align:justify; hyphens:auto; -webkit-hyphens:auto;
}
/* En movil no se justifica: la columna es tan estrecha que el rio de espacios
   se come la lectura. */
@media(max-width:640px){ .m-just{text-align:left; hyphens:manual} }

/* La entradilla: un punto mayor que el cuerpo y con el tracking cerrado. */
.m-lede{ font-size:1.12rem; letter-spacing:-.015em; color:var(--m-ink); }

/* Numeros tabulares en cifras y datos, para que no bailen al actualizarse. */
.m-num{ font-variant-numeric:tabular-nums; letter-spacing:-.03em; }