body {
  font-family: 'Segoe UI', sans-serif;
}

.hero-header {
  background: linear-gradient(135deg, #0d6efd, #6610f2);
  color: white;
  padding: 100px 20px;
  position: relative; /* necesario para que la flecha se posicione dentro del header */
}

.hero-header .logo {
  max-width: 50px;
  height: auto;
}

.hero-header h1 {
  font-weight: 700;
  letter-spacing: 2px;
}

.hero-header .tagline {
  font-style: italic;
  font-size: 1.25rem;
  margin-bottom: 20px;
  opacity: 0.9;
}

.features i {
  font-size: 2rem;
  color: #0d6efd;
}

.pricing .card {
  border: 1px solid #ddd;
}

footer {
  background: #f8f9fa;
  padding: 20px;
  text-align: center;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.scroll-down {
  position: fixed;      /* ahora es fija en la ventana */
  bottom: 20px;         /* separada del borde inferior */
  left: 20px;           /* pegada al borde izquierdo */
  font-size: 2.5rem;    /* tamaño de la flecha */
  color: black;
  cursor: pointer;
  animation: bounce 1.5s infinite; /* animación */
  z-index: 1000;        /* asegura que quede encima de otros elementos */
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}