@font-face {
  font-family: Montserrat;
  src: url("assets/montserrat.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --night: #07162c;
  --navy: #0b2d5b;
  --action: #075ad8;
  --ink: #10233d;
  --muted: #495d76;
  font-family: Montserrat, "Segoe UI", Arial, sans-serif;
  color-scheme: light;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

:focus-visible {
  outline: 3px solid #398cff;
  outline-offset: 4px;
}

[hidden] { display: none !important; }

.icon-library {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1.2em;
  height: 1.2em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skip-link:not(:focus) { clip-path: inset(50%); }

.site-nav [aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: #83b8ff;
  text-underline-offset: 6px;
}

@media (max-width: 900px) {
  .site-nav.is-collapsible {
    position: absolute;
    inset: 100% 0 auto;
    display: grid;
    gap: .125rem;
    padding: .75rem 1.25rem 1rem;
    border-bottom: 1px solid #456495;
    background: var(--night);
    box-shadow: 0 16px 24px #03112c30;
  }

  .site-nav.is-collapsible > a { padding: .625rem .75rem; }
  .site-nav.is-collapsible > a:last-child { justify-self: start; }
}

.eyebrow { color: #1457aa; }

.eyebrow > span {
  width: .55rem;
  height: .55rem;
  flex: none;
  transform: rotate(45deg);
  border: 1px solid currentColor;
  border-radius: 2px;
}

.hero-surface {
  background: radial-gradient(ellipse at 78% 43%, #123c74, transparent 54%),
    linear-gradient(145deg, var(--night) 35%, #0a284f);
}

.about-surface {
  background: radial-gradient(ellipse at 81% -8%, #173d75, transparent 77%), var(--night);
}

.contact-surface {
  background: radial-gradient(ellipse at 5% 10%, #eaf3ff, transparent 65%), white;
}

.hero-surface .eyebrow,
.about-surface .eyebrow { color: #a6cbff; }

.hero-mark {
  filter: drop-shadow(0 14px 22px #031027) drop-shadow(0 0 15px #63a4ff63);
}

.solution-map { container: solution-map / inline-size; }

.solution-map-art {
  max-width: 15rem;
  margin-inline: auto;
}

.solution-map-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin-top: .5rem;
}

.map-label {
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 2.75rem;
  gap: .375rem;
  padding: .5rem .625rem;
  border: 1px solid #74b5ff6b;
  border-radius: .5rem;
  background: #102b51ee;
  color: #d9eaff;
  font: 600 .76rem / 1.3 Montserrat, "Segoe UI", Arial, sans-serif;
  box-shadow: 0 6px 16px #0613276e;
}

.map-label .icon { color: #97c8ff; }

.map-label:is(:hover, :focus-visible) {
  border-color: #9bc9ff;
  background: #204a81;
}

@container solution-map (min-width: 450px) {
  .solution-map-art { max-width: none; }

  .solution-map-links {
    position: absolute;
    inset: 9% 0 9%;
    grid-template-columns: repeat(2, minmax(0, 38%));
    justify-content: space-between;
    align-content: space-between;
    margin-top: 0;
  }

  .solution-map-links > li { justify-self: start; }
  .solution-map-links > li:nth-child(even) { justify-self: end; }
}

.service-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -26% -8% -45% 51%;
  border-radius: 50%;
  background: repeating-radial-gradient(ellipse, transparent 0 18px, #3a82df 19px 20px, transparent 21px 35px);
  transform: rotate(-22deg);
  opacity: .075;
  pointer-events: none;
}

.plan-features li {
  position: relative;
  padding-inline-start: 1rem;
}

.plan-features li::before {
  content: "";
  position: absolute;
  inset: .64em auto auto 0;
  width: .34rem;
  height: .34rem;
  border-radius: 50%;
  background: var(--action);
}

.page-hero > div { position: relative; }

.page-hero > div::after {
  content: "";
  position: absolute;
  inset: -100px 0 -90px 61%;
  background: url("assets/mapa.svg") center / contain no-repeat;
  opacity: .32;
  pointer-events: none;
}

.page-hero > div > * { position: relative; z-index: 1; }
img.category-art { max-width: 4rem; }
.form-status:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}