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

    .card 
    {
        cursor          : pointer;
        transition      : transform 0.2s;
        display         : flex; /* Usar flexbox para controlar el contenido */
        flex-direction  : column; /* Colocar elementos en columna */
        height          : 100%; /* Asegura que la tarjeta ocupe toda la altura */
    }

    .card:hover 
    {
        transform       : scale(1.05);
    }

    .img_utileriaIcono 
    {
        width           : 100%; /* Hace que la imagen ocupe todo el ancho */
        height          : 200px; /* Fija la altura de la imagen */
        object-fit      : cover; /* Mantiene la proporción de la imagen */
    }

    .card-body {
        flex-grow       : 1; /* Permite que el cuerpo de la tarjeta crezca y empuje el título hacia abajo */
        display         : flex;
        align-items     : flex-end; /* Alinea el título al fondo */
        justify-content : center; /* Centra el título horizontalmente */
        text-align      : center; /* Centra el texto */
        background-color: black;
    }

    .card-title
   	{
   		color: white;
   	}
   	.card-title:hover
   	{
   		color: yellow;
   	}




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

.menu 
{
    width            : 100%; /* Ancho del menú */
}

.item_separador
{
  padding-bottom     : 30px;
}

.menu-item {
    display          : flex;
    align-items      : center;
    height: 300px    ; /* Altura de cada franja */
    border-bottom    : 1px solid #ccc; /* Línea divisoria */
    background-color : black;
    background       : linear-gradient(to bottom, #ff00e4, #000); 
    color            : white;
}
.menu-item:hover 
{
        transform    : scale(1.05);
        background   : linear-gradient(to bottom, #ff7e5f, #000);    
}

.menu-image 
{
    width            : 30%; /* Ancho de la imagen */
    height           : 100%; /* Altura de la imagen */
    object-fit       : cover; /* Ajusta la imagen */
}

.menu-content 
{
    width            : 70%; /* Ancho del contenido */
    padding          : 10px;
}

.menu-content h3 
{
    margin           : 0;
}

.access-button 
{
    margin-top       : 5px;
    padding          : 8px 12px;
    background-color : #007bff; /* Color del botón */
    color            : white;
    border           : none;
    border-radius    : 4px;
    cursor           : pointer;
}

.access-button:hover 
{
    background-color : #0056b3; /* Color al pasar el ratón */
}


/*-----------------------------------------------------------*/
.menu-itemEscuela {
    display          : flex;
    align-items      : center;
    height: 300px    ; /* Altura de cada franja */
    border-bottom    : 1px solid #ccc; /* Línea divisoria */
    background-color : black;
    background       : linear-gradient(to bottom, #006589, #000); 
    color            : white;
}
.menu-itemEscuela:hover 
{
        transform    : scale(1.05);
        background   : linear-gradient(to bottom, #abd45e, #000);    
}