/*
 * Merkato Play V31 — ajuste de último detalle
 * Carrusel estable sin franja/indicadores, logos más visibles y juegos
 * individuales inspirados en Vertical Game Tabs.
 */

/* --------------------------------------------------------------------------
   Carrusel: se conserva el espacio exterior, se elimina solo el control negro.
   No hay zoom ni cambio de escala; únicamente desplazamiento, opacidad y blur.
   -------------------------------------------------------------------------- */
.mp-home-v27 .mp-cinematic-controls{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
}
.mp-home-v27 .mp-cinematic-nav,
.mp-home-v27 .mp-cinematic-pagination,
.mp-home-v27 .mp-cinematic-bullet{visibility:hidden!important;opacity:0!important}
.mp-home-v27 .mp-cinematic-slide,
.mp-home-v27 .mpCinematicSlider .swiper-slide-prev.mp-cinematic-slide,
.mp-home-v27 .mpCinematicSlider .swiper-slide-next.mp-cinematic-slide,
.mp-home-v27 .mpCinematicSlider .swiper-slide-active.mp-cinematic-slide{
    transform:none!important;
    transition:opacity .46s ease,filter .46s ease,border-color .46s ease!important;
}
.mp-home-v27 .mp-cinematic-slide picture img,
.mp-home-v27 .mp-cinematic-slide>img,
.mp-home-v27 .mp-cinematic-slide.swiper-slide-active picture img,
.mp-home-v27 .mp-cinematic-slide.swiper-slide-active>img{
    transform:none!important;
    transition:filter .46s ease,opacity .46s ease!important;
}
.mp-home-v27 .mpCinematicSlider .swiper-slide-prev.mp-cinematic-slide,
.mp-home-v27 .mpCinematicSlider .swiper-slide-next.mp-cinematic-slide{
    opacity:.43!important;
    filter:none!important;
    box-shadow:none!important;
}
.mp-home-v27 .mpCinematicSlider .swiper-slide-prev.mp-cinematic-slide picture img,
.mp-home-v27 .mpCinematicSlider .swiper-slide-next.mp-cinematic-slide picture img{
    filter:blur(1.7px) saturate(.82) brightness(1.07)!important;
    opacity:.67!important;
}
.mp-home-v27 .mpCinematicSlider .swiper-slide-active.mp-cinematic-slide picture img{
    filter:none!important;
    opacity:1!important;
}

/* --------------------------------------------------------------------------
   Destacados: logo más grande, anclado visualmente hacia el lado izquierdo.
   -------------------------------------------------------------------------- */
.mp-featured-game-logo{
    min-height:32px!important;
    height:32px!important;
    overflow:visible!important;
    justify-content:flex-start!important;
    align-items:center!important;
    margin-left:-5px!important;
    width:calc(100% + 5px)!important;
}
.mp-featured-game-logo img{
    max-width:174px!important;
    max-height:31px!important;
    object-position:left center!important;
    transform:translateX(0)!important;
}
.mp-featured-game-logo.is-text strong{font-size:12px!important}

/* --------------------------------------------------------------------------
   Juegos — tarjetas individuales tipo Vertical Game Tabs.
   Imagen rectangular a la izquierda y panel lateral con nombre + precio.
   Toda la tarjeta es el acceso; no necesita flecha ni botón adicional.
   -------------------------------------------------------------------------- */
