/* =============================================================
   GP GRUPO EMPRESARIAL — hoja de estilo única
   1. Tokens · 2. Reset · 3. Utilidades · 4. Tipografía
   5. Componentes · 6. Secciones · 7. Efectos
   8. Responsive · 9. Movimiento reducido
   ============================================================= */

/* =============================================================
   1. TOKENS
   ============================================================= */
:root {
  /* Fondos claros con sesgo violeta (nunca blanco puro ni crema) */
  --bg:        #F6F4FA;
  --paper:     #FFFFFF;
  --bg-tint:   #EFEAF8;
  --bg-deep:   #1A1226;

  /* Tinta */
  --ink:       #171021;
  --ink-2:     #3D3550;
  --mute:      #6A6178;
  --line:      rgba(23, 16, 33, .11);
  --line-2:    rgba(23, 16, 33, .2);

  /* Colores de marca */
  --violet:    #5B2A8C;
  --purple:    #7B2D96;
  --magenta:   #C2178E;
  --pink:      #E62E8B;
  --orange:    #F5821F;
  --amber:     #FBB040;
  --ember:     #E8562B;
  --accent:    var(--magenta);

  /* Degradado de relleno (botones, formas): recorre toda la marca */
  --grad: linear-gradient(112deg,
    var(--violet) 0%, var(--purple) 22%, var(--magenta) 50%,
    var(--pink) 66%, var(--orange) 92%, var(--amber) 100%);
  --grad-btn: linear-gradient(115deg, var(--violet), var(--purple) 26%, var(--magenta) 58%, var(--orange));
  /* Degradado para texto sobre fondo claro: termina en naranja quemado,
     no en ámbar, para que la última palabra siga siendo legible */
  --grad-text: linear-gradient(96deg, var(--violet) 0%, var(--purple) 26%, var(--magenta) 62%, var(--ember) 100%);

  /* Halos de los botones */
  --halo:      0 4px 12px -2px rgba(91, 42, 140, .3), 0 10px 26px -8px rgba(194, 23, 142, .38);
  --halo-on:   0 6px 16px -2px rgba(91, 42, 140, .42), 0 18px 44px -8px rgba(230, 46, 139, .5), 0 0 0 1px rgba(245, 130, 31, .3);

  /* Tipografías */
  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Curvas */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Métrica */
  --nav-h: 4.625rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  /* El contenedor crece con el monitor: 1240 px en un portatil, hasta 2200
     en una pantalla 4K. Antes se quedaba fijo en 1240 y en un monitor grande
     el contenido flotaba en medio con dos franjas vacias a los lados. */
  --maxw: clamp(1240px, 86vw, 2200px);
  --radius: 16px;

  color-scheme: light;
}

/* =============================================================
   2. RESET & BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  /* A partir de 1600 px de ancho la letra base pasa poco a poco de 16 a
     20 px (en 2560), y con ella todo lo que esta medido en rem: titulares,
     margenes, huecos. Por debajo de 1600 no cambia nada. */
  font-size: clamp(1rem, 0.4167vw + 0.5833rem, 1.25rem);
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: clip;
  /* Sin scroll-behavior global: el desplazamiento suave lo hace main.js solo
     en los enlaces del menú. Aplicado a todo el documento entra en conflicto
     con las animaciones ligadas al scroll y las vuelve pastosas. */
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  overflow-x: clip;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.05; font-weight: 700; }
ul, ol { list-style: none; padding: 0; }
/* Sin esto, un elemento con display: grid ignora el atributo hidden. */
[hidden] { display: none !important; }

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

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


@supports (scrollbar-color: red blue) {
  html { scrollbar-color: rgba(123, 45, 150, .45) transparent; scrollbar-width: thin; }
}

/* =============================================================
   3. UTILIDADES
   ============================================================= */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { position: relative; padding-block: clamp(4.5rem, 11vw, 9rem); }

.skip-link {
  position: fixed; top: -120px; left: 1rem; z-index: 10001;
  padding: .7rem 1.1rem; border-radius: 10px;
  background: var(--ink); color: var(--paper); font-weight: 600;
  transition: top .3s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

.eyebrow {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--purple);
}

/* =============================================================
   4. TIPOGRAFÍA
   ============================================================= */
.section-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.15rem, 5.6vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-top: 1.15rem;
}
.section-title em {
  font-style: italic;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.section-note { color: var(--mute); margin-top: 1.6rem; max-width: 38rem; font-size: 1.02rem; }

/* =============================================================
   5. COMPONENTES
   ============================================================= */

/* ---------- Botones ----------
   Halo de marca permanente que se enciende al pasar el cursor y da un
   destello al hacer clic. El brillo va en box-shadow (no en una capa
   aparte) para que nunca se dibuje por encima de la etiqueta. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem 1.75rem;
  border-radius: 100px;
  font-family: var(--sans);
  font-size: .94rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  isolation: isolate;
  overflow: hidden;
  white-space: nowrap;
  transition: transform .4s var(--ease-soft), box-shadow .4s var(--ease-soft),
              color .35s var(--ease-out), border-color .35s var(--ease-out),
              filter .2s var(--ease-out);
}
.btn svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .45s var(--ease-out);
}
.btn:hover svg { transform: translateX(4px); }
.btn-sm { padding: .68rem 1.25rem; font-size: .86rem; }

/* Destello que barre el botón al pasar el cursor */
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left .75s var(--ease-out);
}
.btn:hover::after { left: 115%; }

.btn-primary {
  color: #fff;
  background-image: var(--grad-btn);
  background-size: 210% 100%;
  background-position: 0% 50%;
  box-shadow: var(--halo);
  transition: transform .4s var(--ease-soft), box-shadow .45s var(--ease-soft),
              background-position .8s var(--ease-out), filter .2s var(--ease-out);
}
.btn-primary:hover {
  transform: translateY(-3px);
  background-position: 100% 50%;
  box-shadow: var(--halo-on);
}
.btn-primary:active {
  transform: translateY(-1px) scale(.985);
  filter: saturate(1.25) brightness(1.12);
  transition-duration: .12s;
}

.btn-ghost {
  color: var(--purple);
  background: var(--paper);
  border: 1.5px solid rgba(123, 45, 150, .35);
  box-shadow: 0 2px 8px -3px rgba(91, 42, 140, .2);
}
.btn-ghost::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--grad-btn);
  transform: translateY(101%);
  transition: transform .55s var(--ease-out);
}
.btn-ghost:hover {
  color: #fff; border-color: transparent;
  transform: translateY(-3px);
  box-shadow: var(--halo-on);
}
.btn-ghost:hover::before { transform: translateY(0); }
.btn-ghost:active {
  transform: translateY(-1px) scale(.985);
  filter: saturate(1.25) brightness(1.1);
  transition-duration: .12s;
}

