/*!
Theme Name: portaldedjs
Theme URI: http://underscores.me/
Author: Lenen Hernandez
Author URI: http://underscores.me/
Description: Portal de DJs una comunida de DJs latinos en todo el mundo.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: musica-djs-latinos
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

portaldedjs is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/


/* -------------------------------------------
* 0. VARIABLES CSS (CUSTOM PROPERTIES)
* ------------------------------------------- */
:root {
    /* Colores Primarios (Basados en tu diseño) */
    --color-primary: #2dd9c3;       /* Rojo/Rosado dominante (Títulos, acentos) */
    --color-secondary: #0ff;     /* Azul Cyan (Iconos Play/Descarga, acentos en packs) */
    --color-neon: #00ffcc;
    
    /* Colores de Texto y Fondo */
    --color-text-dark: #333;        /* Texto principal oscuro */
    --color-text-medium: #666;      /* Párrafos, texto secundario */
    --color-text-light: #888;       /* Metadatos */
    --color-text-white: #fff;       /* Texto sobre fondos oscuros */
    
    /* Colores de Fondo y Bordes */
    --color-bg-light: #f4f4f4;      /* Fondo principal claro (body) */
    --color-bg-dark: #111;          /* Fondo oscuro (Sección Packs/Footer) */
    --color-bg-black: #000;         /* Fondo muy oscuro (Footer) */
    --color-border-light: #eee;     /* Bordes finos de listas */
    --color-border-dark: #333;      /* Bordes en modo oscuro */
}

/* -------------------------------------------
* 1. FUNDAMENTOS Y UTILIDADES GENERALES
* ------------------------------------------- */

/* --- RESET BÁSICO --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--color-bg-dark);
    color: var(--color-text-light);
    
}


img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* --- UTILIDADES DE LAYOUT --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0px 20px;
    
}
.clean-list { 
    list-style: none; 
    padding: 0; 
}

a {
    color: var(--color-text-white);
    text-decoration: none;
}
a:hover{
    color: var(--color-secondary);
}

/* -------------------------------------------
* 2. ESTILOS DE SECCIÓN (Bloques grandes)
* ------------------------------------------- */

/* --- 2.1. SECCIÓN MAGAZINE LAYOUT --- */
.magazine-layout-grid {
    display: flex;
    flex-direction: column;
    padding: 10px;
	grid-gap: 20px;
}

/* COLUMNA IZQUIERDA (TRENDING) */
.trending-list .trending-item {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-primary);
    padding-bottom: 15px;
}
.trending-number {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--color-primary); /* El color neón de tu Radio #PDJS */
    margin-right: 15px;
    opacity: 0.5;
    min-width: 35px;
}

.trending-item {
    display: flex; /* Para que el número y el contenido estén uno al lado del otro */
    align-items: center;
    margin-bottom: 20px;
}

.trending-content h3 {
    font-size: 1rem;
    line-height: 1.3;
}
.trending-thumb {
    width: 90px;
    height: 70px;
    margin-right: 15px;
    flex-shrink: 0;
}
.trending-thumb img { height: 100%; }

/* COLUMNA CENTRAL (DESTACADOS) */
.feature-large {
    position: relative;
    margin-bottom: 20px;
    height: 400px;
    overflow: hidden;
    border-radius: 20px;
}
.feature-large:hover img {
    transform: scale(1.05);
}
.feature-large img {
    height: 100%;
    transition: transform 0.3s ease;
}
.sub-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.feature-medium {
    position: relative;
    height: 250px;
    overflow: hidden;
    border-radius: 20px;
}
.feature-medium:hover img {
    transform: scale(1.05);
}
.feature-medium img { height: 100%; transition: transform 0.3s ease;}
.feature-medium h3 {
    font-size: 1.2rem; 
    color: var(--color-text-white);
}

/* COLUMNA DERECHA (SIDEBAR) - Parte específica de la lista principal */
.ad-square {
    background: #eee;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--color-border-light);
    margin-bottom: 30px;
    font-weight: bold;
    color: var(--color-text-light);
}
/* Widget de Pestañas (Tabs) */
.tabs-header {
    display: flex;
    border-bottom: 2px solid var(--color-border-light);
    margin-bottom: 20px;
}
.tab-btn {
    padding: 10px 15px;
    background: none;
    border: none;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--color-text-light);
}
.tab-btn.active {
    color: var(--color-text-dark);
    border-bottom: 3px solid var(--color-primary);
    margin-bottom: -2px; 
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Estilo lista pequeña del sidebar derecho */
.small-list-item {
    display: flex;
    margin-bottom: 10px;
}
.small-thumb {
    width: 80px;
    height: 80px;
    margin-right: 10px;
    flex-shrink: 0;
}
.small-thumb img { height: 100%; }
.small-list-item h4 {
    font-size: 0.9rem;
    line-height: 1.2;
}




/* --- 2.3. SECCIÓN PACK GRATIS (DARK) --- */
.dark-media-section {
    background-color: var(--color-border-dark);
    color: var(--color-text-white);
    padding: 40px 0;
    margin-top: 50px;
    border-radius: 20px;
}

.media-grid {
    display: flex;
    flex-wrap: wrap; /* Permite que bajen en móvil */
    gap: 30px;
}

/* Control de anchos en Escritorio */
.media-main {
    flex: 1;
    min-width: 300px; /* Evita que se encoja demasiado */
}

.media-sidebar {
    width: 35%; /* Ancho para la columna derecha */
    min-width: 300px;
}

/* --- AJUSTE PARA TABLET Y MÓVIL --- */
@media (max-width: 992px) {
    .media-sidebar {
        width: 90%; /* En tablets y móviles ocupa todo el ancho */
    }
    .media-grid{
        flex-direction: column;
         flex-wrap: nowrap;
    }
    .media-main {
        width: 100%;
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .media-item-small {
        flex-direction: row; /* Mantiene la miniatura al lado del texto */
    }
	.footer-column{
		max-width:300px;
	}
    .media-thumb {
        width: 100px; /* Más pequeño en móviles muy chicos */
        height: 70px;
    }
    .media-main h3 {
        font-size: 1.4rem;
    }
}

/* --- RESTO DE ESTILOS (Tus iconos y thumbs) --- */
.media-poster {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: 20px;
}

.media-poster img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s;
    border-radius: 10px;
}

.media-item-small {
    display: flex;
    margin-bottom: 20px;
    align-items: center;
}

.media-thumb {
    width: 140px;
    height: 90px;
    position: relative;
    flex-shrink: 0;
    margin-right: 15px;
}

.media-thumb img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    border-radius: 10px; 
}


/* --- 2.4. SECCIÓN RECURSOS PARA DJS --- */
.resources-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}
.resource-card {
    margin-bottom: 10px;
}
.res-img-wrap {
    position: relative;
    height: 220px;
    overflow: hidden;
    margin-bottom: 15px;
    
}
.res-img-wrap img { width: 100%; height: 100%; object-fit: cover;border-radius: 10px; }

.category-overlay {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: var(--color-primary);
    color: var(--color-text-white);
    padding: 3px 10px;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
}
.res-content h3 {
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.3;
    color: var(--color-text-light);
}


/* --- 2.5. SECCIÓN NOTICIAS (Horizontal) --- */
.news-layout-flex {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.news-feed-main { /* Columna Izquierda */ }
.news-feed-sidebar { /* Columna Derecha */ }

.news-horizontal-card {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: 30px;
}
.news-thumb {
    width: 100%;
    height: 200px;
    flex-shrink: 0;
    margin-bottom: 15px;
    position: relative;
}
.news-thumb img { width: 100%; height: 100%; object-fit: cover; }

.icon-camera-overlay {
    position: absolute;
    top: 10px; left: 10px;
    background: var(--color-secondary);
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-white);
    font-size: 12px;
}

.news-body h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: var(--color-text-light);
}
.news-excerpt {
    color: var(--color-text-medium);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* --- FOOTER STYLE --- */
.bg-dark-interface {
    background-color: #050505;
    color: #888;
    padding-top: 60px;
    border-top: 2px solid #1a1a1a;
    margin-top: 60px;
}

.footer-content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr; /* Tres columnas de distinto ancho */
    gap: 50px;
    padding-bottom: 40px;
	
}

.footer-title {
    color: var(--color-text-white);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 25px;
    font-weight: 800;
}
.f-container{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0px 20px;
}

/* Columna Marca */
.footer-logo {
    font-size: 1.8rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 20px;
}

