/* ==========================================================================
   ÓRBITA — Hoja base
   Tokens, tipografía, layout y componentes.
   La capa de movimiento vive en effects.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */

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

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

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

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Superficies */
  --bg: #05060a;
  --bg-elev: #0a0d16;
  --surface: rgba(255, 255, 255, 0.028);
  --surface-hi: rgba(255, 255, 255, 0.055);

  /* Bordes */
  --line: rgba(255, 255, 255, 0.09);
  --line-hi: rgba(255, 255, 255, 0.16);

  /* Texto */
  --text: #eef1f8;
  --text-dim: #a7b0c7;
  --text-mute: #6b7590;

  /* Acentos */
  --blue: #4d8dff;
  --purple: #a855f7;
  --cyan: #22d3ee;
  --grad: linear-gradient(115deg, var(--blue) 0%, var(--purple) 52%, var(--cyan) 100%);
  --grad-soft: linear-gradient(115deg, rgba(77, 141, 255, 0.16), rgba(168, 85, 247, 0.1) 55%, rgba(34, 211, 238, 0.14));

  /* Tipografía */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --fs-hero: clamp(2.9rem, 8.5vw, 7rem);
  --fs-h2: clamp(2rem, 4.6vw, 3.6rem);
  --fs-h3: clamp(1.2rem, 1.9vw, 1.55rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body: clamp(0.975rem, 1vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  /* Ritmo */
  --shell: 1280px;
  --gutter: clamp(1.15rem, 4vw, 3rem);
  --section-y: clamp(4rem, 7.5vw, 7rem);
  --gap: clamp(1.25rem, 2.4vw, 2rem);

  /* Formas */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Movimiento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.2s;
  --t-med: 0.35s;
  --t-slow: 0.6s;

  /* Sombras */
  --glow: 0 0 0 1px rgba(77, 141, 255, 0.25), 0 18px 50px -18px rgba(77, 141, 255, 0.55);
  --lift: 0 24px 60px -28px rgba(0, 0, 0, 0.9);

  /* Capas */
  --z-bg: 0;
  --z-content: 1;
  --z-header: 100;
  --z-curtain: 200;
  --z-preloader: 300;
  --z-modal: 400;
  --z-grain: 500;
  --z-cursor: 600;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Lenis toma el control del scroll cuando está activo */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* clip, no hidden: overflow-x:hidden obliga a overflow-y:auto, convierte al
     body en contenedor de scroll y ScrollTrigger deja de calcular bien las
     posiciones (los revelados nunca se disparan). clip recorta igual sin
     crear contenedor de scroll. */
  overflow-x: clip;
}

/* Halo de color fijo detrás de todo el documento */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 15% 0%, rgba(77, 141, 255, 0.16), transparent 60%),
    radial-gradient(50% 40% at 85% 12%, rgba(168, 85, 247, 0.13), transparent 60%),
    radial-gradient(70% 50% at 50% 100%, rgba(34, 211, 238, 0.08), transparent 65%);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }

p {
  color: var(--text-dim);
  text-wrap: pretty;
}

::selection {
  background: rgba(77, 141, 255, 0.35);
  color: #fff;
}

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

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  z-index: var(--z-content);
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: clamp(3rem, 6vw, 5rem);
}

main,
.site-footer {
  position: relative;
  z-index: var(--z-content);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--blue);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: top var(--t-fast) var(--ease);
}

.skip-link:focus {
  top: 1rem;
}

/* Visible solo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Encabezado de sección */

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
  padding: 0.35rem 0.9rem 0.35rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-dim);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}

.section-head p {
  margin-top: 1.1rem;
  font-size: var(--fs-lead);
  color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   5. Botones
   -------------------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.85rem 1.6rem;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease),
    background-color var(--t-med) var(--ease), border-color var(--t-med) var(--ease),
    color var(--t-med) var(--ease);
}

.btn--primary {
  background: var(--grad);
  background-size: 180% 100%;
  color: #fff;
  box-shadow: 0 14px 40px -16px rgba(77, 141, 255, 0.9);
}

.btn--primary:hover {
  background-position: 100% 0;
  box-shadow: 0 20px 55px -16px rgba(168, 85, 247, 0.95);
}

