/*
====================================
FACJJE PROFILE V2
====================================
*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    background:#edf1f5;

    font-family:Arial,Helvetica,sans-serif;

    color:#222;

}

.fac-profile{

    width:100%;

    max-width:1600px;

    margin:40px auto;

    padding:0 20px;

}

/*=========================
BANNER
==========================*/

.fac-cover{

    height:340px;

    overflow:hidden;

    border-radius:20px;

    position:relative;

    background:#111;

    box-shadow:0 20px 50px rgba(0,0,0,.18);

}

.fac-cover img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

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

.fac-container{

    display:grid;

    grid-template-columns:340px 1fr;

    gap:30px;

    margin-top:-90px;

    position:relative;

    z-index:5;

}

/*=========================
SIDEBAR
==========================*/

.fac-sidebar{

    position:sticky;

    top:25px;

    height:100%;

}

.fac-card{

    background:linear-gradient(180deg,#111,#1b1b1b);

    border:2px solid #d4af37;

    border-radius:20px;

    overflow:visible;

    box-shadow:0 20px 50px rgba(0,0,0,.35);

}

/*=========================
FOTO
==========================*/

/*==================================
FOTO DO ATLETA
===================================*/

.fac-photo{

    display:flex;

    justify-content:center;

    align-items:center;

    padding-top:30px;

    padding-bottom:20px;

    margin:0;

}

.fac-photo img{

    width:190px;

    max-width:90%;

    height:auto;

    display:block;

    border-radius:15px;

    border:6px solid #fff;

    object-fit:contain;

    background:#fff;

    box-shadow:0 12px 30px rgba(0,0,0,.20);

}

/*=========================
NOME
==========================*/

.fac-card h1{

    text-align:center;

    margin-top:15px;

    margin-bottom:5px;

    font-size:42px;

    font-weight:800;

    color:#fff;

    letter-spacing:1px;

    text-transform:uppercase;

}

.fac-user{

    display:block;

    text-align:center;

    color:#d4af37;

    font-size:17px;

    margin-bottom:30px;

}

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

.fac-info{

    padding:0 30px 30px;

}

.fac-info div{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 0;

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

}

.fac-info strong{

    color:#bdbdbd;

    font-size:14px;

    font-weight:600;

}

.fac-info span{

    color:#fff;

    font-weight:bold;

}

/*=========================
SOCIAL
==========================*/

.fac-social{

    padding:25px;

    display:flex;

    flex-direction:column;

    gap:12px;

}

.fac-social a{

    display:block;

    text-align:center;

    padding:14px;

    border-radius:10px;

    background:#111;

    color:#fff;

    text-decoration:none;

    transition:.3s;

}

.fac-social a:hover{

    background:#d4af37;

    color:#000;

}

/*=========================
CONTENT
==========================*/

.fac-content{

    width:100%;

}

/*=========================
CARDS
==========================*/

.fac-stats{

    display:grid;

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

    gap:20px;

    margin-bottom:30px;

}

.stat-box{

    background:#fff;

    border-radius:15px;

    padding:30px;

    text-align:center;

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

}

.stat-box h2{

    color:#d4af37;

    font-size:42px;

}

.stat-box span{

    display:block;

    margin-top:10px;

    color:#666;

}

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

.fac-timeline{

    background:#fff;

    border-radius:20px;

    padding:30px;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

}

.fac-timeline h2{

    font-size:28px;

    margin-bottom:25px;

    color:#222;

}

/*==================================
CARD DA LUTA
===================================*/

.fight-card{

    display:grid;

    grid-template-columns:180px 1fr 170px;

    gap:20px;

    align-items:center;

    background:#f9f9f9;

    border-radius:18px;

    overflow:hidden;

    margin-bottom:20px;

    transition:.30s;

    border:1px solid #ececec;

}

.fight-card:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 30px rgba(0,0,0,.15);

}

.fight-image{

    width:180px;

    height:120px;

    overflow:hidden;

    background:#000;

}

.fight-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.fight-body{

    padding:18px 0;

}

.fight-event{

    display:inline-block;

    background:#111;

    color:#fff;

    padding:5px 12px;

    border-radius:20px;

    font-size:12px;

    margin-bottom:12px;

}

.fight-body h3{

    font-size:24px;

    margin-bottom:8px;

}

.fight-body p{

    color:#666;

    margin-bottom:8px;

}

.fight-body small{

    color:#999;

}

