/* ===== VARIABLES & RESET ===== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: 'Inter', sans-serif;
      color: #1e2b3c;
      overflow-x: hidden;
      background-color: #f9faff;
    }
    h1, h2, h3, h4 {
      font-weight: 600;
      letter-spacing: -0.02em;
    }
    section {
      position: relative;
      z-index: 2;
    }
    /* ===== PALETA AZUL/LILA ===== */
    :root {
      --azul-profundo: #1A3B5C;
      --azul-medio: #2A5C7D;
      --azul-soft: #4A90E2;
      --lila-soft: #A48BBF;
      --lila-claro: #D9C3F0;
      --blanco-humo: #F5F7FF;
      --gradiente-1: linear-gradient(145deg, #2A5C7D, #6D5B98);
      --gradiente-2: linear-gradient(135deg, #4A90E2, #9F7AEA);
      --shadow-card: 0 20px 30px -10px rgba(74, 90, 140, 0.15);
    }

    a {
  text-decoration: none !important;
  color: inherit !important;
}

a:hover {
  color: var(--lila-soft) !important;
  transition: color 0.3s ease;
}


    /* ===== REVEAL ANIMATIONS (SCROLL) ===== */
    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s cubic-bezier(0.2, 0.9, 0.3, 1), transform 0.8s cubic-bezier(0.2, 0.9, 0.3, 1);
    }
    .reveal.in-view {
      opacity: 1;
      transform: translateY(0);
    }
    .delay-1 { transition-delay: 0.1s; }
    .delay-2 { transition-delay: 0.2s; }
    .delay-3 { transition-delay: 0.3s; }

    /* ===== NAVBAR ===== */
    .navbar {
      padding: 1rem 0;
      transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
      z-index: 1040;
      background: transparent;
    }
    .navbar.scrolled {
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(12px);
      box-shadow: 0 8px 20px rgba(0, 20, 40, 0.08);
    }
    .navbar .navbar-brand {
      font-weight: 700;
      font-size: 1.7rem;
      background: var(--gradiente-2);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      letter-spacing: -0.02em;
    }
    .navbar-nav .nav-link {
      color: #1e2b3c;
      font-weight: 500;
      margin: 0 0.4rem;
      position: relative;
      transition: color 0.2s;
    }
    .navbar.scrolled .nav-link {
      color: #1A3B5C;
    }
    .navbar-nav .nav-link:hover {
      color: var(--azul-soft);
    }
    .navbar-nav .nav-link::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%) scaleX(0);
      width: 70%;
      height: 2px;
      background: var(--gradiente-2);
      transition: transform 0.25s;
      transform-origin: center;
    }
    .navbar-nav .nav-link:hover::after {
      transform: translateX(-50%) scaleX(1);
    }

    /* ===== BOTONES CON GLOW ===== */
    .btn-gradiente {
      background: var(--gradiente-2);
      border: none;
      color: white;
      padding: 0.8rem 2.2rem;
      border-radius: 60px;
      font-weight: 600;
      box-shadow: 0 10px 20px -8px rgba(74, 144, 226, 0.4);
      transition: all 0.25s ease;
      background-size: 120% auto;
    }
    .btn-gradiente:hover {
      transform: scale(1.05);
      box-shadow: 0 15px 30px -5px rgba(159, 122, 234, 0.6);
      filter: brightness(1.05);
      color: white;
    }

    /* ===== HERO CON FONDO ANIMADO Y FORMAS FLOTANTES ===== */
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      background: linear-gradient(125deg, #d4e0ff, #f0e7fc, #c7d9ff);
      background-size: 300% 300%;
      animation: gradientWave 12s ease infinite;
    }
    @keyframes gradientWave {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    .floating-shape {
      position: absolute;
      border-radius: 50%;
      background: rgba(164, 139, 191, 0.2);
      filter: blur(55px);
      z-index: 0;
      animation: float 18s infinite alternate ease-in-out;
    }
    .shape1 {
      width: 400px;
      height: 400px;
      top: -100px;
      left: -100px;
      background: radial-gradient(circle, #a48bbf60, #4a90e230);
      animation-duration: 22s;
    }
    .shape2 {
      width: 550px;
      height: 550px;
      bottom: -200px;
      right: -50px;
      background: radial-gradient(circle, #9f7aea60, #2a5c7d30);
      animation-duration: 25s;
      animation-delay: -5s;
    }
    .shape3 {
      width: 300px;
      height: 300px;
      top: 40%;
      left: 60%;
      background: #d9c3f070;
      filter: blur(70px);
      animation-duration: 20s;
      animation-delay: -2s;
    }
    @keyframes float {
      0% { transform: translate(0, 0) scale(1); }
      100% { transform: translate(40px, -40px) scale(1.1); }
    }
    .hero-content {
      position: relative;
      z-index: 5;
    }

    /* ===== TARJETAS ===== */
    .card-servicio, .card-beneficio, .card-testimonio, .card-equipo, .card-tarifa {
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(4px);
      border: 1px solid rgba(255, 255, 255, 0.5);
      border-radius: 32px;
      padding: 1.8rem 1.2rem;
      box-shadow: var(--shadow-card);
      transition: transform 0.3s, box-shadow 0.3s;
      height: 100%;
    }
    .card-servicio:hover, .card-beneficio:hover, .card-testimonio:hover, .card-equipo:hover, .card-tarifa:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 30px 40px -10px #6d5b9840;
      border-color: white;
    }
    .icono-lg {
      font-size: 2.8rem;
      background: var(--gradiente-1);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-bottom: 1.2rem;
    }

    /* ===== TABLA TARIFAS ===== */
    .tarifa-item {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px dashed rgba(164, 139, 191, 0.3);
      padding: 0.6rem 0;
      font-size: 1rem;
    }
    .tarifa-item span:last-child {
      font-weight: 600;
      color: var(--azul-medio);
    }
    .bono-card {
      background: linear-gradient(145deg, #ffffff, #f3ecff);
      border-radius: 32px;
      padding: 1.8rem;
      border: 1px solid white;
    }

    /* ===== SECCIONES GENERALES ===== */
    .section-title {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 1.2rem;
      background: linear-gradient(130deg, #1A3B5C, #6D5B98);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .bg-lila-suave {
      background: rgba(217, 195, 240, 0.2);
    }

    /* ===== FORMULARIO ===== */
    .form-control {
      border-radius: 40px;
      padding: 0.8rem 1.5rem;
      border: 1px solid rgba(164, 139, 191, 0.3);
      background: rgba(255,255,255,0.7);
      backdrop-filter: blur(5px);
    }
    .form-control:focus {
      box-shadow: 0 0 0 4px rgba(159, 122, 234, 0.2);
      border-color: var(--lila-soft);
    }

    /* ===== FOOTER ===== */
    .footer {
      background: #13293D;
      color: #d4dcec;
      border-radius: 48px 48px 0 0;
    }
    .footer a {
      color: #b7c9e2;
      text-decoration: none;
      transition: color 0.2s;
    }
    .footer a:hover {
      color: white;
    }

    /* ===== RESPONSIVE FIXES ===== */
    @media (max-width: 768px) {
      .section-title { font-size: 2rem; }
      .hero h1 { font-size: 2.4rem; }
    }


    
 









  .hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #1A3B5C;
}

.hero-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: fadeSlider 24s infinite;
}

/* IMÁGENES */
.bg1 {
  background-image: url('../img/hero_001.webp');
  animation-delay: 0s;
}

.bg2 {
  background-image: url('../img/hero_002.webp');
  animation-delay: 6s;
}

.bg3 {
  background-image: url('../img/hero_003.webp');
  animation-delay: 12s;
}

.bg4 {
  background-image: url('../img/hero_004.webp');
  animation-delay: 18s;
}

/* Animación */
@keyframes fadeSlider {
  0% { opacity: 0; }
  5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
  100% { opacity: 0; }
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.85) 10%,
    rgba(255,255,255,0.6) 20%,
    rgba(255,255,255,0.4) 40%
  );
  z-index: 1;
}