/* =========================================================
   BARBER AREIA — MOBILE FINAL
   Desktop permanece intacto
========================================================= */

@media(max-width:768px){

    html,
    body{
        width:100% !important;
        max-width:100% !important;
        overflow-x:hidden !important;
    }

    *,
    *::before,
    *::after{
        box-sizing:border-box !important;
    }

    img,
    svg,
    iframe{
        max-width:100% !important;
    }


    /* =====================================================
       HEADER / MENU
    ===================================================== */

    header,
    .header,
    .site-header,
    .navbar,
    nav{
        max-width:100% !important;
    }

    header .container,
    .header-inner,
    .nav-inner,
    nav .container{
        width:calc(100% - 28px) !important;
        max-width:100% !important;

        min-height:62px !important;

        margin:0 auto !important;
        padding-left:0 !important;
        padding-right:0 !important;
    }

    header img,
    nav img{
        max-height:44px !important;
        width:auto !important;
    }


    /* =====================================================
       HERO
    ===================================================== */

    #inicio{
        width:100% !important;

        min-height:0 !important;

        padding:
            30px 16px
            34px !important;

        background-position:
            center center !important;

        background-size:
            cover !important;
    }

    #inicio .container,
    #inicio > .container,
    #inicio .hero-container,
    #inicio .hero-content,
    #inicio .hero-grid{
        width:100% !important;
        max-width:560px !important;

        margin-left:auto !important;
        margin-right:auto !important;
    }

    #inicio .hero-grid,
    #inicio .hero-container{
        display:grid !important;
        grid-template-columns:
            minmax(0,1fr) !important;

        gap:24px !important;
    }

    #inicio h1{
        font-size:
            clamp(34px,10vw,49px) !important;

        line-height:.98 !important;

        letter-spacing:-1.3px !important;

        margin-bottom:15px !important;
    }

    #inicio p{
        max-width:480px !important;

        font-size:14px !important;
        line-height:1.65 !important;
    }


    /* =====================================================
       HERO SLIDER
       Mantém proporção e preenche o box.
    ===================================================== */

    #inicio .barber-hero-slider{
        position:relative !important;

        width:100% !important;
        max-width:465px !important;

        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        aspect-ratio:465 / 310 !important;

        margin:
            4px auto 0 !important;

        padding:0 !important;

        border-radius:18px !important;

        overflow:hidden !important;
    }

    #inicio .barber-hero-slides{
        position:absolute !important;
        inset:0 !important;

        width:100% !important;
        height:100% !important;

        border-radius:16px !important;
        overflow:hidden !important;
    }

    #inicio .barber-hero-slide{
        position:absolute !important;
        inset:0 !important;

        width:100% !important;
        height:100% !important;

        object-fit:cover !important;
        object-position:center !important;

        border:0 !important;
        border-radius:0 !important;

        margin:0 !important;
        padding:0 !important;
    }


    /* =====================================================
       BOTÕES
    ===================================================== */

    #inicio .buttons,
    #inicio .hero-actions,
    .cta-buttons,
    .actions{
        display:flex !important;
        flex-wrap:wrap !important;

        gap:9px !important;
    }

    #inicio .btn,
    #inicio a[class*="btn"],
    .cta-buttons a{
        min-height:44px !important;

        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;

        padding:
            0 17px !important;

        font-size:11px !important;
    }


    /* =====================================================
       TODAS AS SEÇÕES
    ===================================================== */

    main > section:not(#inicio),
    body > section:not(#inicio){
        width:100% !important;

        padding-left:16px !important;
        padding-right:16px !important;
    }

    section .container{
        width:100% !important;
        max-width:560px !important;

        margin-left:auto !important;
        margin-right:auto !important;
    }

    section h2{
        font-size:
            clamp(27px,8vw,38px) !important;

        line-height:1.02 !important;
    }


    /* =====================================================
       BARBER AREIA CLUB
    ===================================================== */

    #assinatura{
        padding-top:38px !important;
        padding-bottom:38px !important;
    }

    #assinatura .container,
    #assinatura [class*="grid"],
    #assinatura [class*="wrapper"]{
        max-width:560px !important;
    }

    #assinatura [class*="grid"]{
        display:grid !important;

        grid-template-columns:
            minmax(0,1fr) !important;

        gap:14px !important;
    }

    .barber-club-side{
        width:100% !important;

        padding:
            22px 18px !important;

        min-height:0 !important;
    }

    .barber-club-side-logo{
        width:auto !important;
        max-width:190px !important;

        margin:
            0 auto 5px !important;
    }

    .barber-club-identity{
        margin:0 !important;
        padding:0 !important;
    }

    .barber-club-side h1,
    .barber-club-side h2,
    .barber-club-side h3{
        margin-top:4px !important;
    }


    /* =====================================================
       SERVIÇOS
    ===================================================== */

    #servicos{
        padding-top:40px !important;
        padding-bottom:40px !important;
    }

    #servicos [class*="grid"],
    #servicos [class*="cards"]{
        display:grid !important;

        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap:10px !important;
    }

    #servicos [class*="card"],
    #servicos [class*="item"]{
        min-width:0 !important;
        min-height:0 !important;

        padding:
            18px 13px !important;
    }


    /* =====================================================
       NOSSO TRABALHO
    ===================================================== */

    #trabalho,
    #galeria{
        padding-top:40px !important;
        padding-bottom:42px !important;

        overflow:hidden !important;
    }

    #trabalho .container,
    #galeria .container{
        width:100% !important;
        max-width:100% !important;
    }

    /*
       Não deixa o slider desktop extrapolar a tela.
    */
    #trabalho [class*="slider"],
    #galeria [class*="slider"],
    #trabalho [class*="gallery"],
    #galeria [class*="gallery"],
    #trabalho [class*="galeria"],
    #galeria [class*="galeria"]{
        max-width:100% !important;
    }

    /*
       Track continua horizontal.
    */
    #trabalho [class*="track"],
    #galeria [class*="track"]{
        max-width:none !important;

        gap:10px !important;
    }

    /*
       Em celular: 2 fotos visíveis.
    */
    #trabalho [class*="item"],
    #trabalho [class*="slide"],
    #galeria [class*="item"],
    #galeria [class*="slide"]{
        min-width:
            calc((100vw - 52px) / 2) !important;

        width:
            calc((100vw - 52px) / 2) !important;

        max-width:
            calc((100vw - 52px) / 2) !important;

        flex:
            0 0 calc((100vw - 52px) / 2) !important;
    }

    #trabalho [class*="item"] img,
    #trabalho [class*="slide"] img,
    #galeria [class*="item"] img,
    #galeria [class*="slide"] img{
        display:block !important;

        width:100% !important;
        height:220px !important;

        object-fit:cover !important;
        object-position:center !important;

        border-radius:12px !important;
    }

    /*
       Setas maiores para toque.
    */
    #trabalho button,
    #galeria button{
        min-width:42px !important;
        min-height:42px !important;

        touch-action:manipulation !important;
    }


    /* =====================================================
       INSTAGRAM
    ===================================================== */

    #instagram{
        padding-top:38px !important;
        padding-bottom:38px !important;
    }

    #instagram a{
        max-width:100% !important;
    }


    /* =====================================================
       CONTATO + MAPA
    ===================================================== */

    #contato{
        padding-top:40px !important;
        padding-bottom:40px !important;
    }

    #contato [class*="grid"],
    #contato [class*="wrapper"],
    #contato [class*="content"]{
        grid-template-columns:
            minmax(0,1fr) !important;
    }

    #contato iframe{
        display:block !important;

        width:100% !important;
        height:270px !important;

        margin-top:15px !important;

        border-radius:15px !important;
    }

    #contato a{
        max-width:100% !important;
    }


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

    .barber-footer-inner{
        width:calc(100% - 32px) !important;

        padding:
            24px 0 20px !important;

        display:flex !important;
        flex-direction:column !important;

        align-items:center !important;

        gap:17px !important;

        text-align:center !important;
    }

    .barber-footer-brand{
        flex-direction:column !important;

        gap:7px !important;
    }

    .barber-footer-logo{
        width:72px !important;
        height:auto !important;
    }

    .barber-footer-social{
        width:100% !important;

        display:grid !important;

        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap:8px !important;
    }

    .barber-social-link{
        width:100% !important;
        max-width:none !important;

        min-height:44px !important;
    }

    .barber-footer-bottom{
        min-height:0 !important;

        padding:
            11px 16px !important;

        text-align:center !important;
    }


    /* =====================================================
       WHATSAPP FLUTUANTE
    ===================================================== */

    a[href*="wa.me"][class*="float"],
    .whatsapp-float,
    .floating-whatsapp{
        position:fixed !important;

        right:15px !important;
        bottom:15px !important;

        width:54px !important;
        height:54px !important;

        z-index:99999 !important;
    }

}


