/*
Theme Name: La Fabrica de Musica Theme
Author: Tu Nombre
Version: 1.4
*/

/* --- 0. RESETEO GENERAL --- */
html,
body,
div,
span,
h1,
h2,
h3,
p,
a,
ul,
li,
form,
label,
input,
button,
textarea,
select,
img {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
}

body {
    line-height: 1.5;
}

ul {
    list-style: none;
}

/* --- 1. Importación de Fuentes y Variables de Color --- */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');

:root {
    --color-background: #0d0d0f;
    --color-text: #e0e0e0;
    --color-green-neon: #39ff14;
    --color-green-dark: #22c55e;
    --color-yellow-neon: #fcee0a;
    --color-orange-neon: #ff8c00;
    --color-grid: rgba(57, 255, 20, 0.15);
    --color-gray-light: #9ca3af;
    --font-orbitron: 'Orbitron', sans-serif;
}

/* --- 2. Estilos Base --- */
body {
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-orbitron);
    font-weight: 900;
    color: white;
}

a {
    color: var(--color-green-neon);
    text-decoration: none;
}

a:hover {
    text-shadow: 0 0 5px var(--color-green-neon);
}

.site-content {
    padding-top: 80px;
}

/* --- 3. Estructura y Efectos --- */
.section-fullwidth {
    width: 100%;
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.section-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
    z-index: 2;
}

.cyber-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: center;
    animation: pan-grid 20s linear infinite;
}

@keyframes pan-grid {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 40px 40px;
    }
}

