/* ==========================================================
   VIVA FEED V2 — FOUNDATION R1
   ========================================================== */

.v2-feed-page{
    --v2-wine:#4b0716;
    --v2-wine-2:#7b1028;
    --v2-red:#a81434;
    --v2-pink:#d92754;
    --v2-line:#eadfe2;
    --v2-bg:#f7f4f3;
    --v2-surface:#fff;
    --v2-text:#251419;
    --v2-muted:#776a6e;

    width:100%;
    max-width:720px;
    margin:0 auto;
    padding:0 0 100px;
    color:var(--v2-text);
}

.v2-lab-banner{
    margin:0 0 12px;
    padding:12px 16px;
    border:1px solid #eadfe2;
    border-radius:16px;
    background:#fff7f8;
    font-size:.8rem;
    color:#76575f;
}

.v2-lab-banner strong{
    color:var(--v2-wine);
}

.v2-feed-top{
    background:var(--v2-surface);
    border:1px solid var(--v2-line);
    border-radius:18px;
    margin-bottom:12px;
    overflow:hidden;
}

.v2-section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:15px 17px 7px;
}

.v2-section-head h2{
    margin:0;
    font-size:1rem;
    font-weight:800;
    letter-spacing:-.01em;
}

.v2-section-head a{
    font-size:.78rem;
    font-weight:700;
    color:var(--v2-red);
    text-decoration:none;
}


/* MOMENTOS */

.v2-moments{
    display:flex;
    gap:13px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    padding:8px 15px 16px;
}

.v2-moments::-webkit-scrollbar{
    display:none;
}

.v2-moment{
    flex:0 0 72px;
    width:72px;
    text-decoration:none;
    color:inherit;
    text-align:center;
    scroll-snap-align:start;
}

.v2-moment-ring{
    width:66px;
    height:66px;
    margin:0 auto 6px;
    padding:3px;
    border-radius:50%;
    background:
        linear-gradient(
            135deg,
            #f5ba30,
            #d72551 48%,
            #680d27
        );
}

.v2-moment-ring.is-add{
    background:#f2e7e9;
}

.v2-moment-avatar{
    width:60px;
    height:60px;
    border-radius:50%;
    background:#eee;
    border:3px solid #fff;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    color:var(--v2-wine);
    position:relative;
}

.v2-moment-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.v2-moment-plus{
    font-size:30px;
    line-height:1;
    color:var(--v2-wine);
}

.v2-moment small{
    display:block;
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.71rem;
    color:#4c3d41;
}


/* COMPOSER */

.v2-composer{
    display:flex;
    align-items:center;
    gap:11px;
    padding:14px 15px 10px;
    border-top:1px solid #f0e6e8;
}

.v2-composer-avatar{
    flex:0 0 42px;
    width:42px;
    height:42px;
    border-radius:50%;
    overflow:hidden;
    background:#eee4e7;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    color:var(--v2-wine);
}

.v2-composer-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.v2-composer-box{
    flex:1;
    min-width:0;
    display:flex;
    align-items:center;
    min-height:44px;
    padding:0 15px;
    border:1px solid #e6d9dc;
    border-radius:999px;
    background:#faf8f8;
    color:#736469;
    text-decoration:none;
    font-size:.9rem;
}

.v2-composer-actions{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    border-top:1px solid #f0e6e8;
}

.v2-composer-action{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:11px 5px 12px;
    text-decoration:none;
    color:#554449;
    font-size:.76rem;
    font-weight:700;
    border-right:1px solid #f2e9eb;
}

.v2-composer-action:last-child{
    border-right:0;
}

.v2-composer-action i{
    font-size:19px;
    color:var(--v2-red);
}


/* TABS */

.v2-tabs-wrap{
    background:rgba(247,244,243,.96);
    backdrop-filter:blur(12px);
    position:sticky;
    top:0;
    z-index:5;
    padding:3px 0 10px;
}

.v2-tabs{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    background:#fff;
    border:1px solid var(--v2-line);
    border-radius:14px;
    overflow:hidden;
}

.v2-tab{
    position:relative;
    padding:12px 4px;
    text-align:center;
    color:#76676b;
    text-decoration:none;
    font-size:.73rem;
    font-weight:800;
    white-space:nowrap;
}

.v2-tab.is-active{
    color:var(--v2-wine);
}

.v2-tab.is-active::after{
    content:"";
    position:absolute;
    left:22%;
    right:22%;
    bottom:0;
    height:3px;
    border-radius:5px 5px 0 0;
    background:var(--v2-red);
}


/* STREAM */

