:root{--tech:#c5a059;--tech-soft:rgba(197,160,89,.12);--service-gold:#c5a059}
body.services-page{background:#050505}
.services-page .site-header{position:fixed}.services-page .desktop-nav a[aria-current=page]{color:#fff}.services-page .desktop-nav a[aria-current=page]::after{transform:scaleX(1)}
.services-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr);align-items:center;min-height:92svh;max-width:1440px;margin:auto;padding:150px max(28px,5vw) 80px;overflow:hidden}
.services-hero::before{position:absolute;z-index:-1;inset:0;content:"";background:radial-gradient(circle at 78% 42%,rgba(197,160,89,.09),transparent 34%),radial-gradient(circle at 15% 60%,rgba(197,160,89,.06),transparent 30%)}
.services-hero__copy{max-width:800px}.services-hero h1{max-width:900px;font-size:clamp(3.1rem,6vw,6.5rem)}.services-hero h1 em{color:var(--tech)}
.services-hero__lead{max-width:690px;color:#aeb6c0;font-size:clamp(1rem,1.5vw,1.22rem);line-height:1.75}.services-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.services-hero__visual{position:relative;min-height:560px}.system-map{position:absolute;inset:4%;border:1px solid rgba(255,255,255,.08);border-radius:50%;background:radial-gradient(circle,rgba(197,160,89,.10),rgba(5,5,5,.15) 42%,transparent 66%)}
.system-map::before,.system-map::after{position:absolute;inset:15%;content:"";border:1px dashed rgba(197,160,89,.2);border-radius:50%;animation:map-spin 24s linear infinite}.system-map::after{inset:31%;border-style:solid;border-color:rgba(197,160,89,.22);animation-direction:reverse;animation-duration:17s}
.system-map__core{position:absolute;z-index:2;top:50%;left:50%;display:grid;place-items:center;width:150px;height:150px;border:1px solid rgba(197,160,89,.45);border-radius:50%;background:rgba(5,5,5,.85);box-shadow:0 0 70px rgba(197,160,89,.14);transform:translate(-50%,-50%)}.system-map__core b{font-size:2rem}.system-map__core small{color:var(--tech);font-size:.55rem;letter-spacing:.18em}
.system-node{position:absolute;z-index:3;display:grid;gap:3px;min-width:110px;padding:12px 14px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(8,10,13,.88);box-shadow:0 18px 50px rgba(0,0,0,.35);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}.system-node small{color:#707985;font-size:.5rem}.system-node:nth-of-type(2){top:10%;left:42%}.system-node:nth-of-type(3){top:37%;right:-2%}.system-node:nth-of-type(4){right:8%;bottom:11%}.system-node:nth-of-type(5){bottom:8%;left:10%}.system-node:nth-of-type(6){top:30%;left:-4%}
.services-signal{display:grid;grid-template-columns:repeat(4,1fr);max-width:1280px;margin:0 auto;padding:0 28px 80px}.services-signal article{padding:22px;border-left:1px solid rgba(255,255,255,.1)}.services-signal span{display:block;margin-bottom:9px;color:var(--tech);font-size:.65rem;letter-spacing:.16em}.services-signal strong{font-size:clamp(.85rem,1.2vw,1rem)}
.svc-section{position:relative;max-width:1280px;margin:auto;padding:110px 28px}.svc-index{display:flex;gap:12px;margin-bottom:36px;color:#6d7580;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase}.svc-index span{color:var(--tech)}
.svc-heading{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:60px;align-items:end;margin-bottom:52px}.svc-heading h2{margin:0;font-size:clamp(2.4rem,4.8vw,5rem);line-height:1.03}.svc-heading h2 em{color:var(--tech)}.svc-heading>p{margin:0;color:#969faa;line-height:1.8}
.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.service-card{position:relative;min-height:390px;padding:34px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012));overflow:hidden;transition:border-color .3s,transform .3s}.service-card:hover{border-color:rgba(197,160,89,.35);transform:translateY(-4px)}.service-card::after{position:absolute;right:-60px;bottom:-80px;width:230px;height:230px;content:"";border:1px solid rgba(197,160,89,.12);border-radius:50%}.service-card__top{display:flex;justify-content:space-between;color:#707985;font-size:.65rem;letter-spacing:.16em}.service-card__mark{display:grid;place-items:center;width:58px;height:58px;margin:54px 0 24px;border:1px solid rgba(197,160,89,.3);border-radius:14px;color:var(--tech);background:rgba(197,160,89,.05);font-weight:800}.service-card h3{font-size:clamp(1.45rem,2.2vw,2rem)}.service-card p{max-width:570px;color:#929ba6;line-height:1.7}.service-card ul{display:flex;flex-wrap:wrap;gap:7px;margin:24px 0 0;padding:0;list-style:none}.service-card li{padding:7px 10px;border:1px solid rgba(255,255,255,.09);border-radius:99px;color:#bcc3ca;font-size:.65rem}
.architecture-panel{display:grid;grid-template-columns:.82fr 1.18fr;gap:18px}.architecture-copy,.architecture-flow{padding:36px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(255,255,255,.025)}.architecture-copy h3{font-size:clamp(1.8rem,3vw,3rem)}.architecture-copy p{color:#939ca7;line-height:1.8}.architecture-copy a{color:var(--tech);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.architecture-flow{display:grid;gap:10px}.flow-row{display:grid;grid-template-columns:50px 1fr auto;align-items:center;gap:18px;padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#080a0d}.flow-row>span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#050505;background:var(--tech);font-weight:800}.flow-row b{font-size:.83rem}.flow-row small{color:#6f7884;font-size:.62rem}.flow-row>i{color:var(--service-gold);font-style:normal}
.demo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.demo-card{position:relative;display:flex;min-height:500px;padding:34px;border:1px solid rgba(255,255,255,.1);border-radius:20px;overflow:hidden;background:#090909;isolation:isolate}.demo-card::before{position:absolute;z-index:-2;inset:0;content:"";background:linear-gradient(180deg,rgba(5,5,5,.08),rgba(5,5,5,.95) 78%)}.demo-card::after{position:absolute;z-index:-3;inset:0;content:"";background-image:var(--demo-image);background-size:cover;background-position:center;filter:saturate(.82);transition:transform .8s cubic-bezier(.22,1,.36,1)}.demo-card:hover::after{transform:scale(1.04)}.demo-card__content{align-self:end;width:100%}.demo-card__tag{display:inline-flex;padding:7px 9px;border:1px solid rgba(197,160,89,.3);border-radius:99px;color:var(--tech);background:rgba(5,5,5,.72);font-size:.58rem;letter-spacing:.15em;text-transform:uppercase}.demo-card h3{margin:18px 0 10px;font-size:clamp(1.8rem,3vw,3rem)}.demo-card p{max-width:540px;color:#b0b7bf;line-height:1.65}.demo-card__features{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.demo-card__features span{padding:7px 10px;border:1px solid rgba(255,255,255,.12);border-radius:99px;background:rgba(5,5,5,.62);font-size:.62rem}.demo-card__link{display:flex;justify-content:space-between;align-items:center;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.demo-card__link b{color:var(--tech);font-size:1.2rem}
.proof-band{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;border:1px solid rgba(255,255,255,.1);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.1)}.proof-band article{padding:32px;background:#070707}.proof-band small{display:block;margin-bottom:18px;color:var(--tech);font-size:.58rem;letter-spacing:.15em;text-transform:uppercase}.proof-band strong{display:block;margin-bottom:10px;font-size:1.05rem}.proof-band p{margin:0;color:#7f8994;font-size:.82rem;line-height:1.65}
.services-cta{position:relative;max-width:1280px;margin:50px auto 110px;padding:90px max(28px,7vw);border:1px solid rgba(197,160,89,.18);border-radius:26px;background:radial-gradient(circle at 80%,rgba(197,160,89,.1),transparent 36%),linear-gradient(135deg,#090b0e,#050505);overflow:hidden}.services-cta h2{max-width:850px;font-size:clamp(2.5rem,5vw,5.2rem)}.services-cta h2 em{color:var(--tech)}.services-cta p{max-width:650px;color:#9ca5af;line-height:1.8}.services-cta .button{margin-top:20px}
@keyframes map-spin{to{transform:rotate(360deg)}}
@media(max-width:980px){.services-hero{grid-template-columns:1fr;padding-top:135px}.services-hero__visual{min-height:470px}.svc-heading,.architecture-panel{grid-template-columns:1fr}.services-signal{grid-template-columns:repeat(2,1fr)}.desktop-cta{display:none}.demo-card{min-height:460px}}
@media(max-width:720px){.services-hero{min-height:auto;padding:130px 20px 50px}.services-hero h1{font-size:clamp(2.7rem,13vw,4.2rem)}.services-hero__actions{flex-direction:column}.services-hero__visual{min-height:390px}.system-node{min-width:88px;padding:9px;font-size:.58rem}.services-signal{grid-template-columns:1fr;padding:0 20px 55px}.svc-section{padding:80px 20px}.svc-heading{gap:20px}.service-grid,.demo-grid,.proof-band{grid-template-columns:1fr}.service-card{min-height:auto;padding:26px}.service-card__mark{margin-top:38px}.demo-card{min-height:520px;padding:24px}.architecture-copy,.architecture-flow{padding:24px}.flow-row{grid-template-columns:42px 1fr}.flow-row>i{display:none}.services-cta{margin:30px 20px 80px;padding:60px 24px}.site-footer{margin-top:0}}
@media(prefers-reduced-motion:reduce){.system-map::before,.system-map::after{animation:none}}
.demo-card[href="maquinados.html"]::after,.demo-card[href="/maquinados"]::after{background-image:url('/assets/images/demos/maquinados-hero.webp')!important}.demo-card[href="barberia.html"]::after,.demo-card[href="/barberia"]::after{background-image:url('/assets/images/demos/barberia-hero.webp')!important}
.demo-card[href="clinica.html"]::after,.demo-card[href="/clinica"]::after{background-image:url('/assets/images/demos/clinica-hero.webp')!important}.demo-card[href="suplementos.html"]::after,.demo-card[href="/suplementos"]::after{background-image:url('/assets/images/demos/suplementos-hero.webp')!important}

/* ==========================================================================
   SQL 360 & WEBASSEMBLY DEMO STYLES (PREMIUM SERVICES INLINE)
   ========================================================================== */
.service-card::after,
.demo-card::before,
.demo-card::after {
  pointer-events: none !important;
}

.service-card--sql {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: auto !important;
  padding: 38px 42px !important;
  border: 1px solid rgba(0, 210, 255, 0.45) !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(0, 210, 255, 0.09) 0%, rgba(9, 13, 18, 0.97) 65%) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.5), inset 0 0 35px rgba(0, 210, 255, 0.06) !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
}

.service-card--sql:hover {
  border-color: #00d2ff !important;
  box-shadow: 0 20px 60px rgba(0, 210, 255, 0.3), inset 0 0 45px rgba(0, 210, 255, 0.1) !important;
  transform: translateY(-4px) !important;
}

.service-card--sql .service-card__mark {
  border-color: rgba(0, 210, 255, 0.5) !important;
  color: #00d2ff !important;
  background: rgba(0, 210, 255, 0.12) !important;
  box-shadow: 0 0 22px rgba(0, 210, 255, 0.25) !important;
  margin: 24px 0 16px !important;
}

.service-card--sql h3 {
  font-size: clamp(1.6rem, 2.8vw, 2.4rem) !important;
  color: #ffffff !important;
  margin-bottom: 12px !important;
}

.service-card--sql p {
  color: #a0acb9 !important;
  font-size: 1.05rem !important;
  max-width: 820px !important;
  margin-bottom: 20px !important;
}

.service-card--sql ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 0 28px 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.service-card--sql ul li {
  padding: 8px 14px !important;
  border: 1px solid rgba(0, 210, 255, 0.3) !important;
  border-radius: 99px !important;
  color: #e0f7fc !important;
  background: rgba(0, 210, 255, 0.08) !important;
  font-size: 0.76rem !important;
}

.service-card__actions {
  position: relative !important;
  z-index: 20 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-top: 10px !important;
  pointer-events: auto !important;
}

.btn-sql-demo {
  position: relative !important;
  z-index: 20 !important;
  pointer-events: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 14px 26px !important;
  background: linear-gradient(135deg, #00d2ff 0%, #0088cc 100%) !important;
  border: 1px solid #00d2ff !important;
  border-radius: 10px !important;
  color: #020a10 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 6px 24px rgba(0, 210, 255, 0.35) !important;
}

.btn-sql-demo:hover {
  background: linear-gradient(135deg, #53e4ff 0%, #00a6ff 100%) !important;
  color: #010609 !important;
  box-shadow: 0 10px 35px rgba(0, 210, 255, 0.55) !important;
  transform: translateY(-2px) !important;
}

.btn-sql-quote {
  position: relative !important;
  z-index: 20 !important;
  pointer-events: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 14px 26px !important;
  background: rgba(255, 215, 0, 0.1) !important;
  border: 1px solid rgba(255, 215, 0, 0.5) !important;
  border-radius: 10px !important;
  color: #ffd700 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 18px rgba(255, 215, 0, 0.15) !important;
}

.btn-sql-quote:hover {
  background: rgba(255, 215, 0, 0.25) !important;
  border-color: #ffd700 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 30px rgba(255, 215, 0, 0.4) !important;
  transform: translateY(-2px) !important;
}

.demo-card--sql {
  grid-column: 1 / -1 !important;
  min-height: auto !important;
  padding: 0 !important;
  border: 1px solid rgba(0, 210, 255, 0.45) !important;
  border-radius: 24px !important;
  background: #06090d !important;
  overflow: hidden !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
  position: relative !important;
  z-index: 1 !important;
}

.demo-card--sql::before,
.demo-card--sql::after {
  display: none !important;
}

.sql-demo-card-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 440px;
}

.sql-demo-card-visual {
  position: relative;
  background: linear-gradient(135deg, #050b14 0%, #081220 100%);
  border-right: 1px solid rgba(0, 210, 255, 0.2);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
}

.sql-demo-card-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 30% 40%, rgba(0, 210, 255, 0.18), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(255, 215, 0, 0.1), transparent 50%);
  pointer-events: none;
}

.sql-mock-window {
  position: relative;
  z-index: 2;
  width: 100%;
  border: 1px solid rgba(0, 210, 255, 0.35);
  border-radius: 14px;
  background: rgba(4, 7, 12, 0.94);
  backdrop-filter: blur(12px);
  padding: 22px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 210, 255, 0.15);
}

.sql-mock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 14px;
}

.sql-mock-dots {
  display: flex;
  gap: 6px;
}

.sql-mock-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5f57;
}

.sql-mock-dots i:nth-child(2) { background: #febc2e; }
.sql-mock-dots i:nth-child(3) { background: #28c840; }

.sql-mock-tag {
  font-family: monospace;
  font-size: 0.65rem;
  color: #00d2ff;
  letter-spacing: 0.1em;
}

.sql-mock-code {
  font-family: 'Consolas', 'Fira Code', monospace;
  font-size: 0.78rem;
  line-height: 1.65;
  color: #a5b4fc;
}

.sql-mock-code .kwd { color: #f472b6; font-weight: bold; }
.sql-mock-code .fn { color: #38bdf8; }
.sql-mock-code .str { color: #34d399; }

.sql-demo-card-content {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.sql-demo-card-content .demo-card__tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 12px;
  border: 1px solid rgba(0, 210, 255, 0.4);
  border-radius: 99px;
  color: #00d2ff;
  background: rgba(0, 210, 255, 0.1);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.sql-demo-card-content h3 {
  margin: 0 0 14px 0;
  font-size: clamp(1.8rem, 2.5vw, 2.5rem);
  color: #ffffff;
  line-height: 1.15;
}

.sql-demo-card-content p {
  color: #a3b0be;
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 24px;
}

.sql-demo-card-content .demo-card__features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
}

.sql-demo-card-content .demo-card__features span {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.04);
  color: #d1d9e2;
  font-size: 0.7rem;
}

@media (max-width: 980px) {
  .sql-demo-card-inner {
    grid-template-columns: 1fr;
  }
  .sql-demo-card-visual {
    border-right: 0;
    border-bottom: 1px solid rgba(0, 210, 255, 0.2);
    padding: 28px;
  }
  .sql-demo-card-content {
    padding: 28px;
  }
}

@media (max-width: 860px) {
  .service-card--sql {
    padding: 28px 22px !important;
  }
  .btn-sql-demo, .btn-sql-quote {
    width: 100% !important;
  }
}