/* CSS Reset - Normalización de estilos */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%; /* 1rem = 10px */
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-size: 1.6rem;
    line-height: 1.6;
    font-family: 'Roboto', sans-serif;
    color: #ffffff;
    background-color: #000000;
    overflow-x: hidden;
    position: relative;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    line-height: 1.2;
}

ul, ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    padding: 0;
    outline: none;
}

input, textarea, select {
    font: inherit;
    color: inherit;
    outline: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Scrollbar Styles */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #111111;
}

::-webkit-scrollbar-thumb {
    background: #8B0000;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a00000;
}

/* Selection */
::selection {
    background-color: #8B0000;
    color: #ffffff;
}

::-moz-selection {
    background-color: #8B0000;
    color: #ffffff;
}/* ========================================
   Variables Globales
======================================== */
:root {
    --color-primary: #8B0000;
    --color-primary-dark: #660000;
    --color-primary-light: #a00000;
    --color-secondary: #FFD700;
    --color-black: #000000;
    --color-dark: #0a0a0a;
    --color-gray: #808080;
    --color-gray-dark: #333333;
    --color-gray-light: #cccccc;
    --color-white: #ffffff;

    --font-bebas: 'Bebas Neue', cursive;
    --font-oswald: 'Oswald', sans-serif;
    --font-roboto: 'Roboto', sans-serif;

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);

    --z-loading: 10000;
    --z-navigation: 9000;
    --z-dropdown: 9999;
    --z-dots: 900;
    --z-content: 10;
    --z-background: 1;
}

/* ========================================
   Componentes Base
======================================== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.section-title {
    font-family: var(--font-bebas);
    font-size: clamp(4rem, 8vw, 8rem);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 4rem;
    text-align: center;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
}

/* ========================================
   Buttons
======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 3rem;
    font-family: var(--font-oswald);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 2px solid transparent;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.btn-primary:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary-light);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(139, 0, 0, 0.3);
}

.btn-outline {
    background: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}

.btn-outline:hover {
    background: var(--color-white);
    color: var(--color-black);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
}

.btn-small {
    padding: 1rem 2rem;
    font-size: 1.4rem;
}

/* ========================================
   Loading Screen
======================================== */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-loading);
    transition: opacity 0.5s, visibility 0.5s;
}

#loading-screen.loaded {
    opacity: 0;
    visibility: hidden;
}

.loader {
    text-align: center;
}

.loader-logo {
    width: 200px;
    height: 100px;
    margin: 0 auto 3rem;
    animation: pulse 2s infinite;
}

.loader-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.loader-progress {
    width: 200px;
    height: 2px;
    background: var(--color-gray-dark);
    position: relative;
    overflow: hidden;
}

.loader-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: var(--color-primary);
    transition: width 0.3s;
}

/* ========================================
   Navigation
======================================== */
.navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2rem 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    z-index: var(--z-navigation);
    transition: var(--transition);
}

.navigation.scrolled {
    padding: 1rem 0;
    background: rgba(0, 0, 0, 0.95);
}

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

.nav-logo {
    width: 350px;
    height: 100px;
    transition: var(--transition);
    display: flex;
    align-items: center;
}

.nav-logo:hover {
    transform: scale(1.05);
}

.nav-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 5px;
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.3));
    transition: filter 0.3s ease;
}

.nav-logo:hover img {
    filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.6));
}

.nav-menu {
    display: flex;
}

.nav-list {
    display: flex;
    gap: 3rem;
}

.nav-link {
    font-family: var(--font-oswald);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-gray-light);
    position: relative;
    transition: var(--transition);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width 0.3s;
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-white);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* Mobile Menu Toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    z-index: 1001;
}

.nav-toggle span {
    width: 25px;
    height: 2px;
    background: var(--color-white);
    transition: var(--transition);
}

.nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ========================================
   Side Navigation Dots
======================================== */
.side-dots {
    position: fixed;
    right: 3rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-dots);
}

.side-dots ul {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.side-dots a {
    display: block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--color-gray);
    border-radius: 50%;
    position: relative;
    transition: var(--transition);
}

.side-dots a::before {
    content: attr(data-tooltip);
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-black);
    color: var(--color-white);
    padding: 0.5rem 1rem;
    font-size: 1.2rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.side-dots a:hover::before {
    opacity: 1;
    visibility: visible;
}

.side-dots li.active a,
.side-dots a:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* ========================================
   Hero Section
======================================== */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-background);
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0.7) 100%
    );
}

.hero-content {
    position: relative;
    z-index: var(--z-content);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 2rem;
}

.hero-logo-container {
    animation: fadeInUp 1s ease-out;
}

.hero-logo {
    width: clamp(250px, 50vw, 500px);
    height: auto;
    margin-bottom: 2rem;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
    border-radius: 10px;
    object-fit: contain;
}

.hero-tagline {
    font-family: var(--font-bebas);
    font-size: clamp(6rem, 10vw, 12rem);
    text-transform: uppercase;
    letter-spacing: 0.3em;
    background: linear-gradient(45deg, var(--color-white), var(--color-gray-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    animation: fadeInUp 1s ease-out 0.2s both;
}

.hero-subtitle {
    font-family: var(--font-oswald);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-gray-light);
    margin-bottom: 4rem;
    animation: fadeInUp 1s ease-out 0.4s both;
}

.hero-cta {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
    animation: fadeInUp 1s ease-out 0.6s both;
}

.hero-scroll {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    animation: fadeInUp 1s ease-out 0.8s both;
}

.hero-scroll span {
    font-family: var(--font-oswald);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 1.2rem;
    color: var(--color-gray-light);
}

.scroll-arrow {
    animation: bounce 2s infinite;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
}

/* ========================================
   Album Section
======================================== */
.album-section {
    background: var(--color-dark);
    position: relative;
    padding: 10rem 0;
}

.album-marquee {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    overflow: hidden;
    opacity: 0.1;
    z-index: 1;
}

.marquee-content {
    display: flex;
    animation: marquee 20s linear infinite;
    white-space: nowrap;
}

.marquee-content span {
    font-family: var(--font-bebas);
    font-size: 20rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding: 0 5rem;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.album-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* Vinyl Container */
.album-vinyl-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* REMOVED - Duplicate definition causing issues */

/* REMOVED - Using the definition from line 1634 instead */

.vinyl-texture {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: repeating-radial-gradient(
        circle at center,
        transparent 0,
        transparent 2px,
        rgba(255, 255, 255, 0.03) 2px,
        rgba(255, 255, 255, 0.03) 3px
    );
    pointer-events: none;
}

.disc-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* REMOVED - Using the enhanced definition later in the file */

.album-cover:hover {
    transform: translate(-50%, -50%) scale(1.05);
}

.album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.album-cover-border {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

@keyframes rotateVinyl {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Tracklist */
.album-tracklist-container {
    padding-left: 4rem;
}

.tracklist {
    list-style: none;
    counter-reset: track-counter;
}

.track-item {
    display: flex;
    align-items: center;
    padding: 1.5rem 2rem;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--transition);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.track-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(139, 0, 0, 0.1), transparent);
    transition: left 0.5s;
}

.track-item:hover {
    background: rgba(139, 0, 0, 0.1);
    border-color: rgba(139, 0, 0, 0.3);
    transform: translateX(10px);
}

.track-item:hover::before {
    left: 100%;
}

.track-number {
    font-family: var(--font-bebas);
    font-size: 2rem;
    color: var(--color-gray);
    margin-right: 2rem;
    min-width: 30px;
}

.track-title {
    flex: 1;
    font-family: var(--font-oswald);
    font-size: 1.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.track-duration {
    font-family: var(--font-roboto);
    font-size: 1.4rem;
    color: var(--color-gray);
    margin: 0 2rem;
}

.track-play {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.track-play:hover {
    background: var(--color-primary-light);
    transform: scale(1.1);
}

.track-play i {
    color: var(--color-white);
    font-size: 1.4rem;
}

.track-item.playing .track-play {
    background: var(--color-secondary);
    animation: pulse 1s infinite;
}

.track-item.playing .track-play i::before {
    content: "\f04c";
}

/* Album Links */
.album-links {
    display: flex;
    gap: 2rem;
    margin-top: 4rem;
    justify-content: center;
}

.album-link {
    width: 50px;
    height: 50px;
    border: 2px solid var(--color-gray);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.album-link:hover {
    background: var(--color-white);
    border-color: var(--color-white);
    transform: translateY(-5px);
}

.album-link i {
    font-size: 2rem;
    color: var(--color-gray);
    transition: var(--transition);
}

.album-link:hover i {
    color: var(--color-black);
}

/* ========================================
   Lightbox
======================================== */
.lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
}

.lightbox.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: 3rem;
    right: 3rem;
    font-size: 4rem;
    color: var(--color-white);
    cursor: pointer;
    transition: var(--transition);
}

.lightbox-close:hover {
    color: var(--color-primary);
    transform: rotate(90deg);
}/* ========================================
   TERMINATOR 2 STYLE - CYBERPUNK METAL
======================================== */

/* ========================================
   VARIABLES CYBERPUNK
======================================== */
:root {
    --t2-metal: linear-gradient(180deg, #c0c0c0 0%, #808080 50%, #404040 51%, #808080 100%);
    --t2-chrome: linear-gradient(180deg, #eee 0%, #999 50%, #777 51%, #999 100%);
    --t2-red: #ff0000;
    --t2-red-glow: #ff3333;
    --t2-blue: #00ffff;
    --t2-blue-dark: #0099cc;
    --t2-grid: rgba(0, 255, 255, 0.1);
    --font-terminator: 'Orbitron', monospace;
    --font-tech: 'Share Tech Mono', monospace;
    --font-industrial: 'Rajdhani', sans-serif;
}

/* ========================================
   HERO SECTION - TERMINATOR STYLE
======================================== */

/* Centrar y ajustar contenido */
.hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0 5%;
    padding-bottom: 6rem;
    text-align: center;
}

.hero-logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    width: 100%;
}

/* Subtítulo estilo T2 */
.hero-subtitle {
    font-family: var(--font-terminator) !important;
    font-size: clamp(1.2rem, 2.5vw, 2rem) !important;
    font-weight: 500;
    color: #c0c0c0 !important;
    text-transform: uppercase;
    letter-spacing: 0.3em !important;
    margin: 0 0 2rem 0 !important;
    position: relative;
    line-height: 1.4;
    text-shadow:
        0 0 10px rgba(0, 255, 255, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.8) !important;
    animation: terminalFlicker 5s infinite;
}

/* Nombre del álbum con efecto metálico T2 */
.album-name {
    font-family: var(--font-terminator) !important;
    font-weight: 700 !important;
    font-size: 1.3em !important;
    background: var(--t2-metal) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    position: relative;
    display: inline-block;
    padding: 0;
    animation: metalShine 3s ease-in-out infinite !important;
}

/* Quitar las comillas y agregar brackets estilo T2 */
.album-name::before {
    content: '[' !important;
    position: relative;
    left: auto;
    margin-right: 0;
    color: var(--t2-blue);
    font-weight: 400;
    animation: bracketPulse 2s infinite;
    -webkit-text-fill-color: var(--t2-blue) !important;
}

.album-name::after {
    content: ']' !important;
    position: relative;
    right: auto;
    margin-left: 0;
    color: var(--t2-blue);
    font-weight: 400;
    animation: bracketPulse 2s infinite;
    -webkit-text-fill-color: var(--t2-blue) !important;
}

/* Botones estilo T2 */
.hero-cta {
    margin-top: 2.5rem;
    display: flex;
    gap: 1.5rem;
    justify-content: center;
}

.btn {
    font-family: var(--font-industrial) !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    letter-spacing: 0.15em !important;
    padding: 1.5rem 3rem !important;
    position: relative;
    background: rgba(0, 0, 0, 0.8) !important;
    border: 2px solid transparent !important;
    text-transform: uppercase;
    overflow: visible !important;
    transition: all 0.3s ease !important;
}

/* Botón primario - Estilo T2 Red Alert */
.btn-primary {
    color: #fff !important;
    border-color: var(--t2-red) !important;
    background: linear-gradient(135deg,
        rgba(255, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0.7) 100%) !important;
    box-shadow:
        inset 0 0 30px rgba(255, 0, 0, 0.3),
        0 0 30px rgba(255, 0, 0, 0.5),
        0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg,
        transparent,
        var(--t2-red),
        transparent);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s;
    animation: rotateBorder 3s linear infinite;
}

.btn-primary:hover {
    transform: translateY(-2px) !important;
    border-color: var(--t2-red-glow) !important;
    box-shadow:
        inset 0 0 30px rgba(255, 0, 0, 0.3),
        0 0 40px rgba(255, 0, 0, 0.5),
        0 5px 20px rgba(255, 0, 0, 0.3) !important;
}

.btn-primary:hover::before {
    opacity: 1;
}

/* Botón outline - Estilo T2 Tech */
.btn-outline {
    color: var(--t2-blue) !important;
    border-color: var(--t2-blue) !important;
    background: linear-gradient(135deg,
        rgba(0, 255, 255, 0.15) 0%,
        rgba(0, 0, 0, 0.7) 100%) !important;
    box-shadow:
        inset 0 0 30px rgba(0, 255, 255, 0.2),
        0 0 30px rgba(0, 255, 255, 0.4),
        0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

.btn-outline::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg,
        transparent,
        var(--t2-blue),
        transparent);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s;
    animation: rotateBorder 3s linear infinite;
}

.btn-outline:hover {
    transform: translateY(-2px) !important;
    color: #fff !important;
    border-color: var(--t2-blue) !important;
    box-shadow:
        inset 0 0 30px rgba(0, 255, 255, 0.2),
        0 0 40px rgba(0, 255, 255, 0.4),
        0 5px 20px rgba(0, 255, 255, 0.2) !important;
}

.btn-outline:hover::before {
    opacity: 1;
}

/* Iconos de botones */
.btn i {
    font-size: 0.9em;
    margin-left: 0.5rem;
}

/* Efecto de scanlines estilo T2 */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 255, 255, 0.03) 2px,
        rgba(0, 255, 255, 0.03) 4px
    );
    pointer-events: none;
    z-index: 4;
    animation: scanlines 8s linear infinite;
}