.btn--ghost {
  border: 1px solid var(--line-hi);
  background: var(--surface);
  color: var(--text);
}

.btn--ghost:hover {
  border-color: rgba(77, 141, 255, 0.65);
  background: rgba(77, 141, 255, 0.1);
}

.btn--lg {
  min-height: 60px;
  padding: 1.1rem 2.4rem;
  font-size: 1.05rem;
}

.btn__arrow {
  transition: transform var(--t-med) var(--ease);
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   6. Header y navegación
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  transition: transform var(--t-med) var(--ease), background-color var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease), backdrop-filter var(--t-med) var(--ease);
  border-bottom: 1px solid transparent;
}

.site-header.is-stuck {
  background: rgba(5, 6, 10, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.05rem;
  transition: padding var(--t-med) var(--ease);
}

.site-header.is-stuck .header__inner {
  padding-block: 0.7rem;
}

/* Marca */

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

/* Lockup oficial de marca. No se recolorea ni se rota: las guías del kit
   prohíben expresamente rotar el anillo y alterar el gradiente.
   Altura mínima 38px porque el kit fija 140px de ancho mínimo para el
   lockup horizontal (relación 3.73:1) y por debajo el trazo se pierde. */
.brand__logo {
  width: auto;
  height: 44px;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}

.brand:hover .brand__logo {
  opacity: 0.82;
  transform: translateY(-1px);
}

.footer__about .brand__logo {
  height: 52px;
}

/* Navegación */

.nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nav__link {
  position: relative;
  padding: 0.6rem 0.95rem;
  border-radius: var(--r-pill);
  color: var(--text-dim);
  font-size: 0.94rem;
  font-weight: 500;
  transition: color var(--t-fast) var(--ease);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0.95rem;
  right: 0.95rem;
  bottom: 0.35rem;
  height: 1px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med) var(--ease);
}

.nav__link:hover {
  color: var(--text);
}

.nav__link:hover::after,
.nav__link.is-active::after {
  transform: scaleX(1);
}

.nav__link.is-active {
  color: var(--text);
}

.nav__cta {
  margin-left: 0.6rem;
  min-height: 44px;
  padding: 0.65rem 1.35rem;
  font-size: 0.9rem;
}

/* Botón hamburguesa */

.menu-toggle {
  display: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
}

.menu-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  margin: 2.5px 0;
  border-radius: 2px;
  background: var(--text);
  transition: transform var(--t-med) var(--ease), opacity var(--t-fast) var(--ease);
}

.menu-toggle[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}

.menu-toggle[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-4px) rotate(-45deg);
}

/* Barra de progreso de lectura */

.scroll-progress {
  height: 2px;
  background: transparent;
}

.scroll-progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-top: clamp(6.5rem, 12vh, 8.5rem);
  padding-bottom: clamp(3rem, 6vh, 5rem);
  overflow: hidden;
}

