* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
body {
   font-family: Arial, sans-serif;
   background-color: #f9f9f9;
   color: #333;
}

/* Navbar */
.header {
   background-color: #fff;
   padding: 20px 0;
   border-bottom: 1px solid #ddd;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.container {
   max-width: 1200px;
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 20px;
}
.logo a {
   text-decoration: none;
   font-size: 1.6rem;
   font-weight: bold;
   color: #333;
}
.nav ul {
   list-style: none;
   display: flex;
   gap: 20px;
}
.nav a {
   text-decoration: none;
   color: #333;
   font-weight: bold;
   padding: 5px 10px;
   transition: color 0.3s ease-in-out;
}
.nav a:hover {
   color: #007BFF;
}

/* Hero Mini */
.hero-mini {
   background: linear-gradient(to right, #007BFF, #00d4ff);
   height: 200px;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   color: #fff;
}
.hero-mini h1 {
   font-size: 2.5rem;
}
.hero-mini p {
    font-size: 1.2rem;
}

/* Estilo del botón circular */
#whatsapp-button {
   width: 80px;
   height: 80px;
   background-color: #25D366; /*Color oficial de WhatsApp */
   border: none;
   border-radius: 50%;
   position: fixed;
   bottom: 20px;
   right: 20px;
   box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
   cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1000;
   animation: bounce 2s alternate;
}

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

#whatsapp-button i {
   font-size: 48px;
   color: white;
}

#whatsapp-button:hover {
   background-color: #1EBE57; /* Color más oscuro al pasar el mouse */
}


/* Footer */
footer {
   position: relative; /* Permite que se solape si es necesario */
   z-index: 0; /* Nivel más bajo */
   background-color: #212529; /* Color oscuro (Bootstrap bg-dark) */
   color: #ffffff; /* Texto blanco */
   padding: 2rem 0; /* Espaciado vertical */
   text-align: center; /* Centrado en pantallas pequeñas */
}
footer h5 {
   font-weight: bold;
   margin-bottom: 1rem;
}
footer p, footer a {
   margin: 0.5rem 0;
   color: #ffffff;
   text-decoration: none;
   font-size: 1rem;
}
footer a:hover {
   color: #17a2b8; /* Efecto hover con un color llamativo */
   text-decoration: underline;
}
footer ul {
   list-style: none;
   padding: 0;
}
footer i {
   margin-right: 8px; /* Espacio para los iconos */
   font-size: 1.2rem;
}

/* Media Queries para Responsividad */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    .nav ul {
        flex-direction: column;
        gap: 10px;
    }
    .hero {
        height: auto;
        padding: 40px 20px;
    }
    .hero h1 {
        font-size: 2rem;
    }
    .hero p {
        font-size: 1rem;
    }
    
    .footer .footer-links {
        flex-direction: column;
        gap: 10px;
    }
}