/**
 * Landing - Sistema de diseno (color y tipografia).
 *
 * Todo sale de variables: color, familia, peso, tamano e interlineado. Para
 * cambiar algo NO se tocan las secciones ni las clases, solo el valor de la
 * variable de este archivo y la pagina entera se acomoda.
 *
 * Las clases las pintan los atomos (por ejemplo /atoms/text.ejs), asi que una
 * seccion nueva nunca escribe un color ni un font-size a mano.
 *
 * Secciones:
 *   1. COLOR
 *      (1A) Paleta   - los colores tal cual, con su nombre.
 *      (1B) Roles    - para que sirve cada color. Es lo que se usa.
 *      (1C) Clases   - ayudas para pintar un texto o un fondo suelto.
 *   2. TIPOGRAFIA
 *      (2A) Familias     - que fuente usa cada grupo de estilos.
 *      (2B) Pesos        - Regular, Semi Bold y Extra Bold del diseno.
 *      (2C) Escala       - tamano e interlineado de cada estilo (px del diseno).
 *      (2D) Clases       - lo que consumen las vistas.
 *      (2E) Escala movil - los titulares mas grandes no caben en un telefono.
 */

:root {
  /* ===== (1A) Paleta =================================================== */
  /* Los colores del sitio actual (umvalla.edu.mx): la paleta del tema, el
     logo VallaID y la portada. Aqui solo se nombran; lo que se usa son los
     roles del bloque siguiente. */

  /* Marca */
  --umv-navy-900: #0A042F;   /* fondo oscuro de la portada */
  --umv-navy-800: #1A1631;   /* azul marino del logo VallaID */
  --umv-blue-700: #045cb4;   /* azul al pasar el raton */
  --umv-blue-600: #046bd2;   /* azul principal: enlaces y botones */
  --umv-cyan-500: #009ee2;   /* cian del logo */
  --umv-cyan-400: #00a1ea;   /* cian de los enlaces y iconos del encabezado */
  --umv-sky-300: #66cfff;    /* celeste del degradado */
  --umv-indigo-700: #14298f; /* azul profundo del degradado */
  --umv-gold-500: #f8af3c;   /* dorado del logo */
  --umv-gold-450: #fbb03b;   /* dorado del texto destacado sobre oscuro */
  --umv-gold-400: #ffc857;   /* dorado claro del boton Valla ID */

  /* Neutros */
  --umv-ink-900: #1e293b;    /* titulos */
  --umv-ink-700: #334155;    /* texto */
  --umv-ink-600: #475569;    /* texto de los campos */
  --umv-gray-400: #9ca3af;   /* texto de ayuda y placeholders */
  --umv-slate-500: #6d758f;  /* gris azulado de los titulos y datos del pie */
  --umv-gray-300: #d1d5db;   /* bordes */
  --umv-gray-200: #eceff3;   /* separadores y bloques de codigo */
  --umv-gray-100: #f0f5fa;   /* fondo alterno */
  --umv-gray-50: #f9fafb;    /* fondo de formularios */
  --umv-sky-50: #f8faff;     /* casi blanco con un punto de azul */
  --umv-sand-50: #fcf8f2;    /* crema de las secciones claras */
  --umv-sand-200: #ede4d2;   /* linea que cierra las secciones crema */
  --umv-white: #ffffff;
  --umv-black: #111111;

  /* ===== (1B) Roles ==================================================== */
  /* Para que sirve cada color. Cambiar una de estas lineas cambia ese uso en
     toda la landing, sin tocar la paleta ni las secciones. */
  --umv-color-primary: var(--umv-blue-600);
  --umv-color-primary-hover: var(--umv-blue-700);
  --umv-color-accent: var(--umv-gold-500);
  --umv-color-accent-soft: var(--umv-gold-400);
  --umv-color-brand-dark: var(--umv-navy-800);
  /* Cian de apoyo: enlaces y iconos sobre los fondos oscuros del encabezado. */
  --umv-color-highlight: var(--umv-cyan-400);
  /* Dorado para destacar una palabra dentro de un titular oscuro. */
  --umv-color-spotlight: var(--umv-gold-450);

  --umv-color-heading: var(--umv-ink-900);
  --umv-color-text: var(--umv-ink-700);
  --umv-color-muted: var(--umv-gray-400);
  --umv-color-link: var(--umv-color-primary);
  --umv-color-link-hover: var(--umv-color-primary-hover);

  --umv-color-bg: var(--umv-white);
  --umv-color-bg-alt: var(--umv-gray-100);
  /* Las secciones claras van en blanco. El crema sigue en la paleta
    (--umv-sand-50), asi que volver atras es cambiar esta linea. */
  --umv-color-bg-soft: var(--umv-white);
  --umv-color-bg-dark: var(--umv-navy-800);
  --umv-color-surface: var(--umv-white);
  --umv-color-border: var(--umv-gray-300);
  --umv-color-divider: var(--umv-gray-200);
  --umv-color-border-soft: var(--umv-sand-200);

  /* Texto que va encima de un fondo de color. */
  --umv-color-on-primary: var(--umv-white);
  --umv-color-on-accent: var(--umv-navy-900);
  --umv-color-on-dark: var(--umv-white);
  /* Texto crema sobre las secciones azules. Tenia el color de fondo claro
    prestado, que los ataba sin querer: al pasar los fondos a blanco el texto
    de las secciones oscuras habria cambiado tambien. */
  --umv-color-on-dark-soft: var(--umv-sand-50);

  /* Formularios */
  --umv-color-field-text: var(--umv-ink-600);
  --umv-color-field-bg: var(--umv-gray-50);
  --umv-color-placeholder: var(--umv-gray-400);
  --umv-color-focus: var(--umv-color-primary);
}

