/* ============================================================
   Upstorm — dark premium, violeta #820AD1
   ============================================================ */

:root {
  --bg: #040109;
  --bg-deep: #040109;
  --surface: #100a18;
  --line: rgba(190, 150, 255, 0.14);
  --ink: #f5f1fb;
  --muted: #aaa0bf;
  --violet: #820ad1;
  --violet-bright: #a24df2;
  --violet-soft: #c9a0ff;
  --font-display: "General Sans", sans-serif;
  --font-body: "General Sans", sans-serif;
  --container: 1140px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  text-wrap: balance;
  line-height: 1.08;
}

p { text-wrap: pretty; }

img { display: block; max-width: 100%; height: auto; }

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

::selection { background: var(--violet); color: #fff; }

/* ---------- botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, background 0.25s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }

.btn-violet {
  background: var(--violet);
  color: #fff;
  box-shadow: 0 0 0 0 rgba(130, 10, 209, 0);
}
.btn-violet:hover {
  background: var(--violet-bright);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(130, 10, 209, 0.45);
}

.btn-white {
  background: #fff;
  color: var(--violet);
}
.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(255, 255, 255, 0.18);
}

.btn-ghost {
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-ghost:hover {
  border-color: var(--violet-bright);
  color: var(--violet-soft);
}

.btn-lg { font-size: 1.125rem; padding: 1.05rem 2.25rem; }

/* ---------- nav ---------- */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  background: linear-gradient(90deg, var(--violet), var(--violet-bright));
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: linear-gradient(to bottom, rgba(3, 1, 7, 0.92), rgba(3, 1, 7, 0.75));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(190, 150, 255, 0.08);
}

.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0.85rem var(--pad);
  display: flex;
  align-items: center;
  gap: 2rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.nav-links {
  display: flex;
  gap: 1.75rem;
  margin-left: auto;
}
.nav-links a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--ink); }

.nav-cta { font-size: 0.92rem; padding: 0.6rem 1.35rem; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding-top: clamp(6.5rem, 12vh, 9rem);
}

.hero-glow {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 70vw;
  height: 70vw;
  max-width: 900px;
  max-height: 900px;
  background: radial-gradient(circle, rgba(130, 10, 209, 0.22) 0%, rgba(130, 10, 209, 0.07) 40%, transparent 70%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  min-height: 78vh;
}

.hero-copy h1 {
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  max-width: 15ch;
  line-height: 1.12;
  animation: rise 0.8s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-sub {
  max-width: 34rem;
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: 1.125rem;
  animation: rise 0.8s 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.25rem;
  animation: rise 0.8s 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* escenario 3D (canvas WebGL cubre todo el hero) */

/* el escenario se extiende 260px hacia la sección siguiente:
   el polvo de partículas cruza el límite y une las secciones */
.hero-stage {
  position: absolute;
  inset: 0 0 -260px 0;
  pointer-events: none;
}
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  -webkit-mask-image: linear-gradient(to bottom, black 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 78%, transparent 100%);
}

/* la mano (fallback sin WebGL) */

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  align-self: stretch;
}
.webgl .hero-visual { visibility: hidden; }

.orb-glow {
  position: absolute;
  top: 18%;
  left: 50%;
  width: 55%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(162, 77, 242, 0.4) 0%, rgba(130, 10, 209, 0.16) 45%, transparent 70%);
  filter: blur(12px);
  animation: orb-pulse 4.5s ease-in-out infinite;
  pointer-events: none;
}

.hero-hand {
  position: relative;
  width: min(100%, 480px);
  mix-blend-mode: screen;
  animation: hand-in 1.4s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both, hand-float 7s 1.7s ease-in-out infinite;
  will-change: transform;
}

