/* =========================================================
   DERMATECH MOBILE
   BASE 360px — 430px
========================================================= */

@media (max-width:430px){

    :root{
        --mobile-gutter:20px;
        --mobile-header:70px;
    }


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


    body{
        -webkit-text-size-adjust:100%;
    }


    .container{
        width:100%;

        max-width:none;

        margin:0 auto;

        padding-left:max(
            var(--mobile-gutter),
            env(safe-area-inset-left)
        );

        padding-right:max(
            var(--mobile-gutter),
            env(safe-area-inset-right)
        );
    }


    img{
        max-width:100%;
    }

}

/* =========================================================
   HEADER MOBILE
========================================================= */

@media (max-width:430px){

    header.site-header{
        height:var(--mobile-header);

        background:rgba(5,5,5,.94);

        -webkit-backdrop-filter:blur(14px);
        backdrop-filter:blur(14px);
    }


    /* =========================
       ESTRUTURA
    ========================= */

    .header-inner{
        width:100%;
        height:var(--mobile-header);

        display:flex;

        align-items:center;
        justify-content:space-between;

        gap:16px;

        /* NÃO colocar padding aqui.
           A .container do mobile.css já controla. */
    }


    /* =========================
       LOGO
    ========================= */

    .brand-link{
        display:flex;

        align-items:center;
        justify-content:flex-start;

        height:var(--mobile-header);

        flex:0 0 auto;

        margin:0;
        padding:0;
    }


    .site-logo{
        display:block;

        width:auto;

        height:clamp(80px,22vw,90px);

        max-width:none;

        margin:0;
        padding:0;

        object-fit:contain;

        flex:none;
    }


    /* =========================
       ESCONDE DESKTOP
    ========================= */

    .main-nav,
    .header-actions{
        display:none !important;
    }


    /* =========================
       HAMBÚRGUER
    ========================= */

    .menu-toggle{
        display:flex;

        align-items:center;
        justify-content:center;

        width:42px;
        height:42px;

        flex:0 0 42px;

        margin:0 0 0 auto;
        padding:0;

        background:transparent;

        border:0;

        color:#FFFFFF;

        font-size:1.5rem;

        line-height:1;

        cursor:pointer;
    }


    /* =========================
       MENU ABERTO
    ========================= */

    .mobile-menu{
        position:fixed;

        top:0;
        right:-100%;

        width:min(340px,88vw);

        height:100vh;
        height:100dvh;

        padding:
            82px
            24px
            30px;

        background:rgba(5,5,5,.985);

        -webkit-backdrop-filter:blur(20px);
        backdrop-filter:blur(20px);

        overflow-y:auto;

        z-index:999;

        transition:right .35s ease;
    }


    .mobile-menu.active{
        right:0;
    }


    /* =========================
       FECHAR
    ========================= */

    .menu-close{
        position:absolute;

        top:18px;
        right:18px;

        width:42px;
        height:42px;

        display:flex;

        align-items:center;
        justify-content:center;

        margin:0;
        padding:0;

        background:transparent;

        border:0;

        color:#FFFFFF;

        font-size:1.4rem;

        cursor:pointer;
    }


    /* =========================
       LINKS
    ========================= */

    .mobile-menu-content{
        width:100%;

        display:flex;

        flex-direction:column;

        gap:0;
    }


    .mobile-menu-content > a:not(.btn-store){
        width:100%;

        min-height:52px;

        display:flex;

        align-items:center;

        padding:0;

        border-bottom:1px solid rgba(255,255,255,.07);

        color:rgba(255,255,255,.84);

        font-size:.82rem;
        font-weight:600;

        letter-spacing:.09em;

        text-transform:uppercase;

    }


    /* =========================
       COMPRAS
    ========================= */

    .mobile-menu-content .mobile-store-btn{
        width:100%;

        height:46px;

        margin-top:28px;

        display:flex;

        align-items:center;
        justify-content:center;

        border:1px solid rgba(255,255,255,.32);

        border-radius:7px;

        background:transparent;

        color:#FFFFFF;

        font-size:.76rem;
        font-weight:600;

        letter-spacing:.10em;

        text-transform:uppercase;

    }

}

