:root {
   --accent: #00b87a;
   --brand-green: #49bda4;
   --brand-green-hover: #3aa48c;
   --dark: #0d0d0d;
   --navy: #0a0e1a;
   --mid: rgba(13, 13, 13, 0.5);
   --faint: rgba(13, 13, 13, 0.3);
   --rule: rgba(13, 13, 13, 0.09);
   --warm: #f4f2ed;
   --hd: 'Space Grotesk', sans-serif;
   --body: 'DM Sans', system-ui, -apple-system, sans-serif;
}

*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: 88px;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

body {
   font-family: var(--body);
   color: var(--dark);
   background: #fff;
}

::selection {
   background: rgba(0, 180, 130, 0.12);
}

a {
   text-decoration: none;
   color: inherit;
}

button {
   font-family: inherit;
   cursor: pointer;
   border: none;
}

h1,
h2,
h3,
h4 {
   font-family: var(--hd);
}

input,
textarea {
   font-family: var(--body);
}

input::placeholder,
textarea::placeholder {
   color: rgba(13, 13, 13, 0.3);
}

textarea {
   resize: vertical;
}

.wrap {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 72px;
}

.cta {
   background: var(--brand-green);
   color: #fff;
   display: inline-block;
   text-decoration: none;
   cursor: pointer;
   border: none;
   transition: background 0.2s;
   -webkit-user-select: none;
   user-select: none;
}

.cta:hover {
   background: var(--brand-green-hover);
}

.cta:focus,
.nav-link:focus {
   outline: none;
}

.cta:focus-visible,
.nav-link:focus-visible {
   outline: 2px solid var(--brand-green);
   outline-offset: 3px;
}

.logo {
   width: auto;
   display: block;
}

.logo--nav {
   height: 30px;
}

.site-nav {
   position: sticky;
   top: 0;
   z-index: 100;
   background: transparent;
   border-bottom: 1px solid transparent;
   transition: all 0.3s;
}

.site-nav.is-solid,
.site-nav.is-open {
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
   border-bottom-color: var(--rule);
}

.nav-wrap {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 72px;
}

.brand {
   display: flex;
   align-items: center;
}

.nav-links {
   display: flex;
   gap: 32px;
   font-size: 14px;
   color: var(--mid);
}

.nav-link {
   color: rgba(13, 13, 13, 0.5);
   cursor: pointer;
   transition: color 0.2s;
}

.nav-link:hover {
   color: var(--dark);
}

.nav-actions {
   display: flex;
   align-items: center;
   gap: 12px;
}

.nav-cta {
   border-radius: 6px;
   padding: 8px 20px;
   font-size: 13px;
   font-weight: 600;
}

.nav-burger {
   display: none;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 5px;
   width: 42px;
   height: 42px;
   background: transparent;
   border: none;
   padding: 9px;
}

.nav-burger span {
   display: block;
   height: 2px;
   width: 22px;
   background: var(--dark);
   border-radius: 2px;
   transition:
      transform 0.25s ease,
      opacity 0.25s ease;
}

.nav-burger.is-open span:nth-child(1) {
   transform: translateY(7px) rotate(45deg);
}

.nav-burger.is-open span:nth-child(2) {
   opacity: 0;
}

.nav-burger.is-open span:nth-child(3) {
   transform: translateY(-7px) rotate(-45deg);
}

.mobile-panel {
   display: none;
   border-top: 1px solid var(--rule);
   background: rgba(255, 255, 255, 0.98);
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
}

.mobile-panel__inner {
   display: flex;
   flex-direction: column;
   padding-top: 6px;
   padding-bottom: 20px;
}

.mobile-link {
   font-family: var(--hd);
   font-size: 18px;
   font-weight: 600;
   color: var(--dark);
   padding: 15px 0;
   border-bottom: 1px solid var(--rule);
}

.mobile-cta {
   margin-top: 18px;
   text-align: center;
   border-radius: 8px;
   padding: 14px 0;
   font-size: 15px;
   font-weight: 700;
   font-family: var(--hd);
}