/* Grid pattern overlay */
.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(0, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: 3;
    animation: gridMove 20s linear infinite;
}

/* Animaciones T2 */
@keyframes terminalFlicker {
    0%, 100% { opacity: 1; }
    95% { opacity: 1; }
    96% { opacity: 0.8; }
}

@keyframes metalShine {
    0%, 100% {
        background-position: 0% 50%;
        filter: brightness(1);
    }
    50% {
        background-position: 100% 50%;
        filter: brightness(1.2);
    }
}

@keyframes bracketPulse {
    0%, 100% {
        opacity: 0.6;
        text-shadow: 0 0 5px currentColor;
    }
    50% {
        opacity: 1;
        text-shadow: 0 0 15px currentColor;
    }
}

@keyframes rotateBorder {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes scanlines {
    0% { transform: translateY(0); }
    100% { transform: translateY(10px); }
}

@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

/* HUD Elements estilo T2 */
.hero-content::before {
    content: '◢ SYSTEM ONLINE ◣';
    position: absolute;
    top: -4rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-tech);
    font-size: 0.8rem;
    color: var(--t2-blue);
    opacity: 0.6;
    letter-spacing: 0.3em;
    animation: hudFlash 3s infinite;
}

@keyframes hudFlash {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* Ajustar scroll indicator - centrado debajo de botones */
.hero-scroll {
    position: fixed !important;
    bottom: 3rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-family: var(--font-tech) !important;
    color: var(--t2-blue) !important;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    text-align: center;
    animation: bounce 2s infinite !important;
    z-index: 10 !important;
}

.hero-scroll span {
    display: block;
    margin-bottom: 0.5rem;
    opacity: 0.8;
}

.scroll-arrow i {
    color: var(--t2-blue);
    font-size: 1.2rem;
}

@keyframes bounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-10px);
    }
}

/* ========================================
   LOADING SCREEN - T2 STYLE
======================================== */
#loading-screen {
    background: #000000 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
}

#loading-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 255, 255, 0.02) 2px,
        rgba(0, 255, 255, 0.02) 4px
    );
    animation: scanlines 8s linear infinite;
    pointer-events: none;
}

.loader-text {
    font-family: var(--font-terminator) !important;
    font-size: 2.5rem !important;
    letter-spacing: 0.4em !important;
    background: var(--t2-chrome) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    animation: metalShine 2s ease-in-out infinite !important;
}

.loader-segments {
    border: 1px solid rgba(0, 255, 255, 0.3);
    padding: 5px;
    background: rgba(0, 0, 0, 0.5);
}

.segment {
    background: rgba(0, 255, 255, 0.1) !important;
    border: 1px solid rgba(0, 255, 255, 0.2) !important;
}

.segment.active {
    background: linear-gradient(180deg, var(--t2-blue), var(--t2-blue-dark)) !important;
    border-color: var(--t2-blue) !important;
    box-shadow:
        0 0 15px rgba(0, 255, 255, 0.8),
        inset 0 0 10px rgba(255, 255, 255, 0.3) !important;
}

.loader-percentage {
    font-family: var(--font-tech) !important;
    font-size: 1.2rem !important;
    color: var(--t2-blue) !important;
    margin-top: 1rem;
    letter-spacing: 0.2em !important;
}

.loader-percentage::before {
    content: '[ ';
    opacity: 0.5;
}

.loader-percentage::after {
    content: ' ]';
    opacity: 0.5;
}/* ========================================
   ALBUM SECTION - TERMINATOR 2 STYLE
======================================== */

/* Layout mejorado con márgenes */
.album-section {
    background: #000;
    padding: 8rem 0;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Album Background Image Layer - Full Section Coverage */
.album-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.7) 0%,
            rgba(0, 0, 0, 0.5) 20%,
            rgba(0, 0, 0, 0.5) 80%,
            rgba(0, 0, 0, 0.7) 100%
        ),
        url('/media/back1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: grayscale(100%) contrast(1.3) brightness(0.5);
    opacity: 0.35; /* Más visible pero sigue siendo sutil */
    z-index: 0;
    pointer-events: none;
}

/* Ensure all content is above the background */
.album-section .section-header,
.album-section .container,
.album-section .album-grid {
    position: relative;
    z-index: 1;
}

/* ========================================
   6. FONDO INDUSTRIAL
======================================== */

/* Grid pattern de fondo */
.album-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(0, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 100px 100px;
    z-index: 1;
    animation: gridFloat 30s linear infinite;
}

/* Scanlines verticales */
.album-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 100px,
        rgba(0, 255, 255, 0.01) 100px,
        rgba(0, 255, 255, 0.01) 101px
    );
    z-index: 1;
    animation: scanVertical 10s linear infinite;
}

@keyframes gridFloat {
    0% { transform: translate(0, 0); }
    100% { transform: translate(100px, 100px); }
}

@keyframes scanVertical {
    0% { transform: translateX(0); }
    100% { transform: translateX(100px); }
}

/* Contenedor para partículas de datos */
.data-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.data-particle {
    position: absolute;
    color: var(--t2-blue);
    font-family: var(--font-tech);
    font-size: 0.7rem;
    opacity: 0.3;
    animation: dataFloat 15s linear infinite;
    text-shadow: 0 0 10px currentColor;
}

@keyframes dataFloat {
    0% {
        transform: translateY(100vh) translateX(0) rotateZ(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(-100vh) translateX(100px) rotateZ(360deg);
        opacity: 0;
    }
}

/* Asegurar que el contenido esté por encima del fondo */
.album-section .container,
.album-marquee {
    position: relative;
    z-index: 10;
}

.album-section .container {
    max-width: 1200px;
    width: 100%;
    padding: 0 5rem;
    margin: 0 auto;
}

.album-grid {
    display: grid;
    grid-template-columns: minmax(400px, 1fr) minmax(400px, 1fr);
    gap: 80px;
    align-items: center;
    margin: 5rem auto;
    max-width: 100%;
}

/* ========================================
   SECTION HEADER - REEMPLAZO DEL MARQUEE
======================================== */
.section-header {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
}

.section-title-main {
    font-family: var(--font-terminator);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    background: linear-gradient(180deg,
        #c0c0c0 0%,
        #808080 50%,
        #404040 51%,
        #808080 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: inline-block;
    animation: metalShine 4s ease-in-out infinite;
}

/* Efecto de sombra 3D */
.section-title-main::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background: none;
    -webkit-text-fill-color: #000;
    text-shadow:
        1px 1px 0 #333,
        2px 2px 0 #222,
        3px 3px 5px rgba(0, 0, 0, 0.5);
    opacity: 0.3;
}

.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    opacity: 0.6;
}

.divider-line {
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        var(--t2-blue),
        transparent);
    position: relative;
    overflow: hidden;
}

.divider-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.5),
        transparent);
    animation: scanDivider 3s infinite;
}

@keyframes scanDivider {
    0% { left: -100%; }
    100% { left: 100%; }
}

.divider-icon {
    color: var(--t2-blue);
    font-size: 1.5rem;
    animation: rotateIcon 10s linear infinite;
}

@keyframes rotateIcon {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ========================================
   2. VINILO 3D INTERACTIVO
======================================== */
.album-vinyl-container {
    perspective: 1000px;
    transform-style: preserve-3d;
    position: relative;
}

.vinyl-disc-container {
    position: relative;
    width: 600px;  /* Tamaño ajustado para mantener forma */
    height: 600px; /* Debe ser igual al width para círculo perfecto */
    margin: 0 auto;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.vinyl-disc-container:hover .vinyl-disc {
    transform: translateZ(-30px) translateX(80px) rotate(360deg);
}

.vinyl-disc-container:hover .album-cover {
    transform: translate(-50%, -50%) translateZ(10px) scale(0.95);
}

.vinyl-disc {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background:
        radial-gradient(circle at center,
            #1a1a1a 0%,
            #2a2a2a 15%,
            #0a0a0a 16%,
            #1a1a1a 17%,
            #2a2a2a 30%,
            #0a0a0a 31%,
            #1a1a1a 32%,
            #2a2a2a 45%,
            #0a0a0a 46%,
            #1a1a1a 47%,
            #2a2a2a 65%,
            #0a0a0a 66%,
            #1a1a1a 67%,
            #2a2a2a 85%,
            #0a0a0a 100%);
    box-shadow:
        0 0 50px rgba(0, 255, 255, 0.2),
        0 10px 30px rgba(0, 0, 0, 0.8),
        inset 0 0 100px rgba(0, 0, 0, 0.5);
    animation: vinylSpin 10s linear infinite;
    transform: translateZ(-50px);
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Imagen del álbum en el vinilo */
.vinyl-disc-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 65%;
    height: 65%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    object-fit: cover;
    opacity: 0.7;
    mix-blend-mode: multiply;
}

/* Hole central del vinilo */
.vinyl-disc-hole {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle at center,
            #cc0000 0%,
            #8B0000 40%,
            #000000 100%);
    box-shadow:
        inset 0 0 20px rgba(0, 0, 0, 0.8),
        inset 2px 2px 5px rgba(255,255,255,0.1);
    z-index: 2;
}

.vinyl-disc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background:
        repeating-radial-gradient(
            circle at center,
            transparent 0,
            transparent 20px,
            rgba(0, 0, 0, 0.1) 20px,
            rgba(0, 0, 0, 0.1) 21px
        );
    z-index: 1;
}

/* Efecto reflejo metálico */
.vinyl-disc::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 45%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0.1) 55%,
        transparent 100%);
    animation: vinylShine 3s ease-in-out infinite;
}

.album-cover {
    position: absolute;
    width: 450px;  /* Proporcional y cuadrado */
    height: 450px; /* Igual al width */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(0);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.9),
        0 0 30px rgba(0, 255, 255, 0.2),
        inset 0 0 0 1px rgba(255,255,255,0.1);
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: grab;
    z-index: 2;
}

.album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
}

.album-cover-border {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid rgba(0, 255, 255, 0.3);
    border-radius: 2px;
    pointer-events: none;
    animation: borderPulse 3s ease-in-out infinite;
}

@keyframes borderPulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.01);
    }
}

/* Visualizador de audio en el centro del vinilo */
.vinyl-visualizer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.visualizer-bar {
    width: 3px;
    height: 20px;
    background: var(--t2-blue);
    animation: audioWave 0.5s ease-in-out infinite;
}

.visualizer-bar:nth-child(1) { animation-delay: 0s; }
.visualizer-bar:nth-child(2) { animation-delay: 0.1s; }
.visualizer-bar:nth-child(3) { animation-delay: 0.2s; }
.visualizer-bar:nth-child(4) { animation-delay: 0.3s; }
.visualizer-bar:nth-child(5) { animation-delay: 0.4s; }

@keyframes vinylSpin {
    from { transform: translateZ(-50px) rotate(0deg); }
    to { transform: translateZ(-50px) rotate(360deg); }
}

@keyframes vinylShine {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
}