.hero--inner {
  min-height: 62svh;
  align-items: flex-end;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero__title {
  max-width: 16ch;
  margin-bottom: 1.6rem;
}

.hero--inner .hero__title {
  max-width: 20ch;
}

.hero__lead {
  max-width: 44ch;
  margin-bottom: 2.4rem;
  font-size: var(--fs-lead);
  color: var(--text-dim);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 2.5rem;
}

/* Anillos orbitales decorativos */

.hero__orbits {
  position: absolute;
  top: 50%;
  right: -6vw;
  z-index: 1;
  width: min(46vw, 620px);
  aspect-ratio: 1;
  translate: 0 -50%;
  pointer-events: none;
  /* Sin atenuación de grupo: así el logo y los aros se gradúan por separado
     y la marca puede ser lo más brillante de la composición. */
  opacity: 1;
}

.hero__orbits svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.orbit-ring {
  fill: none;
  stroke: url(#orbitGrad);
  stroke-width: 0.6;
  opacity: 0.5;
  transform-origin: 50% 50%;
  animation: orbit-spin 28s linear infinite;
}


/* --- El anillo intermedio es el isotipo de la marca ---------------------
   No gira: el kit prohíbe rotar el anillo. En su lugar se dibuja solo al
   cargar y el planeta respira despacio. Todo en CSS, así que también
   funciona si el JS o el CDN fallan. */

/* Los dos números para ajustar el logo del hero:
   esta opacidad y la escala del atributo transform del <g> en el HTML (0.33). */
.hero-logo {
  opacity: 0.85;
}

/* --- Estrella del centro -------------------------------------------------
   box-shadow no existe en SVG, así que va como elemento HTML encima. Se centra
   con márgenes negativos, no con transform, para dejar transform libre para el
   latido: si se combinan, el navegador aplica translate antes que transform y
   la escala arrastraría también el centrado.
   Los desenfoques van en proporción al tamaño, así que la estrella se puede
   redimensionar con una sola variable. Las proporciones son las del original
   de 300px: 50, 80 y 300 de desenfoque, con desplazamientos de 20 y 10. */

.hero-star {
  --star: clamp(16px, 2.6vw, 34px);
  /* Los del ejemplo eran #f0f y #0ff; aquí van los acentos de la web, que ya
     usan el aro y el punto que orbita. */
  --star-a: #a855f7;
  --star-b: #22d3ee;

  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: calc(var(--star) / -2);
  margin-left: calc(var(--star) / -2);
  width: var(--star);
  height: var(--star);
  border-radius: 50%;
  pointer-events: none;

  box-shadow:
    inset 0 0 calc(var(--star) * 0.167) #fff,
    inset calc(var(--star) * 0.067) 0 calc(var(--star) * 0.267) var(--star-a),
    inset calc(var(--star) * -0.067) 0 calc(var(--star) * 0.267) var(--star-b),
    inset calc(var(--star) * 0.067) 0 var(--star) var(--star-a),
    inset calc(var(--star) * -0.067) 0 var(--star) var(--star-b),
    0 0 calc(var(--star) * 0.167) #fff,
    calc(var(--star) * -0.033) 0 calc(var(--star) * 0.267) var(--star-a),
    calc(var(--star) * 0.033) 0 calc(var(--star) * 0.267) var(--star-b);

  animation: hero-star-latido 5.5s var(--ease-soft) infinite;
}

@keyframes hero-star-latido {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50% { transform: scale(1.14); opacity: 1; }
}

/* El estado por defecto es el FINAL: logo dibujado y visible. La animación
   arranca desde lo oculto con fill-mode backwards. Así, si las animaciones no
   llegan a ejecutarse, el logo se ve igualmente en lugar de desaparecer. */

/* Ni retardo ni fill-mode: la espera va dentro de los keyframes. Así el valor
   por defecto de la propiedad ya es el estado final visible, y si las
   animaciones no llegaran a ejecutarse el logo se ve igual en vez de
   desaparecer. Con animation-delay + backwards no era el caso. */
.hero-logo__arc {
  stroke-dasharray: var(--len);
  stroke-dashoffset: 0;
  animation: hero-logo-draw 2.2s var(--ease);
}

/* Longitudes reales de los arcos: 128° y 153° sobre un radio de 100 */
.hero-logo__arc--1 { --len: 223.41; }
.hero-logo__arc--2 { --len: 267.05; animation-duration: 2.6s; }

@keyframes hero-logo-draw {
  0%, 18% { stroke-dashoffset: var(--len); }
  100% { stroke-dashoffset: 0; }
}

/* Los cuerpos orbitan; el anillo no se mueve. El giro va en el grupo y la
   entrada en el círculo, para que no compitan por la misma propiedad.
   El origen local del grupo ya es el centro del anillo, así que rota sobre 0,0.
   El satélite está algo más cerca del centro que el planeta, así que va más
   rápido, como haría de verdad. */
.hero-logo__orbit {
  transform-origin: 0 0;
  animation: orbit-spin 30s linear infinite;
}

.hero-logo__orbit--satelite {
  animation-duration: 22s;
}

.hero-logo__planeta,
.hero-logo__satelite {
  transform-box: fill-box;
  transform-origin: center;
}

.hero-logo__planeta {
  animation: hero-logo-pop 2.9s var(--ease);
}

.hero-logo__satelite {
  animation: hero-logo-pop 3.2s var(--ease);
}

/* Aparecen cuando el anillo ya está trazado: se quedan escondidos el primer
   72% del recorrido y entran al final. */
@keyframes hero-logo-pop {
  0%, 72% { opacity: 0; transform: scale(0.2); }
  100% { opacity: 1; transform: scale(1); }
}

.orbit-dot {
  transform-origin: 50% 50%;
  animation: orbit-spin 12s linear infinite;
}

@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}

/* Indicador de scroll */

/* Vertical a propósito: en horizontal el gesto se leía como "desliza al
   costado" en vez de "baja". */
.hero__scroll-wrap {
  margin-top: 1.75rem;
}

/* En viewports bajos el hero ya llena la pantalla y la pista sobra */
@media (max-height: 720px) {
  .hero__scroll-wrap {
    display: none;
  }
}

.hero__scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-mute);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero__scroll-line {
  position: relative;
  width: 1px;
  height: 38px;
  background: var(--line-hi);
  overflow: hidden;
}

