/* ==========================================================================
   ESTILOS CATEGORÍAS V6.1 (Optimizado: Variables Nativas)
   Carga solo en category.php
   ========================================================================== */

.category-page-container { background-color: #f9f9f9; padding-bottom: 60px; }

.cat-header { background: #fff; padding: 40px 0; margin-bottom: 30px; border-bottom: 1px solid #eee; }
.cat-breadcrumb-wrapper { margin-bottom: 10px; color: #666; font-size: 0.9rem; font-family: var(--font-body); }
.cat-title { font-family: var(--font-titles); font-size: 3rem; margin: 0; color: var(--text-muted); }
.cat-description { max-width: 800px; margin-top: 10px; font-size: 1.1rem; color: #666; }

.cat-section { margin-bottom: 60px; }
.cat-section-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 25px; display: flex; align-items: center; gap: 10px; border-left: 5px solid var(--brand-lime); padding-left: 15px; }

.cat-popular-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cat-pop-card { position: relative; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: transform 0.2s; }
.cat-pop-card:hover { transform: translateY(-5px); }
.cat-pop-link { text-decoration: none; color: inherit; }
.cat-pop-media { position: relative; height: 200px; overflow: hidden; }
.cat-pop-img { width: 100%; height: 100%; object-fit: cover; }
.cat-pop-counter { position: absolute; top: 10px; left: 10px; background: var(--brand-lime); color: #fff; font-weight: 800; font-size: 1rem; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cat-pop-body { padding: 15px; }
.cat-pop-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 5px; line-height: 1.3; }
.cat-pop-meta { font-size: 0.8rem; color: #888; }

.cat-latest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.cat-shorts-section { background: #000; padding: 40px 0; color: #fff; }
.cat-shorts-section .cat-section-title { color: #fff; border-color: #ff0000; }
.shorts-scroller { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 10px; }
.short-card { flex: 0 0 160px; height: 280px; position: relative; border-radius: 12px; overflow: hidden; cursor: pointer; }
.short-card img { width: 100%; height: 100%; object-fit: cover; }
.play-icon-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.6); color: #fff; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; transition: transform 0.2s, background 0.2s; }
.play-icon-overlay svg { width: 20px; height: 20px; fill: currentColor; margin-left: 2px; }
.short-card:hover .play-icon-overlay { background: #FF0000; border-color: #FF0000; transform: translate(-50%, -50%) scale(1.1); }

.videos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.video-card-yt { text-decoration: none; color: inherit; cursor: pointer; }
.vcy-media { position: relative; border-radius: 8px; overflow: hidden; margin-bottom: 10px; aspect-ratio: 16/9; }
.vcy-media img { width: 100%; height: 100%; object-fit: cover; }
.vcy-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(0,0,0,0.7); color: #fff; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; transition: transform 0.2s, background 0.2s; }
.vcy-play svg { width: 24px; height: 24px; fill: currentColor; margin-left: 3px; }
.video-card-yt:hover .vcy-play { background: #FF0000; border-color: #FF0000; transform: translate(-50%, -50%) scale(1.1); }
.vcy-title { font-size: 0.95rem; font-weight: 700; line-height: 1.3; margin: 0; }

@media (max-width: 991px) {
    .cat-latest-grid { grid-template-columns: repeat(2, 1fr); }
    .videos-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .cat-popular-grid { display: flex; overflow-x: auto; gap: 15px; padding-bottom: 10px; }
    .cat-pop-card { flex: 0 0 260px; } 
    .cat-latest-grid { grid-template-columns: 1fr; }
    .videos-grid { grid-template-columns: 1fr; }
    .cat-title { font-size: 2.5rem; }
}