/* ============================================================
   INGEDEM Technologies — Custom Styles
   Complementa Tailwind CDN con animaciones y overrides
   ============================================================ */

/* ── Fuente base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Scrollbar personalizada ─────────────────────────────── */
::-webkit-scrollbar            { width: 6px; }
::-webkit-scrollbar-track      { background: #0a0f1e; }
::-webkit-scrollbar-thumb      { background: #1e2d4a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover{ background: #2563eb; }

/* ── Tokens de color (también referenciados en Tailwind config) ─ */
:root {
  --color-deep:   #0a0f1e;
  --color-card:   #0d1425;
  --color-card2:  #0f1830;
  --color-border: #1e2d4a;
  --color-accent: #2563eb;
  --color-cyan:   #38bdf8;
  --color-violet: #7c3aed;   /* para la card de IA */
  --color-violet-light: #a78bfa;
}

/* ============================================================
   ANIMACIONES KEYFRAMES
   ============================================================ */

/* Hero nebula background */
@keyframes nebula {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* Hero grid dot pulse */
@keyframes gridPulse {
  0%, 100% { opacity: 0.03; }
  50%       { opacity: 0.07; }
}

/* Scroll arrow bounce */
@keyframes scrollArrow {
  0%, 100% { transform: translateY(0);  opacity: 1;   }
  50%       { transform: translateY(8px); opacity: 0.5; }
}

/* Reveal on scroll */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Logo float */
@keyframes float {
  0%, 100% { transform: translateY(0px);   }
  50%       { transform: translateY(-12px); }
}

/* Glow pulse for orbs */
@keyframes glowPulse {
  0%, 100% { opacity: 0.08; }
  50%       { opacity: 0.18; }
}

/* AI card shimmer border */
@keyframes borderShimmer {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero-bg {
  background: linear-gradient(
    135deg,
    #0a0f1e 0%,
    #0d2444 35%,
    #0a1628 65%,
    #0a0f1e 100%
  );
  background-size: 400% 400%;
  animation: nebula 12s ease infinite;
}

.hero-grid {
  background-image: radial-gradient(
    circle,
    rgba(56, 189, 248, 0.15) 1px,
    transparent 1px
  );
  background-size: 48px 48px;
  animation: gridPulse 6s ease-in-out infinite;
}

.hero-orb-1 {
  animation: glowPulse 5s ease-in-out infinite;
}
.hero-orb-2 {
  animation: glowPulse 5s ease-in-out infinite;
  animation-delay: 2.5s;
}

.logo-float {
  animation: float 6s ease-in-out infinite;
}

.scroll-arrow {
  animation: scrollArrow 2s ease-in-out infinite;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.01s;  /* evita flash antes del JS */
}

.reveal.visible {
  animation: fadeInUp 0.65s ease forwards;
}

/* ============================================================
   NAVBAR
   ============================================================ */
#navbar {
  transition: background 0.3s ease, border-color 0.3s ease,
              backdrop-filter 0.3s ease;
}

#navbar.scrolled {
  background: rgba(10, 15, 30, 0.92) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(30, 45, 74, 0.8);
}

/* ============================================================
   BOTÓN GLOW
   ============================================================ */
.btn-glow {
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.4);
  transition: box-shadow 0.3s ease, transform 0.2s ease,
              background-color 0.2s ease;
}
.btn-glow:hover {
  box-shadow: 0 0 42px rgba(37, 99, 235, 0.75);
  transform: translateY(-2px);
}

.btn-glow-violet {
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.4);
  transition: box-shadow 0.3s ease, transform 0.2s ease,
              background-color 0.2s ease;
}
.btn-glow-violet:hover {
  box-shadow: 0 0 42px rgba(124, 58, 237, 0.7);
  transform: translateY(-2px);
}

/* ============================================================
   TARJETAS DE SERVICIO — diseño enriquecido
   ============================================================ */
.service-card {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 1.25rem;
  padding: 0;                    /* padding controlado por inner */
  transition: border-color 0.3s ease, box-shadow 0.3s ease,
              transform 0.25s ease;
}
.service-card:hover {
  transform: translateY(-5px);
}

/* Barra de acento superior */
.service-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 1.25rem 1.25rem 0 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.service-card:hover::after { opacity: 1; }

