/* ==========================================================================
   BERUM — Tokens de marca
   Fuente: ESTRUCTURA GRAFICA BERUM (paleta, fuentes y fondos)
   ========================================================================== */

/* Fuentes de marca --------------------------------------------------------
   OJO: para publicar el sitio, confirmar que cada fuente tenga licencia web. */
@font-face { font-family: 'Roswell'; src: url('../assets/fonts/roswell_three_itc.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Bari Sans'; src: url('../assets/fonts/BariSans-Regular_2.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Bari Sans'; src: url('../assets/fonts/BariSans-Medium_2.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Bari Sans'; src: url('../assets/fonts/BariSans-SemiBold_2.otf') format('opentype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Editors Note'; src: url('../assets/fonts/EditorsNote-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Editors Note'; src: url('../assets/fonts/EditorsNote-Italic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Editors Note'; src: url('../assets/fonts/EditorsNote-LightItalic.otf') format('opentype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Sequel 100'; src: url('../assets/fonts/Sequel100Black-75.ttf') format('truetype'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'DesMontilles'; src: url('../assets/fonts/DesMontilles-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }

:root {
  /* Paleta de marca */
  --ink: #1a1a1a;        /* negro principal */
  --ink-2: #282828;      /* negro secundario */
  --gray: #606060;
  --mist: #ebebeb;
  --cream: #fcf1db;      /* crema de marca (texto sobre negro) */
  --paper: #f2ece2;      /* beige claro: fondo base */
  --sand: #e6dccb;       /* beige medio: secciones alternas */
  --card: #f8f4ed;       /* beige muy claro: tarjetas */
  --orange: #f25e00;     /* acento principal */
  --rust: #c14500;       /* naranja profundo */
  --teal: #005d67;       /* petróleo */
  --aqua: #90c2c4;       /* aqua suave */

  /* Roles */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-soft: color-mix(in srgb, var(--ink) 68%, transparent);
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --accent: var(--orange);
  --accent-on-light: var(--rust); /* naranja con suficiente contraste sobre beige */

  /* Familias */
  --f-display: 'Roswell', 'Bari Sans', 'Arial Narrow', sans-serif;   /* titulares condensados */
  --f-serif: 'Editors Note', 'Times New Roman', Georgia, serif;      /* acentos editoriales en itálica */
  --f-text: 'Bari Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-wide: 'Sequel 100', 'Bari Sans', 'Arial Black', sans-serif;    /* cifras y etiquetas anchas */
  --f-hand: 'DesMontilles', 'Bradley Hand', cursive;                 /* notas a mano */

  /* Escala tipográfica fluida */
  --t-mega: clamp(3.6rem, 10vw, 9.5rem);
  --t-xxl: clamp(3rem, 7vw, 6.5rem);
  --t-xl: clamp(2.5rem, 5vw, 4.75rem);
  --t-l: clamp(2.1rem, 3.6vw, 3.4rem);
  --t-m: clamp(1.5rem, 2.3vw, 2.2rem);
  --t-s: clamp(1.25rem, 1.6vw, 1.5rem);
  --t-body: clamp(1.0625rem, 1.15vw, 1.1875rem);
  --t-small: 0.9375rem;
  --t-micro: 0.75rem;

  /* Espaciado */
  --gutter: clamp(16px, 4vw, 56px);
  --section: clamp(64px, 7.5vw, 120px);
  --gap: clamp(16px, 2vw, 28px);
  --max: 1480px;
  --measure: 58ch;

  /* Formas */
  --r-s: 10px;
  --r-m: 18px;
  --r-l: 28px;
  --r-pill: 999px;

  /* Movimiento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.9s;

  /* Header */
  --header-h: 76px;
}