.v2-stream{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.v2-post{
    background:var(--v2-surface);
    border:1px solid var(--v2-line);
    border-radius:18px;
    overflow:hidden;
}

.v2-post-head{
    display:flex;
    align-items:center;
    gap:10px;
    padding:13px 15px;
}

.v2-avatar{
    flex:0 0 42px;
    width:42px;
    height:42px;
    border-radius:50%;
    overflow:hidden;
    background:#eee5e7;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.86rem;
    font-weight:900;
    color:var(--v2-wine);
}

.v2-avatar img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.v2-author{
    flex:1;
    min-width:0;
}

.v2-author strong{
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:.88rem;
}

.v2-author small{
    display:block;
    margin-top:2px;
    color:var(--v2-muted);
    font-size:.7rem;
}

.v2-origin{
    flex:0 0 auto;
    padding:4px 8px;
    border-radius:999px;
    background:#f8edef;
    color:#8b1c36;
    font-size:.62rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.055em;
}

.v2-post-copy{
    padding:0 15px 13px;
}

.v2-post-copy h3{
    margin:0 0 6px;
    font-size:1rem;
    line-height:1.28;
}

.v2-post-body{
    position:relative;
    white-space:pre-wrap;
    word-wrap:break-word;
    font-size:.9rem;
    line-height:1.52;
    color:#3d3034;
}

.v2-post-body.is-collapsed{
    display:-webkit-box;
    -webkit-line-clamp:5;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.v2-more{
    border:0;
    padding:5px 0 0;
    margin:0;
    background:transparent;
    color:#7f1832;
    font:inherit;
    font-size:.78rem;
    font-weight:800;
    cursor:pointer;
}


/* MEDIA */

.v2-media{
    position:relative;
    width:100%;
    background:#111;
    overflow:hidden;
}

.v2-media-track{
    display:flex;
    width:100%;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
}

.v2-media-track::-webkit-scrollbar{
    display:none;
}

.v2-media-slide{
    flex:0 0 100%;
    width:100%;
    min-width:100%;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#111;
}

.v2-media-slide img,
.v2-media-slide video{
    width:100%;
    max-height:680px;
    display:block;
    object-fit:contain;
    background:#111;
}

.v2-media-slide video{
    min-height:260px;
}

.v2-media-count{
    position:absolute;
    top:12px;
    right:12px;
    z-index:3;
    padding:5px 9px;
    border-radius:999px;
    background:rgba(0,0,0,.66);
    color:#fff;
    font-size:.7rem;
    font-weight:800;
}

.v2-carousel-btn{
    position:absolute;
    z-index:3;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.9);
    color:#40111d;
    box-shadow:0 3px 16px rgba(0,0,0,.2);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}

.v2-carousel-prev{
    left:10px;
}

.v2-carousel-next{
    right:10px;
}

.v2-carousel-dots{
    position:absolute;
    z-index:3;
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:4px;
}

.v2-carousel-dot{
    width:5px;
    height:5px;
    border-radius:50%;
    background:rgba(255,255,255,.55);
    transition:.2s ease;
}

.v2-carousel-dot.is-active{
    width:14px;
    border-radius:999px;
    background:#fff;
}

.v2-audio{
    padding:18px;
    background:#fff;
}

.v2-audio audio{
    width:100%;
}

.v2-document{
    display:flex;
    align-items:center;
    gap:12px;
    padding:20px;
    color:#fff;
    text-decoration:none;
    background:#3c111d;
}


/* ACTIONS */

.v2-actions{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid #f0e7e9;
}

.v2-action{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    min-height:45px;
    border:0;
    border-right:1px solid #f3eaec;
    background:#fff;
    color:#59484d;
    text-decoration:none;
    font:inherit;
    font-size:.72rem;
    font-weight:750;
    cursor:pointer;
}

.v2-action:last-child{
    border-right:0;
}

.v2-action:hover{
    background:#fbf7f8;
    color:var(--v2-red);
}

.v2-action i{
    font-size:18px;
}


/* INFINITE SHELL */

.v2-sentinel{
    min-height:120px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:20px;
    color:#827378;
}

.v2-loader{
    width:28px;
    height:28px;
    margin-bottom:12px;
    border:3px solid #eadadd;
    border-top-color:var(--v2-red);
    border-radius:50%;
    opacity:0;
}

.v2-sentinel.is-loading .v2-loader{
    opacity:1;
    animation:v2-spin .75s linear infinite;
}

.v2-sentinel-message{
    font-size:.74rem;
    line-height:1.45;
}

.v2-skeleton{
    display:none;
    background:#fff;
    border:1px solid var(--v2-line);
    border-radius:18px;
    overflow:hidden;
}

.v2-skeleton.is-visible{
    display:block;
}

.v2-skeleton-head,
.v2-skeleton-text,
.v2-skeleton-media{
    background:
        linear-gradient(
            90deg,
            #f2eded 25%,
            #faf7f7 50%,
            #f2eded 75%
        );
    background-size:200% 100%;
    animation:v2-shimmer 1.2s infinite;
}

.v2-skeleton-head{
    width:46%;
    height:18px;
    margin:18px;
    border-radius:20px;
}

.v2-skeleton-text{
    width:75%;
    height:12px;
    margin:0 18px 18px;
    border-radius:20px;
}

.v2-skeleton-media{
    width:100%;
    aspect-ratio:4/3;
}

@keyframes v2-spin{
    to{transform:rotate(360deg)}
}

@keyframes v2-shimmer{
    to{background-position:-200% 0}
}


/* MOBILE */

@media (max-width:760px){

    .v2-feed-page{
        max-width:none;
        padding-bottom:90px;
    }

    .v2-lab-banner{
        margin:0 8px 8px;
        border-radius:13px;
    }

    .v2-feed-top,
    .v2-post,
    .v2-tabs{
        border-left:0;
        border-right:0;
        border-radius:0;
    }

    .v2-tabs-wrap{
        margin-left:-1px;
        margin-right:-1px;
    }

    .v2-stream{
        gap:8px;
    }

    .v2-carousel-btn{
        display:none;
    }

    .v2-media-slide img,
    .v2-media-slide video{
        max-height:72vh;
    }

    .v2-action span{
        display:none;
    }

    .v2-action i{
        font-size:21px;
    }

    .v2-moments{
        padding-left:12px;
        padding-right:12px;
    }
}

@media (prefers-reduced-motion:reduce){

    .v2-loader,
    .v2-skeleton-head,
    .v2-skeleton-text,
    .v2-skeleton-media{
        animation:none !important;
    }
}


/* VIVA_FEED_V2_INTERACTIONS_R2FIX */

.v2-post-stats{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:9px 15px;
    color:#75666b;
    font-size:.72rem;
}

.v2-post-stats strong{
    color:#3c2930;
}

.v2-action.is-active{
    color:var(--v2-red);
}

.v2-action.is-busy{
    opacity:.5;
    pointer-events:none;
}


/* comentários */

.v2-comments-panel{
    padding:0 15px 14px;
    border-top:1px solid #f0e7e9;
    background:#fff;
}

.v2-comments-panel[hidden]{
    display:none;
}

.v2-comments-list{
    max-height:330px;
    overflow:auto;
    padding-top:8px;
}

.v2-comments-loading,
.v2-comments-empty{
    margin:8px 0;
    color:#88797e;
    font-size:.76rem;
}

.v2-comment-row{
    display:flex;
    gap:9px;
    align-items:flex-start;
    padding:7px 0;
}

.v2-comment-avatar{
    flex:0 0 31px;
    width:31px;
    height:31px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    overflow:hidden;
    background:#eee5e7;
    color:#681328;
    font-size:.64rem;
    font-weight:900;
}

.v2-comment-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.v2-comment-content{
    flex:1;
    min-width:0;
}

.v2-comment-content strong{
    margin-right:5px;
    font-size:.76rem;
}

.v2-comment-content p{
    display:inline;
    margin:0;
    font-size:.8rem;
    line-height:1.43;
    white-space:pre-wrap;
    word-break:break-word;
}

.v2-comment-content small{
    display:block;
    margin-top:3px;
    color:#988a8e;
    font-size:.64rem;
}

.v2-comment-form{
    display:flex;
    align-items:flex-end;
    gap:8px;
    padding-top:10px;
}

.v2-comment-form textarea{
    flex:1;
    min-height:40px;
    max-height:120px;
    padding:10px 13px;
    resize:none;
    border:1px solid #e3d5d9;
    border-radius:19px;
    background:#faf8f8;
    outline:none;
    font:inherit;
    font-size:.82rem;
}

.v2-comment-form textarea:focus{
    border-color:#b83d5b;
    background:#fff;
}

.v2-comment-form button{
    border:0;
    background:transparent;
    color:#a81434;
    font-weight:900;
    cursor:pointer;
}

.v2-open-publication{
    display:inline-block;
    margin-top:9px;
    color:#8f1731;
    text-decoration:none;
    font-size:.69rem;
    font-weight:700;
}


/* compartilhamento VIVA */

body.v2-share-open{
    overflow:hidden;
}

.v2-share-overlay{
    position:fixed;
    z-index:10000;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.v2-share-overlay[hidden]{
    display:none;
}

.v2-share-backdrop{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    background:rgba(20,8,12,.54);
    backdrop-filter:blur(3px);
}

.v2-share-sheet{
    position:relative;
    z-index:1;
    width:min(440px,100%);
    padding:9px 17px 20px;
    border-radius:22px;
    background:#fff;
    box-shadow:
        0 25px 80px
        rgba(25,8,14,.3);
}

.v2-share-handle{
    width:38px;
    height:4px;
    margin:2px auto 8px;
    border-radius:99px;
    background:#dfd3d6;
}

.v2-share-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:4px 2px 12px;
}

.v2-share-head button{
    width:34px;
    height:34px;
    border:0;
    border-radius:50%;
    background:#f3edef;
    cursor:pointer;
}

.v2-share-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px 8px;
    padding-top:8px;
}