@media (max-width:359px){

    :root{
        --mobile-gutter:16px;
        --mobile-header:66px;
    }


    .site-logo{
        height:76px;
    }


    .menu-toggle{
        width:38px;
        height:38px;

        flex-basis:38px;
    }


    .mobile-menu{
        width:100%;
        max-width:100%;
    }

}

/* =========================================================
   HERO MOBILE
   FLUIDO PARA TODOS OS CELULARES
========================================================= */

@media (max-width:767px){

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

    .hero{
        position:relative;

        width:100%;

        min-height:100svh;

        padding:0 !important;

        background:#050608;

        overflow:hidden;
    }


    /* =========================
       CONTAINER
    ========================= */

    .hero .container{
        position:relative;

        width:100%;

        z-index:2;
    }


    /* =========================
       ESTRUTURA
    ========================= */

    .hero-grid{
        position:relative;

        width:100%;

        min-height:100svh;

        display:flex;

        align-items:center;

        padding-top:
            calc(var(--mobile-header) + clamp(24px,7vw,40px));

        padding-bottom:
            clamp(38px,8vw,55px);

        z-index:2;
    }


    /* =========================
       TEXTO
    ========================= */

    .hero-copy{
        position:relative;

        width:100% !important;

        max-width:390px !important;

        margin:0;

        padding:0 !important;

        z-index:3;
    }


    /* efeito lateral somente desktop */

    .hero-copy::after{
        display:none !important;
    }


    /* =========================
       EYEBROW
    ========================= */

    .hero-copy .eyebrow{
        display:block;

        width:100%;

        max-width:320px;

        margin:0 0 clamp(15px,4vw,20px);

        font-size:
            clamp(.55rem,2.2vw,.64rem);

        line-height:1.55;

        letter-spacing:.16em;
    }


    /* =========================
       TÍTULO
    ========================= */

    .hero-copy h1{
        width:100%;

        max-width:11ch;

        margin:
            0
            0
            clamp(19px,5vw,25px);

        font-size:
            clamp(
                2.10rem,
                10.5vw,
                2.75rem
            );

        line-height:.98;

        letter-spacing:-.05em;

        color:var(--white);
    }


    /* =========================
       TEXTO SECUNDÁRIO
    ========================= */

    .hero-text{
        width:100%;

        max-width:350px;

        margin:
            0
            0
            clamp(24px,6vw,32px);

        font-size:
            clamp(
                .84rem,
                3.6vw,
                .95rem
            );

        line-height:1.65;

        color:rgba(255,255,255,.78);
    }


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

    .hero-actions{
        width:100%;

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

        margin:0;
    }


    .hero-actions .btn{
        width:100%;

        max-width:280px;

        min-height:44px;

        display:flex;

        align-items:center;
        justify-content:center;
    }


    /* =========================
       IMAGEM
    ========================= */

    .hero-visual{
        position:absolute !important;

        inset:0 !important;

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

        min-height:0 !important;

        margin:0 !important;

        background-image:
            url('../assets/images/01_hero.png') !important;

        background-repeat:no-repeat !important;

        /*
           mantém proporção.
           nunca estica a imagem.
        */
        background-size:cover !important;

        /*
           mantém a região principal visível.
        */
        background-position:
            64% center !important;

        z-index:0;
    }


    /* =========================
       ESCURECIMENTO
    ========================= */

    .hero::before{
        content:'';

        position:absolute;

        inset:0;

        z-index:1;

        pointer-events:none;

        background:
            linear-gradient(
                90deg,
                rgba(5,6,8,.99) 0%,
                rgba(5,6,8,.95) 35%,
                rgba(5,6,8,.80) 63%,
                rgba(5,6,8,.48) 100%
            );
    }


    /* =========================
       FADE VERTICAL
    ========================= */

    .hero-visual::after{
        content:'';

        position:absolute;

        inset:0;

        pointer-events:none;

        background:
            linear-gradient(
                180deg,
                rgba(5,6,8,.82) 0%,
                transparent 22%,
                transparent 75%,
                #050608 100%
            );
    }

}

