@import url('https://fonts.googleapis.com/css2?family=Caprasimo&family=Inter:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Post+No+Bills+Colombo:wght@100..900&display=swap');

body {
    margin: 0; 
    padding: 0;
    width: 100%;
    overflow-x: hidden; 
}

.frame, .desktop {
    width: 100%;
}

.frame {
    width: 100%;
    min-width: 1440px; 
    min-height: 4116px;
    display: flex;
    background-color: #fdf0d5; 
    position: relative; 
}

.frame .desktop {
    width: 1440px;
    height: 4116px;
    position: relative;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column; 
}

.frame .rectangle {
    position: absolute;
    top: 234px;
    left: 121px;
    width: 1234px;
    height: 659px;
    object-fit: cover;
}

.frame .star {
    top: 698px;
    left: 23px;
    width: 316px;
    height: 316px;
    position: absolute;
    aspect-ratio: 1;
    object-fit: cover;
}

.frame .text-wrapper {
    position: absolute;
    top: 75px;
    left: 807px;
    width: 98px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", Helvetica;
    font-weight: 500;
    color: #780000;
    font-size: 24px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.frame .div {
    position: absolute;
    top: 75px;
    left: 945px;
    width: 103px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", Helvetica;
    font-weight: 500;
    color: #780000;
    font-size: 24px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.frame .text-wrapper-2 {
    position: absolute;
    top: 75px;
    left: 657px;
    width: 118px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", Helvetica;
    font-weight: 500;
    color: #780000;
    font-size: 24px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.frame .text-wrapper-3 {
    position: absolute;
    top: 75px;
    left: 1080px;
    width: 129px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", Helvetica;
    font-weight: 500;
    color: #780000;
    font-size: 24px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.frame .img {
    position: absolute;
    top: 1169px;
    left: 103px;
    width: 398px;
    height: 540px;
    object-fit: cover;
}

.frame .rectangle-2 {
    position: absolute;
    top: 1169px;
    left: 521px;
    width: 398px;
    height: 540px;
    object-fit: cover;
}

.frame .rectangle-3 {
    position: absolute;
    top: 1169px;
    left: 939px;
    width: 398px;
    height: 540px;
    object-fit: cover;
}

.frame .nosso-propsito {
    position: absolute;
    top: 2787px;
    left: 94px;
    width: 646px;
    height: 581px;
    display: flex;
    flex-direction: column;
    gap: 29px;
}

.frame .text-wrapper-4 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 3px;
    width: 540px;
    height: 48px;
    font-family: "Caprasimo", Helvetica;
    font-weight: 400;
    color: #780000;
    font-size: 64px;
    letter-spacing: 0;
    line-height: 84.6px;
    white-space: nowrap;
}

.frame .p {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 642px;
    height: 504px;
    font-family: "Poppins", Helvetica;
    font-weight: 500;
    color: #9e2a2b;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
}

.frame .text-wrapper-5 {
    position: absolute;
    top: 2381px;
    left: 853px;
    width: 458px;
    height: 252px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", Helvetica;
    font-weight: 500;
    color: #9e2a2b;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
}

.frame .group {
    position: absolute;
    top: 1598px;
    left: 133px;
    width: 340px;
    height: 81px;
}

.frame .ellipse {
    position: absolute;
    top: 1px;
    left: 258px;
    width: 80px;
    height: 80px;
    background-color: #fdf0d5;
    border-radius: 40px;
    aspect-ratio: 1;
}

.frame .vector {
    position: absolute;
    width: 15.59%;
    top: calc(50.00% - 22px);
    left: 78.82%;
    height: 46px;
    aspect-ratio: 1.33;
}

.frame .rectangle-4 {
    position: absolute;
    top: 0;
    left: 0;
    width: 253px;
    height: 80px;
    background-color: #fdf0d5;
    border-radius: 78px;
}

.frame .text-wrapper-6 {
    /* Propriedades existentes */
    color: #780000;
    position: absolute;
    top: 21px; /* Mantém o posicionamento vertical */
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Caprasimo", Helvetica;
    font-weight: 400;
    font-size: 32px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    
    /* 🚀 Alterações para Centralização Horizontal */
    left: 3%;
    /* Remova `left: 33px;` da sua regra original */
}

.frame .group-2 {
    position: absolute;
    top: 1598px;
    left: 551px;
    width: 340px;
    height: 81px;
}

.frame .text-wrapper-7 {
    left: 28px;
    color: #e09f3ef3;
    position: absolute;
    top: 21px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Caprasimo", Helvetica;
    font-weight: 400;
    font-size: 32px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}

.frame .vector-2 {
    width: 3.68%;
    top: calc(50.00% - 442px);
    left: 56.88%;
    aspect-ratio: 1.32;
    position: absolute;
    height: 46px;
}

.frame .filmes-semanais {
    position: absolute;
    top: 1779px;
    left: 116px;
    width: 1225px;
    height: 343px;
}

.frame .rectangle-5 {
    position: absolute;
    top: 0;
    left: 0;
    width: 189px;
    height: 305px;
    object-fit: cover;
}

.frame .rectangle-6 {
    position: absolute;
    top: 0;
    left: 204px;
    width: 189px;
    height: 305px;
    object-fit: cover;
}

.frame .rectangle-7 {
    position: absolute;
    top: 0;
    left: 408px;
    width: 189px;
    height: 305px;
    object-fit: cover;
}

.frame .rectangle-8 {
    position: absolute;
    top: 4px;
    left: 612px;
    width: 189px;
    height: 305px;
    object-fit: cover;
}

.frame .rectangle-9 {
    position: absolute;
    top: 0;
    left: 1019px;
    width: 194px;
    height: 305px;
    object-fit: cover;
}

.frame .text-wrapper-8 {
    position: absolute;
    top: 312px;
    left: 15px;
    width: 163px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Caprasimo", Helvetica;
    font-weight: 400;
    color: #003049;
    font-size: 32px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}


.frame .text-wrapper-9 {
    position: absolute;
    top: 314px;
    left: 217px;
    width: 163px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Caprasimo", Helvetica;
    font-weight: 400;
    color: #003049;
    font-size: 32px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}


.frame .text-wrapper-10 {
    position: absolute;
    top: 316px;
    left: 420px;
    width: 163px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Caprasimo", Helvetica;
    font-weight: 400;
    color: #003049;
    font-size: 32px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}


.frame .text-wrapper-11 {
    position: absolute;
    top: 316px;
    left: 623px;
    width: 163px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Caprasimo", Helvetica;
    font-weight: 400;
    color: #003049;
    font-size: 32px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}


.frame .text-wrapper-12 {
    position: absolute;
    top: 316px;
    left: 826px;
    width: 163px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Caprasimo", Helvetica;
    font-weight: 400;
    color: #003049;
    font-size: 32px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}


.frame .text-wrapper-13 {
    position: absolute;
    top: 312px;
    left: 1029px;
    width: 163px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Caprasimo", Helvetica;
    font-weight: 400;
    color: #003049;
    font-size: 32px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}

.frame .conjunto-de-imagens {
    position: absolute;
    top: 2758px;
    left: 898px;
    width: 440px;
    height: 623px;
}

.frame .star-2 {
    top: 2605px;
    left: 1194px;
    width: 246px;
    height: 289px;
    position: absolute;
    aspect-ratio: 1;
    object-fit: cover;
}

.frame .group-3 {
    position: absolute;
    width: 23.47%;
    top: calc(50.00% - 461px);
    left: 67.29%;
    height: 81px;
}

.frame .group-4 {
    position: absolute;
    top: 0;
    left: 0;
    width: 340px;
    height: 81px;
}

.frame .text-wrapper-14 {
    position: absolute;
    top: 21px;
    left: 63px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Caprasimo", Helvetica;
    font-weight: 400;
    color: #396570;
    font-size: 32px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}

.frame .vector-3 {
    width: 15.68%;
    top: calc(50.00% - 22px);
    left: 79.29%;
    aspect-ratio: 1.33;
    position: absolute;
    height: 46px;
}

.frame .group-5 {
    position: absolute;
    width: 22.20%;
    height: 3.01%;
    top: 0;
    left: 2.78%;
    aspect-ratio: 2.58;
}

.frame .unnamed {
    position: absolute;
    top: 2360px;
    left: 96px;
    width: 721px;
    height: 310px;
    aspect-ratio: 2.33;
}

.frame .group-6 {
    position: absolute;
    width: 19.44%;
    height: 2.64%;
    top: 84.31%;
    left: 40.14%;
    aspect-ratio: 2.58;
}

.frame .text-wrapper-15 {
    position: absolute;
    top: 3564px;
    left: 705px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Inter", Helvetica;
    font-weight: 400;
    color: #780000;
    font-size: 12px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.frame .rectangle-10 {
    position: absolute;
    top: 2170px;
    left: 99px;
    width: 388px;
    height: 73px;
    background-color: #003049;
    border-radius: 25px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.frame .text-wrapper-16 {
    font-family: "Poppins", Helvetica;
    font-weight: 500;
    color: #fdf0d5;
    font-size: 32px;
    letter-spacing: 0;
    line-height: normal;
}

/* 🚀 CORREÇÃO DO RODAPÉ */
.frame .group-7 {
    position: absolute;
    top: 3635px;
    left: 0; 
    width: 100%; 
    height: 483px;
}

.frame .rectangle-11 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 483px;
    background-color: #003049;
}
/* ------------------------ */

.frame .instagram-icon {
    position: absolute;
    top: 302px;
    left: 820px;
    width: 20px;
    height: 20px;
    aspect-ratio: 1;
}

.frame .pinterest {
    position: absolute;
    top: 302px;
    left: 718px;
    width: 20px;
    height: 20px;
    aspect-ratio: 1;
}

.frame .tiktok-svgrepo-com {
    position: absolute;
    top: 302px;
    left: 786px;
    width: 20px;
    height: 20px;
    aspect-ratio: 1;
}

.frame .text-wrapper-17 {
    position: absolute;
    top: 116px;
    left: 103px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", Helvetica;
    font-weight: 400;
    color: #fff2dd;
    font-size: 14px;
    letter-spacing: 0;
    line-height: normal;
}

.frame .text-wrapper-18 {
    position: absolute;
    top: 116px;
    left: 394px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", Helvetica;
    font-weight: 400;
    color: #fff2dd;
    font-size: 14px;
    letter-spacing: 0;
    line-height: normal;
}

.frame .text-wrapper-19 {
    position: absolute;
    top: 116px;
    left: 718px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", Helvetica;
    font-weight: 400;
    color: #fff2dd;
    font-size: 14px;
    letter-spacing: 0;
    line-height: normal;
}

.frame .cnpj {
    position: absolute;
    top: 264px;
    left: 718px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", Helvetica;
    font-weight: 400;
    color: #fff2dd;
    font-size: 14px;
    letter-spacing: 0;
    line-height: normal;
}

.frame .text-wrapper-20 {
    position: absolute;
    top: 227px;
    left: 718px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", Helvetica;
    font-weight: 400;
    color: #fff2dd;
    font-size: 14px;
    letter-spacing: 0;
    line-height: normal;
}

.frame .text-wrapper-21 {
    position: absolute;
    top: 153px;
    left: 394px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", Helvetica;
    font-weight: 400;
    color: #fff2dd;
    font-size: 14px;
    letter-spacing: 0;
    line-height: normal;
}

.frame .text-wrapper-22 {
    position: absolute;
    top: 227px;
    left: 394px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", Helvetica;
    font-weight: 400;
    color: #fff2dd;
    font-size: 14px;
    letter-spacing: 0;
    line-height: normal;
}

.frame .text-wrapper-23 {
    top: 174px;
    left: 394px;
    height: 18px;
    font-family: "Poppins", Helvetica;
    color: #fff2dd;
    font-size: 12px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    letter-spacing: 0;
    line-height: normal;
}

.frame .text-wrapper-24 {
    top: 248px;
    left: 394px;
    height: 18px;
    font-family: "Poppins", Helvetica;
    color: #fff2dd;
    font-size: 12px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    letter-spacing: 0;
    line-height: normal;
}

.frame .text-wrapper-25 {
    position: absolute;
    top: 153px;
    left: 103px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", Helvetica;
    font-weight: 400;
    color: #fff2dd;
    font-size: 14px;
    letter-spacing: 0;
    line-height: normal;
}

.frame .text-wrapper-26 {
    position: absolute;
    top: 190px;
    left: 103px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", Helvetica;
    font-weight: 400;
    color: #fff2dd;
    font-size: 14px;
    letter-spacing: 0;
    line-height: normal;
}

.frame .text-wrapper-27 {
    position: absolute;
    top: 227px;
    left: 103px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", Helvetica;
    font-weight: 400;
    color: #fff2dd;
    font-size: 14px;
    letter-spacing: 0;
    line-height: normal;
}

.frame .text-wrapper-28 {
    position: absolute;
    top: 264px;
    left: 103px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
    font-family: "Poppins", Helvetica;
    font-weight: 400;
    color: #fff2dd;
    font-size: 14px;
    letter-spacing: 0;
    line-height: normal;
}

.frame .text-wrapper-29 {
    position: absolute;
    top: 301px;
    left: 103px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
    font-family: "Poppins", Helvetica;
    font-weight: 400;
    color: #fff2dd;
    font-size: 14px;
    letter-spacing: 0;
    line-height: normal;
    text-decoration: underline;
}

.frame .text-wrapper-30 {
  position: absolute;
  top: 436px;
  left: 50%; 
  transform: translateX(-50%); 

  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", Helvetica;
  font-weight: 500;
  color: #fff2dd;
  font-size: 11px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .usurio {
    position: absolute;
    top: 72px;
    left: 1240px;
    width: 46px;
    height: 46px;
    aspect-ratio: 1;
    object-fit: cover;
}

.frame .carrinho {
    position: absolute;
    top: 72px;
    left: 1294px;
    width: 43px;
    height: 43px;
    aspect-ratio: 1;
    object-fit: cover;
}

.frame .claquete {
    position: absolute;
    top: 78px;
    left: 1355px;
    width: 32px;
    height: 32px;
    aspect-ratio: 1;
    object-fit: cover;
}

.frame .caixa-de {
    position: absolute;
    top: 3933px;
    left: 745px;
    width: 33px;
    height: 33px;
    aspect-ratio: 1;
    object-fit: cover;
}

.frame .image {
    position: absolute;
    top: 1772px;
    left: 923px;
    width: 199px;
    height: 312px;
    aspect-ratio: 0.64;
}

.frame .text-wrapper-31 {
    top: 1789px;
    left: 978px;
    width: 87px;
    height: 286px;
    font-family: "Post No Bills Colombo", Helvetica; 
    color: #fdf0d5;
    font-size: 200px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800; 
    letter-spacing: 0;
    line-height: normal;
}

.header-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
    cursor: pointer;
    color: #780000;
    transition: transform 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.header-link:hover {
    transform: translateY(-3px);
    color: #9e2a2b;
}

/* Botões com seta */
.group,
.group-2,
.group-3,
.text-wrapper-16 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
}

/* Animar a seta/vector dentro do botão */
.group img.vector,
.group-2 img.vector,
.group-3 img.vector-3 {
    transition: transform 0.2s ease;
}

/* Hover: mover o botão e a seta */
.group:hover img.vector,
.group-2:hover img.vector,
.group-3:hover img.vector-3,
.group:hover,
.group-2:hover,
.group-3:hover,
.text-wrapper-16:hover {
    transform: translateX(5px);
}

/* Opcional: texto também sobe levemente */
.group:hover .text-wrapper-6,
.group-2:hover .text-wrapper-7,
.group-3:hover .text-wrapper-14,
.text-wrapper-16:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
}

/* --- Efeito dos ícones do cabeçalho --- */
.usurio:hover,
.carrinho:hover,
.claquete:hover {
    transform: translateY(-3px);
    transition: transform 0.2s ease;
}

/* --- Botão "Ver mais sobre" --- */
.text-wrapper-16 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
    color: #780000;
    white-space: nowrap;
}

.text-wrapper-16:hover {
    transform: translateY(-3px);
    color: #9e2a2b;
}

/* --- Media Queries Mobile --- */
@media (max-width: 768px) {

    /* Cabeçalho */
    .header-links,
    .header-icons {
        display: none;
    }

    .hamburger {
        display: flex;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
    }

    .mobile-menu {
        display: none;
        flex-direction: column;
        gap: 15px;
        background-color: #fdf0d5;
        padding: 15px 20px;
    }

    .mobile-menu.active {
        display: flex;
    }

    /* Logo central */
    .logo {
        display: block;
        margin: 0 auto;
    }

    /* Cardápio: 3 imagens rolando horizontal */
    .frame .img,
    .frame .rectangle-2,
    .frame .rectangle-3 {
        position: relative;
        top: auto;
        left: auto;
        width: 80%;
        max-width: 300px;
        height: auto;
        margin: 10px;
        display: inline-block;
    }

    .cardapio-container {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding: 20px 0;
        -webkit-overflow-scrolling: touch;
    }

    /* Filmes semanais: grid 3x2 */
    .filmes-semanais {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: auto;
        gap: 10px;
        position: relative;
        top: auto;
        left: auto;
        width: 95%;
        margin: 0 auto;
    }

    .filmes-semanais img {
        width: 100%;
        height: auto;
    }

    /* Nosso propósito */
    .frame .nosso-propsito {
        position: relative;
        top: auto;
        left: auto;
        width: 90%;
        margin: 30px auto;
        text-align: center;
    }

    .frame .text-wrapper-4 {
        font-size: 48px;
        line-height: 60px;
    }

    .frame .p {
        width: 100%;
        font-size: 18px;
    }

    /* Botões Ver bebidas, comidas, eventos */
    .group, .group-2, .group-3 {
        position: relative;
        top: auto;
        left: auto;
        width: 90%;
        max-width: 340px;
        margin: 15px auto;
    }

    /* Rodapé */
    .group-7 {
        position: relative;
        width: 100%;
        height: auto;
        top: auto;
        left: auto;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .group-7 a,
    .group-7 div,
    .group-7 p {
        text-align: center;
    }

    .group-7 img {
        margin: 0 5px;
    }

    .frame .star,
    .frame .star-2,
    .frame .conjunto-de-imagens {
        position: relative;
        top: auto;
        left: auto;
        width: 80%;
        max-width: 250px;
        height: auto;
        margin: 10px auto;
        display: block;
    }

    .frame .text-wrapper-5,
    .frame .text-wrapper-16 {
        position: relative;
        top: auto;
        left: auto;
        width: 90%;
        margin: 10px auto;
        text-align: center;
        font-size: 18px;
    }
}
/* --- Media Queries para telas menores --- */

/* Para tablets e telas médias (abaixo de 1440px) */
@media (max-width: 1440px) {
    .frame {
        min-width: 100%;
        overflow-x: hidden;
    }

    .frame .desktop {
        width: 100%;
        min-width: 100%;
    }

    /* Cabeçalho: deixar os links com espaçamento menor */
    .header-link {
        font-size: 20px;
        padding: 0 6px;
    }

    /* Botões principais: reduzir tamanho */
    .group, .group-2, .group-3, .text-wrapper-16 {
        gap: 6px;
    }

    /* Nosso propósito */
    .nosso-propsito .text-wrapper-4 {
        font-size: 48px;
        line-height: 64px;
    }
    .nosso-propsito .p {
        font-size: 20px;
    }

    /* Filmes semanais: reduzir largura das imagens */
    .filmes-semanais img {
        width: 150px;
        height: auto;
    }

    /* Rodapé: ajustar textos e ícones */
    .group-7 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }
    .group-7 div, .group-7 a, .group-7 p {
        font-size: 12px;
        text-align: center;
    }

    /* Ícones do cabeçalho */
    .usurio, .carrinho, .claquete {
        width: 36px;
        height: 36px;
    }
}

/* Para telas menores (smartphones) */
@media (max-width: 768px) {
    .frame {
        min-width: 100%;
    }

    .frame .desktop {
        flex-direction: column;
        width: 100%;
    }

    /* Cabeçalho: empilhar links verticalmente */
    .header-link {
        display: block;
        font-size: 18px;
        margin: 6px 0;
    }

    /* Imagens principais: ocupar toda a largura */
    .img, .rectangle-2, .rectangle-3 {
        width: 90%;
        height: auto;
        margin: 12px auto;
        left: 0;
        right: 0;
    }

    /* Botões principais: largura completa e centralizados */
    .group, .group-2, .group-3, .text-wrapper-16 {
        width: 90%;
        justify-content: center;
        margin: 10px auto;
    }

    /* Filmes semanais: colocar scroll horizontal */
    .filmes-semanais {
        display: flex;
        overflow-x: auto;
        gap: 12px;
        width: 100%;
        padding: 12px 0;
    }
    .filmes-semanais img {
        width: 120px;
        height: auto;
    }

    /* Nosso propósito: ajustar texto */
    .nosso-propsito {
        width: 90%;
        margin: 20px auto;
    }
    .nosso-propsito .text-wrapper-4 {
        font-size: 36px;
        line-height: 48px;
    }
    .nosso-propsito .p {
        font-size: 16px;
    }

    /* Rodapé: reorganizar */
    .group-7 {
        flex-direction: column;
        gap: 12px;
    }
}
@media (max-width: 600px){
    .img, .rectangle-2, .rectangle-3 {
        width: 100%;
        height: auto;
        margin: 12px auto;
        left: 0;
        right: 0;
    }
}