/* 
 * Main CSS file for MAMBO Creatives
 * This file includes the main styles for the website
 */

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body {
    font-family: 'Aeonik', Arial, sans-serif;
    overflow-x: hidden;
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

/* Site Container */
.site-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* Logo */
.logo {
    position: absolute;
    top: 40px;
    left: 40px;
    z-index: 100;
}

.logo img {
    height: 45px;
    position: fixed;
}

/* Contact Button */
.contact-button {
    position: absolute;
    top: 50px;
    right: 40px;
    z-index: 100;
}

.contact-button a {
    margin-right: 32px;
    font-size: 30px;
    font-weight: 500;
    color: black;
    text-decoration: none;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.contact-button a:hover {
    opacity: 0.7;
}

/* Main Navigation */
.main-nav {
    position: absolute;
    top: 50px;
    /* Alinear con el logo y contacto */
    left: 0;
    width: 100%;
    z-index: 100;
}

.nav-menu {
    display: flex;
    flex-direction: row;
    gap: 96px;
    align-items: flex-start;
}

.nav-item {
    margin-bottom: 0;
    position: relative;
    transform: translateY(0);
    transition: transform 0.4s ease-in-out;
}

.nav-link {
    font-size: 25px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: opacity 0.3s ease;
    color: white;
    text-decoration: none;
    display: inline-block;
}

.nav-link:hover {
    opacity: 0.7;
}

/* Submenu */
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateY(10px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    z-index: 101;
    padding-top: 20px;
    background-color: transparent;
    min-width: 220px;
}

.nav-item:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.submenu-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.submenu-simple {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 5px;
}

.submenu-rows {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.submenu-row {
    display: grid;
    grid-template-columns: repeat(5, auto);
    gap: 40px;
    margin-bottom: 5px;
    white-space: nowrap;
}

.submenu-item {
    margin-bottom: 10px;
}

.submenu-item h3 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 0;
    cursor: pointer;
    transition: opacity 0.3s;
    white-space: nowrap;
}

.submenu-item h3:hover {
    opacity: 0.7;
}

.submenu-item p {
    font-size: 18px;
    opacity: 0.7;
    margin-top: 3px;
    white-space: nowrap;
    color: white;
}

.download-roster-container {
    position: relative;
    clear: both;
    margin-top: 20px;
    padding-left: 15px;
    text-align: left;
    z-index: 102;
}

.download-link {
    float: inline-end;
    color: white;
    text-decoration: none;
    font-size: 15px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.download-link:hover {
    opacity: 1;
}

/* Background Container */
.background-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.background.active {
    opacity: 1;
}

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

/* Video Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

/* 
  CSS ACTUALIZADO PARA VIDEO MODAL - SIN RECORTES
  
  Estas actualizaciones deben agregarse/reemplazar en static/css/main.css 
*/

/* Video Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

.video-container {
    position: relative;
    max-width: 580px;
    max-height: 90vh;
    margin: 0 auto;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    overflow: hidden;
    background-color: #000;
}

/* Asegura que el video se muestre completo sin recortes */
#intro-video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    background-color: #000;
}

/* Botón para cerrar el video */
.close-video-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    transition: background-color 0.3s;
}

.close-video-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

@media (max-width: 768px) {
    .logo {
        padding-left: 7px;
    }

    .mobile-menu-btn {
        top: 20px;
        right: 20px;
    }

    .mobile-menu {
        padding-top: 80px;
    }

    .mobile-nav {
        padding-left: 20px;

    }
}

/* Media queries actualizados para diferentes tamaños de pantalla */
@media (max-width: 1440px) {
    .video-container {
        width: 75%;
    }

    .contact-button a {
        font-size: 27px;
        margin-right: 27px;
    }
}

@media (max-width: 992px) {
    .video-container {
        width: 85%;
    }
}

@media (max-width: 768px) {
    .video-container {
        width: 90%;
        max-height: 80vh;
    }

    .close-video-btn {
        top: 10px;
        right: 10px;
        width: 35px;
        height: 35px;
        font-size: 20px;
    }
}

@media (max-width: 576px) {
    .video-container {
        width: 95%;
    }
}

/* Asegurarse de que no hay conflictos con otros estilos */
.modal.active {
    z-index: 1000;
}

video,
#intro-video {
    width: 100%;
    display: block;
}

.control-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    margin: 0 5px;
    font-size: 16px;
}