.footer-description {
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

/* Iconos Redes Sociales */
.footer-social-icons {
    display: flex;
    gap: 15px;
}

.social-link {
    width: 35px;
    height: 35px;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: var(--color-text-white);
    text-decoration: none;
    transition: 0.3s;
    border: 1px solid #222;
}

.social-link:hover {
    background: var(--color-primary);
    color: #000;
    box-shadow: 0 0 10px var(--color-primary);
}

/* Newsletter Input */
.footer-newsletter {
    display: flex;
    gap: 5px;
}

.footer-newsletter input {
    background: #111;
    border: 1px solid #222;
    padding: 10px;
    color: #fff;
    border-radius: 4px;
    flex-grow: 1;
}

.btn-primary-neon {
    background: var(--color-primary);
    border: none;
    padding: 10px 15px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
}

/* Footer Bottom */
.footer-bottom {
    background: #000;
    padding: 20px 0;
    font-size: 0.8rem;
    border-top: 1px solid #111;
}

.footer-bottom-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-legal-links a {
    color: #555;
    margin-left: 15px;
    text-decoration: none;
}

.footer-legal-links a:hover { color: #fff; }

/* Responsive */
@media (max-width: 768px) {
    .footer-content-grid {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .footer-social-icons { justify-content: center; }
    .footer-newsletter { justify-content: center; }
}


/* -------------------------------------------
* 3. COMPONENTES REUTILIZABLES (Títulos, Overlays)
* ------------------------------------------- */

/* --- TÍTULOS DE SECCIÓN ESTILO ETIQUETA --- */
/* Título con línea que cruza */
.section-header-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-border-light); 
}
.section-title-tag {
    background-color: var(--color-primary);
    color: var(--color-text-dark);
    padding: 6px 15px;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
    position: relative;
    bottom: -1px; 
}
/* Triángulo decorativo estilo 'etiqueta' */
.section-title-tag::after {
    content: '';
    position: absolute;
    top: 0;
    right: -10px; 
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 32px 0 0 10px; 
    border-color: transparent transparent transparent var(--color-primary);
}
/* Título de fondo oscuro (usado en Packs Gratis) */
.section-header-dark {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-border-light); 
}
.section-border-line.dark {
    border-bottom: 1px solid var(--color-border-light);
}

/* --- TÍTULO DE BARRA (Estilo rosado de la primer sección) --- */
.section-title-bar {
    background-color: var(--color-primary); 
    color: var(--color-text-dark);
    display: inline-block;
    padding: 5px 15px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: 15px;
    position: relative;
    width: 100%;
    text-align: center;
}
/* Pequeño triángulo decorativo debajo del título rosado */
.section-title-bar::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 10px;
    border-width: 8px 8px 0 0;
    border-style: solid;
    border-color: var(--color-primary) transparent transparent transparent;
}

/* --- METADATOS Y OVERLAYS --- */
.meta-info {
    font-size: 0.75rem;
    color: var(--color-text-light);
    text-transform: uppercase;
    margin-bottom: 5px;
}
.meta-info span { 
    color: var(--color-primary); 
    margin-right: 5px; 
    font-weight: bold;
}
.meta-info span a{
    color: var(--color-bg-black);
    background: var(--color-neon);
    padding: 5px;
    border-radius: 5px;
    font-size: 9px;
    transition: opacity 0.5s ease-out;
}
.meta-info span a:hover{
    background: var(--color-primary);
}

/* Meta tags compartidos (Entertainment/Packs) */
.meta-tag, .meta-text, .meta-mini {
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: bold;
}
.meta-tag { color: var(--color-primary); } /* En fondo oscuro */
.meta-text { color: var(--color-text-light); margin-bottom: 5px; } /* En fondo claro */
.meta-mini { color: #aaa; font-size: 0.65rem;}

/* Texto sobrepuesto en imagen (usado en Magazine y Entertainment) */
.content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0), transparent);
    color: var(--color-text-white);
    z-index: 2; 
}
.overlay-content { 
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, #000, transparent);
    color: var(--color-text-white);
}
.overlay-content h2 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: var(--color-text-white);
}
.overlay-content .meta-info { color: #ccc; }
.overlay-content .meta-info span { color: var(--color-primary); }


/* --- ICONOS ESPECÍFICOS (Play/Descarga) --- */
/* Icono Play */
.play-icon-overlay {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 30px;
    height: 30px;
    background: var(--color-secondary); 
    border-radius: 50%;
    color: var(--color-text-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.play-icon-overlay.small {
    width: 25px; height: 25px; top: auto; bottom: 10px; left: 10px;
}
/* Icono de Cámara (News) */
.icon-camera-overlay {
    position: absolute;
    top: 10px; left: 10px;
    background: var(--color-secondary);
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-white);
    font-size: 12px;
}
.ocultar-movil {
        display: block; 
    }

/* -------------------------------------------
* 4. MEDIA QUERIES (RESPONSIVE)
* ------------------------------------------- */

/* --- RESPONSIVE GENERAL (Magazine Grid) --- */
@media (min-width: 1024px) {
    .magazine-layout-grid {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
    }
    .sub-features-grid {
        grid-template-columns: 1fr 1fr;
    }
    
}
/* Para Tablets (Magazine Grid) */
@media (min-width: 768px) and (max-width: 1023px) {
    .magazine-layout-grid {
        grid-template-columns: 1fr 1fr; 
    }
    .layout-col-center {
        grid-column: 1 / -1;
        order: -1; 
    }
}


/* --- RESPONSIVE SECCIÓN PACK GRATIS (DARK) --- */
@media (max-width: 992px) {
    .media-grid {
        flex-direction: column; 
    }
}
    /* --- RESPONSIVE MOVIL --- */
@media (max-width: 425px) {
    .ocultar-movil {
        display: none; 
    }
}
/* --- RESPONSIVE pantallas grande PC 144px --- */
@media (min-width: 1440px){
    body{background: url(https://portaldedjs.com/wp-content/uploads/2025/12/pdjs-bg-tubos.jpg) repeat-y top;}
    .container{
        background: #333;
    }
    #portada-full{background: url(https://portaldedjs.com/wp-content/uploads/2025/12/pdjs-bg-full.jpg) no-repeat top;}
    .container{
        background: #333;
    }
    #portada{
        height: 400px;
        visibility: hidden;
    }
    
}

    


/* --- RESPONSIVE SECCIÓN RECURSOS --- */
@media (min-width: 768px) {
    .resources-grid {
        grid-template-columns: 1fr 1fr 1fr; 
    }
}

/* --- RESPONSIVE SECCIÓN NOTICIAS --- */
@media (min-width: 992px) {
    .news-layout-flex {
        flex-direction: row;
    }
    .news-feed-main { flex: 2; } 
    .news-feed-sidebar { flex: 1; } 
}
@media (min-width: 600px) {
    .news-horizontal-card {
        flex-direction: row;
        align-items: flex-start;
    }
    .news-thumb {
        width: 280px;
        height: 180px;
        margin-right: 25px;
        margin-bottom: 0;
    }
}

/* -------------------------------------------
* 5. PRELOADER Y LOADER
* ------------------------------------------- */

/* -- KEYFRAMES (Animaciones) -- */

/* 1. Animación para Girar el Vinilo */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 2. Animación para el Movimiento suave del Texto */
@keyframes text-wave {
    0% { transform: scale(1) translateX(0); opacity: 0.8; }
    50% { transform: scale(1.05) translateX(5px); opacity: 1; }
    100% { transform: scale(1) translateX(0); opacity: 0.8; }
}


/* -- ESTILO PRINCIPAL DEL LOADER -- */
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg-black); /* Fondo Oscuro */
    z-index: 9999; /* Asegurar que esté por encima de todo */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.5s ease-out; /* Transición para el efecto de fade-out */
}

/* Clase para ocultar el loader (se aplica con JavaScript) */
#loader-wrapper.fade-out {
    opacity: 0;
    visibility: hidden; /* Oculta completamente después de la transición */
}

.loader-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Estilo del Vinilo */
#vinyl-record {
    width: 150px;
    height: 150px;
    
    animation: spin 5s linear infinite; /* Aplicación de la animación de giro */
    
}

/* Estilo del Texto */
.loader-text {
    color: var(--color-text-white);
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
    padding: 8px 15px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    /* Aplicación de la animación de movimiento */
    animation: text-wave 2.5s ease-in-out infinite alternate; 
}

/* -------------------------------------------
* 5. EFECTO DE DESTELLO (SHIMMER EFFECT)
* ------------------------------------------- */

/* --- KEYFRAMES para el Movimiento del Destello --- */
@keyframes shimmer-sweep-anim {
    /* Comienza fuera del contenedor, a la izquierda */
    0% { transform: skewX(-25deg) translateX(-150%); } 
    /* Se mueve de izquierda a derecha sobre el elemento */
    100% { transform: skewX(-25deg) translateX(250%); }
}

/* --- CONTENEDOR PRINCIPAL (El elemento sobre el que se superpone el brillo) --- */
.shimmer-container {
    position: relative; /* Clave: Sirve como marco de referencia para el destello absoluto */
    overflow: hidden;   /* Clave: Oculta el destello cuando entra y sale del contenedor */
    /* Estilos del banner/header deben ir aquí (ej. background-color, padding, etc.) */
    /* background-color: var(--color-bg-dark); */ 
}