/* Destello que cae por el riel */
.hero__scroll-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 45%;
  background: var(--grad);
  animation: scroll-drop 2.1s var(--ease-soft) infinite;
}

.hero__scroll-arrow {
  font-size: 0.9rem;
  line-height: 1;
  color: var(--cyan);
  animation: scroll-nudge 2.1s var(--ease-soft) infinite;
}

@keyframes scroll-drop {
  0% { transform: translateY(-100%); opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translateY(230%); opacity: 0; }
}

@keyframes scroll-nudge {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(4px); opacity: 1; }
}

/* --------------------------------------------------------------------------
   8. Tarjetas (base compartida)
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  isolation: isolate;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition: transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease),
    background-color var(--t-med) var(--ease);
}

/* Borde degradado que aparece al pasar el ratón.
   z-index positivo: en tarjetas con imagen opaca (portafolio) un valor
   negativo dejaría el borde superior escondido debajo de la imagen. */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(77, 141, 255, 0.75), rgba(168, 85, 247, 0.4) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
  pointer-events: none;
}

/* Foco de luz que sigue al puntero */
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    360px circle at var(--mx, 50%) var(--my, 50%),
    rgba(77, 141, 255, 0.16),
    transparent 62%
  );
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
  pointer-events: none;
}

.card:hover {
  border-color: transparent;
  background: var(--surface-hi);
}

.card:hover::before,
.card:hover::after {
  opacity: 1;
}

.card__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--grad-soft);
  font-size: 1.5rem;
  transition: transform var(--t-med) var(--ease);
}

.card:hover .card__icon {
  transform: translateY(-3px) rotate(-6deg);
}

.card h3 {
  margin-bottom: 0.75rem;
}

.card p {
  font-size: var(--fs-body);
}

/* --------------------------------------------------------------------------
   9. Servicios
   -------------------------------------------------------------------------- */

.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--gap);
}

.service__list {
  display: grid;
  gap: 0.15rem;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}

.service__list li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.75rem;
  color: var(--text-dim);
  font-size: 0.95rem;
}

.service__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 10px rgba(77, 141, 255, 0.7);
}

.service__tag {
  position: absolute;
  top: clamp(1.6rem, 3vw, 2.4rem);
  right: clamp(1.6rem, 3vw, 2.4rem);
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--text-mute);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   10. Métricas
   -------------------------------------------------------------------------- */

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--gap);
}

.metric {
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--t-med) var(--ease), background-color var(--t-med) var(--ease),
    transform var(--t-med) var(--ease);
}

.metric:hover {
  border-color: var(--line-hi);
  background: var(--surface-hi);
  transform: translateY(-4px);
}

.metric__icon {
  margin-bottom: 1rem;
  font-size: 1.35rem;
}

.metric__value {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.metric h3 {
  margin: 0.85rem 0 0.5rem;
  font-size: 1.05rem;
}

.metric p {
  font-size: 0.92rem;
}

/* --------------------------------------------------------------------------
   11. Mockup del chatbot
   -------------------------------------------------------------------------- */

.chatbot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.chat-window {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-hi);
  border-radius: var(--r-lg);
  background: linear-gradient(170deg, rgba(15, 19, 32, 0.95), rgba(8, 10, 18, 0.95));
  box-shadow: var(--lift), 0 0 80px -40px rgba(77, 141, 255, 0.6);
  overflow: hidden;
}

.chat-window__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
}

