/* ========== SLIDER ========== */
    .slider {
      position: relative;
      height: 75vh;
      min-height: 460px;
      overflow: hidden;
    }
    .slide {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 1s ease;
      display: flex;
      align-items: center;
    }
    .slide.active { opacity: 1; pointer-events: auto; }
    .slide::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, rgba(19,16,98,.85), rgba(139,10,194,.55));
    }
    .slide-content {
      position: relative;
      color: #fff;
      max-width: 1200px;
      margin: auto;
      padding: 0 24px;
    }
    .slide-content h1 {
      font-size: clamp(2rem, 5vw, 3.8rem);
      font-weight: 800;
      line-height: 1.15;
      margin-bottom: 18px;
    }
    .slide-content p {
      font-size: clamp(1rem, 2vw, 1.2rem);
      max-width: 620px;
      margin-bottom: 26px;
    }
    .btn-main {
      display: inline-block;
      background: var(--cian);
      color: #fff;
      padding: 14px 30px;
      border-radius: 40px;
      font-weight: 700;
      box-shadow: 0 8px 25px rgba(8,198,234,.45);
      transition: transform .2s;
    }
    .btn-main:hover { transform: translateY(-3px); }

    .slider-dots {
      position: absolute;
      bottom: 22px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 10px;
      z-index: 5;
    }
    .slider-dots button {
      width: 12px; height: 12px;
      border-radius: 50%;
      border: none;
      background: rgba(255,255,255,.5);
      cursor: pointer;
    }
    .slider-dots button.active { background: var(--cian); }

    /* Navegación lateral del slider */
    .slider-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 6;
      width: 48px;
      height: 48px;
      border: 2px solid rgba(255,255,255,.75);
      border-radius: 50%;
      background: rgba(19,16,98,.42);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.7rem;
      line-height: 1;
      cursor: pointer;
      backdrop-filter: blur(4px);
      transition: background .25s, transform .25s, border-color .25s;
    }
    .slider-arrow:hover {
      background: var(--morado);
      border-color: #fff;
      transform: translateY(-50%) scale(1.08);
    }
    .slider-arrow.prev { left: 22px; }
    .slider-arrow.next { right: 22px; }