/* =========================================================
   HERO - CELULARES
   ATÉ 430px
========================================================= */

@media (max-width:430px){

    .hero-copy{
        max-width:360px !important;
    }


    .hero-copy h1{
        font-size:
            clamp(
                2.15rem,
                10.3vw,
                2.62rem
            );
    }


    .hero-text{
        max-width:345px;
    }

}

/* =========================================================
   HERO - CELULARES PEQUENOS
   ATÉ 359px
========================================================= */

@media (max-width:359px){

    .hero-grid{
        padding-top:
            calc(var(--mobile-header) + 22px);

        padding-bottom:34px;
    }


    .hero-copy h1{
        font-size:2.08rem;
    }


    .hero-copy .eyebrow{
        max-width:280px;

        font-size:.53rem;
    }


    .hero-text{
        max-width:295px;

        font-size:.82rem;
    }


    .hero-visual{
        background-position:
            61% center !important;
    }

}

/* =========================================================
   MARCAS AUTORIZADAS - MOBILE
   2 EM CIMA + 2 EMBAIXO
========================================================= */

@media (max-width:430px){

    .home-authorized-brands{
        width:100%;

        padding:48px 0 52px;

        overflow:visible;
    }


    .home-authorized-label{
        margin:0 0 34px;

        text-align:center;

        font-size:.62rem;

        line-height:1.5;

        letter-spacing:.16em;
    }


    .home-authorized-logos{
        width:100%;

        display:grid !important;

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

        grid-template-rows:auto auto;

        gap:32px 24px;

        align-items:center;

        justify-items:center;

        margin:0;

        padding:0;
    }


    .authorized-brand-img{
        display:block !important;

        width:auto !important;
        height:auto !important;

        max-width:120px !important;
        max-height:65px !important;

        margin:0 auto !important;

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

        transform:none !important;

        -webkit-mask:none !important;
        mask:none !important;

        opacity:1 !important;

        visibility:visible !important;
    }

}

@media (max-width:359px){

    .home-authorized-logos{
        gap:28px 18px;
    }


    .authorized-brand-img{
        max-width:105px !important;
        max-height:58px !important;
    }

}

/* =========================================================
   MARCAS AUTORIZADAS
   AJUSTE EXTRA: 431px ATÉ 440px
========================================================= */

@media (min-width:431px) and (max-width:440px){

    .home-authorized-brands{
        padding:48px 0 52px;
    }

    .home-authorized-label{
        margin-bottom:34px;

        font-size:.63rem;
        letter-spacing:.16em;
    }

    .home-authorized-logos{
        display:grid !important;

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

        gap:32px 28px;

        align-items:center;
        justify-items:center;
    }

    .authorized-brand-img{
        width:auto !important;
        height:auto !important;

        max-width:128px !important;
        max-height:68px !important;

        margin:0 auto !important;

        object-fit:contain !important;

        opacity:1 !important;
        visibility:visible !important;
    }

}

/* =========================================================
   ENGENHARIA - MOBILE
   ATÉ 430px
========================================================= */