@keyframes audioWave {
    0%, 100% {
        height: 20px;
        opacity: 0.5;
    }
    50% {
        height: 40px;
        opacity: 1;
    }
}

/* ========================================
   3. TRACKLIST ESTILO TERMINAL
======================================== */
.album-tracklist-container {
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 3rem;
    position: relative;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
}

.album-tracklist-container::before {
    content: '> TRACKLIST_';
    position: absolute;
    top: 1rem;
    left: 2rem;
    color: var(--t2-blue);
    font-size: 0.8rem;
    opacity: 0.6;
    animation: terminalBlink 1s infinite;
}

.tracklist {
    margin-top: 3rem;
    list-style: none;
    padding: 0;
}

.track-item {
    display: flex;
    align-items: center;
    padding: 2rem 1.5rem;
    margin-bottom: 1.2rem;
    background: rgba(255, 255, 255, 0.02);
    border-left: 4px solid transparent;
    transition: all 0.3s;
    cursor: pointer;
    position: relative;
    min-height: 85px;
    border-radius: 0 8px 8px 0;
}

.track-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -3px;
    width: 3px;
    height: 0;
    background: var(--t2-blue);
    transition: height 0.3s;
}

.track-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-left-color: var(--t2-blue);
    padding-left: 2rem;
    transform: translateX(5px);
    box-shadow: 0 5px 20px rgba(0, 255, 255, 0.1);
}

.track-item:hover::before {
    height: 100%;
}

.track-number {
    color: rgba(255, 255, 255, 0.3);
    font-family: 'Bebas Neue', var(--font-terminator);
    font-size: 2.2rem;
    margin-right: 2.5rem;
    font-weight: 400;
    min-width: 45px;
    text-align: center;
}

.track-item:hover .track-number {
    color: var(--t2-blue);
    text-shadow: 0 0 15px var(--t2-blue);
    transform: scale(1.1);
}

.track-title {
    flex: 1;
    color: #ffffff;
    font-family: 'Staatliches', var(--font-industrial);
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 400;
    line-height: 1.2;
}

.track-item:hover .track-title {
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
    transform: translateX(3px);
}

.track-duration {
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Bebas Neue', var(--font-tech);
    font-size: 1.3rem;
    margin: 0 2rem;
    letter-spacing: 0.08em;
    font-weight: 300;
}

.track-item.playing {
    background: linear-gradient(90deg,
        rgba(255, 0, 0, 0.1) 0%,
        rgba(255, 0, 0, 0.2) 50%,
        rgba(255, 0, 0, 0.1) 100%);
    border-left-color: var(--t2-red);
}

/* Track destacado - SINGLE */
.track-item.featured {
    background: linear-gradient(135deg,
        rgba(255, 215, 0, 0.08) 0%,
        rgba(255, 215, 0, 0.03) 100%);
    border-left-color: #FFD700;
    position: relative;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.1);
}

.track-label {
    position: absolute;
    top: 0.8rem;
    right: 1.5rem;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
    padding: 0.3rem 1rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    font-weight: 400;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
}

.track-item.playing::after {
    content: '▶ PLAYING';
    position: absolute;
    right: 5rem;
    color: var(--t2-red);
    font-size: 0.8rem;
    animation: pulse 1s infinite;
}

@keyframes terminalBlink {
    0%, 50% { opacity: 0.6; }
    51%, 100% { opacity: 1; }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ========================================
   4. BOTONES PLAY CYBERPUNK
======================================== */
.track-play {
    min-width: 54px;
    min-height: 54px;
    width: 54px;
    height: 54px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    position: relative;
    border-radius: 50%;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.track-play i {
    font-size: 1.2rem;
    margin-left: 3px;
    z-index: 2;
}

.track-play::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    background: radial-gradient(circle, var(--t2-blue), transparent);
    opacity: 0;
    transition: all 0.3s;
}

.track-play:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    color: #fff;
}

.track-play:hover::before {
    width: 100px;
    height: 100px;
    opacity: 0.5;
}

.track-play i {
    font-size: 0.8rem;
    z-index: 2;
}

.track-item.playing .track-play {
    background: rgba(255, 0, 0, 0.2);
    border-color: var(--t2-red);
    color: var(--t2-red);
    animation: playPulse 1s infinite;
}

@keyframes playPulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    }
}

.track-play.ready-to-play {
    background: rgba(255, 0, 0, 0.2);
    border-color: var(--t2-red);
    animation: pulse 2s infinite;
}

/* ========================================
   5. TÍTULO CON EFECTO METÁLICO T2
======================================== */
/* Album Info Header */
.album-info-header {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.album-title {
    font-family: 'Staatliches', var(--font-terminator) !important;
    font-size: clamp(2.5rem, 5vw, 3.8rem);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 1.2rem;
    color: #ffffff;
    font-weight: 400;
    text-shadow: 0 2px 10px rgba(0, 255, 255, 0.2);
    line-height: 1.1;
    white-space: nowrap;
    overflow: visible;
}

.album-meta {
    display: flex;
    gap: 3rem;
    font-family: 'Bebas Neue', var(--font-tech);
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.7);
}

.album-meta span {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 400;
}

.album-meta i {
    font-size: 1.2rem;
    color: var(--t2-blue);
    opacity: 0.8;
}

@keyframes lineGlow {
    0%, 100% {
        opacity: 0.5;
        transform: translateX(-50%) scaleX(0.8);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scaleX(1);
    }
}

/* ========================================
   7. LINKS DE STREAMING HOLOGRÁFICOS
======================================== */

/* Streaming Section */
.streaming-section {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 2px solid rgba(255, 255, 255, 0.1);
}

.streaming-title {
    font-family: 'Bebas Neue', var(--font-tech);
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.15em;
    margin-bottom: 1.5rem;
    font-weight: 400;
    text-transform: uppercase;
}

.album-links {
    display: flex;
    gap: 1.5rem;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.album-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.8rem;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    min-width: 150px;
    border-radius: 8px;
}

.album-link i {
    font-size: 1.8rem;
    transition: all 0.3s;
}

.link-label {
    font-family: 'Staatliches', var(--font-industrial);
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
    transition: all 0.3s;
}

/* Colores específicos por plataforma - Tonalidades del sitio */
.album-link:nth-child(1) { /* Spotify - Azul cyan */
    border-color: #00ffff;
}
.album-link:nth-child(1) i {
    color: #00ffff;
}

.album-link:nth-child(2) { /* YouTube - Rojo */
    border-color: #ce1126;
}
.album-link:nth-child(2) i {
    color: #ce1126;
}

/* Efecto de rellenado desde abajo (como redes sociales) */
.album-link {
    position: relative;
    overflow: hidden;
}

.album-link::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    transition: top 0.3s ease;
    z-index: 0;
}

/* Spotify - relleno cyan */
.album-link:nth-child(1)::before {
    background: #00ffff;
}

/* YouTube - relleno rojo */
.album-link:nth-child(2)::before {
    background: #ce1126;
}

.album-link i,
.album-link .link-label {
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

/* Hover effects */
.album-link:hover::before {
    top: 0;
}

.album-link:hover {
    transform: translateY(-3px);
    border-color: currentColor;
}

.album-link:hover .link-label {
    color: #ffffff;
}

.album-link:hover i {
    color: #ffffff;
    transform: scale(1.1);
}

/* Box shadow específico por color */
.album-link:nth-child(1):hover {
    box-shadow: 0 10px 20px rgba(0, 255, 255, 0.5);
}

.album-link:nth-child(2):hover {
    box-shadow: 0 10px 20px rgba(206, 17, 38, 0.5);
}

/* Animación de conexión */
.album-link:active {
    animation: connectionPulse 0.6s ease-out;
}

@keyframes connectionPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 currentColor;
    }
    50% {
        transform: scale(0.95);
        box-shadow: 0 0 30px 10px currentColor;
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 currentColor;
    }
}

/* ========================================
   RESPONSIVE
======================================== */
@media (max-width: 1200px) {
    .album-grid {
        grid-template-columns: minmax(350px, 1fr) minmax(350px, 1fr);
        gap: 60px;
    }

    .album-section .container {
        padding: 0 3rem;
    }

    .album-title {
        font-size: 3rem;
        letter-spacing: 0.04em;
    }
}

/* Ajuste específico para títulos largos */
@media (max-width: 1024px) {
    .album-title {
        font-size: 2.8rem;
        white-space: normal;
        word-break: keep-all;
    }
}

@media (max-width: 768px) {
    .album-section {
        padding: 5rem 0;
    }

    .album-section .container {
        padding: 0 1.5rem;
    }

    /* Título y meta más pequeños pero legibles */
    .album-title {
        font-size: 2.2rem;
        white-space: normal;
        line-height: 1.15;
        word-break: break-word;
    }

    .album-meta {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1.5rem;
        font-size: 1.2rem;
    }

    .album-info-header {
        margin-bottom: 1.8rem;
        padding-bottom: 1.8rem;
    }

    /* Tracks optimizados para mobile */
    .track-title {
        font-size: 1.3rem;
        letter-spacing: 0.03em;
    }

    .track-number {
        font-size: 1.6rem;
        margin-right: 1.2rem;
        min-width: 30px;
    }

    .track-duration {
        font-size: 1rem;
        margin: 0 1rem;
    }

    .track-item {
        padding: 1.3rem 1rem;
        min-height: 65px;
        margin-bottom: 0.8rem;
    }

    .album-tracklist-container {
        padding: 2rem 1.5rem;
    }

    /* Streaming responsive */
    .streaming-section {
        margin-top: 2rem;
        padding-top: 2rem;
    }

    .streaming-title {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    .album-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .album-link {
        padding: 0.9rem;
        min-width: auto;
        justify-content: center;
    }

    .album-link i {
        font-size: 1.4rem;
    }

    .link-label {
        font-size: 0.95rem;
    }

    /* Play button touch-friendly */
    .track-play {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .track-play i {
        font-size: 1rem;
    }

    /* Track label mobile */
    .track-label {
        font-size: 0.75rem;
        padding: 0.2rem 0.7rem;
        top: 0.4rem;
        right: 0.8rem;
    }

    .album-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .vinyl-disc-container {
        width: min(350px, 90vw);
        height: min(350px, 90vw);
    }

    .vinyl-disc-container:hover .vinyl-disc {
        transform: translateZ(-30px) translateX(40px) rotate(360deg);
    }

    .album-cover {
        width: min(280px, 75vw);
        height: min(280px, 75vw);
    }

    .album-section .section-title {
        font-size: clamp(2rem, 5vw, 3rem);
    }

    .album-marquee {
        font-size: 1.2rem;
    }

    .track-item {
        padding: 1.2rem 1rem;
    }

    .track-item:hover {
        padding-left: 1.2rem;
    }

    .track-play {
        min-width: 44px;
        min-height: 44px;
    }

    .album-link {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .album-section {
        padding: 4rem 0;
    }

    .album-section .container {
        padding: 0 1rem;
    }

    .vinyl-disc-container {
        width: min(280px, 85vw);
        height: min(280px, 85vw);
    }

    .album-cover {
        width: min(220px, 70vw);
        height: min(220px, 70vw);
    }

    /* Título principal mobile pequeño */
    .album-title {
        font-size: 1.8rem;
        letter-spacing: 0.02em;
    }

    /* Meta información más compacta */
    .album-meta {
        font-size: 1rem;
    }

    .album-meta span {
        gap: 0.5rem;
    }

    .album-meta i {
        font-size: 0.9rem;
    }

    /* Tracks más compactos */
    .track-title {
        font-size: 1.2rem;
    }

    .track-number {
        font-size: 1.4rem;
        margin-right: 1rem;
    }

    .track-duration {
        font-size: 0.9rem;
        display: none; /* Ocultar en móviles muy pequeños */
    }

    .track-item {
        padding: 1.2rem 0.6rem;
        min-height: 60px;
    }

    .album-tracklist-container {
        padding: 1.5rem;
    }

    /* Streaming más compacto */
    .streaming-title {
        font-size: 1rem;
    }

    .album-links {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .album-link {
        flex-direction: row;
        padding: 0.8rem 1rem;
    }

    .album-link i {
        font-size: 1.3rem;
        margin-bottom: 0;
    }

    .link-label {
        font-size: 0.95rem;
    }
}

/* Ajuste específico para iPhone SE y similares */
@media (max-width: 375px) {
    .album-title {
        font-size: 1.6rem;
    }

    .track-title {
        font-size: 1.1rem;
    }

    .track-item {
        padding: 1rem 0.5rem;
    }

    .track-play {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }

    .album-link {
        padding: 0.7rem;
    }

    .section-title-main {
        font-size: 2rem;
    }
}/* ========================================
   AUDIO PLAYER BAR - TERMINATOR 2 STYLE
======================================== */

.audio-player-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.95);
    border-top: 2px solid var(--t2-blue);
    backdrop-filter: blur(20px);
    z-index: 1000;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.audio-player-bar.active {
    transform: translateY(0);
}

.audio-player-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--t2-blue) 20%,
        var(--t2-red) 50%,
        var(--t2-blue) 80%,
        transparent);
    animation: scanlinePlayer 5s linear infinite;
}

