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

body, html {
    height: 100%;
    width: 100%;
    font-family: 'Inter', sans-serif;
    background-color: #000;
    /* Importante: Permitimos el scroll en el body para esta página */    
    overflow-y: auto; 
}


@font-face {
  font-family: 'Druk Cond Super Trial';    
  src: url('fonts/DrukCond-Super-Trial.otf') format('opentype');    
  font-weight: normal;
  font-style: normal ;
  font-display: swap; 
}

html.sticky-page {
    scroll-behavior: smooth;
}

html.sticky-page body {
    scroll-snap-type: proximity;
    overflow-y: scroll; /* Asegura que el scroll snap funcione */
}

h1, h2 {
    font-family: "Asimovian", sans-serif;
}

/* Animación al contenido principal (excepto menu y footer)*/
main, .band-container, .shows-container, .shop-container, .contact-container {
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* 2. AJUSTES RECOMENDADOS PARA LENIS SCROLL */
html.lenis, html.lenis body {
    height: auto !important;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none; /* Mejora performance al scrollear sobre iframes de YouTube/Spotify */
}


/* --- FONDO INDEX --- */

.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
    z-index: 0;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* CLAVE: Hace que el video cubra todo el fondo sin deformarse */
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.hero-video.mobile {
    display: none;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Se coloca ENCIMA del video */
    
    /* EFECTO VIÑETA: */
    /* El centro (0% a 40%) es totalmente transparente. */
    /* Hacia los bordes (100%) se oscurece al 80% de negro. */
    background: radial-gradient(circle, rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%);
    
    pointer-events: none; /* Importante: deja pasar los clics si hubiera algo interactivo debajo (aunque aquí no lo hay) */
}

/* === INTERFAZ FIJA (FIXED UI) === */
/* Este contenedor mantiene todo "flotando" sobre las fotos */
.fixed-ui {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100; /* Asegura que esté siempre encima de las fotos */
    pointer-events: none; /* Permite hacer scroll y clic en las fotos si fuera necesario */
    padding: 40px;
    color: #ffffff;
}

.fixed-ui.gallery, .mobile-top-logo {
    mix-blend-mode: difference;
}

/* Reactivamos los clicks para los botones y enlaces dentro de la UI */
.fixed-ui a, 
.fixed-ui button, 
.fixed-ui input,
.fixed-ui label {
    pointer-events: auto;
}

.mobile-top-logo {
    display: none;
}

/* Posiciones (Idénticas al Home) */
.top-left { position: absolute; top: 40px; left: 40px; }
.top-right { position: absolute; top: 40px; right: 40px; display: flex; gap: 20px; }
.middle-right { position: absolute; top: 50%; right: 40px; transform: translateY(-50%); text-align: right; }
.middle-left { position: absolute; top: 50%; left: 40px; transform: translateY(-50%); text-align: left; max-width: 250px; }

.next-show-container .label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #e05a36; /* Naranja Funk */
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* Estilo para los datos inyectados de shows en index */
.injected-date {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.injected-date .day {
    font-family: 'Anton', sans-serif;
    font-size: 4rem;
    line-height: 0.9;
    color: white;
}

.injected-date .month {
    font-family: 'Anton', sans-serif;
    font-size: 1.5rem;
    text-transform: uppercase;
    color: white;
}

.injected-date .venue {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    margin-top: 5px;
    opacity: 0.8;
}

.details-link {
    text-decoration: none;
    font-size: 0.75rem;
    border: 1px solid white;
    padding: 5px 15px;
    color: white;
    text-transform: uppercase;
    transition: all 0.3s;
}

.details-link:hover {
    background: white;
    color: black;
}

.loading-text { font-size: 0.8rem; opacity: 0.5; }
.bottom-left { position: absolute; bottom: 40px; left: 40px; font-size: 0.8rem; font-weight: 700; letter-spacing: 1px; max-height: 30%; }
.bottom-right { position: absolute; bottom: 40px; right: 40px; text-align: right; font-size: 0.65rem; font-weight: 700; letter-spacing: 2px; line-height: 1.5; opacity: 0.9; }

/* Estilos de Elementos UI */
.brand-logo { width: 180px; height: auto; filter: brightness(0) invert(1); }
.social-icons a { color: white; font-size: 1.2rem; transition: opacity 0.3s; }
.social-icons a:hover { opacity: 0.7;}
.credits a {color: #f9be06; text-decoration: none;}
.main-nav ul { list-style: none; }
.main-nav li { margin-bottom: 15px; }
.main-nav a { text-decoration: none; color: white; font-family: 'Anton', sans-serif; font-size: 2rem; letter-spacing: 4px; text-transform: uppercase; transition: color 0.3s; opacity: 0.7; }
.main-nav a:hover, .main-nav a.active { color: #e05a36; opacity: 1; }

.newsletter-form { display: flex; align-items: center; gap: 10px; margin-top: 10px;}
.newsletter-form input { background: transparent; border: none; border-bottom: 2px solid white; padding: 5px 0; color: white; font-family: 'Inter', sans-serif; font-size: 1rem; width: 200px; outline: none; }
.newsletter-form button { background: white; color: black; border: none; padding: 8px 15px; font-weight: bold; cursor: pointer; text-transform: uppercase; font-size: 0.8rem; }

/* =========================================
   ESTILOS MÚSICA / SPOTIFY
   ========================================= */

/* Botón CTA (Call to Action) */

.music-player-container {
 position: absolute;
 z-index: 101;
}

.spotify-wrapper {
 width: 100%;
 height: 100px;
 pointer-events: auto;
}

.spotify-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background-color: #1DB954; /* Verde Spotify Oficial */
    color: white; /* Texto blanco (o negro si prefieres contraste #000) */
    text-decoration: none;
    font-family: 'roboto', sans-serif;
    font-size: .7rem;
    text-transform: uppercase;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.spotify-btn:hover {
    background-color: #1ed760; /* Verde más brillante */
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(29, 185, 84, 0.6); /* Resplandor verde */
}

.spotify-btn i {
    font-size: 1.5rem;
}



/* =========================================
   MENÚ HAMBURGUESA Y OVERLAY (BASE)
   ========================================= */

/* Botón Hamburguesa */
.menu-toggle {
    display: none; /* Oculto en PC */
    position: fixed;
    top: 25px;
    right: 25px;
    z-index: 9999;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}


/* =========================================
   ESTILOS MENÚ DESLIZANTE (CON TODO EL CONTENIDO)
   ========================================= */

.mobile-menu-overlay {
    display: none; /* Oculto en PC */
    position: fixed;
    top: 0;
    right: -100%; /* Escondido a la derecha */
    width: 100%;
    height: 100vh;
    background-color: #282b7c; /* Azul corporativo */
    z-index: 9998;
    
    /* Flexbox para apilar todo verticalmente */
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Empezar desde arriba */
    
    padding: 100px 20px 40px 20px; /* Padding superior para no chocar con la X */
    overflow-y: auto; /* IMPORTANTE: Permite scroll si el contenido es muy alto */
    transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    gap: 30px; /* Espacio entre bloques */
}

/* Clase activa */
.mobile-menu-overlay.active {
    right: 0;
}


/* 2. Navegación */
.mobile-menu-overlay nav {
    width: 100%;
    text-align: center;
    margin-block: 70px;
}

.mobile-menu-overlay nav a {
    display: block;
    font-family: 'Anton', sans-serif;
    font-size: 2.5rem; /* Un poco más chico para que entre todo */
    color: white;
    text-decoration: none;
    margin: 10px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: color 0.3s;
}

.mobile-menu-overlay nav a:hover {
    color: #e05a36;
}

/* 3. Redes Sociales */
.overlay-socials {
    display: flex;
    gap: 20px;
    justify-content: center;
}
.overlay-socials i {
    font-size: 1.5rem;
    color: white;
}

/* 4. Newsletter en Overlay */
.overlay-newsletter {
    text-align: center;
    color: white;
    width: 100%;
    max-width: 300px;
}
.overlay-newsletter label {
    font-family: 'Anton', sans-serif;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: block;
    font-size: 0.9rem;
}
.overlay-newsletter .newsletter-form {
    flex-direction: row; /* Input y botón en la misma línea si entra */
    justify-content: center;
}

/* 5. Créditos */
.overlay-credits {
    text-align: center;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.6);
    font-family: 'Inter', sans-serif;
    margin-top: auto; /* Empuja los créditos al final si sobra espacio */
}
.overlay-credits a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}



/* === GALERÍA DE SCROLL === */
.gallery-scroll-container {
    position: relative;
    width: 100%;
    z-index: 1; /* Detrás de la UI */
}

/* Si se quiere que cada imágen ocupe como maximo el alto del viewport */

/*
.photo-panel {
    width: 100%;
    height: 100vh; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;    
    border-bottom: 1px solid rgba(0,0,0,0.1); 
} 

.gallery-scroll-container .photo-panel.first {
    background-image: url(img/tigermood-live-2.webp);
}

.gallery-scroll-container .photo-panel.second {
    background-image: url(img/tigermood-live-3.webp);
}

.gallery-scroll-container .photo-panel.third {
    background-image: url(img/tigermood-live-4.webp);
}

.gallery-scroll-container .photo-panel.fourth {
    background-image: url(img/tigermood-live-7.webp);
}

.gallery-scroll-container .photo-panel.fifth {
    background-image: url(img/tigermood-live-6.webp);
}

.gallery-scroll-container .photo-panel.six {
    background-image: url(img/);
}

.gallery-scroll-container .photo-panel.seven {
    background-image: url(img/);
}

.gallery-scroll-container .photo-panel.eight {
    background-image: url(img/);
}

.gallery-scroll-container .photo-panel.nine {
    background-image: url(img/);
}

.gallery-scroll-container .photo-panel.ten {
    background-image: url(img/);
}

.gallery-scroll-container .photo-panel.eleven {
    background-image: url(img/);
}

.gallery-scroll-container .photo-panel.twelve {
    background-image: url(img/);
}

.gallery-scroll-container .photo-panel.thirteen {
    background-image: url(img/);
}

.gallery-scroll-container .photo-panel.fourteen {
    background-image: url(img/);
}

.gallery-scroll-container .photo-panel.fiveteen {
    background-image: url(img/);
}

.gallery-scroll-container .photo-panel.sixteen {
    background-image: url(img/);
}

.gallery-scroll-container .photo-panel.seventeen {
    background-image: url(img/);
}

.gallery-scroll-container .photo-panel.eighteen {
    background-image: url(img/);
}

.gallery-scroll-container .photo-panel.nineteen {
    background-image: url(img/);
}

.gallery-scroll-container .photo-panel.twenty {
    background-image: url(img/);
}

*/

/* === GALERÍA DE SCROLL (Con el alto original de cada foto) === */
.gallery-scroll-container {
    position: relative;
    width: 100%;
    z-index: 1; /* Detrás de la UI */
    display: flex;       /* Elimina espacios extraños entre imágenes */
    flex-direction: column;
}

.gallery-img {
    width: 100%;        /* Ocupa siempre todo el ancho de la pantalla */
    height: auto;       /* La altura se ajusta sola según la proporción de la foto */
    display: block;     /* Evita márgenes inferiores indeseados */
    object-fit: cover;  /* Asegura buen comportamiento */
}


/* =========================================
   PÁGINA VIDEOS (CORREGIDO)
   ========================================= */

/* Contenedor Principal (Scroll Snap) */
.videos-scroll-container {
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory; /* Efecto "imán" */
    background-color: #000;
}

/* Panel individual de cada video */
.video-panel {
    width: 100%;
    height: 100vh; /* Ocupa toda la altura de la pantalla */
    scroll-snap-align: start;
    position: relative;
    overflow: hidden; /* Evita desbordes */
}

/* El contenedor del iframe de YouTube */
.yt-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Forzamos a que ocupe todo el panel */
    border: none;
}

/* Iframe generado por la API (Ajuste fino) */
.yt-player iframe {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Intenta cubrir, aunque YouTube maneja sus propias barras negras si el formato no coincide */
}


/* Clase para ocultar la UI suavemente */
.fixed-ui.videos {
    transition: opacity 0.5s ease, visibility 0.5s ease;
    opacity: 1;
    visibility: visible;
}

.fixed-ui.videos.ui-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Para que no moleste al clic */
}


   