/* --- ELEMENTO DEL DESTELLO (El brillo que se mueve) --- */
.shimmer-sweep {
    position: absolute; /* Clave: Superpone el elemento sobre el contenido */
    top: 0;
    left: 0;
    width: 50%; /* Define el ancho de la zona de brillo */
    height: 100%;
    
    /* Degradado que crea el efecto de brillo */
    background: linear-gradient(
        90deg, 
        rgba(255, 255, 255, 0) 0%, /* Totalmente transparente al inicio */
        rgba(255, 255, 255, 0.4) 50%, /* Brillo blanco semi-transparente en el medio */
        rgba(255, 255, 255, 0) 100% /* Totalmente transparente al final */
    );
    
    /* Inclinación para darle el efecto de barrido diagonal (como un espejo) */
    transform: skewX(-25deg) translateX(-150%); 
    
    /* Aplicación de la animación */
    animation: shimmer-sweep-anim 3s infinite; /* 3 segundos de duración, se repite indefinidamente */
    animation-delay: 2s; /* Retraso de 2 segundos entre cada barrido */
}
/* -------------------------------------------
* 6. NAVEGACIÓN (HEADER Y MENÚS) - IMPLEMENTADO
* ------------------------------------------- */

/* --- Menú Principal (No Sticky) --- */
#main-nav-wrapper {
    
    z-index: 1000;
}

.main-nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    max-width: 1200px;
}

.nav-logo {
    color: var(--color-text-white);
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.5px;
    flex-shrink: 0;
}

/* Contenedor principal del menú */
.nav-links-primary {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px;
}

/* Los items que tienen hijos deben tener posición relativa */
.nav-links-primary li {
    position: relative;
    padding: 15px 0;
}

/* Estilo para los Submenús (ul internos) */
.nav-links-primary ul.sub-menu {
    position: absolute;
    top: 100%; /* Aparece justo debajo del padre */
    left: 0;
    background: #1a1a1a; /* Fondo oscuro como tu diseño */
    min-width: 200px;
    padding: 10px 0;
    list-style: none;
    border-top: 3px solid #00ffcc; /* Detalle neón */
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    
    /* Escondido por defecto */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 999;
}

/* Mostrar al hacer hover */
.nav-links-primary li:hover > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Estilo de los links dentro del submenú */
.nav-links-primary ul.sub-menu li {
    padding: 0;
}

.nav-links-primary ul.sub-menu li a {
    display: block;
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.2s;
}

.nav-links-primary ul.sub-menu li a:hover {
    background: #252525;
    color: #00ffcc;
}

/* Estilos de Botones de Autenticación */
.nav-auth-buttons {
    display: flex;
    gap: 10px;
}
.header-auth-buttons{
   
    scale: 0.9;
}
.btn-login, .btn-register {
    padding: 8px 15px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
}
.btn-login {
    background-color: transparent;
    color: var(--color-text-white);
    border: 1px solid var(--color-text-white);
}
.btn-register {
    background-color: var(--color-primary);
    color: var(--color-bg-dark);
}
/* Botón de Salir */
.btn-logout {
    background: transparent;
    color: #ff4d4d; /* Rojo suave / Naranja neón */
    border: 1px solid #ff4d4d;
    padding: 8px 15px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-logout:hover {
    background: #ff4d4d;
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 77, 77, 0.4);
}

/* Botón de Mi Perfil (Opcional) */
.btn-account {
    color: #fff;
    text-decoration: none;
    margin-right: 15px;
    font-size: 13px;
    font-weight: 500;
}

.btn-account:hover {
    color: #00ffcc;
}



.secondary-nav-content {
    padding: 10px 20px;
    background: var(--color-primary);
}

.nav-links-secondary {
    display: flex;
    justify-content: center;
    gap: 25px;
    overflow-x: auto; 
    flex-wrap: wrap;
    margin: 0px;
}
.nav-links-secondary a {
    color: var(--color-text-medium);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap; 
}
.nav-links-secondary a:hover {
    color: var(--color-bg-light);
}

/* --- ESTILOS HAMBURGUESA --- */

.hamburger-menu {
    display: none; /* Oculto por defecto */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    position: relative;
    z-index: 1001; 
}

.bar {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--color-text-white);
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
    border-radius: 2px;
}
.hamburger-menu.active .bar:nth-child(2) { opacity: 0; }
.hamburger-menu.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger-menu.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* --- MEDIA QUERY PARA MÓVILES (Menos de 900px) --- */
@media (max-width: 900px) {
    
    /* Mostrar Hamburguesa */
    .hamburger-menu {
        display: block;
        margin-right: 15px; 
    }
    .nav-auth-buttons {
        margin-left: auto;
    }
    
    /* Ocultar el menú de enlaces principal (hasta que se active) */
    .nav-links-primary {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--color-bg-dark); 
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
        transform: translateX(-100%); /* Inicialmente fuera de la pantalla */
        transition: transform 0.3s ease-in-out;
        margin: 0;
        z-index: 100;
    }
    
    /* Estado Visible del Menú Móvil */
    .nav-links-primary.menu-open {
        transform: translateX(0);
    }
    
    .nav-links-primary a {
        font-size: 1.5rem; 
    }
    
    /* Ajuste para que el menú secundario se pueda deslizar horizontalmente */
    .nav-links-secondary {
        padding-bottom: 5px; 
    }
}
/* --- LAYOUT SINGLE --- */
.layout-single-grid {
    display: flex;
    margin-top: 30px;
	grid-gap: 20px;
}
.layout-single-grid #primary{
	width:70%;
}
.main-sidebar{
	width: 30%;
	padding: 5px;
}

@media (max-width: 992px) {
    .layout-single-grid { flex-direction: column;    }
	.main-sidebar{width: 100%; margin: auto;}
	.layout-single-grid #primary{width: 100%; }
}

/* --- ESTILO DEL POST --- */
.single-post-card {
    width:70%
    border-radius: 8px;
}

.single-post-card p {
    
    line-height: 1.5;
    color: var(--color-text-white);
}
.post-meta-top {
    margin-bottom: 15px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.post-meta-top .cat-links a {
    background: var(--color-primary);
    color: #000;
    padding: 3px 10px;
    border-radius: 3px;
    font-weight: bold;
    text-decoration: none;
    margin-right: 10px;
}

.entry-title {
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1.1;
    color: var(--color-text-white);
    margin-bottom: 25px;
}



.main-post-img {
    width: 100%;
    height: auto;
    border-bottom: 4px solid var(--color-primary); /* Línea neón debajo de la foto */
}

/* --- CUERPO DEL TEXTO --- */
.entry-content {
    color: #ccc;
    line-height: 1.8;
    font-size: 1.1rem;
}

.entry-content p { margin-bottom: 20px; }

.entry-content h2, .entry-content h3 {
    color: var(--color-primary);
    margin-top: 40px;
}

/* --- SIDEBAR ESTILO DARK --- */
.main-sidebar .widget {
    background: #1a1a1a;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 5px;
}

.widget-title {
    color: var(--color-text-white);
    font-size: 1.2rem;
    text-transform: uppercase;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.main-sidebar ul {
    list-style: none;
    padding: 0;
}

.main-sidebar ul li {
    padding: 8px 0;
    border-bottom: 1px solid #222;
}

.main-sidebar ul li a {
    color: #aaa;
    text-decoration: none;
    transition: 0.3s;
}

.main-sidebar ul li a:hover {
    color: var(--color-primary);
    padding-left: 5px;
}
@media (min-width: 992px) {
    
}
/* --- SECCIÓN DE COMENTARIOS --- */
#comments {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #333;
}

.comments-title {
    font-size: 1.5rem;
    color: var(--color-primary);
    text-transform: uppercase;
    margin-bottom: 30px;
    font-weight: 800;
}

/* --- LISTA DE COMENTARIOS EXISTENTES --- */
.comment-list {
    list-style: none;
    padding: 0;
}

.comment-body {
    background: #1a1a1a;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    border-left: 3px solid #333;
    transition: border-color 0.3s;
}

.comment-body:hover {
    border-left-color: var(--color-primary);
}

.comment-author .fn {
    color: var(--color-text-white);
    font-weight: bold;
    font-style: normal;
}

.comment-metadata {
    font-size: 0.8rem;
    margin-bottom: 10px;
}

.comment-metadata a {
    color: var(--color-text-light);
    text-decoration: none;
}

.comment-content {
    color: #ccc;
    line-height: 1.6;
}

.reply a {
    display: inline-block;
    margin-top: 10px;
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
}

/* --- FORMULARIO DE COMENTARIOS (RESPOND) --- */
.comment-respond {
    background: #111;
    padding: 30px;
    border-radius: 10px;
    border: 1px solid #222;
}

.comment-reply-title {
    color: var(--color-text-white);
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: block;
}

/* Estilo de los campos de texto */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    background: #0a0a0a;
    border: 1px solid #333;
    color: #fff;
    padding: 12px 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    outline: none;
    transition: all 0.3s;
}
/* --- ESTILO PARA EL CHECKBOX DE COMENTARIOS --- */

/* Contenedor del checkbox de WordPress */
.comment-form-cookies-consent {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    cursor: pointer;
}

/* Ocultamos el checkbox original y creamos el nuevo */
.comment-form-cookies-consent input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    background: #0a0a0a; /* Fondo muy oscuro */
    border: 2px solid #333; /* Borde apagado */
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

