/* Estilos para la versión de escritorio */
@media (min-width: 769px) {
    
    .categories-list {
        text-align: left; /* Centra los elementos de la lista */
        padding: 0; /* Elimina el relleno predeterminado de la lista */
    }

    .categories-list li {
        list-style: none; /* Elimina los marcadores de la lista */
        margin-bottom: 1px; /* Agrega un margen inferior entre cada elemento de la lista */
    }

    .categories-list li a {
        display: block; /* Convierte los enlaces en elementos de bloque */
        width: 300px; /* Ancho de los botones */
        margin: 0 auto; /* Centra los botones horizontalmente */
        padding: 10px; /* Espacio interno dentro de los botones */
        background-color: #fff; /* Fondo blanco para los botones */
        color: #006400; /* Color del texto de los botones */
        text-decoration: none; /* Elimina el subrayado de los enlaces */
        border-radius: 5px; /* Añade bordes redondeados a los botones */
        border: 1px solid #006400; /* Agrega un borde verde claro a los botones */
        transition: background-color 0.3s ease, color 0.3s ease; /* Agrega una transición suave al cambio de color de fondo y texto */
    }

    /* Estilos para hover (cuando el mouse está encima) */
    .categories-list li a:hover {
        background-color: #006400; /* Cambia el color de fondo en hover (verde oscuro) */
        color: #fff; /* Cambia el color del texto en hover a blanco */
    }

    h3 {
        text-align: center; /* Centra el texto */
    }
}

/* --------------------------------------------------------------------------------------------- */

/* Estilos para la versión móvil */
@media (max-width: 768px) {
    .categories-list {
        text-align: left; /* Centra los elementos de la lista */
        padding: 0; /* Elimina el relleno predeterminado de la lista */
        transform: translateX(-10px); /* Mueve toda la lista ligeramente hacia la izquierda */
    }

    .categories-list li {
        list-style: none; /* Elimina los marcadores de la lista */
        margin-bottom: 1px; /* Agrega un margen inferior entre cada elemento de la lista */
    }

    .categories-list li a {
        display: block; /* Convierte los enlaces en elementos de bloque */
        width: 87%; /* Ancho de los botones */
        margin: 0 auto; /* Centra los botones horizontalmente */
        margin-left: 25px; /* Ajuste adicional a la izquierda */
        margin-right: 6px; /* Ajuste adicional a la derecha */
        padding: 10px; /* Espacio interno dentro de los botones */
        background-color: #fff; /* Fondo blanco para los botones */
        color: #006400; /* Color del texto de los botones */
        text-decoration: none; /* Elimina el subrayado de los enlaces */
        border-radius: 5px; /* Añade bordes redondeados a los botones */
        border: 1px solid #006400; /* Agrega un borde verde claro a los botones */
        transition: background-color 0.3s ease, color 0.3s ease; /* Agrega una transición suave al cambio de color de fondo y texto */
    }

    /* Estilos para hover (cuando el mouse está encima) */
    .categories-list li a:hover {
        background-color: #006400; /* Cambia el color de fondo en hover (verde oscuro) */
        color: #fff; /* Cambia el color del texto en hover a blanco */
    }

    h3 {
        text-align: center; /* Centra el texto */
    }
}