/* VGW FRONT v5 — responsive completo */

/* ── Fuente global del plugin ── */
#vgw-gallery-root,
#vgw-gallery-root *,
#vgw-modal-root,
#vgw-modal-root *{
    font-family:'Fira Sans',sans-serif !important;
}

/* ── Reset scoped ── */
#vgw-gallery-root,#vgw-gallery-root *,
#vgw-modal-root,#vgw-modal-root *{
    box-sizing:border-box !important;
    margin:0 !important;
    padding:0 !important;
}

/* ══ GRID ══ */
#vgw-gallery-root .vgwx-wrap{
    display:grid !important;
    gap:3px !important;
    background:#060606 !important;
    width:100% !important;
}

/* Layouts por columnas */
#vgw-gallery-root .vgwx-wrap[data-layout="1col"]{grid-template-columns:1fr !important;grid-auto-rows:56vw !important}
#vgw-gallery-root .vgwx-wrap[data-layout="2col"]{grid-template-columns:1fr 1fr !important;grid-auto-rows:30vw !important}
#vgw-gallery-root .vgwx-wrap[data-layout="3col"]{grid-template-columns:26fr 37fr 37fr !important;grid-auto-rows:17vw !important}

/* Posiciones */
#vgw-gallery-root .vgwx-item.vgwx-full  {grid-column:1/4 !important}
#vgw-gallery-root .vgwx-item.vgwx-tall  {grid-column:1 !important;grid-row:span 2 !important}
#vgw-gallery-root .vgwx-item.vgwx-wide-r{grid-column:2/4 !important}
#vgw-gallery-root .vgwx-item.vgwx-wide-l{grid-column:1/3 !important}

/* ── ITEM ── */
#vgw-gallery-root .vgwx-item{
    position:relative !important;
    overflow:hidden !important;
    cursor:pointer !important;
    background:#111 !important;
    margin:0 !important;
    padding:0 !important;
    min-height:0 !important;
}

#vgw-gallery-root .vgwx-cover{
    position:absolute !important;
    inset:0 !important;
    background-size:cover !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    transition:transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94) !important;
    margin:0 !important;padding:0 !important;
}
#vgw-gallery-root .vgwx-item:hover .vgwx-cover{transform:scale(1.07) !important}

/* ── OVERLAY ── */
#vgw-gallery-root .vgwx-overlay{
    position:absolute !important;inset:0 !important;
    display:flex !important;flex-direction:column !important;
    background:linear-gradient(to top,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.15) 55%,rgba(0,0,0,0) 100%) !important;
    opacity:0 !important;transition:opacity 0.4s ease !important;
    margin:0 !important;padding:0 !important;
}
#vgw-gallery-root .vgwx-item:hover .vgwx-overlay{opacity:1 !important}

/* En touch: overlay siempre visible con menor opacidad */
@media(hover:none){
    #vgw-gallery-root .vgwx-overlay{opacity:1 !important;background:linear-gradient(to top,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 60%) !important}
}

#vgw-gallery-root .vgwx-overlay-center{
    flex:1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
}

/* ── Candado ── */
#vgw-gallery-root .vgwx-lock-icon{
    width:28px !important;height:28px !important;border-radius:50% !important;
    border:1px solid rgba(255,255,255,0.3) !important;
    background:rgba(0,0,0,0.4) !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
}
#vgw-gallery-root .vgwx-lock-icon svg{width:12px !important;height:12px !important}

/* ── Play ── */
#vgw-gallery-root .vgwx-btn-play{
    width:clamp(44px,5vw,56px) !important;
    height:clamp(44px,5vw,56px) !important;
    border-radius:50% !important;
    border:1.5px solid rgba(255,255,255,0.6) !important;
    background:rgba(255,255,255,0.1) !important;
    backdrop-filter:blur(10px) !important;-webkit-backdrop-filter:blur(10px) !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    transition:transform 0.25s,background 0.25s,border-color 0.25s !important;
    padding:0 !important;margin:0 !important;
    flex-shrink:0 !important;
}
#vgw-gallery-root .vgwx-item:hover .vgwx-btn-play,
#vgw-gallery-root .vgwx-item:focus .vgwx-btn-play{
    transform:scale(1.1) !important;
    background:rgba(255,255,255,0.2) !important;
    border-color:#fff !important;
}
#vgw-gallery-root .vgwx-btn-play svg{
    width:clamp(16px,2vw,22px) !important;
    height:clamp(16px,2vw,22px) !important;
    margin-left:3px !important;
}

