@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Heebo:wght@300;400;500;700;800;900&family=Assistant:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Frank+Ruhl+Libre:wght@500;700;900&display=swap');

:root {
  color-scheme: dark;
  --bg: #0C1018;
  --bg-2: #141822;
  --surface: #1A1F2B;
  --surface-2: #232938;
  --rule: rgba(180, 188, 210, 0.10);
  --rule-strong: rgba(180, 188, 210, 0.20);
  --ink: #E0DACE;
  --ink-2: #A0A6B5;
  --muted: #707789;
  --primary: #2570DB;
  --primary-dark: #1F58B0;
  --whatsapp: #25D366;
  --whatsapp-dark: #1AAE55;
  --email: #2570DB;
  --email-dark: #1F58B0;
  --phone: #FF7A1A;
  --phone-dark: #C75A0C;
  --button-lift: translateY(-2px);
  --display: 'Heebo', 'Space Grotesk', system-ui, sans-serif;
  --sans: 'Assistant', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 0%, rgba(37,112,219,.20), transparent 34rem),
    radial-gradient(circle at 86% 12%, rgba(159,92,255,.13), transparent 32rem),
    linear-gradient(180deg, var(--bg), #080B11 70%);
  line-height: 1.75;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: #fff; }
a:visited { color: inherit; }
.wrap { width: min(980px, calc(100% - 32px)); margin: auto; }
header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--rule);
  background: rgba(12,16,24,.82);
  backdrop-filter: blur(14px);
}
nav {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.brand {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: .04em;
}
.navlinks { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
main { padding: 56px 0 78px; }
.crumbs, .eyebrow {
  color: var(--primary);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
}
h1 {
  font-family: var(--display);
  font-size: clamp(38px, 6vw, 78px);
  line-height: 1.04;
  letter-spacing: 0;
  margin: 14px 0 20px;
  max-width: 920px;
}
h2 {
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.18;
  margin: 44px 0 12px;
}
h3 { font-size: 21px; margin: 28px 0 8px; }
p, li { font-size: 18px; color: var(--ink-2); }
.lead { font-size: 21px; max-width: 820px; color: var(--ink-2); margin: 0 0 30px; }
.note, article, .cta {
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 20px 70px rgba(0,0,0,.22);
}
.note { padding: 22px; margin: 30px 0; color: var(--ink-2); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
article { padding: 24px; min-height: 100%; }
article h2 { font-size: 24px; margin: 0 0 12px; }
article p { margin: 0 0 18px; }
article a { color: var(--primary); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.cta { margin-top: 48px; padding: 26px; }
.cta h2 { margin-top: 0; }
.contact-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--email-dark) !important;
  border: 1px solid var(--email) !important;
  color: #fff !important;
  font-weight: 800;
  text-decoration: none !important;
  opacity: 1 !important;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.button:hover,
.button:focus-visible { transform: var(--button-lift); background: var(--email) !important; border-color: color-mix(in srgb, var(--email) 72%, #fff) !important; color: #fff !important; box-shadow: 0 0 16px rgba(37,112,219,.46), 0 0 42px rgba(37,112,219,.24) !important; }
.button--whatsapp { background: var(--whatsapp-dark) !important; border-color: var(--whatsapp) !important; color: #fff !important; }
.button--whatsapp:hover,
.button--whatsapp:focus-visible { background: var(--whatsapp) !important; border-color: color-mix(in srgb, var(--whatsapp) 72%, #fff) !important; box-shadow: 0 0 16px rgba(37,211,102,.48), 0 0 42px rgba(37,211,102,.26) !important; color: #fff !important; }
.button--phone { background: var(--phone-dark) !important; border-color: var(--phone) !important; color: #fff !important; }
.button--phone:hover,
.button--phone:focus-visible { background: var(--phone) !important; border-color: color-mix(in srgb, var(--phone) 72%, #fff) !important; box-shadow: 0 0 16px rgba(255,122,26,.48), 0 0 42px rgba(255,122,26,.26) !important; color: #fff !important; }
.button:visited { color: #fff !important; }
footer { border-top: 1px solid var(--rule); padding: 26px 0; color: var(--muted); font-size: 14px; }
footer a { color: var(--ink-2); }
@media (max-width: 820px) {
  nav { align-items: flex-start; flex-direction: column; padding: 16px 0; }
  .grid { grid-template-columns: 1fr; }
  .contact-actions { flex-direction: column; }
  .button { width: 100%; }
}