/* =========================================================================
   Ante Su Palabra — design tokens
   Único archivo con valores literales. Ningún color, tamaño de fuente ni
   espaciado se escribe fuera de acá.

   Dirección editorial (11-9-2026, revisión posterior al canvas):
   Newsreader para display, cuerpo y numerales; Archivo para rótulos e
   interfaz. Hueso, casi negro y tinta azul como único acento. Sin esquinas
   redondeadas: filetes en vez de cajas.
   ========================================================================= */

:root {

  /* --- Escala de espaciado (base 4) --------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-home: clamp(3rem, 3vw + 2rem, 5rem);   /* aire entre bloques del inicio: uno solo para todos */
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;

  /* --- Escala tipográfica (fluida) ---------------------------------- */
  --fs-xs:   0.75rem;
  --fs-label: 0.8125rem;   /* rótulos en mayúscula: a 12 px con tracking quedaban al límite */
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   clamp(1.0625rem, 0.3vw + 1rem,   1.1875rem);
  --fs-lg:   clamp(1.25rem,   0.6vw + 1.1rem, 1.5rem);
  --fs-xl:   clamp(1.5rem,    1.2vw + 1.2rem, 2rem);
  --fs-2xl:  clamp(2rem,      2.4vw + 1.4rem, 3.25rem);
  --fs-3xl:  clamp(2.5rem,    4.6vw + 1.4rem, 4.75rem);
  --fs-4xl:  clamp(3.75rem,   8vw + 1.5rem,   8rem);

  --lh-tight:   1.02;
  --lh-heading: 1.12;
  --lh-body:    1.6;

  /* --- Tipografía --------------------------------------------------- */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-ui:      "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-numeral: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;

  --tracking-display: -0.015em;
  --tracking-label:    0.14em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;

  /* --- Anchos y contenedores ---------------------------------------- */
  --w-prose: 68ch;
  --w-page:  1280px;
  --w-column: 720px;          /* columna de lectura de Nosotros */
  --w-flyer-column: 420px;    /* banda del flyer en columna angosta */
  --w-aside: 300px;           /* columna lateral del artículo */
  --w-gutter: var(--sp-5);
  --w-gutter-desktop: var(--sp-7);

  /* --- Radios, bordes ----------------------------------------------- */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 3px;
  --radius-3: 2px;      /* botones, chips, flyer */
  --radius-4: 2px;      /* tarjetas, banda del flyer, columna lateral */
  --radius-pill: 999px; /* badges de estado */
  --border-hairline: 1px;

  /* --- Breakpoints (referencia; usar en media queries a mano) -------- */
  /* sm 480px · md 768px · lg 1024px · xl 1280px */

  /* --- Alturas de control (mínimo táctil 44px) ---------------------- */
  --control-h: 44px;
  --control-px: var(--sp-5);

  /* --- Medidas de componentes --------------------------------------- */
  --logo-h: 22px;
  --logo-h-desktop: 28px;
  --header-h: 64px;
  --header-h-desktop: 80px;
  --logo-h-footer: 30px;   /* a 18 px el logo casi no se leía */
  --avatar-sm: 44px;
  --avatar-md: 48px;
  --avatar-lg: 96px;
  --avatar-xl: 120px;
  --play-sm: 44px;
  --play-md: 64px;
  --hero-min-h: 520px;
  --hero-min-h-desktop: 620px;
  --hero-nosotros-min-h: 480px;
  --icon-loc: 15px;
  --icon-loc-lg: 17px;
  --rule-short: 24px;
  --sep-h: 14px;
  --sep-h-lg: 22px;

  /* --- Proporción de la banda del flyer ----------------------------- */
  /* Nunca 16:9. Un flyer 4:5 al 84% de la altura de una banda 1:1 de
     390 px mide 262 px de ancho; en la banda 16:9 mediría 153 px. */
  --band-ratio-mobile: 1 / 1;
  --band-ratio-desktop: 4 / 3;
  --band-flyer-h: 84%;
  --band-flyer-h-desktop: 88%;
  /* Grilla del archivo: la mayoría de los flyers históricos son banners
     16:9 de Eventbrite o Facebook y los nuevos son 4:5; en 4:3 los dos
     entran enteros sin que ninguno quede como una tira. */
  --band-ratio-tile: 4 / 3;
  --band-flyer-h-tile: 90%;

  /* --- Transiciones ------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0.13, 1);
  --dur: 180ms;

  /* --- Color -------------------------------------------------------- */
  /* Blanco, azul y violeta. El fondo no tiñe: el color lo ponen la
     fotografía, el azul de los enlaces y el violeta de los rótulos.
     Todos los pares están verificados AA; ver tools/contraste.php. */
  --c-bg:         #FFFFFF;
  --c-surface:    #F5F6FA;
  --c-surface-2:  #EAEDF5;
  --c-text:       #14161C;
  --c-text-muted: #545A68;   /* 7,2:1 sobre bg */
  --c-text-faint: #646A78;   /* 5,6:1 sobre bg */
  --c-accent:     #1E3A6E;   /* azul · enlaces, botones y estado abierto */
  --c-accent-ink: #FFFFFF;
  /* Violeta: reservado. Desde el 24-9-2026 ninguna pieza lo usa; en un
     solo rótulo chico no se leía como color de marca y la paleta quedó en
     azules. Se conserva por si vuelve con un rol claro. */
  --c-accent-alt:      #5B3E9E;
  --c-accent-alt-soft: #EFEAFA;
  /* Tarjetas de iniciativa sin foto: cuatro tonos de la misma familia, con
     texto blanco encima. */
  --c-tile-1: #1E3A6E;   /* azul */
  --c-tile-2: #2A4A85;   /* azul medio */
  --c-tile-3: #2F3D86;   /* índigo */
  --c-tile-4: #12172A;   /* azul noche */
  --c-tile-ink: #FFFFFF;
  --c-border:        #E2E5EE;
  --c-border-strong: #C2C7D6;

  --c-state-reserva-bg:   transparent;
  --c-state-reserva-fg:   #3A3F4B;
  --c-state-abierta-bg:   #1E3A6E;
  --c-state-abierta-fg:   #FFFFFF;
  --c-state-cerrada-bg:   #EAEDF5;
  --c-state-cerrada-fg:   #4F5564;
  --c-state-realizado-bg: transparent;
  --c-state-realizado-fg: #545A68;

  /* Banda tonal sobre la que se apoya el flyer sin recortarse */
  --c-flyer-band:     #EAEDF5;
  --c-flyer-band-ink: #4F5564;

  /* Dato faltante, solo para revisión interna y avisos del panel */
  --c-todo-fg: #1E3A6E;
  --c-todo-bg: #E6ECF7;

  /* Texto sobre fotografía documental: velo solo abajo, en degradado */
  --c-photo-scrim: rgba(10, 12, 18, 0.55);
  --c-photo-scrim-strong: rgba(10, 12, 18, 0.86);
  --c-photo-scrim-none: rgba(10, 12, 18, 0);
  --c-photo-text:  #FFFFFF;
  --c-photo-placeholder-a: #1D2230;
  --c-photo-placeholder-b: #141821;
  --c-photo-rule: rgba(255, 255, 255, 0.30);

  /* Bloque oscuro (pie): azul muy oscuro, no negro */
  --c-dark-bg:    #12172A;
  --c-dark-fg:    #FFFFFF;
  --c-dark-muted: #AEB5C6;
  --c-dark-rule:  rgba(255, 255, 255, 0.18);
  --c-dark-surface: rgba(255, 255, 255, 0.08);   /* campos y huecos sobre el pie o la banda oscura */
  --c-dark-border:  rgba(255, 255, 255, 0.32);

  /* Franja "Próximo evento" */
  --c-franja-bg:          #1E3A6E;
  --c-franja-fg:          #FFFFFF;
  --c-franja-rule:        rgba(255, 255, 255, 0.35);
  --c-franja-rule-strong: rgba(255, 255, 255, 0.45);
  --c-btn-invertido-bg:   #FFFFFF;
  --c-btn-invertido-fg:   #1E3A6E;

  --c-focus-ring: #1E3A6E;
  --c-logo-plate: #FFFFFF;

  /* Placeholder rayado de foto de persona sin cargar */
  --c-avatar-stripe-a: #EAEDF5;
  --c-avatar-stripe-b: #FFFFFF;
  --avatar-stripe: 5px;
}