/* Botón claro sobre la banda de color */
.btn-invert {
  color: var(--violet);
  background: var(--paper);
  box-shadow: 0 6px 20px -6px rgba(26, 18, 38, .45);
}
.btn-invert:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px -8px rgba(26, 18, 38, .5), 0 0 0 3px rgba(255, 255, 255, .35);
}
.btn-invert:active { transform: translateY(-1px) scale(.985); transition-duration: .12s; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 150;
  /* backdrop-filter fuera de la transición: animarlo obliga a desenfocar el
     fondo en cada frame durante casi medio segundo. */
  transition: background-color .45s var(--ease-out),
              box-shadow .45s var(--ease-out), border-color .45s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(246, 244, 250, .95);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 30px -14px rgba(23, 16, 33, .28);
}
/* El desenfoque del fondo se recalcula en cada frame del scroll. Se baja de
   16 px a 10 px y se quita saturate() —una segunda pasada sobre lo mismo—,
   compensando con un fondo algo más opaco: se ve igual y cuesta la mitad. */
@supports (backdrop-filter: blur(10px)) {
  .nav.is-scrolled {
    background: rgba(246, 244, 250, .82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

.nav-inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}

.brand { display: inline-flex; align-items: center; gap: .7rem; }
.brand-mark { width: 2.5rem; height: 2.5rem; transition: transform .6s var(--ease-out); }
.brand:hover .brand-mark { transform: rotate(-16deg) scale(1.07); }
.brand-text { display: flex; flex-direction: column; line-height: 1.12; }
.brand-text strong {
  font-family: var(--display); font-size: 1.16rem; font-weight: 700; letter-spacing: -0.02em;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-text span {
  font-family: var(--mono); font-size: .55rem; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--mute);
}
.brand-lg .brand-mark, .brand-lg img { width: 3.375rem; height: 3.375rem; }
.brand-lg .brand-text strong { font-size: 1.6rem; }
.brand-lg .brand-text span { font-size: .62rem; }

.nav-links { display: none; gap: 2rem; }
.nav-link {
  position: relative;
  padding: .3rem 0;
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;   /* "Desarrollo software" nunca se parte en dos líneas */
  transition: color .35s var(--ease-out);
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background-image: var(--grad-btn); border-radius: 2px;
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.nav-link:hover { color: var(--violet); }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav-link.is-active { color: var(--violet); }

.nav-actions { display: flex; align-items: center; gap: .8rem; }
.nav-actions .btn-primary { display: none; }

/* ---------- Hamburguesa ---------- */
.burger {
  position: relative;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(123, 45, 150, .3);
  background: var(--paper);
  display: grid; place-items: center;
  transition: border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.burger:hover { border-color: var(--magenta); box-shadow: 0 6px 18px -6px rgba(194, 23, 142, .55); }
.burger span {
  position: absolute; left: 50%; width: 17px; height: 2px; border-radius: 2px;
  background: var(--violet);
  transform: translateX(-50%);
  transition: transform .5s var(--ease-out), opacity .3s var(--ease-out), width .4s var(--ease-out);
}
.burger span:nth-child(1) { top: 19px; }
.burger span:nth-child(2) { top: 25px; width: 11px; margin-left: -3px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: translateX(-50%) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { top: 22px; width: 17px; margin-left: 0; transform: translateX(-50%) rotate(-45deg); }

/* ---------- Menú móvil ---------- */
.menu {
  position: fixed; inset: 0; z-index: 140;
  background: var(--paper);
  padding: calc(var(--nav-h) + 2.5rem) var(--gutter) 3rem;
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease-out);
  overflow-y: auto;
}
.menu::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(72% 52% at 92% 4%, rgba(194, 23, 142, .16), transparent 70%),
              radial-gradient(62% 48% at 2% 98%, rgba(245, 130, 31, .14), transparent 70%);
}
.menu[aria-hidden="false"] { clip-path: inset(0 0 0 0); }
.menu-nav { position: relative; display: flex; flex-direction: column; gap: .2rem; }
.menu-nav a {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .5rem 0;
  font-family: var(--display); font-weight: 700; letter-spacing: -0.035em;
  font-size: clamp(1.9rem, 9vw, 3rem);
  line-height: 1.12;
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), color .3s;
}
.menu[aria-hidden="false"] .menu-nav a { opacity: 1; transform: none; }
.menu[aria-hidden="false"] .menu-nav a:nth-child(1) { transition-delay: .16s; }
.menu[aria-hidden="false"] .menu-nav a:nth-child(2) { transition-delay: .22s; }
.menu[aria-hidden="false"] .menu-nav a:nth-child(3) { transition-delay: .28s; }
.menu[aria-hidden="false"] .menu-nav a:nth-child(4) { transition-delay: .34s; }
.menu[aria-hidden="false"] .menu-nav a:nth-child(5) { transition-delay: .40s; }
.menu[aria-hidden="false"] .menu-nav a:nth-child(6) { transition-delay: .46s; }
.menu-nav a i {
  font-family: var(--mono); font-style: normal; font-size: .66rem; font-weight: 500;
  letter-spacing: .14em; color: var(--magenta);
}
.menu-nav a:active { color: var(--magenta); }
.menu-foot {
  position: relative;
  display: grid; gap: 1.4rem; justify-items: start;
  padding-top: 2rem; margin-top: 2rem;
  border-top: 1px solid var(--line);
}
.menu-cta { width: 100%; }
.menu-tels {
  display: flex; flex-wrap: wrap; gap: .4rem 1.6rem;
  font-family: var(--mono); font-size: .85rem; color: var(--ink-2);
}

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.3rem; }
.chips li {
  font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .04em;
  padding: .36rem .74rem; border-radius: 100px;
  border: 1px solid var(--line-2); color: var(--ink-2);
  background: var(--paper);
  transition: border-color .35s var(--ease-out), color .35s var(--ease-out),
              transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.chips li:hover {
  border-color: rgba(194, 23, 142, .55); color: var(--violet);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -8px rgba(194, 23, 142, .55);
}

/* =============================================================
   6. SECCIONES
   ============================================================= */

/* ---------- Splash ---------- */
.splash { display: none; }
.js .splash {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg);
  display: grid; place-items: center;
  transition: opacity .8s var(--ease-out), clip-path 1s var(--ease-out);
  animation: splashSafety .01s 4.5s forwards;
}
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.splash-logo { width: 92px; height: 92px; animation: splashPulse 2.2s var(--ease-soft) infinite; }
.splash-bar {
  display: block; width: 148px; height: 3px; border-radius: 3px;
  background: rgba(23, 16, 33, .09); overflow: hidden;
}
.splash-bar i { display: block; height: 100%; width: 100%; background-image: var(--grad); transform-origin: left; animation: splashLoad 1.5s var(--ease-out) forwards; }
.js .splash.is-out { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); }
@keyframes splashSafety { to { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); } }
@keyframes splashLoad { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes splashPulse { 0%, 100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.07); opacity: 1; } }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-block: calc(var(--nav-h) + 3.5rem) 5rem;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
}