/* Efecto Hover: se ilumina el borde */
.comment-form-cookies-consent input[type="checkbox"]:hover {
    border-color: var(--color-primary);
}

/* Estado: SELECCIONADO (Checked) */
.comment-form-cookies-consent input[type="checkbox"]:checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
    /* Brillo neón hacia afuera */
    box-shadow: 0 0 12px rgba(45, 217, 195, 0.5); 
}

/* El símbolo de "check" (la marca) */
.comment-form-cookies-consent input[type="checkbox"]:checked::after {
    content: '\2713'; /* Símbolo Unicode de check */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000; /* Color del check sobre el fondo neón */
    font-size: 14px;
    font-weight: 900;
}

/* Estilo del texto que acompaña al checkbox */
.comment-form-cookies-consent label {
    color: #888;
    font-size: 0.85rem;
    line-height: 1.4;
    cursor: pointer;
    user-select: none; /* Evita que se seleccione el texto al hacer clic rápido */
    transition: color 0.3s;
}

/* Al estar marcado, el texto también resalta un poco */
.comment-form-cookies-consent input[type="checkbox"]:checked + label {
    color: var(--color-text-white);
}

.comment-form input:focus,
.comment-form textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 8px rgba(45, 217, 195, 0.2);
}

/* Botón de enviar (Submit) */
.comment-form .submit {
    background: var(--color-primary);
    color: #000;
    border: none;
    padding: 12px 30px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s;
    width: 100%; /* O auto si lo quieres pequeño */
}

.comment-form .submit:hover {
    background: var(--color-text-white);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Ajuste para checkbox de Cookies de WP */
.comment-form-cookies-consent {
    font-size: 0.8rem;
    color: var(--color-text-light);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
@media (min-width: 768px) {
    .comment-form-author, 
    .comment-form-email {
        width: 48%;
        float: left;
    }
    .comment-form-email {
        margin-left: 4%;
    }
    .comment-form-url {
        clear: both;
    }
}
#commentform p{
    margin-bottom: 20px;
}
/* --- ESTILO "DJ INTERFACE" PARA COMENTARIOS --- */

/* Título con línea de acento */
.comments-title {
    font-size: 1.2rem;
    color: var(--color-text-white);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.comments-title::after {
    content: "";
    height: 2px;
    flex-grow: 1;
    background: linear-gradient(to right, var(--color-primary), transparent);
}

.comment-list {
    padding: 0;
    margin: 0;
}

/* El contenedor del comentario con efecto Cristal Oscuro */
.comment-body {
    background: rgba(255, 255, 255, 0.03); /* Fondo semi-transparente */
    backdrop-filter: blur(10px); /* Efecto de desenfoque */
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 30px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.comment-body:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(45, 217, 195, 0.3);
    transform: translateY(-5px);
}

/* Avatar con Glow Neón */
.comment-author {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.comment-author .avatar {
    width: 55px;
    height: 55px;
    border-radius: 12px; /* Cuadrado redondeado moderno */
    border: 2px solid #222;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

.comment-author .fn {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    font-style: normal;
}

/* Fecha y Hora sutiles */
.comment-metadata {
    position: absolute;
    top: 25px;
    right: 25px;
    font-size: 0.7rem;
    font-family: monospace; /* Estilo técnico */
    color: #555;
}

.comment-metadata a { color: inherit; text-decoration: none; }

/* Contenido del texto */
.comment-content {
    color: #adadad;
    font-size: 0.95rem;
    line-height: 1.7;
    padding-left: 70px; /* Alineado con el inicio del texto del nombre */
}

/* Botón de Respuesta tipo "Badge" */
.reply {
    padding-left: 70px;
    margin-top: 15px;
}

.comment-reply-link {
    font-size: 0.7rem;
    font-weight: 800;
    color: #fff !important;
    background: #222;
    padding: 6px 18px;
    border-radius: 5px;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s;
}

.comment-reply-link:hover {
    background: var(--color-primary);
    color: #000 !important;
    box-shadow: 0 0 15px var(--color-primary);
}

/* Hilos de conversación (Línea conectora) */
.comment-list .children {
    margin-left: 70px;
    border-left: 1px solid #222;
    padding-left: 30px;
    position: relative;
}

/* Estilo para el Administrador (VIP) */
.bypostauthor > .comment-body {
    background: rgba(45, 217, 195, 0.05);
    border-left: 4px solid var(--color-primary);
}

.bypostauthor .fn::after {
    content: "VERIFIED DJ";
    font-size: 10px;
    background: var(--color-primary);
    color: #000;
    padding: 2px 6px;
    margin-left: 10px;
    border-radius: 3px;
    vertical-align: middle;
}
/* --- NAVEGACIÓN ENTRE POSTS (PREV/NEXT) --- */
.post-navigation {
    margin: 40px 0;
    padding: 20px 0;
    border-top: 1px dashed #333;
}

.post-navigation .nav-links {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dividimos en dos columnas */
    gap: 20px;
}

/* Estilo común para ambos botones */
.nav-previous, .nav-next {
    background: #111;
    border: 1px solid #222;
    border-radius: 8px;
    padding: 20px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

/* Alineación específica */
.nav-previous { text-align: left; align-items: flex-start; }
.nav-next { text-align: right; align-items: flex-end; }

/* Efecto Hover: se ilumina el que elijas */
.nav-previous:hover, .nav-next:hover {
    background: #1a1a1a;
    border-color: var(--color-primary);
    box-shadow: 0 0 15px rgba(45, 217, 195, 0.2);
}

/* Texto pequeño decorativo (Anterior / Siguiente) */
.nav-previous::before {
    content: "Anterior";
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--color-primary);
    letter-spacing: 2px;
    margin-bottom: 8px;
    font-weight: 800;
}

.nav-next::before {
    content: "Siguiente";
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--color-primary);
    letter-spacing: 2px;
    margin-bottom: 8px;
    font-weight: 800;
}

/* El enlace (Título del Post) */
.nav-links a {
    color: var(--color-text-white);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--color-primary);
}

/* Ocultar las flechas feas de WordPress (← / →) */
/* (Hacemos que el texto sea limpio y usamos iconos o el diseño de la caja) */

@media (max-width: 600px) {
    .post-navigation .nav-links {
        grid-template-columns: 1fr; /* En móvil uno sobre otro */
    }
}

/* --- ESTILO BLOQUE DE BÚSQUEDA WP --- */

/* Contenedor del buscador */
.wp-block-search {
    margin-bottom: 20px;
}

/* El campo de texto (Input) */
.wp-block-search__input {
    background-color: #0a0a0a !important; /* Fondo negro profundo */
    color: var(--color-text-white) !important;
    border: 1px solid #222 !important;
    padding: 12px 15px !important;
    border-radius: 5px 0 0 5px !important; /* Redondeado solo a la izquierda */
    outline: none;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

/* El botón de búsqueda */
.wp-block-search__button {
    background-color: var(--color-primary) !important;
    color: #000 !important;
    border: none !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    padding: 10px 20px !important;
    border-radius: 0 5px 5px 0 !important; /* Redondeado solo a la derecha */
    cursor: pointer;
    transition: 0.3s !important;
}

.wp-block-search__button:hover {
    background-color: var(--color-text-white) !important;
    box-shadow: 0 0 15px var(--color-primary);
}

/* Focus en el input */
.wp-block-search__input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: inset 0 0 8px rgba(45, 217, 195, 0.2);
}

/* --- ESTILOS GENERALES DE FORMULARIOS --- */

/* Aplicable a texto, email, password, tel y textareas */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
    background-color: #0d0d0d;
    color: #eee;
    border: 1px solid #252525;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box; /* Asegura que el padding no rompa el ancho */
    transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
    outline: none;
}

/* Placeholder (texto de sugerencia) */
::placeholder {
    color: #555;
    opacity: 1;
}

/* Estado de Enfoque (Focus) */
input:focus, 
textarea:focus, 
select:focus {
    border-color: var(--color-primary);
    background-color: #111;
    box-shadow: 0 0 10px rgba(45, 217, 195, 0.15);
}

/* Estilo para Textareas (áreas de mensaje) */
textarea {
    min-height: 120px;
    resize: vertical; /* Solo permite estirar hacia abajo */
}

/* Estilo para los Labels (Etiquetas) */
label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-text-white);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Botones de formulario generales */
button[type="submit"],
input[type="submit"] {
    background: var(--color-primary);
    color: #000;
    border: none;
    padding: 12px 25px;
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s;
    display: inline-block;
}

button[type="submit"]:hover,
input[type="submit"]:hover {
    filter: brightness(1.2);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(45, 217, 195, 0.3);
}
/* Estilo general para iconos en tu portal */
.fa-solid, .fa-brands, .bx {
    color: var(--color-primary); /* Tu color neón */
    transition: all 0.3s ease;
    vertical-align: middle;
    margin-right: 8px;
}

