/* =========================================================
 * COLORES — paleta de marca centralizada, actualizada a los colores
 * exactos del logo. Estos mismos nombres se usan en cada página; antes
 * cada Reskin los declaraba por separado con su propio valor. Ahora
 * viven en un solo lugar — si algún día ajustas un tono, cambia acá
 * y se actualiza en todo el sitio a la vez.
 * ========================================================= */
:root {
  --ug-blue-primary: #273267;  /* azul marino del logo */
  --ug-red-accent: #E31B32;    /* rojo del logo */
  --ug-red-hover: #C1172B;     /* versión más oscura del rojo, para :hover */
  --ug-text-main: #1f2937;
  --ug-text-gray: #4b5563;
  --ug-bg-soft: #F8FAFC;
  --ug-bg-hover: #E2E8F0;

  /* Específicos del footer (fondo oscuro, texto claro) */
  --ug-footer-bg: #000b30;
  --ug-text-light: #ffffff;
  --ug-text-muted: rgba(255, 255, 255, 0.75);
  --ug-whatsapp-green: #25D366;
}

/* =========================================================
 * TIPOGRAFÍA — controla la fuente de TODO el sitio desde acá.
 * Se sobreescribe la misma variable que WordPress usa internamente
 * para su fuente global, así que este único cambio llega tanto a tus
 * secciones personalizadas como a lo que WordPress dibuja de forma
 * nativa (comentarios, formularios, etc.) — sin tocar el panel de
 * Estilos nunca más.
 *
 * Para cambiar de tipografía en el futuro: cambia el nombre acá.
 * Si es una fuente distinta a Manrope o Fira Code (las únicas que
 * ya trae cargadas el tema), también hay que agregar la línea que
 * la descarga (por ejemplo, desde Google Fonts) — avísame cuando
 * llegue ese momento.
 * ========================================================= */
:root {
  --wp--preset--font-family--manrope: 'Manrope', sans-serif;
}

/* =========================================================
 * SISTEMA DE TAMAÑOS DE TEXTO (para todas las páginas)
 * Un solo lugar para ajustar tamaños que se repiten en varias
 * secciones — cambiar un número acá actualiza todo lo que lo usa,
 * sin tener que buscar selector por selector en cada Reskin.
 * ========================================================= */
:root {
  --ug-text-eyebrow: 12px;   /* etiquetas en mayúscula: "NUESTRA HISTORIA", "CATÁLOGO" */
  --ug-text-xs: 11.5px;      /* notas pequeñas, pies de foto */
  --ug-text-sm: 13px;        /* texto secundario: roles, fechas, metadatos */
  --ug-text-base: 14.5px;    /* cuerpo de texto estándar (listas, párrafos de tarjeta) */
  --ug-text-lg: 16px;        /* texto destacado: leads, descripciones principales */
  --ug-text-xl: 17px;        /* texto sobre fondo oscuro/imagen (Hero) */
  --ug-title-card: 16px;     /* título de tarjeta: valor, testimonio, miembro de equipo */
  --ug-title-sm: 19px;       /* subtítulo: Misión/Visión, tarjeta destacada */
  --ug-title-section: 32px;  /* título de cada sección de página (h2) */
  --ug-title-hero: 38px;     /* título principal de portada (h1) */
  --ug-title-subsection: 24px; /* título intermedio dentro de una página: agrupa contenido por categoría (ej: "Secuenciación", "Biología Molecular") */
  --ug-text-copyright: 12px; /* pie de página: "© 2026 Umbrella Genomics..." */
  --ug-text-article-body: 17px; /* cuerpo de un artículo de blog largo */
}