/* El degradado del hero es la capa más cara del sitio, así que está montada
   para que el navegador la pinte UNA vez y después solo la mueva:
   · sin filter: blur() — un desenfoque de 64 px a pantalla completa se
     recalcula en cada frame; la suavidad ya la dan los propios degradados.
   · sin var(--mx/--my) dentro del degradado — cambiarlas obligaba a repintar
     los tres círculos 60 veces por segundo. Ahora main.js desplaza la capa
     entera con translate, que resuelve la tarjeta gráfica sin repintar.
   El inset es amplio para que ese desplazamiento no descubra los bordes. */
.hero-gradient {
  position: absolute; inset: -34% -26%;
  z-index: -2;
  background:
    radial-gradient(circle 34vmax at 74% 32%, rgba(194, 23, 142, .26) 0%, transparent 66%),
    radial-gradient(circle 42vmax at 86% 18%, rgba(123, 45, 150, .26) 0%, transparent 68%),
    radial-gradient(circle 30vmax at 58% 52%, rgba(245, 130, 31, .22) 0%, transparent 66%);
  opacity: .9;
  will-change: transform;
  transform: translateZ(0);
  animation: heroDrift 26s var(--ease-soft) infinite alternate;
}
@keyframes heroDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-3%, 2.5%, 0) scale(1.08); }
}

/* Velo claro: mantiene el texto legible pase por donde pase el cursor */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(94deg, var(--bg) 0%, rgba(246, 244, 250, .93) 24%, rgba(246, 244, 250, .62) 50%, rgba(246, 244, 250, .1) 76%, transparent 100%),
    linear-gradient(180deg, rgba(246, 244, 250, .88) 0%, transparent 26%, transparent 62%, var(--bg) 100%);
}

.hero-lines {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: min(25%, 220px) 100%;
  opacity: .8;
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 72%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 72%, transparent);
}

.hero-inner { position: relative; width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.hero-eyebrow { color: var(--purple); }
.js .hero-eyebrow, .js .hero-title, .js .hero-sub, .js .hero-cta, .js .hero-meta { opacity: 0; }

.hero-title {
  font-family: var(--display);
  font-weight: 700;
  /* El titular pasó a ser una frase larga: la escala baja y la caja se
     ensancha para que caiga en tres o cuatro líneas limpias en vez de
     desbordarse por los lados en pantallas estrechas. */
  font-size: clamp(2.05rem, 5.8vw, 4.5rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
  margin-top: 1.3rem;
  max-width: 17ch;
}
.hero-title em {
  font-style: italic;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Texto que leen los lectores de pantalla y los buscadores, pero no se ve. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---------- Eslogan que cambia ---------- */
/* Los cuatro mensajes ocupan la misma celda: la caja mide siempre lo que el
   mas alto, asi que al cambiar de mensaje no se mueve nada de lo de abajo. */
.rotor { display: grid; }
.rotor-msg { grid-area: 1 / 1; }
.rotor-msg:not(:first-child) { visibility: hidden; opacity: 0; }
.rotor .linea { display: block; }
/* Sin JavaScript no hay animacion: solo la primera frase, sin reservar sitio. */
html:not(.js) .rotor-msg:not(:first-child) { display: none; }

.hero-sub {
  margin-top: 1.7rem;
  max-width: 34rem;
  font-size: clamp(1rem, 1.9vw, 1.12rem);
  color: var(--ink-2);
  font-weight: 400;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.4rem; }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: .7rem 2rem;
  margin-top: 3rem; padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  font-size: .85rem; color: var(--mute);
  max-width: 40rem;
}
.hero-meta b { color: var(--ink); font-weight: 600; }

.hero-scroll {
  position: absolute; left: 50%; bottom: 1.6rem; z-index: 1;
  width: 26px; height: 42px; border-radius: 100px;
  border: 1.5px solid var(--line-2);
  transform: translateX(-50%);
  display: none; place-items: start center;
  padding-top: 8px;
  transition: border-color .4s var(--ease-out);
}
.hero-scroll:hover { border-color: var(--magenta); }
.hero-scroll span {
  width: 3px; height: 7px; border-radius: 3px; background-image: var(--grad-btn);
  animation: scrollDot 1.9s var(--ease-soft) infinite;
}
@keyframes scrollDot {
  0%   { transform: translateY(0);    opacity: 0; }
  25%  { opacity: 1; }
  75%  { transform: translateY(15px); opacity: 0; }
  100% { transform: translateY(15px); opacity: 0; }
}

/* ---------- Marquee ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 1.05rem;
  border-block: 1px solid var(--line);
  background: var(--bg-tint);
  white-space: nowrap;
}
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(40px, 10vw, 130px); z-index: 2; pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--bg-tint), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--bg-tint), transparent); }
.marquee-track { display: inline-flex; align-items: center; gap: 1.6rem; padding-right: 1.6rem; will-change: transform; }
.marquee-track span {
  font-family: var(--mono); font-size: .73rem; font-weight: 500; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-2);
}
.marquee-track i { font-style: normal; color: var(--magenta); }
.marquee-track:only-child { animation: marqueeCSS 42s linear infinite; }
@keyframes marqueeCSS { to { transform: translateX(-50%); } }

/* ---------- Marcas / clientes ---------- */
.marcas { background: var(--bg-tint); border-block: 1px solid var(--line); overflow: hidden; }

.marcas-titulo {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.8rem, 4.4vw, 3rem);
  line-height: 1.05; letter-spacing: -0.035em;
  margin-top: .9rem; max-width: 20ch;
}
.marcas-titulo em {
  font-style: italic;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.marcas-nota { color: var(--mute); margin-top: 1.2rem; max-width: 46ch; }

.marcas-cinta {
  position: relative;
  margin-top: clamp(2.4rem, 5vw, 3.4rem);
  /* Aire arriba y abajo para que el levantamiento al pasar el ratón no
     quede recortado por el overflow que mantiene la cinta en una línea. */
  padding-block: 1.5rem;
  overflow: hidden;
  white-space: nowrap;
  /* Mata el espacio en blanco entre la pista y la copia que genera main.js:
     sin esto el bucle enseña un hueco una vez por vuelta. */
  font-size: 0;
}
.marcas-cinta::before, .marcas-cinta::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  width: clamp(44px, 11vw, 150px); z-index: 2; pointer-events: none;
}
.marcas-cinta::before { left: 0;  background: linear-gradient(90deg, var(--bg-tint), transparent); }
.marcas-cinta::after  { right: 0; background: linear-gradient(270deg, var(--bg-tint), transparent); }

.marcas-pista { display: inline-flex; align-items: center; gap: 1rem; padding-right: 1rem; will-change: transform; }
/* Sin GSAP la cinta se mueve igual, solo que sin el empalme perfecto. */
.marcas-pista:only-child { animation: marqueeCSS 70s linear infinite; }

.marca {
  flex: 0 0 auto;
  width: clamp(156px, 20vw, 12.125rem);
  height: clamp(102px, 12vw, 7.5rem);
  display: grid; place-items: center;
  padding: 1rem 1.15rem;
  border-radius: 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(23, 16, 33, .05);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s var(--ease-out);
}
.marca:hover {
  transform: translateY(-7px);
  border-color: transparent;
  box-shadow: 0 22px 44px -20px rgba(91, 42, 140, .45), 0 3px 10px -5px rgba(194, 23, 142, .28);
}
/* Cada logo viene ya centrado en un lienzo de 400 x 222 px con su aire
   alrededor: ocupa el ancho de la tarjeta y todos pesan lo mismo, sean
   anchos o altos. */
.marca img { width: 100%; height: auto; }

/* Logos que traen su propio fondo de color (480 x 300 px): la imagen llena
   la tarjeta entera, sin borde para que no asome un filo blanco. */
.marca--fondo { display: block; padding: 0; border: 0; overflow: hidden; }
.marca--fondo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Manifiesto ---------- */
.manifiesto { background: var(--bg); }
/* La frase de entrada va centrada, con su etiqueta encima. text-wrap: balance
   reparte las palabras en líneas parejas para que ninguna quede colgando. */
.manifiesto .eyebrow { text-align: center; }
.manifiesto-lead {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.85rem);
  line-height: 1.14;
  letter-spacing: -0.035em;
  margin: 1.3rem auto 0;
  max-width: 30ch;
  text-align: center;
  text-wrap: balance;
}
/* Quienes somos / Que hacemos / Por que Proyecta */
.nos-grid {
  display: grid; gap: clamp(1.8rem, 4vw, 3.4rem);
  margin-top: clamp(2.6rem, 6vw, 4rem);
}
.nos-titulo {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  letter-spacing: -0.025em; line-height: 1.15;
  margin-bottom: .9rem;
}
.nos-bloque > p { color: var(--mute); max-width: 38rem; }