.hero {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   position: relative;
}

.hero__wrap {
   padding-top: 20px;
   padding-bottom: 60px;
}

.hero-grid {
   display: grid;
   grid-template-columns: 1fr 1.2fr;
   gap: 72px;
   align-items: center;
}

.hero h1 {
   font-family: var(--hd);
   font-size: clamp(36px, 2.8vw, 62px);
   font-weight: 700;
   line-height: 1;
   letter-spacing: -0.045em;
   margin-bottom: 28px;
}

.hero p {
   font-size: 17px;
   line-height: 1.7;
   color: var(--mid);
   max-width: 440px;
   margin-bottom: 40px;
}

.hero__cta {
   border-radius: 8px;
   padding: 15px 32px;
   font-size: 16px;
   font-weight: 700;
   font-family: var(--hd);
   letter-spacing: -0.01em;
}

.hero-cards-shell {
   animation: heroFloat 5s ease-in-out infinite 1.5s;
}

.hero-cards-3d {
   display: flex;
   flex-direction: column;
   gap: 10px;
   transform: perspective(1400px) rotateX(8deg) rotateY(-16deg);
   transform-origin: center center;
   will-change: transform;
}

.hero-card {
   background: #fff;
   border-radius: 14px;
   box-shadow:
      0 2px 24px rgba(0, 0, 0, 0.07),
      0 1px 4px rgba(0, 0, 0, 0.04);
   border: 1px solid rgba(0, 0, 0, 0.05);
   animation: cardEnter 0.8s ease both;
}

.hero-card--clients {
   padding: 18px 20px;
   animation-delay: 0.1s;
}

.card-header,
.integrations-header,
.quote-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.card-header {
   margin-bottom: 14px;
}

.card-title-row {
   display: flex;
   align-items: center;
   gap: 8px;
   font-family: var(--hd);
   font-size: 14px;
   font-weight: 600;
}

.card-icon,
.mini-icon {
   color: #00d4a0;
   background: rgba(0, 212, 160, 0.1);
   display: flex;
   align-items: center;
   justify-content: center;
}

.card-icon {
   width: 28px;
   height: 28px;
   border-radius: 8px;
}

.card-link,
.integrations-header span:last-child {
   font-size: 12px;
   color: #00d4a0;
   font-weight: 500;
}

.client-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 9px 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.client-row:last-child {
   border-bottom: none;
}

.client-main {
   display: flex;
   align-items: center;
   gap: 9px;
}

.avatar {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background: rgba(0, 212, 160, 0.08);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   font-family: var(--hd);
   font-size: 10px;
   font-weight: 700;
   color: #00d4a0;
}

.client-name {
   font-size: 12px;
   font-weight: 500;
   color: var(--dark);
   line-height: 1.3;
}

.client-sub {
   font-size: 10px;
   color: var(--mid);
}

.status {
   font-size: 10px;
   font-weight: 600;
   border-radius: 100px;
   padding: 3px 9px;
   white-space: nowrap;
}

.status--ok {
   background: rgba(0, 212, 160, 0.09);
   color: #00d4a0;
}

.status--warn {
   background: rgba(245, 158, 11, 0.1);
   color: #f59e0b;
}

.hero-card-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
}

.hero-card--reportes,
.hero-card--quote {
   padding: 18px;
}

.hero-card--reportes {
   animation-delay: 0.3s;
}

.hero-card--quote {
   animation-delay: 0.45s;
}

.mini-card-title {
   display: flex;
   align-items: center;
   gap: 7px;
   margin-bottom: 12px;
   font-family: var(--hd);
   font-size: 13px;
   font-weight: 600;
}

.mini-card-title--tight {
   gap: 6px;
   margin-bottom: 0;
}

.mini-icon {
   width: 24px;
   height: 24px;
   border-radius: 7px;
}

.metric-label {
   font-size: 10px;
   color: var(--mid);
   margin-bottom: 2px;
}