@media (max-width:430px){

    .home-technology{
        width:100%;

        padding:58px 0 52px;

        overflow:hidden;
    }


    /* TEXTO EM CIMA + IMAGEM EMBAIXO */

    .home-technology-grid{
        width:100%;

        display:grid !important;

        grid-template-columns:1fr !important;

        gap:34px;

        align-items:start;
    }


    /* =========================
       TEXTO
    ========================= */

    .home-technology-content{
        width:100%;

        max-width:100%;

        margin:0;
    }


    .home-technology-content .eyebrow{
        margin:0 0 14px;

        font-size:.62rem;

        letter-spacing:.16em;
    }


    .home-technology-content h2{
        width:100%;

        max-width:360px;

        margin:0 0 20px;

        font-size:clamp(
            2rem,
            8.8vw,
            2.45rem
        );

        line-height:1.04;

        letter-spacing:-.04em;
    }


    .home-technology-text{
        width:100%;

        max-width:370px;

        margin:0 0 24px;

        font-size:.90rem;

        line-height:1.65;
    }


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

    .home-technology-services{
        width:100%;

        display:flex;

        flex-wrap:wrap;

        gap:8px;

        margin:0 0 24px;
    }


    .home-technology-services span{
        padding:8px 10px;

        font-size:.61rem;

        letter-spacing:.09em;
    }


    /* =========================
       BOTÃO
    ========================= */

    .home-technology .btn-outline{
        display:inline-flex;

        align-items:center;
        justify-content:center;
    }


    /* =========================
       IMAGEM EMBAIXO
    ========================= */

    .home-technology-visual{
        position:relative;

        width:100%;

        min-height:0 !important;

        margin:0;

        display:block;

        overflow:hidden;

        background:transparent;
    }


    .home-technology-visual img{
        display:block;

        width:100% !important;

        max-width:100%;

        height:auto !important;

        margin:0 auto;

        object-fit:contain !important;

        object-position:center !important;
    }


    /* RETIRA O CORTE/FUNDO LATERAL DO DESKTOP */

    .home-technology-visual::before,
    .home-technology-visual::after{
        display:none !important;
    }

}
/* =========================================================
   ENGENHARIA
   AJUSTE EXTRA: 431px ATÉ 440px
========================================================= */

@media (min-width:431px) and (max-width:440px){

    .home-technology{
        padding:60px 0 54px;
    }


    .home-technology-grid{
        display:grid !important;

        grid-template-columns:1fr !important;

        gap:36px;
    }


    .home-technology-content{
        width:100%;

        max-width:100%;
    }


    .home-technology-content h2{
        max-width:380px;

        font-size:2.48rem;

        line-height:1.04;
    }


    .home-technology-text{
        max-width:390px;

        font-size:.92rem;

        line-height:1.65;
    }


    .home-technology-visual{
        width:100%;

        min-height:0 !important;

        margin:0;

        display:block;

        overflow:hidden;
    }


    .home-technology-visual img{
        display:block;

        width:100% !important;

        max-width:100%;

        height:auto !important;

        margin:0 auto;

        object-fit:contain !important;

        object-position:center !important;
    }


    .home-technology-visual::before,
    .home-technology-visual::after{
        display:none !important;
    }

}

/* =========================================================
   AVALIAÇÕES GOOGLE - MOBILE
   CARDS COMPACTOS
========================================================= */

@media (max-width:430px){

    .google-reviews{
        padding:55px 0;
    }


    /* =========================
       CABEÇALHO
    ========================= */

    .google-reviews-heading{
        width:100%;

        margin:0 auto 32px;

        text-align:center;
    }


    .google-reviews-heading .eyebrow{
        margin-bottom:14px;

        font-size:.62rem;

        letter-spacing:.16em;
    }


    .google-reviews-heading h2{
        max-width:360px;

        margin:0 auto 20px;

        font-size:2rem;

        line-height:1.08;
    }


    /* =========================
       NOTA
    ========================= */

    .google-rating-summary{
        gap:9px;
    }


    .google-rating-summary strong{
        font-size:1.65rem;
    }


    .google-stars{
        font-size:.95rem;
    }


    .google-rating-count{
        width:100%;

        margin-top:2px;

        font-size:.72rem;

        text-align:center;
    }


    /* =========================
       GRID
    ========================= */

    .google-reviews-grid{
        width:100%;

        display:grid !important;

        grid-template-columns:1fr !important;

        gap:10px;
    }


    /* =========================
       CARD
    ========================= */

    .google-review-card{
        width:100%;

        min-height:0 !important;

        padding:17px 18px !important;

        border-radius:11px;

        display:flex;

        flex-direction:column;
    }


    /* ESTRELAS */

    .google-review-stars{
        margin:0 0 12px;

        font-size:.82rem;
    }


    /* ESCONDE TEXTO DA AVALIAÇÃO */

    .google-review-text{
        display:none !important;
    }


    /* =========================
       AUTOR
    ========================= */

    .google-review-author{
        padding-top:11px;

        gap:4px;

        border-top:1px solid rgba(255,255,255,.06);
    }


    .google-review-author strong{
        font-size:.86rem;

        line-height:1.35;
    }


    .google-review-author span{
        font-size:.68rem;
    }


    /* =========================
       BOTÃO GOOGLE
    ========================= */

    .google-reviews-actions{
        margin-top:28px;
    }


    .google-reviews-actions .btn-primary{
        width:100%;

        max-width:285px;

        justify-content:center;
    }

}

