/* Estilos específicos para iconos */

/* Tamaños base para iconos */

.icon-md {
  width: 1.5rem;
  height: 1.5rem;
}

.icon-lg {
  width: 2rem;
  height: 2rem;
}

/* Iconos de navegación */
.nav-icon {
  color: #4B5563; /* text-gray-700 */
}

.dark .nav-icon {
  color: #D1D5DB; /* text-gray-300 */
}

/* Iconos de tema */
.theme-icon {
  color: #4B5563; /* text-gray-700 */
  transition: color 0.2s ease;
}

.dark .theme-icon {
  color: #D1D5DB; /* text-gray-300 */
}

/* Contenedores de iconos */
.icon-container-sm {
  width: 2rem;
  height: 2rem;
}

.icon-container-md {
  width: 3rem;
  height: 3rem;
}

.icon-container-lg {
  width: 4rem;
  height: 4rem;
}

/* Ensure that SVGs within containers adjust correctly */
.icon-container-sm svg,
.icon-container-md svg,
.icon-container-lg svg {
  width: 60%;
  height: 60%;
}

/* Styles for icons in navigation */
nav svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Estilos para iconos en botones */
button svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Styles for icons in service cards */
.gradient-orange svg {
  width: 1.5rem;
  height: 1.5rem;
}

@media (min-width: 640px) {
  .gradient-orange svg {
    width: 2rem;
    height: 2rem;
  }
}

/* Estilos para iconos de verificación */
.bg-green-500 svg {
  width: 1rem;
  height: 1rem;
}

/* Styles for icons in the footer */
footer svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Efectos de hover para iconos */
.icon-hover-effect {
  transition: transform 0.2s ease;
}

.icon-hover-effect:hover {
  transform: scale(1.1);
}

/* Animations for icons */
.icon-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* --- Estilos para el Botón de WhatsApp --- */

    .cls-1,.cls-2{fill:#fff;}.cls-2{fill-rule:evenodd;}
    .whatsapp-button {
        position: fixed; /* Se mantiene fijo en la pantalla */
        bottom: 25px;
        right: 25px;
        width: 60px;
        height: 60px;
        background:  rgb(7, 198, 7) ;
        color: #FFF;
        border-radius: 50%; /* Lo hace circular */
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
        text-decoration: none;
        transition: transform 0.3s ease;
        z-index: 1000; /* Se asegura que esté por encima de otros elementos */
    }

    .whatsapp-button:hover {
        transform: scale(1.1); /* Agranda el botón al pasar el mouse */
    }

    .whatsapp-button svg {
        width: 32px;
        height: 32px;
    }

    /* --- Definición de la Animación --- */
    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-4px); }
        50% { transform: translateX(4px); }
        75% { transform: translateX(-4px); }
    }

    /* --- Clase que activa la Animación --- */
    .shake {
        animation: shake 0.5s ease-in-out;
    }
.cls-1{fill:#fff;}.cls-3{fill:#f28f41;}