/* style.css - Florencia Núñez Website Custom Stylesheet */

/* Selección de texto premium y legible para todo el sitio */
::selection {
    background-color: #0E4798; /* Azul principal (bg-artist-blue) */
    color: #F6FBFF; /* Celeste/Blanco suave (bg-artist-light) */
}

::-moz-selection {
    background-color: #0E4798;
    color: #F6FBFF;
}

/* Custom Smooth Transitions & Rendering */
html {
    scrollbar-gutter: stable;
    overflow-y: scroll !important;
}

body {
    background-color: #0A2958;
    /* artist.dark */
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Hero Background Responsivo - Mobile-first */
#hero-bg {
    background-image: url('img/hero.jpg');
    background-color: #01396c;
}

/* Carga la imagen de alta resolución y proporción 16:9 en escritorio */
@media (min-width: 768px) {
    #hero-bg {
        background-image: url('img/hero-desktop.jpg');
    }
}

/* Bloquear scroll mientras el preloader está activo */
body.loading {
    overflow: hidden !important;
}

/* Fondo del preloader personalizado para coincidir con el color y textura de fondo de la foto del Hero (bg-azul.jpg) */
#preloader {
    background-color: #01396c;
    background-image: url('img/bg-azul.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Sutil textura de lino/grano analógico para dar aspecto premium (como lienzo de lona o vinilo) */
.grain-texture {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.02'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 25;
}

/* Línea expansiva de navegación desde el centro en hover y activo */
.nav-link {
    position: relative;
    padding-bottom: 6px;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: rgba(246, 251, 255, 0.85);
    /* artist.light */
    transform-origin: bottom center;
    transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
}

.nav-link.active {
    color: #F6FBFF !important;
}

/* Scrollbar personalizada a tono con tu paleta */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #0A2958;
    /* artist.dark */
}

::-webkit-scrollbar-thumb {
    background: #0E4798;
    /* artist.blue */
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #F6FBFF;
    /* artist.light */
}

/* Previene el parpadeo de contenido no estilizado (FOUC) */
.fouc-prevent {
    opacity: 0;
    visibility: hidden;
}

/* Pantalla Completa Menú Móvil Overlay */
#mobile-menu {
    background-color: rgba(10, 41, 88, 0.98) !important;
    /* artist.dark con alta opacidad */
    backdrop-filter: blur(12px);
    /* Sutil desenfoque de fondo ultra premium */
    -webkit-backdrop-filter: blur(12px);
    z-index: 40;
}

/* Forzar que el cabezal de navegación esté por encima del menú móvil */
#hero-nav {
    z-index: 50 !important;
}

/* --- SECCIÓN GIRA 2026 --- */
#gira {
    background-color: #EBECEC;
    /* Fondo gris claro coincidente con la fotografía bg-gira.jpg */
}

/* Ocultar las fechas extra en el listado principal de forma infalible (evita conflictos con flex/sm:grid) */
.gira-extra-event.hidden {
    display: none !important;
}


/* Transiciones interactivas ultra fluidas para las filas de concierto */
#gira-events-list>div {
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

#gira-events-list>div:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(14, 71, 152, 0.04);
}

/* Efectos de Hover interactivos premium para botones en la sección Gira */
#gira a {
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- SECCIÓN DISCOGRAFÍA EXPANDIDA --- */
/* Scrollbar personalizada para la ficha técnica del disco y la biografía (adaptada a fondo claro) */
.discografia-scroll::-webkit-scrollbar,
.bio-scroll::-webkit-scrollbar {
    width: 6px;
}

.discografia-scroll::-webkit-scrollbar-track,
.bio-scroll::-webkit-scrollbar-track {
    background: rgba(14, 71, 152, 0.05) !important;
    /* artist.blue con opacidad baja */
    border-radius: 3px;
}

.discografia-scroll::-webkit-scrollbar-thumb,
.bio-scroll::-webkit-scrollbar-thumb {
    background: rgba(14, 71, 152, 0.25) !important;
    /* artist.blue */
    border-radius: 3px;
    transition: background 0.3s ease;
}

.discografia-scroll::-webkit-scrollbar-thumb:hover,
.bio-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(14, 71, 152, 0.45) !important;
}

/* Títulos internos de la ficha técnica en azul corporativo */
.discografia-scroll strong {
    color: #0E4798;
    font-weight: 700;
}

/* --- STICKY HEADER / SCROLLED STATE --- */
#hero-nav {
    transition: background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

#hero-nav.scrolled {
    background-color: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Transición ultra fluida para el padding del contenedor de navegación */
#hero-nav nav {
    transition: padding 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Reducir padding al hacer scroll para un aspecto más compacto y premium */
#hero-nav.scrolled nav {
    padding-top: 1.25rem !important;
    /* ~py-5 */
    padding-bottom: 1.25rem !important;
}

/* Cambiar colores de texto en cabezal scrolled */
#hero-nav.scrolled a.font-light {
    color: #0E4798 !important;
    /* artist-blue */
}

#hero-nav.scrolled a.font-light:hover {
    color: #0A2958 !important;
    /* artist-dark */
}

#hero-nav.scrolled .nav-link {
    color: rgba(14, 71, 152, 0.75) !important;
    /* artist-blue con opacidad */
}

#hero-nav.scrolled .nav-link:hover,
#hero-nav.scrolled .nav-link.active {
    color: #0E4798 !important;
    /* artist-blue */
}

/* Línea expansiva de navegación en scrolled */
#hero-nav.scrolled .nav-link::after {
    background-color: #0E4798 !important;
    /* artist-blue */
}

/* Botón Hamburguesa en scrolled */
#hero-nav.scrolled #menu-btn span {
    background-color: #0E4798 !important;
    /* artist-blue */
}

/* Mantener barras del botón de hamburguesa blancas cuando el menú móvil está abierto */
#hero-nav.menu-open #menu-btn span {
    background-color: #ffffff !important;
}

/* Corrección de rendimiento y bordes redondeados glitchy durante transiciones (Safari/Chrome bug) */
.smooth-clip {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

/* --- SCROLLBAR Y FILAS DEL MODAL DE GIRA --- */
.gira-scroll {
    overflow-x: hidden !important;
}

/* Scrollbar personalizada para la lista de fechas adicionales en el modal */
.gira-scroll::-webkit-scrollbar {
    width: 6px;
}

.gira-scroll::-webkit-scrollbar-track {
    background: rgba(14, 71, 152, 0.05);
    /* artist.blue con opacidad baja */
    border-radius: 3px;
}

.gira-scroll::-webkit-scrollbar-thumb {
    background: rgba(14, 71, 152, 0.25);
    /* artist.blue */
    border-radius: 3px;
    transition: background 0.3s ease;
}

.gira-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(14, 71, 152, 0.45);
}

/* Transiciones interactivas para las filas de concierto dentro del modal de Gira */
#gira-modal-events-list>div {
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

#gira-modal-events-list>div:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(14, 71, 152, 0.04);
    background-color: rgba(14, 71, 152, 0.03);
    /* Leve iluminación */
}