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

.nf-family-hero{

    background:
    linear-gradient(
        135deg,
        #2b1600 0%,
        #4a2c00 100%
    );

    border-radius:32px;

    padding:42px;

    position:relative;

    overflow:hidden;
}

.nf-family-hero::before{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    border-radius:50%;

    background:
    rgba(255,255,255,.04);

    top:-120px;
    right:-80px;
}

.nf-family-hero-content{

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    gap:12px;
}

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

.nf-family-avatars{

    display:flex;

    align-items:center;
}

.nf-family-avatar{

    width:52px;
    height:52px;

    border-radius:50%;

    background:#f6d58a;

    color:#2b1600;

    display:flex;

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

    font-size:18px;
    font-weight:900;

    border:3px solid
    rgba(255,255,255,.12);

    margin-left:-10px;
}

.nf-family-avatar:first-child{
    margin-left:0;
}

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

.nf-family-hero h1{

    font-size:30px;

    color:#ffffff;

    font-weight:900;

    line-height:1.1;
}

.nf-family-hero p{

    font-size:15px;

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

    line-height:1.5;
}

.nf-family-hero p strong{

    color:#f6d58a;
}

/* =========================================
   PROGRESSO
========================================= */

.nf-family-progress{

    width:100%;

    height:12px;

    border-radius:999px;

    overflow:hidden;

    background:
    rgba(255,255,255,.10);
}

.nf-family-progress-fill{

    height:100%;

    border-radius:999px;

    background:
    linear-gradient(
        90deg,
        #f6d58a,
        #e8c878
    );
}

.nf-family-progress-text{

    font-size:14px;

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

/* =========================================
   LAYOUT
========================================= */

.nf-family-layout{

    display:grid;

    grid-template-columns:
    1.2fr 1fr 1fr;

    gap:24px;

    margin-top:28px;
}

/* =========================================
   SECTION
========================================= */

.nf-family-section{

    background:#ffffff;

    border-radius:28px;

    padding:24px;

    box-shadow:
    0 10px 30px
    rgba(0,0,0,.04);
}

/* =========================================
   HEADER SECTION
========================================= */

.nf-family-section-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:24px;
}

.nf-family-section-header h2{

    font-size:22px;

    font-weight:900;

    color:#211404;
}

.nf-family-section-header button{

    height:42px;

    padding:0 16px;

    border:none;

    border-radius:14px;

    background:#f3e2bf;

    color:#8b5e00;

    font-size:14px;

    font-weight:800;

    cursor:pointer;

    transition:.25s ease;
}

.nf-family-section-header button:hover{

    background:#e8c878;
}

/* =========================================
   MEMBROS
========================================= */

.nf-family-members{

    display:flex;

    flex-direction:column;

    gap:16px;
}

.nf-family-member{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px;

    border-radius:18px;

    background:#fffdf8;

    border:1px solid
    rgba(139,94,0,.08);
}

/* =========================================
   AVATAR MEMBRO
========================================= */

.nf-family-member-avatar{

    width:54px;
    height:54px;

    border-radius:50%;

    background:#2b1600;

    color:#f6d58a;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    font-weight:900;

    flex:0 0 auto;
}

/* =========================================
   INFO MEMBRO
========================================= */

.nf-family-member-info{

    display:flex;

    flex-direction:column;

    gap:4px;

    flex:1;
}

.nf-family-member-info strong{

    font-size:16px;

    color:#211404;
}

.nf-family-member-info span{

    font-size:13px;

    color:#7c6f60;
}

/* =========================================
   STATUS
========================================= */

.nf-family-member-status{

    width:12px;
    height:12px;

    border-radius:50%;

    flex:0 0 auto;
}

.nf-family-member-status.online{

    background:#22c55e;

    box-shadow:
    0 0 0 4px
    rgba(34,197,94,.15);
}

/* =========================================
   TIMELINE
========================================= */

.nf-family-timeline{

    display:flex;

    flex-direction:column;

    gap:22px;
}

.nf-family-event{

    display:flex;

    gap:14px;

    position:relative;
}

.nf-family-event-dot{

    width:14px;
    height:14px;

    border-radius:50%;

    background:#c89b2b;

    margin-top:6px;

    flex:0 0 auto;

    position:relative;
}

.nf-family-event:not(:last-child)
.nf-family-event-dot::after{

    content:"";

    position:absolute;

    width:2px;

    height:52px;

    background:
    rgba(139,94,0,.14);

    top:16px;
    left:50%;

    transform:translateX(-50%);
}

.nf-family-event strong{

    color:#211404;
}

.nf-family-event span{

    display:block;

    margin-top:6px;

    font-size:12px;

    color:#8e8577;
}

/* =========================================
   OBJETIVOS
========================================= */

.nf-family-goals{

    display:flex;

    flex-direction:column;

    gap:16px;
}

.nf-family-goal-card{

    display:flex;

    flex-direction:column;

    gap:14px;

    padding:18px;

    border-radius:20px;

    background:#fffdf8;

    border:1px solid
    rgba(139,94,0,.08);
}

.nf-family-goal-card strong{

    display:block;

    margin-bottom:6px;

    font-size:16px;

    color:#211404;
}

.nf-family-goal-card span{

    font-size:13px;

    color:#7c6f60;
}

/* =========================================
   RESPONSIVO
========================================= */

@media(max-width:1200px){

    .nf-family-layout{

        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

.nf-family-hero{

    background:
    linear-gradient(
        135deg,
        #2b1600 0%,
        #4a2c00 100%
    );

    border-radius:28px;

    padding:28px;

    position:relative;

    overflow:hidden;
}

    .nf-family-hero h1{

        font-size:30px;
    }

    .nf-family-hero p{

        font-size:15px;
    }

    .nf-family-avatar{

        width:54px;
        height:54px;

        font-size:20px;
    }

    .nf-family-section{

        padding:18px;
    }

}

/* =========================================
   REMOVE ACTIVE VERMELHO
========================================= */

.nf-family-section-header button:focus,
.nf-family-section-header button:active{

    outline:none !important;

    box-shadow:none !important;

    background:#f3e2bf !important;

    color:#8b5e00 !important;
}