/* ==========================================================================
   Khronuve SAS — Estilos corporativos customizados
   Complementa Tailwind/DaisyUI con utilidades específicas de marca.
   ========================================================================== */

/* ---------- Comportamiento global ---------- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
}

/* ---------- Fondo de grilla industrial ----------
   Patrón sutil de líneas que evoca planos técnicos / ingeniería.
   Opacidad calibrada para fondo blanco. */
.bg-grid {
  background-image:
    linear-gradient(rgba(26, 64, 129, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 64, 129, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ---------- Fondo aurora / mesh gradient ----------
   Gradiente difuminado que mezcla cobalto, blanco y cobre sutil. */
.bg-aurora {
  background: linear-gradient(135deg,
    rgba(26, 64, 129, 0.04) 0%,
    rgba(255, 255, 255, 1) 30%,
    rgba(184, 107, 77, 0.05) 60%,
    rgba(255, 255, 255, 1) 80%,
    rgba(74, 107, 153, 0.04) 100%);
}

/* ---------- Glassmorphism ----------
   Tarjetas de cristal con blur y borde translúcido. */
.glass-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* ---------- Tarjeta sólida cobalto ---------- */
.card-cobalt {
  background: linear-gradient(135deg, #1A4081 0%, #2a5298 100%);
}

/* ---------- Tarjeta sólida cobre ---------- */
.card-copper {
  background: linear-gradient(135deg, #9e5a38 0%, #B86B4D 60%, #c9835f 100%);
}

/* ---------- Tarjeta sólida acero ---------- */
.card-steel {
  background: linear-gradient(135deg, #3d5a80 0%, #4A6B99 60%, #5d82b5 100%);
}

/* ---------- Brillo Cobre para CTAs ----------
   Halo luminoso del color accent sobre botones principales. */
.glow-copper {
  box-shadow:
    0 0 24px rgba(163, 88, 54, 0.35),
    0 0 64px rgba(163, 88, 54, 0.12);
}

/* ---------- Línea conectora del pipeline ---------- */
.pipeline-connector {
  position: relative;
}
.pipeline-connector::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -0.75rem;
  width: 1.5rem;
  height: 2px;
  background: linear-gradient(90deg, #1A4081, #B86B4D);
  opacity: 0.3;
}
@media (max-width: 1023px) {
  .pipeline-connector::after {
    display: none;
  }
}

/* ---------- Scroll reveal base ---------- */
.reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays para hijos */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ---------- Borde degradado corporativo ----------
   Gradiente Primary → Info → Accent para separadores decorativos. */
.border-gradient {
  border-image: linear-gradient(135deg, #1A4081, #4A6B99, #B86B4D) 1;
}