.metric-value,
.quote-price {
   font-family: var(--hd);
   font-weight: 700;
   letter-spacing: -0.03em;
}

.metric-value {
   font-size: 24px;
}

.metric-delta {
   font-size: 10px;
   color: #00d4a0;
   font-weight: 600;
   margin-bottom: 10px;
}

.chart {
   display: block;
}

.stats-grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 2px;
   margin-top: 10px;
}

.stats-grid span,
.stats-grid em {
   display: block;
   font-size: 9px;
   font-style: normal;
}

.stats-grid span {
   color: var(--faint);
}

.stats-grid strong {
   display: block;
   font-family: var(--hd);
   font-size: 12px;
   font-weight: 700;
}

.stats-grid em {
   color: #00d4a0;
}

.quote-header {
   margin-bottom: 2px;
}

.quote-status {
   padding: 2px 8px;
}

.quote-id {
   font-size: 9px;
   color: var(--faint);
   margin-bottom: 10px;
}

.quote-price {
   font-size: 20px;
   margin-bottom: 10px;
}

.quote-line {
   display: flex;
   justify-content: space-between;
   font-size: 10px;
   color: var(--mid);
   margin-bottom: 5px;
}

.quote-line strong {
   font-weight: 500;
   color: var(--dark);
}

.quote-button {
   margin-top: 12px;
   background: var(--dark);
   border-radius: 7px;
   padding: 8px;
   text-align: center;
   font-family: var(--hd);
   font-size: 11px;
   font-weight: 700;
   color: #fff;
}

.hero-card--integrations {
   padding: 16px 20px;
   animation-delay: 0.6s;
}

.integrations-header {
   margin-bottom: 12px;
}

.integrations-header span:first-child {
   font-family: var(--hd);
   font-size: 13px;
   font-weight: 600;
}

.integrations-header span:last-child {
   font-size: 11px;
}

.integration-list {
   display: flex;
   gap: 12px;
   align-items: flex-start;
}

.integration-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
   flex: 1;
}

.integration-icon {
   width: 36px;
   height: 36px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--hd);
   font-size: 9px;
   font-weight: 800;
}

.integration-item span {
   font-size: 9px;
   color: var(--mid);
   text-align: center;
}

.integration-icon--ssn {
   color: #00d4a0;
   background: rgba(0, 212, 160, 0.1);
}

.integration-icon--afip {
   color: #007acc;
   background: rgba(0, 122, 204, 0.1);
}

.integration-icon--wa {
   color: #25d366;
   background: rgba(37, 211, 102, 0.1);
}

.integration-icon--sheets {
   color: #0f9d58;
   background: rgba(15, 157, 88, 0.1);
}

.integration-icon--more {
   color: var(--mid);
   background: rgba(13, 13, 13, 0.05);
}

.section {
   padding-top: 96px;
   padding-bottom: 96px;
}

.section-kicker {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-bottom: 52px;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.13em;
   color: var(--faint);
   text-transform: uppercase;
}

.section-kicker--dark-green {
   color: rgba(6, 52, 44, 0.7);
}

.section-title {
   font-family: var(--hd);
   font-size: 40px;
   font-weight: 700;
   letter-spacing: -0.035em;
   line-height: 1.12;
   margin-bottom: 20px;
}

.section-title--services {
   margin-bottom: 52px;
   max-width: 620px;
}

.section-title--process {
   margin-bottom: 64px;
   max-width: 640px;
}

.section-title--large {
   font-size: 44px;
   line-height: 1.08;
   margin-bottom: 24px;
}

.section-lead {
   font-size: 17px;
   line-height: 1.7;
   color: var(--mid);
}

.services-list {
   border-top: 1px solid var(--rule);
}

.svc-row {
   display: grid;
   grid-template-columns: 44px 1fr 1.1fr;
   gap: 28px;
   padding: 26px 0;
   border-bottom: 1px solid var(--rule);
   cursor: default;
}

