/*
Theme Name: VIP Video Dark Pro
Description: Tema premium con diseño de catálogo vertical (tipo Netflix), panel de control y Adsterra.
Version: 3.2
*/

* { box-sizing: border-box; }
body { background-color: #0f0f0f; color: #ffffff; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; line-height: 1.6; }
a { color: #e50914; text-decoration: none; transition: 0.3s; }
a:hover { color: #ff1523; }

/* Cabecera */
.site-header { background: #000000; padding: 15px 20px; text-align: center; border-bottom: 2px solid #222; box-shadow: 0 4px 10px rgba(0,0,0,0.5); position: sticky; top: 0; z-index: 100; }
.site-title { margin: 0; font-size: 24px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; }
.site-title a { color: #e50914; }

/* Contenedor Principal */
.container { max-width: 1400px; margin: 0 auto; padding: 25px 15px; }
.section-title { font-size: 20px; font-weight: 600; margin: 0 0 20px 0; border-left: 4px solid #e50914; padding-left: 10px; color: #ddd; }

/* ============================================================
   CUADRÍCULA DE CATÁLOGO (ESTILO VERTICAL / POSTER)
   ============================================================ */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 15px; }

.video-card { background: #141414; border-radius: 6px; overflow: hidden; transition: all 0.3s ease; border: 1px solid #222; display: flex; flex-direction: column; }
.video-card:hover { transform: translateY(-5px); border-color: #e50914; box-shadow: 0 5px 15px rgba(229, 9, 20, 0.3); }

/* Relación de aspecto vertical (tipo poster 2:3) para las fotos de modelos */
.video-thumbnail { position: relative; width: 100%; aspect-ratio: 2 / 3; background: #000; overflow: hidden; }
.video-thumbnail img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.5s ease; }
.video-card:hover .video-thumbnail img { transform: scale(1.05); }

/* Ícono de play más sutil y abajo */
.play-icon { position: absolute; bottom: 10px; right: 10px; width: 35px; height: 35px; background: rgba(229, 9, 20, 0.8); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; opacity: 0; transition: opacity 0.3s; z-index: 5; }
.video-card:hover .play-icon { opacity: 1; }

.video-info { padding: 10px; flex-grow: 1; display: flex; align-items: center; justify-content: center; min-height: 50px;}
.video-title { font-size: 14px; font-weight: 500; color: #eee; margin: 0; line-height: 1.3; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Reproductor (Mantiene horizontal para el video real) */
.single-video-container { background: #000; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.8); margin-bottom: 25px; border: 1px solid #333;}
.single-video-container video { width: 100%; max-height: 700px; display: block; outline: none; background: #000; }
.single-info { padding: 15px; background: #141414; }
.single-title { font-size: 22px; margin: 0; font-weight: 700; color: #fff; }

/* Espacios Publicitarios */
.ad-slot-top { text-align: center; margin: 0 auto 20px auto; padding: 0; width: 100%; max-width: 728px; overflow: hidden;}
.ad-slot-bottom { text-align: center; margin: 25px auto; padding: 0; width: 100%; overflow: hidden;}

/* Botón Flotante Telegram */
.btn-telegram-float { position: fixed; bottom: 20px; right: 20px; background: #0088cc; color: #fff; padding: 8px 16px; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 10px rgba(0, 136, 204, 0.3); z-index: 1000; transition: all 0.3s ease;}
.btn-telegram-float:hover { background: #0077b5; transform: scale(1.05); color: #fff; box-shadow: 0 6px 15px rgba(0, 136, 204, 0.5);}
.btn-telegram-float svg { width: 18px; height: 18px; fill: white;}

/* Modo Móvil (Ajuste para que quepan 2 columnas bien definidas) */
@media (max-width: 768px) {
    .container { padding: 15px 10px; }
    .video-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    .site-title { font-size: 20px; }
    .single-title { font-size: 18px; }
    .video-title { font-size: 13px; }
    .play-icon { width: 30px; height: 30px; font-size: 14px; bottom: 5px; right: 5px; opacity: 1; background: rgba(0,0,0,0.5); } /* Siempre visible en móvil pero más discreto */
    
    .btn-telegram-float { bottom: 15px; right: 15px; padding: 6px 12px; font-size: 12px; gap: 6px;}
    .btn-telegram-float svg { width: 16px; height: 16px; }
}