.glass-effect {
    background: rgba(10, 25, 10, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(57, 255, 20, 0.2);
    border-radius: 1rem;
}

.neon-text-green {
    text-shadow: 0 0 8px var(--color-green-neon), 0 0 12px var(--color-green-neon);
}

.neon-border-green {
    box-shadow: 0 0 10px var(--color-green-neon), inset 0 0 10px var(--color-green-neon);
    transition: box-shadow 0.3s ease;
}

.neon-border-green:hover {
    box-shadow: 0 0 20px var(--color-green-neon), inset 0 0 20px var(--color-green-neon);
}

.gradient-text-yellow {
    background: linear-gradient(90deg, var(--color-yellow-neon), var(--color-orange-neon));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.gradient-text-green {
    background: linear-gradient(90deg, var(--color-green-neon), var(--color-green-dark));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

.gradient-text-purple {
    background: linear-gradient(90deg, #c471ed, #f64f59);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 10px var(--color-green-neon);
    }

    50% {
        box-shadow: 0 0 30px var(--color-green-neon);
    }
}

.pulse-green {
    animation: pulse 2.5s infinite ease-in-out;
}

/* --- 4. Header --- */
.site-header {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(57, 255, 20, 0.1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    background: rgba(13, 13, 15, 0.8);
    backdrop-filter: blur(10px);
    transition: top 0.3s ease;
}

body.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px;
    }
}

.header-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-logo-link {
    display: flex;
    align-items: center;
}

.custom-logo {
    max-height: 50px;
    width: auto;
}

.main-navigation .primary-menu>ul, .main-navigation .primary-menu {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation li a {
    color: var(--color-text);
    font-weight: bold;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease-in-out;
}

.main-navigation li a:hover,
.main-navigation li.current-menu-item>a {
    color: var(--color-background);
    background: linear-gradient(90deg, var(--color-green-neon), var(--color-green-dark));
    box-shadow: 0 0 10px var(--color-green-neon);
    text-shadow: none;
}

.button-register {
    background: linear-gradient(90deg, var(--color-green-neon), var(--color-green-dark));
    color: var(--color-background);
    font-weight: bold;
    padding: 0.6rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 0 8px var(--color-green-neon);
}

.button-register:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 15px var(--color-green-neon);
}

.menu-toggle {
    display: none;
}

/* --- 5. Footer --- */
.site-footer {
    background-color: #0a0a0c;
    padding: 4rem 0 2rem 0;
    text-align: center;
    border-top: 1px solid rgba(57, 255, 20, 0.1);
}

.footer-container {
    max-width: 900px;
    margin: 0 auto 3rem auto;
    padding: 0 1.5rem;
}

.footer-cta h2 {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 1rem;
}

.footer-cta p {
    font-size: 1.1rem;
    color: var(--color-gray-light);
    margin-bottom: 2rem;
}

.footer-buttons {
    display: flex;
    justify-content: center;
}

ul.footer-menu-list {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

ul.footer-menu-list>li.menu-item[class*="button-"]>a {
    display: inline-block;
    font-weight: bold;
    padding: 0.8rem 2rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

ul.footer-menu-list>li.button-primary>a {
    background: linear-gradient(90deg, var(--color-green-neon), var(--color-green-dark));
    color: var(--color-background);
    box-shadow: 0 0 8px var(--color-green-neon);
}

ul.footer-menu-list>li.button-primary:hover>a {
    transform: translateY(-2px);
    box-shadow: 0 0 15px var(--color-green-neon);
    color: var(--color-background);
}

ul.footer-menu-list>li.button-secondary>a {
    background-color: transparent;
    border: 1px solid var(--color-green-neon);
    color: var(--color-green-neon);
    box-shadow: 0 0 5px var(--color-green-neon);
}

ul.footer-menu-list>li.button-secondary:hover>a {
    background-color: var(--color-green-neon);
    color: var(--color-background);
    box-shadow: 0 0 10px var(--color-green-neon);
}

.footer-bottom {
    margin-top: 3rem;
    border-top: 1px solid rgba(57, 255, 20, 0.05);
    padding-top: 1.5rem;
    font-size: 0.9rem;
    color: var(--color-gray-light);
}

/* --- 6. Plantilla Concurso --- */
.hero-section {
    text-align: center;
    border-bottom: 1px solid var(--color-grid);
}

.hero-section h1 {
    font-size: clamp(3rem, 10vw, 5rem);
    margin-bottom: 1.5rem;
}

.hero-section .tagline {
    font-size: 1.25rem;
    color: #aaa;
    max-width: 600px;
    margin: 0 auto;
}

.trophy-icon {
    width: 6rem;
    height: 6rem;
    background: radial-gradient(circle, var(--color-orange-neon), var(--color-yellow-neon));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem auto;
}

.trophy-icon .emoji {
    height: 3rem;
    width: auto;
}

/* Estilo para el emoji de trofeo */
.active-events-section {
    background: #0a0a0c;
}

.evento-box {
    padding: 2.5rem;
    text-align: center;
}

.evento-activo {
    margin-bottom: 2rem;
}

.evento-box h2 {
    font-size: 2.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
}

.evento-box p {
    font-size: 1.1rem;
    color: #aaa;
    margin-top: 0;
}

#countdown {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 2rem 0;
    font-size: 0.9rem;
    color: #aaa;
}

#countdown>div {
    text-align: center;
}

#countdown span {
    display: block;
    font-size: 3rem;
    font-family: var(--font-orbitron);
    color: white;
    margin-bottom: 0.5rem;
}

.static-content-section {
    background: var(--color-background);
    padding: 4rem 0;
}

.static-content-section h2 {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 3rem;
}

.rules-section {
    padding: 3rem 0;
}

.rules-box {
    padding: 2.5rem;
    text-align: center;
}

.rules-box h2 {
    margin-top: 0;
    margin-bottom: 2.5rem;
    font-size: 2.5rem;
}

.rules-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: left;
}

.rule-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.rule-number {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    background-color: var(--color-green-neon);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rule-number span {
    color: var(--color-background);
    font-weight: bold;
    font-family: var(--font-orbitron);
}

.rule-text {
    margin: 0;
    padding-top: 0.2rem;
    color: var(--color-text);
    font-size: 1.1rem;
}

.historico-section {
    background: #0a0a0c;
}

.historico-section h2 {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 3rem;
}

.evento-historico-item {
    background: rgba(255, 255, 255, 0.02);
    padding: 1.5rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--color-grid);
}

.evento-historico-item .emoji {
    height: 1em;
    width: 1em;
    vertical-align: -0.1em;
}

/* Estilo para emojis en texto */
.paginacion {
    text-align: center;
    margin-top: 3rem;
}

.paginacion .page-numbers {
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-green-neon);
    margin: 0 0.25rem;
    border-radius: 0.25rem;
}

.paginacion .page-numbers.current,
.paginacion .page-numbers:hover {
    background: var(--color-green-neon);
    color: var(--color-background);
}