.svc-row span {
   font-family: var(--hd);
   font-size: 13px;
   font-weight: 700;
   color: var(--faint);
   transition: color 0.25s;
   padding-top: 3px;
}

.svc-row:hover span {
   color: var(--accent);
}

.svc-row h3 {
   font-family: var(--hd);
   font-size: 19px;
   font-weight: 600;
   letter-spacing: -0.02em;
   padding-top: 1px;
}

.svc-row p {
   font-size: 15px;
   line-height: 1.65;
   color: var(--mid);
}

.enfoque {
   background: var(--brand-green);
   color: #ffffff;
   position: relative;
   overflow: hidden;
}

.two-col {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 72px;
}

.enfoque-lead,
.enfoque-panel p {
   color: rgba(6, 52, 44, 0.82);
   line-height: 1.7;
}

.enfoque-lead {
   font-size: 17px;
   margin-bottom: 32px;
}

.chip-list {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
}

.chip-list span {
   font-size: 12px;
   font-weight: 500;
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 100px;
   padding: 5px 13px;
   color: rgba(255, 255, 255, 0.78);
}

.enfoque-panel {
   border-left: 1px solid rgba(6, 52, 44, 0.2);
   padding-left: 36px;
}

.enfoque-panel p {
   font-size: 15px;
   color: rgba(6, 52, 44, 0.78);
   margin-bottom: 20px;
}

.enfoque-rule {
   height: 1px;
   background: rgba(6, 52, 44, 0.18);
   margin-bottom: 20px;
}

.enfoque-panel .enfoque-note {
   font-size: 13px;
   color: rgba(6, 52, 44, 0.6);
   font-style: italic;
   line-height: 1.6;
   margin-bottom: 0;
}

.steps-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 0;
   position: relative;
}

.steps-line {
   position: absolute;
   top: 17px;
   left: 5%;
   right: 5%;
   height: 1px;
   background: var(--rule);
}

.step {
   padding-right: 20px;
}

.step:last-child {
   padding-right: 0;
}

.step div {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   background: #fff;
   border: 2px solid var(--rule);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--hd);
   font-size: 12px;
   font-weight: 700;
   color: var(--accent);
   margin-bottom: 18px;
   position: relative;
   z-index: 1;
}

.step h3 {
   font-family: var(--hd);
   font-size: 16px;
   font-weight: 600;
   letter-spacing: -0.015em;
   margin-bottom: 8px;
}

.step p {
   font-size: 13px;
   line-height: 1.6;
   color: var(--mid);
}

.resultados {
   border-top: 1px solid var(--rule);
}

.outcomes-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0;
}

.outcomes-grid div {
   padding: 16px 0;
   border-bottom: 1px solid var(--rule);
   display: flex;
   align-items: baseline;
   gap: 10px;
   font-size: 15px;
   color: var(--dark);
   line-height: 1.5;
}

.outcomes-grid span {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: var(--accent);
   flex-shrink: 0;
   margin-top: 6px;
}

.diferencial {
   background: var(--warm);
   padding-top: 80px;
   padding-bottom: 80px;
}

.quote-text {
   font-family: var(--hd);
   font-size: 30px;
   font-weight: 600;
   letter-spacing: -0.03em;
   line-height: 1.35;
   max-width: 800px;
   text-wrap: balance;
   color: var(--dark);
}

.diferencial-rule {
   height: 1px;
   background: var(--rule);
   margin: 48px 0;
}

.three-col {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 48px;
}

.three-col h3 {
   font-family: var(--hd);
   font-size: 18px;
   font-weight: 600;
   letter-spacing: -0.02em;
   margin-bottom: 10px;
}

.three-col p {
   font-size: 14px;
   line-height: 1.65;
   color: var(--mid);
}

.contact-lead {
   margin-bottom: 44px;
}

.contact-info {
   font-size: 14px;
   line-height: 1.9;
   color: var(--faint);
}

.contact-info div:last-child {
   color: var(--dark);
   font-weight: 500;
}

