.demo-mq {
    margin: 80px 0;

    text-align: center;
}

.caja-responsive {
    max-width: 800px;

    margin: 0 auto;


    background: #27ae60;
    color: white;
    padding: 60px;
    border-radius: 20px;

    box-shadow: 0 10px 30px rgba(39,174,96,0.3);

}


.caja-responsive ul {
    list-style: none;
    margin-top: 40px;
}

.caja-responsive li {
    padding: 20px;
    margin: 10px 0;
    background: rgba(255,255,255,0.2);

    border-radius: 10px;
}


@media (max-width: 1300px) {
    .caja-responsive {

        background: #e67e22;
        padding: 42px;

        margin: 0 40px;
    }
}


@media (max-width: 600px) {


    .caja-responsive {

        background: #3498db;
        padding: 40px;

        margin: 0 20px;
    }

    
    .caja-responsive li {
        padding: 19px;

        font-size: 20px;
    }
}



.platos-responsive {
    margin: 5rem 0;
}


.grid-platos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 40px;

    max-width: 1200px;
    margin: 60px auto;
}

.plato-mq {

    background: white;
    border-radius: 15px;
    overflow: hidden;

    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.plato-mq:hover {
    transform: translateY(-5px);

}

.plato-mq img {
    width: 100%;
    height: 200px;

    object-fit: cover;
}

.plato-mq span {

    display: block;

    padding: 20px;
    font-weight: 600;
    
    color: #2c3e50;

    text-align: center;
    background: #f8f9fa;

}


@media (max-width: 1300px) {
    .grid-platos {
        gap: 18px;
        padding: 0 20px;
    }

}

@media (max-width: 600px) {
    .grid-platos {
        grid-template-columns: 1fr;

        gap: 25px;
    }
}