@keyframes scanlinePlayer {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(10px); }
}

.player-container {
    position: relative;
    display: grid;
    grid-template-columns: 250px 200px 1fr 150px;
    align-items: center;
    gap: 2rem;
    padding: 2rem 2rem;
    height: 80px;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
}

/* Padding específico para modo compact - REMOVIDO (ahora en mobile-first-optimization.css con !important) */
/* .audio-player-bar.compact .player-container {
    padding: 5rem 2rem;
} */

/* Track Info */
.player-track-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.player-album-thumb {
    width: 50px;
    height: 50px;
    border: 1px solid var(--t2-blue);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
    animation: thumbRotate 20s linear infinite paused;
}

.audio-player-bar.playing .player-album-thumb {
    animation-play-state: running;
}

@keyframes thumbRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.player-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.player-track-title {
    font-family: var(--font-industrial);
    font-size: 1rem;
    color: #fff;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-artist {
    font-family: var(--font-tech);
    font-size: 0.8rem;
    color: var(--t2-blue);
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Controls */
.player-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.player-btn {
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--t2-blue);
    color: var(--t2-blue);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.player-play {
    width: 50px;
    height: 50px;
    clip-path: polygon(
        50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%
    );
}

.player-btn:hover {
    background: rgba(0, 255, 255, 0.1);
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}

.player-btn:active {
    transform: scale(0.95);
}

.player-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    background: radial-gradient(circle, var(--t2-blue), transparent);
    transition: all 0.3s;
}

.player-btn:hover::before {
    width: 100%;
    height: 100%;
    opacity: 0.3;
}

/* Progress Bar */
.player-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.time-current,
.time-total {
    font-family: var(--font-tech);
    font-size: 0.8rem;
    color: var(--t2-blue);
    min-width: 40px;
}

.progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.2);
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--t2-blue), var(--t2-red));
    width: 0%;
    transition: width 0.1s linear;
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8));
    animation: progressGlow 1s infinite;
}

@keyframes progressGlow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.progress-handle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: var(--t2-blue);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
    left: 0%;
    cursor: grab;
    opacity: 0;
    transition: opacity 0.3s;
}

.progress-bar:hover .progress-handle {
    opacity: 1;
}

/* Volume */
.player-volume {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.volume-btn {
    background: none;
    border: none;
    color: var(--t2-blue);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.5rem;
    transition: all 0.3s;
}

.volume-btn:hover {
    color: #fff;
    text-shadow: 0 0 10px var(--t2-blue);
}

.volume-slider {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(0, 255, 255, 0.2);
    outline: none;
    cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: var(--t2-blue);
    border: 1px solid #fff;
    cursor: pointer;
    transition: all 0.3s;
}

.volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 10px var(--t2-blue);
}

.volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: var(--t2-blue);
    border: 1px solid #fff;
    cursor: pointer;
    transition: all 0.3s;
}

/* Responsive */
@media (max-width: 1024px) {
    .player-container {
        grid-template-columns: 250px 180px 1fr 120px;
        gap: 1.5rem;
        padding: 1rem 1.5rem;
    }
}

@media (max-width: 768px) {
    .player-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 1rem;
        padding: 1rem;
    }

    .player-track-info {
        grid-column: 1 / -1;
    }

    .player-progress {
        grid-column: 1 / -1;
        order: 2;
    }

    .player-controls {
        order: 3;
    }

    .player-volume {
        position: absolute;
        top: 1rem;
        right: 1rem;
    }

    .volume-slider {
        display: none;
    }
}

@media (max-width: 480px) {
    .player-album-thumb {
        width: 40px;
        height: 40px;
    }

    .player-track-title {
        font-size: 0.9rem;
    }

    .player-btn {
        width: 35px;
        height: 35px;
    }

    .player-play {
        width: 45px;
        height: 45px;
    }
}/* ========================================
   Mobile Menu - Heavy Metal Style
======================================== */

/* ========================================
   Variables
======================================== */
:root {
    --menu-bg: #000000;
    --menu-blood: #8B0000;
    --menu-fire: #ff4500;
    --menu-steel: #c0c0c0;
    --menu-rust: #b7410e;
    --menu-smoke: rgba(128, 128, 128, 0.3);
}

/* ========================================
   Mobile Menu Container
======================================== */
.mobile-menu-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    pointer-events: none;
    display: none;
}

.mobile-menu-fullscreen.active {
    display: block;
    pointer-events: all;
}

/* ========================================
   Background Layers - Metal Texture
======================================== */
.menu-bg-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
        #000000 0%,
        #1a0000 50%,
        #000000 100%);
    transform: translateY(-100%);
    transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.mobile-menu-fullscreen.active .menu-bg-layer {
    transform: translateY(0);
}

/* Metal Texture Overlay */
.menu-texture-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 2px,
            rgba(139, 0, 0, 0.03) 2px,
            rgba(139, 0, 0, 0.03) 4px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.01) 2px,
            rgba(255, 255, 255, 0.01) 4px
        );
    animation: fadeIn 0.8s 0.3s forwards;
    pointer-events: none;
}

/* Fire/Smoke Effect at Bottom */
.menu-fire-effect {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(to top,
        rgba(139, 0, 0, 0.4) 0%,
        rgba(255, 69, 0, 0.2) 30%,
        transparent 100%);
    opacity: 0;
    animation: fireGlow 3s ease-in-out infinite, fadeIn 1s 0.5s forwards;
    pointer-events: none;
}

@keyframes fireGlow {
    0%, 100% {
        opacity: 0.6;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(-10px);
    }
}

/* ========================================
   Menu Content
======================================== */
.mobile-menu-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4rem 2rem;
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.6s ease 0.2s;
}

.mobile-menu-fullscreen.active .mobile-menu-content {
    opacity: 1;
    transform: scale(1);
}

/* ========================================
   Band Logo/Title
======================================== */
.menu-band-logo {
    position: absolute;
    top: 3rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    opacity: 0;
    animation: fadeInDown 0.8s 0.4s forwards;
}

.menu-band-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    letter-spacing: 0.3em;
    color: var(--menu-steel);
    text-transform: uppercase;
    text-shadow:
        0 0 10px rgba(139, 0, 0, 0.8),
        0 0 20px rgba(139, 0, 0, 0.5),
        2px 2px 4px rgba(0, 0, 0, 0.9);
}

@keyframes fadeInDown {
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ========================================
   Navigation List - Brutal Style
======================================== */
.mobile-nav-list {
    list-style: none;
    width: 100%;
    max-width: 500px;
}

.mobile-nav-item {
    margin: 1.5rem 0;
    opacity: 0;
    transform: translateX(-100px) rotateY(-30deg);
    animation: slideInBrutal 0.6s forwards;
    transform-style: preserve-3d;
}

.mobile-nav-item:nth-child(1) { animation-delay: 0.3s; }
.mobile-nav-item:nth-child(2) { animation-delay: 0.4s; }
.mobile-nav-item:nth-child(3) { animation-delay: 0.5s; }
.mobile-nav-item:nth-child(4) { animation-delay: 0.6s; }
.mobile-nav-item:nth-child(5) { animation-delay: 0.7s; }
.mobile-nav-item:nth-child(6) { animation-delay: 0.8s; }
.mobile-nav-item:nth-child(7) { animation-delay: 0.9s; }

@keyframes slideInBrutal {
    to {
        opacity: 1;
        transform: translateX(0) rotateY(0);
    }
}

/* ========================================
   Menu Links - Metal Style
======================================== */
.mobile-nav-link {
    display: block;
    padding: 2rem;
    color: var(--menu-steel);
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Metal Slash Effect */
.mobile-nav-link::before,
.mobile-nav-link::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40px;
    height: 3px;
    background: var(--menu-blood);
    opacity: 0;
    transition: all 0.3s ease;
}

.mobile-nav-link::before {
    left: -50px;
    transform: translateY(-50%) rotate(-45deg);
}

.mobile-nav-link::after {
    right: -50px;
    transform: translateY(-50%) rotate(45deg);
}

/* Hover Effect - Brutal */
.mobile-nav-link:hover {
    color: #ffffff;
    text-shadow:
        0 0 20px rgba(139, 0, 0, 1),
        0 0 40px rgba(139, 0, 0, 0.8),
        0 0 60px rgba(139, 0, 0, 0.6);
    transform: scale(1.1);
}

.mobile-nav-link:hover::before {
    left: 20px;
    opacity: 1;
}

.mobile-nav-link:hover::after {
    right: 20px;
    opacity: 1;
}

/* Active State - Blood Red */
.mobile-nav-link.active {
    color: var(--menu-blood);
    text-shadow:
        0 0 30px rgba(139, 0, 0, 1),
        2px 2px 4px rgba(0, 0, 0, 0.9);
}

/* Brutal Underline */
.link-brutal-line {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 4px;
    background: linear-gradient(90deg,
        transparent,
        var(--menu-blood) 20%,
        var(--menu-fire) 50%,
        var(--menu-blood) 80%,
        transparent);
    transition: width 0.3s ease;
}

.mobile-nav-link:hover .link-brutal-line,
.mobile-nav-link.active .link-brutal-line {
    width: 80%;
}

/* ========================================
   Close Button - Metal X
======================================== */
.mobile-menu-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 60px;
    height: 60px;
    background: transparent;
    border: 3px solid var(--menu-steel);
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    animation: fadeIn 0.5s 1s forwards;
    overflow: hidden;
}

.mobile-menu-close::before,
.mobile-menu-close::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 4px;
    background: var(--menu-steel);
    top: 50%;
    left: 50%;
    transition: all 0.3s ease;
}

.mobile-menu-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.mobile-menu-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.mobile-menu-close:hover {
    border-color: var(--menu-blood);
    background: rgba(139, 0, 0, 0.1);
    transform: rotate(180deg) scale(1.1);
}

.mobile-menu-close:hover::before,
.mobile-menu-close:hover::after {
    background: var(--menu-blood);
    height: 6px;
}

/* ========================================
   Footer - Metal Credits
======================================== */
.menu-footer-info {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: 'Oswald', sans-serif;
    opacity: 0;
    animation: fadeIn 0.5s 1.2s forwards;
}

.menu-tagline {
    font-size: 1.2rem;
    color: var(--menu-steel);
    text-transform: uppercase;
    letter-spacing: 0.3em;
    margin-bottom: 0.5rem;
}

.menu-copyright {
    font-size: 1rem;
    color: rgba(192, 192, 192, 0.5);
}

/* ========================================
   Decorative Elements
======================================== */

/* Spikes/Thorns on sides */
.menu-spikes-left,
.menu-spikes-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 300px;
    opacity: 0.3;
    pointer-events: none;
}

.menu-spikes-left {
    left: 0;
    background: linear-gradient(90deg,
        var(--menu-blood) 0%,
        transparent 100%);
    clip-path: polygon(
        0 0, 100% 10%,
        0 20%, 100% 30%,
        0 40%, 100% 50%,
        0 60%, 100% 70%,
        0 80%, 100% 90%,
        0 100%
    );
}

.menu-spikes-right {
    right: 0;
    background: linear-gradient(-90deg,
        var(--menu-blood) 0%,
        transparent 100%);
    clip-path: polygon(
        100% 0, 0 10%,
        100% 20%, 0 30%,
        100% 40%, 0 50%,
        100% 60%, 0 70%,
        100% 80%, 0 90%,
        100% 100%
    );
}

/* ========================================
   Media Queries
======================================== */
@media (max-width: 480px) {
    .menu-band-name {
        font-size: 2.5rem;
    }

    .mobile-nav-link {
        font-size: 2rem;
        padding: 1.5rem;
    }

    .mobile-nav-item {
        margin: 1rem 0;
    }
}

@media (min-width: 769px) {
    .mobile-menu-fullscreen {
        display: none !important;
    }
}

/* ========================================
   Animations
======================================== */
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* Lightning Flash Effect */
@keyframes lightning {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

.menu-lightning {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 70%);
    opacity: 0;
    pointer-events: none;
    animation: lightning 5s infinite;
    animation-delay: 3s;
}/* ========================================
   Navigation Metal Effects & Progress Indicators
======================================== */

