@media (max-width: 480px) {

  header {
    flex-direction: column;
    align-items: end;
    justify-content: end;
    height: 80px;

    img#simbolo-cantinho-cafe {
    display: block;
    height: 75px;
    width: 95px;
    transform: translate(50px, 0);
}
    img#planta {
   display: none;
   }

    hgroup#titulos {
     display: none;
    }

   nav#menu-principal {
     display: none;
   }
  
   div.oculto {
    display: block;
   }

   div.oculto button.combina {
    background-color: #A8294A;
    color:  #F5ECD7;
   }

   ul.dropdown-menu {
    background-color: #F5ECD7;
    cursor: pointer;
   }

   ul.dropdown-menu li {
    padding: 4px;
   }

   ul.dropdown-menu li:hover {
    background-color: #727355;
    color: #F5ECD7;
   }

   ul.dropdown-menu li:hover a {
    color: #F5ECD7;
   }

   ul.dropdown-menu a{
    color: #A8294A;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
   }
  }
    main#principal {
      max-width: 100%;

      h2 {
        font-size: 1.520rem;
        margin-right: 0;
      }

      section div h2 {
        font-size: 1.28rem;
        margin-right: 0;
      }

     section div h3 {
        font-size: 1.35rem;
        white-space: nowrap;
      }

      section div p {
        font-size: .56rem;
      }

      section.divisoria {
        flex-direction: column;


        div.divisoria-img img {
          width: 46vh;
          height: 18vh;
        }

        div.divisoria-txt {
          padding: 10px;
          height: 18vh;
        }

        div#leque img {
            height: 18vh;
            width: 12vh;
        }
      }
    
      div#lado-a-lado {
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 15px;
        gap: 20px;
        max-width: 100%;

        section.coluna {
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-between;
          padding: 22px;
          gap: 20px;
          width: 100%;
          height: 100%;

        }

        .coluna-img {
          height: 90%;
          width: 70%;
        }

        .coluna-img img  {
          height: 200px;
          width: 236px;
          object-fit: cover;

        }

        .coluna-txt {
          width: 30%;
          padding: 10px;
        }

        .coluna-txt h2 {
            font-size: 1rem;
            white-space: wrap;
        }

        .coluna-txt p {
            font-size: 0.6rem;
        }

        div#iframe {
            display: flex;
           gap: 50px;

        }
        div#endereco-txt {
            align-items: center;
        }
        div#iframe iframe{
            width: 215px;
            height: 100%;
            transform: translateX(-20px);
        }
        
        div#horario-txt {
            width: 30%;
            white-space: wrap;
        }

        div#horario-img {
            width: 70%;
            padding: 10px;
        }

        div#horario-img img {
            height: 200px;
        }

      }
      
      section#img {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: 100%;
        margin-top: 50px ;
        
      }
        div#mostrando-txt {
            padding: 0 20px 0 20px;
            margin-bottom: auto;
        }

        div#mostrando-img {
            flex-direction: column;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            margin: 20px 30px 15px 30px;

            figure.junta-txt-img img {
                height: 250px;
                width: 300px;
            }

            figure.junta-txt-img figcaption {
                font-size: 1.2rem;
            }
        }

        article#card-depoimentos {
            margin: 20px 0 40px 0;
            gap: 35px;
        

        article#card-depoimentos p {
            font-size: .9rem;
        }

        div#lado {
            justify-content: center;
            align-items: center;
            gap: 0px;
        }
        div.depoimentos-txt {
            padding: 20px;
            max-width: 100%;
            height: 100%;
            margin: 30px;
        }
       } 
     }

     footer {

        h1 {
            font-size: 1.4rem;
        }

        p, a {
            font-size: 1.2rem;
        }

        div.informacoes span {
        margin-bottom: 0;
        padding: 10px;
        text-align: center;
}

        div.informacoes {
            margin: 25px 0;
            gap: 0px;
        }
     }

     main#conteudo-cardapio {
        margin-top: 40px;

        h2 {
            white-space: nowrap;
            transform: translate(-90px, 15px);
        }
     }

     main#TI {
    flex-direction: column;
    padding: 1rem;
    gap: 1.5rem;

    h2 {
    font-size: clamp(1.4rem, 5vw, 2rem);
    white-space: normal;
    }

 p {
    font-size: clamp(0.85rem, 3vw, 1.1rem);
}

div#abaixo3 {
    width: 100%;
}

