/* === pattern-tokens:font-import:start (generated) === */
/*
   The After Dark faces. A stack NAMES a family; it never
   fetches one - so without this the headings below render in
   the metric-matched fallback and look deliberate.

   A <link rel="stylesheet"> in the document head is faster:
   the browser finds it while parsing the head, where this is
   not discovered until global.css has itself arrived and been
   parsed - an extra round trip on the critical path. Write the
   <link> as well; this is the backstop that makes a forgotten
   one slow rather than wrong.

   Quoted, not a bare url() token: these URLs carry a semicolon
   inside the weight axis, and only a string ends where the URL
   ends.

   At the top of the file because @import is valid only before
   any other rule. Regenerated in place; edits here are lost. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400..700;1,400..700&family=Big+Shoulders:opsz,wght@10..72,400..700&display=swap");
/* === pattern-tokens:font-import:end === */

/* TravestisBaires — hoja de estilo de marca
   Dirección aprobada por el socio el 2026-09-20: fondo oscuro, celeste del logo,
   conjunto tipográfico "After Dark". */

@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400..700;1,400..700&family=Big+Shoulders:opsz,wght@10..72,400..700&display=swap");

:root {
  /* Colour — del logo de la marca: celeste #28c7fe sobre crema #fafaf5 */
  --color-bg: #0c1116;
  --color-surface: #141b22;
  --color-surface-soft: #1b242d;
  --color-text: #d6dee6;
  --color-text-soft: #9aa8b5;
  --color-heading: #ffffff;
  --color-primary: #28c7fe;
  --color-primary-dark: #0ba3d8;
  /* El celeste de marca es claro: ni el blanco (1.96:1) ni el texto del sitio
     (1.45:1) se leen encima. La tinta de los botones es casi negra: 9.31:1. */
  --color-on-primary: #05171f;
  /* Suelo oscuro para el texto puesto sobre fotografía. */
  --color-scrim: #0a0f14;
  --color-focus: #7fdcff;

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 128px;
  --container-max: 1140px;

  /* Dials */
  --btn-radius: 6px;
  --card-radius: 12px;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --chip-radius: 999px;
  --logo-height: 56px;
  --logo-height-footer: 62px;

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-slow: 400ms ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-display, 700);
  color: var(--color-heading);
  line-height: calc(1.15 * var(--heading-leading, 1));
  letter-spacing: calc(-0.02em + var(--heading-tracking, 0) * 1em);
}

a {
  color: var(--color-primary);
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === pattern-tokens:start (generated - edit outside these markers) === */
/*
   Role tokens the design patterns require. A var() this
   sheet does not define is discarded at compute time, so
   the rule is lost rather than falling back to anything.
   Regenerated in place; anything you add here is replaced.
*/
/* Metric-matched fallback for Big Shoulders, on the heading. Arial,
   resized to match Big Shoulders, so the line boxes are already the size
   they will be once the webfont arrives and the page does not reflow
   under the reader when it does.

   One face PER WEIGHT. A real face gets wider at 700; a local one
   thickened synthetically does not, so a single face solved at 400
   leaves anything set at 700 too narrow and this block causes the
   shift it exists to stop. The descriptor is what picks the right
   solved number instead of synthesising a bold from the 400 face.

   The local() chain is ordered. The numbers are solved against Arial
   specifically, so a stand-in is a degradation rather than a match -
   but Linux and Android have no Arial, and there a face with nothing
   to load defines no family at all and the stack falls through in
   silence, which measured 34.7% off.

   BESIDE the :root rule, never inside it: an at-rule in a declaration
   block is dropped by the parser, and the stack would have survived
   naming a family nothing defines. */
@font-face {
  font-family: 'BigShouldersFallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'),
       local('Helvetica'), local('Roboto');
  font-weight: 400;
  size-adjust: 69.2%;
  ascent-override: 98.6%;
  descent-override: 21.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'BigShouldersFallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'),
       local('Helvetica'), local('Roboto');
  font-weight: 700;
  size-adjust: 83.1%;
  ascent-override: 98.6%;
  descent-override: 21.4%;
  line-gap-override: 0%;
}

/* Metric-matched fallback for Archivo, on the body. Arial,
   resized to match Archivo, so the line boxes are already the size
   they will be once the webfont arrives and the page does not reflow
   under the reader when it does.

   One face PER WEIGHT. A real face gets wider at 700; a local one
   thickened synthetically does not, so a single face solved at 400
   leaves anything set at 700 too narrow and this block causes the
   shift it exists to stop. The descriptor is what picks the right
   solved number instead of synthesising a bold from the 400 face.

   The local() chain is ordered. The numbers are solved against Arial
   specifically, so a stand-in is a degradation rather than a match -
   but Linux and Android have no Arial, and there a face with nothing
   to load defines no family at all and the stack falls through in
   silence, which measured 34.7% off.

   BESIDE the :root rule, never inside it: an at-rule in a declaration
   block is dropped by the parser, and the stack would have survived
   naming a family nothing defines. */
@font-face {
  font-family: 'ArchivoFallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'),
       local('Helvetica'), local('Roboto');
  font-weight: 400;
  size-adjust: 98.3%;
  ascent-override: 87.8%;
  descent-override: 21%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'ArchivoFallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'),
       local('Helvetica'), local('Roboto');
  font-weight: 700;
  size-adjust: 105.7%;
  ascent-override: 87.8%;
  descent-override: 21%;
  line-gap-override: 0%;
}

:root {
  /* Shape: the brand's own scale, under the names the patterns use. */
  --card-border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);

  /* Inks. The ratios are measured, not intended. */
  --color-rule: color-mix(in srgb, var(--color-text) 18%, transparent);
  /* on this brand's own --color-scrim: 19.24:1 */
  --color-on-scrim: #ffffff;

  /* Type: the After Dark pairing. Chosen, not derived. */
  --font-heading: 'Big Shoulders', 'BigShouldersFallback', 'Arial Narrow', 'Helvetica Neue Condensed', sans-serif;
  --font-body: 'Archivo', 'ArchivoFallback', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --heading-leading: 0.95;
  --heading-tracking: 0.01;

  /* 0.92 quieter, 1.15 louder. Display type only. */
  --type-scale: 1.15;
}
/* === pattern-tokens:end === */

/* Aviso de fotografía en el pie. Añadido de marca sobre el patrón `colophon`,
   que solo contempla la línea de copyright. Ver README, ## Design choices. */
.colophon-note {
  max-width: 60ch;
  margin-inline: auto;
  color: var(--color-text-soft);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-wrap: pretty;
}

/* El tope de ancho que llevaba aquí era para un retrato 2:3, que a 375px se iba a
   ~560px de alto y empujaba el titular fuera de la primera pantalla. La foto de
   portada elegida es apaisada (6000x4076) y a ancho completo son ~255px de alto,
   así que no hace falta tope. Si alguna vez vuelve un retrato a este hueco, hay
   que reponerlo. Ver README, ## Design choices. */

/* Las fotos de los perfiles de miembros se muestran difuminadas en todo el sitio.
   Decisión del socio, que quiere proyectar discreción. VA EN global.css a propósito:
   así una página de zona futura no puede olvidarse de aplicarlo y mostrarlas nítidas.
   **No es una protección**: el fichero de la foto se sirve entero y cualquiera lo ve
   nítido abriendo las herramientas del navegador. La página no dice ni insinúa lo
   contrario. Ver README, ## Design choices. */
.member-grid--velado .mem-card img {
  filter: blur(7px);
  transform: scale(1.06);
}