/* =========================================
   Estilos base y tipografía global
   ========================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:
    radial-gradient(circle at top left, rgba(148, 27, 43, 0.12), transparent 55%),
    radial-gradient(circle at bottom right, rgba(15, 23, 42, 0.12), transparent 55%),
    #f8fafc;
}

.font-heading {
  font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html {
  scroll-behavior: smooth;
}

/* =========================================
   Navbar moderno: sombra + blur al hacer scroll
   ========================================= */
.navbar-shadow {
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.35);
}

/* =========================================
   Tarjetas y superficies modernas
   ========================================= */
.surface-elevated {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.card-soft {
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease;
}

.card-soft:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 45px rgba(15, 23, 42, 0.18);
}

.chip {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* =========================================
   Hero: patrón sutil y gradiente
   ========================================= */
.hero-section {
  position: relative;
  overflow: hidden;
}

.hero-grid {
  background:
    radial-gradient(circle at 0 0, rgba(248, 250, 252, 0.05), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(148, 27, 43, 0.18), transparent 60%),
    linear-gradient(135deg, #020617 0%, #020617 40%, #111827 100%);
}

.hero-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.14;
  background-image:
    linear-gradient(to right, rgba(148, 163, 184, 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, 0.16) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at top, black 0, black 55%, transparent 80%);
}

/* =========================================
   Botón flotante – rebote suave
   ========================================= */
.floating-whatsapp {
  animation: floatPulse 3s ease-in-out infinite;
}

@keyframes floatPulse {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* =========================================
   Animaciones sutiles al hacer scroll
   ========================================= */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 480ms ease-out,
    transform 480ms ease-out;
}

.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}