/* =========================================================
   AVALIAÇÕES GOOGLE
   AJUSTE EXTRA: 431px ATÉ 440px
========================================================= */

@media (min-width:431px) and (max-width:440px){

    .google-reviews{
        padding:58px 0;
    }


    .google-reviews-heading{
        margin-bottom:34px;
    }


    .google-reviews-heading h2{
        max-width:380px;

        font-size:2.08rem;
    }


    .google-reviews-grid{
        display:grid !important;

        grid-template-columns:1fr !important;

        gap:10px;
    }


    .google-review-card{
        min-height:0 !important;

        padding:18px 20px !important;

        border-radius:11px;
    }


    .google-review-text{
        display:none !important;
    }


    .google-review-stars{
        margin-bottom:12px;
    }


    .google-review-author{
        padding-top:11px;
    }

}

/* =========================================================
   SERVIÇOS - HEADER + HERO MOBILE
   ATÉ 440px
========================================================= */

@media (max-width:440px){

    /* =====================================================
       HEADER SOBRE O HERO
    ===================================================== */

    .services-header{
        position:fixed !important;

        top:0;
        left:0;
        right:0;

        width:100%;

        background:transparent !important;

        border:0 !important;
        box-shadow:none !important;

        -webkit-backdrop-filter:none !important;
        backdrop-filter:none !important;

        z-index:1000;
    }


    /* MENU PRETO ENQUANTO ESTIVER NO HERO CLARO */

    .services-header.header-on-light .menu-toggle{
        color:#111111 !important;
    }


    /* MENU BRANCO QUANDO ENTRAR NA PARTE ESCURA */

    .services-header:not(.header-on-light) .menu-toggle{
        color:#ffffff !important;
    }


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

    .services-hero{
        position:relative;

        width:100%;
        min-height:640px;

        padding:
            115px
            0
            70px;

        display:flex;
        align-items:flex-start;

        background:#f3f4f2;

        overflow:hidden;
    }


    /* =====================================================
       FOTO - OCUPA O HERO INTEIRO
    ===================================================== */

    .services-hero::before{
        content:'';

        position:absolute;

        inset:0;

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

        background-image:
            url('../assets/images/services-hero.png');

        background-size:cover;
        background-position:68% center;
        background-repeat:no-repeat;

        -webkit-mask-image:none !important;
        mask-image:none !important;

        z-index:0;
    }


    /* =====================================================
       CAMADA CLARA PARA LEITURA DO TEXTO
    ===================================================== */

    .services-hero::after{
        content:'';

        position:absolute;

        inset:0;

        width:100% !important;

        background:
            linear-gradient(
                90deg,
                rgba(243,244,242,.98) 0%,
                rgba(243,244,242,.95) 32%,
                rgba(243,244,242,.86) 50%,
                rgba(243,244,242,.58) 68%,
                rgba(243,244,242,.18) 88%,
                rgba(243,244,242,.05) 100%
            );

        pointer-events:none;

        z-index:1;
    }


    /* =====================================================
       CONTEÚDO
    ===================================================== */

    .services-hero .container{
        position:relative;

        z-index:2;

        width:100%;

        padding-left:20px;
        padding-right:20px;
    }


    .services-hero .eyebrow{
        margin:0 0 18px;

        max-width:300px;

        font-size:.62rem;
        font-weight:600;

        line-height:1.5;
        letter-spacing:.17em;

        color:rgba(17,17,17,.52);
    }


    .services-hero h1{
        width:100%;
        max-width:330px;

        margin:0 0 24px;

        font-size:clamp(2.05rem,10vw,2.55rem);

        line-height:1;

        letter-spacing:-.055em;

        color:#111111;
    }


    .services-hero-text{
        width:100%;
        max-width:315px;

        margin:0;

        font-size:.88rem;

        line-height:1.65;

        color:rgba(17,17,17,.67);
    }

}