.cta-button {
    font-weight: bold;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(90deg, var(--color-green-neon), var(--color-green-dark));
    color: var(--color-background) !important;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s;
    border: none;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
}

.cta-button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px var(--color-green-neon);
}

.cta-button .emoji {
    height: 1.2em;
    width: auto;
}

/* Estilo para emoji en botón */

/* --- 7. Página de Artistas (VERSIÓN CORREGIDA) --- */
.hero-section-artistas { text-align: center; border-bottom: 1px solid rgba(196, 113, 237, 0.2); }
.filtros-section { padding: 1.5rem 0; background: #0a0a0c; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.filtros-container { max-width: 1100px; margin: 0 auto; padding: 0 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.filtro-genero { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.filtro-boton { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: var(--color-text); padding: 0.4rem 0.8rem; border-radius: 0.25rem; font-size: 0.9rem; }
.filtro-boton:hover, .filtro-boton.active { background: var(--color-green-neon); color: var(--color-background); text-shadow: none; border-color: var(--color-green-neon); }
.search-field { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: white; padding: 0.5rem 1rem; border-radius: 0.25rem; }
.artistas-grid-section { padding: 4rem 0; }
.artistas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.artista-card { padding: 1.5rem; display: flex; flex-direction: column; transition: all 0.3s ease; }
.artista-card:hover { transform: translateY(-5px); border-color: rgba(57, 255, 20, 0.5); }
.card-header { text-align: center; margin-bottom: 1rem; }
.artista-imagen { width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 1rem auto; overflow: hidden; background: #1a1a1a; }
.artista-imagen img { width: 100%; height: 100%; object-fit: cover; }
.artista-nombre a { font-size: 1.5rem; color: white; text-decoration: none; }
.artista-tagline { color: var(--color-gray-light); font-size: 0.95rem; line-height: 1.5; flex-grow: 1; }
.artista-stats { display: flex; justify-content: space-between; padding: 1rem 0; margin: 1rem 0; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); }
.artista-stats > div { text-align: center; }
.artista-stats span { font-size: 0.8rem; color: var(--color-gray-light); }
.artista-stats strong { display: block; font-size: 1.1rem; color: white; }

/* --- INICIO DE LA CORRECCIÓN DE BOTONES DE ARTISTA --- */
.artista-actions {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center; /* Clave para la alineación vertical */
    gap: 1rem;
}

/* Estilos base compartidos por ambos botones */
.artista-actions .cta-button,
.artista-actions .button-secondary-inline {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
}

/* Estilos específicos del botón de Reproducir */
.artista-actions .cta-button {
    background: linear-gradient(90deg, var(--color-green-neon), var(--color-green-dark));
    color: var(--color-background) !important;
    border: none;
    font-family: inherit;
    cursor: pointer;
}
.artista-actions .cta-button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px var(--color-green-neon);
}

/* Estilos específicos del botón de Ver Perfil */
.artista-actions .button-secondary-inline {
    background-color: transparent;
    border: 1px solid var(--color-green-neon);
    color: var(--color-green-neon);
}
.artista-actions .button-secondary-inline:hover {
    background-color: var(--color-green-neon);
    color: var(--color-background);
    text-shadow: none;
}
/* --- FIN DE LA CORRECCIÓN --- */
/* --- 8. Modal de Video --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.85);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    cursor: pointer;
}

.modal-overlay.is-visible {
    display: flex;
}

.modal-content {
    position: relative;
    background-color: var(--color-background);
    border: 1px solid var(--color-grid);
    border-radius: 0.5rem;
    padding: 1rem;
    width: 90%;
    max-width: 900px;
    cursor: default;
    box-shadow: 0 0 30px var(--color-green-neon);
}

.modal-close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 35px;
    height: 35px;
    background-color: white;
    color: black;
    border: none;
    border-radius: 50%;
    font-size: 2rem;
    line-height: 35px;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
}

.video-container {
    position: relative;
    padding-top: 56.25%;
    height: 0;
    overflow: hidden;
}

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

/* --- 9. Reseteo de Menús de WordPress --- */
.main-navigation ul.menu>li.menu-item,
ul.footer-menu-list>li.menu-item {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    list-style-type: none !important;
}