.chat-window__dots {
  display: flex;
  gap: 6px;
}

.chat-window__dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line-hi);
}

.chat-window__dots i:first-child { background: #ff5f57; }
.chat-window__dots i:nth-child(2) { background: #febc2e; }
.chat-window__dots i:nth-child(3) { background: #28c840; }

.chat-window__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
}

.chat-window__status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  color: var(--text-mute);
  font-size: var(--fs-micro);
}

.chat-window__status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #28c840;
  box-shadow: 0 0 8px #28c840;
}

.chat-log {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.4rem 1.2rem;
}

.chat-msg {
  display: flex;
  max-width: 82%;
}

.chat-msg--bot { align-self: flex-start; }
.chat-msg--user { align-self: flex-end; }

.chat-msg p {
  padding: 0.75rem 1rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text);
}

.chat-msg--bot p {
  border: 1px solid var(--line);
  border-radius: 4px 16px 16px 16px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--text-dim);
}

.chat-msg--user p {
  border-radius: 16px 4px 16px 16px;
  background: var(--grad);
  color: #fff;
}

.chat-window__composer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-mute);
  font-size: 0.88rem;
}

.chat-window__composer span {
  flex: 1;
}

.chat-window__send {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--grad-soft);
  border: 1px solid var(--line);
  font-size: 0.8rem;
}

.chatbot__aside h2 {
  margin-bottom: 1.2rem;
}

.chatbot__points {
  display: grid;
  gap: 0.85rem;
  margin: 1.8rem 0 2.2rem;
}

.chatbot__points li {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  color: var(--text-dim);
  font-size: 0.97rem;
}

.chatbot__points b {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--grad-soft);
  border: 1px solid var(--line);
  color: var(--cyan);
  font-size: 0.7rem;
}

/* --------------------------------------------------------------------------
   12. Testimonios
   -------------------------------------------------------------------------- */

.testimonials {
  position: relative;
}

.tcarousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
}

.tcarousel__track {
  display: flex;
  transition: transform var(--t-slow) var(--ease);
  will-change: transform;
}

.tcarousel.is-dragging {
  user-select: none;
}

.tcarousel.is-dragging .tcarousel__track {
  transition: none;
}

.tcarousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: clamp(1.2rem, 2vw, 1.6rem);
}

/* Dos testimonios a la vista en pantallas anchas.
   main.js deduce cuántos caben midiendo el ancho real del slide. */
@media (min-width: 900px) {
  .tcarousel__slide {
    flex-basis: 50%;
  }
}

.quote {
  height: 100%;
  padding: clamp(1.8rem, 3.5vw, 3rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.quote__mark {
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 0.6;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.quote blockquote {
  margin: 1.4rem 0 2rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.65rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--text);
}

.quote__author {
  display: flex;
  align-items: center;
  gap: 0.95rem;
}

.quote__avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--grad-soft);
  border: 1px solid var(--line);
  font-size: 1.15rem;
}

.quote__author strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.98rem;
}

.quote__author span {
  color: var(--text-mute);
  font-size: var(--fs-small);
}

.tcarousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1.75rem;
}

.tcarousel__btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-hi);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

.tcarousel__btn:hover {
  border-color: rgba(77, 141, 255, 0.7);
  background: rgba(77, 141, 255, 0.14);
  transform: scale(1.06);
}

.tcarousel__dots {
  display: flex;
  gap: 0.5rem;
}

.tcarousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  background: var(--line-hi);
  transition: width var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}

.tcarousel__dot.is-active {
  width: 26px;
  border-radius: var(--r-pill);
  background: var(--grad);
}

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */

.faq {
  max-width: 52rem;
  margin-inline: auto;
  border-top: 1px solid var(--line);
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.5rem 0.25rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 600;
  text-align: left;
  color: var(--text);
  transition: color var(--t-fast) var(--ease);
}

.faq__q:hover {
  color: var(--blue);
}

.faq__sign {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.faq__sign::before,
.faq__sign::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--blue);
  translate: -50% -50%;
  transition: transform var(--t-med) var(--ease);
}

.faq__sign::after {
  transform: rotate(90deg);
}

.faq__q[aria-expanded='true'] .faq__sign::after {
  transform: rotate(0deg);
}