.nos-mvv { display: grid; margin-top: 1.6rem; border-top: 1px solid var(--line); }
.nos-mvv > div {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; align-items: baseline;
  padding-block: .95rem; border-bottom: 1px solid var(--line);
}
.nos-mvv dt {
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--purple);
}
.nos-mvv dd {
  margin: 0; font-family: var(--display); font-weight: 600;
  font-size: 1.08rem; letter-spacing: -0.015em; line-height: 1.35; color: var(--ink);
}

.nos-frentes { display: grid; gap: .8rem; margin-top: 1.6rem; }
.nos-frente {
  position: relative; display: grid; gap: .3rem;
  padding: 1.15rem 3.4rem 1.15rem 1.25rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper);
  transition: border-color .4s var(--ease-out), transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.nos-frente b { font-family: var(--display); font-weight: 700; font-size: 1.12rem; letter-spacing: -0.02em; }
.nos-frente span { color: var(--mute); font-size: .92rem; line-height: 1.5; }
.nos-frente i {
  position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%);
  font-style: normal; font-size: 1.15rem; color: var(--magenta);
  transition: transform .4s var(--ease-out);
}
.nos-frente:hover {
  border-color: transparent; transform: translateY(-3px);
  box-shadow: 0 18px 38px -20px rgba(91, 42, 140, .45), 0 0 0 1px rgba(194, 23, 142, .35);
}
.nos-frente:hover i { transform: translate(4px, -50%); }