.v2-share-grid button{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;
    border:0;
    background:transparent;
    color:#443438;
    font:inherit;
    font-size:.7rem;
    cursor:pointer;
}

.v2-share-icon{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#f5edef;
    color:#620f25;
    font-size:24px;
}

.v2-share-grid button:hover .v2-share-icon{
    background:#4b0716;
    color:#fff;
}

.v2-share-feedback{
    min-height:18px;
    margin-top:14px;
    text-align:center;
    color:#6b565c;
    font-size:.72rem;
}


/* vídeo */

.v2-video-shell,
.v2-youtube-shell{
    position:relative;
    width:100%;
    min-height:300px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#080808;
}

.v2-video-shell video{
    width:100%;
    max-height:72vh;
    background:#080808;
    object-fit:contain;
}

.v2-video-center-play,
.v2-youtube-play{
    position:absolute;
    z-index:5;
    left:50%;
    top:50%;
    width:62px;
    height:62px;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:translate(-50%,-50%);
    border:0;
    border-radius:50%;
    background:rgba(0,0,0,.7);
    color:#fff;
    font-size:27px;
    cursor:pointer;
}

.v2-video-shell.is-playing
.v2-video-center-play{
    opacity:0;
    pointer-events:none;
}

.v2-youtube-thumb{
    width:100%;
    min-height:300px;
    max-height:72vh;
    object-fit:contain;
    background:#080808;
}