/* ── Info overlay ── */
#vgw-gallery-root .vgwx-overlay-info{
    padding:0 12px 10px !important;
    width:100% !important;
    overflow:hidden !important;
}
#vgw-gallery-root .vgwx-info-headline{
    font-size:1.4vw !important;font-weight:700 !important;
    color:#fff !important;line-height:1.25 !important;
    margin:0 !important;padding:0 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}
#vgw-gallery-root .vgwx-info-sub{
    font-size:0.85vw !important;color:rgba(255,255,255,0.5) !important;letter-spacing:0.08em !important;
    text-transform:uppercase !important;margin-top:3px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

/* ══════════════════════════
   MODAL
══════════════════════════ */
#vgw-modal-root.vgwx-modal{
    position:fixed !important;inset:0 !important;z-index:999999 !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    padding:12px !important;
    opacity:0 !important;pointer-events:none !important;transition:opacity 0.3s ease !important;
}
#vgw-modal-root.vgwx-modal.vgwx-active{opacity:1 !important;pointer-events:all !important}

#vgw-modal-root .vgwx-modal-backdrop{
    position:absolute !important;inset:0 !important;
    background:rgba(0,0,0,0.96) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}

#vgw-modal-root .vgwx-modal-box{
    isolation:isolate !important;
    position:relative !important;
    z-index:5 !important;
    width:100% !important;
    max-width:880px !important;
    max-height:calc(100vh - 24px) !important;
    border-radius:12px !important;
    overflow:hidden !important;
    overflow-y:auto !important;
    background:#0a0a0a !important;
    background-image:none !important;
    border:1px solid rgba(255,255,255,0.08) !important;
    box-shadow:0 40px 100px rgba(0,0,0,0.95) !important;
    transform:translateY(24px) scale(0.97) !important;
    transition:transform 0.4s cubic-bezier(0.34,1.3,0.64,1) !important;
    margin:0 !important;padding:0 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    -webkit-overflow-scrolling:touch !important;
}
#vgw-modal-root.vgwx-active .vgwx-modal-box{transform:translateY(0) scale(1) !important}

/* ── CLOSE ── */
#vgw-modal-root .vgwx-close{
    position:absolute !important;top:14px !important;right:14px !important;z-index:100 !important;
    width:36px !important;height:36px !important;border-radius:50% !important;
    background:rgba(20,20,20,0.9) !important;
    border:1px solid rgba(255,255,255,0.15) !important;
    cursor:pointer !important;padding:0 !important;margin:0 !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    opacity:0 !important;transition:opacity 0.25s ease 0.1s,background 0.2s !important;
    line-height:1 !important;font-size:0 !important;
}
#vgw-modal-root.vgwx-active .vgwx-close{opacity:1 !important}
#vgw-modal-root .vgwx-close:hover{background:rgba(60,60,60,0.95) !important}
#vgw-modal-root .vgwx-close-line{
    display:block !important;width:13px !important;height:1.5px !important;
    background:rgba(255,255,255,0.8) !important;border-radius:2px !important;
    position:absolute !important;transition:transform 0.2s !important;
    margin:0 !important;padding:0 !important;
}
#vgw-modal-root .vgwx-close-line:first-child{transform:rotate(45deg) !important}
#vgw-modal-root .vgwx-close-line:last-child{transform:rotate(-45deg) !important}

/* ════════════════════════
   PASSWORD SCREEN
════════════════════════ */
#vgw-modal-root .vgwx-pw-screen{
    position:relative !important;
    display:none !important;
    background:#161616 !important;
    background-image:none !important;
    isolation:isolate !important;
    z-index:10 !important;
    width:100% !important;
}
#vgw-modal-root .vgwx-pw-screen.vgwx-show{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:clamp(320px,50vh,480px) !important;
}

#vgw-modal-root .vgwx-pw-content{
    position:relative !important;
    z-index:11 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    padding:clamp(32px,5vw,56px) clamp(20px,5vw,48px) clamp(28px,5vw,52px) !important;
    width:100% !important;
    justify-content:center !important;
    gap:0 !important;
    background:#161616 !important;
    background-image:none !important;
}

