@media (max-height: 850px) {
    .nosotros-text {
        transform: translateY(-5vh);
    }
}

@media (max-height: 700px) {

    .detail-subtext,
    .map-address,
    .platos-col,
    .btn-gmaps {
        font-size: 0.75rem;
    }

    .boton-reservas {
        width: 110px;
        height: 70px;
    }
}

@media (max-width: 1024px) {

    .detail-subtext,
    .map-address {
        font-size: 0.9rem;
    }
}

@media (max-width: 900px) {
    .viewport-wrapper {
        height: 100dvh;
    }

    body,
    .top-nav a {
        font-size: 0.9rem;
    }

    .nav-left,
    .nav-right {
        gap: 20px;
    }

    .detail-subtext,
    .map-address,
    .platos-col,
    .btn-gmaps {
        font-size: 0.75rem;
    }

    .platos-col span {
        font-size: 0.8rem;
    }

    .nosotros-detail {
        width: 350px;
    }

    #logo {
        width: 30vw;
        animation: containerScaleMov 5.5s forwards cubic-bezier(0.16, 1, 0.3, 1);
        transition: top 1s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #logo.move-down-donde {
        top: 80%;
    }

    #logo.move-up-carta {
        top: 5%;
    }

    .carta-content {
        flex-direction: column;
        justify-content: flex-start;
        padding: 0;
        overflow-y: auto;
    }

    .carta-title {
        position: relative !important;
        top: 0% !important;
        order: -1;
        text-align: center;
        margin-bottom: 0.5rem;
    }

    .boton-reservas {
        width: 110px;
        height: 70px;
    }
}

@media (max-width: 500px) {
    #logo.move-down-donde {
        top: 70%;
    }

    #logo.move-up-carta {
        top: 20%;
    }

    .platos-col {
        position: relative !important;
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 0 10% !important;
        text-align: center !important;
        opacity: 0;
        transition: opacity 0.8s ease;
        margin-bottom: 0.5rem;
    }

    .platos-col-align {
        text-align: center !important;
    }
}

@media (max-height: 600px) {
    #logo.move-down-donde {
        top: 60%;
    }

    #logo.move-up-carta {
        top: 40%;
    }
}

@media (max-width: 500px),
(max-height: 600px) {


    .nav-active-carta .platos-col {
        opacity: 1 !important;
    }

    .platos-col li {
        margin-bottom: 0;
    }

    .platos-col ul {
        margin-bottom: 0.5rem;
    }
}

@keyframes containerScaleMov {

    0%,
    65% {
        width: 40vw;
        transform: translate(-50%, -50%);
    }

    100% {
        width: 98vw;
        max-width: 1920px;
        transform: translate(-50%, -50%);
    }
}