div#junta2 {
    padding: 1rem;
    border-radius: 12px;
}

section.ST {
    padding: 0.8rem;
    gap: 1rem;
}

section.ST ul {
    margin-left: 1rem;
}

section.ST li {
    font-size: clamp(0.8rem, 2.5vw, 1rem);
    padding: 4px;
}

span.emoji {
    font-size: clamp(2rem, 8vw, 3rem);
    margin-bottom: 0;
}

section#musica {
    padding: 1rem;
    gap: 0.8rem;
    margin-top: 1rem;
}

section#musica h2 {
    font-size: clamp(1.4rem, 5vw, 2rem);
}

section#musica p {
    font-size: clamp(0.8rem, 2.5vw, 1rem);
    text-align: center;
}

section#musica iframe {
    width: 100%;
    height: 200px;
}

div#um-embaixo-do-outro {
    width: 100%;
    gap: 1rem;


div#um-embaixo-do-outro h2 {
    font-size: clamp(1.2rem, 4vw, 1.6rem);
}

div#um-embaixo-do-outro h3 {
    font-size: clamp(1rem, 3.5vw, 1.2rem);
}

div#um-embaixo-do-outro p {
    font-size: clamp(0.8rem, 2.5vw, 0.95rem);
}

section.formulario {
    padding: 1rem;
    border-radius: 12px;
}

form.form {
    gap: 1rem;
    padding: 0.5rem;
}

form label {
    font-size: clamp(0.85rem, 3vw, 1rem);
}

form input,
form select,
form textarea {
    width: 100%;
    font-size: clamp(0.8rem, 2.5vw, 0.9rem);
    box-sizing: border-box;
}

form textarea {
    width: 100%;
    height: 80px;
}

form label#separa {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

form label.igualar {
    flex-direction: column;
    align-items: flex-start;
    white-space: normal;
    gap: 0.5rem;
}

form button {
    width: 100%;
    padding: 0.6rem;
    font-size: clamp(0.9rem, 3vw, 1.1rem);
}

label#SEPARACAO input {
   transform: translate(-70px, -18px);
   
}
label#SEPARACAO span {
    margin-right: 0;
    margin-left: 2rem;
    text-align: center;

}
}
}
    }
 
   @media (min-width: 481px) and (max-width: 900px) {

     header {
    flex-direction: column;
    align-items: end;
    justify-content: end;
    height: 110px;

    img#simbolo-cantinho-cafe {
    display: block;
    height: 100px;
    width: 150px;
    transform: translate(50px, -3px);
    }
    img#planta {
   display: none;
   }

    hgroup#titulos {
     display: none;
    }

   nav#menu-principal {
     display: none;
   }
  
   div.oculto {
    display: block;
   }

   div.oculto button.combina {
    background-color: #A8294A;
    color:  #F5ECD7;
   }

   ul.dropdown-menu {
    background-color: #F5ECD7;
    cursor: pointer;
   }

   ul.dropdown-menu li {
    padding: 4px;
   }

   ul.dropdown-menu li:hover {
    background-color: #727355;
    color: #F5ECD7;
   }

   ul.dropdown-menu li:hover a {
    color: #F5ECD7;
   }

   ul.dropdown-menu a{
    color: #A8294A;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
   }

   ul.dropdown-menu a:active {
    text-decoration: underline;
   }

  }

    main#principal {
        flex-direction: column;
        max-width: 100%;
    

    h2 { font-size: clamp(1.2rem, 3vw, 1.8rem); }
     h3 { font-size: clamp(1rem, 2.5vw, 1.5rem); }
     p  { font-size: clamp(0.75rem, 2vw, 1rem);  }

    section.divisoria {
        flex-direction: column;
    }

    div.divisoria-img img {
        width: 100%;
        max-height: 280px;
    }

    div.divisoria-txt {
        padding: 1rem;
        height: auto;
    }

    div#leque img {
        height: 30vh;
        max-width: 100%;
    }

    div#lado-a-lado {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 1rem;
        gap: 1.5rem;
        max-width: 100%;
    }

    section.coluna {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 1.2rem;
        gap: 1rem;
        width: 100%;
        height: auto;
    }

    div.coluna-img {
        width: 60%;
    }

    div.coluna-img img {
        width: 100%;
        height: 14rem;
        object-fit: cover;
    }

    div.coluna-txt {
        width: 40%;
        padding: 0.8rem;
    }

    div.coluna-txt h2 {
        font-size: clamp(0.9rem, 2.5vw, 1.2rem);
        white-space: normal;
    }

    div.coluna-txt p {
        font-size: clamp(0.7rem, 1.8vw, 0.9rem);
    }

    div#iframe {
        display: flex;
        width: 60%;
    }

    div#iframe iframe {
        width: 100%;
        height: 14rem;
    }

    section#img {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: 100%;
        margin-top: 2rem;
    }

    div#mostrando-txt {
        padding: 0 1rem;
        margin-bottom: 1rem;
    }

    div#mostrando-img {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 12rem 0 12rem ;
        gap: 2rem;
    }

    figure.junta-txt-img {
        border: 1px solid white;
        padding: 1rem;
    }

    div#mostrando-img figure.junta-txt-img img {
        height: 350px;
        width: 300px;
    }

    div#mostrando-img figure.junta-txt-img figcaption {
        font-size: clamp(0.9rem, 2vw, 1.2rem);
        white-space: wrap;
        text-align: center;
    }
}
    article#card-depoimentos {
        margin: 1.5rem 0;
        gap: 1.5rem;
   

    article#card-depoimentos p {
        font-size: clamp(0.8rem, 2vw, 1rem);
    }

    div#lado {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        margin-top: 1.3rem;
    }

    div.depoimentos-txt {
        max-width: 90%;
        margin: 1rem 0;
        padding: 1.2rem;
        height: auto;
    }
    }

    footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 4rem auto 2rem auto;
   

     h2 {
        font-size: clamp(1.8rem, 4vw, 2.5rem);
    }

     p,
    a {
        font-size: clamp(0.9rem, 2.5vw, 1.2rem);
    }

   div.informacoes {
        margin: 1rem 2.6rem 1rem 2.6rem;
        gap: 0;
    }

    div.informacoes span {
        margin-bottom: 0;
        padding: 0.1rem;
        text-align: center;
    }
}