/* =========================================
   ESTILOS PÁGINA SHOWS
   ========================================= */

/* 1. Fondo específico para Shows */
.shows-bg {
    /* Usamos la foto del bajista o la que prefieras, oscurecida */
    background-image: url('img/tigermood-live-8.webp');
    opacity: .3; 
    background-size: cover;
    background-position: center center;
}

/* 2. Contenedor Principal Centrado */
.shows-container {
    position: relative;
    z-index: 10; /* Encima del fondo */
    width: 100%;
    padding-top: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Centrado horizontal */
    
}

.page-title {
   
    font-size: 3rem;
    color: white;
    margin-bottom: 2rem;
    letter-spacing: 2px;
    text-shadow: 2px 2px 0px #000;    
    border-bottom: 2px solid #e05a36; /* Detalle naranja */
}

/* 3. Lista de Tour */
.tour-list {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Si hay muchos shows, permitimos scroll dentro de la lista */ 
    overflow-y: auto;
    padding-right: 10px; /* Espacio para scrollbar */
}

/* Scrollbar personalizada minimalista */
.tour-list::-webkit-scrollbar { width: 5px; }
.tour-list::-webkit-scrollbar-thumb { background: #e05a36; border-radius: 5px; }
.tour-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.1); }

/* 4. Item Individual (Fila) */
.tour-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.6); /* Fondo negro semitransparente para leer bien */
    padding: 15px 25px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.tour-item:hover {
    border-color: #e05a36; /* Borde naranja al pasar el mouse */
    background: rgba(0, 0, 0, 0.8);
    transform: translateX(10px); /* Pequeño movimiento */
}

