body {
    font-family: sans-serif; /* O la fuente que prefieras */
}

.category-section {
    max-width: 900px; /* Ancho máximo para la sección */
    margin: 20px auto; /* Centrar la sección y añadir espacio */
    padding: 15px;
    border: 1px solid #eee; /* Opcional: borde alrededor */
    border-radius: 8px; /* Opcional: bordes redondeados */
    background-color: #f9f9f9; /* Opcional: color de fondo */
}

.category-section-title {
    text-align: center;
    margin-bottom: 20px;
}

.category-section-title h3 {
    margin-bottom: 5px;
    font-size: 1.8em;
    color: #000000;
    text-align: center;
    font-weight: bold;
}

.category-section-title hr {
    border: 0;
    height: 1px;
    background: #ddd;
    max-width: 100px; /* Hacer la línea más corta */
    margin: 10px auto; /* Centrar la línea */
}

.category-container {
    display: flex; /* Activa Flexbox */
    justify-content: space-around; /* Espacia las dos columnas */
    gap: 20px; /* Espacio entre las columnas */
    flex-wrap: wrap; /* Permite que las columnas se apilen en pantallas pequeñas */
}

.main-category {
    flex: 1; /* Cada columna ocupa espacio disponible */
    min-width: 250px; /* Ancho mínimo antes de apilarse */
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    background-color: #6E7278;
    text-align: center;
    position: relative; /* Necesario para posicionar la lista desplegable si se hace absoluta */
    transition: box-shadow 0.3s ease; /* Efecto suave al pasar el ratón */
}

.main-category:hover {
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra al pasar el ratón */
}

.main-category-title {
    cursor: pointer; /* Indica que se puede interactuar */
    margin-bottom: 15px; /* Espacio antes de la lista */
    display: flex; /* Para alinear icono y texto */
    align-items: center; /* Centrar verticalmente icono y texto */
    justify-content: center; /* Centrar horizontalmente */
    gap: 10px; /* Espacio entre icono y título */
}

.main-category h4 {
    margin: 0; /* Quitar margen por defecto del h4 */
    font-size: 1.3em;
    color: #ffffff; /* Color para el título de la categoría */
}

.category-icon {
    font-size: 1.5em; /* Tamaño del icono principal */
    color: #ffffff; /* Color del icono principal */
}

.subcategory-list {
    list-style: none; /* Quitar puntos de la lista */
    padding: 0;
    margin: 0;
    max-height: 0; /* Ocultar por defecto */
    overflow: hidden; /* Ocultar contenido que desborda */
    transition: max-height 0.5s ease-out; /* Animación suave al desplegar */
    text-align: left; /* Alinear subcategorías a la izquierda */
}

/* Mostrar la lista al pasar el ratón sobre .main-category */
.main-category:hover .subcategory-list {
    max-height: 500px; /* Un valor suficientemente grande para mostrar todo */
    margin-top: 15px; /* Espacio cuando se despliega */
    transition: max-height 0.5s ease-in; /* Animación suave al desplegar */
}

.subcategory-list li {
    margin-bottom: 10px; /* Espacio entre elementos de subcategoría */
    border-bottom: 1px solid #eee; /* Línea separadora sutil */
    padding-bottom: 8px;
}
.subcategory-list li:last-child {
    border-bottom: none; /* Quitar borde del último elemento */
    margin-bottom: 0;
    padding-bottom: 0;
}

.subcategory-list li strong {
    display: block; /* Hacer que el título ocupe toda la línea */
    margin-bottom: 8px; /* Espacio debajo del título de grupo */
    color: #ffffff;
    font-weight: bold;
}

.subcategory-list li strong i {
    margin-right: 5px; /* Espacio icono-texto en títulos de grupo */
    color: #ffffff;
}

.subcategory-list a {
    text-decoration: none;
    color: #ffffff;
    display: block; /* Ocupar todo el ancho del li */
    padding: 5px 0;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.subcategory-list a:hover {
    color: green; /* Cambiar color al pasar el ratón */
    background-color: #cdcfd2; /* Fondo sutil al pasar el ratón */
    border-radius: 3px;
}

.subcategory-list a i {
    margin-right: 8px; /* Espacio entre icono y texto del enlace */
    width: 20px; /* Ancho fijo para alinear iconos (fa-fw ya ayuda) */
    text-align: center;
    color: #ffffff; /* Color para los iconos de subcategoría */
}

.nested-subcategory-list {
    list-style: none;
    padding-left: 20px; /* Indentación para sub-subcategorías */
    margin-top: 8px; /* Espacio sobre la lista anidada */
}

.nested-subcategory-list li {
    border-bottom: none; /* Quitar bordes en la lista más interna */
    padding-bottom: 0;
    margin-bottom: 5px;
}

/* Media Query para pantallas pequeñas (ej. móviles) */
@media (max-width: 600px) {
    .category-container {
        flex-direction: column; /* Apilar las columnas verticalmente */
        gap: 15px; /* Espacio entre categorías apiladas */
    }
    .main-category {
        min-width: 100%; /* Ocupar todo el ancho disponible */
    }

    /* Si usas el hover, puede ser útil mostrar siempre las subcategorías en móvil */
    /* Descomenta esto si prefieres que estén siempre visibles en móvil */
    /*
    .subcategory-list {
        max-height: none;
        overflow: visible;
        margin-top: 15px;
    }
    .main-category:hover .subcategory-list {
       max-height: none;
    }
    */
}