@keyframes hand-in {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hand-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes orb-pulse {
  0%, 100% { opacity: 0.75; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1; transform: translateX(-50%) scale(1.08); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* clientes */

.hero-clients {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}
.hero-clients ul {
  width: max-content;
  padding: 1.6rem 0;
  display: flex;
  list-style: none;
  animation: marquee 55s linear infinite;
}
.hero-clients:hover ul { animation-play-state: paused; }
.hero-clients li {
  display: flex;
  align-items: center;
  margin-right: clamp(3.5rem, 6vw, 6rem);
}
.hero-clients li img {
  height: 54px;
  width: auto;
  opacity: 0.75;
  transition: opacity 0.3s ease;
}
.hero-clients li:hover img { opacity: 1; }

@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ---------- secciones comunes ---------- */

section { position: relative; }

.section-head {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.section-head h2 {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  max-width: 18ch;
}
.section-head p {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 46ch;
}

/* ---------- resultados ---------- */

.results { padding: clamp(5rem, 11vw, 8.5rem) 0 clamp(3rem, 7vw, 5rem); }

.case {
  max-width: var(--container);
  margin: clamp(3.5rem, 7vw, 5.5rem) auto 0;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.case-flip .case-metric { order: 2; justify-self: end; text-align: right; }
.case-flip .case-story { order: 1; }

.case-metric { display: flex; flex-direction: column; }
.case-number {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(4.5rem, 10vw, 7.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-shadow: 0 0 90px rgba(130, 10, 209, 0.38);
}
.case-unit {
  margin-top: 0.6rem;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--violet-soft);
}

.case-story h3 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}
.case-story p { color: var(--muted); max-width: 52ch; }
.case-tag {
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(201, 160, 255, 0.65);
}

/* ---------- antares (sistema solar) ---------- */

.antares {
  position: relative;
  padding: clamp(6rem, 12vw, 10rem) 0 clamp(11rem, 18vw, 16rem);
  overflow: hidden;
}

.antares-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* anillos orbitales */
.ring {
  position: absolute;
  left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(190, 150, 255, 0.09);
}
.ring-1 {
  width: 1300px;
  height: 1300px;
  top: -480px;
  transform: translateX(-50%);
  border-color: rgba(190, 150, 255, 0.14);
}
.ring-2 {
  width: 1900px;
  height: 1900px;
  top: -680px;
  transform: translateX(-50%);
  border-color: rgba(190, 150, 255, 0.09);
}
.ring-3 {
  width: 1580px;
  height: 1580px;
  top: -560px;
  transform: translateX(-50%);
  border-color: rgba(190, 150, 255, 0.11);
}

/* cometas recorriendo las órbitas (los posiciona script.js) */
.comet {
  position: absolute;
  left: 0;
  top: 0;
  width: 90px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.9), rgba(176, 108, 250, 0.35) 40%, transparent);
  transform-origin: 100% 50%;
  opacity: 0; /* aparecen solo con JS activo */
  transition: opacity 0.6s ease;
  will-change: transform;
  pointer-events: none;
}
.comet::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff, #cdb0ff 55%, rgba(162, 77, 242, 0) 78%);
  box-shadow: 0 0 14px 3px rgba(190, 130, 255, 0.8);
}
.comet-2 { width: 70px; height: 2px; }
.comet-3 { width: 56px; height: 2px; }
.comet-4 { width: 82px; height: 3px; }
.comet-5 { width: 64px; height: 2px; }
.comet-6 { width: 48px; height: 2px; }
/* un par de cometas con la cabeza más violeta, para que no sean todos iguales */
.comet-3::after,
.comet-6::after {
  background: radial-gradient(circle at 40% 40%, #ecdcff, #a24df2 55%, rgba(162, 77, 242, 0) 78%);
  box-shadow: 0 0 13px 3px rgba(162, 77, 242, 0.85);
}

/* orbes flotantes */
.orb {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%,
    rgba(255, 255, 255, 0.95) 0%,
    #cdb0ff 32%,
    rgba(141, 60, 235, 0.5) 58%,
    rgba(130, 10, 209, 0) 72%);
  filter: blur(2px) drop-shadow(0 0 36px rgba(162, 77, 242, 0.5));
  will-change: transform;
}
.orb-1 { width: 200px; top: 3%;  left: 38%; }
.orb-2 { width: 90px;  top: 22%;  left: 7%;  }
.orb-3 { width: 130px; top: 46%;  right: 9%; }
.orb-4 { width: 48px;  top: 12%;  right: 22%; opacity: 0.85; }
.orb-5 { width: 34px;  top: 58%;  left: 19%; opacity: 0.7; }

/* el sol del horizonte (Antares es una estrella: tiene que arder) */
.planet {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: max(1700px, 175vw);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, 87%);
  /* la cara interna del limbo brilla: calor saliendo del borde superior */
  background: radial-gradient(circle at 50% 7%,
    rgba(247, 228, 255, 0.24) 0%,
    #200d36 13%, #0b0414 32%, #040109 56%);
  box-shadow:
    0 -1px 6px rgba(255, 255, 255, 1),
    0 -3px 16px rgba(255, 250, 255, 0.95),
    0 -12px 48px 3px rgba(240, 212, 255, 0.78),
    0 -40px 140px 10px rgba(184, 104, 252, 0.64),
    0 -100px 280px 28px rgba(130, 10, 209, 0.5);
  will-change: transform;
}
.planet-glow {
  position: absolute;
  left: 50%;
  bottom: -12vw;
  width: 118vw;
  height: 46vw;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%, rgba(150, 40, 230, 0.52) 0%, rgba(130, 10, 209, 0.16) 42%, transparent 70%);
  animation: corona-pulse 8s ease-in-out -2.5s infinite;
}
/* corona solar: respira detrás del horizonte */
.corona {
  position: absolute;
  left: 50%;
  bottom: -2vw;
  width: 80vw;
  height: 18vw;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255, 253, 255, 0.6) 0%,
    rgba(214, 174, 255, 0.3) 36%,
    rgba(130, 10, 209, 0.1) 60%,
    transparent 74%);
  filter: blur(8px) brightness(1);
  animation: corona-pulse 6.5s ease-in-out infinite, corona-flicker 1.1s ease-in-out infinite;
  pointer-events: none;
  will-change: transform, opacity, filter;
}
/* núcleo ardiente: el punto más caliente del limbo, parpadea más rápido */
.sun-core {
  position: absolute;
  left: 50%;
  bottom: -2vw;
  width: 56vw;
  height: 14vw;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(248, 226, 255, 0.62) 22%,
    rgba(184, 116, 252, 0.24) 48%,
    transparent 70%);
  filter: blur(5px) brightness(1);
  animation: sun-core-pulse 4.2s ease-in-out infinite, core-flicker 0.85s ease-in-out -0.3s infinite;
  pointer-events: none;
  will-change: transform, opacity, filter;
}
@keyframes corona-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
@keyframes sun-core-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}
/* parpadeo orgánico (stops irregulares = nada mecánico), sobre el brillo */
@keyframes corona-flicker {
  0%   { filter: blur(8px) brightness(1); }
  17%  { filter: blur(8px) brightness(1.16); }
  33%  { filter: blur(8px) brightness(0.93); }
  49%  { filter: blur(8px) brightness(1.21); }
  64%  { filter: blur(8px) brightness(1.01); }
  81%  { filter: blur(8px) brightness(1.13); }
  100% { filter: blur(8px) brightness(1); }
}
@keyframes core-flicker {
  0%   { filter: blur(5px) brightness(1); }
  19%  { filter: blur(5px) brightness(1.22); }
  37%  { filter: blur(5px) brightness(0.9); }
  52%  { filter: blur(5px) brightness(1.28); }
  68%  { filter: blur(5px) brightness(1.04); }
  84%  { filter: blur(5px) brightness(1.18); }
  100% { filter: blur(5px) brightness(1); }
}