.progress-bar {
    height: 5px;
    background-color: #333;
    flex-grow: 1;
    margin: 0 10px;
    position: relative;
    cursor: pointer;
}

.progress-fill {
    height: 100%;
    background-color: #fff;
    width: 0;
}

.time-display {
    font-size: 12px;
    margin: 0 10px;
}

.pause-icon {
    display: none;
}

/* Mobile Styles */
.mobile-menu-btn {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999;
    width: 30px;
    height: 20px;
    cursor: pointer;
}

.mobile-menu-btn span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: white;
    margin-bottom: 5px;
    transition: transform 0.3s, opacity 0.3s;
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100vh;
    background-color: #000;
    z-index: 999;
    padding: 80px 40px;
    transition: right 0.3s;
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu-close {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 24px;
    cursor: pointer;
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-left: 6px !important;
}

.mobile-nav a {
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: white;
}

/* Contact page styles */
.contact-info-overlay {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    z-index: 100;
    color: white;
}

.contact-info-overlay h2 {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: 500;
}

.contact-details p {
    margin-bottom: 10px;
    font-size: 18px;
}

.contact-details a {
    color: #fff;
}

.social-link {
    font-style: italic;
}

/* Talent management page styles */
.talent-header {
    padding: 100px 40px 40px;
    text-align: center;
}

.talent-header h1 {
    font-size: 32px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.talent-header p {
    font-size: 18px;
    opacity: 0.7;
    max-width: 600px;
    margin: 0 auto;
}

.artist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    padding: 0 40px 100px;
    max-width: 1400px;
    margin: 0 auto;
}

.artist-card {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background-color: #111;
    height: 400px;
    cursor: pointer;
}

.artist-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.artist-card:hover img {
    transform: scale(1.05);
}

.artist-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
}

.artist-info h3 {
    font-size: 20px;
    margin-bottom: 5px;
}

.artist-info p {
    font-size: 14px;
    opacity: 0.7;
}

/* Artist modal */
.artist-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 1000;
    display: flex;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.artist-modal.active {
    opacity: 1;
    visibility: visible;
}

.artist-modal-close {
    position: absolute;
    top: 40px;
    right: 40px;
    font-size: 30px;
    cursor: pointer;
    z-index: 1001;
}

.artist-modal-content {
    display: flex;
    width: 100%;
    height: 100%;
}

.artist-modal-image {
    width: 50%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

.artist-modal-info {
    width: 50%;
    padding: 100px 60px;
    overflow-y: auto;
}

.artist-modal-info h2 {
    font-size: 36px;
    margin-bottom: 10px;
}

.artist-modal-info h3 {
    font-size: 24px;
    opacity: 0.7;
    margin-bottom: 40px;
}

.artist-modal-info p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.artist-modal-info .social {
    margin-top: 40px;
    font-size: 18px;
    opacity: 0.7;
}

/* Estilos para la sección "La Noche" */
.musician-details-link {
    margin-top: 15px;
}

.musician-details-link a {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #fff;
    border-radius: 4px;
    font-size: 14px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.musician-details-link a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Estilos para el botón de gestionar performances */
.manage-perf-btn {
    margin-left: 10px;
    background-color: #4a90e2;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.manage-perf-btn:hover {
    background-color: #357bdb;
}

#talent-submenu .submenu-columns {
    columns: 2;
    column-gap: 30px;
    width: 100%;
}

#talent-submenu .submenu-column {
    width: 100%;
    break-inside: avoid;
    margin-bottom: 0;
}

#talent-submenu .download-roster-container {
    column-span: all;
    margin-top: 15px;
}

/* Submenu loading state */
.submenu-loading {
    color: white;
    font-size: 16px;
    opacity: 0.7;
    padding: 10px;
}

.right-column {
    position: relative;
}

.artist-logo-overlay {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 180px;
    height: auto;
    text-align: center;
}

.artist-logo-overlay img {
    display: none;
}

/* Page-specific styles */

