/* random-kines.css - CSS dedicado para /random-kines (iframe embed) */
/* No depende de styles.css ni reset.css del sitio principal */

/* === Bootstrap utilities mínimas === */
*,::after,::before{box-sizing:border-box}
body{margin:0;font-family:"DM Sans",system-ui,-apple-system,sans-serif;font-optical-sizing:auto;color:#fff}
img{vertical-align:middle;max-width:100%}
a{text-decoration:none;color:inherit}
b{font-weight:700}
h6{margin:0;font-size:1rem;font-weight:500}
.text-white{color:#fff!important}
.bg-primary{background-color:#6528f7!important}
.rounded{border-radius:.375rem!important}
.badge{display:inline-block;padding:.35em .65em;font-size:.75em;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.375rem}
.px-1{padding-right:.25rem!important;padding-left:.25rem!important}
.ps-2{padding-left:.5rem!important}
.pe-2{padding-right:.5rem!important}
.p-1{padding:.25rem!important}
.mb-0{margin-bottom:0!important}
.mt-1{margin-top:.25rem!important}

/* === girlCard - Estilos de tarjeta === */
.girlCard{
    position:relative;
    background-color:#18042b;
    border:1px solid #18042b;
    transition:all .15s ease-out;
    border-radius:10px;
    width:100%;
    max-width:208px;
    margin:0 auto;
    display:inline-flex
}
.girlCard:hover{
    border:1px solid #5622d2;
    box-shadow:0 10px 20px rgb(72 78 85 / .6);
    transform:translateY(-10px)
}
.girlCard p{font-size:.9rem;line-height:1.1rem}
.girlCard img{border-radius:10px;object-fit:cover;max-width:100%}
.girlCard a{text-decoration:none;display:inline-block}
.girlCard .icon{position:absolute;bottom:10px;right:10px}
.girlCard .icon i::before{font-size:2rem}

/* === girlPhoto === */
.girlCard .girlPhoto{
    position:relative;
    aspect-ratio:208/290;
    overflow:hidden;
    background-color:#18042b
}
.girlCard .girlPhoto img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block
}

/* === girlAge === */
.girlCard .girlPhoto .girlAge{
    position:absolute;
    top:5px;
    right:5px;
    opacity:.7;
    color:#fff
}
.girlCard .girlPhoto .girlAge:hover{opacity:1}
.girlCard .girlPhoto .girlAge i::before{color:#fff}
.girlCard .girlPhoto .girlAge b{font-size:1.2rem}
.girlCard .girlPhoto .girlAge mark{
    font-size:.5rem;
    margin:0;
    padding:0;
    margin-top:-9px;
    display:block;
    background:none;
    padding-bottom:3px
}

/* === girlDest (destacada) === */
.girlDest{border:1px solid var(--bs-warning,#ffc107)}
.girlDest .icn_dest{
    position:absolute;
    display:inline;
    top:-15px;
    left:2px;
    font-size:52px;
    z-index:2;
    transform:scale(.9)
}
.girlDest .girlFotos{
    position:absolute;
    bottom:5px;
    left:5px;
    font-size:19px;
    padding:2px 6px
}

/* === Video pulse === */
.girlCardVideos{
    position:absolute;
    bottom:20px;
    right:30px;
    z-index:1
}
.mgc_play_fill{
    position:absolute;
    z-index:1;
    top:-9px;
    left:3px
}
.mgc_play_fill::before{font-size:17px;color:#fff}

.videoPulse{
    position:absolute;
    left:12px;
    top:50%;
    transform:translateX(-50%) translateY(-50%);
    width:22px;
    height:22px
}
.videoPulse:before{
    content:"";
    position:relative;
    display:block;
    width:300%;
    height:300%;
    box-sizing:border-box;
    margin-left:-100%;
    margin-top:-100%;
    border-radius:45px;
    background-color:red;
    animation:pulse-ring 1.25s cubic-bezier(.215,.61,.355,1) infinite
}
.videoPulse:after{
    content:"";
    position:absolute;
    left:0;top:0;
    display:block;
    width:100%;
    height:100%;
    background-color:red;
    border-radius:15px;
    box-shadow:0 0 8px rgba(255,0,0,.3);
    animation:pulse-dot 1.25s cubic-bezier(.455,.03,.515,.955) -.4s infinite
}
@keyframes pulse-ring{
    0%{transform:scale(.33)}
    80%,100%{opacity:0}
}
@keyframes pulse-dot{
    0%{transform:scale(.8)}
    50%{transform:scale(1)}
    100%{transform:scale(.8)}
}

/* === Overrides para embed === */
.girlCard{width:180px!important;max-width:90%!important}

/* === Responsive === */
@media(max-width:576px){
    .girlCard{max-width:100%!important}
    .girlCard .girlPhoto{aspect-ratio:1/1.35}
}