/* brasas que suben desde la estrella (las crea y mueve script.js) */
.ember {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #d9b8ff 45%, rgba(162, 77, 242, 0) 72%);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .corona, .planet-glow, .sun-core { animation: none; }
  .comet, .ember { display: none; }
}

.antares-inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
  text-align: center;
}

/* marca Antares: constelación de partículas WebGL (sin pill, sin borde) */
.antares-mark {
  position: relative;
  width: min(560px, 84vw);
  aspect-ratio: 640 / 300;
  margin: 0 auto clamp(1rem, 2.5vw, 2rem);
}
/* el canvas sangra más allá de la caja: el tilt 3D y la repulsión
   necesitan aire en los bordes o el logo se corta al inclinarse */
.antares-mark-canvas {
  position: absolute;
  left: -16%;
  top: -24%;
  width: 132%;  /* 100 + 2x16 */
  height: 148%; /* 100 + 2x24 — canvas es replaced element: width/height explícitos, no left+right */
  display: block;
}
.antares-mark-fallback {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 26px rgba(162, 77, 242, 0.45));
  transition: opacity 0.6s ease;
}
/* cuando la escena de partículas ya renderizó, el fallback se apaga */
.antares-mark.on .antares-mark-fallback { opacity: 0; }

.antares-inner h2 {
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  line-height: 1.1;
}
.antares-inner h2 em {
  font-style: normal;
  color: var(--violet-bright);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.14em;
}
.antares-inner h2 .dim { color: rgba(245, 241, 251, 0.62); }
.antares-sub {
  margin: 1.5rem auto 0;
  color: var(--muted);
  font-size: 1.125rem;
  max-width: 54ch;
}