/* --- 10. Responsive Design (Media Queries) --- */
@media (max-width: 900px) {
    .header-actions {
        display: none;
    }

    .main-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--color-background);
        padding: 1rem 0;
        border-bottom: 1px solid var(--color-grid);
    }

    .main-navigation.toggled {
        display: block;
    }

    .main-navigation ul.primary-menu {
        flex-direction: column;
        text-align: center;
    }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 5px;
        background: transparent;
        border: none;
        cursor: pointer;
    }

    .menu-toggle .line {
        width: 25px;
        height: 3px;
        background-color: white;
        transition: all 0.3s ease;
    }

    .menu-toggle.toggled .line:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .menu-toggle.toggled .line:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.toggled .line:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .hero-section h1,
    .hero-section-artistas h1 {
        font-size: 3rem;
    }

    .artistas-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #countdown {
        flex-direction: column;
        gap: 1rem;
    }

    .filtros-container {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}

@media (max-width: 600px) {
    .artistas-grid {
        grid-template-columns: 1fr;
    }

    ul.footer-menu-list {
        flex-direction: column;
    }

    .header-container {
        padding: 0 1rem;
    }

    .section-container {
        padding: 0 0.75rem;
    }
}

/* --- 13. Estilos de la Página de Artista Individual --- */

.artista-hero { background: #111; padding: 3rem 0; text-align: center; border-bottom: 1px solid var(--color-grid); }
.artista-hero-avatar { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; margin: 0 auto 1.5rem auto; border: 4px solid var(--color-green-neon); }
.artista-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.artista-hero-nombre { font-size: 3.5rem; }
.artista-hero-tagline { font-size: 1.2rem; color: var(--color-gray-light); margin-top: 0.5rem; }
@media (min-width: 768px) {
    .artista-hero-content { display: flex; text-align: left; align-items: center; gap: 2rem; }
    .artista-hero-avatar { margin: 0; }
}

.artista-main-content { padding: 3rem 0; }
.artista-layout-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 900px) {
    .artista-layout-grid { grid-template-columns: 2fr 1fr; }
}

.artista-columna-principal h2 { font-size: 2rem; margin-bottom: 1.5rem; border-left: 4px solid var(--color-green-neon); padding-left: 1rem; }
.cancion-destacada { margin-bottom: 3rem; }
.artista-biografia p { line-height: 1.7; margin-bottom: 1rem; }

.canales-plataformas { background: rgba(255,255,255,0.03); padding: 1.5rem; border-radius: 0.5rem; }
.canales-plataformas h3 { font-size: 1.5rem; margin-top: 0; margin-bottom: 1.5rem; }
.canales-plataformas ul { display: flex; flex-direction: column; gap: 1rem; }
.canales-plataformas a { display: flex; align-items: center; gap: 1rem; background: rgba(255,255,255,0.05); padding: 0.75rem; border-radius: 0.25rem; transition: background 0.3s; }
.canales-plataformas a:hover { background: rgba(255,255,255,0.1); }
.canal-icono { width: 24px; height: 24px; }

.musica-destacada-section { background: #0a0a0c; border-top: 1px solid var(--color-grid); padding-top: 4rem; padding-bottom: 4rem; }
.musica-destacada-section h2 { font-size: 2.5rem; text-align: center; margin-bottom: 2rem; }
.musica-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Aumento el tamaño mínimo */ gap: 1.5rem; }

/* Nuevo contenedor para videos responsivos */
.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    overflow: hidden;
    background-color: #000; /* Fondo negro mientras carga o si falla */
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.cancion-card.video-card { /* Añadimos la clase video-card aquí para usar el glass-effect */
    /* padding: 1.5rem; Eliminamos padding si el iframe ocupa todo el espacio */
    padding: 0; /* No necesitamos padding en la tarjeta si el iframe ya lo tiene */
    border-radius: 0.5rem; /* El border-radius ya lo tenía glass-effect, pero lo reafirmo */
    overflow: hidden; /* Asegura que el iframe respete el border-radius */
    display: flex; /* Para organizar el título debajo del video */
    flex-direction: column;
    justify-content: space-between; /* Empuja el título hacia abajo si el video es más grande */
}

