:root {
  --brand: #202426;
  --brand-600: #202426;
  --ink: #111111;
  --muted: #ffffff;
  --line: #ECEEF1;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 90px;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(32, 36, 38, 0.16); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
.reveal[data-delay="5"] { transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition-duration: 0.001s; transform: none; }
}

.mesh {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 720px;
  pointer-events: none;
  z-index: 0;
  filter: blur(8px);
}
.mesh::before,
.mesh::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
}
.mesh::before {
  width: 540px; height: 540px;
  left: 8%; top: 0;
  background: radial-gradient(circle at 30% 30%, rgba(32, 36, 38, 0.30), transparent 70%);
  animation: floatA 16s var(--ease-out) infinite alternate;
}
.mesh::after {
  width: 460px; height: 460px;
  right: 6%; top: 60px;
  background: radial-gradient(circle at 60% 40%, rgba(99, 179, 255, 0.32), transparent 70%);
  animation: floatB 19s var(--ease-out) infinite alternate;
}
@keyframes floatA { to { transform: translate(40px, 30px) scale(1.08); } }
@keyframes floatB { to { transform: translate(-34px, 26px) scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .mesh::before, .mesh::after { animation: none; }
}

.grid-pattern {
  background-image:
    linear-gradient(to right, rgba(17, 17, 17, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17, 17, 17, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 78%);
}

/* Titular: efecto máquina de escribir con fuente monoespaciada */
.swap-word {
  display: inline-block;
  line-height: 1.2;
  min-height: 1.2em;
  padding-top: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.text-gradient {
  background: linear-gradient(120deg, #202426 0%, #4a5055 55%, #202426 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.nav-shell {
  transition: background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out), backdrop-filter 0.3s var(--ease-out);
}
.nav-shell.is-scrolled {
  background-color: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(7px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-color: var(--line) !important;
  box-shadow: 0 1px 0 rgba(17, 17, 17, 0.04), 0 8px 30px -16px rgba(17, 17, 17, 0.18);
}

.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-out);
}
.mobile-menu.is-open { max-height: 460px; border-top: 1px solid #F3F4F6; }

.btn-primary {
  position: relative;
  transition: transform 0.2s var(--ease-out), box-shadow 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}
@media (hover: hover) {
  .btn-primary:hover {
    background-color: #202426e6;
  }
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost { transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out); }

.howit { list-style: none; margin: 0; padding: 0; }
.howit-wrap { position: relative; }

.howit__line { display: none; position: absolute; z-index: 0; pointer-events: none; }

.howit__line--v {
  display: block;
  left: 50%; transform: translateX(-50%);
  top: 30px; bottom: 30px; width: 2px;
  background: linear-gradient(180deg, rgba(32, 36, 38, 0.30), rgba(32, 36, 38, 0.05));
}
@media (min-width: 640px) { .howit__line--v { display: none; } }

@media (min-width: 1024px) {
  .howit__line--h {
    display: block;
    top: 51px; left: 12.5%; right: 12.5%; height: 2px;
    background: linear-gradient(90deg, rgba(32,36,38,.16), rgba(32,36,38,.5) 50%, rgba(32,36,38,.16));
    background-size: 200% 100%;
    animation: howitflow 4.5s linear infinite;
  }
}
@keyframes howitflow { to { background-position: -200% 0; } }

.howit-card {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.07);
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 16px 40px -24px rgba(16, 24, 40, 0.24);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}

.howit-icon {
  width: 52px; height: 52px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, #f2f3f3, #e5e7e8);
  color: var(--brand);
  transition: transform 0.4s var(--ease-out);
}
.howit-num {
  font-size: 2.75rem; line-height: 0.9; font-weight: 800; letter-spacing: -0.03em;
  background: linear-gradient(135deg, #202426, #4a5055);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  opacity: 0.16; user-select: none;
}

.howit-card--accent {
  background: linear-gradient(150deg, #202426 0%, #0d1011 100%);
  border-color: transparent;
  box-shadow: 0 18px 44px -20px rgba(32, 36, 38, 0.6);
}
.howit-card--accent .howit-icon { background: rgba(255, 255, 255, 0.16); color: #fff; }
.howit-card--accent .howit-num {
  background: #ffffff;
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0.32;
}
.howit-card--accent .howit-title { color: #fff; }
.howit-card--accent .howit-desc { color: rgba(255, 255, 255, 0.74); }
@media (hover: hover) {
  .howit-card--accent:hover { border-color: transparent; box-shadow: 0 28px 56px -22px rgba(32, 36, 38, 0.7); }
}

@media (prefers-reduced-motion: reduce) {
  .howit__line--h { animation: none; }
}

.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; align-items: center; width: max-content; animation: marquee 32s linear infinite; }
.marquee__track > * { flex: none; margin-right: 3.5rem; }
@keyframes marquee { to { transform: translateX(-50%); } }
.live-dot { position: relative; }
.live-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 9999px;
  background: inherit; animation: ping 2.2s var(--ease-out) infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: .6; } 80%, 100% { transform: scale(2.4); opacity: 0; } }

.flow-line { stroke-dasharray: 6 8; animation: dash 1.4s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -28; } }

html, body { overflow-x: clip; }

/* ===================================================================
   Servicios — tarjetas premium
   =================================================================== */
.svc-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(17,17,17,.07);
  border-radius: 16px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(16,24,40,.04), 0 8px 24px -12px rgba(16,24,40,.08);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}

.svc-card__num {
  position: absolute; top: 1.25rem; right: 1.25rem;
  font-size: 4.5rem; line-height: 1; font-weight: 800;
  color: currentColor; opacity: 0.04;
  user-select: none; pointer-events: none;
  font-family: 'Space Grotesk', sans-serif;
}
.svc-card__icon {
  width: 52px; height: 52px; border-radius: 12px;
  display: grid; place-items: center; flex-shrink: 0;
  background: rgba(32,36,38,.06); color: #202426;
  margin-bottom: 1.25rem;
  transition: transform 0.4s var(--ease-out);
}
.svc-card__tag {
  position: absolute; top: 1.25rem; right: 1.25rem;
  display: inline-flex; align-items: center;
  font-size: .7rem; font-weight: 600; letter-spacing: .04em;
  padding: .2rem .625rem; border-radius: 9999px;
  background: rgba(32,36,38,.06); color: #202426;
  z-index: 1;
}
.svc-card--dark {
  background: linear-gradient(145deg, #202426 0%, #111518 100%);
  border-color: transparent;
  box-shadow: 0 20px 48px -16px rgba(32,36,38,.55);
}

.svc-card--dark .svc-card__num { color: #fff; }
.svc-card--dark .svc-card__icon { background: rgba(255,255,255,.12); color: #fff; }
.svc-card--dark .svc-card__tag { background: rgba(255,255,255,.12); color: rgba(255,255,255,.85); }
.svc-card--dark h3 { color: #fff; }
.svc-card--dark p { color: rgba(255,255,255,.65); }