.service-card--erp::after    { background: linear-gradient(90deg, #2563eb, #38bdf8); }
.service-card--software::after { background: linear-gradient(90deg, #38bdf8, #06b6d4); }
.service-card--cloud::after  { background: linear-gradient(90deg, #64748b, #94a3b8); }
.service-card--ai::after     { background: linear-gradient(90deg, #7c3aed, #38bdf8); }

/* Número decorativo de fondo */
.service-card-number {
  position: absolute;
  bottom: -0.5rem;
  right: 1rem;
  font-size: 6rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(255,255,255,0.03);
  pointer-events: none;
  user-select: none;
  transition: color 0.3s ease;
}
.service-card:hover .service-card-number {
  color: rgba(255,255,255,0.055);
}

/* Inner padding */
.service-card-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Hover por variante */
.service-card--erp:hover {
  border-color: rgba(37, 99, 235, 0.5);
  box-shadow: 0 16px 40px rgba(37, 99, 235, 0.12);
}
.service-card--software:hover {
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 16px 40px rgba(56, 189, 248, 0.1);
}
.service-card--cloud:hover {
  border-color: rgba(148, 163, 184, 0.4);
  box-shadow: 0 16px 40px rgba(148, 163, 184, 0.07);
}

/* Card IA — violet con shimmer */
.service-card--ai {
  border-color: rgba(124, 58, 237, 0.35);
  background: linear-gradient(145deg, #0d1425 0%, #0f0b1e 100%);
}
.service-card--ai:hover {
  border-color: rgba(124, 58, 237, 0.6);
  box-shadow: 0 16px 48px rgba(124, 58, 237, 0.2);
}

/* Badge "Nuevo" en la card IA */
.badge-new {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-violet-light);
  background: rgba(124, 58, 237, 0.15);
  border: 1px solid rgba(124, 58, 237, 0.35);
  border-radius: 9999px;
  padding: 0.2rem 0.6rem;
  line-height: 1;
}

/* CTA pie de card */
.service-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 1.25rem;
  transition: gap 0.2s ease, opacity 0.2s ease;
  opacity: 0.7;
}
.service-card:hover .service-card-cta {
  gap: 0.65rem;
  opacity: 1;
}

/* ============================================================
   MÓDULOS ERP
   ============================================================ */
.module-card {
  transition: border-color 0.25s ease, box-shadow 0.25s ease,
              transform 0.2s ease;
}
.module-card:hover {
  transform: translateY(-2px);
}

/* ============================================================
   CERTIFICACIONES
   ============================================================ */
.cert-card {
  background: #fff;
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 132px;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}
.cert-card img {
  display: block;
  width: 100%;
  height: 100px;
  max-width: 200px;
  object-fit: contain;
}
.cert-card:hover {
  box-shadow: 0 8px 32px rgba(37, 99, 235, 0.22);
  transform: translateY(-4px);
}

/* ============================================================
   FORMULARIO DE CONTACTO
   ============================================================ */
.form-input {
  width: 100%;
  background: var(--color-card2);
  border: 1px solid var(--color-border);
  color: #e2e8f0;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
  font-family: inherit;
}
.form-input::placeholder { color: #475569; }
.form-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* ============================================================
   TECH BADGES
   ============================================================ */
.tech-badge {
  font-size: 0.7rem;
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.04);
  color: #94a3b8;
  border: 1px solid var(--color-border);
  display: inline-block;
}

/* ============================================================
   SECCIÓN DIVISORA
   ============================================================ */
.section-divider {
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-cyan));
  border-radius: 9999px;
  margin: 0.75rem auto 0;
}

/* ============================================================
   AI SECTION — partículas decorativas de fondo
   ============================================================ */
.ai-glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.ai-glow-orb-1 {
  width: 320px; height: 320px;
  background: rgba(124, 58, 237, 0.12);
  top: -80px; right: -60px;
  animation: glowPulse 6s ease-in-out infinite;
}
.ai-glow-orb-2 {
  width: 240px; height: 240px;
  background: rgba(56, 189, 248, 0.07);
  bottom: -60px; left: -40px;
  animation: glowPulse 6s ease-in-out infinite;
  animation-delay: 3s;
}

/* ============================================================
   RESPONSIVE HELPERS
   ============================================================ */
@media (max-width: 767px) {
  .hero-bg { background-size: 600% 600%; }
}