.nos-porque {
  margin-top: clamp(3.2rem, 7vw, 5rem);
  padding-top: clamp(2.2rem, 5vw, 3rem);
  border-top: 1px solid var(--line);
}
.nos-titulo-lg {
  font-size: clamp(1.8rem, 4vw, 2.8rem); letter-spacing: -0.035em;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.nos-titulo-lg em {
  font-style: italic;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nos-razones { display: grid; gap: clamp(1.4rem, 2.6vw, 2rem); }
.nos-razon { display: grid; gap: .55rem; align-content: start; }
.nos-icono {
  width: 2.75rem; height: 2.75rem; margin-bottom: .35rem;
  display: grid; place-items: center;
  border-radius: 12px; background: var(--bg-tint); color: var(--magenta);
}
.nos-icono svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nos-razon b { font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; line-height: 1.25; }
.nos-razon p { color: var(--mute); font-size: .94rem; line-height: 1.6; max-width: 34ch; }
.nos-lema {
  margin-top: clamp(2.2rem, 5vw, 3rem);
  font-family: var(--mono); font-size: .76rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--purple);
}

@media (min-width: 720px) {
  .nos-grid { grid-template-columns: 1fr 1fr; }
  .nos-razones { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .nos-razones { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Servicios (acordeón) ---------- */
/* Desarrollo de software usa exactamente el mismo fondo y la misma lista. */
.servicios, .desarrollo { background: var(--paper); border-block: 1px solid var(--line); }
.servicios::before, .desarrollo::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 70%; z-index: 0;
  background: radial-gradient(62% 78% at 78% 38%, rgba(123, 45, 150, .12), transparent 78%);
  pointer-events: none;
}
/* Justo encima va la banda de color: el resplandor no debe asomar sobre ella. */
.desarrollo { overflow: hidden; }
.servicios > .wrap, .desarrollo > .wrap { position: relative; z-index: 1; }
.svc-list { position: relative; border-top: 1px solid var(--line); }
.svc { border-bottom: 1px solid var(--line); }

.svc-head {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .4rem 1rem;
  padding: 1.5rem 0;
  text-align: left;
  color: var(--ink-2);
  transition: color .4s var(--ease-out), padding-left .5s var(--ease-out);
}
.svc-head::before {
  content: ""; position: absolute; left: -1.5rem; right: -1.5rem; top: 0; bottom: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(194, 23, 142, .09), rgba(245, 130, 31, .04) 55%, transparent 85%);
  opacity: 0; transition: opacity .5s var(--ease-out);
  border-radius: 14px;
}
.svc-head:hover { color: var(--ink); padding-left: .7rem; }
.svc-head:hover::before { opacity: 1; }

.svc-num {
  font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .1em;
  color: var(--mute); transition: color .4s var(--ease-out);
  align-self: start; padding-top: .5rem;
}
.svc-head:hover .svc-num, .svc-head[aria-expanded="true"] .svc-num { color: var(--magenta); }

.svc-name {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.03em;
  font-size: clamp(1.25rem, 3vw, 1.9rem);
  line-height: 1.14;
  color: var(--ink);
  grid-column: 2;
}
.svc-tag {
  grid-column: 2;
  font-family: var(--mono); font-size: .65rem; font-weight: 500; letter-spacing: .11em;
  text-transform: uppercase; color: var(--mute);
}

.svc-icon {
  position: relative;
  grid-column: 3; grid-row: 1 / span 2;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid var(--line-2);
  color: var(--violet);
  flex: none;
  transition: border-color .45s var(--ease-out), background .45s var(--ease-out),
              transform .5s var(--ease-out), box-shadow .45s var(--ease-out), color .35s;
}
.svc-icon::before, .svc-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: currentColor; border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .5s var(--ease-out), opacity .35s var(--ease-out);
}
.svc-icon::before { width: 13px; height: 2px; }
.svc-icon::after  { width: 2px; height: 13px; }
.svc-head:hover .svc-icon {
  border-color: var(--magenta); transform: rotate(90deg);
  box-shadow: 0 6px 16px -6px rgba(194, 23, 142, .6);
}
.svc-head[aria-expanded="true"] .svc-icon {
  background-image: var(--grad-btn); border-color: transparent; color: #fff;
  box-shadow: 0 8px 20px -8px rgba(194, 23, 142, .7);
}
.svc-head[aria-expanded="true"] .svc-icon::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }

.svc-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .6s var(--ease-out);
}
.js .svc-body { grid-template-rows: 0fr; }
.js .svc.is-open .svc-body { grid-template-rows: 1fr; }
.svc-body-inner { overflow: hidden; opacity: 1; transition: opacity .5s var(--ease-out); }
.js .svc-body-inner { opacity: 0; }
.js .svc.is-open .svc-body-inner { opacity: 1; transition-delay: .12s; }
.svc-body-inner > * { max-width: 46rem; }
.svc-body-inner p { color: var(--mute); padding-bottom: .2rem; }
.svc-body-inner > :last-child { margin-bottom: 1.9rem; }

/* ---------- Banda CTA a todo color ---------- */
/* El degradado se movía con background-position, que el navegador no puede
   acelerar: repintaba la banda entera 60 veces por segundo, incluso estando
   fuera de pantalla. Ahora el degradado vive en una capa del doble de ancho
   que se desliza con transform, y main.js la detiene cuando no se ve. */
.cta-band {
  position: relative;
  padding-block: clamp(3.2rem, 7vw, 5rem);
  background-color: var(--purple);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.cta-band::before {
  content: "";
  position: absolute; top: 0; left: 0; z-index: -1;
  width: 200%; height: 100%;
  background-image: var(--grad);
  will-change: transform;
  animation: bandShift 18s var(--ease-soft) infinite alternate;
}
@keyframes bandShift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-44%, 0, 0); }
}
.cta-band-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem;
}
.cta-band-inner p {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.035em;
  font-size: clamp(1.6rem, 4.4vw, 2.7rem);
  line-height: 1.08;
  max-width: 20ch;
}

/* ---------- Desarrollo de software ---------- */
/* Mismo fondo y misma lista desplegable que Marketing y publicidad (ver
   "Servicios"): los dos pilares se leen igual y la banda de color que va
   entre ambos hace de separación. */
.dev-cierre {
  margin-top: clamp(2.4rem, 5vw, 3.4rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.6rem;
}
.dev-cierre p {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem); letter-spacing: -0.02em; line-height: 1.3;
  color: var(--ink); max-width: 34ch;
}

/* ---------- Servicios de software (tarjetas con cambio de imagen) ----------
   Cada tarjeta lleva dos imágenes apiladas del mismo tamaño. Al pasar el
   ratón, la primera se desvanece y, cuando ya se fue, aparece la segunda con
   un leve acercamiento; al salir, lo mismo al revés. Solo se animan opacity
   y transform, que van por la tarjeta gráfica. En celular, main.js alterna
   la clase .is-alt al tocar la tarjeta. */