/* =========================================================
   SERVIÇOS - TÍTULO DA SEÇÃO MOBILE
========================================================= */

@media (max-width:440px){

    .services-list{
        width:100%;

        padding:0;

        background:#111111;

        overflow:hidden;
    }


    .services-list > .container{
        width:100%;

        padding:
            70px
            20px
            55px;

        display:block;
    }


    .services-list .section-heading{
        width:100%;
        max-width:100%;

        margin:0 auto;

        text-align:center;
    }


    .services-list .section-heading .eyebrow{
        display:block;

        margin:0 0 18px;

        font-size:.62rem;
        font-weight:600;

        line-height:1.5;
        letter-spacing:.18em;

        color:rgba(255,255,255,.48);
    }


    .services-list .section-heading h2{
        width:100%;
        max-width:350px;

        margin:0 auto 22px;

        font-size:clamp(2rem,9vw,2.6rem);

        line-height:1.02;

        letter-spacing:-.045em;

        text-align:center;

        color:#ffffff;
    }


    .services-list-intro{
        width:100%;
        max-width:335px;

        margin:0 auto;

        font-size:.88rem;

        line-height:1.7;

        text-align:center;

        color:rgba(255,255,255,.62);
    }

}

/* =========================================================
   SERVIÇOS - MOBILE
   PREVENTIVA / CORRETIVA / LAUDO
========================================================= */

@media (max-width:440px){

    .service-preventiva,
    .service-corretiva,
    .service-laudo{
        width:100%;
        min-height:0 !important;

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

        gap:36px !important;

        padding:60px 20px 0 !important;

        background:#111111;

        border:0 !important;
        overflow:hidden;
    }


    /* TEXTO SEMPRE EM CIMA */

    .service-preventiva .service-content,
    .service-corretiva .service-content,
    .service-laudo .service-content{
        order:1 !important;

        width:100%;
        max-width:none;

        margin:0;
        padding:0 !important;
    }


    /* TÍTULOS */

    .service-preventiva .service-content h3,
    .service-corretiva .service-content h3,
    .service-laudo .service-content h3{
        width:100%;
        max-width:350px;

        margin:0 0 22px;

        font-size:clamp(2rem,9vw,2.55rem);
        line-height:1.02;
        letter-spacing:-.045em;
    }


    /* EYEBROW */

    .service-preventiva .eyebrow,
    .service-corretiva .eyebrow,
    .service-laudo .eyebrow{
        margin:0 0 16px;

        font-size:.62rem;
        letter-spacing:.18em;
    }


    /* DESCRIÇÃO */

    .service-preventiva .service-content > p:not(.eyebrow),
    .service-corretiva .service-content > p:not(.eyebrow),
    .service-laudo .service-content > p:not(.eyebrow){
        max-width:350px;

        margin:0 0 28px;

        font-size:.88rem;
        line-height:1.7;

        color:rgba(255,255,255,.65);
    }


    /* LISTA */

    .service-preventiva .service-content ul,
    .service-corretiva .service-content ul,
    .service-laudo .service-content ul{
        display:grid !important;
        grid-template-columns:1fr !important;

        gap:11px !important;

        width:100%;
        max-width:350px;

        margin:0;
        padding:0;

        list-style:none;
    }


    .service-preventiva .service-content li,
    .service-corretiva .service-content li,
    .service-laudo .service-content li{
        font-size:.78rem;
        line-height:1.5;
    }


    /* IMAGEM SEMPRE EMBAIXO */

    .service-preventiva .service-image,
    .service-corretiva .service-image,
    .service-laudo .service-image{
        order:2 !important;

        width:100%;
        height:auto !important;
        min-height:0 !important;

        margin:0;

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

        overflow:hidden;
    }


    .service-preventiva .service-image img,
    .service-corretiva .service-image img,
    .service-laudo .service-image img{
        display:block;

        width:100%;
        height:auto !important;
        min-height:0 !important;

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

        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;

        transform:none !important;
    }

}