/* Evento destacado */
.outstanding {
 background-color: #e05a36;
}

.outstanding .tour-date .day{
 color: #fff;
}

/* Fecha */
.tour-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    min-width: 60px;
}
.tour-date .day {
    font-family: 'Anton', sans-serif;
    font-size: 1.8rem;
    color: #e05a36;
    line-height: 1;
}
.tour-date .month {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
}

/* Info (Lugar y Ciudad) */
.tour-info {
    flex-grow: 1; /* Ocupa el espacio disponible */
    padding: 0 15px;
    text-align: left;
}
.tour-info .venue {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    margin: 0;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.tour-info .city {
    font-size: 0.9rem;
    opacity: 0.7;
    margin-top: 5px;
}

/* 5. Botones */
.ticket-btn {
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 10px 25px;
    border: 2px solid white;
    color: white;
    background: transparent;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap; /* Evita que el texto baje de línea */
}

.ticket-btn:not(.disabled):hover {
    background: white;
    color: black;
}

/* ESTILO SOLD OUT (Bloqueado) */
.ticket-btn.disabled {
    border-color: #555;
    color: #777;
    background: rgba(0,0,0,0.5);
    cursor: not-allowed; /* Muestra el icono de prohibido */
    pointer-events: none; /* Deshabilita clics */
    position: relative;
    overflow: hidden;
}

/* Efecto visual de tachado (opcional, muy estiloso) */
.ticket-btn.disabled::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #555;
    transform: rotate(-10deg);
}