/* =========================================================
   CELULARES PEQUENOS
========================================================= */

@media(max-width:480px){

    #inicio{
        padding:
            25px 14px
            30px !important;
    }

    #inicio h1{
        font-size:
            clamp(32px,10.5vw,42px) !important;
    }


    /* serviços viram uma coluna em telas estreitas */

    #servicos [class*="grid"],
    #servicos [class*="cards"]{
        grid-template-columns:
            minmax(0,1fr) !important;
    }


    /*
       Nosso Trabalho:
       uma foto grande por vez em celulares pequenos.
    */

    #trabalho [class*="item"],
    #trabalho [class*="slide"],
    #galeria [class*="item"],
    #galeria [class*="slide"]{
        min-width:
            calc(100vw - 48px) !important;

        width:
            calc(100vw - 48px) !important;

        max-width:
            calc(100vw - 48px) !important;

        flex:
            0 0 calc(100vw - 48px) !important;
    }

    #trabalho [class*="item"] img,
    #trabalho [class*="slide"] img,
    #galeria [class*="item"] img,
    #galeria [class*="slide"] img{
        height:280px !important;
    }


    /* Instagram + WhatsApp continuam lado a lado
       enquanto houver espaço */

    .barber-footer-social{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }

}


@media(max-width:350px){

    .barber-footer-social{
        grid-template-columns:
            minmax(0,1fr) !important;
    }

}