/* =========================================================
   LOJA DERMATECH - MOBILE
========================================================= */

@media (max-width:440px){

    .dermatech-store{
        width:100%;
        min-height:620px;

        margin:0;
        padding:0;

        display:flex;
        align-items:center;

        background-size:cover;
        background-position:center;
        background-repeat:no-repeat;
    }


    .dermatech-store::before{
        background:
            linear-gradient(
                90deg,
                rgba(17,17,17,.96) 0%,
                rgba(17,17,17,.88) 38%,
                rgba(17,17,17,.65) 68%,
                rgba(17,17,17,.35) 100%
            );
    }


    .store-content{
        width:100%;
        max-width:none;

        margin:0;

        padding:
            70px
            20px;

        position:relative;
        z-index:2;
    }


    .store-content .eyebrow{
        margin:0 0 16px;

        font-size:.62rem;
        letter-spacing:.18em;
    }


    .store-content h2{
        width:100%;
        max-width:350px;

        margin:0 0 24px;

        font-size:clamp(2rem,9vw,2.55rem);
        line-height:1.03;
        letter-spacing:-.045em;
    }


    .store-content p{
        width:100%;
        max-width:350px;

        margin:0 0 16px;

        font-size:.88rem;
        line-height:1.7;

        color:rgba(255,255,255,.68);
    }


    .store-button{
        margin-top:22px;

        width:auto;

        min-height:46px;

        padding:0 22px;
    }

}

/* =========================================================
   SERVIÇOS - FOOTER MOBILE
========================================================= */

@media (max-width:440px){

    .services-page + .site-footer .footer-main{
        display:flex;
        flex-direction:column;
        gap:32px;

        width:100%;
        padding:55px 20px 40px;
    }

    .services-page + .site-footer .footer-brand,
    .services-page + .site-footer .footer-contact{
        width:100%;
        margin:0;
        text-align:left;
    }

    .services-page + .site-footer .footer-logo{
        width:auto;
        max-width:180px;
        height:auto;
    }

    .services-page + .site-footer .footer-contact{
        display:flex;
        flex-direction:column;
        gap:10px;

        font-size:.85rem;
        line-height:1.6;
    }

    .services-page + .site-footer .footer-contact p{
        margin:4px 0 0;
    }

    .services-page + .site-footer .footer-map{
        width:100%;
        height:230px;
        margin:0;
    }

    .services-page + .site-footer .footer-map iframe{
        display:block;
        width:100%;
        height:100%;
        border:0;
    }

    .services-page + .site-footer .footer-bottom{
        width:100%;
    }

    .services-page + .site-footer .footer-bottom-inner{
        display:flex;
        flex-direction:column;
        align-items:flex-start;

        gap:14px;

        padding:25px 20px;
    }

    .services-page + .site-footer .footer-bottom-inner > span{
        font-size:.68rem;
        line-height:1.5;
    }

    .services-page + .site-footer .footer-social{
        display:flex;
        gap:18px;

        font-size:.75rem;
    }

}

/* =========================================================
   EQUIPAMENTOS ATENDIDOS - MOBILE
========================================================= */

@media (max-width:440px){

    .equipment-types{
        padding:70px 20px 80px;
    }

    .equipment-types .container{
        width:100%;
        padding:0;
    }

    .equipment-types-heading{
        width:100%;
        margin:0 auto 45px;
        text-align:center;
    }

    .equipment-types-heading h2{
        max-width:350px;
        margin:0 auto 22px;

        font-size:2.15rem;
        line-height:1.05;
    }

    .equipment-types-heading > p:last-child{
        max-width:340px;
        margin:0 auto;

        font-size:.88rem;
        line-height:1.7;
    }


    /* 1 CARD POR LINHA */

    .equipment-types-grid{
        display:grid !important;
        grid-template-columns:1fr !important;

        width:100%;
        gap:24px;
    }


    .equipment-type-card{
        width:100%;
        min-width:0;

        border-radius:0;

        background:#151515;
    }


    /* IMAGEM */

    .equipment-type-image{
        width:100%;
        height:300px;
        min-height:300px;
    }

    .equipment-type-image img{
        width:100%;
        height:100%;

        object-fit:contain;
        object-position:center;
    }


    /* TEXTO */

    .equipment-type-content{
        width:100%;
        padding:25px 22px 30px;
    }

    .equipment-type-content h3{
        width:100%;

        margin:0 0 12px;

        font-size:1.35rem;
        line-height:1.2;

        white-space:normal;
        overflow:visible;
    }

    .equipment-type-content p{
        width:100%;
        max-width:none;

        margin:0;

        font-size:.88rem;
        line-height:1.65;

        overflow-wrap:normal;
        word-break:normal;
    }

}