/* Contact page styles */
.contact-info-overlay h2 {
    font-size: 50px;
    margin-bottom: 40px;
    font-weight: 500;
    letter-spacing: 2px;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.contact-details p {
    margin-bottom: 0;
    font-size: 35px;
    line-height: 1.4;
}

.contact-details a {
    color: #fff;
    transition: opacity 0.3s ease;
}

.contact-details a:hover {
    opacity: 0.7;
}

.contact-details .social-link {
    font-style: italic;
    text-decoration: underline;
}

/* Ajustar el estilo del enlace Our Space */
.contact-details .download-link {
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    margin-top: 20px;
    font-size: inherit;
    color: inherit;
}

.contact-details .download-link:hover {
    opacity: 0.7;
    background-color: transparent;
}

/* Index page styles */
.submenu-columns {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 80px;
    max-width: 100%;
    width: 100%;
    overflow: visible;
}

.submenu-column {
    flex: 0 0 auto;
    width: 200px;
    min-width: 200px;
}

.submenu-item {
    width: 100%;
    text-align: left;
    padding: 10px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.submenu-item:last-child {
    border-bottom: none;
}

.download-roster-container {
    width: 100%;
    text-align: left;
    padding: 10px 0;
    margin-top: 10px;
}

/* Mobile dropdown styles */

/* Nuevos estilos para el menú móvil */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -300px;
    /* Inicialmente fuera de la pantalla */
    width: 300px;
    height: 100vh;
    background-color: #000;
    z-index: 999;
    padding: 80px 40px;
    transition: right 0.3s ease;
    /* Solo transición para right */
    overflow-y: auto;
    /* Permitir scroll si el menú es muy largo */
    transform: none !important;
    /* Prevenir transformaciones */
}

.mobile-menu.active {
    right: 0;
    transform: none !important;
}

/* Estilo para el submenú móvil */
.mobile-submenu {
    display: none;
    /* Inicialmente oculto */
    padding-left: 20px;
    margin-top: 10px;
    position: static !important;
    opacity: 1;
    visibility: visible;
    transform: none !important;
    transition: none;
}

/* Eliminar cualquier estilo que pueda estar causando problemas */
.mobile-dropdown,
.mobile-dropdown-toggle,
.mobile-submenu,
.mobile-nav {
    transform: none !important;
    transition: none !important;
    /* Desactivar transiciones que podrían causar problemas */
}

/* Estilo visual para el dropdown activo */
.mobile-dropdown.active {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 5px;
    border-radius: 4px;
}

/* Asegurar que el botón X de cierre esté correctamente posicionado */
.mobile-menu-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
    z-index: 1001;
}

/* Asegurar que el botón de hamburguesa esté correctamente posicionado */
.mobile-menu-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999;
    width: 30px;
    height: 20px;
    cursor: pointer;
}


/* Reverse the layout - Content on LEFT, Image on RIGHT */

/* Base structure for all content items */
.talent-item,
.collab-item,
.installation-item,
.event-item,
.musician-item,
.performance-item {
    display: flex;
    flex-direction: row-reverse;
    /* This reverses the order */
    height: 100vh;
    width: 100%;
    position: relative;
}

/* For all item types - ensure even numbered items maintain the same layout */
.talent-item:nth-child(even),
.collab-item:nth-child(even),
.installation-item:nth-child(even),
.event-item:nth-child(even),
.musician-item:nth-child(even),
.performance-item:nth-child(even) {
    flex-direction: row-reverse;
    /* Keep the same for consistency */
}