/* funcionalidades: palabras sueltas, flotando con glow */

.antares-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 1.1rem 2.4rem;
  list-style: none;
  max-width: 700px;
  margin: clamp(2.75rem, 5.5vw, 4rem) auto 0;
}
.antares-features li {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: rgba(243, 237, 255, 0.88);
  text-shadow:
    0 0 12px rgba(176, 108, 250, 0.65),
    0 0 34px rgba(130, 10, 209, 0.45);
  cursor: default;
  /* float anima `translate`, hover usa `scale`: no se pisan */
  transition: color 0.25s ease, text-shadow 0.3s ease, scale 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.antares-features li:hover {
  color: #fff;
  scale: 1.12;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.6),
    0 0 26px rgba(176, 108, 250, 0.9),
    0 0 60px rgba(130, 10, 209, 0.6);
}
@keyframes word-float {
  0%, 100% { translate: 0 var(--fa, 5px); }
  50% { translate: 0 calc(-1 * var(--fa, 5px)); }
}
.js .antares-features li {
  animation: word-float var(--fd, 6s) ease-in-out var(--fdel, 0s) infinite;
}
/* cada palabra con su propio ritmo, amplitud y tamaño (nube orgánica) */
.antares-features li:nth-child(1)  { --fd: 5.4s; --fdel: -1.1s; --fa: 6px; font-size: 1.3rem; }
.antares-features li:nth-child(2)  { --fd: 6.8s; --fdel: -3.4s; --fa: 4px; font-size: 1.05rem; }
.antares-features li:nth-child(3)  { --fd: 5.9s; --fdel: -0.6s; --fa: 7px; font-size: 1.15rem; }
.antares-features li:nth-child(4)  { --fd: 7.3s; --fdel: -4.8s; --fa: 5px; font-size: 1.25rem; }
.antares-features li:nth-child(5)  { --fd: 6.2s; --fdel: -2.2s; --fa: 6px; font-size: 1.1rem; }
.antares-features li:nth-child(6)  { --fd: 5.6s; --fdel: -5.1s; --fa: 4px; font-size: 1rem; }
.antares-features li:nth-child(7)  { --fd: 7s;   --fdel: -1.8s; --fa: 7px; font-size: 1.3rem; }
.antares-features li:nth-child(8)  { --fd: 6.5s; --fdel: -3.9s; --fa: 5px; font-size: 1rem; }
.antares-features li:nth-child(9)  { --fd: 5.8s; --fdel: -2.7s; --fa: 6px; font-size: 1.15rem; }
.antares-features li:nth-child(10) { --fd: 6.9s; --fdel: -0.3s; --fa: 5px; font-size: 1.05rem; }
@media (prefers-reduced-motion: reduce) {
  .antares-features li { animation: none; }
}

.antares-cta { margin-top: clamp(2.25rem, 4vw, 3rem); }

/* ---------- servicios ---------- */

.services { padding: clamp(5rem, 11vw, 8.5rem) 0; }

.service-list {
  max-width: var(--container);
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  padding: 0 var(--pad);
  list-style: none;
}