/* Candado */
#vgw-modal-root .vgwx-pw-lock{
    width:clamp(48px,6vw,64px) !important;
    height:clamp(48px,6vw,64px) !important;
    border-radius:50% !important;
    background:rgba(255,255,255,0.07) !important;
    border:1px solid rgba(255,255,255,0.12) !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    margin-bottom:clamp(16px,3vw,28px) !important;
    flex-shrink:0 !important;
}
#vgw-modal-root .vgwx-pw-lock svg{
    width:clamp(20px,2.5vw,26px) !important;
    height:clamp(20px,2.5vw,26px) !important;
}

/* Textos */
#vgw-modal-root .vgwx-pw-meta{
    text-align:center !important;
    margin-bottom:clamp(16px,3vw,28px) !important;
    display:flex !important;flex-direction:column !important;
    gap:clamp(4px,1vw,8px) !important;
    width:100% !important;
    padding:0 8px !important;
}
#vgw-modal-root .vgwx-pw-meta-headline{
    font-size:clamp(18px,4vw,28px) !important;
    font-weight:800 !important;color:#fff !important;
    letter-spacing:0.06em !important;line-height:1.15 !important;margin:0 !important;
}
#vgw-modal-root .vgwx-pw-meta-sub{
    font-size:clamp(9px,1.2vw,11px) !important;color:rgba(255,255,255,0.35) !important;
    letter-spacing:0.12em !important;text-transform:uppercase !important;
    margin:0 !important;line-height:1.6 !important;
}
#vgw-modal-root .vgwx-pw-label{
    font-size:clamp(8px,1vw,10px) !important;font-weight:600 !important;
    color:rgba(255,255,255,0.28) !important;letter-spacing:0.22em !important;
    text-transform:uppercase !important;
    margin-bottom:clamp(6px,1.5vw,10px) !important;
    margin-top:4px !important;
}

/* Input row */
#vgw-modal-root .vgwx-pw-row{
    display:flex !important;align-items:center !important;
    width:100% !important;max-width:360px !important;
    border-radius:10px !important;overflow:visible !important;
    border:1px solid rgba(255,255,255,0.15) !important;
    background:rgba(255,255,255,0.05) !important;
    margin-bottom:12px !important;margin-top:4px !important;
    gap:8px !important;padding-right:8px !important;
}
#vgw-modal-root .vgwx-pw-input{
    flex:1 !important;background:transparent !important;
    border:none !important;color:#fff !important;
    font-size:clamp(18px,4vw,24px) !important;
    letter-spacing:0.3em !important;
    padding:clamp(12px,2vw,16px) clamp(14px,2vw,20px) !important;
    outline:none !important;min-width:0 !important;
    box-shadow:none !important;border-radius:0 !important;
}
#vgw-modal-root .vgwx-pw-input:-webkit-autofill,
#vgw-modal-root .vgwx-pw-input:-webkit-autofill:focus{
    -webkit-box-shadow:0 0 0 1000px #1e1e1e inset !important;
    -webkit-text-fill-color:#fff !important;
}
#vgw-modal-root .vgwx-pw-input::placeholder{
    color:rgba(255,255,255,0.12) !important;
    letter-spacing:0.15em !important;
    font-size:clamp(14px,3vw,20px) !important;
}

/* Botón submit */
#vgw-modal-root .vgwx-pw-submit,
#vgw-modal-root .vgwx-pw-submit:link,
#vgw-modal-root .vgwx-pw-submit:visited{
    width:44px !important;height:44px !important;
    min-width:44px !important;min-height:44px !important;
    border-radius:50% !important;
    background:#ffffff !important;background-color:#ffffff !important;
    border:none !important;outline:none !important;
    box-shadow:0 4px 16px rgba(0,0,0,0.4) !important;
    cursor:pointer !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    flex-shrink:0 !important;
    padding:0 !important;margin:0 !important;line-height:1 !important;
    transition:transform 0.2s !important;
    position:relative !important;z-index:2 !important;overflow:visible !important;
}
#vgw-modal-root .vgwx-pw-submit:hover,
#vgw-modal-root .vgwx-pw-submit:focus,
#vgw-modal-root .vgwx-pw-submit:active{
    background:#ffffff !important;background-color:#ffffff !important;
    border:none !important;outline:none !important;color:#000 !important;
    transform:scale(1.08) !important;
    box-shadow:0 4px 16px rgba(0,0,0,0.4) !important;
}
#vgw-modal-root .vgwx-pw-submit svg{
    width:18px !important;height:18px !important;
    display:block !important;flex-shrink:0 !important;
    margin:0 !important;padding:0 !important;
}
#vgw-modal-root .vgwx-pw-submit svg *{
    stroke:#000000 !important;fill:none !important;color:#000000 !important;
}