/* El título ahora está fuera del contenedor de video, directamente en la tarjeta */
.cancion-card-title {
    font-size: 1.1rem;
    margin-top: 1rem; /* Espacio entre el video y el título */
    padding: 0 1rem 1rem 1rem; /* Padding dentro de la tarjeta para el título */
    text-align: center; /* Centramos el título */
    color: var(--color-text);
}
.cancion-card-title a {
    color: var(--color-text); /* Aseguramos que el color del enlace sea visible */
    text-decoration: none;
}
.cancion-card-title a:hover {
    color: var(--color-green-neon);
    text-shadow: 0 0 5px var(--color-green-neon);
}


/* -- ORIGINALMENTE ASI ESTABA -- */
/* .cancion-card-thumbnail { display: block; position: relative; overflow: hidden; border-radius: 0.5rem; } */
/* .cancion-card-thumbnail img { width: 100%; display: block; transition: transform 0.3s; } */
/* .cancion-card-thumbnail:hover img { transform: scale(1.1); } */
/* .play-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); color: white; font-size: 3rem; opacity: 0; transition: opacity 0.3s; } */
/* .cancion-card-thumbnail:hover .play-icon { opacity: 1; } */
/* .cancion-card-title { font-size: 1.1rem; margin-top: 0.75rem; } */
/* .cancion-card-title a { color: white; } */


.ver-mas-container { text-align: center; margin-top: 3rem; }

/* --- 14. Estilos de la Página de Inicio (front-page.php) --- */

.stats-bar-section {
    background: #0a0a0c;
    padding: 2rem 0;
}
.stats-bar {
    display: flex;
    justify-content: space-around;
    text-align: center;
}
.stats-bar strong {
    display: block;
    font-size: 2rem;
    font-family: var(--font-orbitron);
    color: var(--color-green-neon);
}
.stats-bar span {
    font-size: 0.9rem;
    color: var(--color-gray-light);
}

.features-section {
    text-align: center;
}
.section-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.section-subtitle {
    max-width: 600px;
    margin: 0 auto 3rem auto;
    color: var(--color-gray-light);
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.feature-card {
    padding: 2rem;
}
.feature-card h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.banners-section {
    padding: 0; /* Sin padding para que los banners sean de borde a borde */
}
.banner-item img {
    width: 100%;
    display: block; /* Elimina espacio extra debajo de la imagen */
}

.home-cta-section {
    text-align: center;
    background: #0a0a0c;
}
.home-cta-section .trophy-icon {
    margin-bottom: 1.5rem;
}
.home-cta-section h2 {
    font-size: 2.5rem;
}
.home-cta-section p {
    max-width: 600px;
    margin: 1rem auto 2rem auto;
    color: var(--color-gray-light);
}

/* Responsive para el home */
@media (max-width: 768px) {
    .stats-bar {
        flex-direction: column;
        gap: 2rem;
    }
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 500px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}

/* --- 15. Estilos para el Slider de Banners (Swiper.js) --- */

.banners-section {
    padding: 0;
    background-color: #000;
}

.banner-slider {
    width: 100%;
    height: auto;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Estilo para las flechas de navegación */
.swiper-button-next,
.swiper-button-prev {
    color: var(--color-green-neon) !important;
    transition: all 0.3s ease;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
    transform: scale(1.2);
    text-shadow: 0 0 10px var(--color-green-neon);
}

/* Estilo para los puntos de paginación */
.swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.5) !important;
}

.swiper-pagination-bullet-active {
    background: var(--color-green-neon) !important;
    box-shadow: 0 0 10px var(--color-green-neon);
}

/* --- 14. Estilos de la Página de Canciones por Género --- */

.canciones-por-genero-section {
    padding: 3rem 0;
}

.page-header {
    text-align: center;
    margin-bottom: 3rem;
}
.page-title {
    font-size: 3rem;
}
.page-description {
    font-size: 1.2rem;
    color: var(--color-gray-light);
    margin-top: 0.5rem;
}

/* Estilos para la navegación de TABS */
.generos-tabs-nav {
    border-bottom: 1px solid var(--color-grid);
    margin-bottom: 2rem;
}
.generos-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.generos-tabs a {
    display: block;
    padding: 0.75rem 1.25rem;
    color: var(--color-gray-light);
    text-decoration: none;
    font-size: 1rem;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}
.generos-tabs li.active a,
.generos-tabs a:hover {
    color: #fff;
    border-bottom-color: var(--color-green-neon);
}

/* Estilos para los paneles de contenido */
.panel-contenido {
    display: none; /* Ocultos por defecto */
}
.panel-contenido.active {
    display: block; /* El activo se muestra */
}

