/*
 * tokens.css — variables del sistema de diseño.
 *
 * Los valores vienen de las variables del archivo Figma "Web - Zenit"
 * (get_variable_defs sobre el nodo 1217:328). Los nombres de color conservan el
 * nombre que les puso la diseñadora, para que revisar contra el Figma sea directo.
 *
 * Ninguna otra capa debe declarar colores literales: si falta un color, se agrega acá.
 */

:root {
  /* ── Color ─────────────────────────────────────────────────── */
  --c-verde-fresco:   #05A278;  /* Primario. Botones, énfasis, títulos de acento. */
  --c-verde-oscuro:   #21280E;  /* Fondo del footer. */
  --c-verde-fluor:    #C3F950;  /* Fondos lima, card del formulario, banda de cifras. */
  --c-verde-claro:    #EEFDCF;  /* Fondos suaves, degradado del hero. */
  --c-verde-nuevo:    #015642;  /* Verde profundo. */
  --c-verde-limon:    #A7D24A;  /* Verde intermedio, degradados. */
  --c-verde-vivo:     #00A475;  /* Degradado de botones, badge de LinkedIn, fondo del CTA. */
  --c-verde-profundo: #023C2C;  /* Cierre del degradado del equipo (nodo 1217:544). */
  --c-verde-medio:    #017D5E;  /* Inicio del degradado del área oscura (Que hacemos). */
  --c-verde-abismo:   #002D23;  /* Cierre del mismo degradado. */
  --c-noche:          #18202D;  /* Card del carrusel de enfoque. Único azulado del sitio. */
  --c-black:          #1A202C;  /* Texto. */
  --c-white:          #FFFFFF;
  --c-neutral-300:    #F1F3F7;  /* Bordes y fondos neutros. */

  /* Alias semánticos: las capas de arriba usan estos, no los nombres de marca. */
  --c-text:           var(--c-black);
  --c-text-invert:    var(--c-white);
  --c-accent:         var(--c-verde-fresco);
  --c-surface:        var(--c-white);
  --c-surface-soft:   var(--c-verde-claro);
  --c-surface-lime:   var(--c-verde-fluor);
  --c-surface-dark:   var(--c-verde-oscuro);
  --c-border:         var(--c-neutral-300);

  /*
   * Color de los márgenes que quedan a los lados en pantallas de más de 1440.
   * El verde oscuro del footer los lee como marco intencional en vez de como
   * espacio sobrante.
   */
  --c-marco:          var(--c-verde-oscuro);

  /*
   * Verde apagado del botón del footer, muestreado del render: #519C79 y no el
   * #05A278 del resto del sitio. Viene de la captura del footer actual que trae
   * el Figma, y se verificó que la captura no está desteñida (su fondo coincide
   * con el token a 1 unidad). Si la intención era el verde vivo, basta cambiar
   * este valor.
   */
  --c-verde-footer:   #519C79;

  /*
   * Degradados del diseño. Los ángulos de Figma no mapean 1:1 a CSS, así que
   * están traducidos según lo que muestran los renders.
   */
  --grad-hero:    linear-gradient(90deg, var(--c-white) 0%, var(--c-verde-fluor) 100%);
  --grad-cifras:  linear-gradient(285deg, var(--c-verde-fluor) 26.8%, var(--c-white) 101.93%);
  --grad-prog:    linear-gradient(180deg, var(--c-verde-fluor) 0%, var(--c-white) 100%);
  --grad-boton:   linear-gradient(100.6deg, var(--c-verde-vivo) 19.607%, var(--c-verde-fluor) 124.36%);

  /*
   * Áreas de "Que hacemos". El área lima baja de blanco a lima, al revés que
   * --grad-prog: usar ese acá dejaba el degradado invertido respecto al diseño.
   */
  --grad-area-lima:   linear-gradient(180deg, var(--c-white) 0%, var(--c-verde-fluor) 100%);
  --grad-area-oscuro: linear-gradient(180deg, var(--c-verde-medio) 0%, var(--c-verde-abismo) 100%);

  /*
   * Fondo de la sección de equipo (nodo 1217:544). Son dos capas: el degradado
   * verde y encima un negro plano al 20%, que es lo que baja el #05A278 del token
   * al #048260 que se ve en el render. Se conservan separadas para que se lea de
   * dónde sale ese tono y no quede como un color inventado.
   *
   * El Figma corta el primer tramo en 44.624%, pero ese porcentaje está anclado a
   * una sección de 706px con una sola fila de personas. Con las diez del sitio la
   * sección mide 1275 y el porcentaje corría el quiebre 260px hacia abajo, así que
   * va en píxeles: 44.624% de 706 = 315.
   */
  --grad-equipo:  linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
                  linear-gradient(180deg, var(--c-verde-fresco) 315px, var(--c-verde-profundo) 100%);

  /* Sombra azulada de los botones del diseño. */
  --shadow-boton: 0 8px 11.5px rgba(65, 132, 247, 0.24);

  /* ── Tipografía ────────────────────────────────────────────── */
  /*
   * Cuatro familias, tomadas de lo que los frames usan de verdad. Las variables
   * del archivo Figma solo declaran DM Sans e Inter, pero el diseño además usa
   * Roboto en los títulos y Sora en los botones. Se respeta el diseño.
   */
  --font-titulo: "Roboto", system-ui, -apple-system, sans-serif;  /* Títulos de hero y sección. */
  --font-cifra:  "DM Sans", system-ui, sans-serif;                /* Cifras y bajada del hero. */
  --font-body:   "Inter", system-ui, -apple-system, sans-serif;   /* Nav, labels, formularios. */
  --font-boton:  "Sora", system-ui, sans-serif;                   /* Botones de acción. */

  /* Título de sección: Roboto 60/76, tracking 0.5 (¿Qué hacemos?, Nuestros Programas). */
  --fs-title-lg: 3.75rem;   /* 60px */
  --lh-title-lg: 4.75rem;   /* 76px */
  --ls-title-lg: 0.5px;

  /* Título del hero: Roboto 50, line-height 1.03, tracking -0.4. */
  --fs-hero:     3.125rem;  /* 50px */
  --lh-hero:     1.03;
  --ls-hero:     -0.4px;

  /* Bajada del hero: DM Sans 26/1.27, tracking -0.208. */
  --fs-bajada:   1.625rem;  /* 26px */
  --lh-bajada:   1.27;
  --ls-bajada:   -0.208px;

  /* Destacado de párrafo: Roboto Bold 27/32 (intro de cifras, columnas). */
  --fs-lead:     1.6875rem; /* 27px */
  --lh-lead:     2rem;      /* 32px */

  /* Cuerpo grande: Roboto 20/30-32 (texto de columnas y cards). */
  --fs-texto-lg: 1.25rem;   /* 20px */
  --lh-texto-lg: 1.875rem;  /* 30px */

  /* Bajada de sección: Roboto Regular 23/32, tracking 0.5 (nodo 1217:549). */
  --fs-texto-md: 1.4375rem; /* 23px */
  --lh-texto-md: 2rem;      /* 32px */

  /* Cifra: DM Sans Bold 75. */
  --fs-cifra:    4.6875rem; /* 75px */

  /*
   * Títulos de sección de las páginas interiores. Existían como valor de reserva
   * dentro de var() y no como token, así que no se podían ajustar desde un lugar.
   */
  /* 64px: medido sobre los títulos de servicio, el único lugar que lo usa. */
  --fs-title-md: 4rem;      /* 64px */
  --fs-title-sm: 1.75rem;   /* 28px */
  --lh-title-sm: 2.25rem;   /* 36px */

  --fs-body:     1rem;      /* 16px */
  --lh-body:     1.625rem;  /* 26px */

  --fs-body-sm:  0.875rem;  /* 14px — Display/2 del Figma */
  --lh-body-sm:  1.25rem;   /* 20px */

  --fs-eyebrow:  0.75rem;   /* 12px — Display/1 Uppercase del Figma */
  --lh-eyebrow:  1.125rem;  /* 18px */
  --ls-eyebrow:  8px;       /* El tracking amplio es característico del diseño. */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* ── Layout ────────────────────────────────────────────────── */
  --frame:     1440px;  /* Ancho del frame de Figma: la referencia del calco. */
  --container: 1230px;  /* Contenido más ancho medido en el diseño. */
  --gutter:    clamp(1rem, 4vw, 3rem);

  /*
   * Las secciones a sangre ocupan la ventana entera, pero su contenido sigue
   * puesto en las medidas del frame de 1440 centrado. Estos dos sirven para
   * traducir entre una cosa y la otra:
   *
   *   --sangria     lo que sobra a cada lado del frame centrado. Vale 0 hasta
   *                 1440, así que por debajo de ese ancho nada de esto actúa.
   *   --frame-util  el frame que de verdad hay para repartir: el diseño hasta
   *                 1440, la ventana por debajo.
   *
   * OJO: los dos llevan porcentaje, así que su valor depende de contra qué se
   * resuelve el 100% en el lugar donde se usen. Solo tienen sentido sobre un
   * elemento cuyo ancho sea el de la página —una sección hija del body—, nunca
   * dentro de una columna. Para posicionar algo dentro de una mitad partida hay
   * que anclarlo a la costura, que es una medida estable.
   */
  --sangria:    max(0px, (100% - var(--frame)) / 2);
  --frame-util: min(100%, var(--frame));

  /*
   * Alto de la barra. En móvil los heros lo descuentan del alto de pantalla
   * para llenar la primera vista, así que si cambia el alto de la barra hay que
   * cambiarlo acá también: el valor de móvil se redeclara en components.css,
   * pegado a la regla que lo fija.
   */
  --header-alto: 116px;

  /* ── Forma ─────────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius:      14px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 4px rgba(25, 33, 61, 0.08);
  --shadow-md: 0 8px 24px rgba(25, 33, 61, 0.10);

  /* ── Espaciado vertical de secciones ──────────────────────── */
  --space-section: clamp(3rem, 6vw, 5.5rem);
  --space-block:   clamp(1.5rem, 3vw, 2.5rem);

  /* ── Movimiento ────────────────────────────────────────────── */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;

  /*
   * Lo que un carrusel se queda en cada vista antes de pasar a la siguiente.
   * Es el tiempo que tarda en llenarse el pill del paginador y, como el avance
   * lo dispara el fin de esa animación, acá se cambia la cadencia de los dos
   * carruseles: el JS no conoce ningún número de tiempo.
   */
  --t-carrusel: 5000ms;
}