/* Error */
#vgw-modal-root .vgwx-pw-error{
    display:flex !important;align-items:center !important;gap:5px !important;
    font-size:clamp(9px,1vw,10px) !important;
    color:#ff5555 !important;letter-spacing:0.08em !important;text-transform:uppercase !important;
    opacity:0 !important;transition:opacity 0.2s !important;
    margin:0 !important;padding:0 !important;
}
#vgw-modal-root .vgwx-pw-error.vgwx-visible{opacity:1 !important}

/* ════════════════════════
   PLAYER SCREEN
════════════════════════ */
#vgw-modal-root .vgwx-player-screen{display:none !important}
#vgw-modal-root .vgwx-player-screen.vgwx-show{display:block !important}

#vgw-modal-root .vgwx-player-header{
    padding:clamp(14px,2.5vw,24px) clamp(16px,3vw,28px) clamp(12px,2vw,20px) !important;
    background:#0a0a0a !important;
    border-bottom:1px solid rgba(255,255,255,0.06) !important;
}
#vgw-modal-root .vgwx-player-header.vgwx-hidden{display:none !important}

#vgw-modal-root .vgwx-player-meta{
    display:flex !important;align-items:baseline !important;
    gap:10px !important;flex-wrap:wrap !important;margin-bottom:6px !important;
}
#vgw-modal-root .vgwx-player-headline{
    font-size:clamp(15px,3vw,26px) !important;font-weight:800 !important;
    color:#fff !important;letter-spacing:-0.02em !important;line-height:1.1 !important;
    margin:0 !important;
}
#vgw-modal-root .vgwx-player-subtitle{
    font-size:clamp(9px,1vw,11px) !important;color:rgba(255,255,255,0.35) !important;
    letter-spacing:0.1em !important;text-transform:uppercase !important;
    padding-bottom:2px !important;margin:0 !important;
}
#vgw-modal-root .vgwx-player-desc{
    font-size:clamp(12px,1.5vw,13px) !important;color:rgba(255,255,255,0.45) !important;
    line-height:1.5 !important;max-width:100% !important;margin:0 !important;
}

/* Vídeo */
#vgw-modal-root .vgwx-video-wrap{background:#000 !important}
#vgw-modal-root .vgwx-video{
    display:block !important;width:100% !important;
    height:auto !important;
    max-height:75vh !important;
    background:#000 !important;
}

/* ══════════════════════════════════════
   RESPONSIVE — tablet (≤860px)
══════════════════════════════════════ */
@media(max-width:860px){
    /* Grid 3col → 2col */
    #vgw-gallery-root .vgwx-wrap[data-layout="3col"]{
        grid-template-columns:1fr 1fr !important;
        grid-auto-rows:clamp(150px,22vw,240px) !important;
    }
    /* Reordenar clases para 2 columnas */
    #vgw-gallery-root .vgwx-item.vgwx-tall  {grid-column:1/3 !important;grid-row:span 1 !important}
    #vgw-gallery-root .vgwx-item.vgwx-wide-r{grid-column:1/3 !important}
    #vgw-gallery-root .vgwx-item.vgwx-wide-l{grid-column:1/3 !important}
    #vgw-gallery-root .vgwx-item.vgwx-full  {grid-column:1/3 !important}
    #vgw-gallery-root .vgwx-item.vgwx-sq    {grid-column:span 1 !important}

    /* Modal más cerca de los bordes */
    #vgw-modal-root.vgwx-modal{padding:8px !important}
    #vgw-modal-root .vgwx-modal-box{border-radius:10px !important}
}