/* ========================================
   Variables
======================================== */
:root {
    --nav-blood: #8B0000;
    --nav-fire: #ff4500;
    --nav-steel: #c0c0c0;
    --nav-dark-steel: #808080;
    --nav-shadow: rgba(0, 0, 0, 0.9);
}

/* ========================================
   Enhanced Navigation Bar
======================================== */
.navigation {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.98) 0%,
        rgba(26, 0, 0, 0.95) 50%,
        rgba(0, 0, 0, 0.98) 100%);
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg,
        transparent,
        var(--nav-blood) 20%,
        var(--nav-fire) 50%,
        var(--nav-blood) 80%,
        transparent) 1;
    transition: all 0.4s ease;
}

/* Metal texture on scroll */
.navigation.scrolled {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 1) 0%,
        rgba(139, 0, 0, 0.1) 100%);
    box-shadow: 0 5px 20px rgba(139, 0, 0, 0.5);
}

/* ========================================
   Progress Bar - Top of Navigation
======================================== */
.nav-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001;
}

.nav-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,
        var(--nav-blood) 0%,
        var(--nav-fire) 50%,
        var(--nav-blood) 100%);
    transition: width 0.3s ease;
    box-shadow: 0 0 10px var(--nav-blood);
    position: relative;
}

/* Spark at the end of progress */
.nav-progress-fill::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: var(--nav-fire);
    border-radius: 50%;
    box-shadow: 0 0 20px var(--nav-fire);
    animation: pulseSpark 1s infinite;
}

@keyframes pulseSpark {
    0%, 100% {
        transform: translateY(-50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateY(-50%) scale(1.5);
        opacity: 0.7;
    }
}

/* ========================================
   Navigation Links - Metal Effects
======================================== */
.nav-link {
    position: relative;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--nav-steel);
    padding: 0.5rem 0;
    transition: all 0.3s ease;
    overflow: visible;
}

/* Blood drip effect on hover */
.nav-link::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 0;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--nav-blood) 50%,
        transparent 100%);
    transition: height 0.3s ease;
    opacity: 0;
}

.nav-link:hover::before {
    height: 15px;
    opacity: 1;
}

/* Fire underline */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent,
        var(--nav-blood) 20%,
        var(--nav-fire) 50%,
        var(--nav-blood) 80%,
        transparent);
    transition: width 0.4s ease;
    filter: blur(1px);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* Hover state */
.nav-link:hover {
    color: #ffffff;
    text-shadow:
        0 0 10px rgba(139, 0, 0, 0.8),
        0 0 20px rgba(139, 0, 0, 0.6),
        2px 2px 4px rgba(0, 0, 0, 0.9);
    transform: translateY(-2px);
}

/* Active state */
.nav-link.active {
    color: var(--nav-blood);
    text-shadow:
        0 0 15px rgba(139, 0, 0, 1),
        2px 2px 4px rgba(0, 0, 0, 0.9);
}

/* ========================================
   Section Progress Indicator (Side)
======================================== */
.section-progress {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.progress-item {
    position: relative;
    width: 60px;
    height: 2px;
    background: rgba(128, 128, 128, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.progress-item::before {
    content: attr(data-section);
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Oswald', sans-serif;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--nav-dark-steel);
    opacity: 0;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.progress-item:hover::before {
    opacity: 1;
    right: 75px;
}

.progress-fill-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg,
        var(--nav-blood) 0%,
        var(--nav-fire) 100%);
    transition: width 0.5s ease;
    box-shadow: 0 0 10px var(--nav-blood);
}

.progress-item.active .progress-fill-bar {
    width: 100%;
}

.progress-item.viewed .progress-fill-bar {
    width: 100%;
    background: var(--nav-dark-steel);
}

/* Progress item hover */
.progress-item:hover {
    height: 4px;
}

.progress-item:hover .progress-fill-bar {
    box-shadow: 0 0 20px var(--nav-fire);
}

/* ========================================
   Navigation Logo Effects
======================================== */
.nav-logo {
    position: relative;
}

/* Efecto rojo/naranja eliminado - solo mantener scale en hover */

/* ========================================
   Scroll Percentage Display
======================================== */
.scroll-percentage {
    position: fixed;
    bottom: 180px; /* Aumentado aún más para evitar solapamiento con player-state-controls */
    right: 30px;
    width: 80px;
    height: 80px;
    z-index: 900;
    transition: bottom 0.3s ease;
}

/* Ajustar según el estado del reproductor - usando clases en body */
body.player-expanded .scroll-percentage {
    bottom: 220px; /* Más espacio cuando el reproductor está expandido */
}

body.player-compact .scroll-percentage {
    bottom: 180px; /* Espacio moderado cuando está compacto */
}

body.player-hidden .scroll-percentage {
    bottom: 180px; /* Posición más alta para evitar player-state-controls */
}

.percentage-circle {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.percentage-bg {
    fill: none;
    stroke: rgba(128, 128, 128, 0.2);
    stroke-width: 4;
}

.percentage-progress {
    fill: none;
    stroke: #00ffff;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    transition: stroke-dashoffset 0.3s ease;
    filter: drop-shadow(0 0 8px #00ffff);
}

.percentage-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--nav-steel);
    text-shadow: 0 0 10px rgba(139, 0, 0, 0.5);
}

/* ========================================
   Current Section Display
======================================== */
.current-section-display {
    position: fixed;
    bottom: 30px;
    left: 30px;
    padding: 1rem 2rem;
    background: linear-gradient(135deg,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(139, 0, 0, 0.2) 100%);
    border: 1px solid var(--nav-blood);
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
    z-index: 900;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.current-section-display.visible {
    opacity: 1;
    transform: translateY(0);
}

.section-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    color: var(--nav-dark-steel);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.section-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.8rem;
    color: var(--nav-steel);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0.3rem;
    text-shadow: 0 0 10px rgba(139, 0, 0, 0.5);
}

/* ========================================
   Navigation Bullets (Alternative to dots)
======================================== */
.nav-bullets {
    position: fixed;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.bullet {
    width: 15px;
    height: 15px;
    border: 2px solid var(--nav-dark-steel);
    background: transparent;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.bullet:hover {
    transform: rotate(45deg) scale(1.2);
    border-color: var(--nav-blood);
    background: rgba(139, 0, 0, 0.3);
}

.bullet.active {
    background: var(--nav-blood);
    border-color: var(--nav-fire);
    transform: rotate(45deg);
    box-shadow: 0 0 20px var(--nav-blood);
}

/* Bullet tooltip */
.bullet::before {
    content: attr(data-tooltip);
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: var(--nav-steel);
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 50%, calc(100% - 5px) 100%, 0 100%);
}

.bullet:hover::before {
    opacity: 1;
    right: 30px;
}

/* ========================================
   Media Queries
======================================== */
@media (max-width: 1024px) {
    .section-progress,
    .nav-bullets {
        right: 15px;
    }

    .scroll-percentage {
        width: 60px;
        height: 60px;
        bottom: 120px; /* Ajustado para móviles */
    }

    body.player-expanded .scroll-percentage {
        bottom: 160px; /* Más espacio en móviles cuando el reproductor está expandido */
    }

    body.player-compact .scroll-percentage {
        bottom: 100px; /* Espacio moderado cuando está compacto */
    }

    .current-section-display {
        left: 15px;
        padding: 0.8rem 1.5rem;
    }
}

@media (max-width: 768px) {
    .section-progress,
    .nav-bullets,
    .scroll-percentage,
    .current-section-display {
        display: none;
    }

    .merch-cart-icon {
        display: block !important; /* Forzar visibilidad en móvil */
        bottom: 90px; /* Posición para móviles */
        right: 15px;
        width: 50px;
        height: 50px;
    }

    body.player-expanded .merch-cart-icon {
        bottom: 150px; /* Ajuste cuando el reproductor está expandido en móvil */
    }

    body.player-compact .merch-cart-icon {
        bottom: 110px; /* Ajuste cuando está compacto en móvil */
    }

    .nav-progress-bar {
        height: 2px;
    }
}

/* ========================================
   Loading Animation for Progress
======================================== */
@keyframes loadProgress {
    0% {
        width: 0;
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
    }
}/* ========================================
   Album Dropdown Menu - FUERA del Nav
======================================== */
.dropdown-menu {
    position: fixed;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    background: rgba(0, 0, 0, 0.98);
    border: 2px solid #00aaff;
    border-radius: 8px;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 10001;
    box-shadow: 0 10px 40px rgba(0, 170, 255, 0.3);
}

/* Estados controlados por JavaScript */
.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.dropdown-content {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 20px;
}

/* Album Section */
.dropdown-album {
    text-align: center;
}

.dropdown-album img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border: 2px solid #00aaff;
    margin-bottom: 10px;
}

.dropdown-album .album-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    color: #00ffff;
    margin-bottom: 5px;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.dropdown-album .album-year {
    font-family: 'Oswald', sans-serif;
    font-size: 0.85rem;
    color: #999;
}

/* Tracks Section */
.dropdown-tracks h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    color: #fff;
    margin-bottom: 15px;
    border-bottom: 2px solid #00aaff;
    padding-bottom: 8px;
}

.track-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
}

