/* ==========================================================
   RESPONSIVO — HEADER + HERO
   Mobile-first ajustado por breakpoints (desktop já definido
   em style.css; aqui só sobrescrevemos para telas menores)
========================================================== */

/* ---------- Tablets, notebooks pequenos e telas médias (≤1200px) ----------
   Esse é o breakpoint que ativa o hambúrguer. Usamos 1200px (e não
   768/820px) porque o menu com 6 itens + botão já fica espremido
   bem antes disso — em tablets (ex: 1024px, 1180px) ele já precisa
   virar hambúrguer, senão os links quebram linha. */
@media (max-width: 1200px){

    header .container{
        height:80px;
    }

    /* Esconde o menu horizontal e mostra o hambúrguer */
    nav{
        position:fixed;
        top:0;
        right:-100%;
        width:75%;
        max-width:320px;
        height:100vh;
        background:var(--dark);
        border-left:1px solid var(--border);
        display:flex;
        align-items:center;
        justify-content:center;
        transition:right var(--transition);
        z-index:1000;
    }

    nav ul{
        flex-direction:column;
        align-items:center;
        gap:35px;
    }

    nav a{
        font-size:18px;
    }

    /* Checkbox marcado -> menu entra na tela */
    #menu-toggle:checked ~ nav{
        right:0;
    }

    .hamburger{
        display:flex;
    }

    /* Fundo escurecido atrás do menu (fecha ao clicar, via menu.js) */
    .nav-overlay{
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.6);
        opacity:0;
        visibility:hidden;
        transition:opacity var(--transition);
        z-index:998;
    }

    #menu-toggle:checked ~ .nav-overlay{
        opacity:1;
        visibility:visible;
    }

    /* Anima o hambúrguer virando "X" */
    #menu-toggle:checked ~ .hamburger span:nth-child(1){
        transform:translateY(8px) rotate(45deg);
    }

    #menu-toggle:checked ~ .hamburger span:nth-child(2){
        opacity:0;
    }

    #menu-toggle:checked ~ .hamburger span:nth-child(3){
        transform:translateY(-8px) rotate(-45deg);
    }

    /* Esconde o botão "Comprar Agora" do topo pra não brigar com o hambúrguer */
    header > .container > a.btn-primary{
        display:none;
    }

    .hero h1{
        font-size:52px;
    }

    .hero-content{
        gap:40px;
    }
}

/* ---------- Tablets em pé / mobile grande (≤820px) ----------
   Aqui o hero já não cabe mais lado a lado, então vira 1 coluna. */
@media (max-width: 820px){

    .hero-content{
        grid-template-columns:1fr;
        text-align:center;
    }

    /* No mobile o texto fica centralizado, então o degradê lateral
       não faz mais sentido — escurece de forma mais uniforme */
    .overlay{
        background:rgba(11,11,11,.72);
    }

    .hero-image{
        order:-1;
        max-width:320px;
        margin:0 auto;
    }

    .hero h1{
        font-size:42px;
    }

    .hero-buttons{
        justify-content:center;
        flex-wrap:wrap;
    }

    /* Selos (Café 100% Arábica, Torra Artesanal...) centralizados
       igual ao resto do texto, formando uma grade 2x2 arrumada */
    .hero-features{
        justify-content:center;
        max-width:420px;
        margin-left:auto;
        margin-right:auto;
    }

    .feature{
        flex:0 1 45%;
        justify-content:center;
    }
}

/* ---------- Celulares (≤480px) ---------- */
@media (max-width: 480px){

    .hero h1{
        font-size:32px;
    }

    .hero p{
        font-size:16px;
    }

    .btn-primary,
    .btn-secondary{
        padding:12px 24px;
        font-size:14px;
    }

    .hero-buttons{
        flex-direction:column;
        gap:14px;
        width:100%;
    }

    .hero-buttons a{
        text-align:center;
    }

    .feature{
        flex:0 1 100%;
    }
}