/* Efecto de brillo al pasar el mouse (Hover) */
a:hover i {
    text-shadow: 0 0 10px var(--color-primary), 0 0 20px var(--color-primary);
    transform: scale(1.2);
}

/* Iconos de redes sociales en el footer */
.social-link i {
    font-size: 1.2rem;
    margin: 0; /* Quitar margen para centrar en el círculo */
}
/* --- ESTILOS DE PÁGINA DE BÚSQUEDA --- */

.search-results-header {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #222;
}

.search-term {
    color: var(--color-primary);
    font-style: italic;
}

.search-count {
    font-size: 0.9rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Grid de resultados */
.search-results-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Tarjeta de resultado individual */
.search-item-card {
    display: grid;
    grid-template-columns: 250px 1fr; /* Imagen a la izquierda, texto a la derecha */
    gap: 25px;
    background: #111;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #222;
    transition: 0.3s;
}

.search-item-card:hover {
    border-color: var(--color-primary);
    transform: translateX(5px);
}

.search-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-item-content {
    padding: 20px;
}

.search-item-cat a {
    font-size: 0.7rem;
    color: var(--color-primary);
    text-transform: uppercase;
    font-weight: 800;
    text-decoration: none;
}

.search-item-title {
    margin: 10px 0;
    font-size: 1.4rem;
}

.search-item-title a {
    color: #fff;
    text-decoration: none;
}

.search-item-excerpt {
    color: #888;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.read-more-btn {
    font-size: 0.75rem;
    font-weight: 900;
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.read-more-btn:hover {
    color: var(--color-primary);
}

/* Paginación */
.pagination-wrapper {
    margin-top: 50px;
}

.pagination .nav-links {
    display: flex;
    gap: 10px;
}

.pagination .page-numbers {
    padding: 8px 15px;
    background: #111;
    border: 1px solid #222;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
}

.pagination .page-numbers.current {
    background: var(--color-primary);
    color: #000;
    font-weight: bold;
}

/* No Results Box */
.no-results-box {
    background: #111;
    padding: 50px;
    text-align: center;
    border-radius: 15px;
    border: 1px dashed #333;
}

/* Responsive móvil */
@media (max-width: 650px) {
    .search-item-card {
        grid-template-columns: 1fr;
    }
    .search-item-thumb {
        height: 200px;
    }
}
/* --- ESTILOS PARA PÁGINAS ESTÁTICAS --- */



.page-header-dark {
    margin-bottom: 40px;
}

.page-neon-title {
    font-size: 2.5rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-text-white);
    margin-bottom: 10px;
    letter-spacing: -1px;
}

.title-underline {
    width: 60px;
    height: 4px;
    background: var(--color-primary);
    border-radius: 2px;
}

/* Imagen destacada en páginas */
.page-thumbnail {
    margin-bottom: 30px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #333;
}

.page-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

/* Cuerpo de texto de la página */
.page-body-text {
    color: #cecece;
    line-height: 1.8;
    font-size: 1.1rem;
}

.page-body-text p {
    margin-bottom: 25px;
}

/* Estilos para listas dentro de páginas */
.page-body-text ul {
    list-style: none;
    padding-left: 20px;
    margin-bottom: 25px;
}

.page-body-text ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
}

.page-body-text ul li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: bold;
}

/* Si quieres una página de ANCHO COMPLETO (sin sidebar) */
.page-template-full-width  {
    grid-template-columns: 1fr;
}

.page-template-full-width .static-page-card {
    max-width: 900px;
    margin: 0 auto;
}

/* --- ESTILOS DE ARCHIVE.PHP --- */

.archive-header-neon {
    margin-bottom: 50px;
    padding: 30px;
    background: linear-gradient(135deg, rgba(45, 217, 195, 0.05) 0%, transparent 100%);
    border-left: 5px solid var(--color-primary);
    border-radius: 0 15px 15px 0;
}

.archive-header-neon .page-title {
    font-size: 2.5rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-text-white);
    margin: 0;
}

/* El texto que dice "Categoría:", "Etiqueta:", etc. */
.archive-header-neon .page-title span {
    color: var(--color-primary);
}

.archive-description {
    margin-top: 10px;
    color: #888;
    font-size: 1.1rem;
}

.archive-stats {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--color-secondary);
    margin-top: 15px;
    font-weight: bold;
}

/* Ajuste de los meta datos en la lista */
.search-item-meta {
    font-size: 0.8rem;
    color: #555;
    margin-bottom: 15px;
    display: flex;
    gap: 15px;
}

.search-item-meta i {
    color: var(--color-primary);
}
/* --- ESTILOS PÁGINA 404 --- */

.error-404-wrapper {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 0;
}

/* Ilustración del DJ Triste */
.sad-dj-visual {
    margin-bottom: 40px;
    position: relative;
}

.headphones-wrapper i {
    font-size: 8rem;
    color: #222; /* Color oscuro/apagado */
    transform: rotate(15deg); /* Auriculares caídos */
    text-shadow: 0 0 20px rgba(0,0,0,0.5);
    transition: 0.5s;
}

.music-note-off {
    position: absolute;
    top: 0;
    right: 35%;
    width: 20px;
    height: 2px;
    background: #444; /* Línea de "apagado" */
    transform: rotate(-45deg);
}

/* Efecto Glitch para el 404 */
.glitch-404 {
    font-size: 6rem;
    font-weight: 900;
    margin: 0;
    line-height: 1;
    color: var(--color-text-white);
    position: relative;
}

.status-badge {
    background: #ff4d4d; /* Rojo de error */
    color: #fff;
    display: inline-block;
    padding: 5px 15px;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 2px;
    border-radius: 4px;
    margin-top: -10px;
    box-shadow: 0 0 15px rgba(255, 77, 77, 0.3);
}

/* Mensajes de texto */
.error-title {
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: 20px;
    text-transform: uppercase;
}

.error-text {
    max-width: 600px;
    margin: 0 auto 30px;
    color: #888;
    line-height: 1.6;
}

/* Formulario de búsqueda en 404 */
.search-box-404 {
    max-width: 450px;
    margin: 0 auto 40px;
}

/* Botón Home Neón */
.btn-neon-home {
    display: inline-block;
    padding: 15px 35px;
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary) !important;
    text-decoration: none;
    font-weight: 900;
    border-radius: 50px;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-neon-home:hover {
    background: var(--color-primary);
    color: #000 !important;
    box-shadow: 0 0 30px var(--color-primary);
    transform: scale(1.05);
}

/* Animación de los auriculares al pasar el mouse */
.error-404-content:hover .headphones-wrapper i {
    transform: rotate(0deg) scale(1.1);
    color: var(--color-secondary);
}
/* --- 404 FULLSCREEN --- */

.bg-black-total {
    background-color: #000 !important;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Evita el scroll si el diseño es exacto */
}

.error-404-fullscreen {
    height: 100vh; /* 100% de la altura de la ventana */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, #111 0%, #000 100%);
}

.error-404-content {
    text-align: center;
    animation: fadeIn 1.5s ease-in-out;
}

/* Animación de entrada suave */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Ajuste del botón para que resalte más en el vacío */
.btn-neon-home {
    margin-top: 30px;
    box-shadow: 0 0 20px rgba(45, 217, 195, 0.2);
}
.tabs-widget {
    overflow: hidden;
    margin-top: 20px;
}

.tabs-header {
    display: flex;
    background: #000;
}

.tab-btn {
    flex: 1;
    padding: 12px;
    border: none;
    background: transparent;
    color: #666;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.3s;
}

.tab-btn.active {
    color: var(--color-primary); /* Tu color neón */
    border-bottom: 2px solid var(--color-primary);
}

.tab-content {
    display: none;
    padding: 10px;
}

.tab-content.active {
    display: block;
}

.small-list-item {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
}

.small-thumb img {
    border-radius: 4px;
    object-fit: cover;
}

.small-content h4 {
    font-size: 0.9rem;
    margin: 5px 0 0;
    line-height: 1.2;
}

.play-icon-mini {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background: rgba(var(--color-secondary), 0.8);
    border-radius: 50%;
    color: #000;
    text-align: center;
    line-height: 24px;
    font-size: 40px;
}

/* Contenedor de la ficha técnica al lado de la imagen */
.music-flex-container {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.music-flex-container .post-thumbnail-wrapper {
    flex: 1;
    max-width: 300px;
    padding: 20px;
}

.track-info-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
}

/* Estilo del Botón de Descarga */
.download-button-main, .wp-block-button__link {
    display: inline-block;
    background: var(--color-neon);
    color: var(--color-bg-black);
    padding: 15px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    border-radius: 4px;
    margin-top: 15px;
}

.download-button-main:hover, .wp-block-button__link:hover {
    background: var(--color-bg-dark);
}

/* Contenedor del Video */
.music-preview-video {
    margin: 30px 0;
}