.track {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(0, 170, 255, 0.05);
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.track:hover {
    background: rgba(0, 170, 255, 0.15);
    border-color: #00aaff;
    padding-left: 15px;
}

.track-num {
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    color: #00aaff;
    font-size: 0.9rem;
}

.track-name {
    flex: 1;
    font-family: 'Oswald', sans-serif;
    color: #ccc;
    font-size: 0.95rem;
}

.track i {
    color: #00aaff;
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.track:hover i {
    opacity: 1;
}

/* Streaming Links */
.dropdown-links {
    display: flex;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 170, 255, 0.3);
}

.stream-link {
    flex: 1;
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #00aaff;
    color: #00aaff;
    text-align: center;
    font-size: 1.5rem;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.stream-link:hover {
    background: rgba(0, 170, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 170, 255, 0.4);
}

.stream-link.youtube {
    border-color: #ce1126;
    color: #ce1126;
}

.stream-link.youtube:hover {
    background: rgba(206, 17, 38, 0.2);
    box-shadow: 0 5px 15px rgba(206, 17, 38, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .dropdown-menu {
        display: none;
    }
}

/* ========================================
   Audio Visualizer - Heavy Metal Spectrum
======================================== */

/* ========================================
   Variables
======================================== */
:root {
    --viz-blood: #8B0000;
    --viz-fire: #ff4500;
    --viz-orange: #ff6600;
    --viz-yellow: #ffaa00;
    --viz-glow: rgba(255, 69, 0, 0.8);
}

/* ========================================
   Enhanced Audio Player Bar
======================================== */
.audio-player-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(26, 0, 0, 0.98) 100%);
    border-top: 2px solid var(--viz-blood);
    z-index: 1000;
    transition: all 0.3s ease;
    overflow: visible;
}

.audio-player-bar.expanded {
    height: 110px;
}

.audio-player-bar.minimized {
    transform: translateY(calc(100% - 10px));
}

/* ========================================
   Spectrum Visualizer Container
======================================== */
.spectrum-visualizer {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 150px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    padding: 0 20px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.audio-player-bar.playing .spectrum-visualizer {
    opacity: 1;
}

/* ========================================
   Spectrum Bars
======================================== */
.spectrum-bar {
    flex: 1;
    max-width: 20px;
    min-height: 3px;
    background: linear-gradient(180deg,
        var(--viz-yellow) 0%,
        var(--viz-orange) 30%,
        var(--viz-fire) 60%,
        var(--viz-blood) 100%);
    border-radius: 2px 2px 0 0;
    transform-origin: bottom;
    transition: height 0.05s ease-out;
    box-shadow:
        0 0 10px var(--viz-glow),
        inset 0 0 5px rgba(255, 255, 255, 0.2);
    animation: spectrumPulse 0.15s ease-in-out;
}

/* Dynamic bar heights (will be controlled by JS) */
.spectrum-bar[data-height="1"] { height: 10%; }
.spectrum-bar[data-height="2"] { height: 20%; }
.spectrum-bar[data-height="3"] { height: 30%; }
.spectrum-bar[data-height="4"] { height: 40%; }
.spectrum-bar[data-height="5"] { height: 50%; }
.spectrum-bar[data-height="6"] { height: 60%; }
.spectrum-bar[data-height="7"] { height: 70%; }
.spectrum-bar[data-height="8"] { height: 80%; }
.spectrum-bar[data-height="9"] { height: 90%; }
.spectrum-bar[data-height="10"] { height: 100%; }

/* Fire effect on peaks */
.spectrum-bar.peak {
    animation: firePeak 0.3s ease-out;
}

@keyframes firePeak {
    0% {
        filter: brightness(1) hue-rotate(0deg);
        transform: scaleY(1) scaleX(1);
    }
    50% {
        filter: brightness(1.5) hue-rotate(-10deg);
        transform: scaleY(1.1) scaleX(1.2);
        box-shadow:
            0 -5px 20px var(--viz-fire),
            0 0 30px var(--viz-glow),
            inset 0 0 10px rgba(255, 255, 255, 0.5);
    }
    100% {
        filter: brightness(1) hue-rotate(0deg);
        transform: scaleY(1) scaleX(1);
    }
}

@keyframes spectrumPulse {
    0%, 100% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
}

/* ========================================
   Player Container Enhanced
======================================== */
.player-container {
    position: relative;
    display: grid;
    grid-template-columns: 250px 200px 1fr 150px;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 2rem;
    height: 80px;
    z-index: 2;
}

/* ========================================
   Playlist Expandable - REMOVED BY USER REQUEST
   All playlist UI elements have been commented out
   The player still maintains internal playlist functionality
   but without the visual expandable interface
======================================== */

/* ========================================
   Enhanced Player Controls
======================================== */
.player-controls {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    justify-content: center;
}

.player-btn {
    background: transparent;
    border: 2px solid var(--viz-blood);
    color: white;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.player-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    background: radial-gradient(circle, var(--viz-fire) 0%, transparent 70%);
    transition: all 0.3s ease;
    border-radius: 50%;
}

.player-btn:hover::before {
    width: 100%;
    height: 100%;
}

.player-btn:hover {
    transform: scale(1.1);
    border-color: var(--viz-fire);
    box-shadow: 0 0 20px var(--viz-glow);
}

.player-play {
    width: 55px;
    height: 55px;
    background: var(--viz-blood);
    border-color: var(--viz-fire);
}

.player-play:hover {
    background: var(--viz-fire);
}

/* ========================================
   Keyboard Shortcuts Display
======================================== */
.keyboard-hints {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid var(--viz-blood);
    padding: 1rem;
    border-radius: 5px;
    display: none;
    z-index: 100;
}

.keyboard-hints.show {
    display: block;
    animation: fadeInUp 0.3s ease;
}

.keyboard-hint {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.5rem 0;
    font-size: 0.9rem;
    color: #c0c0c0;
}

.kbd {
    background: var(--viz-blood);
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    font-family: 'Share Tech Mono', monospace;
    min-width: 50px;
    text-align: center;
}

/* ========================================
   Responsive
======================================== */
@media (max-width: 768px) {
    .player-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        gap: 1rem;
        height: auto;
        padding: 1rem;
    }

    .spectrum-visualizer {
        height: 80px;
    }

    .spectrum-bar {
        max-width: 10px;
    }

    .playlist-panel.open {
        max-height: 250px;
    }
}

/* ========================================
   Animations
======================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}/* ========================================
   Band Section - Heavy Metal Style
======================================== */

/* ========================================
   Variables
======================================== */
:root {
    --band-bg: #000000;
    --band-blood: #8B0000;
    --band-fire: #ff4500;
    --band-steel: #c0c0c0;
    --band-shadow: rgba(139, 0, 0, 0.5);
}

/* ========================================
   Band Section Container
======================================== */
.band-section {
    background: linear-gradient(180deg,
        #000000 0%,
        #0a0000 50%,
        #000000 100%);
    padding: 8rem 0;
    position: relative;
    overflow: hidden;
}

/* Metal texture overlay */
.band-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='metal' x='0' y='0' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Crect width='100' height='100' fill='%23000000'/%3E%3Cpath d='M0 0L50 50L0 100M50 0L100 50L50 100' stroke='%238B0000' stroke-width='0.5' opacity='0.1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23metal)'/%3E%3C/svg%3E");
    opacity: 0.3;
    pointer-events: none;
}

/* Fire sparks animation */
.band-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        var(--band-fire) 20%,
        var(--band-blood) 50%,
        var(--band-fire) 80%,
        transparent);
    animation: fireMove 3s ease-in-out infinite;
}

@keyframes fireMove {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}

/* Section divider red line between Album and Gallery */
.section-divider-red {
    position: relative;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        #ff0000 20%,
        #8b0000 50%,
        #ff0000 80%,
        transparent);
    animation: fireMove 3s ease-in-out infinite;
    margin: 0;
    z-index: 10;
}

/* ========================================
   Section Title Enhanced
======================================== */
.band-section .section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(4rem, 10vw, 8rem);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    margin-bottom: 4rem;
    position: relative;
    background: linear-gradient(180deg,
        #ffffff 0%,
        var(--band-steel) 50%,
        #808080 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);
}

.band-section .section-title::after {
    content: 'THE BAND';
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    z-index: -1;
    opacity: 0.1;
    color: var(--band-blood);
    filter: blur(3px);
}

/* ========================================
   Band Content Container
======================================== */
.band-content {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    gap: 5rem;
}

/* ========================================
   Band Description
======================================== */
.band-description {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 5rem;
    padding: 3rem;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid var(--band-blood);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.band-description::before {
    content: '🔥';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3rem;
    animation: flamePulse 2s ease-in-out infinite;
}

@keyframes flamePulse {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.8; }
    50% { transform: translateX(-50%) scale(1.2); opacity: 1; }
}

.band-description p {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.3rem;
    line-height: 1.8;
    color: var(--band-steel);
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.band-description p:first-child {
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
}

/* Band Description - Metal Plate Design */
.band-flag-decoration {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.mexico-flag-small {
    display: flex;
    width: 100px;
    height: 60px;
    border: 2px solid rgba(192, 192, 192, 0.6);
    border-radius: 4px;
    overflow: hidden;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.6),
        0 0 15px rgba(0, 255, 255, 0.15),
        inset 0 0 10px rgba(0, 0, 0, 0.2);
    position: relative;
}

.mexico-flag-small::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.15) 50%, transparent 60%);
    pointer-events: none;
    z-index: 10;
}

.flag-stripe {
    flex: 1;
    position: relative;
}

.flag-stripe.verde {
    background: linear-gradient(180deg, #006847 0%, #004d35 100%);
    box-shadow: inset -2px 0 8px rgba(0, 0, 0, 0.3);
}

.flag-stripe.blanco {
    background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.flag-escudo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    z-index: 5;
    position: relative;
}

.flag-stripe.rojo {
    background: linear-gradient(180deg, #ce1126 0%, #a00e1e 100%);
    box-shadow: inset 2px 0 8px rgba(0, 0, 0, 0.3);
}

/* Metal Plate */
.metal-plate {
    position: relative;
    background:
        linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 50%, #0a0a0a 100%);
    border: 3px solid rgba(192, 192, 192, 0.4);
    border-radius: 12px;
    padding: 4rem 3rem 3rem 3rem;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.8),
        inset 0 0 30px rgba(0, 0, 0, 0.5),
        inset 0 2px 0 rgba(255, 255, 255, 0.1),
        inset 0 -2px 0 rgba(0, 0, 0, 0.5),
        0 0 40px rgba(0, 255, 255, 0.1);
}

.metal-plate::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.02) 2px,
            rgba(255, 255, 255, 0.02) 4px
        );
    border-radius: 12px;
    pointer-events: none;
}

.metal-plate::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 1px solid rgba(0, 255, 255, 0.15);
    border-radius: 8px;
    pointer-events: none;
}

/* Rivets/Tornillos */
.rivet {
    position: absolute;
    width: 20px;
    height: 20px;
    background:
        radial-gradient(circle at 30% 30%, #8a8a8a 0%, #4a4a4a 50%, #2a2a2a 100%);
    border-radius: 50%;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 5;
}

.rivet::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 2px;
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

.rivet::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    width: 12px;
    height: 2px;
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

.rivet-tl { top: 15px; left: 15px; }
.rivet-tr { top: 15px; right: 15px; }
.rivet-bl { bottom: 15px; left: 15px; }
.rivet-br { bottom: 15px; right: 15px; }

/* Plate Content */
.plate-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5rem;
    letter-spacing: 0.2em;
    color: rgba(0, 255, 255, 0.9);
    text-align: center;
    margin-bottom: 2rem;
    text-shadow:
        0 0 20px rgba(0, 255, 255, 0.6),
        2px 2px 4px rgba(0, 0, 0, 0.8);
}

.plate-content p {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.3rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1.5rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    position: relative;
}

.plate-quote {
    font-family: 'Orbitron', monospace;
    font-size: 1.5rem;
    font-style: italic;
    color: rgba(0, 255, 255, 0.95);
    text-align: center;
    padding: 1.5rem;
    margin: 2rem 0;
    border-left: 3px solid rgba(0, 255, 255, 0.5);
    border-right: 3px solid rgba(0, 255, 255, 0.5);
    background: rgba(0, 255, 255, 0.05);
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
}

.plate-final {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.95);
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 255, 255, 0.3);
}

.plate-final strong {
    color: rgba(0, 255, 255, 1);
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.7);
    font-weight: 700;
}

/* ========================================
   Band Members Grid
======================================== */
.band-members {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 3rem;
    padding: 2rem;
}

/* Member Card */
.member {
    position: relative;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.member:hover {
    transform: translateY(-10px);
}

/* Member Photo Container */
.member-photo {
    position: relative;
    width: 250px;
    height: 350px;
    margin: 0 auto 1.5rem;
    overflow: hidden;
    border-radius: 10px;
    border: 3px solid transparent;
    background: linear-gradient(45deg,
        var(--band-blood) 0%,
        #000000 50%,
        var(--band-blood) 100%);
    padding: 3px;
    transition: all 0.3s ease;
}

.member-photo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        transparent 60%,
        rgba(139, 0, 0, 0.8) 100%);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.member:hover .member-photo::before {
    opacity: 1;
}

.member-photo::after {
    content: '⚡';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 4rem;
    z-index: 2;
    transition: all 0.3s ease;
    text-shadow: 0 0 30px var(--band-fire);
}

.member:hover .member-photo::after {
    transform: translate(-50%, -50%) scale(1);
}

.member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7px;
    transition: all 0.3s ease;
    filter: grayscale(100%) contrast(1.2);
}

.member:hover .member-photo img {
    filter: grayscale(0%) contrast(1.1) brightness(0.9);
    transform: scale(1.1);
}

/* Member Info */
.member h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    color: white;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
    transition: all 0.3s ease;
}

.member:hover h3 {
    color: var(--band-fire);
    text-shadow: 0 0 20px var(--band-fire);
}

.member p {
    font-family: 'Oswald', sans-serif;
    font-size: 1.1rem;
    color: var(--band-steel);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    position: relative;
    display: inline-block;
    padding: 0.5rem 1.5rem;
}

.member p::before,
.member p::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 2px;
    background: var(--band-blood);
}

.member p::before {
    left: -40px;
}

.member p::after {
    right: -40px;
}

/* Hover Fire Effect */
.member::before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 40px;
    background: radial-gradient(ellipse at center,
        var(--band-fire) 0%,
        transparent 70%);
    opacity: 0;
    transition: all 0.3s ease;
    filter: blur(10px);
}

.member:hover::before {
    opacity: 0.6;
    bottom: -10px;
    animation: fireFlicker 0.5s ease-in-out infinite;
}

@keyframes fireFlicker {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.2); }
}

/* ========================================
   Band Stats (Optional Enhancement)
======================================== */
.band-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
    margin-top: 4rem;
    padding: 2rem;
    background: rgba(139, 0, 0, 0.1);
    border-top: 2px solid var(--band-blood);
    border-bottom: 2px solid var(--band-blood);
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    color: var(--band-fire);
    text-shadow: 0 0 20px var(--band-fire);
}

.stat-label {
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--band-steel);
}