.v2-youtube-frame{
    position:absolute;
    inset:0;
}

.v2-youtube-frame iframe{
    width:100%;
    height:100%;
    border:0;
}

.v2-youtube-shell.is-loaded
.v2-youtube-thumb,
.v2-youtube-shell.is-loaded
.v2-youtube-play{
    opacity:0;
    pointer-events:none;
}


@media(max-width:760px){

    .v2-share-overlay{
        align-items:flex-end;
        padding:0;
    }

    .v2-share-sheet{
        width:100%;
        max-width:none;
        border-radius:24px 24px 0 0;
        padding-bottom:
            calc(
                18px
                +
                env(safe-area-inset-bottom)
            );
    }

    .v2-comment-form textarea{
        font-size:16px;
    }

    .v2-video-shell,
    .v2-youtube-shell,
    .v2-youtube-thumb{
        min-height:250px;
    }
}


/* VIVA_FEED_V2_CURSOR_R3 */

.v2-sentinel{
    transition:
        opacity .2s ease;
}

.v2-sentinel.is-loading
.v2-sentinel-message{
    color:#705d63;
}

.v2-feed-page[
    data-has-more="0"
]
.v2-loader{
    display:none;
}


/* =========================================================
   VIVA_FEED_V2_EXPERIENCE_R4
   ========================================================= */


/* ---------------------------------------------------------
   Atalhos do Feed
   --------------------------------------------------------- */

.v2-feed-shortcuts{
    display:flex;
    gap:8px;
    margin:0 0 12px;
    padding:0 2px;
    overflow-x:auto;
    scrollbar-width:none;
}

.v2-feed-shortcuts::-webkit-scrollbar{
    display:none;
}

.v2-feed-shortcuts a{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:7px;
    min-height:38px;
    padding:0 14px;
    border:1px solid #e9dde0;
    border-radius:999px;
    background:#fff;
    color:#5b454c;
    text-decoration:none;
    font-size:.76rem;
    font-weight:800;
}

.v2-feed-shortcuts a.is-active{
    border-color:#4b0716;
    background:#4b0716;
    color:#fff;
}


/* ---------------------------------------------------------
   Momentos
   --------------------------------------------------------- */

.v2-moments{
    margin:0 0 15px;
    padding:15px 13px 11px;
    border:1px solid #eadfe2;
    border-radius:18px;
    background:#fff;
}

.v2-section-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:11px;
}

.v2-section-heading > div:first-child{
    min-width:0;
}

.v2-section-heading strong{
    display:block;
    color:#351f26;
    font-size:.84rem;
}

.v2-section-heading span{
    display:block;
    margin-top:2px;
    color:#94848a;
    font-size:.65rem;
}

.v2-section-heading__actions{
    display:flex;
    gap:5px;
}

.v2-section-heading__actions a{
    display:flex;
    align-items:center;
    gap:4px;
    padding:6px 9px;
    border-radius:999px;
    color:#861a35;
    background:#f7eff1;
    text-decoration:none;
    font-size:.65rem;
    font-weight:800;
}

.v2-moments__rail{
    overflow:hidden;
}

.v2-moments
.cv-stories-rail{
    display:flex;
    gap:13px;
    margin:0;
    padding:2px 1px 5px;
    overflow-x:auto;
    scrollbar-width:none;
}

.v2-moments
.cv-stories-rail::-webkit-scrollbar{
    display:none;
}

.v2-moments
.cv-story-bubble{
    flex:0 0 69px;
    width:69px;
    text-decoration:none;
}