.iframe-container {
    position: relative;
    padding-bottom: 56.25%; /* Relación 16:9 */
    height: 0;
    overflow: hidden;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Etiquetas del Género */
.cat-links-music {
    background: #00ffcc;
    color: #000;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    margin-right: 10px;
}

/* Responsive básico para la ficha */
@media (max-width: 600px) {
    .music-flex-container {
        flex-direction: column;
    }
    .music-flex-container .post-thumbnail-wrapper {
        max-width: 100%;
    }
}
.tech-data{
    display: flex;
    flex-direction: column;
}
.tech-data p{
    padding: 10px;
    color: var(--color-text-white);
}
.final-post{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.final-post h2{
    color: var(--color-primary);
    margin-bottom: 10px;
    margin-top:20px;
    display: flex;
}
.final-post h2 img{
    width: 35px;
}





.product-card {
    background: #111;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #222;
    transition: 0.3s;
}
.product-card:hover { border-color: #00ffcc; }
.badge-sale {
    position: absolute; top: 10px; right: 10px;
    background: #ff0055; color: white; padding: 2px 8px; font-size: 12px;
}
.btn-add-cart {
    display: block; background: #00ffcc; color: black;
    text-decoration: none; font-weight: bold; padding: 10px;
    border-radius: 4px; font-size: 13px; margin-top: 10px;
}
.price { color: #fff; font-size: 18px; margin: 5px 0; }

/* Contenedor principal del sidebar de _s (usualmente #secondary) */


/* Títulos de los Widgets en Underscores (.widget-title) */
#secondary .widget-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* La línea neón debajo del título */
#secondary .widget-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: #00ffcc; /* Tu color neón */
}

/* La lista de posts recientes (.widget_recent_entries) */
#secondary ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#secondary ul li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    transition: transform 0.2s ease;
    flex-direction: column;
}

#secondary ul li:hover {
    transform: translateX(5px);
}

/* Ajuste para los enlaces de la lista */
#secondary ul li a {
    color: #eee;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.3;
    transition: color 0.2s;
}

#secondary ul li a:hover {
    color: #00ffcc;
}

