/**
 * 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-navy-750: #241f42;   /* tarjeta sobre la franja del impacto */
  --umv-navy-700: #282249;   /* tarjetas sobre el azul marino */
  --umv-navy-650: #38335c;   /* linea de esa tarjeta */
  --umv-navy-600: #3d3a55;   /* texto de apoyo, un paso por debajo del titulo */
  --umv-navy-550: #4d476b;   /* el recuento de publicaciones de noticias */
  --umv-navy-575: #484268;   /* el boton de cerrar sobre el organigrama */
  --umv-navy-500: #5b5872;   /* antetitulos y notas sobre fondo claro */
  --umv-navy-525: #5c577a;   /* la nota de los accesos del centro de idiomas */
  --umv-blue-700: #045cb4;   /* azul al pasar el raton */
  --umv-blue-600: #046bd2;   /* azul principal: enlaces y botones */
  --umv-blue-650: #006bad;   /* azul de quien firma una cita */
  --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-whatsapp-500: #25d366; /* el verde de WhatsApp, el suyo de marca */
  --umv-gold-450: #fbb03b;   /* dorado del texto destacado sobre oscuro */
  --umv-gold-400: #ffc857;   /* dorado claro del boton Valla ID */
  --umv-green-400: #63de77;  /* punto verde de "agenda abierta" */
  --umv-red-500: #d64545;    /* avisos de que algo no se pudo hacer */

  /* 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-slate-600: #5e6584;  /* gris azulado de los encabezados de instalaciones */
  --umv-slate-700: #353d5c;  /* tarjetas oscuras de las certificaciones */
  --umv-slate-800: #2c3147;  /* el fondo donde acaba la franja de la cita */
  --umv-gray-300: #d1d5db;   /* bordes */
  --umv-gray-200: #eceff3;   /* separadores y bloques de codigo */
  --umv-gray-250: #e1e3eb;   /* el recuadro alterno de las tiras de salas */
  --umv-gray-225: #f2f3fa;   /* hueco del retrato mientras no hay foto */
  --umv-gray-75: #f6f7fb;    /* fondo de las franjas claras azuladas */
  --umv-gray-150: #f1f3f7;   /* borde de los campos de formulario */
  --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-sky-100: #e6f4fb;    /* azul claro de los paneles alternos */
  --umv-sand-50: #fcf8f2;    /* crema de las secciones claras */
  --umv-sand-75: #fbf7ef;    /* crema de las tarjetas de publicaciones */
  --umv-sand-100: #fcf1e0;   /* crema calida del aviso de acompanantes */
  --umv-sand-150: #ece9e2;   /* linea entre renglones sobre crema */
  --umv-sand-200: #ede4d2;   /* linea que cierra las secciones crema */
  --umv-sand-250: #e3ddcf;   /* borde de las etiquetas sobre crema */
  --umv-lilac-100: #f1eff5;  /* fondo del numero de un renglon en reposo */
  --umv-lilac-175: #ccc9de;  /* texto sobre la tarjeta azul marino */
  --umv-lilac-200: #d6d3e6;  /* texto sobre las secciones azul marino */
  --umv-lilac-300: #a9a5c4;  /* antetitulos sobre las secciones azul marino */
  --umv-white: #ffffff;
  --umv-white-90: rgba(255, 255, 255, 0.85); /* blanco que deja ver la foto detras */
  --umv-white-60: rgba(255, 255, 255, 0.6); /* notas al pie de un campo sobre oscuro */
  --umv-white-30: rgba(255, 255, 255, 0.3); /* lineas que separan sobre oscuro */
  --umv-black: #111111;
  --umv-sand-25: #fbf8f3;    /* crema del boton de cerrar de la ventana */
  --umv-lilac-150: #e4e0ec;  /* linea que separa dentro de la ventana */
  --umv-lilac-250: #d5d1e0;  /* borde de los campos de la ventana */
  --umv-lilac-225: #c9c5dc;  /* borde del recuadro de lo que falta por definir */
  --umv-cyan-100: rgba(0, 161, 234, 0.14); /* halo del acuse */
  --umv-navy-veil: #0a042e;  /* velo detras de la ventana, al 70% */
  --umv-navy-15: rgba(26, 22, 49, 0.15); /* columna de la flecha de la ficha */

  /* Marca de Instagram: su degradado, no el nuestro. Vive aqui para que las
    secciones no escriban colores de otra marca a mano. */
  --umv-instagram-gradient: linear-gradient(
    45deg,
    #feda75 0%,
    #fa7e1e 25%,
    #d62976 50%,
    #962fbf 75%,
    #4f5bd5 100%
  );

  /* ===== (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);
  --umv-color-danger: var(--umv-red-500);
  /* 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-surface-veil: var(--umv-white-90); /* tarjetas encima de una foto */
  --umv-color-surface-dark: var(--umv-navy-700); /* tarjetas sobre fondo oscuro */
  --umv-color-border: var(--umv-gray-300);
  --umv-color-divider: var(--umv-gray-200);
  --umv-color-border-soft: var(--umv-sand-200);
  /* Lo que se pone delante de la pagina cuando se abre una ventana. */
  --umv-color-veil: var(--umv-navy-veil);

  /* 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);

  /* Encabezado. Hueco que ocupa arriba y lo que tarda en recogerse. Lo apunta
    /js/landing-header.js cada vez que el encabezado entra o sale, para que lo
    que se quede pegado arriba (la fila de pestanas) sepa donde ponerse y se
    mueva al mismo tiempo. Sin JavaScript vale cero y todo va a ras de
    pantalla. */
  --umv-header-offset: 0px;
  --umv-header-slide: 0.3s;
  /* Y lo que ocupa otra franja pegada por encima de la fila de pestanas,
    cuando la pagina tiene una (la de la ficha de un programa). Lo apunta
    /js/landing-program-bar.js al ponerla y al quitarla; donde no hay ninguna
    vale cero y la fila se detiene solo bajo el encabezado. */
  --umv-sticky-extra: 0px;
}

/* ===== (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-light: 300;
  --umv-weight-regular: 400;
  --umv-weight-medium: 500;
  --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 */
  }
}