.v2-moments
.cv-story-avatar-wrap{
    width:59px;
    height:59px;
    margin:0 auto 5px;
    border-radius:50%;
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 4px #9c1737;
}

.v2-moments
.cv-story-avatar-wrap--add{
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f5edef;
    color:#76152e;
    font-size:24px;
}

.v2-moments
.cv-story-avatar-wrap img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
}

.v2-moments
.cv-story-bubble small{
    display:block;
    overflow:hidden;
    color:#59474c;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.61rem;
}


/* ---------------------------------------------------------
   Link inteligente
   --------------------------------------------------------- */

.v2-smart-link{
    display:flex;
    align-items:center;
    gap:12px;
    margin:0 14px 12px;
    padding:13px;
    border:1px solid #e4d8dc;
    border-radius:15px;
    background:
        linear-gradient(
            135deg,
            #fff,
            #faf6f7
        );
    color:inherit;
    text-decoration:none;
    transition:
        transform .16s ease,
        box-shadow .16s ease;
}

.v2-smart-link:hover{
    transform:translateY(-1px);
    box-shadow:
        0 8px 24px
        rgba(55,20,30,.08);
}

.v2-smart-link__icon{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:#4c0818;
    color:#fff;
    font-size:19px;
}

.v2-smart-link__copy{
    flex:1;
    min-width:0;
}