/* ══════════════════════════════════════
   RESPONSIVE — móvil (≤640px)
══════════════════════════════════════ */
@media(max-width:640px){
    /* Grid → 1 columna, altura fija en vw (no depende del font-size del sistema) */
    #vgw-gallery-root .vgwx-wrap[data-layout="1col"],
    #vgw-gallery-root .vgwx-wrap[data-layout="2col"],
    #vgw-gallery-root .vgwx-wrap[data-layout="3col"]{
        grid-template-columns:1fr !important;
        grid-auto-rows:56vw !important;
        gap:3px !important;
    }
    /* Todos los items en 1 columna sin excepción */
    #vgw-gallery-root .vgwx-item,
    #vgw-gallery-root .vgwx-item.vgwx-full,
    #vgw-gallery-root .vgwx-item.vgwx-tall,
    #vgw-gallery-root .vgwx-item.vgwx-wide-r,
    #vgw-gallery-root .vgwx-item.vgwx-wide-l,
    #vgw-gallery-root .vgwx-item.vgwx-sq{
        grid-column:1 !important;
        grid-row:auto !important;
        height:56vw !important;
        min-height:56vw !important;
        max-height:56vw !important;
    }

    /* Texto overlay en vw — inmune al font-size del sistema */
    #vgw-gallery-root .vgwx-info-headline{
        font-size:3.5vw !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }
    #vgw-gallery-root .vgwx-info-sub{
        font-size:2.2vw !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }

    /* Botón play más pequeño en móvil */
    #vgw-gallery-root .vgwx-btn-play{
        width:42px !important;
        height:42px !important;
    }

    /* Modal centrado */
    #vgw-modal-root.vgwx-modal{
        padding:12px !important;
        align-items:center !important;
        justify-content:center !important;
    }
    #vgw-modal-root .vgwx-modal-box{
        border-radius:12px !important;
        max-width:100% !important;
        width:100% !important;
        max-height:90vh !important;
        transform:translateY(20px) scale(0.97) !important;
        overflow-y:auto !important;
        -webkit-overflow-scrolling:touch !important;
    }
    #vgw-modal-root.vgwx-active .vgwx-modal-box{
        transform:translateY(0) scale(1) !important;
    }

    /* Password screen compacta */
    #vgw-modal-root .vgwx-pw-screen.vgwx-show{
        min-height:auto !important;
    }
    #vgw-modal-root .vgwx-pw-content{
        padding:32px 20px 28px !important;
        min-height:auto !important;
    }
    #vgw-modal-root .vgwx-pw-row{
        max-width:100% !important;
    }
    /* Textos del modal en vw para que no dependan del font-size del sistema */
    #vgw-modal-root .vgwx-pw-meta-headline{
        font-size:5.5vw !important;
    }
    #vgw-modal-root .vgwx-pw-meta-sub{
        font-size:2.8vw !important;
    }
    #vgw-modal-root .vgwx-pw-label{
        font-size:2.5vw !important;
    }
    #vgw-modal-root .vgwx-player-headline{
        font-size:5vw !important;
    }
    #vgw-modal-root .vgwx-player-subtitle{
        font-size:2.5vw !important;
    }
    #vgw-modal-root .vgwx-player-desc{
        font-size:3.2vw !important;
    }
    /* Vídeo ocupa el ancho completo con altura proporcional 16:9 */
    #vgw-modal-root .vgwx-video{
        max-height:none !important;
        height:auto !important;
        width:100% !important;
        aspect-ratio:16/9 !important;
    }
}

/* ══════════════════════════════════════
   RESPONSIVE — móvil pequeño (≤380px)
══════════════════════════════════════ */
@media(max-width:380px){
    #vgw-gallery-root .vgwx-wrap{
        grid-auto-rows:62vw !important;
    }
    #vgw-gallery-root .vgwx-item,
    #vgw-gallery-root .vgwx-item.vgwx-full,
    #vgw-gallery-root .vgwx-item.vgwx-tall,
    #vgw-gallery-root .vgwx-item.vgwx-wide-r,
    #vgw-gallery-root .vgwx-item.vgwx-wide-l,
    #vgw-gallery-root .vgwx-item.vgwx-sq{
        height:62vw !important;
        min-height:62vw !important;
        max-height:62vw !important;
    }
    #vgw-modal-root .vgwx-pw-content{
        padding:24px 16px 20px !important;
    }
}

/* ══ BLOQUEO DESCARGA ══ */
#vgw-modal-root .vgwx-video::-webkit-media-controls-download-button{
    display:none !important;-webkit-appearance:none !important;
}
#vgw-modal-root .vgwx-video-wrap{
    -webkit-user-select:none !important;
    user-select:none !important;
}