@import url("social-v194.css");

/* Catálogo StoryMotion: la imagen vende la historia */
.story-grid{
    gap:20px
}
.story-card-v198{
    transition:transform .18s ease,box-shadow .18s ease;
    border-radius:20px!important;
    overflow:hidden
}
.story-card-v198:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 46px rgba(16,35,63,.16)!important
}
.story-thumb-v198{
    height:275px!important;
    position:relative;
    display:block!important;
    overflow:hidden;
    background:#10233f!important
}
.story-thumb-v198>img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transform:scale(1.01);
    transition:transform .35s ease,filter .35s ease
}
.story-card-v198:hover .story-thumb-v198>img{
    transform:scale(1.045);
    filter:saturate(1.05)
}
.story-thumb-fallback{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    background:radial-gradient(circle at 50% 35%,#3f78b6,#10233f 72%)
}
.story-thumb-fallback span{
    width:76px;
    height:76px;
    display:grid;
    place-items:center;
    border-radius:22px;
    background:#fff;
    color:#10233f;
    font-size:1.25rem;
    font-weight:900
}
.story-thumb-shade{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            rgba(5,12,23,.06) 10%,
            rgba(5,12,23,.12) 40%,
            rgba(5,12,23,.78) 100%
        )
}
.story-thumb-copy{
    position:absolute;
    left:18px;
    right:70px;
    bottom:18px;
    display:grid;
    gap:4px;
    color:#fff;
    z-index:2
}
.story-thumb-copy .story-thumb-category{
    width:max-content;
    max-width:100%;
    padding:5px 8px;
    border-radius:999px;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.24);
    backdrop-filter:blur(6px);
    font-size:.62rem;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase
}
.story-thumb-copy strong{
    font-size:1.28rem;
    line-height:1.08;
    text-shadow:0 2px 14px rgba(0,0,0,.45)
}
.story-play-v198{
    position:absolute!important;
    top:16px;
    right:16px;
    width:46px;
    height:46px;
    border-radius:50%;
    display:grid!important;
    place-items:center;
    background:rgba(255,255,255,.92);
    color:#10233f!important;
    font-size:1rem!important;
    z-index:3;
    box-shadow:0 8px 20px rgba(0,0,0,.18)
}
.story-scenes-v198{
    position:absolute!important;
    right:16px!important;
    bottom:16px!important;
    z-index:3;
    background:rgba(7,16,29,.78)!important;
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(6px)
}
.story-card-body-v198{
    padding:16px!important
}
.story-card-body-v198>span{
    display:none
}
.story-card-body-v198 h2{
    margin:0 0 7px!important;
    font-size:1.18rem
}
.story-card-body-v198 h2 a{
    color:#17243a
}
.story-card-body-v198 p{
    min-height:66px;
    margin:0 0 13px;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden
}
.story-card-meta-v198{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding-top:11px;
    border-top:1px solid #edf1f5
}
.story-card-meta-v198>small{
    color:#7b8798
}
.story-card-meta-v198>a{
    color:#2363aa;
    text-decoration:none;
    font-size:.72rem;
    font-weight:850
}
@media(max-width:850px){
    .story-thumb-v198{height:245px!important}
}
@media(max-width:560px){
    .story-thumb-v198{height:300px!important}
    .story-thumb-copy strong{font-size:1.35rem}
}