/* Image always on the right */
.talent-image,
.collab-image,
.installation-image,
.event-image,
.musician-image,
.performance-image {
    width: 50%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* Content always on the left */
.talent-content,
.collab-content,
.installation-content,
.event-content,
.musician-content,
.performance-content {
    width: 50%;
    padding: 0 80px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 80px;
}

/* Mobile adjustments */
@media (max-width: 992px) {

    .talent-item,
    .collab-item,
    .installation-item,
    .event-item,
    .musician-item,
    .performance-item,
    .talent-item:nth-child(even),
    .collab-item:nth-child(even),
    .installation-item:nth-child(even),
    .event-item:nth-child(even),
    .musician-item:nth-child(even),
    .performance-item:nth-child(even) {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }

    .talent-image,
    .talent-content,
    .collab-image,
    .collab-content,
    .installation-image,
    .installation-content,
    .event-image,
    .event-content,
    .musician-image,
    .musician-content,
    .performance-image,
    .performance-content {
        width: 100%;
    }
}

/* Talent page styles */
.talent-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.talent-item {
    display: flex;
    height: 100vh;
    width: 100%;
    position: relative;
}

.talent-item:nth-child(even) {
    flex-direction: row-reverse;
}

.talent-image {
    width: 50%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}


.talent-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.talent-content {
    width: 50%;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 80px;
}


/* Ajustar el tamaño y posición del título de talento */
.talent-name,
.artist-name {
    font-size: 22px !important;
    /* Reducir tamaño */
    margin-bottom: 5px;
    margin-top: 250px;
}

.talent-name {
    font-size: 42px;
    font-weight: 500;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.talent-category {
    font-size: 16px;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.talent-bio {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 30px;
}

.talent-social {
    font-size: 16px;
    margin-bottom: 20px;
}

.talent-projects a {
    color: #000;
    text-decoration: none;
    font-size: 16px;
    transition: all 0.3s ease;
}

.talent-projects a:hover {
    opacity: 0.7;
}

.talent-nav {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.nav-dots {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-dot {
    margin: 15px 0;
}

.nav-dot a {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
}

.nav-dot a.active,
.nav-dot a:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.navigation-arrows {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    cursor: pointer;
    color: #000;
    width: 40px;
    height: 40px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
}

.arrow:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Collabs page styles */
.collabs-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.collab-item {
    display: flex;
    height: 100vh;
    width: 100%;
    position: relative;
}

.collab-item:nth-child(even) {
    flex-direction: row-reverse;
}

.collab-image {
    width: 50%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.collab-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.collab-content {
    width: 50%;
    padding: 0 80px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 80px;
}

.collab-title {
    font-size: 42px;
    font-weight: 500;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.collab-subtitle {
    font-size: 16px;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.collab-description {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 30px;
}

.collab-nav {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

/* Art Installations page styles */
.installations-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.installation-item {
    display: flex;
    height: 100vh;
    width: 100%;
    position: relative;
}

.installation-item:nth-child(even) {
    flex-direction: row-reverse;
}

.installation-image {
    width: 50%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.installation-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.installation-content {
    width: 50%;
    padding: 0 80px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 80px;
}

.installation-title {
    font-size: 42px;
    font-weight: 500;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.installation-subtitle {
    font-size: 16px;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.installation-description {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 30px;
}

.installations-nav {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

/* Events page styles */
.events-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.event-item {
    display: flex;
    height: 100vh;
    width: 100%;
    position: relative;
}

.event-item:nth-child(even) {
    flex-direction: row-reverse;
}

.event-image {
    width: 50%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.event-content {
    width: 50%;
    padding: 0 80px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 80px;
}

.event-title {
    font-size: 42px;
    font-weight: 500;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.event-subtitle {
    font-size: 16px;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.event-description {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 30px;
}

.events-nav {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

/* Music page styles */
.music-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.musician-item {
    display: flex;
    height: 100vh;
    width: 100%;
    position: relative;
}

.musician-item:nth-child(even) {
    flex-direction: row-reverse;
}

.musician-image {
    width: 50%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.musician-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.musician-content {
    width: 50%;
    padding: 0 80px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 80px;
}

.musician-title {
    font-size: 42px;
    font-weight: 500;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.musician-subtitle {
    font-size: 16px;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.musician-description {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 30px;
}

.musician-social {
    font-size: 16px;
    margin-bottom: 20px;
}

.music-nav {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

/* Artist page styles */
.main-container {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.left-column {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.right-column {
    width: 50%;
    height: 100%;
    position: relative;
}

.right-column img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.info-section {
    width: 100%;
    flex: 1;
    background-color: #fff;
    color: #000;
    padding: 10px 43px !important;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center !important;
}

.artist-name {
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.artist-category {
    font-size: 16px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.artist-bio {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 15px;
}

.artist-social {
    font-size: 16px;
    font-style: italic;
}

.projects-section {
    width: 100%;
    height: 40%;
    background-color: #fff;
    overflow: hidden;
    position: relative;
}

.carousel-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
}

.carousel-slide {
    height: 100%;
    transition: opacity 0.3s ease;
    flex: 0 0 auto;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 20px;
    color: #000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 100 !important;
    opacity: 1 !important;
    transition: opacity 0.3s;
}

.carousel-arrow:hover {
    opacity: 1;
}

.carousel-arrow-left {
    left: 20px !important;
}

.carousel-arrow-right {
    right: 20px !important;
}

/* Project Modal */
.project-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 1000;
}

.project-modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    width: 80%;
    max-width: 1000px;
    display: flex;
    background-color: #fff;
}

.modal-image {
    width: 60%;
}

.modal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-info {
    width: 40%;
    padding: 30px;
    color: #000;
}

.modal-title {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.modal-subtitle {
    font-size: 16px;
    margin-bottom: 20px;
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
}

/* LaNocher Artist Styles */
.musician-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.musician-main {
    display: flex;
    height: 100vh;
    width: 100%;
    position: relative;
}

.performance-item {
    display: flex;
    height: 100vh;
    width: 100%;
    position: relative;
}

.performance-item:nth-child(even) {
    flex-direction: row-reverse;
}

.performance-image {
    width: 50%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.performance-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.performance-content {
    width: 50%;
    padding: 0 80px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 80px;
}

.performance-title {
    font-size: 42px;
    font-weight: 500;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.performance-subtitle {
    font-size: 16px;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.performance-description {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 30px;
}

.back-button {
    position: fixed;
    bottom: 40px;
    left: 40px;
    z-index: 100;
}

.back-button a {
    text-decoration: none;
    color: #000;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    text-transform: uppercase;
    transition: background-color 0.3s;
}

.back-button a:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.upcoming-events {
    margin-top: 20px;
}

.upcoming-events h3 {
    font-size: 18px;
    margin-bottom: 10px;
}

.event-list {
    list-style: none;
    padding: 0;
}

.event-item {
    margin-bottom: 10px;
}

@media (max-width: 1440px) {
    .nav-link {
        font-size: 16px !important;
    }

    .nav-menu {
        padding-top: 30px;
        gap: 67px;
    }

    .submenu-columns {
        gap: 0px !important;
        display: flex;
        flex-wrap: nowrap;
    }

    .submenu-column {
        gap: 0px !important;
        margin-bottom: 0px !important;
        width: 170px;
        min-width: 170px;
        flex: 0 0 auto;
    }

    .submenu-item p {
        font-size: 14px;
    }

    .download-link {
        font-size: 11px;
    }

    .talent-management,
    .brand-experiences,
    .community-events,
    .music-entertainment {
        margin-right: 10px;
    }


    .submenu-column {
        width: 180px !important;
        min-width: 180px !important;
        margin-bottom: 20px !important;
    }

    .submenu-item h3 {
        font-size: 12px !important;
        line-height: 1 !important;
    }

    .submenu-item p {
        font-size: 12px !important;
    }
}

@media (max-width: 1024px) {
    .nav-link {
        font-size: 15px !important;
        margin-top: 30px;
    }

    .submenu-item h3 {
        font-size: 11px !important;
        line-height: 1 !important;
    }

    .download-roster-container {
        margin-top: 0px;
    }

    .submenu-item {
        margin-bottom: 0px;
    }

    #music-submenu {
        left: -50px;
    }
}

@media (max-width: 1280px) {
    .logo img {
        margin-left: 0px !important;
    }

    .contact-button a {
        margin-right: 7px;
    }

    .artist-bio {
        font-size: 11px;
    }

    .talent-name,
    .artist-name {
        font-size: 19px !important;
        margin-bottom: 5px;
        margin-top: 190px;
    }

    .talent-bio {
        font-size: 13px;
    }

    .artist-category {
        font-size: 12px;
    }

    a {
        font-size: 12px;
    }

    .talent-projects a {
        font-size: 12px;

    }

    .musician-title {
        font-size: 19px;
    }

    .musician-description {
        font-size: 12px;
    }

}

@media (max-width: 992px) {
    .nav-link {
        font-size: 18px;
    }

    .submenu-columns {
        gap: 40px;
    }

    .submenu-column {
        width: 160px;
        min-width: 160px;
    }

    .submenu-item h3 {
        font-size: 18px;
    }

    .video-container {
        max-width: 90%;
    }

    .main-container {
        flex-direction: column;
    }

    .left-column,
    .right-column {
        width: 100%;
    }

    .right-column {
        order: -1;
        height: 50vh;
    }

    .logo-section {
        height: auto;
        padding: 20px;
    }

    .info-section {
        height: auto;
        padding: 20px;
    }

    .projects-section {
        height: auto;
        padding: 20px;
    }

    .talent-item,
    .talent-item:nth-child(even),
    .collab-item,
    .collab-item:nth-child(even),
    .installation-item,
    .installation-item:nth-child(even),
    .event-item,
    .event-item:nth-child(even),
    .musician-item,
    .musician-item:nth-child(even),
    .musician-main,
    .performance-item,
    .performance-item:nth-child(even) {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }

    .talent-image,
    .talent-content,
    .collab-image,
    .collab-content,
    .installation-image,
    .installation-content,
    .event-image,
    .event-content,
    .musician-image,
    .musician-content,
    .performance-image,
    .performance-content {
        width: 100%;
    }

    .talent-image,
    .collab-image,
    .installation-image,
    .event-image,
    .musician-image,
    .performance-image {
        height: 50vh;
    }

    .talent-content,
    .collab-content,
    .installation-content,
    .event-content,
    .musician-content,
    .performance-content {
        padding: 40px;
        justify-content: flex-start;
        padding-bottom: 60px;
    }

    .talent-nav,
    .collab-nav,
    .installations-nav,
    .events-nav,
    .music-nav,
    .musician-nav {
        display: none;
    }
}

@media (max-width: 768px) {
    .main-nav {
        display: none;
    }

    .logo {
        top: 20px;
        left: 20px;
    }

    .contact-button {
        top: 20px;
        right: 70px;
    }

    .contact-button a {
        display: none;
    }

    .video-container {
        width: 95%;
    }

    .talent-name,
    .artist-name {
        margin-top: 0px;
    }

    body {
        overflow-y: auto !important;
    }

    .installation-title {
        font-size: 29px !important;
    }

    .talent-item,
    .collab-item,
    .installation-item,
    .event-item,
    .musician-item {
        height: auto;
        min-height: auto;
        padding: 60px 0;
    }

    .nav-item2 .submenu {
        display: block !important;
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        padding: 10px 0;
    }

    .artist-category,
    .talent-category {
        font-size: 14px;
    }

    .artist-bio,
    .talent-bio {
        font-size: 12px !important;
    }

    .mobile-menu-btn {
        display: block;
    }
    
    .right-column img {
        object-fit: contain !important;
    }

    /* Asegurarse de que el botón sea siempre visible */
    header {
        position: sticky;
        top: 0;
        z-index: 1000;
        background-color: rgba(255, 255, 255, 0.9);
    }

    .logo img {
        height: 40px;
    }

    .artist-modal-content {
        flex-direction: column;
    }

    .artist-modal-image,
    .artist-modal-info {
        width: 100%;
    }

    .artist-modal-image {
        height: 40vh;
    }

    .artist-modal-info {
        padding: 40px 20px;
    }

    .artist-logo-overlay {
        top: 20px;
        left: 20%;
        width: 140px;
    }

    .artist-logo-overlay img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* Projects section for artist page */
    .projects-section {
        padding: 0;
    }

    .artist-name {
        font-size: 22px !important;
        margin-bottom: 10px !important;
    }

    .artist-bio {
        margin-bottom: 20px !important;
    }

    .carousel-slide {
        width: 100% !important;
    }

    .carousel-arrow {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
        background-color: rgba(255, 255, 255, 0.95) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
    }

    .modal-content {
        flex-direction: column;
        width: 90%;
    }

    .modal-image,
    .modal-info {
        width: 100%;
    }

    .modal-image {
        height: 40vh;
    }
}

@media (max-width: 576px) {
    .logo img {
        height: 30px !important;
    }

    .mobile-menu {
        width: 100%;
        right: -100%;
    }

    .carousel-slide {
        width: 100% !important;
        min-width: 100%;
    }

    .carousel-arrow {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }

    .carousel-track {
        display: flex;
        flex-wrap: nowrap;
        transition: transform 0.5s ease;
    }

    .talent-name {
        font-size: 22px;
    }

    .talent-category {
        font-size: 14px;
    }

    .talent-container {
        padding-top: 60px;
    }

    .talent-item {
        padding: 0;
    }

    .talent-bio {
        font-size: 14px;
    }

    .talent-projects a {
        font-size: 14px;
    }

    .navigation-arrows {
        display: none;
    }
}

@media (max-width: 320px) {

    .artist-name,
    .talent-name {
        font-size: 20px;
    }

    .artist-category,
    .talent-category,
    .artist-bio,
    .talent-bio {
        font-size: 12px;
    }

    .logo img {
        height: 24px;
    }

    .projects-section {
        height: 180px;
    }

    .right-column {
        height: 30vh;
    }
}

/* Añade estos estilos al final de tu main.css */

@media (max-width: 768px) {

    /* Asegurar que el body y el html sean scrolleables */
    body,
    html {
        overflow-y: auto !important;
        height: auto !important;
        position: relative !important;
    }

    /* Eliminar restricciones de altura y overflow */
    .site-container {
        height: auto !important;
        overflow: visible !important;
    }

    .main-container {
        height: auto !important;
        overflow: visible !important;
    }

    /* Hacer que las secciones tengan altura natural en lugar de 100vh */
    .talent-item,
    .collab-item,
    .installation-item,
    .event-item,
    .musician-item,
    .performance-item {
        min-height: auto !important;
        height: auto !important;
    }

    /* Asegurar que el contenido sea visible */
    .talent-content,
    .collab-content,
    .installation-content,
    .event-content,
    .musician-content,
    .performance-content {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    /* Estilos adicionales para la página de artista */
    .left-column,
    .right-column {
        height: auto !important;
        overflow: visible !important;
    }

    .info-section,
    .projects-section {
        position: relative !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Ajustar el contenedor principal de background */
    .background-container {
        position: fixed !important;
    }
}

/* Ajustar el tamaño de los títulos en secciones específicas */
.collabs-container .collab-title,
.events-container .event-title {
    font-size: 36px;
    /* Reducido de 42px */
}

@media (max-width: 992px) {

    .collabs-container .collab-title,
    .events-container .event-title {
        font-size: 28px;
    }
}

@media (max-width: 768px) {

    .collabs-container .collab-title,
    .events-container .event-title {
        font-size: 24px;
    }
}

/* Añadir al archivo main.css */

/* Estilos de accesibilidad */
:focus {
    outline: 3px solid #4a90e2;
    outline-offset: 3px;
}

/* Estado activo y hover más evidente para botones */
.btn:focus,
.btn:hover,
button:focus,
button:hover,
.action-btn:focus,
.action-btn:hover {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3);
}

/* Mejoras responsive para tablets */
@media (max-width: 992px) and (min-width: 768px) {

    .talent-content,
    .collab-content,
    .installation-content,
    .event-content,
    .musician-content,
    .performance-content {
        padding: 0 40px;
    }

    .artist-name,
    .talent-name,
    .collab-title,
    .installation-title,
    .event-title,
    .musician-title {
        font-size: 32px;
    }

    .tabs-container {
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 8px;
        padding: 5px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
}

/* Mejoras para teléfonos pequeños */
@media (max-width: 375px) {
    .logo img {
        height: 22px;
    }

    .mobile-menu-btn {
        top: 15px;
        right: 15px;
    }

    .talent-name,
    .artist-name,
    .collab-title,
    .installation-title,
    .event-title,
    .musician-title {
        font-size: 18px;
    }

    .talent-category,
    .artist-category,
    .collab-subtitle,
    .installation-subtitle,
    .event-subtitle,
    .musician-subtitle {
        font-size: 12px;
    }

    .talent-bio,
    .artist-bio,
    .collab-description,
    .installation-description,
    .event-description,
    .musician-description {
        font-size: 12px;
        line-height: 1.4;
    }
}
/* CAMBIOS PARA MÓVIL - Agregar a main.css */

/* 1. Quitar funcionalidad de click en imágenes en móvil */
@media (max-width: 768px) {
    /* Deshabilitar click en imágenes principales */
    .main-image-container img,
    .right-column img,
    [id^="main-image-"] {
        pointer-events: none !important;
        cursor: default !important;
    }
    
    /* Deshabilitar click en slides del carousel */
    .carousel-slide {
        pointer-events: none !important;
        cursor: default !important;
    }
    
    .carousel-slide img {
        pointer-events: none !important;
        cursor: default !important;
    }

    /* 2. Ocultar flechas de navegación en community-events y brand-experiences */
    .navigation-arrows {
        display: none !important;
    }
    
    /* También ocultar puntos de navegación en móvil */
    .dot-navigation {
        display: none !important;
    }

    /* 3. Modificaciones para la página de artista en móvil */
    .artist-page-mobile .right-column {
        display: none !important; /* Ocultar imagen principal */
    }
    
    .artist-page-mobile .artist-bio {
        display: none !important; /* Ocultar descripción */
    }
    
    .artist-page-mobile .left-column {
        width: 100% !important;
    }
    
    .artist-page-mobile .info-section {
        padding: 20px !important;
        text-align: center;
    }
    
    .artist-page-mobile .artist-name {
        font-size: 24px !important;
        margin-bottom: 10px !important;
        margin-top: 20px !important;
    }
    
    .artist-page-mobile .artist-social {
        font-size: 16px !important;
        margin-bottom: 20px !important;
        text-align: center;
    }
    
    .artist-page-mobile .projects-section {
        height: auto !important;
        min-height: 60vh !important;
        background-color: #fff;
    }
    
    /* Mejorar el carousel para mostrar más claramente los proyectos */
    .artist-page-mobile .carousel-slide {
        width: 100% !important;
        pointer-events: auto !important; /* Reactivar solo para navegación del carousel */
        cursor: pointer !important;
    }
    
    .artist-page-mobile .carousel-arrow {
        display: block !important;
        pointer-events: auto !important;
    }
}
/* REEMPLAZAR LOS ESTILOS EN LA SECCIÓN <style> DE ARTIST.HTML */

/* ESTILOS ESPECÍFICOS PARA MOBILE PROJECTS VIEW */
@media (max-width: 768px) {
    body.artist-page-mobile .main-container {
        flex-direction: column !important;
        height: auto !important;
        min-height: 100vh !important;
    }

    body.artist-page-mobile .left-column {
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body.artist-page-mobile .right-column {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* NUEVO: Mostrar logo en la parte superior */
    body.artist-page-mobile .logo-section {
        display: block !important;
        order: 0 !important;
        padding: 20px !important;
        background-color: #fff !important;
    }

    body.artist-page-mobile .logo-section .logo {
        position: relative !important;
        top: auto !important;
        left: auto !important;
    }

    body.artist-page-mobile .logo-section .logo img {
        position: relative !important;
        height: 40px !important;
        margin: 0 !important;
    }

    body.artist-page-mobile .info-section {
        flex: 0 0 auto !important;
        height: auto !important;
        padding: 20px 20px 30px 20px !important; /* Reducido padding top */
        text-align: left !important;
        justify-content: flex-start !important;
        background-color: #fff !important;
        order: 1 !important;
    }

    body.artist-page-mobile .artist-bio {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    body.artist-page-mobile .artist-name {
        font-size: 28px !important;
        margin-top: 0 !important;
        margin-bottom: 15px !important;
        color: #000 !important;
        text-align: left !important;
    }

    body.artist-page-mobile .artist-social {
        font-size: 18px !important;
        margin-bottom: 30px !important;
        text-align: left !important; /* ASEGURADO: Alineación izquierda */
    }

    body.artist-page-mobile .artist-social a {
        text-align: left !important; /* AÑADIDO: Alineación del enlace */
        display: block !important; /* AÑADIDO: Para que tome toda la línea */
        width: fit-content !important; /* AÑADIDO: Solo el ancho necesario */
    }

    body.artist-page-mobile .projects-section {
        flex: 1 !important;
        height: auto !important;
        min-height: 70vh !important;
        background-color: #fff !important;
        order: 2 !important;
        padding: 0 !important;
    }

    /* Asegurar que las flechas del carousel funcionen */
    body.artist-page-mobile .carousel-arrow {
        pointer-events: auto !important;
        display: flex !important;
        z-index: 100 !important;
        background-color: rgba(255, 255, 255, 0.9) !important;
        border-radius: 50% !important;
        width: 40px !important;
        height: 40px !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        cursor: pointer !important;
        justify-content: center !important;
        align-items: center !important;
        font-size: 18px !important;
        color: #000 !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
    }

    body.artist-page-mobile .carousel-arrow-left {
        left: 20px !important;
    }

    body.artist-page-mobile .carousel-arrow-right {
        right: 20px !important;
    }

    /* Asegurar que el carousel track funcione correctamente */
    body.artist-page-mobile .carousel-track {
        display: flex !important;
        width: 100% !important;
        height: 100% !important;
        transition: transform 0.5s ease !important;
    }

    body.artist-page-mobile .carousel-slide {
        width: 100% !important;
        flex-shrink: 0 !important;
        height: 100% !important;
    }

    body.artist-page-mobile .carousel-slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* AÑADIDO: Ocultar el logo original de desktop */
    body.artist-page-mobile .artist-logo-overlay {
        display: none !important;
    }
}