/* =========================================================
   MARCAS AUTORIZADAS - MOBILE
========================================================= */

@media (max-width:440px){

    .authorized-brands{
        padding:70px 20px 75px;
    }

    .authorized-brands .container{
        width:100%;
        padding:0;
    }

    .authorized-brands-heading{
        width:100%;
        max-width:350px;

        margin:0 auto 45px;

        text-align:center;
    }

    .authorized-brands-heading h2{
        max-width:340px;

        margin:0 auto 20px;

        font-size:2.1rem;
        line-height:1.05;
    }

    .authorized-brands-heading > p:last-child{
        max-width:335px;

        margin:0 auto;

        font-size:.88rem;
        line-height:1.7;
    }


    /* GRID 2 x 2 */

    .authorized-brands-logos{
        display:grid !important;
        grid-template-columns:repeat(2,1fr) !important;

        width:100%;

        gap:0;

        border-top:1px solid rgba(0,0,0,.08);
        border-bottom:1px solid rgba(0,0,0,.08);
    }


    .authorized-brand-logo{
        width:100%;
        height:150px;

        padding:24px;
    }


    /* REMOVE DIVISÓRIAS DO DESKTOP */

    .authorized-brand-logo:not(:last-child){
        border-right:0;
    }


    /* DIVISÓRIA VERTICAL */

    .authorized-brand-logo:nth-child(odd){
        border-right:1px solid rgba(0,0,0,.08);
    }


    /* DIVISÓRIA HORIZONTAL */

    .authorized-brand-logo:nth-child(-n+2){
        border-bottom:1px solid rgba(0,0,0,.08);
    }


    /* LOGOS MAIORES */

    .authorized-brand-logo img{
        width:auto;

        max-width:130px;
        max-height:72px;

        opacity:.82;
    }

}

/* =========================================================
   EQUIPAMENTOS HERO - MOBILE
========================================================= */

@media (max-width:440px){

    .equipments-hero{
        position:relative;

        width:100%;
        min-height:610px;

        padding:120px 20px 65px;

        display:flex;
        align-items:flex-start;

        background:#111111;

        overflow:hidden;
    }


    /* IMAGEM OCUPA TODO O HERO */

    .equipments-hero::before{
        inset:0;

        width:100%;

        background-size:cover;
        background-position:67% center;
        background-repeat:no-repeat;

        -webkit-mask-image:none;
        mask-image:none;
    }


    /* ESCURECIMENTO PARA O TEXTO */

    .equipments-hero::after{
        inset:0;

        background:
            linear-gradient(
                90deg,
                rgba(17,17,17,.98) 0%,
                rgba(17,17,17,.92) 38%,
                rgba(17,17,17,.62) 64%,
                rgba(17,17,17,.16) 100%
            );
    }


    .equipments-hero .container{
        width:100%;

        padding:0;

        position:relative;
        z-index:2;
    }


    .equipments-hero .eyebrow{
        margin:0 0 17px;

        font-size:.62rem;
        letter-spacing:.18em;

        color:rgba(255,255,255,.52);
    }


    .equipments-hero h1{
        width:100%;
        max-width:350px;

        margin:0 0 24px;

        font-size:clamp(2.15rem,10vw,2.65rem);

        line-height:1.02;
        letter-spacing:-.05em;

        color:#ffffff;
    }


    .equipments-hero-text{
        width:100%;
        max-width:330px;

        margin:0;

        font-size:.88rem;
        line-height:1.7;

        color:rgba(255,255,255,.72);
    }

}