/* --- ESTILOS COMPLETOS PARA LA PÁGINA DE CANCIONES POR GÉNERO --- */

/* A. Cabecera y Título de la Página */
/* ========================================================================== */
.canciones-por-genero-section {
    padding: 3rem 0;
}

.page-header {
    text-align: center;
    margin-bottom: 3rem;
}

.page-title {
    font-size: 3rem;
}

.page-description {
    font-size: 1.2rem;
    color: var(--color-gray-light);
    margin-top: 0.5rem;
}

/* B. Navegación por Pestañas (Tabs) */
/* ========================================================================== */
.generos-tabs-nav {
    /* Le decimos que si el contenido se desborda en el eje X, muestre un scroll */
    overflow-x: auto;
    
    /* Evita que aparezca una barra de scroll vertical innecesaria */
    overflow-y: hidden;
    
    /* Truco para ocultar la barra de scroll por defecto en algunos navegadores */
    -ms-overflow-style: none;  /* IE y Edge */
    scrollbar-width: none;  /* Firefox */

    border-bottom: 1px solid var(--color-grid);
    margin-bottom: 2rem;
    
    /* MEJORA PRO: Hacemos que el scroll sea "magnético" */
    scroll-snap-type: x mandatory;
}
.generos-tabs-nav::-webkit-scrollbar {
    display: none;
}

.generos-tabs {
    display: flex; /* Cambiamos a flex para que se alinee horizontalmente */
    flex-wrap: nowrap; /* ¡CRÍTICO! Evita que los tabs salten a la siguiente línea */
    
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.generos-tabs li {
    flex-shrink: 0; /* Evita que los tabs se encojan para caber */
    
    /* MEJORA PRO: Define dónde debe "frenar" el scroll magnético */
    scroll-snap-align: start;
}
.generos-tabs a {
    display: block;
    padding: 0.75rem 1.25rem;
    color: var(--color-gray-light);
    text-decoration: none;
    font-size: 1rem;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    white-space: nowrap; /* Asegura que nombres largos no se rompan */
}

.generos-tabs li.active a,
.generos-tabs a:hover {
    color: #fff;
    border-bottom-color: var(--color-green-neon);
}

/* C. Paneles de Contenido */
/* ========================================================================== */
.panel-contenido {
    display: none; /* Ocultos por defecto */
}

.panel-contenido.active {
    display: block; /* El activo se muestra */
}

/* D. Parrilla de Canciones (Grid) */
/* ========================================================================== */
.musica-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* E. Tarjeta de Canción Individual (Card) - ¡LA SECCIÓN CRÍTICA! */
/* ========================================================================== */

/* Estilo base para el efecto "glass" */
.glass-effect {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
}

.cancion-card.video-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.video-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #000;
}

/* El placeholder que contiene la imagen y el botón de play */
.video-placeholder {
    display: block !important;
    cursor: pointer;
    overflow: hidden;
    width: 100%;
    background-color: #000; /* Fondo por si la imagen tarda */
    
    /* REGLAS CRÍTICAS: Anulan los estilos conflictivos de tu tema */
    height: 0 !important;
    padding: 0 !important;
    padding-top: 56.25% !important; /* FUERZA el aspect ratio 16:9 */
}

/* La imagen dentro del placeholder */
.video-placeholder img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; /* Capa 1: La imagen */
    transition: transform 0.3s ease;
}

/* El botón de play encima de la imagen */
.play-button-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    z-index: 2; /* Capa 2: El botón, encima de la imagen */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
    transition: background-color 0.3s ease;
}

/* Efectos visuales al pasar el ratón */
.video-placeholder:hover img {
    transform: scale(1.05);
}

.video-placeholder:hover .play-button-overlay {
    background-color: rgba(0, 255, 135, 0.7);
}

/* El iframe cuando ya está cargado */
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Información debajo del video */
.cancion-card-info {
    padding: 1rem;
    text-align: center;
    flex-grow: 1;
}

.cancion-card-title {
    font-size: 1.1rem;
    margin: 0 0 0.25rem 0;
    color: var(--color-text);
}

.cancion-card-artista a {
    color: var(--color-gray-light);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.cancion-card-artista a:hover {
    color: var(--color-green-neon);
}