/* Animación de altura sin JS: grid-template-rows 0fr -> 1fr */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-med) var(--ease);
}

.faq__a > div {
  overflow: hidden;
}

.faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
}

.faq__a p {
  padding: 0 0.25rem 1.6rem;
  font-size: 0.98rem;
}

/* --------------------------------------------------------------------------
   14. Línea de tiempo (Nosotros)
   -------------------------------------------------------------------------- */

.timeline {
  position: relative;
  max-width: 46rem;
  margin-inline: auto;
  padding-left: clamp(2rem, 5vw, 3.5rem);
}

.timeline__rail {
  position: absolute;
  top: 0.6rem;
  bottom: 0.6rem;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}

.timeline__rail::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad);
  transform: scaleY(var(--progress, 1));
  transform-origin: top;
}

.timeline__item {
  position: relative;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__item::before {
  content: '';
  position: absolute;
  top: 0.55rem;
  left: calc(clamp(2rem, 5vw, 3.5rem) * -1 - 5px);
  width: 12px;
  height: 12px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: var(--line-hi);
  transition: background var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}

.timeline__item.is-reached::before {
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.18), 0 0 16px rgba(34, 211, 238, 0.8);
}

.timeline__year {
  display: inline-block;
  margin-bottom: 0.6rem;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}

.timeline__item h3 {
  margin-bottom: 0.6rem;
}

/* --------------------------------------------------------------------------
   15. Equipo y valores
   -------------------------------------------------------------------------- */

.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: var(--gap);
}

.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.member {
  text-align: left;
}

.member__avatar {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-bottom: 1.3rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--grad-soft);
  font-size: 1.8rem;
  transition: transform var(--t-med) var(--ease);
}

.member:hover .member__avatar {
  transform: scale(1.06) rotate(-5deg);
}

.member__role {
  margin-bottom: 0.9rem;
  color: var(--cyan);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Declaración grande de misión */

.statement {
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.03em;
  color: var(--text);
}

/* Estado base y respaldo sin JS. Cuando effects.js parte la frase en letras,
   repinta el degradado carácter a carácter: background-clip:text sobre el <em>
   deja de tener glifos propios en cuanto el texto pasa a vivir en hijos, y la
   frase se volvía invisible. */
.statement em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.statement em .char {
  will-change: transform, opacity, filter;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* --------------------------------------------------------------------------
   16. Portafolio
   -------------------------------------------------------------------------- */

.filters {
  position: relative;
  display: inline-flex;
  gap: 0.25rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding: 0.3rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
}

/* Píldora deslizante */
.filters__pill {
  position: absolute;
  top: 0.3rem;
  bottom: 0.3rem;
  left: 0;
  border-radius: var(--r-pill);
  background: var(--grad);
  transform: translateX(var(--pill-x, 0));
  width: var(--pill-w, 0);
  transition: transform var(--t-med) var(--ease), width var(--t-med) var(--ease);
  pointer-events: none;
}

.filters__btn {
  position: relative;
  z-index: 1;
  min-height: 42px;
  padding: 0.55rem 1.35rem;
  border-radius: var(--r-pill);
  color: var(--text-dim);
  font-size: 0.92rem;
  font-weight: 500;
  transition: color var(--t-med) var(--ease);
}

.filters__btn:hover {
  color: var(--text);
}

.filters__btn.is-active {
  color: #fff;
}

.work {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--gap);
}

.work__item {
  padding: 0;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease);
}

/* GSAP deja opacity y transform en el atributo style al revelar la tarjeta,
   así que el estado de salida necesita ganar a esos valores en línea. */
.work__item.is-hiding {
  opacity: 0 !important;
  transform: scale(0.94) !important;
}

.work__item[hidden] {
  display: none;
}

.work__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0a0d16;
}

/* Las capturas reales conviven con los marcadores SVG hasta que se sustituyan
   todos los proyectos, así que ambos reciben el mismo tratamiento. */
.work__media svg,
.work__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* El marco es 16:10 y las capturas no siempre lo son, así que algo se
     recorta. Anclando arriba, lo que se pierde sale del pie de la captura
     en vez de partirse entre la cabecera y el pie. */
  object-position: top center;
  transition: transform var(--t-slow) var(--ease);
}

