/* ============================================================================
 * MARCA — Apogeo Studio
 * ----------------------------------------------------------------------------
 * Punto único de remapeo de la marca sobre Lumos. Los valores son los reales
 * del export de Webflow (`:root` de new-apogeo.webflow.css); se repiten aquí
 * para que cambiar la marca sea tocar SOLO este fichero.
 * ========================================================================== */

@font-face {
  font-family: "Tt Firs Text Variable";
  src: url("/_demo/brand/TT_Firs_Text_Variable.woff") format("woff");
  font-weight: 100 950;
  font-style: normal;
  font-display: swap;
}

:root {
  --service--heading-tracking: -.035em;
  --service--hero-copy: 22ch;
  --service--heading-width: 25ch;
  --service--copy-width: 56ch;
  --service--intro-width: 49ch;
  --service--card-copy: 32ch;
  --service--hero-art-height: 34rem;
  --service--mobile-art-width: 25rem;
  --service--mobile-art-height: 15rem;
  --faq--illustration-size: clamp(5rem, 10vw, 9rem);
  --proposal--logo-width: 6rem;
  --proposal--hero-width: 19ch;
  --proposal--heading-width: 20ch;
  --proposal--diagram-width: 15rem;
  --proposal--diagram-height: 16rem;
  --proposal--diagram-small: 6rem;
  --proposal--architecture-width: 35rem;
  --proposal--svg-label: 9px;
  --proposal--line-weight: 1.2px;
  --proposal--illustration-stroke: 1.05px;
  --proposal--illustration-detail-stroke: .75px;
  --proposal--illustration-ink-share: 72%;
  --proposal--illustration-detail-share: 38%;
  --proposal--illustration-shadow-share: 3%;
  --proposal--field-surface: color-mix(in srgb, var(--swatch--dark) 2%, var(--swatch--light));
  --proposal--line-light: color-mix(in srgb, var(--swatch--dark) 8%, transparent);
  --proposal--dot-light: color-mix(in srgb, var(--swatch--dark) 12%, transparent);
  --proposal--dot-dark: color-mix(in srgb, var(--swatch--light) 10%, transparent);
  --proposal--ink-light: color-mix(in srgb, var(--swatch--dark) 54%, transparent);
  --proposal--ink-dark: color-mix(in srgb, var(--swatch--light) 55%, transparent);
  --proposal--chapter-space: clamp(5rem, 9vw, 9rem);
  --proposal--dock-width: 76rem;
  --proposal--dock-height: 4rem;
  --proposal--calendar-period: 6rem;
  --proposal--calendar-period-mobile: 6.5rem;
  --proposal--calendar-row: 5.5rem;
  --proposal--dot-space: 1.25rem;
  --proposal--dot-size: .04rem;
  --proposal--surface: color-mix(in srgb, var(--swatch--brand-secondary) 4%, var(--swatch--dark));
  --proposal--surface-raised: color-mix(in srgb, var(--swatch--light) 6%, var(--swatch--dark-secondary));
  --proposal--rule-dark: color-mix(in srgb, var(--swatch--light) 10%, transparent);
  --proposal--text-dark: color-mix(in srgb, var(--swatch--light) 64%, transparent);
  --proposal--shadow: 0 .5rem 2rem color-mix(in srgb, var(--swatch--dark) 14%, transparent);
  --proposal--form-width: 42rem;
  --proposal--card-width: 15rem;
  --proposal--pricing-copy-width: 34ch;
  --proposal--process-copy-width: 36ch;
  --proposal--input-height: 3.25rem;
  --proposal--tracking: -.035em;
  --proposal--muted: color-mix(in srgb, var(--swatch--dark) 64%, transparent);
  --proposal--blue-wash: color-mix(in srgb, var(--swatch--brand) 5%, transparent);
  --motion--page-travel: .5rem;
  --motion--intro-mark: 3rem;
  /* -- Paleta ------------------------------------------------------------- */
  --swatch--brand: #4886ff;
  --swatch--brand-secondary: #b1c5ff;
  --swatch--brand-secondary-2: #e5e7ff;
  --swatch--brand-secondary-3: #d8d2e2;
  --swatch--brand-text: var(--swatch--dark);
  --swatch--dark: #12100f;
  --swatch--dark-secondary: #1a1a1a;
  --swatch--light: #fbfbfb;
  --swatch--light-secondary: whitesmoke;

  /* -- Tipografía --------------------------------------------------------- */
  --_typography---font--primary-family: "Tt Firs Text Variable", Impact, sans-serif;
  --_typography---font--special: "Exo Variablefont Wght", Arial, sans-serif;
  --_typography---font--primary-regular: 400;
  --_typography---font--primary-medium: 450;
  --_typography---font--primary-bold: 700;

  /* -- Forma -------------------------------------------------------------- */
  --radius--main: 1rem;
  --radius--small: 0.5rem;
  --radius--button: 100vw;
  --radius--input: 0.5rem;
  --radius--outer: 0.75rem;
  --radius--inner: 0.5rem;
  --radius--button-icon: 0.45rem;
  --border-width--main: 0.064rem;

  /* -- Layout ------------------------------------------------------------- */
  --screen-size--min: 20;
  --screen-size--max: 90;
  --site--width: 90rem;
  --site--gutter: 1rem;
  --site--column-count: 12;
  --site--nav-height: 3.5rem;
}