.v2-smart-link__copy small{
    display:block;
    margin-bottom:2px;
    color:#9b858c;
    font-size:.61rem;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.v2-smart-link__copy strong{
    display:block;
    overflow:hidden;
    color:#3d272e;
    font-size:.79rem;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.v2-smart-link__copy > span{
    display:block;
    margin-top:3px;
    overflow:hidden;
    color:#8b777e;
    font-size:.64rem;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.v2-smart-link__open{
    flex:0 0 27px;
    color:#8b1b37;
    font-size:18px;
}

.v2-rich-media{
    position:relative;
    margin:0 0 12px;
    overflow:hidden;
    background:#070707;
}

.v2-rich-image{
    display:block;
}

.v2-rich-image img{
    display:block;
    width:100%;
    max-height:72vh;
    object-fit:contain;
    background:#070707;
}

.v2-rich-youtube{
    min-height:300px;
}

.v2-rich-source{
    position:absolute;
    z-index:4;
    left:10px;
    bottom:10px;
    padding:5px 8px;
    border-radius:999px;
    background:rgba(0,0,0,.68);
    color:#fff;
    font-size:.61rem;
    font-weight:800;
}


/* ---------------------------------------------------------
   Reels
   --------------------------------------------------------- */

.v2-reels-page{
    position:relative;
    max-width:760px;
    margin:0 auto;
    padding:0 0 40px;
}

.v2-reels-head{
    position:sticky;
    z-index:30;
    top:0;
    min-height:64px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:10px;
    padding:9px 12px;
    border-bottom:1px solid #e9dfe2;
    background:
        rgba(255,255,255,.94);
    backdrop-filter:blur(14px);
}

.v2-reels-head > div{
    text-align:center;
}

.v2-reels-head small{
    display:block;
    color:#a22240;
    font-size:.55rem;
    font-weight:900;
    letter-spacing:.15em;
}

.v2-reels-head h1{
    margin:1px 0 0;
    color:#32171f;
    font-size:1.05rem;
    line-height:1;
}

.v2-reels-back,
.v2-reels-create{
    display:flex;
    align-items:center;
    gap:5px;
    color:#6a1830;
    text-decoration:none;
    font-size:.7rem;
    font-weight:800;
}

.v2-reels-create{
    justify-self:end;
}

.v2-reels-shell{
    height:
        calc(
            100svh
            - 72px
        );
    overflow-y:auto;
    overscroll-behavior-y:contain;
    scroll-snap-type:y mandatory;
    scrollbar-width:none;
}

.v2-reels-shell::-webkit-scrollbar{
    display:none;
}

.v2-reel-item{
    min-height:
        calc(
            100svh
            - 75px
        );
    display:flex;
    align-items:center;
    justify-content:center;
    padding:7px 4px;
    scroll-snap-align:start;
    scroll-snap-stop:always;
}

.v2-reel-item
.v2-post{
    width:100%;
    margin:0;
    overflow:hidden;
    border-radius:19px;
    box-shadow:
        0 12px 35px
        rgba(35,10,18,.12);
}

.v2-reel-item
.v2-media,
.v2-reel-item
.v2-video-shell,
.v2-reel-item
.v2-youtube-shell,
.v2-reel-item
.v2-rich-youtube{
    min-height:
        min(
            68svh,
            720px
        );
}

.v2-reel-item video,
.v2-reel-item
.v2-youtube-thumb{
    max-height:
        min(
            68svh,
            720px
        );
}

.v2-reels-empty{
    min-height:60vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:30px;
    color:#79676d;
    text-align:center;
}

.v2-reels-empty > i{
    margin-bottom:12px;
    color:#891c37;
    font-size:42px;
}

.v2-reels-empty h2{
    margin:0 0 8px;
    color:#3c252d;
    font-size:1.2rem;
}

.v2-reels-empty p{
    max-width:430px;
    margin:0;
    line-height:1.55;
    font-size:.78rem;
}


@media(max-width:760px){

    .v2-moments{
        margin-left:-3px;
        margin-right:-3px;
        border-radius:14px;
    }

    .v2-section-heading__actions a{
        padding:6px 7px;
    }

    .v2-section-heading__actions a span{
        display:none;
    }

    .v2-rich-youtube{
        min-height:250px;
    }

    .v2-reels-page{
        max-width:none;
    }

    .v2-reels-shell{
        height:
            calc(
                100svh
                - 63px
            );
    }

    .v2-reel-item{
        min-height:
            calc(
                100svh
                - 66px
            );
        padding:3px 0;
    }

    .v2-reel-item
    .v2-post{
        border-radius:0;
    }

    .v2-reel-item
    .v2-media,
    .v2-reel-item
    .v2-video-shell,
    .v2-reel-item
    .v2-youtube-shell,
    .v2-reel-item
    .v2-rich-youtube{
        min-height:
            min(
                66svh,
                680px
            );
    }
}


/* ============================================================
   VIVA_FEED_PEOPLE_DISCOVERY_R8
   ============================================================ */

.v2-people-strip{
    margin:14px 0;
    padding:15px;
    border:1px solid #e4dadd;
    border-radius:18px;
    background:#fff;
}

.v2-people-strip__head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.v2-people-strip__head > div > span{
    display:block;
    margin-bottom:3px;
    color:#9a1d3d;
    font-size:.54rem;
    font-weight:900;
    letter-spacing:.13em;
}

.v2-people-strip__head h2{
    margin:0;
    color:#43101e;
    font-size:.95rem;
}

.v2-people-strip__head > a{
    display:flex;
    align-items:center;
    gap:4px;
    color:#851b38;
    text-decoration:none;
    font-size:.59rem;
    font-weight:900;
}

.v2-people-strip__rail{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(142px, 168px);
    gap:8px;
    overflow-x:auto;
    padding:1px 1px 6px;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
}

.v2-people-card{
    scroll-snap-align:start;
    display:flex;
    flex-direction:column;
    min-height:178px;
    padding:11px;
    border:1px solid #eadfe2;
    border-radius:14px;
    background:#fff;
}

.v2-people-card__profile{
    display:flex;
    flex-direction:column;
    align-items:center;
    color:#4b3039;
    text-align:center;
    text-decoration:none;
}

.v2-people-card__profile
.viva-people-v2-avatar{
    width:52px;
    height:52px;
    flex:0 0 52px;
    margin-bottom:7px;
    border-radius:50%;
    object-fit:cover;
}

.v2-people-card__profile strong{
    width:100%;
    overflow:hidden;
    color:#4b3039;
    font-size:.66rem;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.v2-people-card__profile span{
    width:100%;
    overflow:hidden;
    margin-top:2px;
    color:#9b858d;
    font-size:.54rem;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.v2-people-card__reason{
    min-height:27px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:7px 0;
    color:#8b6974;
    text-align:center;
    font-size:.51rem;
    line-height:1.3;
}

.v2-people-card form{
    margin:auto 0 0;
}

.v2-people-card button,
.v2-people-card__login{
    width:100%;
    min-height:32px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:0 8px;
    border:1px solid #551127;
    border-radius:999px;
    background:#551127;
    color:#fff;
    text-decoration:none;
    font:inherit;
    font-size:.55rem;
    font-weight:900;
    cursor:pointer;
}

.v2-people-card button.is-following{
    border-color:#e4d7db;
    background:#f5edef;
    color:#74172f;
}

@media(max-width:760px){

    .v2-people-strip{
        margin-left:0;
        margin-right:0;
        padding:13px 10px;
    }

    .v2-people-strip__rail{
        grid-auto-columns:142px;
    }
}


/* ============================================================
   VIVA_SOCIAL_RECIRCULATION_R9
   ============================================================ */

.v2-people-card__posts{
    min-height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    margin:0 0 6px;
    padding:0 7px;
    border:1px solid #e2d5d9;
    border-radius:999px;
    background:#fff;
    color:#771831;
    text-decoration:none;
    font-size:.52rem;
    font-weight:850;
}

.v2-people-card__posts:hover{
    border-color:#b68a97;
    background:#fbf7f8;
}

#pessoas-para-voce{
    scroll-margin-top:82px;
}


/* ============================================================
   VIVA_NETWORK_FOLLOWING_R10
   ============================================================ */

.v2-network-state{
    margin:0 0 14px;
    padding:16px;
    border:1px solid #e5dade;
    border-radius:18px;
    background:#fff;
}

.v2-network-state__head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    margin-bottom:13px;
}

.v2-network-state__head span{
    display:block;
    margin-bottom:3px;
    color:#9a1d3d;
    font-size:.54rem;
    font-weight:900;
    letter-spacing:.13em;
}

.v2-network-state__head h2{
    margin:0;
    color:#43101e;
    font-size:.95rem;
}

.v2-network-state__head > a{
    display:flex;
    align-items:center;
    gap:4px;
    color:#851b38;
    text-decoration:none;
    font-size:.59rem;
    font-weight:900;
}

.v2-network-zero{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:12px;
    padding:13px;
    border-radius:14px;
    background:#f8f2f4;
}

.v2-network-zero__icon{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fff;
    color:#861a35;
    font-size:20px;
}

.v2-network-zero strong,
.v2-network-summary strong{
    display:block;
    color:#55323d;
    font-size:.7rem;
}

.v2-network-zero p,
.v2-network-summary p{
    margin:4px 0 0;
    color:#89747c;
    font-size:.61rem;
    line-height:1.45;
}

.v2-network-zero > a,
.v2-network-actions a{
    min-height:35px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 11px;
    border-radius:999px;
    background:#531127;
    color:#fff;
    text-decoration:none;
    font-size:.57rem;
    font-weight:900;
}

.v2-network-actions{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.v2-network-actions a.secondary{
    border:1px solid #dfd1d6;
    background:#fff;
    color:#771830;
}

.v2-network-summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}

.v2-network-people{
    display:flex;
    gap:8px;
    margin-top:13px;
    padding-top:12px;
    border-top:1px solid #eee4e7;
    overflow-x:auto;
    scrollbar-width:none;
}

.v2-network-people::-webkit-scrollbar{
    display:none;
}

.v2-network-people > a{
    flex:0 0 66px;
    display:flex;
    flex-direction:column;
    align-items:center;
    color:#6a4d56;
    text-decoration:none;
    text-align:center;
}

.v2-network-people span{
    width:64px;
    overflow:hidden;
    margin-top:4px;
    font-size:.52rem;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.v2-network-avatar{
    width:42px;
    height:42px;
    flex:0 0 42px;
    border-radius:50%;
    object-fit:cover;
    background:#eee5e8;
}

.v2-network-avatar--initial{
    display:flex;
    align-items:center;
    justify-content:center;
    background:#6f1930;
    color:#fff;
    font-size:.8rem;
    font-weight:900;
}

.v2-network-suggestions{
    margin-top:13px;
}

.v2-network-label{
    display:block;
    margin-bottom:8px;
    color:#9b858d;
    font-size:.52rem;
    font-weight:900;
    letter-spacing:.08em;
}

.v2-network-suggestions__rail{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
}

.v2-network-suggestion{
    display:flex;
    align-items:center;
    gap:8px;
    padding:9px;
    border:1px solid #eadfe2;
    border-radius:12px;
}

.v2-network-suggestion__profile{
    min-width:0;
    flex:1;
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
    column-gap:7px;
    align-items:center;
    color:#4d333b;
    text-decoration:none;
}

.v2-network-suggestion__profile
.v2-network-avatar{
    grid-row:1/3;
}

.v2-network-suggestion__profile strong,
.v2-network-suggestion__profile span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.v2-network-suggestion__profile strong{
    font-size:.61rem;
}

.v2-network-suggestion__profile span{
    color:#9a858d;
    font-size:.51rem;
}

.v2-network-suggestion form{
    margin:0;
}

.v2-network-suggestion button{
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    background:#541128;
    color:#fff;
    cursor:pointer;
    font-size:0;
}

.v2-network-suggestion button i{
    font-size:15px;
}

.v2-network-state--anon{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:12px;
}

.v2-network-state--anon
.v2-network-state__icon{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#f6edef;
    color:#851a35;
}

.v2-network-state--anon strong{
    font-size:.68rem;
}

.v2-network-state--anon p{
    margin:3px 0 0;
    color:#89747c;
    font-size:.59rem;
}

.v2-network-state--anon > a{
    min-height:34px;
    display:flex;
    align-items:center;
    padding:0 11px;
    border-radius:999px;
    background:#531127;
    color:#fff;
    text-decoration:none;
    font-size:.57rem;
    font-weight:900;
}

#minha-rede{
    scroll-margin-top:82px;
}

@media(max-width:720px){

    .v2-network-zero{
        grid-template-columns:auto 1fr;
    }

    .v2-network-zero > a{
        grid-column:1/-1;
    }

    .v2-network-summary{
        align-items:flex-start;
        flex-direction:column;
    }

    .v2-network-suggestions__rail{
        grid-template-columns:1fr;
    }

    .v2-network-state--anon{
        grid-template-columns:auto 1fr;
    }

    .v2-network-state--anon > a{
        grid-column:1/-1;
        justify-content:center;
    }
}


/* ============================================================
   VIVA_UX_FLUIDA_R13
   Feed fluido + carrossel Pessoas para você
   ============================================================ */

.viva-soft-feed-pending{
    cursor:progress;
}

.v2-people-strip.viva-people-arrow-shell{
    position:relative;
}

.v2-people-strip.viva-people-arrow-shell .v2-people-strip__rail{
    scroll-behavior:smooth;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding-left:3px;
    padding-right:3px;
}

.v2-people-strip.viva-people-arrow-shell .v2-people-strip__rail::-webkit-scrollbar{
    width:0;
    height:0;
    display:none;
}

.v2-people-strip.viva-people-arrow-shell .v2-people-card{
    scroll-snap-align:start;
}

.viva-people-arrow{
    position:absolute;
    z-index:8;
    top:57%;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid #e2d4d9;
    border-radius:999px;
    background:#fff;
    color:#5a0b20;
    box-shadow:0 8px 22px rgba(73,8,23,.16);
    font-size:20px;
    cursor:pointer;
    transform:translateY(-50%);
    transition:
        opacity .18s ease,
        transform .18s ease,
        background .18s ease;
}

.viva-people-arrow:hover:not(:disabled){
    background:#5a0b20;
    color:#fff;
    transform:translateY(-50%) scale(1.04);
}

.viva-people-arrow:disabled{
    opacity:.30;
    cursor:default;
    box-shadow:none;
}

.viva-people-arrow[hidden]{
    display:none !important;
}

.viva-people-arrow--left{
    left:8px;
}

.viva-people-arrow--right{
    right:8px;
}

@media(max-width:760px){
    .viva-people-arrow{
        width:34px;
        height:34px;
        font-size:18px;
    }

    .viva-people-arrow--left{
        left:4px;
    }

    .viva-people-arrow--right{
        right:4px;
    }
}


/* VIVA_REELS_CAROUSEL_HF2 */

/* Corrige SOMENTE o carrossel de pessoas dentro de /reels. */
.v2-reels-page .v2-people-strip{
    position:relative !important;
    box-sizing:border-box !important;
    width:auto !important;
    max-width:calc(100% - 36px) !important;
    margin:18px 18px 34px !important;
    padding:16px 44px 18px !important;
    overflow:visible !important;
    border-radius:18px !important;
}

.v2-reels-page .v2-people-strip__head,
.v2-reels-page .v2-people-strip__header{
    margin:0 0 12px !important;
    padding:0 !important;
}

.v2-reels-page .v2-people-strip__rail{
    display:grid !important;
    grid-auto-flow:column !important;
    grid-template-columns:none !important;
    grid-auto-columns:142px !important;
    gap:10px !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 0 4px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    overscroll-behavior-x:contain !important;
    scroll-behavior:smooth !important;
    scroll-snap-type:x proximity !important;
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
}

.v2-reels-page .v2-people-strip__rail::-webkit-scrollbar{
    display:none !important;
}

.v2-reels-page .v2-people-card{
    scroll-snap-align:start;
}

.v2-reels-page .viva-reels-people-nav{
    position:absolute;
    z-index:20;
    top:58%;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid #dfd1d6;
    border-radius:999px;
    background:#fff;
    color:#66142d;
    box-shadow:0 8px 20px rgba(58,17,30,.14);
    cursor:pointer;
    transform:translateY(-50%);
}

.v2-reels-page .viva-reels-people-nav:hover{
    background:#fff8fa;
}

.v2-reels-page .viva-reels-people-nav:disabled{
    opacity:.34;
    cursor:default;
    box-shadow:none;
}

.v2-reels-page .viva-reels-people-nav--prev{
    left:8px;
}

.v2-reels-page .viva-reels-people-nav--next{
    right:8px;
}

.v2-reels-page .viva-reels-people-nav svg{
    width:16px;
    height:16px;
    display:block;
}

@media(max-width:760px){
    .v2-reels-page .v2-people-strip{
        max-width:calc(100% - 16px) !important;
        margin:14px 8px 28px !important;
        padding:14px 38px 16px !important;
        border-radius:16px !important;
    }

    .v2-reels-page .v2-people-strip__rail{
        grid-auto-columns:138px !important;
        gap:9px !important;
    }

    .v2-reels-page .viva-reels-people-nav{
        width:31px;
        height:31px;
    }

    .v2-reels-page .viva-reels-people-nav--prev{
        left:5px;
    }

    .v2-reels-page .viva-reels-people-nav--next{
        right:5px;
    }
}


/* VIVA_REELS_CAROUSEL_HF2_1 */
/* Reposiciona as setas para fora da área dos cards, usando a margem lateral do carrossel. */
.v2-reels-page .viva-reels-people-nav--prev{
    left:-18px !important;
}

.v2-reels-page .viva-reels-people-nav--next{
    right:-18px !important;
}

@media(max-width:760px){
    .v2-reels-page .viva-reels-people-nav--prev{
        left:-10px !important;
    }

    .v2-reels-page .viva-reels-people-nav--next{
        right:-10px !important;
    }
}