.work__item:hover .work__media svg,
.work__item:hover .work__media img {
  transform: scale(1.07);
}

/* Suave: funde el pie de la imagen con la tarjeta sin tapar la captura. */
.work__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 6, 10, 0.5), transparent 38%);
}

.work__tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  padding: 0.3rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-pill);
  background: rgba(5, 6, 10, 0.6);
  backdrop-filter: blur(8px);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.work__body {
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
}

.work__body h3 {
  margin-bottom: 0.6rem;
}

/* Enlace extendido: el texto del enlace es el nombre del proyecto —lo que un
   lector de pantalla debe anunciar— pero la zona pulsable cubre la tarjeta
   entera. Así se evita envolver todo en un <a> gigante. */
.work__link {
  color: inherit;
  transition: color var(--t-fast) var(--ease);
}

.work__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
}

.work__item:hover .work__link {
  color: var(--blue);
}


.work__body p {
  font-size: 0.95rem;
  margin-bottom: 1.3rem;
}

.work__stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.work__stack span {
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(168, 85, 247, 0.09);
  color: #cbb2f5;
  font-size: var(--fs-micro);
}

.work__empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--text-mute);
}

/* --------------------------------------------------------------------------
   16b. Ventana ampliada del portafolio
   -------------------------------------------------------------------------- */

body.modal-open {
  overflow: hidden;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2.5rem);
}

.lightbox.is-open {
  display: grid;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 4, 8, 0.86);
  backdrop-filter: blur(10px);
}

.lightbox__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(100%, 1080px);
  max-height: calc(100svh - clamp(1.5rem, 6vw, 5rem));
  border: 1px solid var(--line-hi);
  border-radius: var(--r-lg);
  background: linear-gradient(170deg, rgba(16, 20, 34, 0.98), rgba(8, 10, 18, 0.98));
  box-shadow: var(--lift);
  overflow: hidden;
}

/* Sin fill-mode y partiendo de lo oculto: si la animación no corre, la
   ventana se ve igual. */
.lightbox.is-open .lightbox__panel {
  animation: lightbox-in 0.4s var(--ease);
}

@keyframes lightbox-in {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
}

.lightbox__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-hi);
  border-radius: 50%;
  background: rgba(5, 6, 10, 0.7);
  backdrop-filter: blur(8px);
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1;
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.lightbox__close:hover {
  background: rgba(168, 85, 247, 0.3);
  transform: rotate(90deg);
}

/* --- Escenario de la captura --- */

.lightbox__stage {
  position: relative;
  display: grid;
  place-items: center;
  flex: 1;
  min-height: 0;
  background: #06070b;
}

.lightbox__frame {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.lightbox__frame img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
}

.lightbox__frame img.is-loaded {
  opacity: 1;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  border: 1px solid var(--line-hi);
  border-radius: 50%;
  background: rgba(5, 6, 10, 0.75);
  backdrop-filter: blur(8px);
  color: var(--text);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.lightbox__nav[data-dir='prev'] { left: 0.9rem; }
.lightbox__nav[data-dir='next'] { right: 0.9rem; }

.lightbox__nav:hover {
  border-color: rgba(77, 141, 255, 0.7);
  background: rgba(77, 141, 255, 0.28);
}

.lightbox__nav[hidden] {
  display: none;
}

.lightbox__counter {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 2;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(5, 6, 10, 0.75);
  color: var(--text-dim);
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
}

/* --- Puntos --- */

/* Barra inferior: solo puntos y el botón de visitar. La ventana es para ver
   capturas; el título, la descripción y el stack ya están en la tarjeta.
   flex-shrink:0 para que la imagen no la comprima y le recorte el contenido. */
.lightbox__bar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.lightbox__dots {
  display: flex;
  flex: 1;
  justify-content: center;
  gap: 0.5rem;
}

/* Con una sola captura no hay puntos, pero el hueco mantiene el botón a la
   derecha en vez de dejarlo pegado al centro. */
.lightbox__visit {
  flex-shrink: 0;
  min-height: 42px;
  padding: 0.6rem 1.3rem;
  font-size: 0.9rem;
}

.lightbox__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  background: var(--line-hi);
  transition: width var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}