main#conteudo-cardapio {
        margin-top: 40px;

        h2 {
            white-space: nowrap;
            transform: translate(-70px, 10px);

        }
     }

     main#TI {
    flex-direction: column;
    padding: 1.5rem;
    gap: 2rem;


 h2 {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    white-space: normal;
}

 p {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
}

div#abaixo3 {
    width: 100%;
}

div#junta2 {
    padding: 1.5rem;
    border-radius: 16px;
}

section.ST {
    padding: 1rem;
    gap: 1.2rem;
}

section.ST ul {
    margin-left: 1.5rem;
}

section.ST li {
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    padding: 5px;
}

span.emoji {
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    margin-bottom: 0;
}

section#musica {
    padding: 1.5rem;
    gap: 1rem;
    margin-top: 1.2rem;
}

section#musica h2 {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
}

section#musica p {
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    text-align: center;
}

section#musica iframe {
    width: 100%;
    height: 220px;
}

div#um-embaixo-do-outro {
    width: 100%;
    gap: 1.5rem;
}

div#um-embaixo-do-outro h2 {
    font-size: clamp(1.4rem, 3.5vw, 1.8rem);
}

div#um-embaixo-do-outro h3 {
    font-size: clamp(1.1rem, 3vw, 1.4rem);
}

div#um-embaixo-do-outro p {
    font-size: clamp(0.9rem, 2vw, 1.1rem);
}

section.formulario {
    padding: 1.5rem;
    border-radius: 16px;
}

form.form {
    gap: 1.2rem;
    padding: 0.8rem;
}

form label {
    font-size: clamp(0.95rem, 2.5vw, 1.1rem);
}

form input,
form select,
form textarea {
    width: 100%;
    font-size: clamp(0.9rem, 2vw, 1rem);
    box-sizing: border-box;
}

form textarea {
    width: 100%;
    height: 100px;
}

form label#separa {
    flex-direction: row;
    align-items: center;
    gap: 0.8rem;
}

form label.igualar {
    flex-direction: row;
    align-items: center;
    white-space: normal;
    gap: 0.8rem;
}

form button {
    width: 100%;
    padding: 0.7rem;
    font-size: clamp(1rem, 2.5vw, 1.1rem);
}

label#SEPARACAO input {
   transform: translate(-130px, -22px);
   
}
label#SEPARACAO span {
    margin-right: 0;
    margin-left: 2rem;
    text-align: center;

}
}
}