/* CYNAPSE homepage — values from the CYNAPSE design system (tokens.json). */
:root {
  color-scheme: light dark;
  --color-logo: #1d2d3d;
  --color-text-reversed: #f2f2f3; /* text on the deep-steel band, both modes */
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-divider: #1d1f2029;
  --cyn-signal: #5FC6DC;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;
  --color-neutral-100: #f5f5f8;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-control-border: #1d1f204d;
  --color-secondary-border: #1d1f2066;
  --color-corner: #5980a6b3;
  --color-corner-reversed: #f2f2f399;
  --color-steel-tint: #5980a61a;
  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --space-1: 3.4px; --space-2: 6.8px; --space-3: 10.2px; --space-4: 13.6px; --space-6: 20.4px; --space-8: 27.2px;
  --page: 1120px;
  --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font: 400 16px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
img, svg { display: block; }
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-900); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: var(--color-accent-200); }
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: 8px; background: var(--color-bg); padding: 8px 12px; z-index: 10; }

/* Type */
.label { font-family: var(--font-mono); font-size: 11px; line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-neutral-700); }
.kicker { color: var(--color-accent-700); }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; margin: 0; }
.display { font-size: clamp(48px, 8vw, 72px); line-height: 0.88; letter-spacing: 0.03em; text-wrap: balance; }
.h2 { font-size: 38px; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.03em; }
.lead { font-size: 18px; line-height: 1.6; color: var(--color-neutral-800); max-width: 62ch; margin: 0; }

/* Header */
.site-head { border-bottom: 1px solid var(--color-divider); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: 72px; }
.lockup { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text); }
.lockup:hover { color: var(--color-text); }
.lockup .ink-stroke { stroke: var(--color-logo); }
.lockup .ink-fill { fill: var(--color-logo); }
.wordmark { font-family: var(--font-heading); font-weight: 600; font-size: 24px; letter-spacing: 0.10em; line-height: 1; }
.nav { display: flex; align-items: center; gap: var(--space-6); }
.nav a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-neutral-700); }
.nav a:hover { color: var(--color-text); }
.lang { display: inline-flex; border: 1px solid var(--color-secondary-border); }
.lang button { font: 11px/1 var(--font-mono); letter-spacing: 0.12em; padding: 8px 10px; min-height: 32px; background: transparent; border: 0; color: var(--color-neutral-700); cursor: pointer; }
.lang button + button { border-left: 1px solid var(--color-secondary-border); }
.lang button[aria-pressed="true"] { background: var(--color-accent-200); color: var(--color-accent-900); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-family: var(--font-heading); font-weight: 600; font-size: 16px; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.08em; padding: 10px 20px; border: 1px solid transparent; border-radius: 0; cursor: pointer; background: transparent; }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-700); border-color: var(--color-accent-700); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-800); border-color: var(--color-accent-800); }
.btn-secondary { color: var(--color-text); border-color: var(--color-secondary-border); }
.btn-secondary:hover { background: var(--color-steel-tint); border-color: var(--color-accent); color: var(--color-text); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Blueprint frame */
.frame { position: relative; border: 1px solid var(--color-divider); }
.frame > .corner { position: absolute; font: 12px/1 var(--font-mono); font-style: normal; color: var(--color-corner); pointer-events: none; }
.frame > .tl { top: -8px; left: -4px; } .frame > .tr { top: -8px; right: -4px; }
.frame > .bl { bottom: -8px; left: -4px; } .frame > .br { bottom: -8px; right: -4px; }
.frame-btn { display: inline-block; padding: 5px; border-color: transparent; }

/* Sections */
section { padding: 88px 0; }
.hero { padding: 96px 0 104px; }
.hero .wrap { display: grid; gap: var(--space-8); }
.hero .actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin-top: var(--space-4); }
.section-head { display: grid; gap: var(--space-4); margin-bottom: 48px; }
#servicios { border-top: 1px solid var(--color-divider); }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }
.card { padding: 28px; display: grid; gap: 14px; align-content: start; }
.card h3 { font-size: 28px; line-height: 1.1; letter-spacing: 0.03em; }
.card p { margin: 0; font-size: 15px; line-height: 1.625; color: var(--color-neutral-800); }
.card .meta { border-top: 1px solid var(--color-divider); padding-top: var(--space-3); font-family: var(--font-mono); font-size: 11px; color: var(--color-neutral-700); align-self: end; }