.contact-form input,
.contact-form textarea {
   width: 100%;
   padding: 13px 0;
   font-size: 16px;
   border: none;
   border-bottom: 1px solid var(--rule);
   background: transparent;
   outline: none;
   color: var(--dark);
   transition: border-color 0.2s;
   margin-bottom: 22px;
}

.contact-form textarea {
   resize: vertical;
   min-height: 80px;
   margin-bottom: 28px;
}

.contact-form input:focus,
.contact-form textarea:focus {
   border-bottom-color: var(--brand-green);
}

.form-button {
   border-radius: 8px;
   padding: 13px 30px;
   font-size: 15px;
   font-weight: 600;
   font-family: var(--hd);
   letter-spacing: -0.01em;
}

.form-success {
   min-height: 260px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%;
   text-align: center;
}

.success-icon {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: var(--accent);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 18px;
}

.form-success p {
   font-family: var(--hd);
   font-size: 18px;
   font-weight: 600;
   margin-bottom: 6px;
}

.form-success span {
   font-size: 14px;
   color: var(--mid);
}

.site-footer {
   background: var(--dark);
   color: #fff;
   padding-top: 44px;
   padding-bottom: 36px;
}

.footer-row {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
}

.logo--footer {
   height: 24px;
   filter: brightness(0) invert(1);
   margin-bottom: 14px;
}

.site-footer p {
   font-size: 13px;
   opacity: 0.3;
   line-height: 1.65;
   max-width: 300px;
}

.footer-links {
   display: flex;
   gap: 52px;
}

.footer-links h4 {
   font-size: 10px;
   font-weight: 600;
   letter-spacing: 0.1em;
   opacity: 0.25;
   margin-bottom: 12px;
   text-transform: uppercase;
}

.footer-links a,
.footer-links span {
   display: block;
   font-size: 13px;
   opacity: 0.45;
   margin-bottom: 7px;
   color: inherit;
}

.footer-links a {
   cursor: pointer;
   text-transform: capitalize;
}

.footer-bottom {
   margin-top: 32px;
   padding-top: 16px;
   border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-bottom p {
   font-size: 11px;
   opacity: 0.2;
   max-width: none;
}

.fade {
   opacity: 1;
   transform: none;
}

.js .fade {
   opacity: 0;
   transform: translateY(14px);
   transition:
      opacity 0.65s ease,
      transform 0.65s ease;
}

.js .fade.is-visible {
   opacity: 1;
   transform: none;
}

.js .delay-1 {
   transition-delay: 0.04s;
}

.js .delay-2 {
   transition-delay: 0.12s;
}

@keyframes cardEnter {
   from {
      opacity: 0;
      transform: translateY(22px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes heroFloat {
   0%,
   100% {
      transform: translateY(0px);
   }
   50% {
      transform: translateY(-7px);
   }
}

@media (max-width: 900px) {
   .nav-burger {
      display: flex;
   }

   .nav-cta,
   .nav-links {
      display: none;
   }

   .site-nav.is-open .mobile-panel {
      display: block;
   }

   .wrap {
      padding-left: 28px;
      padding-right: 28px;
   }

   .hero-grid {
      grid-template-columns: 1fr;
      gap: 48px;
   }

   .hero-cards-3d {
      transform: none;
   }

   .two-col {
      grid-template-columns: 1fr;
      gap: 40px;
   }

   .three-col {
      grid-template-columns: 1fr 1fr;
      gap: 36px;
   }

   .steps-grid {
      grid-template-columns: 1fr 1fr;
      row-gap: 36px;
   }

   .steps-line {
      display: none;
   }
}

@media (max-width: 560px) {
   .wrap {
      padding-left: 20px;
      padding-right: 20px;
   }

   .svc-row {
      grid-template-columns: 1fr;
      gap: 6px;
   }

   .three-col,
   .steps-grid,
   .outcomes-grid {
      grid-template-columns: 1fr;
   }

   .steps-grid {
      row-gap: 28px;
   }

   .footer-row {
      flex-direction: column;
      gap: 32px;
   }
}

@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
   }
}