/* =====================================================================
   LUCCHINI Soluciones - Capa futurista
   ---------------------------------------------------------------------
   Va ENCIMA del <style> que tiene el index.html. No reemplaza nada: solo
   agrega efectos y afina tipografia, aire y color. Si se borra el <link>
   de este archivo, la pagina vuelve exactamente a como estaba.

   Todo lo que se agrega empieza con "lu-". Lo demas son ajustes a clases
   que ya existian (.hero, .service-card, .section, etc.).

   Al final hay un bloque para "reducir animaciones": ahi se apaga todo
   lo que se mueve.
   ===================================================================== */

:root {
  --lu-linea:  rgba(74,158,255,.22);   /* hairline azul */
  --lu-glow:   rgba(43,125,224,.45);
  --lu-cyan:   #22d3ee;
}

/* ---------------------------------------------------------------------
   1. DETALLES DE TODA LA PAGINA
   --------------------------------------------------------------------- */

::selection { background: rgba(43,125,224,.28); color: #fff; }

html { scroll-behavior: smooth; }

/* Barra fina de progreso de lectura, arriba de todo. La ancha la mueve
   el JS con --lu-avance. */
.lu-progreso {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  z-index: 9999;
  transform: scaleX(var(--lu-avance, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--blue-600), var(--blue-400), var(--lu-cyan));
  box-shadow: 0 0 12px var(--lu-glow);
  pointer-events: none;
}

/* Barra de scroll al tono de la marca. */
* { scrollbar-color: #1e5aa8 transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #2b7de0, #143a6b);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #4a9eff; background-clip: content-box; }

/* ---------------------------------------------------------------------
   2. HERO
   --------------------------------------------------------------------- */

/* La red de nodos: un canvas que dibuja el JS. Va atras del texto
   (.hero-inner esta en z-index 2) y adelante de los degrades del fondo. */
.lu-red {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .85;
}

/* Luz que sigue al mouse dentro del hero. Las coordenadas las escribe el
   JS en --lu-x / --lu-y. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(340px circle at var(--lu-x, 50%) var(--lu-y, 40%),
              rgba(74,158,255,.16), transparent 70%);
  opacity: 0;
  transition: opacity .4s ease;
}
.hero.lu-mouse::after { opacity: 1; }

/* El titular ya venia con escala fluida; solo se le da un poco mas de
   techo en pantallas grandes. */
.hero h1 { font-size: clamp(44px, 6.8vw, 100px); }
.hero .lead { line-height: 1.7; max-width: 62ch; }

/* El "siempre" del titulo, con el degrade de la marca en movimiento. */
.hero h1 .accent {
  background: linear-gradient(100deg, var(--blue-400), var(--lu-cyan), var(--blue-400));
  background-size: 220% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: lu-degrade 7s ease-in-out infinite;
}
@keyframes lu-degrade {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* El puntito del "eyebrow" late. */
.eyebrow .dot { box-shadow: 0 0 0 0 rgba(34,211,238,.65); animation: lu-latido 2.6s infinite; }
@keyframes lu-latido {
  0%   { box-shadow: 0 0 0 0 rgba(34,211,238,.6); }
  70%  { box-shadow: 0 0 0 9px rgba(34,211,238,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,211,238,0); }
}

/* Numeros del hero, con un degrade suave de blanco a celeste. */
.hero-stat strong {
  background: linear-gradient(180deg, #fff, #7fbbff);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-stat { transition: border-color .3s ease, transform .3s ease; }
.hero-stat:hover { border-left-color: var(--lu-cyan); transform: translateX(2px); }

/* ---------------------------------------------------------------------
   3. SECCIONES
   --------------------------------------------------------------------- */

/* Un poco mas de aire y una hairline arriba de cada seccion. */
.section { padding: clamp(80px, 10vw, 148px) 32px; }
.section + .section { border-top: 1px solid rgba(20,58,107,.10); }

.section-head { margin-bottom: clamp(48px, 6vw, 84px); }

/* El guion de la etiqueta de seccion, con el degrade de la marca. */
.label::before { background: linear-gradient(90deg, var(--blue-500), var(--lu-cyan)); }

/* ---------------------------------------------------------------------
   4. TARJETAS: luz que sigue al mouse
   ---------------------------------------------------------------------
   Cada tarjeta recibe --lu-cx / --lu-cy con la posicion del mouse DENTRO
   de ella. Se dibujan dos capas: un resplandor suave adentro y un borde
   que se ilumina del lado donde esta el cursor.
   --------------------------------------------------------------------- */

.service-card,
.sys-card,
.process-step,
.cta-card {
  position: relative;
  isolation: isolate;
}

.service-card::before,
.sys-card::before,
.process-step::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(240px circle at var(--lu-cx, 50%) var(--lu-cy, 50%),
              rgba(43,125,224,.13), transparent 65%);
}
.service-card:hover::before,
.sys-card:hover::before,
.process-step:hover::before { opacity: 1; }

/* El borde iluminado del lado donde esta el cursor. Se hace con una
   mascara: se pinta un degrade y se deja ver solo el marco de 1px.

   OJO: .sys-card ya usa su ::after para la barrita de arriba que crece
   al pasar el mouse. Por eso el borde va SOLO en .service-card. */
.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(200px circle at var(--lu-cx, 50%) var(--lu-cy, 50%),
              rgba(74,158,255,.85), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.service-card:hover::after { opacity: 1; }

/* ---------------------------------------------------------------------
   5. BOTONES
   --------------------------------------------------------------------- */

.btn { position: relative; overflow: hidden; }

/* Un brillo que cruza el boton al pasar el mouse. */
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 45%;
  left: -60%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transition: left .55s cubic-bezier(.16,1,.3,1);
}
.btn-primary:hover::after { left: 115%; }
.btn-primary:hover { box-shadow: 0 8px 30px var(--lu-glow); }

.btn, .btn-primary, .btn-ghost { transition: transform .18s ease, box-shadow .3s ease, background .3s ease, color .3s ease; }
.btn:active { transform: translateY(1px); }

/* ---------------------------------------------------------------------
   6. APARICION AL HACER SCROLL
   La pagina ya tenia .reveal; se le suma un desenfoque que se va, y un
   escalonado por tarjeta (--lu-d lo pone el JS).
   --------------------------------------------------------------------- */

.reveal {
  filter: blur(6px);
  transition:
    opacity .85s cubic-bezier(.16,1,.3,1) var(--lu-d, 0ms),
    transform .85s cubic-bezier(.16,1,.3,1) var(--lu-d, 0ms),
    filter .85s cubic-bezier(.16,1,.3,1) var(--lu-d, 0ms);
}
.reveal.in { filter: blur(0); }

/* ---------------------------------------------------------------------
   7. NAV
   --------------------------------------------------------------------- */

.nav {
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .35s ease, background .35s ease;
}
.nav.lu-pegado { border-bottom-color: var(--lu-linea); }

/* El subrayado del menu ya existia; solo se le cambia el color plano por
   el degrade de la marca. */
.nav-links a::after { background: linear-gradient(90deg, var(--blue-400), var(--lu-cyan)); }

/* ---------------------------------------------------------------------
   8. LLAMADO FINAL
   --------------------------------------------------------------------- */

.cta-section { position: relative; overflow: hidden; }
.cta-section::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 420px;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(43,125,224,.22), transparent 70%);
}

/* ---------------------------------------------------------------------
   9. LA INTRO, EN LOS AZULES DE ESTA PAGINA
   El archivo compartido viene con el gris azulado de los paneles.
   --------------------------------------------------------------------- */

.lu-intro { background: var(--blue-900); }
.lu-halo {
  background: radial-gradient(520px 520px at 50% 44%, rgba(43,125,224,.30), transparent 70%);
}
.lu-lucchini   { font-family: var(--font-display); letter-spacing: .12em; }
.lu-soluciones { color: var(--blue-300); font-family: var(--font-body); }
.lu-pie        { font-family: var(--font-mono); }
.lu-barra      { background: linear-gradient(90deg, transparent, var(--blue-400), transparent); }
.lu-onda       { border-color: var(--lu-cyan); }
.lu-saltar     { font-family: var(--font-mono); border-color: rgba(74,158,255,.25); }

/* Mientras corre la intro, la pagina esta pero quieta y en blanco. */
body.lu-con-intro .nav,
body.lu-con-intro .hero,
body.lu-con-intro .marquee { opacity: 0; }
body:not(.lu-con-intro) .nav,
body:not(.lu-con-intro) .hero,
body:not(.lu-con-intro) .marquee { transition: opacity .7s ease; }

/* =====================================================================
   10. SISTEMA.HTML  (el documento de arquitectura)
   ---------------------------------------------------------------------
   Esa pagina tiene sus propias clases y su propia paleta, mas oscura y
   mas tecnica. Nada de aca abajo toca al index.html: son selectores que
   solo existen alla.
   ===================================================================== */

/* La red de nodos va en el encabezado, marcado con data-lu-red. */
header[data-lu-red] { position: relative; overflow: hidden; }
header[data-lu-red] > *:not(.lu-red) { position: relative; z-index: 2; }

header[data-lu-red]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(340px circle at var(--lu-x, 50%) var(--lu-y, 40%),
              rgba(77,158,255,.13), transparent 70%);
  opacity: 0;
  transition: opacity .4s ease;
}
header[data-lu-red].lu-mouse::after { opacity: 1; }

/* Tarjetas: resplandor donde esta el cursor. Ojo, .mod-cat ya usa su
   ::before para la barrita de color de la categoria, asi que aca se
   trabaja solo con ::after. */
.mod-cat::after,
.role::after,
.stack-col::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(220px circle at var(--lu-cx, 50%) var(--lu-cy, 50%),
              rgba(77,158,255,.10), transparent 65%);
}
.mod-cat:hover::after,
.role:hover::after,
.stack-col:hover::after { opacity: 1; }

