@font-face { font-family: Barlow; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/barlow-400-latin.b0a8ad37.woff2") format("woff2"); } @font-face { font-family: Barlow; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-600-latin.4b52ddd4.woff2") format("woff2"); } @font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-semi-condensed-600-latin.f158417e.woff2") format("woff2"); } @font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-semi-condensed-700-latin.fb958c8c.woff2") format("woff2"); } @font-face { font-family: "Barlow Fallback"; font-display: swap; src: local("Arial"); size-adjust: 94%; ascent-override: 106.38%; descent-override: 21.28%; line-gap-override: 0%; } @font-face { font-family: "Barlow Condensed Fallback"; font-display: swap; src: local("Arial"); size-adjust: 82%; ascent-override: 121.95%; descent-override: 24.39%; line-gap-override: 0%; } :root { --paper: #f5f7fa; --panel: #ffffff; --ink: #0c1a3a; --ink-2: #3d4a66; --muted: #56637f; --line: #c9d7e8; --line-strong: #6a7fa0; --cobalt: #2457c5; --marker: #ffd23f; --on-marker: #0c1a3a; --focus: #0c1a3a; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-18: 4.5rem; --space-28: 7rem; color-scheme: light dark; font-family: Barlow, "Barlow Fallback", Arial, sans-serif; color: var(--ink); background: var(--paper); accent-color: var(--ink); caret-color: var(--ink); scrollbar-color: var(--line-strong) var(--paper); } @media (prefers-color-scheme: dark) { :root { --paper: #111418; --panel: #181c22; --ink: #eef2f7; --ink-2: #b4bfd1; --muted: #9aa7bd; --line: #2a3441; --line-strong: #5b6a80; --cobalt: #8db0ff; --marker: #ffd23f; --on-marker: #111418; --focus: #ffd23f; } } *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, p, figure, dl, dd, ul, ol { margin: 0; } body { font-size: clamp(1.0625rem, 1rem + .25vw, 1.125rem); line-height: 1.6; overflow-wrap: break-word; } svg { display: block; max-inline-size: 100%; } ul, ol { padding-inline-start: 1.5rem; } li::marker { color: var(--line-strong); } ::selection { background: var(--marker); color: var(--on-marker); } a { color: var(--cobalt); text-underline-offset: .2em; text-decoration-thickness: 1px; transition: color 120ms, text-decoration-thickness 120ms; } a:hover { color: var(--ink); text-decoration-thickness: 2px; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } hr { border: 0; border-block-start: 1px solid var(--line); } h1, h2, h3 { font-family: "Barlow Semi Condensed", "Barlow Condensed Fallback", Arial, sans-serif; font-weight: 700; text-wrap: balance; } h1 { font-size: clamp(2.5rem, 1.2rem + 5.5vw, 5rem); line-height: 1.2; letter-spacing: -.02em; } h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); line-height: 1.15; margin-block-end: var(--space-6); } h3 { font-size: 1.5rem; line-height: 1.2; margin-block-end: var(--space-4); } p { max-inline-size: 68ch; text-wrap: pretty; } p + p { margin-block-start: var(--space-4); } mark { background: var(--marker); color: var(--on-marker); box-decoration-break: clone; -webkit-box-decoration-break: clone; } .skip-link { position: absolute; inset-block-start: -8rem; inset-inline-start: 1rem; z-index: 10; background: var(--paper); padding: .75rem 1rem; } .skip-link:focus { inset-block-start: .5rem; } .site-header { background: var(--paper); border-block-end: 1px solid var(--line-strong); position: relative; z-index: 5; } .header-inner, .sheet { max-inline-size: 76rem; margin-inline: 1rem; } .header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2rem; padding-block: .5rem; } .wordmark { display: inline-flex; align-items: center; gap: .5rem; min-block-size: 44px; color: var(--ink); text-decoration: none; font: 700 1.5rem/1 "Barlow Semi Condensed", "Barlow Condensed Fallback", Arial, sans-serif; } .station-mark { flex: none; stroke: var(--ink); stroke-width: 3; fill: var(--paper); } nav { inline-size: 100%; } nav ul { display: flex; flex-wrap: wrap; column-gap: 1rem; list-style: none; padding: 0; } nav a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--ink-2); font-size: 1rem; } .sheet { position: relative; } .frame-decoration { display: none; } .section { position: relative; padding-block: var(--space-18); border-block-end: 1px solid var(--line); scroll-margin-block-start: 5rem; } .hero { display: grid; gap: var(--space-12); isolation: isolate; } .hero-grid { position: absolute; z-index: -1; inset: 0; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(#000, transparent); } .hero-copy { min-inline-size: 0; } .lead { margin-block-start: var(--space-6); } .actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-block-start: var(--space-8); } .button { display: inline-flex; justify-content: center; align-items: center; min-block-size: 48px; padding: .5rem 1.5rem; background: var(--ink); color: var(--paper); border-block-end: 2px solid var(--marker); text-decoration: none; font-weight: 600; } .button:hover { background: var(--ink-2); color: var(--paper); text-decoration: underline; } .text-action { display: inline-flex; align-items: center; min-block-size: 48px; text-underline-offset: 4px; } .diagram-plate { padding: .5rem; align-self: start; min-inline-size: 0; background: var(--panel); border: 1px solid var(--line-strong); } .diagram-plate figcaption { padding: .5rem .5rem 1rem; font-family: "Barlow Semi Condensed", "Barlow Condensed Fallback", Arial, sans-serif; font-weight: 600; line-height: 1.25; font-size: 1.25rem; } .visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .system-map { list-style: none; margin: 0 .5rem; padding: 0; } .station-row { position: relative; display: grid; grid-template-columns: 4rem minmax(0, 1fr); min-block-size: 6rem; } .station-text { grid-column: 2; display: grid; align-content: center; padding-block: 1rem; border-block-start: 1px solid var(--line); line-height: 1.3; } .station-row strong { font-weight: 600; } .station-detail { color: var(--ink-2); font-size: .9375rem; } .seg, .node { position: absolute; pointer-events: none; } .seg { border: 0 solid; } .seg-v { inline-size: 0; border-inline-start-width: .25rem; } .seg-v.lane-trunk { inset-inline-start: .75rem; } .seg-v.lane-branch { inset-inline-start: 2.75rem; } .seg-h { block-size: 0; inline-size: 2rem; inset-inline-start: .875rem; inset-block-start: calc(50% - .125rem); border-block-start-width: .25rem; } .from-top { inset-block-start: 0; } .from-center { inset-block-start: 50%; } .to-center { inset-block-end: 50%; } .to-bottom { inset-block-end: 0; } .kind-request { border-color: var(--ink); border-style: solid; } .kind-data { border-color: var(--cobalt); border-style: dotted; } .kind-jobs { border-color: var(--cobalt); border-style: dashed; } .node { z-index: 1; box-sizing: border-box; inline-size: 1rem; block-size: 1rem; inset-block-start: calc(50% - .5rem); border: 3px solid var(--ink); border-radius: 50%; background: var(--panel); } .node.lane-trunk { inset-inline-start: .375rem; } .node.lane-branch { inset-inline-start: 2.375rem; } .system-map-legend { list-style: none; display: grid; gap: .5rem; margin: 1rem .5rem .5rem; padding: 0; color: var(--muted); font: 600 1rem/1.3 "Barlow Semi Condensed", "Barlow Condensed Fallback", Arial, sans-serif; } .system-map-legend li { display: flex; align-items: center; gap: .75rem; } .system-map-legend li::before { content: ""; flex: none; inline-size: 2.5rem; border-block-start: .25rem solid var(--ink); } .system-map-legend .data-key::before { border-block-start: .25rem dotted var(--cobalt); } .system-map-legend .jobs-key::before { border-block-start: .25rem dashed var(--cobalt); } @media (prefers-reduced-motion: no-preference) { .seg { animation: reveal-down 700ms cubic-bezier(.16, 1, .3, 1) var(--row-delay, 0ms) backwards; } .seg-h { animation-name: reveal-right; } .node { animation: fade-in 200ms ease-out calc(var(--row-delay, 0ms) + 300ms) backwards; } .station-row:nth-child(2) { --row-delay: 140ms; } .station-row:nth-child(3) { --row-delay: 280ms; } .station-row:nth-child(4) { --row-delay: 420ms; } .station-row:nth-child(5) { --row-delay: 560ms; } @keyframes reveal-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } } @keyframes reveal-right { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } } .work-row { display: grid; gap: .5rem 2rem; padding-block: var(--space-8); border-block-start: 1px solid var(--line); } .work-row:last-child { padding-block-end: 0; } .square-list { list-style: none; padding: 0; margin-block-start: var(--space-6); } .square-list li { position: relative; padding-inline-start: 1.25rem; max-inline-size: 68ch; } .square-list li + li { margin-block-start: .5rem; } .square-list li::before { content: ""; position: absolute; inline-size: 6px; block-size: 6px; background: var(--line-strong); inset-inline-start: 0; inset-block-start: .65em; } .product-plate { border: 1px solid var(--line-strong); background: var(--panel); padding: var(--space-6); } .product-lead { font-size: 1.25rem; font-weight: 600; } .product-plate .button { margin-block-start: var(--space-6); } .independence-notice { margin-block-start: var(--space-8); color: var(--ink-2); font-size: .875rem; font-weight: 400; } .process-layout { display: grid; gap: var(--space-12); margin-block-start: var(--space-8); } .process-steps ol { display: grid; gap: var(--space-8); list-style: none; padding: 0; } .process-steps li { position: relative; min-inline-size: 0; padding-inline-start: 2.5rem; } .process-steps li::before { content: ""; position: absolute; z-index: 1; box-sizing: border-box; inset-inline-start: .375rem; inset-block-start: .3rem; inline-size: 1rem; block-size: 1rem; border: 3px solid var(--line-strong); border-radius: 50%; background: var(--paper); } .process-steps li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: calc(.875rem - 1.5px); inset-block-start: 1.3rem; inset-block-end: calc(-1 * var(--space-8) - .3rem); border-inline-start: 3px solid var(--line-strong); } .engineering-notes .square-list { margin-block-start: 0; } .table-scroll { overflow-x: auto; margin-block-start: var(--space-8); } table { inline-size: 100%; border-collapse: collapse; text-align: start; } caption { text-align: start; font-weight: 600; margin-block-end: var(--space-4); } th, td { border-block-end: 1px solid var(--line); padding: 1rem .5rem; text-align: start; vertical-align: top; overflow-wrap: anywhere; } th { font-weight: 600; } thead th { border-block-end-color: var(--line-strong); } tbody th { inline-size: 40%; } .company-block { display: grid; margin-block-start: var(--space-8); border-block-start: 1px solid var(--line-strong); border-inline-start: 1px solid var(--line-strong); background: var(--panel); } .company-block > div { min-inline-size: 0; padding: var(--space-6); border-inline-end: 1px solid var(--line-strong); border-block-end: 1px solid var(--line-strong); } dt { color: var(--muted); font: 600 .8125rem/1.4 "Barlow Semi Condensed", "Barlow Condensed Fallback", Arial, sans-serif; text-transform: uppercase; letter-spacing: .08em; margin-block-end: .5rem; } dd { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } dd a, .correo, .phone { display: inline-flex; align-items: center; min-block-size: 44px; } .correo { font-variant-ligatures: none; flex-wrap: wrap; overflow-wrap: anywhere; text-decoration: underline; cursor: pointer; } .decoy { display: none; } .contact-details { display: grid; gap: var(--space-8); margin-block-start: var(--space-8); } .contact-label { color: var(--muted); font-size: .875rem; margin-block-end: .5rem; } .contact-details .correo { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); } .phone { font-variant-numeric: tabular-nums; } .site-footer { border-block-end: 0; font-size: 1rem; } .identity-line { font-variant-numeric: tabular-nums; color: var(--ink-2); } .legal-links { display: grid; list-style: none; padding: 0; margin-block-start: var(--space-6); } .legal-links a { display: inline-flex; align-items: center; min-block-size: 44px; padding-block: .5rem; } .copyright { margin-block-start: var(--space-8); color: var(--muted); } .legal-page { max-inline-size: 48rem; } .legal-page h1 { font-size: clamp(2rem, 1.2rem + 3.5vw, 3.25rem); line-height: 1.15; margin-block-end: var(--space-4); } .legal-version { color: var(--muted); margin-block-end: var(--space-8); } .legal-page section { margin-block-start: var(--space-8); } .legal-page h2 { font-size: 1.375rem; line-height: 1.3; margin-block-end: var(--space-4); } .legal-page p + p, .legal-page p + ul, .legal-page ul + p { margin-block-start: var(--space-4); } .legal-page .square-list { margin-block-start: var(--space-4); } .legal-page .correo { min-block-size: 0; } .phone-inline { font-variant-numeric: tabular-nums; } .legal-back { margin-block-start: var(--space-12); } .contact-privacy { margin-block-start: var(--space-4); } .legal-back a { display: inline-flex; align-items: center; min-block-size: 44px; } .not-found h1 { margin-block-end: var(--space-6); } .not-found .button { margin-block-start: var(--space-8); } @media (min-width: 40rem) { .company-block { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-details { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 48rem) { .header-inner, .sheet { margin-inline: 2rem; } .process-steps ol { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); } .process-steps li { padding-inline-start: 0; padding-block-start: 2.25rem; } .process-steps li::before { inset-inline-start: 0; inset-block-start: 0; } .process-steps li:not(:last-child)::after { inset-inline-start: 1rem; inset-inline-end: calc(-1 * var(--space-6)); inset-block-start: calc(.5rem - 1.5px); inset-block-end: auto; border-inline-start: 0; border-block-start: 3px solid var(--line-strong); } .product-plate { padding: var(--space-12); } .legal-links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); } } @media (min-width: 60rem) { .site-header { position: sticky; inset-block-start: 0; } .header-inner { flex-wrap: nowrap; justify-content: space-between; block-size: 56px; padding-block: 0; } nav { inline-size: auto; } nav ul { flex-wrap: nowrap; } .sheet { border: 1px solid var(--line-strong); border-block-start: 0; } .section { padding: var(--space-18) var(--space-8); } .hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); padding-block: var(--space-28); } .work-row { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } .frame-decoration { display: block; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(to bottom, var(--line-strong) 0 1px, transparent 1px 8rem), repeating-linear-gradient(to bottom, var(--line-strong) 0 1px, transparent 1px 8rem); background-size: 4px 100%; background-position: left top, right top; background-repeat: no-repeat; } .company-block { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 80rem) { .header-inner, .sheet { margin-inline: auto; } } @media print { :root { color-scheme: light; --paper: #ffffff; --panel: #ffffff; --ink: #0c1a3a; --ink-2: #0c1a3a; --muted: #0c1a3a; --cobalt: #0c1a3a; --line: #6a7fa0; --line-strong: #6a7fa0; } body { font-size: 12pt; } .site-header { position: static; } .sheet { border: 0; margin: 0; } .section { padding: 1.5rem 0; } .hero { display: block; } .hero-grid, .frame-decoration, .skip-link { display: none; } .diagram-plate { margin-block-start: 1.5rem; max-inline-size: 40rem; } .seg, .node { animation: none; } .company-block { break-inside: avoid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .legal-page { max-inline-size: none; } .legal-page section { break-inside: avoid-page; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .875em; overflow-wrap: anywhere; } .button { color: var(--ink); background: transparent; border: 1px solid var(--ink); } mark { color: var(--ink); background: transparent; } } @media (forced-colors: active) { .square-list li::before { background: CanvasText; } }