/* ═══════════════════════════════════════════════════════════════════════════
   Capa de efectos: lo que separa una interfaz correcta de una que impresiona.

   Regla que se respeta en todo el archivo: NADA se pinta por delante del
   contenido. Los brillos van en `background` (siempre por debajo del texto) o
   en `box-shadow` (siempre por fuera del borde). Ni un solo overlay encima.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─────────────── Borde vivo: un filo de luz que da la vuelta ───────────────
   El gradiente cónico gira despacio alrededor de la pieza. Es el detalle que
   hace que una tarjeta parezca un dispositivo encendido y no una caja. */

@property --giro {
  syntax: '<angle>'; initial-value: 0deg; inherits: false;
}

.borde-vivo {
  position: relative;
  isolation: isolate;
}
.borde-vivo::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--giro),
    transparent 0deg, #00c8ff 40deg, #7dffc9 80deg, #00ff9c 110deg,
    transparent 160deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: dar-vuelta 5s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes dar-vuelta { to { --giro: 360deg } }

/* Navegadores sin @property: el borde se queda quieto pero encendido, que es
   mejor que un borde a medio pintar. */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .borde-vivo::before { background: linear-gradient(135deg, #00c8ff, #00ff9c); animation: none; }
}

/* ─────────────── Foco que sigue al cursor ───────────────
   Va en `background`, así que se pinta bajo el texto por definición. La
   posición la escribe app/landing.js en --mx / --my. */

.foco {
  --mx: 50%; --my: 0%;
  background-image:
    radial-gradient(420px circle at var(--mx) var(--my), rgba(0, 200, 255, .16), transparent 42%);
  background-repeat: no-repeat;
  transition: background-position 120ms linear;
}
.foco.verde {
  background-image:
    radial-gradient(420px circle at var(--mx) var(--my), rgba(0, 255, 156, .14), transparent 42%);
}

/* ─────────────── Aparición al bajar por la página ─────────────── */

.aparece {
  opacity: 0;
  transform: translateY(26px) scale(.985);
  transition: opacity 700ms cubic-bezier(.16,1,.3,1), transform 700ms cubic-bezier(.16,1,.3,1);
}
.aparece.visible { opacity: 1; transform: none; }
.aparece.d1 { transition-delay: 80ms }
.aparece.d2 { transition-delay: 160ms }
.aparece.d3 { transition-delay: 240ms }
.aparece.d4 { transition-delay: 320ms }
.aparece.d5 { transition-delay: 400ms }

/* ─────────────── Chip de IA: punto que late y texto en mayúsculas ─────────────── */

.chip-ia {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 13px 5px 9px; border-radius: 99px;
  font-size: .7rem; font-weight: 720; letter-spacing: .12em; text-transform: uppercase;
  color: var(--azul-hi);
  background: rgba(0, 200, 255, .1);
  border: 1px solid rgba(0, 200, 255, .42);
  box-shadow: 0 0 22px -6px rgba(0, 200, 255, .7);
}
.chip-ia .nucleo {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--verde);
  box-shadow: 0 0 0 0 rgba(0, 255, 156, .7);
  animation: latir 2.2s ease-out infinite;
}
@keyframes latir {
  0%   { box-shadow: 0 0 0 0 rgba(0, 255, 156, .7) }
  70%  { box-shadow: 0 0 0 9px rgba(0, 255, 156, 0) }
  100% { box-shadow: 0 0 0 0 rgba(0, 255, 156, 0) }
}

/* ─────────────── Brillo que barre un titular ─────────────── */

.barrido {
  background: linear-gradient(100deg,
    var(--texto) 0%, var(--texto) 36%, #7dffc9 46%, #00c8ff 52%, var(--texto) 62%, var(--texto) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: barrer 6s ease-in-out infinite;
}
@keyframes barrer {
  0%, 100% { background-position: 130% 0 }
  50%      { background-position: -30% 0 }
}

/* ─────────────── Malla de datos: líneas que caen despacio ───────────────
   Va detrás de todo (z-index negativo, dentro de una sección posicionada).
   Sugiere proceso, cálculo, algo vivo funcionando. */

.malla-datos {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 20%, transparent 75%);
}
.malla-datos i {
  position: absolute; top: -35%;
  width: 1px; height: 35%;
  background: linear-gradient(180deg, transparent, rgba(0, 200, 255, .8), transparent);
  animation: caer linear infinite;
}
.malla-datos i:nth-child(even) { background: linear-gradient(180deg, transparent, rgba(0, 255, 156, .55), transparent); }
@keyframes caer { to { transform: translateY(400%) } }

/* ─────────────── Número grande de estadística ─────────────── */

.cifra {
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 760; letter-spacing: -.05em; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(150deg, #7dffc9, #00c8ff 60%, #0090d4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ─────────────── Anillo de proceso ───────────────
   Tres aros concéntricos girando a distinta velocidad. Se usa como icono de
   "el agente está pensando" y en la sección de cómo razona. */

.anillos { position: relative; width: 132px; height: 132px; flex: none; }
.anillos i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid transparent;
  animation: girar linear infinite;
}
.anillos i:nth-child(1) { border-top-color: #00c8ff; animation-duration: 3.4s; }
.anillos i:nth-child(2) { inset: 16px; border-right-color: #00ff9c; animation-duration: 2.6s; animation-direction: reverse; }
.anillos i:nth-child(3) { inset: 32px; border-bottom-color: #7dffc9; animation-duration: 4.2s; }
.anillos .centro {
  position: absolute; inset: 48px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,200,255,.34), transparent 70%);
  display: grid; place-items: center; font-size: 1.4rem;
  animation: respirar 3s ease-in-out infinite;
}
@keyframes respirar { 0%, 100% { transform: scale(1); opacity: .85 } 50% { transform: scale(1.12); opacity: 1 } }

/* ─────────────── Línea separadora que se enciende ─────────────── */

.linea-luz {
  height: 1px; border: none; margin: 0;
  background: linear-gradient(90deg, transparent, rgba(0,200,255,.6), rgba(0,255,156,.4), transparent);
}

/* ─────────────── Etiqueta de sección ─────────────── */

.etiqueta-seccion {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .72rem; font-weight: 720; letter-spacing: .16em; text-transform: uppercase;
  color: var(--azul-hi); margin-bottom: 16px;
}
.etiqueta-seccion::before {
  content: ''; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--azul));
}

@media (prefers-reduced-motion: reduce) {
  .borde-vivo::before, .barrido, .malla-datos i, .anillos i, .anillos .centro,
  .chip-ia .nucleo { animation: none !important; }
  .aparece { opacity: 1; transform: none; }
}