.sold-out-item {
    opacity: 0.7; /* Toda la fila se ve un poco más apagada */
}
.sold-out-item:hover {
    border-color: rgba(255,255,255,0.2); /* No se pone naranja al hover */
    transform: none; /* No se mueve */
}




/* =========================================
   PÁGINA DE BANDA (EPK) - CON EFECTO STICKY
   ========================================= */

/* 1. Contenedor Principal */
.band-container {
    width: 100%;
    min-height: 100vh;
    padding-bottom: 0; /* Quitamos padding para que el footer pegue bien */
    background-color: #000;    
    color: white;
    overflow: visible;
    contain: paint;
    /* Quitamos z-index y position relative globales para que el sticky fluya */
}

/* REGLA GENERAL PARA EL EFECTO DE SUPERPOSICIÓN */
/* Esto aplica a TODAS las secciones directas dentro del main */
.band-container section {
    position: sticky;       /* La magia: se pega al scrollear */
    top: 0;                 /* Se clava en el techo */
    width: 100%;
    overflow: hidden;       /* Evita desbordes */
    box-shadow: 0 -5px 20px rgba(0,0,0,0.8); /* Sombra para profundidad */
    border-top: 1px solid rgba(255,255,255,0.05); /* Separador sutil */
    scroll-snap-align: start;     
    /* Un poco de margen de scroll para que no se pegue tan violentamente al borde */
    scroll-margin-top: 0px;
}

/* 2. HERO SECTION */
.band-hero {
    /* El Hero es la base (z-index 1) */
    z-index: 1;
    height: 100vh; 
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: start;
    text-align: start;
    background-image: url('img/tigermood-sesion1-ah.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: sticky; /* Refuerzo */
    padding: 50px;
}

.band-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(0,0,0,0) 10%, rgba(0,0,0,0.7) 80%);
    z-index: 1;
}

.band-hero > * { position: relative; z-index: 2; }

.band-title {
    font-family: "Druk Cond Super Trial", sans-serif;
    font-size: 15rem;    
    margin-bottom: 10px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
}

.band-tagline {
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #e05a36;
    letter-spacing: 3px;
    margin-bottom: 20px;
}

