/* Paleta de colores del logo */
 :root {
     --bs-primary: #9a2024;
     /* Rojo corporativo */
     --bs-primary-rgb: 154, 32, 36;
     --bs-dark-custom: #1c1c1c;
 }

 .btn-primary {
     --bs-btn-bg: var(--bs-primary);
     --bs-btn-border-color: var(--bs-primary);
     --bs-btn-hover-bg: #7a191c;
     --bs-btn-hover-border-color: #7a191c;
 }

 .text-primary {
     color: var(--bs-primary) !important;
 }

 /* Estilos para la sección Hero */
 .hero-section {
     /* ========== ENLACE DE IMAGEN CORREGIDO ========== */
     background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.9)), url('../img/hero.jpg');
     background-size: cover;
     background-position: center;
     padding: 12rem 0;
     color: white;
 }

 .section-icon {
     font-size: 3rem;
     color: var(--bs-primary);
 }

 /* Estilos para el efecto hover en las tarjetas de categoría */
 .card-category {
     position: relative;
     overflow: hidden;
     /* Asegura que el overlay no se salga de la tarjeta */
     border: none;
     /* Quitamos el borde por defecto de las tarjetas */
 }

 .card-category .card-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(to top, rgba(28, 28, 28, 0.95), rgba(28, 28, 28, 0));
     /* Degradado de oscuro a transparente */
     opacity: 0;
     transition: opacity 0.3s ease-in-out;
     display: flex;
     justify-content: center;
     align-items: flex-end;
     /* Alinea el botón en la parte inferior */
     padding-bottom: 2rem;
 }

 .card-category:hover .card-overlay {
     opacity: 1;
     /* El overlay aparece al hacer hover */
 }

 .card-overlay .btn {
     transform: translateY(20px);
     /* El botón empieza ligeramente abajo */
     transition: transform 0.3s ease-in-out;
 }

 .card-category:hover .card-overlay .btn {
     transform: translateY(0);
     /* El botón sube a su posición final */
 }

 .whatsapp-fab {
     position: fixed;
     right: 16px;
     bottom: 55px;
     z-index: 1050;
     box-shadow: 0 3px 22px rgba(103, 204, 112, 0.7);
 }

 @keyframes bounce {

     0%,
     20%,
     50%,
     80%,
     100% {
         transform: translateY(0);
     }

     40% {
         transform: translateY(-8px);
     }

     60% {
         transform: translateY(-4px);
     }
 }

 .whatsapp-fab.animated {
     animation: bounce 2s ease infinite 4s;
 }