/* ========================================
   Responsive Design
======================================== */
@media (max-width: 1024px) {
    .band-members {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .band-section {
        padding: 4rem 0;
    }

    .band-section .section-title {
        font-size: 3rem;
        letter-spacing: 0.1em;
    }

    .band-description {
        padding: 2rem 1rem;
    }

    .band-description p {
        font-size: 1.1rem;
    }

    .band-members {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 1rem;
    }

    .member-photo {
        width: 200px;
        height: 280px;
    }

    .member h3 {
        font-size: 1.5rem;
    }

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

@media (max-width: 480px) {
    .band-section .section-title::after {
        display: none;
    }

    .member-photo {
        width: 160px;
        height: 220px;
    }
}

/* ========================================
   Loading Animation for Images
======================================== */
.member-photo img {
    animation: fadeInUp 0.8s ease forwards;
    opacity: 0;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.member:nth-child(1) .member-photo img { animation-delay: 0.1s; }
.member:nth-child(2) .member-photo img { animation-delay: 0.2s; }
.member:nth-child(3) .member-photo img { animation-delay: 0.3s; }
.member:nth-child(4) .member-photo img { animation-delay: 0.4s; }/* ========================================
   Gallery Section - Heavy Metal Style
======================================== */

/* ========================================
   Variables
======================================== */
:root {
    --gallery-bg: #000000;
    --gallery-blood: #8B0000;
    --gallery-fire: #ff4500;
    --gallery-steel: #c0c0c0;
}

/* ========================================
   Gallery Section Container
======================================== */
.gallery-section {
    background: linear-gradient(180deg,
        #000000 0%,
        #0a0000 50%,
        #000000 100%);
    padding: 8rem 0;
    position: relative;
    overflow: hidden;
}

/* Background Pattern */
.gallery-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 20px,
        rgba(139, 0, 0, 0.02) 20px,
        rgba(139, 0, 0, 0.02) 40px
    );
    pointer-events: none;
}

/* ========================================
   Section Title
======================================== */
.gallery-section .section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(4rem, 10vw, 8rem);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    margin-bottom: 1rem;
    background: linear-gradient(180deg,
        #ffffff 0%,
        var(--gallery-steel) 50%,
        #808080 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Category Tabs */
.gallery-tabs {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 4rem;
    flex-wrap: wrap;
}

.gallery-tab {
    background: transparent;
    border: 2px solid var(--gallery-blood);
    color: var(--gallery-steel);
    padding: 1rem 2rem;
    font-family: 'Oswald', sans-serif;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.gallery-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gallery-blood);
    transition: left 0.3s ease;
    z-index: -1;
}

.gallery-tab:hover::before,
.gallery-tab.active::before {
    left: 0;
}

.gallery-tab:hover,
.gallery-tab.active {
    color: white;
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(139, 0, 0, 0.5);
}

/* ========================================
   Gallery Grid
======================================== */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Gallery Item */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #000;
    cursor: pointer;
    transition: all 0.3s ease;
    aspect-ratio: 1;
}

.gallery-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        transparent 50%,
        rgba(0, 0, 0, 0.8) 100%);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover::before {
    opacity: 1;
}

.gallery-item:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 40px rgba(139, 0, 0, 0.6);
}

/* Item Image */
.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

.gallery-item:hover .gallery-image {
    transform: scale(1.1);
    filter: brightness(0.8) contrast(1.2);
}

/* Item Type Badge */
.gallery-type {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--gallery-blood);
    color: white;
    padding: 0.5rem 1rem;
    font-family: 'Oswald', sans-serif;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 5px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gallery-type i {
    font-size: 1rem;
}

/* Item Overlay */
.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.9) 100%);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 2;
}

.gallery-item:hover .gallery-overlay {
    transform: translateY(0);
}

.gallery-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: white;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.gallery-date {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    color: var(--gallery-steel);
}

/* Play Button for Videos */
.gallery-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(139, 0, 0, 0.9);
    border: 3px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    opacity: 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.gallery-item.video:hover .gallery-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.gallery-play:hover {
    background: var(--gallery-fire);
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 0 30px rgba(255, 69, 0, 0.8);
}

.gallery-play i {
    font-size: 2rem;
    color: white;
    margin-left: 5px;
}

/* ========================================
   Lightbox Modal
======================================== */
.gallery-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-lightbox.active {
    display: flex;
    opacity: 1;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    position: relative;
}

.lightbox-image,
.lightbox-video {
    max-width: 100%;
    max-height: 90vh;
    border: 3px solid var(--gallery-blood);
    border-radius: 10px;
}

.lightbox-youtube {
    max-width: 90vw;
    max-height: 90vh;
    width: 1280px;
    height: 720px;
    aspect-ratio: 16 / 9;
    border: 3px solid var(--gallery-blood);
    border-radius: 10px;
}

@media (max-width: 768px) {
    .lightbox-youtube {
        width: 95vw;
        height: auto;
    }
}

.lightbox-close {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 50px;
    height: 50px;
    background: var(--gallery-blood);
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.lightbox-close:hover {
    background: var(--gallery-fire);
    transform: rotate(90deg) scale(1.1);
}

.lightbox-close i {
    font-size: 1.5rem;
    color: white;
}

/* Navigation Arrows */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(139, 0, 0, 0.8);
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.lightbox-nav:hover {
    background: var(--gallery-fire);
    transform: translateY(-50%) scale(1.1);
}

.lightbox-prev {
    left: -80px;
}

.lightbox-next {
    right: -80px;
}

.lightbox-nav i {
    font-size: 1.5rem;
    color: white;
}

/* Caption */
.lightbox-caption {
    position: absolute;
    bottom: -60px;
    left: 0;
    right: 0;
    text-align: center;
    color: white;
    font-family: 'Oswald', sans-serif;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ========================================
   Load More Button
======================================== */
.gallery-load-more {
    text-align: center;
    margin-top: 4rem;
}

.btn-load-more {
    background: linear-gradient(135deg,
        var(--gallery-blood) 0%,
        #1a0000 100%);
    border: 2px solid var(--gallery-fire);
    color: white;
    padding: 1.2rem 3rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-load-more::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle,
        var(--gallery-fire) 0%,
        transparent 70%);
    transform: translate(-50%, -50%);
    transition: all 0.5s ease;
}

.btn-load-more:hover::before {
    width: 300%;
    height: 300%;
}

.btn-load-more:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 69, 0, 0.5);
}

/* ========================================
   Responsive Design
======================================== */
@media (max-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .lightbox-nav {
        display: none;
    }
}

@media (max-width: 768px) {
    .gallery-section {
        padding: 4rem 0;
    }

    .gallery-tabs {
        gap: 1rem;
    }

    .gallery-tab {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
    }

    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
        padding: 0 1rem;
    }

    .lightbox-close {
        top: 20px;
        right: 20px;
    }
}

@media (max-width: 480px) {
    .gallery-section .section-title {
        font-size: 3rem;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }
}/* ========================================
   Merch Section - Heavy Metal Store
======================================== */

/* ========================================
   Variables
======================================== */
:root {
    --merch-bg: #000000;
    --merch-blood: #8B0000;
    --merch-fire: #ff4500;
    --merch-steel: #c0c0c0;
    --merch-gold: #ffd700;
}

/* ========================================
   Merch Section Container
======================================== */
.merch-section {
    background: linear-gradient(180deg,
        #000000 0%,
        #1a0000 50%,
        #000000 100%);
    padding: 8rem 0;
    position: relative;
    overflow: hidden;
}

/* Background Pattern */
.merch-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='skull' x='0' y='0' width='60' height='60' patternUnits='userSpaceOnUse'%3E%3Cpath d='M30 10 L20 30 L30 50 L40 30 Z' fill='none' stroke='%238B0000' stroke-width='0.5' opacity='0.1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='60' height='60' fill='url(%23skull)'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* ========================================
   Section Title
======================================== */
.merch-section .section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(4rem, 10vw, 8rem);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    margin-bottom: 2rem;
    background: linear-gradient(180deg,
        #ffffff 0%,
        var(--merch-steel) 50%,
        #808080 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

.merch-subtitle {
    text-align: center;
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    color: var(--merch-blood);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 4rem;
}

/* ========================================
   Merch Grid
======================================== */
.merch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 3rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Merch Item Card */
.merch-item {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(26, 0, 0, 0.95) 100%);
    border: 2px solid var(--merch-blood);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
}

.merch-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(139, 0, 0, 0.6);
    border-color: var(--merch-fire);
}

/* Product Image */
.merch-image-container {
    position: relative;
    overflow: hidden;
    height: 350px;
    background: #000;
}

.merch-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.merch-item:hover .merch-image {
    transform: scale(1.1);
}

/* Sale Badge */
.merch-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--merch-fire);
    color: white;
    padding: 0.5rem 1rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 5px;
    animation: pulseBadge 2s ease-in-out infinite;
}

@keyframes pulseBadge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.merch-badge.new {
    background: var(--merch-gold);
    color: #000;
}

.merch-badge.soldout {
    background: #666;
}

/* Quick View Overlay */
.merch-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(139, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.merch-item:hover .merch-overlay {
    opacity: 1;
}

.merch-action {
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.merch-action:hover {
    background: white;
    color: var(--merch-blood);
    transform: scale(1.2);
}

/* Product Info */
.merch-info {
    padding: 1.5rem;
}

.merch-category {
    font-family: 'Oswald', sans-serif;
    font-size: 0.9rem;
    color: var(--merch-steel);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 0.5rem;
}

.merch-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.8rem;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.merch-price-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.merch-price {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: var(--merch-fire);
    text-shadow: 0 0 10px rgba(255, 69, 0, 0.5);
}

.merch-price-old {
    font-size: 1.5rem;
    color: #666;
    text-decoration: line-through;
}

/* Size Options */
.merch-sizes {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.size-option {
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--merch-steel);
    color: var(--merch-steel);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Oswald', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.size-option:hover,
.size-option.active {
    background: var(--merch-blood);
    border-color: var(--merch-blood);
    color: white;
}

.size-option.unavailable {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Add to Cart Button */
.btn-add-cart {
    width: 100%;
    background: linear-gradient(135deg,
        var(--merch-blood) 0%,
        #1a0000 100%);
    border: 2px solid var(--merch-fire);
    color: white;
    padding: 1rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-add-cart::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle,
        var(--merch-fire) 0%,
        transparent 70%);
    transform: translate(-50%, -50%);
    transition: all 0.5s ease;
}

.btn-add-cart:hover::before {
    width: 300%;
    height: 300%;
}

.btn-add-cart:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(255, 69, 0, 0.5);
}

.btn-add-cart.soldout {
    background: #333;
    border-color: #666;
    cursor: not-allowed;
}

/* ========================================
   Special Promo Banner
======================================== */
.merch-promo {
    margin: 4rem 0;
    padding: 3rem;
    background: linear-gradient(135deg,
        var(--merch-blood) 0%,
        var(--merch-fire) 100%);
    border: 3px solid white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.merch-promo::before {
    content: '🔥';
    position: absolute;
    font-size: 10rem;
    opacity: 0.1;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
}

.merch-promo::after {
    content: '🔥';
    position: absolute;
    font-size: 10rem;
    opacity: 0.1;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
}

.promo-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 1rem;
}

.promo-text {
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    color: white;
    margin-bottom: 2rem;
}

.promo-code {
    display: inline-block;
    background: rgba(0, 0, 0, 0.3);
    border: 2px dashed white;
    padding: 1rem 2rem;
    font-family: 'Share Tech Mono', monospace;
    font-size: 2rem;
    color: white;
    letter-spacing: 0.2em;
}

/* ========================================
   Shopping Cart Icon
======================================== */
.merch-cart-icon {
    position: fixed;
    bottom: 200px;  /* Ajustado más arriba para mejor separación del círculo de progreso */
    right: 30px;
    width: 60px;
    height: 60px;
    background: var(--merch-blood);
    border: 3px solid white;
    border-radius: 50%;
    display: flex !important; /* Forzar visibilidad */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999; /* Mayor z-index para asegurar visibilidad */
    transition: bottom 0.3s ease, transform 0.3s ease; /* Solo transiciones específicas */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    opacity: 1 !important; /* Asegurar que no se oculte */
    visibility: visible !important; /* Asegurar que sea visible */
}

/* Ajustar según el estado del reproductor - usando clases en body */
body.player-expanded .merch-cart-icon {
    bottom: 240px; /* Más espacio cuando el reproductor está expandido */
}

body.player-compact .merch-cart-icon {
    bottom: 160px; /* Espacio moderado cuando está compacto */
}

body.player-hidden .merch-cart-icon {
    bottom: 200px; /* Posición normal cuando está oculto */
}

.merch-cart-icon:hover {
    background: var(--merch-fire);
    transform: scale(1.1);
}

.merch-cart-icon i {
    font-size: 1.5rem;
    color: white;
}

.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--merch-gold);
    color: #000;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    font-weight: bold;
}

/* ========================================
   Responsive Design
======================================== */
@media (max-width: 1024px) {
    .merch-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@media (max-width: 768px) {
    .merch-section {
        padding: 4rem 0;
    }

    .merch-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 2rem;
        padding: 0 1rem;
    }

    .merch-image-container {
        height: 250px;
    }

    .promo-title {
        font-size: 2rem;
    }

    .promo-code {
        font-size: 1.5rem;
    }
}

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

    .merch-section .section-title {
        font-size: 3rem;
    }
}/* ========================================
   Tour Section - Heavy Metal World Tour
======================================== */