.band-location {
    font-size: 0.9rem;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* 3. MÉTRICAS */
.band-metrics {
    z-index: 2; /* Capa 2 */
    background-color: #111; /* Fondo sólido OBLIGATORIO */
    display: flex;
    justify-content: center;
    gap: 50px;
    padding: 60px 20px;
    flex-wrap: wrap;
    min-height: 40vh; /* Altura mínima para que se note el efecto al scrollear */
    align-items: center;
}

.metric-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.metric-item i { font-size: 2rem; color: #e05a36; margin-bottom: 5px; }
.metric-item .number { font-size: 2.5rem; font-weight: 800; line-height: 1; }
.metric-item .label { font-size: 0.8rem; text-transform: uppercase; opacity: 0.6; letter-spacing: 1px; }

/* 4. BIO */
.band-bio {    
    z-index: 3; /* Capa 3 */    
    padding: 80px 20px;
    display: flex;
    justify-content: center;
    min-height: 100vh; /* Le damos altura para scrollear */
    background: rgb(31,28,100); /* Fallback */
    background: linear-gradient(180deg, #1f1c64 0%, #00939f 55%, #f4d5cd 100%);  
    background-size: cover;
}

.band-bio::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* URL de un patrón de ruido transparente pequeño */
    background-image: url('https://grainy-gradients.vercel.app/noise.svg'); 
    opacity: 0.25; /* Ajusta la intensidad del grano aquí (0.1 a 0.5) */
    pointer-events: none; /* Permite hacer clic a través del ruido */
    mix-blend-mode: overlay; /* Mezcla el ruido con el color */
}

.bio-content { max-width: 800px; text-align: left; }
.bio-content h2 { font-family: "Asimovian", sans-serif; font-size: 3rem; margin-bottom: 30px; color: #e05a36; }
.bio-content p { font-family: 'Inter', sans-serif; line-height: 1.6; margin-bottom: 20px; font-size: 1.1rem; color: #ddd; }
.bio-content .highlight-text { font-size: 1.3rem; font-weight: bold; color: white; border-left: 4px solid #e05a36; padding-left: 20px; margin: 30px 0; }


.band-staff {
    z-index: 4; /* Capa 3 */
    background-color: #000; /* Fondo sólido */
    padding: 80px 20px;
    display: flex;
    justify-content: center;
    
}

.members-list { width: 50%; margin-top: 40px; background: #1a1a1a; padding: 30px; border-radius: 8px; }
.members-list h3 { margin-bottom: 15px; letter-spacing: 1px; }
.members-list ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.members-list li { font-size: 0.95rem; border-bottom: 1px solid #333; padding-bottom: 5px; }

/* 5. DISCOGRAFÍA */
.band-discography {
    position: relative !important;
    top: auto !important;
    z-index: 5; /* Capa 4 */
    background-color: #050505; /* Un negro levemente distinto */
    padding: 80px 20px;
    max-width: 100%; /* Ocupa todo el ancho para tapar lo de abajo */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: max-content;
    scroll-snap-align: none;
}
/* (Mantengo tus estilos internos de discos igual) */
.section-title-deco {font-size: 3rem; color: white; margin-bottom: 60px; display: flex; align-items: center; gap: 15px; align-self: center; }
.section-title-deco::before { content: ''; display: block; width: 40px; height: 4px; background-color: #e05a36; }
.album-entry { margin-bottom: 80px; max-width: 1100px; width: 100%; }
.album-header-text { display: flex; align-items: baseline; gap: 15px; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px; }
.album-header-text h3 { font-size: 2rem; color: white; text-transform: uppercase; letter-spacing: 1px; margin: 0; }
.album-header-text .album-year { font-family: 'Inter', sans-serif; font-size: 1.2rem; color: #ccc; font-weight: 400; }
.album-content { display: flex; gap: 30px; align-items: flex-start; }
.album-art { flex: 0 0 350px; position: relative; padding-left: 15px; }
.album-art::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background-color: #e05a36; border-radius: 2px; }
.album-art img { width: 100%; height: auto; display: block; border-radius: 8px; box-shadow: 0 10px 20px rgba(0,0,0,0.5); aspect-ratio: 1/1; object-fit: cover; }
.album-embed { flex: 1; background: #111; border-radius: 12px; width: 100%; }

/* 6. DOWNLOADS */
.band-downloads {
    z-index: 6; /* Capa 5 */
    background-color: #0a0a0a;
    padding: 80px 20px;
    text-align: center;
    min-height: 60vh;
}
.band-downloads h2 { font-size: 2.5rem; margin-bottom: 10px; }
.band-downloads p { margin-bottom: 40px; opacity: 0.6; }
.download-grid { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; max-width: 1000px; margin: 0 auto; }
.download-btn { display: flex; align-items: center; gap: 10px; padding: 15px 25px; background-color: white; color: black; text-decoration: none; font-weight: 700; text-transform: uppercase; font-size: 0.9rem; transition: all 0.3s; min-width: 250px; justify-content: center; }
.download-btn:hover { background-color: #e05a36; color: white; transform: translateY(-5px); }
.download-btn.outline { background: transparent; border: 2px solid white; color: white; }
.download-btn.outline:hover { background: white; color: black; border-color: white; }

/* 7. MANAGEMENT */
.band-management {
    z-index: 7; /* Capa 6 */
    background-color: #000;
    padding: 60px 20px 100px 20px;
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    min-height: 50vh;
}
.mgmt-card { border: 1px solid #333; padding: 30px; width: 300px; text-align: center; background: #050505; }
.mgmt-card h3 { color: #e05a36; font-family: 'Anton', sans-serif; margin-bottom: 15px; letter-spacing: 1px; }
.mgmt-card .name { font-weight: bold; font-size: 1.2rem; margin-bottom: 15px; }
.contact-link { display: block; color: #aaa; text-decoration: none; margin-bottom: 5px; transition: color 0.3s; }
.contact-link:hover { color: white; }



/* =========================================
   PÁGINA TIENDA (SHOP)
   ========================================= */

/* Contenedor Principal */
.shop-container {
    width: 100%;
    min-height: 100vh;
    background-color: #0a0a0a; /* Fondo negro casi puro */
    color: white;
    position: relative;
    z-index: 10;
    padding-block: 100px; /* Espacio para footer móvil */
}

/* 1. HERO SECTION TIENDA */
.shop-hero {
    height: 50vh; /* Hero más corto que en Banda */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Foto de fondo estilo merch (ej. alguien con una remera de la banda) */
    background-image: url('img/shop-hero-bg.jpg'); 
    background-size: cover;
    background-position: center;
    position: relative;
    margin-bottom: 50px;
}

.shop-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); /* Oscurecer */
    z-index: 1;
}
.shop-hero > * { position: relative; z-index: 2; }

.shop-title {
    font-size: 4rem;
    letter-spacing: 3px;
    margin-bottom: 10px;
    color: #e05a36; /* Naranja */
}
.shop-tagline {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 4px;
}

/* 2. GRILLA DE PRODUCTOS */
.products-grid {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    /* Desktop: 4 columnas iguales */
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* TARJETA DE PRODUCTO */
.product-card {
    background: #111; /* Tarjeta gris muy oscuro */
    border: 1px solid #333;
    border-radius: 12px;
    overflow: hidden; /* Para que la imagen respete bordes */
    transition: transform 0.3s, border-color 0.3s;
}

.product-card:hover {
    border-color: #e05a36;
    transform: translateY(-5px);
}

/* CARRUSEL INTERNO DE LA TARJETA */
.product-carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* Cuadrado perfecto para la foto */
    background: #000;
    overflow: hidden;
    cursor: pointer; /* Indica que se puede hacer click para ampliar */
}

.carousel-images {
    width: 100%;
    height: 100%;
    position: relative;
}

.card-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; /* Ocultas por defecto */
    transition: opacity 0.4s ease;
    pointer-events: none; /* Permite clicks a través de ellas hacia el contenedor para el zoom */
}

.card-img.active {
    opacity: 1; /* Solo la activa se ve */
    pointer-events: auto;
}

/* Flechas de navegación en tarjeta */
.card-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    width: 35px; height: 35px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 5;
    opacity: 0; /* Ocultas hasta hacer hover */
    transition: opacity 0.3s, background 0.3s;
    display: flex; align-items: center; justify-content: center;
}
.product-carousel:hover .card-nav { opacity: 1; }
.card-nav:hover { background: #e05a36; }
.card-nav.prev { left: 10px; }
.card-nav.next { right: 10px; }

/* Indicador de Zoom */
.zoom-indicator {
    position: absolute;
    bottom: 10px; right: 10px;
    color: white;
    background: rgba(0,0,0,0.6);
    padding: 5px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.product-carousel:hover .zoom-indicator { opacity: 1; }

/* INFO DEL PRODUCTO */
.product-info {
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.product-info h3 {
    
    font-size: 1.3rem;
    letter-spacing: 1px;
    margin: 0;
}
.short-desc {
    font-size: 0.9rem;
    color: #aaa;
    min-height: 40px; /* Para alinear alturas si los textos varían */
}
.price {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: white;
    margin: 10px 0;
}

/* Botón "LO QUIERO" */
.product-info a {
    background: #e05a36;
    color: white;
    border: none;
    padding: 12px;
    width: 100%;
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
}
.product-info a:hover {
    background: white;
    color: #e05a36;
    box-shadow: 0 0 15px rgba(224, 90, 54, 0.4);
}


/* =========================================
   MODALES Y AVISOS (TOAST & LIGHTBOX)
   ========================================= */

/* AVISO DE CARRITO (Toast) */
.toast-notification {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px); /* Oculto abajo */
    background-color: #1DB954; /* Verde éxito (estilo Spotify) */
    color: white;
    padding: 15px 25px;
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    z-index: 9999;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Efecto rebote */
}

/* Clase para mostrar el aviso */
.toast-notification.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* LIGHTBOX (Pantalla completa) */
.lightbox-modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.95); /* Fondo negro casi total */
    z-index: 10000; /* Encima de absolutamente todo */
    justify-content: center;
    align-items: center;
    padding: 50px;
}
/* Clase para mostrar el lightbox */
.lightbox-modal.active { display: flex; }

.lightbox-content img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
}

/* Controles del Lightbox */
.lightbox-close {
    position: absolute;
    top: 20px; right: 30px;
    font-size: 3rem;
    color: white;
    cursor: pointer;
    transition: color 0.3s;
}
.lightbox-close:hover { color: #e05a36; }

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    color: white;
    border: none;
    font-size: 3rem;
    cursor: pointer;
    padding: 20px;
    transition: color 0.3s;
}
.lightbox-nav:hover { color: #e05a36; }
.lightbox-nav.prev { left: 10px; }
.lightbox-nav.next { right: 10px; }



/* =========================================
   PÁGINA CONTACTO
   ========================================= */

/* 2. Contenedor Principal */
.contact-container {
    position: relative;
    z-index: 10;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;  
    padding-right: 250px;
}

.form {
    display: flex;
    flex-direction: column;
    padding-top: 150px;
}

.form h1 {
    text-align: end;
    padding-inline: 50px;
}

.foto-contacto {
    width: 100%;
}

.foto-contacto img {
    width: 100%;
}

/* 3. Wrapper del contenido */
.contact-wrapper{
    width: 100%;
    max-width: 600px;
    background: rgba(0, 0, 0, 0.7); /* Fondo tarjeta */
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
}

.contact-info-text {
    margin-bottom: 30px;
    color: #ccc;
    font-size: 0.9rem;
}

.direct-mail {
    color: #e05a36;
    font-weight: bold;
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.3s;
}
.direct-mail:hover { color: white; }

/* 4. Formulario Material Design */
.material-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    position: relative;
    width: 100%;
}

/* Inputs y Textarea */
.form-input {
    width: 100%;
    padding: 10px 0;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: white;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    outline: none;
    transition: border-color 0.3s;
    border-radius: 0; /* Reset mobile */
}

/* Efecto al hacer foco */
.form-input:focus {
    border-bottom-color: #e05a36;
}

/* Labels (Etiquetas) */
.form-label {
    position: absolute;
    top: 10px;
    left: 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    pointer-events: none; /* Permite hacer click a través del label */
    transition: 0.3s ease all;
}

/* MAGIA MATERIAL DESIGN:
   Si el input tiene foco O (:placeholder-shown) no está mostrando el placeholder (significa que hay texto)
   Mueve el label arriba */
.form-input:focus ~ .form-label,
.form-input:not(:placeholder-shown) ~ .form-label {
    top: -20px;
    font-size: 0.8rem;
    color: #e05a36;
    font-weight: bold;
}

/* Botón de Enviar */
.submit-btn.full-width {
    width: 100%;
    margin-top: 10px;
    background: #e05a36;
    border: none;
    color: white;
    padding: 15px;
    font-weight: bold;
    letter-spacing: 2px;
}

.submit-btn.full-width:hover {
    background: white;
    color: #e05a36;
}

.footer-logo {
    display: none;
}

    .footer-pags {
        display: none;
    }


@media (max-width: 768px) {

    /* --- MENÚ EN EL HOME | ÚNICO MENÚ QUE PERMANECE VISIBLE EN MOBILE CELULARES --- */

    
    .hero-video.mobile {
        display: block;
    }

    .fixed-ui.home {
        position: absolute;
        display: block;
        height: auto;
        min-height: 100vh;
        overflow-y: visible;
    } 
   

    /* ACTIVAR MENÚ HAMBURGUESA */
    .menu-toggle { display: flex; }
    .mobile-menu-overlay { display: flex; } /* Sigue oculto por right:-100% hasta que tenga .active */
    .mobile-menu-overlay .mobile-top-logo { width: 13rem;}
    /* OPACIDAD DEL FONDO DEL INDEX EN CELULARES */
    .overlay {
        background: radial-gradient(circle, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.8) 100%);
    }   


    /* --- RESPONSIVE PARA SHOWS --- */

    .fixed-ui {
        display: none;
        flex-direction: column;
        justify-content: space-between;
        padding: 20px;
        /* En móvil, reorganizamos la UI fija para que no tape las fotos */
        background: rgba(0,0,0,0.3); /* Un poco de fondo para leer textos */
    }
    
    .top-left, .top-right, .middle-right, .middle-left, .bottom-left, .bottom-right {
        position: static;
        transform: none;
        width: 100%;
        text-align: center;        
        margin-bottom: 15px;
    }


    .social-icons {justify-content: center;}
    
    .middle-right {
        margin-block: 70px;
    }

    .middle-left {          
        margin: 50px 0;        
        max-width: none;
    }
    
    .injected-date {
        align-items: center;
    }

    
    .newsletter-form { flex-direction: column; }
    .newsletter-form input { width: 100%; text-align: center; }
    
    /* Las fotos en móvil pueden ser más pequeñas si se desea, o mantenerse full screen */
    .photo-panel { height: 100vh; background-attachment: scroll; }

    
    
    
    /* PÁGINA VIDEOS EN CELULARES */

     .videos-scroll-container {
        height: auto;
        overflow-y: auto;
        scroll-snap-type: none;
    }
    
    .video-panel {
        height: 100vh; /* En móvil también queremos pantalla completa */
        scroll-snap-align: none;
    }
    

    /* PÁGINA SHOWS EN CELULARES */

    .shows-container {
        padding: 150px 20px 80px 20px; /* Ajuste padding para móvil (arriba/abajo por el menú) */
        justify-content: flex-start; /* Alinear arriba para scrollear */
    }

    .page-title {
        font-size: 2rem;
        align-self: center;
        width: 90%;
    }

    .tour-list {
        padding-right: 0;
        max-width: none;
        height: max-content;
    }

    .tour-item {
        flex-direction: column; /* Apilar elementos en vertical */
        text-align: center;
        gap: 15px;
        padding: 20px;
    }

    .tour-date { margin-right: 0; margin-bottom: 5px; }
    .tour-info { text-align: center; padding: 0; margin-bottom: 20px; }    
    .tour-item:hover { transform: none; }

    
    /* PAGINA DE BANDA EN CELULARES */


    .band-hero { background-image: url(img/tigermood-sesion1-bv.webp); padding: 60px 30px; }
    .band-title { font-size: 7rem }
    .band-metrics { flex-direction: column; gap: 40px; min-height: auto; }
    .band-bio {position: relative !important;
    top: auto !important;
    padding-bottom: 10rem;
    height: auto;  }
    .members-list { width: 100%;}
    .album-content { flex-direction: column; }
    .album-art { width: 100%; max-width: 350px; margin-bottom: 20px; }
    .download-grid { flex-direction: column; }
    .download-btn { width: 100%; }
    
    /* En móviles, si una sección es muy alta, el sticky puede molestar. 
       Si prefieres el scroll normal en celular, descomenta lo siguiente: */
    /*
    .band-container section {
        position: relative;
        top: auto;
    }
    */

    .section-title-deco {
        font-size: 2.5rem;
    }
    
    
    /* --- LOGO FIJO MÓVIL --- */

    .mobile-top-logo {
        display: block; /* Oculto en escritorio */
        position: fixed;
        top: 25px;     /* Misma altura que la X de cerrar */        
        z-index: 9997; /* Por encima de todo */
        width: 9rem;   /* Tamaño controlado para móvil */
        transition: transform 0.3s;
    }

    .mobile-top-logo img {
        width: 100%;
        height: auto;
        filter: brightness(0) invert(1); /* Asegura que sea blanco puro */
        drop-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Sombra para que se vea sobre fotos claras */
    }

    /* Efecto al tocar */
    .mobile-top-logo:active {
        transform: scale(0.9);
    }


    
    /* --- RESPONSIVE STORE (Mobile) --- */

    .shop-hero { height: 30vh; }
    .shop-title { font-size: 3rem; }
    .products-grid {
        /* Mobile: 1 columna */
        grid-template-columns: 1fr;
        padding: 0 20px;
        gap: 40px;
    }
    .card-nav { opacity: 1; /* Flechas siempre visibles en móvil */ }

    /* Ajuste lightbox en tienda para móviles  */
    .lightbox-content img { width: 100%; }
    .lightbox-nav { font-size: 2rem; padding: 10px; }



    /* --- RESPONSIVE CONTACTO --- */

    /* 2. Contenedor Principal */

    .contact-container {
        flex-direction: column;
        justify-content: flex-start;
        padding-right: 0;
    }

    .form {
        display: flex;
        flex-direction: column;
        padding-top: 150px;
        width: 100%;
    }

    .form h1 {
        text-align: center;
        padding-inline: 0px;
    }

    .foto-contacto {
        display: none;
    }
   

    .contact-wrapper {
        padding: 25px;
        border: none;
        background: transparent; /* En móvil limpiamos el fondo para que sea más ligero */
    }

    .form-input {
        background: rgba(0,0,0,0.3); /* Un poco de fondo en el input para legibilidad */
        padding: 15px;
        border-bottom: none;
    }

    .form-label {
        left: 15px; /* Ajustar label al padding del input */
        top: 15px;
    }

    .form-input:focus ~ .form-label,
    .form-input:not(:placeholder-shown) ~ .form-label {
        top: -25px;
        left: 0;
    }    
    
    /* --- FOOTER EXCLUSIVO EN CELULARES MOVILES --- */
      
    .footer-pags {
        display: flex;
        position: relative;
        height: 100vh;
        justify-content: space-evenly;
        flex-direction: column;
        padding-block: 10px;
        background-color: #000;
        color: #fff;
        z-index: 9997;        
    }

    .footer-logo { 
        display: block;
        width: 100%; 
        filter: brightness(0) invert(1); 
        justify-self: center;
        align-self: center;
        text-align: center;
    }

    .footer-logo img {
        width: 60%;
        height: auto;
        filter: brightness(0) invert(1); /* Asegura que sea blanco puro */
        drop-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Sombra para que se vea sobre fotos claras */
    } 
}

@media (max-width: 361px) {
    
    .middle-right {
        margin-block: 30px;
    }

    .band-bio {
        position: relative !important;
        top: auto !important;
        padding-bottom: 10rem;
        height: auto;
    }

}

/* =========================================
   EFECTOS GLOBALES (SCROLL LENIS & TRANSICIONES)
   ========================================= */

/* 1. ANIMACIÓN DE ENTRADA (PAGE TRANSITION) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px); /* Empieza 20px más abajo */
        filter: blur(5px); /* Un leve desenfoque inicial queda muy "pro" */
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}