/* web/public/estilo.css — el lenguaje de §12, en la web.
 *
 * ════════════════════════════════════════════════════════════════════
 * LA WEB SE PARECE A LA APP, NO A UNA WEB
 * ════════════════════════════════════════════════════════════════════
 * Quien llega aquí viene de un QR en la puerta de un bar o de un enlace
 * en un WhatsApp, y en los dos casos lo siguiente que va a ver es la
 * app. Si esto pareciera otra cosa, el salto se notaría.
 *
 * Así que valen las mismas reglas: fondo blanco puro, nada de negro en
 * el texto, **sin cajas** —secciones a sangre separadas por una línea de
 * un píxel, nunca tarjetas grises redondeadas—, cabeceras numeradas en
 * mayúsculas con tracking abierto, y dos tamaños dominantes.
 *
 * ── SIN SPACE GROTESK, Y A PROPÓSITO ────────────────────────────────
 * §12 pide Space Grotesk para el logotipo. Aquí se usa la tipografía del
 * sistema también para él, por dos motivos que pesan más que el detalle:
 * traerla de Google Fonts sería una petición a un tercero **en la propia
 * política de privacidad**, que es una contradicción difícil de
 * defender; y alojarla nosotros añade un fichero de fuente a un sitio
 * que hoy son tres páginas de texto.
 *
 * A este tamaño y con el tracking cerrado, la diferencia se le escapa a
 * cualquiera que no tenga las dos delante. Si algún día la web crece,
 * se aloja el woff2 aquí mismo y se cambia una línea.
 */

:root {
  --bg:    #FFFFFF;
  --ink:   #17171A;
  --body:  #3B3B40;
  --soft:  #7A7A80;
  --faint: #ADADB2;
  --line:  rgba(0, 0, 0, .07);
  --line2: rgba(0, 0, 0, .13);
  --atl:   #1F8A7A;
}

/* El modo oscuro sigue al sistema, como el de la app cuando está en
 * «Sistema», que es su valor por defecto (§11). */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:    #0F0F11;
    --ink:   #F2F2F4;
    --body:  #C7C7CD;
    --soft:  #8E8E95;
    --faint: #5F5F66;
    --line:  rgba(255, 255, 255, .09);
    --line2: rgba(255, 255, 255, .17);
    --atl:   #34A996;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 24px 96px;
  background: var(--bg);
  color: var(--body);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Una columna estrecha. Un párrafo de noventa caracteres no se lee: el
 * ojo pierde el renglón al volver. */
main, header, footer { max-width: 620px; margin: 0 auto; }

header { padding: 56px 0 0; }

/* EL LOGOTIPO, ENTERO EN TINTA (§12). El punto de la i estuvo
 * especificado en Verde Atlántico y se descartó: a este tamaño la pieza
 * suelta se aísla igual sin color. */
.marca {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.055em;
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
}

h1 {
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -.02em;
  font-weight: 600;
  color: var(--ink);
  margin: 40px 0 12px;
}

/* CABECERAS NUMERADAS: `01 QUÉ GUARDAMOS`, mayúsculas y tracking .18em.
 * El número va en gris claro para que la cifra ordene sin competir con
 * la palabra. */
h2 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 18px;
}

h2 .num { color: var(--faint); margin-right: 10px; }

h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 26px 0 6px;
}

p { margin: 0 0 14px; }

/* SIN CAJAS. Una sección es una franja separada por una línea de un
 * píxel, no una tarjeta. Es la regla de §12 y aquí se aplica igual. */
section {
  padding: 34px 0;
  border-top: 1px solid var(--line);
}

ul { margin: 0 0 14px; padding-left: 20px; }
li { margin-bottom: 7px; }

a { color: var(--atl); text-decoration: none; border-bottom: 1px solid var(--line2); }
a:hover { border-bottom-color: var(--atl); }

strong { color: var(--ink); font-weight: 600; }

/* La entradilla de cada página: más grande que el cuerpo y en gris, que
 * es el «dos tamaños dominantes» de §12 aplicado al texto largo. */
.entrada { font-size: 18px; line-height: 1.6; color: var(--soft); margin-bottom: 6px; }

.fecha {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 4px;
}

footer {
  padding-top: 30px;
  border-top: 1px solid var(--line);
  margin-top: 40px;
  font-size: 13px;
  color: var(--faint);
}

footer a { color: var(--soft); border-bottom-color: var(--line); }

.pies { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 14px; }

/* Tabla densa, sin bordes verticales ni relleno de fondo: la misma
 * gramática que las tablas de ranking de la app. */
table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 15px; }
th, td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
td:first-child { padding-right: 22px; color: var(--ink); white-space: nowrap; }

@media (max-width: 520px) {
  td:first-child { white-space: normal; }
  h1 { font-size: 26px; }
}