@font-face {
  font-family:Montserrat;
  src:url('fonts/Montserrat-Regular.ttf');
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:Montserrat;
  src:url('fonts/Montserrat-Medium.ttf');
  font-weight:500;
  font-display:swap
}
@font-face {
  font-family:Montserrat;
  src:url('fonts/Montserrat-SemiBold.ttf');
  font-weight:600;
  font-display:swap
}
@font-face {
  font-family:Montserrat;
  src:url('fonts/Montserrat-Bold.ttf');
  font-weight:700;
  font-display:swap
}
@font-face {
  font-family:Montserrat;
  src:url('fonts/Montserrat-ExtraBold.ttf');
  font-weight:800;
  font-display:swap
}
:root {
  --blue:#01479b;
  --orange:#f06512;
  --raspberry:#c74481;
  --purple:#7c43ab;
  --ink:#172432;
  --muted:#606575;
  --line:#e6e7ec;
  --paper:#f7f7f8;
  --ease:cubic-bezier(.22,1,.36,1);
  --gutter:clamp(24px,5.55vw,88px)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:#fff;
  font:400 14px/1.6 Montserrat,Arial,sans-serif;
  color:var(--ink)
}
a {
  color:inherit;
  text-decoration:none
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
img {
  max-width:100%;
  display:block
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  line-height:1.1
}
svg {
  display:block
}
a,button {
  touch-action:manipulation
}
:focus-visible {
  outline:3px solid var(--purple);
  outline-offset:5px
}
.skip-link {
  position:fixed;
  top:-80px;
  left:20px;
  background:var(--blue);
  color:white;
  padding:12px;
  z-index:99
}
.skip-link:focus {
  top:12px
}
.content-width {
  width:calc(100% - var(--gutter)*2);
  max-width:1400px;
  margin-inline:auto
}
.site-header {
  height:70px;
  background:#fff
}
.header-inner {
  height:100%;
  width:calc(100% - var(--gutter)*2);
  max-width:1400px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:76px
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
  width:166px
}
.brand-mark {
  width:36px;
  height:36px;
  overflow:visible
}
.brand img {
  width:118px;
  height:auto;
  object-fit:contain
}
.brand-mark path {
  transform-box:fill-box;
  transform-origin:center;
  animation:layer-flow 4.8s ease-in-out infinite
}
.brand-mark path:nth-child(2) {
  animation-delay:-1.2s
}
.brand-mark path:nth-child(3) {
  animation-delay:-2.4s
}
.brand-mark path:nth-child(4) {
  animation-delay:-3.6s
}
@keyframes layer-flow {
  0%,100% {
    transform:translateX(-1.8px)
  }
  50% {
    transform:translateX(1.8px)
  }
}
.main-nav {
  display:flex;
  align-items:center;
  gap:25px;
  flex:1
}
.main-nav a {
  font-size:10px;
  font-weight:600;
  white-space:nowrap;
  position:relative;
  padding:8px 0
}
.main-nav a:last-child {
  margin-left:auto
}
.main-nav a:after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:2px;
  height:2px;
  background:var(--blue);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease)
}
.main-nav a:hover:after,.main-nav a[aria-current]:after {
  transform:scaleX(1)
}
.nav-toggle {
  display:none
}
.hero {
  display:grid;
  grid-template-columns:47.8% 52.2%;
  background:#f8f7f4;
  min-height:280px
}
.hero-copy {
  padding:18px 16px 10px max(var(--gutter),calc((100vw - 1400px)/2));
  align-self:center
}
.hero h1 {
  color:var(--blue);
  font-weight:800;
  font-size:clamp(44px,5.35vw,80px);
  letter-spacing:-1.7px;
  line-height:1.02;
  margin-bottom:14px
}
.hero-description {
  font-size:12.5px;
  line-height:1.45;
  color:var(--muted);
  margin-bottom:16px
}
.hero-actions {
  display:flex;
  gap:14px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:36px;
  padding:9px 24px;
  border:1px solid var(--blue);
  font-weight:600;
  font-size:12px;
  line-height:1.3;
  transition:background .25s,transform .3s var(--ease),box-shadow .3s
}
.hero-actions .button {
  min-height:31px;
  padding:7px 25px;
  font-size:10.5px
}
.primary {
  background:var(--blue);
  color:#fff
}
.outline {
  color:var(--blue);
  background:transparent
}
.button:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 16px #01479b18
}
.primary:hover {
  background:#00377d
}
.outline:hover {
  background:#edf3fa
}
.button:disabled {
  opacity:.65;
  cursor:wait
}
.hero-route {
  font-size:10.5px;
  font-weight:600;
  color:var(--blue);
  margin-top:16px
}
.hero-caption {
  font-size:8.5px;
  color:var(--muted);
  margin-top:4px
}
.hero-media {
  position:relative;
  min-height:280px;
  overflow:hidden
}
.hero-media>img {
  width:100%;
  height:100%;
  position:absolute;
  object-fit:cover;
  object-position:44% 50%
}
.handwritten {
  position:absolute;
  right:8%;
  bottom:16%;
  color:white;
  font-family:'Segoe Print','Comic Sans MS',cursive;
  font-size:16px;
  line-height:1.3;
  transform:rotate(-8deg);
  text-shadow:0 1px 6px #0009
}
.handwritten span {
  display:block;
  width:45px;
  margin:9px 0 0 33px;
  border-bottom:2px solid white;
  transform:rotate(-4deg)
}
.services {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin-top:6px
}
.service-card {
  display:grid;
  grid-template-columns:60% 40%;
  height:126px;
  color:white;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease)
}
.comprar {
  background:var(--orange)
}
.crear {
  background:var(--raspberry)
}
.aprender {
  background:var(--purple)
}
.mantener {
  background:var(--blue)
}
.service-copy {
  padding:10px 0 9px 12px;
  z-index:1;
  display:flex;
  flex-direction:column
}
.service-label {
  font-size:8px;
  line-height:1.4;
  margin-bottom:6px
}
.service-card h2 {
  font-size:19px;
  letter-spacing:-.4px;
  font-weight:800;
  line-height:1.03;
  margin-bottom:7px;
  transition:transform .5s var(--ease)
}
.service-copy p {
  font-size:9px;
  line-height:1.25;
  transition:transform .6s var(--ease)
}
.service-cta {
  font-size:9px;
  font-weight:500;
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap
}
.arrow {
  width:14px;
  height:14px;
  flex-shrink:0;
  transition:transform .4s var(--ease)
}
.service-photo {
  height:100%;
  transition:transform .9s var(--ease),filter .5s
}
.photo {
  background-image:url('images/applications.webp');
  background-size:300% 300%;
  background-repeat:no-repeat
}
.photo-spool {
  background-position:0 0
}
.photo-vase {
  background-position:50% 0
}
.photo-learn {
  background-position:100% 0
}
.photo-repair {
  background-position:0 50%
}
.photo-parts {
  background-position:50% 50%
}
.photo-education {
  background-position:100% 50%
}
.photo-home {
  background-position:0 100%
}
.photo-creative {
  background-position:50% 100%
}
.photo-prototype {
  background-position:100% 100%
}
.service-card:hover,.service-card:focus-visible {
  transform:translateY(-4px);
  box-shadow:0 12px 22px #11182022
}
.service-card:hover .service-photo,.service-card:focus-visible .service-photo {
  transform:scale(1.08)
}
.service-card:hover h2,.service-card:focus-visible h2 {
  transform:translateY(-2px)
}
.service-card:hover .arrow,.text-link:hover .arrow,.enterprise-band:hover .arrow {
  transform:translateX(4px)
}
.applications {
  display:grid;
  grid-template-columns:23% 77%;
  margin-top:18px
}
.eyebrow {
  display:block;
  font-size:8px;
  font-weight:500;
  margin:4px 0 9px
}
.application-intro h2 {
  font-size:20px;
  font-weight:800;
  letter-spacing:-.5px;
  line-height:1.03;
  margin-bottom:8px
}
.application-intro p {
  font-size:9px;
  color:var(--muted);
  line-height:1.45
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:9px;
  font-weight:600;
  color:var(--blue)
}
.application-intro .text-link {
  font-size:8px;
  margin-top:12px
}
.example-wrap {
  position:relative;
  min-width:0
}
.example-rail {
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
  scroll-snap-type:x mandatory;
  padding:0 1px 4px
}
.example-rail::-webkit-scrollbar {
  display:none
}
.example-card {
  flex:0 0 calc((100% - 32px)/5);
  min-width:0;
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
  scroll-snap-align:start;
  transition:box-shadow .3s
}
.example-photo {
  height:90px;
  transition:filter .4s,transform .6s var(--ease)
}
.example-card:hover .example-photo {
  filter:brightness(1.08);
  transform:scale(1.025)
}
.example-caption {
  padding:6px 8px 5px;
  background:white;
  position:relative
}
.example-caption h3 {
  font-size:8px;
  font-weight:600;
  line-height:1.3
}
.example-caption p {
  font-size:7.5px;
  color:var(--muted);
  white-space:nowrap
}
.rail-next {
  position:absolute;
  right:-23px;
  top:46px;
  border:1px solid var(--line);
  width:28px;
  height:28px;
  border-radius:50%;
  background:white;
  display:grid;
  place-items:center;
  box-shadow:0 2px 5px #0001;
  color:var(--muted);
  transition:transform .3s
}
.rail-next:hover {
  transform:translateX(2px)
}
.enterprise-band {
  background:#f3f3f4;
  display:flex;
  align-items:center;
  gap:28px;
  min-height:49px;
  border-radius:6px;
  margin-top:18px;
  margin-bottom:12px;
  padding:10px 26px
}
.enterprise-title {
  display:flex;
  align-items:center;
  gap:16px;
  color:var(--blue);
  font-size:12px;
  white-space:nowrap
}
.enterprise-title svg {
  width:27px;
  height:27px
}
.enterprise-description {
  color:var(--muted);
  font-size:9px;
  margin-left:50px
}
.enterprise-band>.text-link {
  margin-left:auto;
  white-space:nowrap
}
.site-footer {
  border-top:1px solid var(--line);
  width:calc(100% - var(--gutter)*2);
  max-width:1400px;
  margin:45px auto 0;
  padding:25px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px
}
.site-footer .brand {
  width:130px;
  gap:8px
}
.site-footer .brand-mark {
  width:26px;
  height:26px
}
.site-footer .brand img {
  width:93px
}
.site-footer p,.site-footer>span {
  font-size:9px;
  color:var(--muted);
  margin-top:9px
}
.site-footer nav {
  display:flex;
  gap:24px;
  font-size:10px
}
.page-main {
  max-width:1240px;
  margin:auto;
  padding:45px var(--gutter) 20px
}
.page-intro {
  margin-bottom:35px
}
.page-intro h1 {
  font-size:clamp(38px,4.5vw,64px);
  font-weight:800;
  letter-spacing:-1.4px;
  color:var(--blue);
  max-width:750px;
  margin-bottom:16px
}
.page-intro p {
  color:var(--muted);
  max-width:680px;
  font-size:14px
}
.back-link {
  font-size:11px;
  color:var(--muted);
  display:inline-block;
  margin-bottom:22px
}
.contact-layout {
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:48px;
  align-items:start
}
.contact-info h2 {
  font-size:22px;
  font-weight:800;
  margin-bottom:12px
}
.contact-info>p {
  color:var(--muted);
  font-size:12px;
  margin-bottom:22px
}
.contact-block {
  border-top:1px solid var(--line);
  padding:22px 0
}
.contact-block h3 {
  font-size:16px;
  margin-bottom:15px;
  color:var(--blue)
}
.contact-block a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  font-size:12px
}
.contact-block a span {
  color:var(--muted)
}
.contact-block .krea-logo {
  width:115px;
  margin-bottom:16px
}
.contact-block a:hover strong {
  color:var(--blue)
}
.form-panel {
  border:1px solid var(--line);
  border-radius:8px;
  padding:30px;
  background:white
}
.form-panel h2 {
  font-size:24px;
  letter-spacing:-.5px;
  font-weight:800;
  margin-bottom:10px
}
.form-panel>p {
  font-size:12px;
  color:var(--muted);
  margin-bottom:24px
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}
.field {
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0
}
.field>span {
  font-weight:600;
  font-size:11px
}
.field input,.field select,.field textarea {
  width:100%;
  border:1px solid #ccd1d9;
  border-radius:3px;
  padding:11px 12px;
  font-size:12px;
  background:#fff;
  color:var(--ink);
  transition:border-color .2s,box-shadow .2s
}
.field input:focus,.field select:focus,.field textarea:focus {
  border-color:var(--blue);
  box-shadow:0 0 0 3px #01479b0b;
  outline:none
}
.field textarea {
  resize:vertical;
  min-height:135px
}
.full {
  grid-column:1/-1
}
.field small,.form-note {
  font-size:10px;
  color:var(--muted)
}
.check-label {
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:11px;
  line-height:1.5
}
.check-label input {
  margin-top:3px;
  accent-color:var(--blue)
}
.form-note {
  margin-top:12px
}
.honeypot {
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  overflow:hidden
}
.alert {
  background:#edf3fa;
  border-left:3px solid var(--blue);
  padding:14px 16px;
  font-size:12px;
  margin-bottom:22px;
  overflow-wrap:anywhere
}
.alert.error {
  background:#fff3f3;
  border-color:#af3445;
  color:#8f2033
}
.alert.success {
  background:#edf8f3;
  border-color:#17734c;
  color:#14543b
}
.directory-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px
}
.directory-card {
  border:1px solid var(--line);
  padding:25px;
  transition:transform .4s var(--ease),box-shadow .4s;
  border-top:3px solid var(--blue)
}
.directory-card:hover {
  transform:translateY(-4px);
  box-shadow:0 10px 24px #01479b10
}
.directory-card h2 {
  font-size:20px;
  margin:12px 0
}
.directory-card p {
  font-size:12px;
  color:var(--muted);
  margin-bottom:20px
}
.directory-card .eyebrow {
  color:var(--blue)
}
.support-hero {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:42px;
  align-items:center;
  margin-bottom:40px
}
.support-hero .page-intro {
  margin:0
}
.support-photo {
  aspect-ratio:1;
  border-radius:6px
}
.support-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  margin:40px 0
}
.support-grid h2 {
  font-size:20px;
  margin-bottom:12px
}
.support-grid p {
  font-size:12px;
  color:var(--muted)
}
.support-process {
  background:var(--paper);
  padding:28px;
  border-radius:6px;
  margin-top:30px
}
.support-process h2 {
  font-size:23px;
  margin-bottom:20px
}
.support-process ol {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  padding:0;
  list-style:none;
  counter-reset:step
}
.support-process li {
  counter-increment:step;
  font-size:12px
}
.support-process li:before {
  content:'0' counter(step);
  display:block;
  color:var(--raspberry);
  font-size:22px;
  font-weight:700;
  margin-bottom:8px
}
.admin-shell {
  max-width:1080px;
  margin:40px auto;
  padding:0 28px
}
.admin-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:32px
}
.admin-top h1 {
  font-size:32px;
  font-weight:800;
  color:var(--blue)
}
.admin-top p {
  color:var(--muted);
  font-size:12px
}
.login-panel {
  max-width:460px;
  margin:55px auto;
  padding:35px;
  border:1px solid var(--line);
  border-radius:8px
}
.login-panel h1 {
  font-size:32px;
  color:var(--blue);
  font-weight:800;
  margin:25px 0 12px
}
.login-panel p {
  font-size:12px;
  color:var(--muted);
  margin-bottom:22px
}
.admin-grid {
  display:grid;
  grid-template-columns:1fr .5fr;
  gap:25px;
  align-items:start
}
.admin-grid h2 {
  font-size:20px;
  margin-bottom:18px
}
.admin-sidebar {
  background:var(--paper);
  border-radius:6px;
  padding:25px
}
.admin-sidebar p {
  font-size:12px;
  color:var(--muted);
  margin-bottom:15px
}
.admin-sidebar .field {
  margin-bottom:15px
}
.status-pill {
  display:inline-block;
  font-size:10px;
  padding:5px 9px;
  border-radius:20px;
  background:#edf3fa;
  color:var(--blue);
  margin-bottom:12px
}
.request-list {
  margin-top:30px
}
.request-list details {
  padding:16px 0;
  border-bottom:1px solid var(--line);
  font-size:12px
}
.request-list summary {
  cursor:pointer;
  font-weight:600
}
.request-list pre {
  white-space:pre-wrap;
  font:inherit;
  color:var(--muted);
  margin:12px 0
}
.request-list .button {
  font-size:10px;
  padding:6px 12px;
  min-height:30px
}
@media(min-width:1200px) {
  .site-header {
    height:90px
  }
  .brand {
    width:205px
  }
  .brand-mark {
    width:44px;
    height:44px
  }
  .brand img {
    width:145px
  }
  .main-nav a {
    font-size:12px
  }
  .main-nav {
    gap:32px
  }
  .hero {
    min-height:380px
  }
  .hero-copy {
    padding-block:30px
  }
  .hero-media {
    min-height:380px
  }
  .hero-description {
    font-size:16px
  }
  .hero-actions .button {
    font-size:13px;
    min-height:42px
  }
  .hero-route {
    font-size:13px;
    margin-top:22px
  }
  .hero-caption {
    font-size:11px
  }
  .handwritten {
    font-size:22px
  }
  .services {
    gap:12px;
    margin-top:8px
  }
  .service-card {
    height:170px
  }
  .service-copy {
    padding:15px 0 13px 16px
  }
  .service-label {
    font-size:10px;
    margin-bottom:8px
  }
  .service-card h2 {
    font-size:25px;
    margin-bottom:10px
  }
  .service-copy p,.service-cta {
    font-size:12px
  }
  .applications {
    margin-top:25px
  }
  .eyebrow {
    font-size:10px
  }
  .application-intro h2 {
    font-size:26px
  }
  .application-intro p {
    font-size:12px
  }
  .application-intro .text-link {
    font-size:10px
  }
  .example-photo {
    height:120px
  }
  .example-caption h3 {
    font-size:10px
  }
  .example-caption p {
    font-size:9px
  }
  .example-caption {
    padding:9px 10px
  }
  .rail-next {
    top:58px
  }
  .enterprise-band {
    min-height:65px;
    margin-top:25px
  }
  .enterprise-title {
    font-size:15px
  }
  .enterprise-description,.enterprise-band .text-link {
    font-size:11px
  }
}
@media(max-width:900px) {
  .header-inner {
    gap:30px
  }
  .main-nav {
    gap:18px
  }
  .main-nav a {
    font-size:9px
  }
  .brand {
    width:150px
  }
  .brand img {
    width:104px
  }
  .hero h1 {
    font-size:5.35vw
  }
  .hero-description {
    font-size:11px
  }
  .hero-actions {
    gap:9px
  }
  .hero-actions .button {
    padding-inline:14px;
    font-size:9px
  }
  .service-card h2 {
    font-size:16px
  }
  .service-copy {
    padding-left:9px
  }
  .service-label {
    font-size:7px
  }
  .service-copy p,.service-cta {
    font-size:8px
  }
  .enterprise-description {
    margin-left:0
  }
  .applications {
    grid-template-columns:25% 75%
  }
  .application-intro h2 {
    font-size:18px
  }
  .example-caption {
    padding-inline:5px
  }
  .example-caption p {
    font-size:6.5px
  }
  .contact-layout {
    gap:25px
  }
  .form-panel {
    padding:22px
  }
  .admin-grid {
    grid-template-columns:1fr
  }
}
@media(max-width:680px) {
  :root {
    --gutter:24px
  }
  .site-header {
    height:72px
  }
  .header-inner {
    justify-content:space-between
  }
  .brand {
    width:165px
  }
  .brand img {
    width:118px
  }
  .nav-toggle {
    display:flex;
    flex-direction:column;
    gap:5px;
    border:0;
    padding:9px;
    background:transparent
  }
  .nav-toggle span {
    width:22px;
    height:2px;
    background:var(--blue);
    transition:transform .3s
  }
  .nav-toggle[aria-expanded=true] span:first-child {
    transform:translateY(7px) rotate(45deg)
  }
  .nav-toggle[aria-expanded=true] span:nth-child(2) {
    opacity:0
  }
  .nav-toggle[aria-expanded=true] span:last-child {
    transform:translateY(-7px) rotate(-45deg)
  }
  .main-nav {
    display:none;
    position:absolute;
    top:72px;
    left:0;
    right:0;
    background:white;
    padding:15px 24px 24px;
    z-index:20;
    box-shadow:0 15px 20px #17243212
  }
  .main-nav.is-open {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:2px
  }
  .main-nav a {
    font-size:13px;
    padding:10px 0
  }
  .main-nav a:last-child {
    margin-left:0
  }
  .hero {
    grid-template-columns:1fr
  }
  .hero-copy {
    padding:28px 24px 25px
  }
  .hero h1 {
    font-size:clamp(39px,10vw,61px);
    letter-spacing:-1.4px;
    margin-bottom:19px
  }
  .hero-description {
    font-size:12px
  }
  .hero-actions .button {
    font-size:11px;
    padding:10px 16px;
    min-height:38px
  }
  .hero-route {
    font-size:11px;
    margin-top:20px
  }
  .hero-caption {
    font-size:10px
  }
  .hero-media {
    min-height:0;
    aspect-ratio:1.7
  }
  .hero-media>img {
    object-position:50% 50%
  }
  .handwritten {
    font-size:15px;
    right:9%;
    bottom:18%
  }
  .services {
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:16px
  }
  .service-card {
    height:154px;
    grid-template-columns:61% 39%
  }
  .service-copy {
    padding:12px 0 12px 10px
  }
  .service-label {
    font-size:8px;
    margin-bottom:9px
  }
  .service-card h2 {
    font-size:clamp(17px,4.2vw,24px);
    margin-bottom:10px
  }
  .service-copy p {
    font-size:9px
  }
  .service-cta {
    font-size:8px;
    gap:3px
  }
  .service-cta .arrow {
    width:12px
  }
  .applications {
    display:block;
    margin-top:28px
  }
  .application-intro {
    margin-bottom:20px
  }
  .application-intro h2 {
    font-size:27px
  }
  .application-intro p {
    font-size:12px
  }
  .eyebrow {
    font-size:9px
  }
  .application-intro .text-link {
    font-size:10px;
    margin-top:14px
  }
  .example-card {
    flex-basis:calc((100% - 10px)/2)
  }
  .example-rail {
    gap:10px
  }
  .example-photo {
    height:125px
  }
  .example-caption {
    padding:10px
  }
  .example-caption h3 {
    font-size:11px
  }
  .example-caption p {
    font-size:9px
  }
  .rail-next {
    right:-13px;
    top:55px;
    width:32px;
    height:32px
  }
  .enterprise-band {
    padding:18px;
    gap:14px;
    align-items:flex-start;
    flex-wrap:wrap;
    margin-top:24px
  }
  .enterprise-title {
    font-size:14px;
    flex-basis:100%
  }
  .enterprise-description {
    font-size:11px;
    flex-basis:100%
  }
  .enterprise-band>.text-link {
    font-size:11px;
    margin-left:43px
  }
  .site-footer {
    margin-top:35px;
    flex-wrap:wrap
  }
  .site-footer nav {
    flex-wrap:wrap;
    gap:15px;
    font-size:11px
  }
  .site-footer>span {
    flex-basis:100%;
    margin:0
  }
  .page-main {
    padding-top:24px
  }
  .page-intro h1 {
    font-size:39px
  }
  .page-intro p {
    font-size:13px
  }
  .contact-layout {
    grid-template-columns:1fr
  }
  .contact-info {
    order:2
  }
  .form-grid {
    gap:15px
  }
  .form-panel {
    padding:23px 19px
  }
  .field input,.field select,.field textarea {
    font-size:16px;
    padding:10px
  }
  .field {
    grid-column:1/-1
  }
  .directory-grid,.support-grid,.support-hero {
    grid-template-columns:1fr
  }
  .support-hero {
    gap:28px
  }
  .support-photo {
    aspect-ratio:1.45
  }
  .support-process ol {
    grid-template-columns:1fr;
    gap:20px
  }
  .login-panel {
    margin:25px 20px;
    padding:25px
  }
  .admin-shell {
    padding:0 20px
  }
  .admin-top {
    gap:20px
  }
  .admin-top h1 {
    font-size:25px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
html {
  scrollbar-width:none
}
html::-webkit-scrollbar {
  width:0
}
.header-inner {
  padding-top:15px
}
.hero-route {
  margin-top:12px
}
.service-photo {
  background-size:auto 300%
}
.example-photo {
  background-size:300% auto
}
.support-photo {
  background-size:300% auto
}
.support-hero .hero-actions {
  margin-top:22px
}
@media(max-width:680px) {
  .header-inner {
    padding-top:0
  }
  .hero-route {
    margin-top:20px
  }
}
.photo {
  container-type:size;
  background-image:none;
  position:relative;
  overflow:hidden
}
.photo::before {
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:max(100cqw,100cqh);
  height:max(100cqw,100cqh);
  transform:translate(-50%,-50%);
  background-image:url('images/applications.webp');
  background-size:300% 300%;
  background-position:inherit;
  background-repeat:no-repeat
}
.hero h1 {
  margin-bottom:12px
}
.hero-description {
  margin-bottom:14px
}
.service-card.mantener {
  grid-template-columns:65% 35%
}
@media(max-width:680px) {
  .hero h1 {
    margin-bottom:19px
  }
  .hero-description {
    margin-bottom:16px
  }
  .service-card {
    grid-template-columns:70% 30%
  }
  .service-card.mantener {
    grid-template-columns:72% 28%
  }
  .service-card.mantener h2 {
    font-size:clamp(14px,4vw,20px)
  }
}
@media(max-width:380px) {
  .services {
    grid-template-columns:1fr
  }
  .service-card,.service-card.mantener {
    height:126px;
    grid-template-columns:60% 40%
  }
  .service-card h2,.service-card.mantener h2 {
    font-size:20px
  }
  .service-copy {
    padding:10px 12px
  }
  .service-copy p {
    font-size:10px
  }
  .service-cta {
    font-size:10px
  }
  .service-label {
    margin-bottom:6px
  }
}
@media(max-width:680px){.admin-top{flex-wrap:wrap;align-items:flex-start}.admin-top>div{min-width:0}}
.skip-link:not(:focus){clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
@keyframes layer-flow{0%,100%{transform:translateX(-6px)}50%{transform:translateX(6px)}}
/* Align the desktop gutters with the supplied 1025px reference. */
@media(min-width:960px) and (max-width:1280px){
 .main-nav a:last-child{margin-right:40px}
 .services{width:calc(100% - var(--gutter)*2 + 6px);margin-left:var(--gutter)}
 .applications{width:calc(100% - var(--gutter)*2 + 23px);margin-left:calc(var(--gutter) - 5px)}
 .enterprise-band{width:calc(100% - var(--gutter)*2 + 30px)}
}

/* Brand identities and the shared ecosystem navigation. */
.main-nav a:last-child { margin-left:0; margin-right:0; }
.main-nav .nav-contact { margin-left:auto; }
.contact-brand,.ecosystem-brand { width:210px; margin-bottom:20px; }
.contact-brand img,.ecosystem-brand img { width:160px; }
.directory-card { display:flex; flex-direction:column; }
.directory-card>.text-link { margin-top:auto; }
.directory-identity { height:110px; display:flex; align-items:center; margin:12px 0 4px; }
.directory-brand { width:210px; }
.directory-brand img { width:160px; }
.directory-logo { width:auto; max-width:100%; height:auto; max-height:105px; object-fit:contain; object-position:left center; }
.directory-logo.digital-logo { width:230px; }
.directory-icon { width:62px; height:62px; display:grid; place-items:center; color:var(--blue); }
.directory-icon svg { width:58px; height:58px; }
.directory-sigma,.directory-ig { font-size:58px; font-weight:600; line-height:1; }
@media(max-width:800px) {
 .site-header { height:72px; }
 .header-inner { justify-content:space-between; padding-top:0; }
 .nav-toggle { display:flex; flex-direction:column; gap:5px; border:0; padding:9px; background:transparent; }
 .nav-toggle span { width:22px; height:2px; background:var(--blue); transition:transform .3s; }
 .nav-toggle[aria-expanded=true] span:first-child { transform:translateY(7px) rotate(45deg); }
 .nav-toggle[aria-expanded=true] span:nth-child(2) { opacity:0; }
 .nav-toggle[aria-expanded=true] span:last-child { transform:translateY(-7px) rotate(-45deg); }
 .main-nav { display:none; position:absolute; top:72px; left:0; right:0; background:white; padding:15px 24px 24px; z-index:20; box-shadow:0 15px 20px #17243212; }
 .main-nav.is-open { display:flex; flex-direction:column; align-items:stretch; gap:2px; }
 .main-nav a { font-size:13px; padding:10px 0; }
 .main-nav .nav-contact { margin-left:0; }
}

/* Calculators use the same directory cards, typography and controls as the ecosystem. */
.calculator-tools {
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:24px;
}
.calculator-tool {
 min-width:0;
 padding:30px;
}
.calculator-tool h2 {
 font-size:24px;
 font-weight:800;
 letter-spacing:-.5px;
 margin:12px 0 16px;
}
.calculator-tool p {
 font-size:13px;
 line-height:1.7;
}
.calculator-icon {
 width:58px;
 height:58px;
 color:var(--blue);
 margin-bottom:20px;
}
.calculator-icon svg {
 width:100%;
 height:100%;
 stroke:currentColor;
 stroke-width:2;
 stroke-linecap:round;
 stroke-linejoin:round;
}
.calculator-local { border-top-color:var(--orange); }
.calculator-local .calculator-icon,.calculator-local .eyebrow { color:var(--orange); }
.calculator-features {
 padding:0;
 margin:0 0 28px;
 list-style:none;
 font-size:12px;
 line-height:1.5;
}
.calculator-features li {
 padding:8px 0 8px 21px;
 position:relative;
}
.calculator-features li::before {
 content:'';
 position:absolute;
 top:13px;
 left:2px;
 width:9px;
 height:5px;
 border-left:2px solid var(--blue);
 border-bottom:2px solid var(--blue);
 transform:rotate(-45deg);
}
.calculator-local .calculator-features li::before { border-color:var(--orange); }
.calculator-action {
 align-self:flex-start;
 margin-top:auto;
}
.calculator-action .arrow { flex-shrink:0; }
.calculator-action:hover .arrow { transform:translateX(4px); }
.calculator-links {
 display:flex;
 flex-wrap:wrap;
 gap:14px 24px;
 padding-top:25px;
 margin-top:30px;
 border-top:1px solid var(--line);
 font-size:11px;
 color:var(--muted);
}
.calculator-links a:hover,.calculator-links a[aria-current] { color:var(--blue); }
@media(max-width:680px) {
 .calculator-tools { grid-template-columns:1fr; gap:20px; }
 .calculator-tool { padding:24px; }
 .calculator-tool h2 { font-size:23px; }
 .calculator-action { max-width:100%; font-size:11px; }
}