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

.caruanas-social{

    display:flex;
    gap:35px;
    align-items:stretch;

}

.caruanas-instagram,
.caruanas-facebook{

    flex:1;
    min-width:0;

}


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

.caruanas-header{

    display:flex;

    align-items:center;

    gap:20px;

}

.caruanas-header-info{

    flex:1;

}

.caruanas-avatar{

    width:80px;
    height:80px;

    border-radius:50%;
    
    overflow:hidden;


}

.caruanas-avatar img{

    width:100%;
    height:100%;

    object-fit:cover;

}

.caruanas-name{

    font-size:22px;
    font-weight:700;
    color:#0d5a5c;

}

.caruanas-user{

    margin-top:2px;
    color:#888;
    font-size:16px;

}

.caruanas-name{

    font-size:22px;
    font-weight:700;
    color:#0d5a5c;

    line-height:1.1;

}

.caruanas-logo{

    width:80px;
    height:80px;

    display:flex;

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

}


.caruanas-logo i{

    font-size:42px;

    color:#0d5a5c;

}



/* =====================
   STORIES
===================== */

.caruanas-stories-wrapper{

    position:relative;

    margin-top:40px;

    overflow:visible;
    
    padding:10px 0;

}

.caruanas-stories{

    display:flex;

    gap:18px;

    overflow-x:auto;

    overflow-y:visible;

    scroll-behavior:smooth;

    scrollbar-width:none;

    padding:10px 0;
   
}

.caruanas-stories::-webkit-scrollbar{

    display:none;

}

.caruanas-story{

    width:92px;
    height:92px;

    border-radius:50%;

    background:linear-gradient(
        45deg,
        #feda75,
        #fa7e1e,
        #d62976,
        #962fbf,
        #4f5bd5
    );

    padding:4px;

    flex:none;
    
    transition:.3s;
    
    cursor:pointer;

}

.caruanas-story:hover{

    transform:scale(1.12);

}

.caruanas-story-inner{

    width:100%;
    height:100%;

    border-radius:50%;

    overflow:hidden;

    border:3px solid #d8c57a;

}

.caruanas-story img,
.caruanas-story video{

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:50%;

    display:block;

    border:3px solid #d8c57a;

}


/* =====================
   SETAS STORIES
===================== */

.caruanas-story-prev,
.caruanas-story-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:46px;
    height:46px;

    border-radius:50%;

    background:white;

    display:flex;

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

    cursor:pointer;

    z-index:10;

    opacity:0;

    transition:.3s;

}

.caruanas-story-prev{

    left:5px;

}

.caruanas-story-next{

    right:5px;

}

.caruanas-story-prev.show,
.caruanas-story-next.show{

    opacity:1;

}


/* =====================
   INDICADOR
===================== */

.caruanas-story-indicator{

    display:flex;

    justify-content:center;

    margin-top:20px;

}

.caruanas-story-track{

    width:70px;
    height:6px;

    border-radius:10px;

    background:#efe4b3;

    position:relative;

}

.caruanas-story-thumb{

    width:24px;
    height:6px;

    border-radius:10px;

    background:#ff3d7d;

    position:absolute;

    left:0;

    transition:.3s;

}


/* =====================
   LIGHTBOX
===================== */

.caruanas-lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.9);

    display:none;

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

    z-index:9999;

}

.caruanas-lightbox.ativo{

     display:flex !important;

}


/* =====================
   STORY BOX
===================== */

.caruanas-story-box{

    position:relative;

    width:360px;
    height:640px;

}


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

.caruanas-lightbox-img{

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:20px;

}


/* =====================
   VÍDEO
===================== */

.caruanas-lightbox-video{

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:20px;

}


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

.caruanas-close{

    position:absolute;

    top:15px;
    right:20px;

    color:white;

    font-size:40px;

    cursor:pointer;

    z-index:20;

}


/* =====================
   SETAS LIGHTBOX
===================== */

.caruanas-lightbox-prev,
.caruanas-lightbox-next{

    position:absolute;

    top:0;
    
    bottom:0;
    
    z-index:10;

    transform:translateY(-50%);

    width:60px;
    height:60px;

    border-radius:50%;

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

    color:white;

    display:flex;

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

    cursor:pointer;

    font-size:30px;
    
    z-index:30;

}

.caruanas-lightbox-prev{

    left:-100px;

}

.caruanas-lightbox-next{

    right:-100px;

}


/* =====================
   HEADER STORY
===================== */

.caruanas-story-header-lightbox{

    position:absolute;

    top:15px;
    left:20px;
    right:20px;

    display:flex;

    align-items:center;

    z-index:20;

}

.caruanas-story-avatar{

    width:40px;
    height:40px;

    border-radius:50%;

}

.caruanas-story-info{

    margin-left:12px;

}

.caruanas-story-name{

    color:white;

    font-weight:700;

}

.caruanas-story-time{

    color:#ddd;

    font-size:13px;

}

/* =====================
   BARRAS SUPERIORES
===================== */

.caruanas-progress-container{

    position:absolute;

    top:12px;
    left:12px;
    right:12px;

    display:flex;

    gap:6px;

    z-index:30;

}


.caruanas-progress-item{

    flex:1;

    height:4px;

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

    border-radius:10px;

    overflow:hidden;

}


.caruanas-progress-bar{

    width:0;

    height:100%;

    background:white;

}

/* FEED */

.caruanas-feed{

    display:flex;

    gap:18px;

    margin-top:50px;

    margin-bottom:40px;

}

.caruanas-post{

    flex:1;
    
    overflow:hidden;

    border-radius:25px;

}

.caruanas-post img{

    width:100%;

    height:220px;

    object-fit:cover;

    border-radius:25px;

    border:3px solid #ff3d7d;

    display:block;
    
    transition:.4s;

}

.caruanas-post:hover img{

    transform:scale(1.08);

}

.caruanas-instagram{

    border:3px solid #ff3d7d;

    border-radius:45px;

    padding:20px;

    box-shadow:
        0 8px 25px rgba(255,61,125,.25);

}

.caruanas-click-left,
.caruanas-click-right{

    position:absolute;

    top:0;
    bottom:0;

    width:50%;

    z-index:8;

    cursor:pointer;

}

.caruanas-click-left{

    left:0;

}

.caruanas-click-right{

    right:0;

}



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

.caruanas-follow{

    margin-left:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    width:120px;

    height:52px;

    border-radius:50px;

    background:#0095f6;

    color:white;

    font-size:24px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;
    
    text-decoration:none;

}

.caruanas-follow:hover{

    background:#0077cc;

}

@media(max-width:900px){

    .caruanas-social{

        flex-direction:column;

    }

}

.caruanas-stats{

    display:flex;

    gap:20px;

    margin-top:10px;

    color:#888;

    font-size:14px;

}

.caruanas-avatar-img{
    width:80px;
    height:80px;
    border-radius:50%;
    object-fit:cover;
}