.soft { margin-top: clamp(3.6rem, 8vw, 5.6rem); }
.soft-head { max-width: 44rem; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.soft-titulo {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1.08; letter-spacing: -0.035em;
  margin-top: .9rem;
}
.soft-titulo em {
  font-style: italic;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.soft-nota { color: var(--mute); margin-top: 1rem; max-width: 36rem; }

.soft-grid { display: grid; gap: clamp(1rem, 2vw, 1.4rem); }
.soft-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: .85rem .85rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(23, 16, 33, .04);
  -webkit-tap-highlight-color: transparent;
}
.soft-media {
  position: relative;
  aspect-ratio: 560 / 431;
  border-radius: 12px;
  border: 1px solid var(--line);
  overflow: hidden;
  /* Lo que asoma en el instante entre una imagen y otra */
  background: linear-gradient(155deg, #F1ECFB, #FBF9FE 65%, #FDF3EA);
}
.soft-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Estado normal: se ve la imagen clara. Al volver, entra cuando la otra ya salió. */
.soft-img--a {
  transition: opacity .55s var(--ease-out) .32s, transform .8s var(--ease-out) .32s;
}
.soft-img--b {
  opacity: 0; transform: scale(1.045);
  transition: opacity .32s cubic-bezier(.4, 0, 1, 1), transform .32s cubic-bezier(.4, 0, 1, 1);
}
/* Estado alterno: primero se va la clara y después aparece la ilustración. */
.soft-card.is-alt .soft-img--a {
  opacity: 0; transform: scale(.985);
  transition: opacity .32s cubic-bezier(.4, 0, 1, 1), transform .32s cubic-bezier(.4, 0, 1, 1);
}
.soft-card.is-alt .soft-img--b {
  opacity: 1; transform: none;
  transition: opacity .55s var(--ease-out) .32s, transform .8s var(--ease-out) .32s;
}
@media (hover: hover) and (pointer: fine) {
  .soft-card:hover .soft-img--a {
    opacity: 0; transform: scale(.985);
    transition: opacity .32s cubic-bezier(.4, 0, 1, 1), transform .32s cubic-bezier(.4, 0, 1, 1);
  }
  .soft-card:hover .soft-img--b {
    opacity: 1; transform: none;
    transition: opacity .55s var(--ease-out) .32s, transform .8s var(--ease-out) .32s;
  }
  .soft-card:hover {
    transform: translateY(-6px);
    border-color: rgba(194, 23, 142, .35);
    box-shadow: 0 20px 44px -20px rgba(91, 42, 140, .45), 0 4px 12px -6px rgba(194, 23, 142, .3);
  }
}

.soft-body { display: flex; flex-direction: column; flex: 1; padding: 1.3rem .55rem 0; }
.soft-body h4 {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.03em;
  font-size: 1.35rem; line-height: 1.2; margin-bottom: .55rem;
}
.soft-body p { color: var(--mute); font-size: .93rem; line-height: 1.6; }
/* Las etiquetas quedan pegadas abajo: se alinean de tarjeta a tarjeta
   aunque un texto sea más largo que otro. */
.soft-body .chips { margin-top: auto; padding-top: 1.1rem; }

/* Tableta: imagen a la izquierda y texto a la derecha, una tarjeta por fila. */
@media (min-width: 760px) and (max-width: 1099.98px) {
  .soft-card { flex-direction: row; align-items: stretch; gap: 1.4rem; padding: .85rem; }
  .soft-media { flex: 0 0 48%; align-self: center; }
  .soft-body { padding: .5rem .6rem .5rem 0; }
}
@media (min-width: 1100px) {
  .soft-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Productos ---------- */
.productos { background: var(--bg); }
.prod-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.prod {
  position: relative;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 1px 2px rgba(23, 16, 33, .04);
  transition: transform .5s var(--ease-out), border-color .45s var(--ease-out), box-shadow .5s var(--ease-out);
}
.prod::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(160deg, rgba(194, 23, 142, .07), rgba(245, 130, 31, .05) 70%, transparent);
  opacity: 0; transition: opacity .5s var(--ease-out);
}
.prod:hover {
  transform: translateY(-6px);
  border-color: rgba(194, 23, 142, .35);
  box-shadow: 0 20px 44px -20px rgba(91, 42, 140, .45), 0 4px 12px -6px rgba(194, 23, 142, .3);
}
.prod:hover::before { opacity: 1; }

.prod-art {
  position: relative;
  aspect-ratio: 200 / 140;
  border-radius: 12px;
  background: linear-gradient(155deg, #F1ECFB, #FBF9FE 65%, #FDF3EA);
  border: 1px solid var(--line);
  margin-bottom: 1.3rem;
  overflow: hidden;
}
/* translateZ(0) reserva una capa para cada ilustración. Sin él, al pasar el
   ratón el navegador vuelve a dibujar el SVG entero —trazo a trazo— en cada
   uno de los fotogramas del zoom, y con doce tarjetas se nota. */
.prod-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: translateZ(0);
  transition: transform .55s var(--ease-out);
}
.prod:hover .prod-art img { transform: scale(1.05) translateZ(0); }

.prod h3 {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.03em;
  font-size: 1.4rem; margin-bottom: .5rem;
}
.prod p { color: var(--mute); font-size: .93rem; }
.prod-link {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.2rem;
  font-family: var(--mono); font-size: .67rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--magenta);
}
.prod-link i {
  display: block; width: 16px; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: width .5s var(--ease-out);
}
.prod:hover .prod-link i { width: 30px; }

/* Tres productos a la vista; los que llevan prod--extra esperan al botón
   "Ver más". Sin JavaScript no hay clase .js y se ven los seis. Al abrirse
   entran escalonados; main.js les pone --i (0, 1, 2) para el retraso. La
   animación solo "rellena hacia atrás": al terminar suelta el transform y
   el levantamiento al pasar el ratón sigue funcionando. */
.js .prod-grid:not(.is-open) .prod--extra { display: none; }
.prod-grid.is-open .prod--extra {
  animation: prodEntra .75s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes prodEntra { from { opacity: 0; transform: translateY(26px); } }

.prod-mas { display: flex; justify-content: center; margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.prod-mas .btn:hover svg { transform: translateY(2px); }
.prod-mas .btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.prod-mas .btn[aria-expanded="true"]:hover svg { transform: rotate(180deg) translateY(2px); }

/* ---------- Cifras ---------- */
.stats { background: var(--bg-tint); border-block: 1px solid var(--line); padding-block: clamp(3rem, 7vw, 5rem); }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
.stat b {
  display: flex; align-items: baseline; width: fit-content;
  font-family: var(--display); font-weight: 700; letter-spacing: -0.045em;
  font-size: clamp(2.5rem, 7.5vw, 4rem); line-height: 1;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.stat b i { font-style: normal; font-size: .55em; }
/* ">" es obligatorio: sin él, esta regla también encogería el número de <b> */
.stat > span {
  display: block; margin-top: .5rem;
  font-family: var(--mono); font-size: .67rem; font-weight: 500; letter-spacing: .11em;
  text-transform: uppercase; color: var(--mute);
}

/* ---------- Proceso ---------- */
.proceso { background: var(--paper); border-block: 1px solid var(--line); }
.steps { display: grid; gap: 0; }
.step {
  position: relative;
  padding: 1.8rem 0;
  border-top: 1px solid var(--line);
  display: grid; gap: .45rem;
  transition: padding-left .5s var(--ease-out);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0;
  background-image: var(--grad-btn);
  transition: width .8s var(--ease-out);
}
.step:hover::before { width: 100%; }
.step:hover { padding-left: .7rem; }
.step-num {
  font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .14em; color: var(--magenta);
}
.step h3 {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.03em;
  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
}
.step p { color: var(--mute); max-width: 46rem; }

/* ---------- Contacto ---------- */
.contacto { background: var(--bg); overflow: hidden; }
.contacto-glow {
  position: absolute; inset: -30% -20% auto -20%; height: 85%; z-index: 0;
  /* Igual que en servicios: la suavidad la da el propio degradado, no un
     filter: blur() de 70 px que el navegador rehace al desplazarse. */
  background: radial-gradient(58% 72% at 20% 28%, rgba(194, 23, 142, .16), transparent 76%),
              radial-gradient(52% 64% at 82% 60%, rgba(245, 130, 31, .15), transparent 76%);
  pointer-events: none;
}
.contacto-grid { position: relative; z-index: 1; display: grid; gap: clamp(2.6rem, 6vw, 4rem); }
.contacto-note { color: var(--mute); margin-top: 1.5rem; max-width: 32rem; }

.contacto-data { display: grid; gap: 1.6rem; margin-top: 2.6rem; }
.contacto-data li { display: grid; gap: .2rem; }
.contacto-data .eyebrow { margin-bottom: .35rem; }
.contacto-data a, .contacto-data p {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.03em;
  font-size: 1.4rem; line-height: 1.3; color: var(--ink);
  width: fit-content;
}
.contacto-data a { position: relative; transition: color .35s var(--ease-out); }
.contacto-data a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 2px;
  background-image: var(--grad-btn); transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease-out);
}
.contacto-data a:hover { color: var(--violet); }
.contacto-data a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Formulario ---------- */
.contacto-form-wrap {
  position: relative;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  background: var(--paper);
  box-shadow: 0 24px 60px -30px rgba(91, 42, 140, .4), 0 2px 6px -3px rgba(23, 16, 33, .07);
}

.form { display: grid; gap: .85rem; transition: opacity .55s var(--ease-out), transform .55s var(--ease-soft); }
.form.is-sent { opacity: 0; transform: translateY(-14px); pointer-events: none; }
.field-row { display: grid; gap: .85rem; }

.field { position: relative; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 1.5rem .95rem .6rem;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #FBFAFE;
  color: var(--ink);
  font-size: .95rem;
  transition: border-color .35s var(--ease-out), background .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 120px; padding-top: 1.6rem; }
.field label {
  position: absolute; left: 1rem; top: 1.05rem;
  font-size: .93rem; color: var(--mute);
  pointer-events: none;
  transform-origin: left top;
  transition: transform .3s var(--ease-out), color .3s var(--ease-out);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--magenta);
  background: var(--paper);
  box-shadow: 0 0 0 4px rgba(194, 23, 142, .13);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  transform: translateY(-.72rem) scale(.76);
  color: var(--magenta);
}
.field input:user-invalid, .field textarea:user-invalid, .field select:user-invalid {
  border-color: var(--ember);
}

.field-select { position: relative; }
.field-select select {
  padding: 1.05rem .95rem;
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
}
.field-caret {
  position: absolute; right: 1.1rem; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  transition: border-color .3s var(--ease-out);
}
.field-select select:focus ~ .field-caret { border-color: var(--magenta); }

.btn-submit { margin-top: .6rem; width: 100%; padding-block: 1.05rem; }
.btn-spinner {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-out);
}
.btn-spinner::after {
  content: ""; width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: spin .85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.form.is-sending .btn-label { opacity: 0; }
.form.is-sending .btn-spinner { opacity: 1; }
.form.is-sending .btn-submit { pointer-events: none; }
.btn-label { transition: opacity .25s var(--ease-out); }

.form-legal { font-size: .74rem; color: var(--mute); text-align: center; margin-top: .3rem; }

/* ---------- Seguridad del formulario ---------- */
/* El captcha reserva su alto (65 px) desde el principio: asi el boton no
   salta hacia abajo cuando el widget de Cloudflare termina de cargar. */
.captcha {
  min-height: 65px;
  display: grid; align-items: center;
  border-radius: 12px;
}
.captcha[data-estado="pendiente"], .captcha[data-estado="error"] {
  border: 1.5px dashed var(--line-2);
  padding-inline: 1rem;
}
.captcha[data-estado="listo"] .captcha-espera { display: none; }
.captcha-espera { font-size: .82rem; color: var(--mute); }
.captcha.is-error { outline: 2px solid var(--ember); outline-offset: 3px; }
.captcha iframe { max-width: 100%; }

.form-error {
  font-size: .86rem; line-height: 1.45;
  color: #9E2A10;
  background: rgba(232, 86, 43, .08);
  border: 1px solid rgba(232, 86, 43, .3);
  border-radius: 10px;
  padding: .7rem .9rem;
}
.field.is-error input, .field.is-error textarea, .field.is-error select { border-color: var(--ember); }
.field-msg { display: block; margin-top: .35rem; font-size: .78rem; line-height: 1.4; color: #9E2A10; }
/* Con el aviso debajo el campo crece: la flecha del desplegable se queda a
   la altura del select en vez de bajar al centro del conjunto. */
.field-select.is-error .field-caret { top: 1.85rem; }

/* Campo trampa: fuera de la vista y del teclado para las personas, pero
   presente en el codigo, que es lo unico que leen los bots. */
.campo-trampa {
  position: absolute; left: -10000px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.form-success {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; text-align: center;
  gap: .7rem; padding: 2rem;
  opacity: 0; pointer-events: none;
  transform: translateY(14px);
  transition: opacity .7s var(--ease-out) .2s, transform .8s var(--ease-soft) .2s;
}
.form-success.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.form-success h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; font-size: 1.7rem; }
.form-success p { color: var(--mute); max-width: 26rem; }
.form-success-mark {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background-image: var(--grad-btn);
  box-shadow: 0 10px 26px -10px rgba(194, 23, 142, .7);
  margin-bottom: .4rem;
}
.form-success-mark svg { width: 26px; height: 26px; }
.form-success-mark path {
  fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 26; stroke-dashoffset: 26;
  transition: stroke-dashoffset .6s var(--ease-out) .5s;
}
.form-success.is-visible .form-success-mark path { stroke-dashoffset: 0; }

/* ---------- Footer (cierra en oscuro) ---------- */
.footer {
  background: var(--bg-deep);
  color: #EDE8F5;
  padding-block: clamp(3rem, 7vw, 4.5rem) 2rem;
}
.footer .eyebrow { color: #B79CD6; }
.footer .brand-text span { color: #9E92B4; }
/* Sobre fondo oscuro el degradado de texto arranca demasiado apagado */
.footer .brand-text strong {
  background-image: linear-gradient(96deg, #C77BE8 0%, var(--pink) 46%, var(--amber) 100%);
}
.footer-top {
  display: grid; gap: 1.2rem; padding-bottom: 2.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.footer-claim {
  color: #C9BEDC;
  font-family: var(--display); font-weight: 600; letter-spacing: -0.03em;
  font-size: 1.2rem; max-width: 26rem; line-height: 1.3;
}

.footer-cols {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem;
  padding-block: 2.6rem;
}
.footer-cols > div { display: flex; flex-direction: column; gap: .55rem; }
.footer-cols .eyebrow { margin-bottom: .35rem; }
.footer-cols a {
  font-size: .9rem; color: #D6CEE6; width: fit-content;
  transition: color .3s var(--ease-out), transform .35s var(--ease-out);
}
.footer-cols a:hover { color: var(--amber); transform: translateX(3px); }

.socials { flex-direction: row !important; gap: .6rem !important; }
.socials a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  display: grid; place-items: center;
  transition: border-color .4s var(--ease-out), background .4s var(--ease-out),
              transform .4s var(--ease-out), color .4s, box-shadow .4s var(--ease-out);
}
.socials a svg { width: 17px; height: 17px; fill: currentColor; }
.socials a:hover {
  border-color: transparent; background-image: var(--grad-btn); color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -10px rgba(230, 46, 139, .9);
}

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: .8rem 1.5rem;
  justify-content: space-between; align-items: center;
  padding-top: 1.8rem; border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .78rem; color: #9E92B4;
}
.footer-top-link { transition: color .3s var(--ease-out); }
.footer-top-link:hover { color: var(--amber); }

/* =============================================================
   7. EFECTOS
   ============================================================= */
[data-reveal] { opacity: 1; transform: none; }
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .85s var(--ease-out), transform .95s var(--ease-out);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* Defensa: si un elemento lleva reveal + split, nunca queda invisible */
.js [data-reveal][data-split] { opacity: 1; transform: none; }

/* Al partir el texto en palabras, el degradado recortado sobre <em> deja de
   aplicarse (el texto pasa a vivir en un inline-block descendiente), así que
   se vuelve a declarar sobre la palabra ya partida. */
.hero-title em .split-word-i,
.section-title em .split-word-i,
.marcas-titulo em .split-word-i,
.manifiesto-lead em .split-word-i {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Máscara por palabra: el interior sube desde detrás de su propia línea */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
/* Sin will-change permanente: cada palabra de cada titular reservaba una capa
   de memoria en la tarjeta gráfica para siempre. GSAP ya la crea al animar. */
.split-word-i { display: inline-block; }

/* Grano de impresión muy leve sobre el hero */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  /* Sin mix-blend-mode: al mezclarse con lo de abajo, esta capa obligaba a
     recomponer todo el hero en cada frame del degradado. El grano es negro,
     así que sobre fondo claro se ve prácticamente igual sin la mezcla. */
  pointer-events: none; opacity: .08;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}
.hero-inner, .hero-scroll { z-index: 1; }

/* Las animaciones en bucle se pausan cuando su sección sale de la pantalla.
   main.js pone y quita .anim-off; sin esto seguirían gastando frames y
   batería mientras el visitante lee otra parte del sitio. */
.anim-off .hero-gradient,
.anim-off .hero-scroll span,
.anim-off.cta-band::before { animation-play-state: paused; }

/* =============================================================
   8. RESPONSIVE
   ============================================================= */
@media (min-width: 540px) {
  .field-row { grid-template-columns: 1fr 1fr; }
  .cta-band-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; }
  .footer-top { grid-template-columns: auto 1fr; align-items: center; gap: 2.5rem; }
}

@media (min-width: 720px) {
  .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-cols { grid-template-columns: repeat(4, 1fr); }
  .prod { padding: 1.7rem; }
  .hero-scroll { display: grid; }
  .step { grid-template-columns: 80px 1fr; align-items: baseline; column-gap: 1.5rem; padding-block: 2.2rem; }
  .step-num { grid-row: 1 / span 2; padding-top: .5rem; }
  .step h3 { grid-column: 2; }
  .step p { grid-column: 2; }
  .svc-head { grid-template-columns: 64px 1fr auto; padding-block: 1.9rem; }
  .svc-body-inner > * { margin-left: calc(64px + 1rem); }
}

@media (min-width: 960px) {
  :root { --nav-h: 5.375rem; }
  .nav-links { display: flex; }
  .nav-actions .btn-primary { display: inline-flex; }
  .burger { display: none; }
  .menu { display: none; }
  .prod-grid { grid-template-columns: repeat(3, 1fr); }
  .contacto-grid { grid-template-columns: 1fr 1fr; align-items: start; gap: 4rem; }
  .contacto-form-wrap { position: sticky; top: calc(var(--nav-h) + 2rem); }
  .svc-name { grid-column: 2; }
  .svc-tag {
    grid-column: 3; grid-row: 1; justify-self: end;
    padding-right: 4rem; text-align: right;
  }
  .svc-icon { grid-column: 4; grid-row: 1; }
  .svc-head { grid-template-columns: 80px minmax(0, 1fr) auto 38px; }
  .svc-body-inner > * { margin-left: calc(80px + 1rem); }
}

/* Entre 960 y 1023 px el menú entra justo: se juntan un poco los enlaces
   para que quepan en una línea sin rozar el botón de cotización. */
@media (min-width: 960px) and (max-width: 1023.98px) {
  .nav-links { gap: 1.25rem; }
}

/* Pantalla ancha: el eslogan a la izquierda; la entrada, los botones y los
   datos a la derecha, alineados abajo. Ocupa el ancho que antes llenaba el
   logo que giraba, en vez de dejar el texto arrinconado y media pantalla
   vacia. En portatiles de 768 px de alto, ademas, el hero cabe entero. */
@media (min-width: 1200px) {
  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    column-gap: clamp(3rem, 5.5vw, 7.5rem);
    align-items: end;
  }
  .hero-title { max-width: none; font-size: clamp(3.2rem, 4.2vw, 4.8rem); }
  .hero-side .hero-sub { margin-top: 0; }
  .hero-meta { max-width: none; }
}

@media (min-width: 1280px) {
  .prod { padding: 1.9rem; }
}

/* =============================================================
   9. MOVIMIENTO REDUCIDO
   Solo se desactiva lo intrusivo: bucles largos y la deriva del
   fondo. Los micro-hovers y los fundidos se mantienen, porque Windows
   activa esta preferencia por defecto en muchos equipos.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-gradient { animation: none; }
  .hero-scroll span { animation: none; opacity: 1; }
  .splash-logo { animation: none; }
  .cta-band::before { animation: none; }
  .marquee-track:only-child { animation-duration: 120s; }
  .marcas-pista:only-child { animation-duration: 200s; }
}