/* ===== (1C) Clases de color ============================================ */
/* Para pintar algo suelto sin escribir el color a mano. */
.umv-color-primary {
  color: var(--umv-color-primary);
}

.umv-color-accent {
  color: var(--umv-color-accent);
}

.umv-color-heading {
  color: var(--umv-color-heading);
}

.umv-color-muted {
  color: var(--umv-color-muted);
}

.umv-color-on-dark {
  color: var(--umv-color-on-dark);
}

.umv-bg-white {
  background-color: var(--umv-color-surface);
}

.umv-bg-alt {
  background-color: var(--umv-color-bg-alt);
}

.umv-bg-dark {
  background-color: var(--umv-color-bg-dark);
  color: var(--umv-color-on-dark);
}

.umv-bg-primary {
  background-color: var(--umv-color-primary);
  color: var(--umv-color-on-primary);
}

.umv-bg-accent {
  background-color: var(--umv-color-accent);
  color: var(--umv-color-on-accent);
}

.umv-bg-soft {
  background-color: var(--umv-color-bg-soft);
}

:root {
  /* ===== (2A) Familias ================================================== */
  /* Las fuentes que carga el layout (landing-layout.ejs). */
  --umv-font-brand: 'Momo Trust Display', 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --umv-font-sans: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --umv-font-alt: 'Spline Sans', 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --umv-font-ui: 'Inter', 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Helvetica es la que pide el diseno de Figma. No se descarga de ningun
     sitio: en Mac, iPhone y iPad ya viene instalada, que es donde la ve la
     disenadora. Donde no esta (Windows, Android) cae a Arial, que tiene los
     mismos anchos, asi que el texto ocupa lo mismo y nada se descuadra. */
  --umv-font-helvetica: Helvetica, 'Helvetica Neue', Arial, 'Liberation Sans', sans-serif;

  /* Fuente principal: es la que hereda toda la pagina. Cambiar esta linea
     cambia la tipografia completa de la landing. */
  --umv-font-base: var(--umv-font-sans);

  /* Por grupo de estilos. Salen de la principal, asi que solo se tocan si un
     grupo debe ir en otra fuente (por ejemplo los titulares en la de marca). */
  --umv-font-display: var(--umv-font-base);
  --umv-font-paragraph: var(--umv-font-base);

  /* ===== (2B) Pesos ===================================================== */
  --umv-weight-regular: 400;
  --umv-weight-semibold: 600;
  --umv-weight-bold: 700;
  --umv-weight-extrabold: 800;

  /* Peso con el que sale un texto si la vista no pide otro. */
  --umv-text-weight: var(--umv-weight-regular);

  /* ===== (2C) Escala ==================================================== */
  /* tamano / interlineado. El comentario es el valor del diseno en px. */
  --umv-display-12-size: 6.125rem;   /* 98px */
  --umv-display-12-line: 6.125rem;   /* 98px */
  --umv-display-11-size: 4.5rem;     /* 72px */
  --umv-display-11-line: 4.5rem;     /* 72px */
  --umv-display-10-size: 3.75rem;    /* 60px */
  --umv-display-10-line: 3.75rem;    /* 60px */
  --umv-display-9-size: 3rem;        /* 48px */
  --umv-display-9-line: 3rem;        /* 48px */
  --umv-display-8-size: 2.25rem;     /* 36px */
  --umv-display-8-line: 2.5rem;      /* 40px */
  --umv-display-7-size: 1.875rem;    /* 30px */
  --umv-display-7-line: 2.25rem;     /* 36px */
  --umv-display-6-size: 1.5rem;      /* 24px */
  --umv-display-6-line: 2rem;        /* 32px */
  --umv-display-5-size: 1.25rem;     /* 20px */
  --umv-display-5-line: 1.75rem;     /* 28px */
  --umv-display-4-size: 1.125rem;    /* 18px */
  --umv-display-4-line: 1.5rem;      /* 24px */
  --umv-display-3-size: 1rem;        /* 16px */
  --umv-display-3-line: 1.375rem;    /* 22px */
  --umv-display-2-size: 0.875rem;    /* 14px */
  --umv-display-2-line: 1.25rem;     /* 20px */
  --umv-display-1-size: 0.75rem;     /* 12px */
  --umv-display-1-line: 1.125rem;    /* 18px */

  --umv-paragraph-large-size: 1rem;        /* 16px */
  --umv-paragraph-large-line: 1.75rem;     /* 28px */
  --umv-paragraph-medium-size: 1rem;       /* 16px */
  --umv-paragraph-medium-line: 1.5rem;     /* 24px */
  --umv-paragraph-default-size: 0.875rem;  /* 14px */
  --umv-paragraph-default-line: 1.375rem;  /* 22px */
  --umv-paragraph-small-size: 0.75rem;     /* 12px */
  --umv-paragraph-small-line: 1.125rem;    /* 18px */
}