/* ========================================
   Variables
======================================== */
:root {
    --tour-bg: #000000;
    --tour-blood: #8B0000;
    --tour-fire: #ff4500;
    --tour-steel: #c0c0c0;
    --tour-gold: #ffd700;
}

/* ========================================
   Tour Section Container
======================================== */
.tour-section {
    background: linear-gradient(180deg,
        #000000 0%,
        #1a0000 50%,
        #000000 100%);
    padding: 8rem 0;
    position: relative;
    overflow: hidden;
}

/* World Map Background */
.tour-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500'%3E%3Cpath d='M100,250 Q250,150 400,250 T700,250' stroke='%238B0000' stroke-width='1' fill='none' opacity='0.1'/%3E%3Ccircle cx='100' cy='250' r='5' fill='%238B0000' opacity='0.3'/%3E%3Ccircle cx='400' cy='250' r='5' fill='%238B0000' opacity='0.3'/%3E%3Ccircle cx='700' cy='250' r='5' fill='%238B0000' opacity='0.3'/%3E%3C/svg%3E") no-repeat center;
    opacity: 0.2;
    pointer-events: none;
}

/* ========================================
   Section Title
======================================== */
.tour-section .section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(4rem, 10vw, 8rem);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    margin-bottom: 1rem;
    background: linear-gradient(180deg,
        #ffffff 0%,
        var(--tour-steel) 50%,
        #808080 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 1;
}

.tour-subtitle {
    text-align: center;
    font-family: 'Oswald', sans-serif;
    font-size: 2rem;
    color: var(--tour-fire);
    text-transform: uppercase;
    letter-spacing: 0.3em;
    margin-bottom: 4rem;
    text-shadow: 0 0 20px rgba(255, 69, 0, 0.5);
}

/* ========================================
   Tour Dates Container
======================================== */
.tour-dates {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Tour Item */
.tour-item {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 2rem;
    background: linear-gradient(135deg,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(26, 0, 0, 0.9) 100%);
    border: 2px solid var(--tour-blood);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.tour-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 69, 0, 0.3),
        transparent);
    transition: left 0.5s ease;
}

.tour-item:hover::before {
    left: 100%;
}

.tour-item:hover {
    transform: translateX(10px);
    box-shadow: -10px 0 40px rgba(255, 69, 0, 0.5);
    border-color: var(--tour-fire);
}

/* Date Display */
.tour-date {
    text-align: center;
    padding: 1rem;
    background: var(--tour-blood);
    border-radius: 10px;
    position: relative;
    box-shadow: 0 5px 20px rgba(139, 0, 0, 0.5);
}

.tour-date .day {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    color: white;
    line-height: 1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.tour-date .month {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 1.2rem;
    color: var(--tour-steel);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-top: 0.5rem;
}

.tour-date .year {
    display: block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    color: var(--tour-steel);
    margin-top: 0.3rem;
    opacity: 0.8;
}

/* Tour Info */
.tour-info {
    flex: 1;
}

.tour-city {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.tour-country {
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    color: var(--tour-fire);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.8rem;
    background: rgba(255, 69, 0, 0.2);
    border: 1px solid var(--tour-fire);
    border-radius: 5px;
    display: inline-block;
}

.tour-venue {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.3rem;
    color: var(--tour-steel);
    margin-bottom: 0.5rem;
}

.tour-support {
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    color: #808080;
    font-style: italic;
}

.tour-support span {
    color: var(--tour-gold);
}

/* Tour Status */
.tour-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
}

.tour-price {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--tour-gold);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* Ticket Button */
.btn-ticket {
    background: linear-gradient(135deg,
        var(--tour-blood) 0%,
        #1a0000 100%);
    border: 2px solid var(--tour-fire);
    color: white;
    padding: 1rem 2.5rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-ticket::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle,
        var(--tour-fire) 0%,
        transparent 70%);
    transform: translate(-50%, -50%);
    transition: all 0.5s ease;
}

.btn-ticket:hover::before {
    width: 300%;
    height: 300%;
}

.btn-ticket:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(255, 69, 0, 0.5);
    color: white;
    text-decoration: none;
}

/* Sold Out State */
.tour-item.sold-out {
    opacity: 0.7;
    background: linear-gradient(135deg,
        rgba(40, 40, 40, 0.8) 0%,
        rgba(20, 20, 20, 0.9) 100%);
    border-color: #666;
}

.tour-item.sold-out::after {
    content: 'AGOTADO';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 4rem;
    color: rgba(255, 0, 0, 0.3);
    letter-spacing: 0.3em;
    pointer-events: none;
    z-index: 1;
}

.tour-item.sold-out .tour-date {
    background: #666;
}

.btn-soldout {
    background: #333;
    border-color: #666;
    color: #999;
    cursor: not-allowed;
    pointer-events: none;
}

/* VIP Badge */
.tour-vip {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--tour-gold);
    color: #000;
    padding: 0.5rem 1rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 5px;
    transform: rotate(5deg);
    box-shadow: 0 3px 10px rgba(255, 215, 0, 0.5);
}

/* Special Event */
.tour-item.special {
    background: linear-gradient(135deg,
        rgba(139, 0, 0, 0.3) 0%,
        rgba(255, 69, 0, 0.2) 100%);
    border-color: var(--tour-gold);
    border-width: 3px;
}

.tour-item.special .tour-date {
    background: linear-gradient(135deg,
        var(--tour-fire) 0%,
        var(--tour-blood) 100%);
}

/* ========================================
   Tour Stats
======================================== */
.tour-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 4rem auto 0;
    padding: 3rem;
    background: rgba(139, 0, 0, 0.1);
    border: 2px solid var(--tour-blood);
    border-radius: 10px;
}

.stat {
    text-align: center;
}

.stat-number {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    color: var(--tour-fire);
    text-shadow: 0 0 20px rgba(255, 69, 0, 0.5);
    display: block;
}

.stat-label {
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    color: var(--tour-steel);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

/* ========================================
   Responsive Design
======================================== */
@media (max-width: 768px) {
    .tour-section {
        padding: 4rem 0;
    }

    .tour-item {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 1.5rem;
    }

    .tour-date {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
    }

    .tour-date .day {
        font-size: 2rem;
    }

    .tour-status {
        align-items: center;
    }

    .tour-stats {
        grid-template-columns: repeat(2, 1fr);
        padding: 2rem 1rem;
    }

    .tour-vip {
        position: static;
        display: inline-block;
        margin-top: 1rem;
        transform: none;
    }
}

@media (max-width: 480px) {
    .tour-section .section-title {
        font-size: 3rem;
    }

    .tour-subtitle {
        font-size: 1.5rem;
    }

    .tour-city {
        font-size: 1.5rem;
    }
}/* ========================================
   Contact Section - Heavy Metal Style
======================================== */

/* ========================================
   Variables
======================================== */
:root {
    --contact-bg: #000000;
    --contact-blood: #00aaff;
    --contact-fire: #00ffff;
    --contact-steel: #c0c0c0;
    --contact-dark: #001a33;
}

/* ========================================
   Contact Section Container
======================================== */
.contact-section {
    background: linear-gradient(180deg,
        #000000 0%,
        #1a0000 25%,
        #000000 50%,
        #0a0000 75%,
        #000000 100%);
    padding: 8rem 0;
    position: relative;
    overflow: hidden;
}

/* Animated background pattern */
.contact-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(139, 0, 0, 0.03) 10px,
        rgba(139, 0, 0, 0.03) 20px
    );
    animation: slidePattern 20s linear infinite;
}

@keyframes slidePattern {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ========================================
   Section Title
======================================== */
.contact-section .section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(4rem, 10vw, 8rem);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    margin-bottom: 2rem;
    background: linear-gradient(180deg,
        #ffffff 0%,
        var(--contact-steel) 50%,
        #808080 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

.contact-subtitle {
    text-align: center;
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    color: var(--contact-steel);
    margin-bottom: 4rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

/* ========================================
   Contact Container
======================================== */
.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

/* ========================================
   Contact Form
======================================== */
.contact-form-wrapper {
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid var(--contact-blood);
    border-radius: 10px;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}

.contact-form-wrapper::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg,
        var(--contact-fire),
        var(--contact-blood),
        var(--contact-fire));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: borderRotate 3s linear infinite;
}

@keyframes borderRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.contact-form-wrapper:hover::before {
    opacity: 0.5;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Form Groups */
.form-group {
    position: relative;
}

.form-group label {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(0, 255, 255, 0.95);
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    margin-bottom: 0.75rem;
    transition: all 0.3s ease;
}

.form-group:focus-within label {
    color: rgba(0, 255, 255, 1);
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
}

/* Input Fields */
.form-control {
    width: 100%;
    padding: 1rem 1.2rem;
    background: rgba(0, 20, 40, 0.6);
    border: 2px solid rgba(0, 170, 255, 0.4);
    border-radius: 5px;
    color: rgba(255, 255, 255, 0.95);
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
}

.form-control:focus {
    outline: none;
    border-color: rgba(0, 255, 255, 0.8);
    background: rgba(0, 30, 50, 0.8);
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(0, 255, 255, 0.4),
        0 0 30px rgba(0, 170, 255, 0.2);
}

.form-control::placeholder {
    color: rgba(0, 170, 255, 0.5);
    font-style: italic;
    font-weight: 400;
}

/* Textarea */
textarea.form-control {
    min-height: 150px;
    resize: vertical;
}

/* Submit Button */
.btn-submit {
    background: linear-gradient(135deg,
        var(--contact-blood) 0%,
        var(--contact-dark) 100%);
    border: 2px solid var(--contact-fire);
    color: white;
    padding: 1.2rem 3rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.btn-submit::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle,
        var(--contact-fire) 0%,
        transparent 70%);
    transform: translate(-50%, -50%);
    transition: all 0.5s ease;
}

.btn-submit:hover::before {
    width: 300%;
    height: 300%;
}

.btn-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 255, 255, 0.5);
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
}

.btn-submit span {
    position: relative;
    z-index: 1;
}

/* ========================================
   Contact Info
======================================== */
.contact-info {
    padding: 2rem;
}

.info-item {
    margin-bottom: 3rem;
    position: relative;
    padding-left: 60px;
}

.info-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    background: #00FFFFF2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #000;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.info-item h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: white;
    margin-bottom: 0.5rem;
}

.info-item p,
.info-item a {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.2rem;
    color: var(--contact-steel);
    text-decoration: none;
    transition: color 0.3s ease;
}

.info-item a:hover {
    color: var(--contact-fire);
}

/* Social Links */
.social-links {
    display: flex;
    gap: 1.5rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid rgba(139, 0, 0, 0.3);
}

.social-link {
    width: 60px;
    height: 60px;
    background: transparent;
    border: 2px solid var(--contact-blood);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--contact-steel);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.social-link::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--contact-fire);
    transition: top 0.3s ease;
}

.social-link:hover::before {
    top: 0;
}

.social-link:hover {
    color: white;
    transform: translateY(-5px) rotate(360deg);
    box-shadow: 0 10px 20px rgba(0, 255, 255, 0.5);
}

.social-link i {
    position: relative;
    z-index: 1;
}

/* ========================================
   Map Section (Optional)
======================================== */
.map-container {
    margin-top: 4rem;
    height: 400px;
    border: 3px solid var(--contact-blood);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(139, 0, 0, 0.3);
    pointer-events: none;
    opacity: 0.5;
}

/* ========================================
   Form Validation
======================================== */
.form-control.error {
    border-color: #ff0000;
    animation: shake 0.5s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

.error-message {
    color: #ff0000;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    display: none;
}

.form-control.error ~ .error-message {
    display: block;
}

/* Success Message */
.success-message {
    background: rgba(0, 255, 0, 0.1);
    border: 2px solid #00ff00;
    color: #00ff00;
    padding: 1rem;
    border-radius: 5px;
    text-align: center;
    margin-top: 1rem;
    display: none;
    animation: fadeIn 0.5s ease;
}

.success-message.show {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========================================
   Responsive Design
======================================== */
@media (max-width: 1024px) {
    .contact-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

@media (max-width: 768px) {
    .contact-section {
        padding: 4rem 0;
    }

    .contact-section .section-title {
        font-size: 3rem;
        letter-spacing: 0.1em;
    }

    .contact-form-wrapper {
        padding: 2rem;
    }

    .btn-submit {
        width: 100%;
    }

    .info-item {
        padding-left: 50px;
    }

    .info-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .social-links {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .contact-container {
        padding: 0 1rem;
    }

    .contact-form-wrapper {
        padding: 1.5rem;
    }

    .social-link {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
}