.service-list li {
  display: grid;
  grid-template-columns: 1fr 1.2fr auto;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
  padding: clamp(1.75rem, 4vw, 2.5rem) 0;
  border-top: 1px solid var(--line);
  transition: background 0.3s ease;
}
.service-list li:last-child { border-bottom: 1px solid var(--line); }

.service-name {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.service-name h3 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  transition: color 0.25s ease;
}
.service-list li:hover .service-name h3 { color: var(--violet-soft); }

.service-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--violet-soft);
  transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.service-icon svg { width: 26px; height: 26px; }
.service-list li:hover .service-icon {
  color: #fff;
  background: var(--violet);
  border-color: var(--violet-bright);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(130, 10, 209, 0.4);
}

.service-desc p { color: var(--muted); max-width: 50ch; }
.service-tags {
  margin-top: 0.65rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(201, 160, 255, 0.6);
}

.service-arrow {
  font-size: 1.5rem;
  color: var(--violet-bright);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  align-self: center;
}
.service-list li:hover .service-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ---------- proceso ---------- */

.process {
  padding: clamp(5rem, 11vw, 8.5rem) 0;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(130, 10, 209, 0.09), transparent 70%);
}

.steps {
  max-width: var(--container);
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  list-style: none;
  counter-reset: step;
}

.steps li {
  position: relative;
  padding-top: 1.5rem;
}
.steps li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, var(--violet-bright), var(--line) 60%);
}

.step-n {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--violet-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  margin-bottom: 1.1rem;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.steps li:hover .step-n {
  background: var(--violet);
  color: #fff;
  border-color: var(--violet-bright);
  box-shadow: 0 0 24px rgba(130, 10, 209, 0.5);
}
.steps li::before { transition: filter 0.3s ease; }
.steps li:hover::before { filter: brightness(1.7); }

.steps h3 { font-size: 1.3rem; margin-bottom: 0.6rem; }
.steps p { color: var(--muted); font-size: 0.98rem; }

/* ---------- cta ---------- */

.cta {
  padding: clamp(6rem, 13vw, 10rem) 0;
  overflow: hidden;
}

.cta-glow {
  position: absolute;
  left: 50%;
  bottom: -40%;
  width: 80vw;
  height: 60vw;
  max-width: 1000px;
  max-height: 700px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(130, 10, 209, 0.3) 0%, rgba(130, 10, 209, 0.08) 45%, transparent 70%);
  pointer-events: none;
}

.cta-inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
  text-align: center;
}
.cta-inner h2 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.cta-inner > p {
  margin: 1.25rem auto 0;
  color: var(--muted);
  font-size: 1.125rem;
  max-width: 42ch;
}

.cta-actions {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.cta-mail {
  font-weight: 500;
  color: var(--violet-soft);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.cta-mail:hover { border-color: var(--violet-soft); }

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid rgba(190, 150, 255, 0.08);
  padding: 2.25rem 0;
}
.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}
.footer .brand { font-size: 1.1rem; }
.footer p {
  color: var(--muted);
  font-size: 0.9rem;
}
.footer p:last-child { margin-left: auto; }

/* ---------- reveals (solo con JS) ---------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.js [data-reveal].in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- botones magnéticos (clase puesta por JS) ---------- */

.magnetic {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, background 0.25s ease;
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .hero-clients ul { animation: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-inner { justify-content: space-between; }

  .hero-inner {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-bottom: 0;
  }
  .hero-copy { text-align: left; padding-top: 1rem; }
  .hero-visual { margin-top: 1rem; }
  .hero-hand { width: min(85%, 380px); }
  .orb-glow { top: 12%; }

  .case,
  .case-flip { grid-template-columns: 1fr; gap: 1.25rem; }
  .case-flip .case-metric { order: 1; justify-self: start; text-align: left; }
  .case-flip .case-story { order: 2; }

  .service-list li {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .service-arrow { display: none; }

  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer p:last-child { margin-left: 0; }

  /* sistema solar más liviano en mobile */
  .orb { opacity: 0.8; }
  .orb-1 { width: 110px; top: -3%; left: 58%; }
  .orb-2 { width: 54px; top: 16%; }
  .orb-3 { width: 64px; top: 64%; right: 6%; }
  .orb-4, .orb-5 { display: none; }
}