* {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
 }

.hero-banner {
        /* Reemplaza esta URL con la ruta de tu imagen */
        background-image: url('../images/galaxia.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        
        /* Esta propiedad es la que hace que la imagen se vea "fija" al hacer scroll */
        background-attachment: fixed;
        
        /* Ajusta la altura según lo que necesites */
        height: 400px; 
        width: 100%;
    }

    /* Efecto sutil para las sub-secciones */
    .section-card {
        transition: all 0.3s ease;
        background-color: #ffffff;
    }
    .section-card:hover {
        background-color: #fcfcfc;
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        border-color: #dee2e6 !important;
    }
    /* Estilo para los iconos */
    .display-4 {
        font-size: 2.8rem;
    }

    /* Efecto de elevación al pasar el mouse */
    .card {
        transition: transform 0.2s;
    }

    .card:hover {
        transform: scale(1.02);
    }

    /* Estilo base del botón flotante */
.whatsapp-flotante {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 30px; /* Distancia desde abajo */
  right: 30px;  /* Distancia desde la derecha */
  background-color: #25D366; /* Color corporativo de WhatsApp */
  color: #FFFFFF;
  border-radius: 50px; /* Lo hace completamente redondo */
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); /* Sombra para dar profundidad */
  z-index: 2000; /* Asegura que se dibuje por encima de otros elementos */
  
  /* Centrado del ícono usando Flexbox */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px; /* Tamaño del ícono */
  text-decoration: none;
  
  /* Transiciones fluidas para la interactividad */
  transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Efecto al pasar el cursor (Hover) */
.whatsapp-flotante:hover {
  background-color: #128C7E; /* Verde más oscuro de WhatsApp */
  color: #FFFFFF;
  transform: scale(1.1); /* Agranda ligeramente el botón */
}