.stack-col { position: relative; overflow: hidden; transition: border-color .25s ease, transform .25s ease; }
.stack-col:hover { border-color: rgba(120,150,220,.35); transform: translateY(-2px); }
.mod-cat:hover, .role:hover { transform: translateY(-2px); }

/* Los numeros del encabezado, con un resplandor apenas perceptible. */
.stat .n { text-shadow: 0 0 22px rgba(77,158,255,.35); }

/* Barra de progreso y barra de scroll, en el azul de esta pagina. */
body.lu-sistema .lu-progreso {
  background: linear-gradient(90deg, #1d5fb0, #4d9eff, #b08cff);
  box-shadow: 0 0 12px rgba(77,158,255,.5);
}
body.lu-sistema { scrollbar-color: #2b6fc4 transparent; }

/* La intro, en los azules de sistema.html. */
body.lu-sistema .lu-intro      { background: #0a0e1a; }
body.lu-sistema .lu-halo       { background: radial-gradient(520px 520px at 50% 44%, rgba(77,158,255,.26), transparent 70%); }
body.lu-sistema .lu-lucchini   { font-family: 'Manrope', sans-serif; letter-spacing: .14em; }
body.lu-sistema .lu-soluciones { color: #4d9eff; }
body.lu-sistema .lu-pie,
body.lu-sistema .lu-saltar     { font-family: 'JetBrains Mono', monospace; }
body.lu-sistema .lu-barra      { background: linear-gradient(90deg, transparent, #4d9eff, transparent); }
body.lu-sistema .lu-onda       { border-color: #b08cff; }

body.lu-sistema.lu-con-intro header,
body.lu-sistema.lu-con-intro nav.sticky { opacity: 0; }
body.lu-sistema:not(.lu-con-intro) header,
body.lu-sistema:not(.lu-con-intro) nav.sticky { transition: opacity .7s ease; }

/* ---------------------------------------------------------------------
   11. MENOS MOVIMIENTO
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lu-red { display: none; }
  .hero::after { display: none; }
  .hero h1 .accent { animation: none; }
  .eyebrow .dot { animation: none; }
  .reveal { filter: none; transition-duration: .01ms; }
  .btn-primary::after { display: none; }
  .lu-progreso { display: none; }
}