/* Si añadiste soporte para imágenes en la lista de Underscores */
#secondary ul li img {
    width: 300px;
    height: 120px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #333;
}
.header-cart-wrapper {
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.cart-contents {
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    padding: 8px 12px;
    background: #1a1a1a;
    border-radius: 5px;
    border: 1px solid #333;
    transition: 0.3s;
}

.cart-contents:hover {
    border-color: #00ffcc; /* Tu color neón */
    color: #00ffcc;
}

.cart-contents i {
    font-size: 1.2rem;
}

.cart-count {
    background: #00ffcc;
    color: #000;
    font-size: 11px;
    font-weight: bold;
    height: 18px;
    width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    top: -5px;
    right: -5px;
}

.cart-total {
    font-weight: 600;
    font-size: 14px;
}

/* Ocultar total en móviles para ahorrar espacio */
@media (max-width: 768px) {
    .cart-total {
        display: none;
    }
}

/* 1. AJUSTE DE CONTENEDORES (Para que no se salga de los bordes) */
.single-product .site-main {
    max-width: 1200px; /* Ajusta este valor al ancho de tu menú principal */
    margin: 0 auto;
    padding: 0 20px;
    float: none !important;
}

/* 2. DISEÑO DEL PRODUCTO (Estilo Tech unificado) */
.single-product div.product {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas exactas */
    gap: 40px;
    background: linear-gradient(145deg, #0f0f0f, #1a1a1a);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    margin: 30px 0;
    width: 100% !important; /* No permite que se estire más allá del padre */
    box-sizing: border-box; /* Crucial para que el padding no sume ancho */
}

/* 3. GALERÍA (Lado izquierdo) */
.single-product .woocommerce-product-gallery {
    width: 100% !important;
    max-width: 100% !important;
    position: sticky;
    top: 20px;
    border-radius: 15px;
    overflow: hidden;
    background: #000;
}

/* 4. INFORMACIÓN (Lado derecho) */
.single-product .summary {
    width: 100% !important;
    display: flex;
    flex-direction: column;
}

/* Títulos y Precios */
.single-product .product_title {
    font-size: 2.5rem !important;
    font-weight: 900 !important;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 15px;
}

.single-product .price {
    color: #00ffcc !important;
    font-size: 1.8rem !important;
    font-weight: 700;
    background: rgba(0, 255, 204, 0.1);
    display: inline-block;
    padding: 5px 15px;
    border-radius: 8px;
    margin-bottom: 25px !important;
    width: fit-content;
}

/* Botón Moderno */
.single-product .single_add_to_cart_button {
    background: #00ffcc !important;
    color: #000 !important;
    font-weight: 800 !important;
    padding: 18px 30px !important;
    border-radius: 50px !important;
    text-transform: uppercase;
    transition: all 0.3s ease !important;
}

.single-product .single_add_to_cart_button:hover {
    background: #fff !important;
    transform: translateY(-3px);
}

/* 5. ELIMINAR SIDEBAR Y AJUSTAR PRIMARY */
.single-product #secondary {
    display: none !important; /* Mata el sidebar */
}

.single-product #primary {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

/* 6. RESPONSIVE */
@media (max-width: 900px) {
    .single-product div.product {
        grid-template-columns: 1fr; /* Una sola columna en móvil */
        padding: 20px;
    }
}
/* Contenedor principal de las migas de pan */
.woocommerce-breadcrumb {
    padding: 15px 0;
    margin-bottom: 20px;
    font-size: 13px;
    color: #888; /* Color discreto para no distraer */
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid #222; /* Línea sutil de separación */
}

/* Estilo de los enlaces */
.woocommerce-breadcrumb a {
    color: #eee;
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 500;
}

/* Efecto hover con tu color neón */
.woocommerce-breadcrumb a:hover {
    color: #00ffcc;
}

/* Separador personalizado */
.woocommerce-breadcrumb {
    /* Si WooCommerce usa "/" por defecto, esto ayuda a espaciarlo */
    display: flex;
    gap: 8px;
    align-items: center;
}

/* El último elemento (donde está el usuario ahora) */
.woocommerce-breadcrumb span:last-child, 
.woocommerce-breadcrumb .breadcrumb-last {
    color: #00ffcc; /* Resaltamos la ubicación actual */
    font-weight: bold;
}
/* Contenedor general de avisos */
.woocommerce-notices-wrapper {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
}

/* Estilo base para todos los avisos */
.woocommerce-message, 
.woocommerce-info, 
.woocommerce-error {
    background-color: #1a1a1a !important; /* Fondo oscuro */
    color: #fff !important;
    border: none !important;
    border-left: 5px solid #00ffcc !important; /* Línea neón */
    padding: 20px 25px !important;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px !important;
    font-weight: 500;
}

/* Color específico para Errores */
.woocommerce-error {
    border-left-color: #ff3e3e !important; /* Rojo neón para errores */
    list-style: none !important;
}

/* Botón "Ver Carrito" dentro del aviso */
.woocommerce-message .button, 
.woocommerce-info .button {
    background: #00ffcc !important;
    color: #000 !important;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 12px;
    padding: 10px 20px !important;
    border-radius: 4px;
    transition: 0.3s;
    border: none !important;
    margin-left: 20px;
}

.woocommerce-message .button:hover {
    background: #fff !important;
    box-shadow: 0 0 15px rgba(0, 255, 204, 0.4);
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.woocommerce-notices-wrapper > div {
    animation: slideDown 0.4s ease-out forwards;
}
/* Quitar el icono de lista en errores */
.woocommerce-error li {
    padding-left: 0 !important;
}

/* Hacer que el texto respete el margen neón */
.woocommerce-message::before, 
.woocommerce-info::before, 
.woocommerce-error::before {
    display: none !important; /* Ocultamos el icono nativo de WC */
}
.woocommerce-product-details__short-description{
        line-height: 1.5;
        margin-bottom: 20px;
}

/* Contenedor de cantidad */
.quantity {
    display: flex !important;
    align-items: center;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 50px; /* Estilo píldora */
    padding: 5px;
    width: fit-content;
    margin-bottom: 20px;
}

/* Ocultar flechas nativas del navegador */
.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity input[type=number] {
    -moz-appearance: textfield;
    background: transparent !important;
    border: none !important;
    color: var(--color-neon) !important; /* Tu color neón */
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    width: 40px !important;
    padding: 0 !important;
}

/* Estilo de los botones + y - */
.qty-btn {
    width: 35px;
    height: 35px;
    background: #222 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.qty-btn:hover {
    background: var(--color-neon) !important;
    color: #000 !important;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.4);
}

.qty-btn.minus { margin-right: 5px; }
.qty-btn.plus { margin-left: 5px; }

/* Contenedor principal de la tienda */
.archive.post-type-archive-product .site-main,
.tax-product_cat .site-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Rejilla de productos */
ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    gap: 30px !important;
    padding: 0 !important;
    margin: 40px 0 !important;
}

ul.products::before, ul.products::after { display: none !important; } /* Limpiar floats antiguos */

/* Card del Producto Individual */
ul.products li.product {
    background: #111 !important;
    border: 1px solid #222 !important;
    border-radius: 12px !important;
    padding: 15px !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
    list-style: none !important;
    margin: 0 !important;
    width: 100% !important;
}

ul.products li.product:hover {
    transform: translateY(-10px);
    border-color: var(--color-neon)!important;
    box-shadow: 0 10px 30px rgba(0, 255, 204, 0.15);
}

/* Imagen del producto */
ul.products li.product img {
    border-radius: 8px;
    margin-bottom: 15px !important;
    transition: opacity 0.3s ease;
}

/* Título del producto */
ul.products li.product .woocommerce-loop-product__title {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 0 !important;
    margin: 10px 0 !important;
    line-height: 1.3;
}

/* Precio Neón */
ul.products li.product .price {
    color: var(--color-neon) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    display: block;
    margin-bottom: 15px !important;
}
/* Botón añadir al carrito */
ul.products li.product .button {
    background-color: #1a1a1a !important;
    color: #fff !important;
    border: 1px solid #333 !important;
    border-radius: 4px !important;
    padding: 10px !important;
    font-size: 13px !important;
    text-transform: uppercase;
    font-weight: 700;
    width: 100%;
    text-align: center;
    transition: 0.3s !important;
}

ul.products li.product .button:hover {
    background-color: var(--color-neon) !important;
    color: #000 !important;
    border-color: var(--color-neon) !important;
}

/* Badge de "Oferta" (Sale) */
ul.products li.product .onsale {
    background-color: var(--color-neon) !important;
    color: #000 !important;
    font-weight: 900;
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    min-height: 35px !important;
    min-width: 35px !important;
    line-height: 35px !important;
    border-radius: 50% !important;
}

/* Título de la página de categoría */
.woocommerce-products-header__title {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 900;
    text-transform: uppercase;
    border-left: 5px solid var(--color-neon);
    padding-left: 20px;
    margin: 30px 0;
}

/* Filtro de ordenación (Selector) */
.woocommerce-ordering select {
    background: #1a1a1a;
    color: #fff;
    border: 1px solid #333;
    padding: 8px;
    border-radius: 4px;
    outline: none;
}

.woocommerce-pagination ul {
    border: none !important;
}

.woocommerce-pagination ul li {
    border: none !important;
    margin: 0 5px;
}

.woocommerce-pagination ul li a, 
.woocommerce-pagination ul li span {
    background: #1a1a1a !important;
    color: #fff !important;
    border-radius: 4px !important;
    padding: 10px 15px !important;
}

.woocommerce-pagination ul li span.current {
    background: var(--color-neon);
    color: #000 !important;
}


   /* Caja de Autor */
.autor-box-neon {
    display: flex;
    align-items: center;
    gap: 30px;
    background: #0d0d0d;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #1a1a1a;
    margin: 40px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.autor-avatar img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 2px solid var(--color-neon); /* Azul neón */
    object-fit: cover;
}

.label-author { color: #555; font-size: 0.75rem; text-transform: uppercase; font-weight: bold; }
.autor-info h3 { margin: 5px 0; color: #fff; font-size: 1.4rem; }
.autor-info p { color: #888; font-size: 0.95rem; line-height: 1.5; margin-bottom: 12px; }
.btn-ver-perfil { color: #00d4ff; text-decoration: none; font-weight: bold; font-size: 0.85rem; transition: 0.3s; }
.btn-ver-perfil:hover { color: #fff; text-shadow: 0 0 10px #00d4ff; }

/* Grid Relacionados 2x2 */
.related-posts-section { margin-top: 50px; }
.related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Fuerza 2 columnas */
    gap: 20px;
}

.related-card {
    background: #111;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
    border: 1px solid #222;
}

.related-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-neon);
}

.related-link-wrapper { text-decoration: none; display: flex; flex-direction: column; }

.related-img img {
    width: 100%;
    object-fit: cover;
}

.related-data { padding: 15px; }
.related-data h4 {
    color: #fff;
    font-size: 1rem;
    margin: 0 0 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-data time { color: var(--color-neon); font-size: 0.75rem; }

/* Responsive */
@media (max-width: 768px) {
    .related-grid { grid-template-columns: 1fr; } /* En móviles 1 columna */
    .autor-box-neon { flex-direction: column; text-align: center; }
}
.section-title{
    margin-bottom: 20px;
    border-bottom: aquamarine 3px solid;
    font-size: 2rem;
}

.ad-slot-container {
    margin: 20px auto;
    text-align: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.02); /* Un toque muy leve de fondo */
    border-radius: 8px;
    max-height: 250px; /* Evita saltos de pantalla (Layout Shift) */
    max-width:300px;
}

.ad-slot-container small {
    display: block;
    color: #444;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

/* Ajuste para que el anuncio de Google no desborde en móviles */
.ad-slot-container ins {
    margin: 0 auto !important;
    display: block !important;
    
}


/* --- 2.2. SECCIÓN ENTERTAINMENT (CORREGIDA) --- */
/* --- 2.2. SECCIÓN ENTERTAINMENT --- */
.entertainment-section {
    margin-top: 50px;
    margin-bottom: 50px;
}
.entertainment-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
/* GRID PRINCIPAL
.entertainment-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
} */

/* ESTILOS COLUMNA 1 (GRANDE / OVERLAY) */
.card-overlay-large {
    position: relative;
    min-height: 450px;
    overflow: hidden;
    background: var(--color-bg-black);
    border-radius: 20px;
}
.card-overlay-large .img-container {
    height: 100%;
    width: 100%;
}
.card-overlay-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.card-overlay-large:hover img {
    transform: scale(1.05);
}
.content-overlay h3 {
    font-size: 2rem;
    font-weight: 700;
    margin: 10px 0;
    line-height: 1.1;
}
.content-overlay p {
    font-size: 0.95rem;
    color: #ddd; /* Sigue siendo un gris muy claro, lo dejamos fijo por el degradado */
    margin-top: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ESTILOS COLUMNA 2 (STANDARD) */
.card-standard {
    margin-bottom: 30px;
    
}
.card-standard .img-container {
    height: 180px;
    overflow: hidden;
    position: relative;
    margin-bottom: 12px;
    border-radius: 20px;
}
.card-standard img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-standard h4 {
    font-size: 1.1rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--color-text-dark);
}

/* ESTILOS COLUMNA 3 (SIDEBAR) */
.ad-placeholder-small {
    text-align: center;
    margin-bottom: 30px;
}
.ad-placeholder-small small {
    display: block;
    color: #ccc;
    font-size: 0.6rem;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.ad-box {
    background: var(--color-bg-light);
    height: 200px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 2rem;
    color: var(--color-text-dark);
    border: 1px solid var(--color-border-light);
}
/* Lista pequeña */
.small-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: 15px;
}
.small-item img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    margin-right: 15px;
    flex-shrink: 0;
}
.small-item h5 {
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.3;
}
/* Link Ver Más */
.more-link {
    display: block;
    text-align: right;
    color: var(--color-primary);
    text-transform: uppercase;
    font-weight: 800;
    font-size: 0.8rem;
    text-decoration: none;
    margin-top: 10px;
}
.more-link:hover {
    text-decoration: underline;
}




.ent-col-large { flex: 2;  }
.ent-col-standard { flex: 1.2; min-width: 300px; }
.ent-col-sidebar { flex: 1; min-width: 250px; }

/* Estilo Overlay */
.card-overlay-large { position: relative; overflow: hidden;  }
.card-overlay-large .content-overlay {
    position: absolute; bottom: 0; left: 0; padding: 20px;
    background: linear-gradient(transparent, rgba(0,0,0,0.9));
    color: white; width: 100%;
}

.img-container img { width: 100%; height: auto; object-fit: cover; }

/* Items pequeños del sidebar */
.small-item { display: flex; gap: 10px; margin-bottom: 15px; }
.small-item img { width: 80px; height: 60px; object-fit: cover; border-radius: 4px; }

/* Publicidad */
.ad-box {
    background: #1a1a1a; padding: 20px; text-align: center;
    border: 1px dashed #333; color: #00ffcc; font-weight: bold;
}

@media (max-width: 992px) {
    .entertainment-grid { flex-direction: column; }
    .ent-col-large, .ent-col-standard, .ent-col-sidebar { width: 100%; padding: 20px; }
}
/* --- RESPONSIVE SECCIÓN ENTERTAINMENT --- */
@media (min-width: 1024px) {
    .entertainment-grid {
        grid-template-columns: 2fr 1fr 1fr;
    }
   
    
}
/* Ajustes Responsive para Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .entertainment-grid {
        grid-template-columns: 1fr 1fr; 
    }
    .ent-col-large {
        grid-column: 1 / -1; 
        margin-bottom: 20px;
    }
}

/* --- ARREGLO CARRITO PORTAL DJ --- */

/* ==========================================================================
   ESTILOS PORTAL DJ - CARRITO (WOOCOMMERCE)
   ========================================================================== */

/* 1. Fondo de la tabla y cabeceras */
.woocommerce-cart table.cart {
    background: #111 !important;
    border: 1px solid #333 !important;
    border-radius: 12px;
    overflow: hidden;
}

.woocommerce-cart table.cart thead th {
    background: #000;
    color: #00ffcc; /* Tu color Cyan */
    border-bottom: 2px solid #333;
    padding: 15px;
}

/* 2. Filas de productos */
.woocommerce-cart table.cart td {
    border-bottom: 1px solid #222;
    color: #fff;
    padding: 20px 15px;
}

/* 3. El contenedor de totales (Derecha) */
.cart-collaterals {
    margin-top: 40px;

}

.cart_totals {
    background: #1a1a1a;
    padding: 20px;
    border-radius: 10px;
    width: 100%;
    text-align: center;
}

.cart_totals h2 {

    text-transform: uppercase;
}
.shop_table{
    margin: auto;
    margin-bottom: 20px;
}
.coupon{
     padding: 20px
}
/* 4. EL BOTÓN DE FINALIZAR COMPRA (AHORA SÍ CON ESTILO) */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    background: #00ffcc !important;
    color: #000 !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 5px 15px rgba(0, 210, 255, 0.3);
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background: #fff !important;
    box-shadow: 0 0 25px #00d2ff !important;
    transform: translateY(-3px);
}

/* 5. Inputs de cupón y cantidad */
.woocommerce-cart .quantity input {
    background: #000 !important;
    color: #fff !important;
    border: 1px solid #444 !important;
    padding: 8px !important;
    border-radius: 5px;
}
/* ==========================================================================
   ESTILOS PORTAL DJ - FICHA DE PRODUCTO
   ========================================================================== */

/* 1. Contenedor Principal */
.single-product #primary .product {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 40px;
    color: #fff;
}

/* 2. Galería de Imágenes (Izquierda) */
.single-product .woocommerce-product-gallery {
    flex: 1;
    min-width: 300px;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #333;
}

/* 3. Información del Producto (Derecha) */
.single-product .summary {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
}

/* Título */
.single-product .product_title {
    font-size: 2.5rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    line-height: 1.1;
}

/* Precio */
.single-product .price {
    font-size: 1.8rem !important;
    color: #00ffcc !important; /* Verde Neon */
    font-weight: bold;
    margin-bottom: 20px;
}

/* Descripción corta */
.single-product .woocommerce-product-details__short-description {
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 25px;
    border-left: 3px solid #00ffcc;
    padding-left: 15px;
}

/* 4. Botón Añadir al Carrito */
.single-product button.single_add_to_cart_button {
    background: #00ffcc !important;
    color: #000 !important;
    padding: 15px 30px !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    text-transform: uppercase;
    transition: 0.3s all ease;
    border: none !important;
    cursor: pointer;
}

.single-product button.single_add_to_cart_button:hover {
    background: #fff !important;
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.7);
    transform: translateY(-2px);
}