/* ===== (2D) Clases ===================================================== */
/* La pagina entera arranca con la fuente principal, asi lo que todavia no use
   el atomo de texto tambien sale en Noto Sans. */
/* Los saltos dentro de la pagina (#id) se hacen deslizando, salvo para quien
   pide menos movimiento en su sistema. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  background-color: var(--umv-color-bg);
  color: var(--umv-color-text);
  /* La plantilla que trae el proyecto impone DM Sans con !important
     (flexy-bootstrap-lite/assets/css/styles.min.css); sin esto la fuente
     principal no se aplicaria. */
  font-family: var(--umv-font-base) !important;
}

/* Base comun: sin margen propio (lo pone la seccion) y con el peso por defecto. */
.umv-text {
  margin: 0;
  font-weight: var(--umv-text-weight);
}

/* Los titulares van en el color de titulo; los parrafos heredan el del texto. */
.umv-display-12,
.umv-display-11,
.umv-display-10,
.umv-display-9,
.umv-display-8,
.umv-display-7,
.umv-display-6,
.umv-display-5,
.umv-display-4,
.umv-display-3,
.umv-display-2,
.umv-display-1 {
  color: var(--umv-color-heading);
  font-family: var(--umv-font-display);
}

.umv-paragraph-large,
.umv-paragraph-medium,
.umv-paragraph-default,
.umv-paragraph-small {
  font-family: var(--umv-font-paragraph);
}