.fight-result{

    text-align:center;

    padding:20px;

}

.fight-result .win{

    display:inline-block;

    background:#17a34a;

    color:#fff;

    padding:12px 22px;

    border-radius:30px;

    font-weight:bold;

    font-size:15px;

}

/*==================================
CONQUISTAS
===================================*/

.fac-achievements{

    margin-top:35px;

    background:#fff;

    padding:30px;

    border-radius:20px;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

}

.fac-achievements h2{

    margin-bottom:25px;

}

.achievement-grid{

    display:grid;

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

    gap:20px;

}

.achievement{

    background:#fafafa;

    border-radius:15px;

    padding:30px;

    text-align:center;

    border:1px solid #eee;

    transition:.30s;

}

.achievement:hover{

    transform:translateY(-5px);

    box-shadow:0 12px 25px rgba(0,0,0,.12);

}

.achievement{

    font-size:40px;

}

.achievement h4{

    margin-top:15px;

    font-size:18px;

}

.achievement span{

    display:block;

    margin-top:8px;

    color:#888;

}

/*==================================
GALERIA
===================================*/

.fac-gallery{

    margin-top:35px;

    background:#fff;

    padding:30px;

    border-radius:20px;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

}

.gallery-grid{

    display:grid;

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

    gap:18px;

}

.gallery-item{

    height:240px;

    overflow:hidden;

    border-radius:15px;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.35s;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

/*==================================
VIDEOS
===================================*/

.fac-videos{

    margin-top:35px;

    background:#fff;

    border-radius:20px;

    padding:30px;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

}

.fac-videos h2{

    margin-bottom:25px;

}

.video-grid{

    display:grid;

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

    gap:20px;

}

.video-item{

    height:220px;

    background:#111;

    border-radius:18px;

    color:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.35s;

}

.video-item:hover{

    background:#d4af37;

    color:#000;

    transform:translateY(-5px);

}

.video-item{

    font-size:60px;

}

.video-item span{

    margin-top:20px;

    font-size:18px;

    font-weight:bold;

}

/*==================================
SOBRE
===================================*/

.fac-about{

    margin-top:35px;

    background:#fff;

    padding:35px;

    border-radius:20px;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

}

.fac-about h2{

    margin-bottom:20px;

}

.fac-about p{

    color:#666;

    line-height:1.8;

}

/*==================================
PATROCINADORES
===================================*/

.fac-sponsors{

    margin-top:35px;

    background:#fff;

    padding:30px;

    border-radius:20px;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

}

.fac-sponsors h2{

    margin-bottom:25px;

}

.sponsors-grid{

    display:grid;

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

    gap:20px;

}

.sponsor{

    height:130px;

    border-radius:15px;

    background:#f4f4f4;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

    font-weight:bold;

    color:#888;

    border:2px dashed #ddd;

}

/*==================================
QR CODE
===================================*/

.fac-qrcode{

    margin-top:35px;

    background:#fff;

    padding:35px;

    border-radius:20px;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

}

.qr-box{

    display:flex;

    align-items:center;

    gap:40px;

}

.qr-image{

    width:180px;

    height:180px;

    border-radius:15px;

    background:#f5f5f5;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:bold;

}

.qr-info{

    flex:1;

}

.qr-info h2{

    margin-bottom:15px;

}

.qr-info p{

    color:#777;

    margin-bottom:20px;

}

.qr-info input{

    width:100%;

    padding:16px;

    border-radius:10px;

    border:1px solid #ddd;

    font-size:15px;

}

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

@media(max-width:1200px){

.fac-container{

grid-template-columns:1fr;

}

.fac-sidebar{

position:relative;

top:0;

}

.fac-stats{

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

}

.achievement-grid{

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

}

.gallery-grid{

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

}

.sponsors-grid{

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

}

.video-grid{

grid-template-columns:1fr;

}

.fight-card{

grid-template-columns:1fr;

}

.fight-image{

width:100%;

height:250px;

}

.qr-box{

flex-direction:column;

}

}

@media(max-width:768px){

.fac-cover{

height:220px;

}

.fac-photo{

margin-top:-70px;

}

.fac-photo img{

width:140px;

height:140px;

}

.fac-card h1{

font-size:28px;

}

.fac-stats{

grid-template-columns:1fr;

}

.gallery-grid{

grid-template-columns:1fr;

}

.achievement-grid{

grid-template-columns:1fr;

}

.sponsors-grid{

grid-template-columns:1fr;

}

}