/* ==========================================================================
   Sistema de diseño — extraído de utria-systems.com (sitio oficial)
   Paleta y tipografía heredadas; spacing/escala ajustados para esta landing.
   ========================================================================== */

:root {
  /* Color — familia teal/cyan (marca primaria) */
  --color-primary: #0396A6;
  --color-primary-dark: #074A51;
  --color-primary-darker: #035E68;
  --color-primary-mid: #0F7883;
  --color-primary-bright: #12A6B7;
  --color-primary-accent: #00C4D8;

  /* Color — verde (acción / CTA, tomado de los botones del sitio oficial) */
  --color-cta: #43AB40;
  --color-cta-hover: #07AFBB;
  --color-cta-light: #E0FFDF;

  /* Color — fondos suaves */
  --color-bg-teal-soft: #D5EDEF;
  --color-bg-white: #FFFFFF;
  --color-bg-offwhite: #F5F5F5;

  /* Color — texto y grises */
  --color-text-heading: #5C5C5C;
  --color-text-subheading: #7B7B7B;
  --color-text-muted: #818181;
  --color-text-light: #A0A0A0;

  /* Tipografía (Google Fonts del sitio oficial) */
  --font-display: 'Poppins', sans-serif;  /* h1, h2 */
  --font-body: 'Quicksand', sans-serif;   /* body, h3, párrafos, botones, navegación */

  /* Escala tipográfica */
  --fs-hero: 3rem;
  --fs-h2: 2rem;
  --fs-h3: 1.4rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* Espaciado */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;

  /* Forma — el sitio oficial usa botones tipo píldora muy redondeados */
  --radius-pill: 37px;
  --radius-card: 16px;
  --radius-input: 10px;

  /* Sombra y transición (mismos valores que el sitio oficial) */
  --shadow-soft: 0px 4px 14px rgba(0, 0, 0, 0.15);
  --shadow-card: 0px 4px 20px rgba(0, 0, 0, 0.08);
  --transition-fast: 200ms ease;
  --transition-base: 300ms ease;

  /* Contenedor */
  --container-max: 1200px;
}