.umv-display-12 {
  font-size: var(--umv-display-12-size);
  line-height: var(--umv-display-12-line);
}

.umv-display-11 {
  font-size: var(--umv-display-11-size);
  line-height: var(--umv-display-11-line);
}

.umv-display-10 {
  font-size: var(--umv-display-10-size);
  line-height: var(--umv-display-10-line);
}

.umv-display-9 {
  font-size: var(--umv-display-9-size);
  line-height: var(--umv-display-9-line);
}

.umv-display-8 {
  font-size: var(--umv-display-8-size);
  line-height: var(--umv-display-8-line);
}

.umv-display-7 {
  font-size: var(--umv-display-7-size);
  line-height: var(--umv-display-7-line);
}

.umv-display-6 {
  font-size: var(--umv-display-6-size);
  line-height: var(--umv-display-6-line);
}

.umv-display-5 {
  font-size: var(--umv-display-5-size);
  line-height: var(--umv-display-5-line);
}

.umv-display-4 {
  font-size: var(--umv-display-4-size);
  line-height: var(--umv-display-4-line);
}

.umv-display-3 {
  font-size: var(--umv-display-3-size);
  line-height: var(--umv-display-3-line);
}

.umv-display-2 {
  font-size: var(--umv-display-2-size);
  line-height: var(--umv-display-2-line);
}

.umv-display-1 {
  font-size: var(--umv-display-1-size);
  line-height: var(--umv-display-1-line);
}

.umv-paragraph-large {
  font-size: var(--umv-paragraph-large-size);
  line-height: var(--umv-paragraph-large-line);
}

.umv-paragraph-medium {
  font-size: var(--umv-paragraph-medium-size);
  line-height: var(--umv-paragraph-medium-line);
}

.umv-paragraph-default {
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-paragraph-small {
  font-size: var(--umv-paragraph-small-size);
  line-height: var(--umv-paragraph-small-line);
}

/* Pesos del diseno: cada estilo puede salir en cualquiera de los tres. */
.umv-text--regular {
  font-weight: var(--umv-weight-regular);
}

.umv-text--semibold {
  font-weight: var(--umv-weight-semibold);
}

.umv-text--bold {
  font-weight: var(--umv-weight-bold);
}

.umv-text--extrabold {
  font-weight: var(--umv-weight-extrabold);
}

/* Cambiar la familia de un texto suelto (por ejemplo el titular de marca). */
.umv-font-brand {
  font-family: var(--umv-font-brand);
}

.umv-font-sans {
  font-family: var(--umv-font-sans);
}

.umv-font-alt {
  font-family: var(--umv-font-alt);
}

.umv-font-ui {
  font-family: var(--umv-font-ui);
}

/* ===== (2E) Escala movil ============================================== */
/* Los cuatro titulares grandes no caben en un telefono: bajan un escalon.
   Se cambia el valor de la variable, no la clase. */
@media (max-width: 768px) {
  :root {
    --umv-display-12-size: 3.75rem;   /* 60px */
    --umv-display-12-line: 3.75rem;   /* 60px */
    --umv-display-11-size: 3rem;      /* 48px */
    --umv-display-11-line: 3rem;      /* 48px */
    --umv-display-10-size: 2.25rem;   /* 36px */
    --umv-display-10-line: 2.5rem;    /* 40px */
    --umv-display-9-size: 1.875rem;   /* 30px */
    --umv-display-9-line: 2.25rem;    /* 36px */
  }
}