/* =========================================================
   SOBRE NÓS - MOBILE
========================================================= */

@media screen and (max-width:768px){


    /* =====================================================
       HERO / NOSSA HISTÓRIA
    ===================================================== */

    .about-history{
        width:100%;

        min-height:0;

        padding:105px 0 70px;

        display:block;

        background:#111111;

        overflow:hidden;
    }


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

    .about-history .about-history-grid{
        width:100%;
        max-width:none;

        margin:0;

        padding:0 22px;

        display:flex;
        flex-direction:column;

        gap:0;

        align-items:stretch;
    }


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

    .about-history-content{
        order:1;

        width:100%;
        max-width:none;

        margin:0;

        padding:0;

        display:block;
    }


    /* EYEBROW */

    .about-history-content .eyebrow{
        width:100%;

        margin:0 0 18px;

        font-size:.72rem;
        line-height:1.2;

        letter-spacing:.20em;

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


    /* TÍTULO */

    .about-history-content h1,
    .about-history-content h2{
        width:100%;
        max-width:none;

        margin:0 0 30px;

        font-size:2.45rem;
        line-height:1.03;

        letter-spacing:-.045em;

        color:#ffffff;
    }


    /* =====================================================
       TEXTOS - UMA COLUNA
    ===================================================== */

    .about-history-text{
        width:100%;

        display:flex;
        flex-direction:column;

        gap:0;
    }


    .about-history-column{
        width:100%;
        max-width:none;

        display:block;
    }


    .about-history-column p{
        width:100%;
        max-width:none;

        margin:0 0 18px;

        font-size:.95rem;
        line-height:1.75;

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


    .about-history-column:last-child p:last-child{
        margin-bottom:0;
    }


    /* =====================================================
       FOTO DO RAYNER - DEPOIS DA HISTÓRIA
    ===================================================== */

    .about-history-image{
        order:2;

        position:relative;

        width:280px;
        max-width:80%;

        height:410px;

        margin:45px auto 0;

        padding:0;

        justify-self:auto;

        background:none;

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

        overflow:hidden;
    }


    .about-history-image img{
        display:block;

        width:100%;
        height:100%;

        margin:0;
        padding:0;

        object-fit:cover;
        object-position:center top;
    }

}

/* =========================================================
   NÚMEROS DERMATECH - MOBILE
========================================================= */

@media screen and (max-width:768px){

    .about-numbers{
        width:100%;

        padding:0;

        background:#ffffff;
    }


    .about-numbers-grid{
        width:100%;

        display:grid;

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

        gap:0;

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


    .about-number{
        min-height:115px;

        padding: 15px 5px;

        display:flex;
        flex-direction:column;

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

        text-align:center;

        background:#ffffff;
    }


    /* REMOVE A BORDA VERTICAL DO DESKTOP */

    .about-number:not(:last-child){
        border-right:none;
    }


    /* DIVISÃO ENTRE AS DUAS COLUNAS */

    .about-number:nth-child(odd){
        border-right:1px solid rgba(0,0,0,.09);
    }


    /* DIVISÃO ENTRE AS DUAS LINHAS */

    .about-number:nth-child(1),
    .about-number:nth-child(2){
        border-bottom:1px solid rgba(0,0,0,.09);
    }


.about-number span{
    margin:0 0 8px;

    font-size:2.2rem;
    line-height:1;

    letter-spacing:-.04em;

    color:#111111;
}


.about-number p{
    margin:0;

    max-width:120px;

    font-size:.60rem;
    line-height:1.35;

    letter-spacing:.035em;

    text-transform:uppercase;

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

/* =========================================================
   NOSSOS VALORES - MOBILE
========================================================= */

@media screen and (max-width:768px){

    .about-values{
        width:100%;

        padding:80px 0 90px;

        background:#111111;

        color:#ffffff;
    }


    .about-values-heading{
        width:100%;
        max-width:none;

        margin:0 0 42px;

        padding:0 22px;

        text-align:left;
    }


    .about-values-heading .eyebrow{
        margin:0 0 16px;

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

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


    .about-values-heading h2{
        width:100%;
        max-width:none;

        margin:0;

        font-size:2.15rem;
        line-height:1.08;

        letter-spacing:-.04em;

        color:#ffffff;
    }


    .about-values-grid{
        width:100%;

        display:grid;

        grid-template-columns:1fr;

        gap:14px;

        padding:0 22px;
    }


    .about-value-card,
    .about-value-card:nth-child(1),
    .about-value-card:nth-child(2),
    .about-value-card:nth-child(3),
    .about-value-card:nth-child(4),
    .about-value-card:nth-child(5){
        grid-column:auto;

        width:100%;

        min-height:0;

        padding:28px 24px;

        justify-content:flex-start;

        background:#151515;
    }


    .about-value-card h3{
        margin:0 0 12px;

        font-size:1.25rem;

        color:#ffffff;
    }


    .about-value-card p{
        margin:0;

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

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


    .about-value-card::before{
        width:34px;
    }


    /* SEM HOVER NO MOBILE */

    .about-value-card:hover{
        transform:none;

        background:#151515;

        border-color:rgba(255,255,255,.07);
    }


    .about-value-card:hover::before{
        width:34px;
    }

}
/* =========================================================
   ESTRUTURA E EQUIPE - MOBILE
========================================================= */

@media screen and (max-width:768px){

    .about-structure{
        width:100%;

        min-height:0;

        padding:80px 0;

        display:block;

        background:#ffffff;

        color:#111111;

        overflow:hidden;
    }


    /* REMOVE O FUNDO / FADE DO DESKTOP */

    .about-structure::before{
        display:none;

        content:none;

        background:none;

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


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

    .about-structure-grid{
        width:100%;

        display:block;

        padding:0 22px;
    }


    .about-structure-content{
        width:100%;
        max-width:none;

        margin:0;

        padding:0;
    }


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

    .about-structure-content .eyebrow{
        margin:0 0 16px;

        font-size:.70rem;
        line-height:1.2;

        letter-spacing:.18em;

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


    .about-structure-content h2{
        width:100%;

        margin:0 0 26px;

        font-size:2.15rem;
        line-height:1.07;

        letter-spacing:-.04em;

        color:#111111;
    }


    .about-structure-content p{
        width:100%;

        margin:0 0 17px;

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

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


    /* =====================================================
       FOTO NORMAL
       SEM FADE
       SEM BORDA REDONDA
    ===================================================== */

    .about-structure-image{
        display:block;

        position:relative;

        width:100%;
        height:auto;

        margin:32px 0 30px;

        padding:0;

        overflow:visible;

        border:none;
        border-radius:0;

        box-shadow:none;

        background:none;

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


    .about-structure-image::before,
    .about-structure-image::after{
        display:none;

        content:none;
    }


    .about-structure-image img{
        display:block;

        width:100%;
        height:auto;

        margin:0;
        padding:0;

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

        border:none;
        border-radius:0;

        box-shadow:none;

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


    /* =====================================================
       LISTA
    ===================================================== */

    .about-structure-list{
        width:100%;

        margin:0;

        display:grid;

        gap:0;

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


    .about-structure-list li{
        position:relative;

        width:100%;

        padding:15px 8px 15px 26px;

        font-size:.86rem;
        line-height:1.45;
        font-weight:500;

        color:#111111;

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


    .about-structure-list li::before{
        content:"";

        position:absolute;

        left:2px;
        top:50%;

        width:6px;
        height:6px;

        transform:translateY(-50%);

        border-radius:50%;

        background:#111111;
    }

}