.mp-games-tabs-section{padding-top:42px!important;padding-bottom:48px!important}
.mp-tabs-game-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:16px!important;
    width:100%!important;
}
.mp-tabs-game-card{
    position:relative!important;
    display:grid!important;
    grid-template-columns:minmax(0,1.45fr) minmax(126px,.74fr)!important;
    min-width:0!important;
    min-height:174px!important;
    overflow:hidden!important;
    border:1px solid rgba(255,255,255,.11)!important;
    border-radius:17px!important;
    background:#171C20!important;
    color:#FFF!important;
    box-shadow:0 15px 32px rgba(15,19,22,.15)!important;
    transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease!important;
}
.mp-tabs-game-card:hover{
    transform:translateY(-3px)!important;
    border-color:rgba(185,242,39,.3)!important;
    box-shadow:0 20px 40px rgba(15,19,22,.21)!important;
}
.mp-tabs-game-visual{
    position:relative!important;
    min-width:0!important;
    min-height:174px!important;
    overflow:hidden!important;
    background:#293139!important;
}
.mp-tabs-game-visual img{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
    filter:none!important;
    opacity:1!important;
    transform:none!important;
    transition:none!important;
}
.mp-tabs-game-visual::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    pointer-events:none!important;
    background:linear-gradient(90deg,transparent 62%,rgba(19,24,28,.24) 100%)!important;
}
.mp-tabs-game-visual.is-empty::before{
    content:attr(data-fallback)!important;
    position:absolute!important;
    inset:0!important;
    display:grid!important;
    place-items:center!important;
    color:rgba(255,255,255,.22)!important;
    font-size:42px!important;
    font-weight:900!important;
    letter-spacing:.05em!important;
}
.mp-tabs-popular{
    position:absolute!important;
    z-index:2!important;
    top:10px!important;
    left:10px!important;
    padding:5px 8px!important;
    border-radius:999px!important;
    background:var(--mk30-amber)!important;
    color:var(--mk30-graphite)!important;
    font-size:7px!important;
    font-weight:900!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
}
.mp-tabs-game-panel{
    display:grid!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    min-width:0!important;
    background:#181D21!important;
}
.mp-tabs-game-copy{
    display:flex!important;
    min-width:0!important;
    flex-direction:column!important;
    justify-content:center!important;
    padding:16px 14px 12px!important;
}
.mp-tabs-game-copy small{
    overflow:hidden!important;
    color:var(--mk30-amber-soft)!important;
    font-size:7px!important;
    font-weight:850!important;
    letter-spacing:.12em!important;
    text-overflow:ellipsis!important;
    text-transform:uppercase!important;
    white-space:nowrap!important;
}
.mp-tabs-game-card.is-popular .mp-tabs-game-copy small{color:var(--mk30-lime)!important}
.mp-tabs-game-copy h3{
    display:-webkit-box!important;
    overflow:hidden!important;
    margin:6px 0 3px!important;
    color:#FFF!important;
    font-size:18px!important;
    font-weight:850!important;
    line-height:1.02!important;
    letter-spacing:-.025em!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
}
.mp-tabs-game-copy p{
    overflow:hidden!important;
    margin:0!important;
    color:#AAB2B8!important;
    font-size:9px!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
}
.mp-tabs-game-price{
    display:flex!important;
    min-height:54px!important;
    flex-direction:column!important;
    justify-content:center!important;
    padding:9px 13px!important;
    border-top:1px solid rgba(17,19,21,.12)!important;
    background:var(--mk30-lime)!important;
    color:var(--mk30-graphite)!important;
}
.mp-tabs-game-card.is-popular .mp-tabs-game-price{background:var(--mk30-amber)!important}
.mp-tabs-game-price span{
    color:rgba(24,29,33,.7)!important;
    font-size:6.5px!important;
    font-weight:850!important;
    letter-spacing:.04em!important;
    text-transform:uppercase!important;
}
.mp-tabs-game-price strong{
    overflow:hidden!important;
    color:var(--mk30-graphite)!important;
    font-size:13px!important;
    font-weight:950!important;
    line-height:1.1!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
}

@media(max-width:980px){
    .mp-tabs-game-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    .mp-tabs-game-card{grid-template-columns:minmax(0,1.38fr) minmax(118px,.72fr)!important;min-height:160px!important}
    .mp-tabs-game-visual{min-height:160px!important}
}

@media(max-width:760px){
    /* Se conserva el espacio del hero; solo desaparece el control visual. */
    .mp-home-v27 .mp-cinematic-controls{opacity:0!important;visibility:hidden!important}

    .mp-featured-product-card.is-mobile .mp-featured-game-logo{
        height:25px!important;
        min-height:25px!important;
        margin-left:-3px!important;
        width:calc(100% + 3px)!important;
    }
    .mp-featured-product-card.is-mobile .mp-featured-game-logo img{
        max-width:116px!important;
        max-height:24px!important;
    }

    .mp-games-tabs-section{padding-top:32px!important;padding-bottom:35px!important}
    .mp-tabs-game-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
    .mp-tabs-game-card{
        grid-template-columns:minmax(0,1.08fr) minmax(68px,.92fr)!important;
        min-height:112px!important;
        border-radius:14px!important;
    }
    .mp-tabs-game-visual{min-height:112px!important}
    .mp-tabs-game-visual::after{background:linear-gradient(90deg,transparent 56%,rgba(19,24,28,.2) 100%)!important}
    .mp-tabs-popular{top:6px!important;left:6px!important;padding:3px 5px!important;font-size:5.5px!important}
    .mp-tabs-game-copy{padding:9px 7px 7px!important}
    .mp-tabs-game-copy small{font-size:5.4px!important;letter-spacing:.08em!important}
    .mp-tabs-game-copy h3{margin:4px 0 2px!important;font-size:11.5px!important;line-height:1.03!important}
    .mp-tabs-game-copy p{font-size:6.5px!important}
    .mp-tabs-game-price{min-height:39px!important;padding:6px 7px!important}
    .mp-tabs-game-price span{font-size:5px!important}
    .mp-tabs-game-price strong{font-size:9px!important}
}

@media(max-width:390px){
    .mp-tabs-game-grid{gap:7px!important}
    .mp-tabs-game-card{grid-template-columns:minmax(0,1fr) minmax(62px,.9fr)!important;min-height:104px!important}
    .mp-tabs-game-visual{min-height:104px!important}
    .mp-tabs-game-copy{padding:8px 5px 6px!important}
    .mp-tabs-game-copy h3{font-size:10.5px!important}
    .mp-tabs-game-copy p{display:none!important}
    .mp-tabs-game-price{padding:5px!important}
    .mp-tabs-game-price strong{font-size:8.4px!important}
}