/* Product band: deep steel */
.band { background: var(--color-accent-900); color: var(--color-text-reversed); }
.band .label { color: var(--color-accent-300); }
.band .frame { border-color: var(--color-corner-reversed); }
.band .frame > .corner { color: var(--color-corner-reversed); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; counter-reset: step; }
.step { padding: 28px; display: grid; gap: 14px; align-content: start; }
.step h3 { font-size: 28px; line-height: 1.1; letter-spacing: 0.03em; }
.step p { margin: 0; font-size: 15px; line-height: 1.625; color: var(--color-text-reversed); }

/* Contact */
.contact .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.contact-mail { display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; }
.contact-mail a { font-size: 18px; font-weight: 500; }
.form { padding: 32px; display: grid; gap: 20px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: var(--space-2); }
.field input, .field textarea { font: 15px/1.5 var(--font-body); color: var(--color-text); background: var(--color-neutral-100); border: 1px solid var(--color-control-border); border-radius: 0; padding: 10px var(--space-3); width: 100%; min-height: 44px; }
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.field [aria-invalid="true"] { border-color: var(--color-text); border-width: 2px; }
.turnstile { min-height: 65px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; justify-content: space-between; }
.note { font-size: 13px; color: var(--color-neutral-700); margin: 0; }
.status { margin: 0; padding: var(--space-3) var(--space-4); font-size: 15px; border: 1px solid var(--color-divider); }
.status[hidden] { display: none; }
.status.ok { background: var(--color-accent-200); color: var(--color-accent-900); border-color: var(--color-accent-200); }
.status.err { background: var(--color-surface); color: var(--color-text); border-color: var(--color-text); }

/* Footer */
.site-foot { border-top: 1px solid var(--color-divider); padding: 32px 0; }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; justify-content: space-between; }
.site-foot .label { letter-spacing: 0.12em; }

@media (max-width: 820px) {
  .nav a { display: none; }
  section { padding: 64px 0; }
  .hero { padding: 64px 0 72px; }
  .contact .wrap { grid-template-columns: 1fr; gap: 32px; }
  .row { grid-template-columns: 1fr; }
  .form { padding: 24px; }
  .h2 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Dark mode: reversed palette, applied automatically from the OS setting. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-logo: #f2f2f3;
    --color-bg: #1d1f20;
    --color-surface: #26292b;
    --color-text: #f2f2f3;
    --color-divider: #f2f2f329;
    --color-neutral-100: #26292b;
    --color-neutral-700: #a9a9ad;
    --color-neutral-800: #cfcfd2;
    --color-control-border: #f2f2f34d;
    --color-secondary-border: #f2f2f366;
    --color-corner: #94bce3b3;
    --color-steel-tint: #94bce31f;
  }
  a { color: var(--color-accent-300); }
  a:hover { color: var(--color-accent-200); }
  ::selection { background: var(--color-accent-800); }
  .kicker { color: var(--color-accent-400); }
  .lang button[aria-pressed="true"] { background: var(--color-accent-800); color: var(--color-accent-200); }
  .btn-primary { background: var(--color-accent-400); border-color: var(--color-accent-400); color: var(--color-accent-900); }
  .btn-primary:hover { background: var(--color-accent-300); border-color: var(--color-accent-300); color: var(--color-accent-900); }
  .btn-primary:active { background: var(--color-accent-200); border-color: var(--color-accent-200); }
  .status.ok { background: var(--color-accent-800); color: var(--color-accent-200); border-color: var(--color-accent-800); }
}