/* ======================================
   NOSSA ORIGEM
====================================== */
@media(max-width:991px){

    .origin{

        grid-template-columns:1fr;

    }

    .origin-image{

        height:340px;

    }

    .origin-content{

        padding:60px 30px;

        text-align:center;

    }

    .section-tag{

        justify-content:center;

    }

    .origin-content h2{

        font-size:2.3rem;

    }

    .origin-content p{

        max-width:100%;

    }

}

/* ======================================
   BENEFÍCIOS
====================================== */

@media (max-width:991px){

    .benefits{

        padding:80px 0;

    }

    .benefit-card{

        flex:1 1 45%;

        max-width:220px;

    }

    .why-coffee{

        padding:70px 0;

    }

    .why-item{

        flex:1 1 45%;

        max-width:220px;

    }

}

@media (max-width:640px){

    .section-title h2{

        font-size:2.2rem;

    }

    .benefit-card{

        flex:1 1 100%;

        max-width:280px;

        padding:0;

    }

    .why-title h2{

        font-size:2.2rem;

    }

    .why-item{

        flex:1 1 100%;

        max-width:280px;

        padding:0;

    }

}

/*==================================
      NOSSO CAFÉ
==================================*/

@media (max-width:991px){

    .product-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

    .product-package{

        max-width:320px;

        margin:0 auto;

    }

    .product-package img{

        height:auto;

    }

    .product-gallery{

        max-width:600px;

        margin:0 auto;

    }

    .product-info{

        text-align:center;

        max-width:600px;

        margin:0 auto;

    }

    .product-rating{

        justify-content:center;

    }

    .product-weights{

        justify-content:center;

        flex-wrap:wrap;

    }

}

@media (max-width:768px){

    .coffee-product{

        padding:70px 0;

    }

    .product-gallery{

        grid-template-columns:1fr 1fr;

    }

    .product-gallery img{

        height:170px;

    }

    .product-info h2{

        font-size:42px;

    }

}

@media (max-width:480px){

    .product-gallery{

        grid-template-columns:1fr;

    }

    .product-gallery img{

        height:220px;

    }

    .product-info h2{

        font-size:34px;

    }

    .product-buy,
    .product-whatsapp{

        width:100%;

    }

}

/*==================================
      DEPOIMENTOS
==================================*/

@media (max-width:991px){

    .testimonials{

        padding:70px 0;

    }

    .testimonial-card{

        flex:0 0 calc(50% - 15px);

    }

    .slider-arrow.prev{

        left:0;

        right:auto;

    }

    .slider-arrow.next{

        left:auto;

        right:0;

    }
}

@media (max-width:600px){

    .testimonial-card{

        flex:0 0 100%;

        padding:22px;

    }

    .slider-arrow{

        width:36px;

        height:36px;

    }
}

/*==================================
      CTA FINAL
==================================*/

@media (max-width:991px){

    .cta-banner{

        padding:80px 0;

    }

    .cta-overlay{

        background:rgba(11,11,11,.88);

    }

    .cta-content{

        justify-content:center;

        text-align:center;

    }

    .cta-text h2{

        max-width:100%;

    }

    .cta-features{

        justify-content:center;

    }

    .cta-buttons{

        width:100%;

        max-width:340px;

    }
}

@media (max-width:600px){

    .cta-text h2{

        font-size:2rem;

    }

    .cta-features{

        flex-direction:column;

        align-items:center;

        gap:18px;

    }

    .cta-features .feature{

        border-right:none;

        padding:0;

    }
}

/*==================================
      FOOTER
==================================*/

@media (max-width:991px){

    .footer-grid{

        grid-template-columns:repeat(2,1fr);

        gap:40px 30px;

    }

    .footer-brand{

        grid-column:1 / -1;

    }
}

@media (max-width:600px){

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-brand p{

        margin-left:auto;

        margin-right:auto;

    }

    .footer-social{

        justify-content:center;

    }

    .footer-contact li{

        justify-content:center;

    }

    .payment-badges{

        justify-content:center;

    }

    .footer-bottom-inner{

        justify-content:center;

        text-align:center;

    }
}

/*==================================
      POPUPS
==================================*/

@media (max-width:600px){

    .modal-box{

        padding:28px 22px;

        max-height:85vh;

    }

    .modal-box h3{

        font-size:1.5rem;

    }
}