/* ========================================
   TEMA GÓTICO/FRÍVOLO - Somos Tribu
   Paleta oscura con toques de rojo sangre, negro profundo y plateado
   ======================================== */

body.theme-gothic {
    /* Colores principales - Paleta gótica */
    --color-primary: #8b0000;        /* Rojo sangre oscuro */
    --color-secondary: #c0c0c0;      /* Plateado */
    --color-tertiary: #4b0082;       /* Índigo profundo */
    --color-accent: #ff1493;         /* Rosa shocking */
    --color-pink: #dc143c;           /* Crimson */
    
    /* Fondos oscuros */
    --color-dark: #0d0d0d;           /* Negro casi absoluto */
    --color-darker: #000000;         /* Negro puro */
    --color-surface: #1a1a1a;        /* Superficie oscura */
    
    /* Textos */
    --color-text: #e8e8e8;           /* Gris muy claro */
    --color-text-muted: #8b8b8b;     /* Gris medio */
    
    /* Gradientes góticos */
    --gradient-hero: linear-gradient(135deg, #8b0000 0%, #4b0082 50%, #000000 100%);
    --gradient-primary: linear-gradient(135deg, #8b0000 0%, #dc143c 100%);
    --gradient-secondary: linear-gradient(135deg, #c0c0c0 0%, #808080 100%);
    --gradient-accent: linear-gradient(135deg, #ff1493 0%, #8b0000 100%);
    --gradient-mystical: linear-gradient(135deg, #8b0000 0%, #ff1493 50%, #4b0082 100%);
    --gradient-dark: linear-gradient(180deg, #0d0d0d 0%, #000000 100%);
    --gradient-card: linear-gradient(135deg, rgba(139, 0, 0, 0.15) 0%, rgba(192, 192, 192, 0.1) 100%);
}

/* ========================================
   Ajustes específicos del tema gótico
   ======================================== */

body.theme-gothic .hero-section {
    background: radial-gradient(circle at 30% 20%, rgba(139, 0, 0, 0.2) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(75, 0, 130, 0.15) 0%, transparent 50%);
}

body.theme-gothic .hero-background {
    background: radial-gradient(ellipse at center, rgba(139, 0, 0, 0.3) 0%, rgba(0, 0, 0, 1) 70%);
}

body.theme-gothic .mycelium-overlay {
    background-image: 
        /* Partículas rojas sangrientas */
        radial-gradient(circle at 15% 25%, rgba(139, 0, 0, 0.9) 0%, transparent 2px),
        radial-gradient(circle at 85% 15%, rgba(220, 20, 60, 0.8) 0%, transparent 2px),
        radial-gradient(circle at 45% 70%, rgba(255, 20, 147, 0.8) 0%, transparent 2px),
        radial-gradient(circle at 70% 50%, rgba(192, 192, 192, 0.7) 0%, transparent 2px),
        radial-gradient(circle at 25% 80%, rgba(139, 0, 0, 0.8) 0%, transparent 2px),
        /* Más partículas */
        radial-gradient(circle at 30% 40%, rgba(139, 0, 0, 0.6) 0%, transparent 1.5px),
        radial-gradient(circle at 55% 85%, rgba(220, 20, 60, 0.6) 0%, transparent 1.5px),
        radial-gradient(circle at 75% 30%, rgba(255, 20, 147, 0.6) 0%, transparent 1.5px),
        /* Neblinas oscuras */
        radial-gradient(ellipse at 20% 50%, rgba(139, 0, 0, 0.2) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 80%, rgba(75, 0, 130, 0.15) 0%, transparent 40%);
}

body.theme-gothic .particles-layer-2 {
    background-image:
        radial-gradient(circle at 25% 15%, rgba(255, 20, 147, 1) 0%, transparent 2.5px),
        radial-gradient(circle at 75% 65%, rgba(192, 192, 192, 1) 0%, transparent 2.5px),
        radial-gradient(circle at 50% 85%, rgba(139, 0, 0, 1) 0%, transparent 2.5px),
        radial-gradient(circle at 10% 40%, rgba(220, 20, 60, 0.9) 0%, transparent 2.5px);
}

body.theme-gothic .particles-layer-3 {
    background-image:
        radial-gradient(circle at 40% 30%, rgba(139, 0, 0, 1) 0%, rgba(139, 0, 0, 0.3) 1px, transparent 3px),
        radial-gradient(circle at 60% 70%, rgba(192, 192, 192, 1) 0%, rgba(192, 192, 192, 0.3) 1px, transparent 3px),
        radial-gradient(circle at 20% 80%, rgba(255, 20, 147, 1) 0%, rgba(255, 20, 147, 0.3) 1px, transparent 3px);
}

body.theme-gothic .hero-title {
    filter: drop-shadow(0 0 50px rgba(139, 0, 0, 0.9)) drop-shadow(0 0 80px rgba(220, 20, 60, 0.6));
}

body.theme-gothic .scroll-indicator {
    background: var(--gradient-primary);
    filter: drop-shadow(0 0 10px rgba(139, 0, 0, 0.8));
}

body.theme-gothic .scroll-indicator:hover {
    filter: drop-shadow(0 0 20px rgba(139, 0, 0, 1));
}

body.theme-gothic .manifesto-item {
    background: var(--gradient-card);
    border-color: rgba(139, 0, 0, 0.3);
}

body.theme-gothic .manifesto-item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 10px 40px rgba(139, 0, 0, 0.3);
}

body.theme-gothic .manifesto-icon {
    background: var(--gradient-primary);
}

body.theme-gothic .manifesto-item-header h3 {
    background: var(--gradient-secondary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.theme-gothic .btn-primary {
    background: var(--gradient-primary);
}

body.theme-gothic .btn-primary:hover {
    background: var(--gradient-accent);
    box-shadow: 0 8px 30px rgba(139, 0, 0, 0.4);
}

body.theme-gothic .btn-secondary {
    border-color: var(--color-primary);
}

body.theme-gothic .btn-secondary:hover {
    background: var(--gradient-card);
    border-color: var(--color-accent);
}

body.theme-gothic .section-title {
    background: var(--gradient-mystical);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.theme-gothic .nav-link:hover {
    background: var(--gradient-card);
    box-shadow: 0 0 15px rgba(139, 0, 0, 0.4);
}

body.theme-gothic .music-platform-card {
    background: var(--gradient-card);
    border-color: rgba(139, 0, 0, 0.3);
}

body.theme-gothic .music-platform-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 10px 30px rgba(139, 0, 0, 0.3);
}

body.theme-gothic .audio-player-container {
    background: linear-gradient(135deg, rgba(139, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 100%);
    border-color: rgba(139, 0, 0, 0.3);
}

body.theme-gothic .control-btn:hover {
    background: var(--gradient-primary);
}

body.theme-gothic .lang-btn {
    background: var(--gradient-primary);
}

body.theme-gothic .lang-btn:hover {
    background: var(--gradient-secondary);
    border-color: var(--color-secondary);
    box-shadow: 0 6px 20px rgba(192, 192, 192, 0.4);
}

/* Efectos especiales góticos */
body.theme-gothic .main-header {
    background: rgba(0, 0, 0, 0.95);
    border-bottom: 1px solid rgba(139, 0, 0, 0.3);
}

body.theme-gothic .footer-pattern {
    background: linear-gradient(45deg, transparent 48%, rgba(139, 0, 0, 0.1) 49%, rgba(139, 0, 0, 0.1) 51%, transparent 52%);
}

/* EPK Section - Tema Gótico */
body.theme-gothic .epk-section {
    background: var(--gradient-dark);
}

body.theme-gothic .epk-unified {
    background: var(--gradient-card);
    border-color: rgba(139, 0, 0, 0.3);
    box-shadow: 0 10px 40px rgba(139, 0, 0, 0.2);
}

body.theme-gothic .epk-unified:hover {
    border-color: var(--color-primary);
    box-shadow: 0 15px 50px rgba(139, 0, 0, 0.3);
}

body.theme-gothic .bio-text p,
body.theme-gothic .bio-text-bottom p {
    color: var(--color-text);
}

body.theme-gothic .bio-intro {
    color: var(--color-text);
}

/* Video Section - Tema Gótico */
body.theme-gothic .video-section {
    background: var(--gradient-dark);
}

body.theme-gothic .video-wrapper {
    border-color: rgba(139, 0, 0, 0.3);
    box-shadow: 0 10px 40px rgba(139, 0, 0, 0.3);
}

body.theme-gothic .video-title {
    background: var(--gradient-mystical);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.theme-gothic .video-quote {
    color: var(--color-secondary);
}

body.theme-gothic .video-caption {
    background: var(--gradient-card);
    border-color: rgba(139, 0, 0, 0.3);
}

/* Contact Section - Tema Gótico */
body.theme-gothic .contact-section {
    background: var(--gradient-dark);
}

body.theme-gothic .booking-type-card {
    background: var(--gradient-card);
    border-color: rgba(139, 0, 0, 0.3);
}

body.theme-gothic .booking-type-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 10px 30px rgba(139, 0, 0, 0.3);
    transform: translateY(-5px);
}

body.theme-gothic .booking-type-icon {
    background: var(--gradient-primary);
}

body.theme-gothic .quick-contact-card {
    background: var(--gradient-card);
    border-color: rgba(139, 0, 0, 0.3);
}

body.theme-gothic .quick-contact-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 10px 40px rgba(139, 0, 0, 0.3);
}

body.theme-gothic .contact-form-container {
    background: var(--gradient-card);
    border-color: rgba(139, 0, 0, 0.3);
}

body.theme-gothic .form-group input,
body.theme-gothic .form-group textarea,
body.theme-gothic .form-group select {
    background: rgba(20, 20, 20, 0.5);
    border-color: rgba(139, 0, 0, 0.3);
    color: var(--color-text);
}

body.theme-gothic .form-group input:focus,
body.theme-gothic .form-group textarea:focus,
body.theme-gothic .form-group select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 15px rgba(139, 0, 0, 0.3);
}

body.theme-gothic .form-group label {
    color: var(--color-secondary);
}

/* Quick Contact Cards - Tema Gótico */
body.theme-gothic .quick-icon {
    background: var(--gradient-primary);
    box-shadow: 0 8px 20px rgba(139, 0, 0, 0.4);
}

body.theme-gothic .quick-contact-card:hover .quick-icon {
    box-shadow: 0 12px 30px rgba(139, 0, 0, 0.6);
}

body.theme-gothic .quick-contact-card h3 {
    color: var(--color-secondary);
}

/* WhatsApp Card - Tema Gótico */
body.theme-gothic .whatsapp-card {
    background: var(--gradient-card) !important;
    border: 2px solid rgba(139, 0, 0, 0.5) !important;
}

body.theme-gothic .whatsapp-card:hover {
    border-color: var(--color-primary) !important;
    box-shadow: 0 20px 40px rgba(139, 0, 0, 0.4) !important;
}

body.theme-gothic .whatsapp-card .quick-icon {
    background: linear-gradient(135deg, #8b0000 0%, #dc143c 100%);
}

body.theme-gothic .whatsapp-card .contact-link-large {
    background: linear-gradient(135deg, #8b0000 0%, #dc143c 100%);
}

body.theme-gothic .whatsapp-card .contact-link-large:hover {
    box-shadow: 0 12px 30px rgba(139, 0, 0, 0.5);
}

/* Contact Links - Tema Gótico */
body.theme-gothic .contact-link-large {
    background: var(--gradient-primary);
    box-shadow: 0 8px 20px rgba(139, 0, 0, 0.3);
}

body.theme-gothic .contact-link-large:hover {
    box-shadow: 0 12px 30px rgba(139, 0, 0, 0.5);
}

body.theme-gothic .response-time {
    color: var(--color-text-muted);
}

/* Social Networks Section - Tema Gótico */
body.theme-gothic .social-networks {
    background: linear-gradient(135deg, rgba(139, 0, 0, 0.15) 0%, rgba(192, 192, 192, 0.15) 100%);
    border: 2px solid rgba(139, 0, 0, 0.3);
    box-shadow: 0 10px 40px rgba(139, 0, 0, 0.2), inset 0 0 60px rgba(139, 0, 0, 0.1);
    animation: glow-border-gothic 3s ease-in-out infinite;
}

body.theme-gothic .social-networks::before {
    background: radial-gradient(circle, rgba(139, 0, 0, 0.1) 0%, transparent 70%);
}

@keyframes glow-border-gothic {
    0%, 100% {
        border-color: rgba(139, 0, 0, 0.3);
        box-shadow: 0 10px 40px rgba(139, 0, 0, 0.2), inset 0 0 60px rgba(139, 0, 0, 0.1);
    }
    50% {
        border-color: rgba(192, 192, 192, 0.5);
        box-shadow: 0 15px 50px rgba(192, 192, 192, 0.4), inset 0 0 80px rgba(139, 0, 0, 0.2);
    }
}

body.theme-gothic .subsection-title {
    background: var(--gradient-mystical);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.theme-gothic .social-cta-text {
    color: rgba(232, 232, 232, 0.9);
}

body.theme-gothic .social-follow-count {
    color: var(--color-secondary);
}

/* Social Links - Tema Gótico */
body.theme-gothic .social-link {
    background: rgba(20, 20, 20, 0.8);
    border: 2px solid rgba(139, 0, 0, 0.4);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}

body.theme-gothic .social-link::before {
    background: var(--gradient-mystical);
}

body.theme-gothic .social-link:hover {
    border-color: var(--color-primary);
    box-shadow: 0 20px 40px rgba(139, 0, 0, 0.6), 0 0 60px rgba(192, 192, 192, 0.4);
}

body.theme-gothic .social-links a {
    background: var(--gradient-card);
    border-color: rgba(139, 0, 0, 0.3);
}

body.theme-gothic .social-links a:hover {
    border-color: var(--color-primary);
    box-shadow: 0 5px 20px rgba(139, 0, 0, 0.4);
}

/* Booking badges */
body.theme-gothic .badge {
    background: var(--gradient-primary);
}

/* Back to top button */
body.theme-gothic #backToTopBtn {
    background: var(--gradient-primary);
}

body.theme-gothic #backToTopBtn:hover {
    background: var(--gradient-accent);
    box-shadow: 0 5px 20px rgba(139, 0, 0, 0.5);
}

/* Ambient audio button */
body.theme-gothic #ambientToggle {
    background: var(--gradient-primary);
}

body.theme-gothic #ambientToggle:hover {
    background: var(--gradient-accent);
    box-shadow: 0 6px 20px rgba(139, 0, 0, 0.5);
}