/* 5. Tabs de Información (Descripción, Valoraciones) */
.woocommerce-tabs {
    width: 100%;
    margin-top: 60px;
    border-top: 1px solid #333;
    padding-top: 30px;
}

.woocommerce-tabs ul.tabs {
    display: flex;
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
    gap: 10px;
}

.woocommerce-tabs ul.tabs li {
    background: #1a1a1a;
    border-radius: 5px;
}

.woocommerce-tabs ul.tabs li a {
    color: #fff;
    padding: 10px 20px;
    display: block;
    text-decoration: none;
}

.woocommerce-tabs ul.tabs li.active {
    background: #00ffcc;
}

.woocommerce-tabs ul.tabs li.active a {
    color: #000;
}

.woocommerce-Tabs-panel {
    background: #111;
    padding: 20px;
    border-radius: 10px;
    color: #ccc;
}

/* Ajuste móvil */
@media (max-width: 768px) {
    .single-product #primary .product {
        flex-direction: column;
    }
	
}

/* ==========================================================================
   ESTILOS PORTAL DJ - FINALIZAR COMPRA (CHECKOUT)
   ========================================================================== */

/* 1. Contenedor General */
.woocommerce-checkout #primary {
    color: #ffffff;
    margin-top: 40px;
    margin-bottom: 80px;
}

/* 2. Títulos de secciones */
.woocommerce-checkout h3 {
    color: #00ffcc; /* Nuevo Neón Verde */
    text-transform: uppercase;
    font-size: 1.4rem;
    margin-bottom: 25px;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
}

/* 3. Estilo de los Campos del Formulario (Inputs) */
.woocommerce-checkout .form-row input.input-text, 
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .select2-container--default .select2-selection--single {
    background-color: #1a1a1a !important;
    border: 1px solid #444 !important;
    color: #fff !important;
    padding: 12px 15px !important;
    border-radius: 8px !important;
    width: 100%;
    transition: border-color 0.3s ease;
    height: 60px;
}

.woocommerce-checkout .form-row input.input-text:focus {
    border-color: #00ffcc !important;
    outline: none;
    box-shadow: 0 0 8px rgba(0, 255, 204, 0.2);
}

/* 4. Revisión del Pedido (La tabla de la derecha/abajo) */
#order_review_heading, 
#order_review {
    background: #111;
    padding: 25px;
    border-radius: 15px;
    border: 1px solid #333;
}

.woocommerce-checkout-review-order-table {
    border-collapse: collapse !important;
}

.woocommerce-checkout-review-order-table th, 
.woocommerce-checkout-review-order-table td {
    border-bottom: 1px solid #222 !important;
    padding: 15px 10px !important;
    color: #ccc;
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
    color: #00ffcc !important;
    font-size: 1.2rem;
    font-weight: bold;
}

/* 5. Métodos de Pago */
#payment {
    background: #111 !important;
    border-radius: 12px !important;
    border: 1px solid #222 !important;
    padding: 20px !important;
}

#payment ul.payment_methods {
    border-bottom: 1px solid #333 !important;
    padding-bottom: 20px !important;
}

#payment div.payment_box {
    background: #1a1a1a !important;
    color: #aaa !important;
    border-radius: 5px;
}

/* 6. EL BOTÓN DE REALIZAR PEDIDO (EL FINAL) */
.woocommerce-checkout #place_order {
    background-color: #00ffcc !important; /* Nuevo Neón Verde */
    color: #000 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    padding: 20px !important;
    border-radius: 10px !important;
    font-size: 1.2rem !important;
    letter-spacing: 1px;
    width: 100% !important;
    margin-top: 20px;
    border: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer;
}

.woocommerce-checkout #place_order:hover {
    background-color: #fff !important;
    box-shadow: 0 0 25px rgba(0, 255, 204, 0.8) !important;
    transform: translateY(-2px);
}

/* 7. Etiquetas (Labels) */
.woocommerce-checkout label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #eee;
}
.payment_method_ppcp-gateway label img{
        max-width: 100px;
}
/* 8. Mensajes de error */
.woocommerce-error, .woocommerce-message, .woocommerce-info {
    background: #1a1a1a !important;
    color: #fff !important;
    border-top: 3px solid #00ffcc !important;
    border-radius: 5px;
    display: block;
}

/* ==========================================================================
   ESTILOS PARA EL CONTENIDO (SINGLE PAGE)
   ========================================================================== */

.entry-content {
    color: #e0e0e0;
    line-height: 1.8; /* Espaciado entre líneas para lectura cómoda */
    font-size: 1.1rem;
    max-width: 850px; /* Evita líneas demasiado largas en PC */
    margin: 0 auto;
   
}

/* Encabezados dentro del contenido */
.entry-content h1, 
.entry-content h2, 
.entry-content h3 {
    color: #00ffcc; /* Tu Verde Neón */
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.entry-content h2 { font-size: 2rem; border-left: 4px solid #00ffcc; padding-left: 15px; }
.entry-content h3 { font-size: 1.5rem; }

/* Párrafos */
.entry-content p {
    margin-bottom: 1.5em;
}

/* Enlaces dentro del texto */
.entry-content a {
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 255, 204, 0.3);
    transition: all 0.3s ease;
}

.entry-content a:hover {
    color: #fff;
    border-bottom-color: #fff;
    text-shadow: 0 0 8px #00ffcc;
}

/* Listas */
.entry-content ul, 
.entry-content ol {
    margin-bottom: 1.5em;
    padding-left: 20px;
}

.entry-content li {
    margin-bottom: 0.5em;
}

.entry-content ul li::marker {
    color: #00ffcc; /* Balas color neón */
}

/* Citas (Blockquotes) - Ideal para frases de DJs */
.entry-content blockquote {
    background: #111;
    border-left: 5px solid #00ffcc;
    margin: 30px 0;
    padding: 20px 30px;
    font-style: italic;
    color: #fff;
    border-radius: 0 10px 10px 0;
}

/* Imágenes dentro del contenido */
.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 20px 0;
    border: 1px solid #333;
}

/* Tablas (por si pones listas de tracks o precios) */
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: #0a0a0a;
}

.entry-content th, 
.entry-content td {
    padding: 12px;
    border: 1px solid #222;
    text-align: left;
}

.entry-content th {
    background: #1a1a1a;
    color: #00ffcc;
}

/* Separador horizontal */
.entry-content hr {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #00ffcc, transparent);
    margin: 40px 0;
}