.lightbox__dot.is-active {
  width: 26px;
  border-radius: var(--r-pill);
  background: var(--grad);
}

/* --- Ficha --- */





@media (max-width: 620px) {
  .lightbox__nav {
    width: 40px;
    height: 40px;
  }

  .lightbox__visit {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   17. Contacto
   -------------------------------------------------------------------------- */

.contact {
  position: relative;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--grad-soft);
  text-align: center;
  overflow: hidden;
}

.contact::after {
  content: '';
  position: absolute;
  top: -60%;
  left: 50%;
  width: 120%;
  aspect-ratio: 1;
  translate: -50% 0;
  background: radial-gradient(circle, rgba(77, 141, 255, 0.14), transparent 60%);
  pointer-events: none;
}

.contact > * {
  position: relative;
  z-index: 1;
}

.contact h2 {
  margin-bottom: 1.1rem;
}

.contact p {
  max-width: 48ch;
  margin-inline: auto;
  font-size: var(--fs-lead);
}

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 2.4rem;
}

.contact__note {
  margin-top: 1.6rem;
  color: var(--text-mute);
  font-size: var(--fs-small);
}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: clamp(4rem, 9vw, 8rem);
  border-top: 1px solid var(--line);
  background: linear-gradient(to bottom, transparent, rgba(10, 13, 22, 0.85));
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.footer__about p {
  max-width: 34ch;
  margin: 1.1rem 0 1.6rem;
  font-size: 0.95rem;
}

.footer__col h4 {
  margin-bottom: 1.1rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.footer__col a,
.footer__col p {
  display: block;
  margin-bottom: 0.65rem;
  color: var(--text-dim);
  font-size: 0.95rem;
  transition: color var(--t-fast) var(--ease);
}

.footer__col a:hover {
  color: var(--blue);
}

.socials {
  display: flex;
  gap: 0.6rem;
}

.socials a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  font-size: 0.95rem;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease);
}

.socials a:hover {
  transform: translateY(-3px);
  border-color: rgba(77, 141, 255, 0.7);
  background: rgba(77, 141, 255, 0.14);
}

/* Logotipo tipográfico gigante */
.footer__wordmark {
  padding-bottom: 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(4rem, 19vw, 17rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.05em;
  text-align: center;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--line);
  color: var(--text-mute);
  font-size: var(--fs-small);
}

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .chatbot,
  .split {
    grid-template-columns: 1fr;
  }

  .hero__orbits {
    right: -28vw;
    width: min(80vw, 480px);
    opacity: 0.4;
  }
}

@media (max-width: 780px) {
  .menu-toggle {
    display: grid;
  }

  .nav {
    position: fixed;
    inset: 0;
    z-index: -1;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0.5rem;
    padding: 6rem var(--gutter) 3rem;
    background: rgba(5, 6, 10, 0.96);
    backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-med) var(--ease), visibility var(--t-med);
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
  }

  .nav__link {
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--text);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
  }

  .nav.is-open .nav__link {
    opacity: 1;
    transform: none;
    transition-delay: calc(60ms * var(--i, 0) + 80ms);
  }

  .nav__link::after {
    display: none;
  }

  .nav__cta {
    margin: 1.75rem 0 0;
    min-height: 54px;
    font-size: 1rem;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
  }

  .nav.is-open .nav__cta {
    opacity: 1;
    transform: none;
    transition-delay: 320ms;
  }

  /* Evita que el header tape el menú abierto */
  body.nav-open .site-header {
    background: transparent;
    backdrop-filter: none;
    border-bottom-color: transparent;
  }

  body.nav-open {
    overflow: hidden;
  }
}

@media (max-width: 620px) {
  .hero {
    min-height: auto;
    padding-top: 8rem;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .footer__grid {
    grid-template-columns: 1fr;
  }

  .tcarousel__slide {
    padding: 0.5rem;
  }

  .work {
    grid-template-columns: 1fr;
  }

  .filters {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .filters::-webkit-scrollbar {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   20. Movimiento reducido
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    /* Sin esto, una animación con retardo mantendría su fotograma inicial
       durante ese tiempo: el logo del hero se quedaba oculto medio segundo. */
    animation-delay: -0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .hero__scroll-line::after {
    height: 100%;
    opacity: 1;
    transform: none;
  }
}