/* ============================================
   RESPONSIVE.CSS - Auto-ajuste Completo
   ============================================ */

/* Base */
* { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; display: block; }

/* Container */
.container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 2rem; }

/* ===== TABLETS (992px) ===== */
@media (max-width: 992px) {
    .mobile-menu-toggle { display: flex !important; z-index: 1001; }
    .nav-menu {
        position: fixed !important; top: 0; right: -100%; height: 100vh; width: 320px;
        background: linear-gradient(180deg, rgba(26, 26, 26, 0.98), rgba(42, 42, 42, 0.95)) !important;
        flex-direction: column !important; padding-top: 100px;
        transition: right 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        z-index: 1000; overflow-y: auto;
    }
    .nav-menu.active { right: 0 !important; }
    .nav-menu li { width: 100%; border-bottom: 1px solid rgba(193, 154, 107, 0.1); }
    .nav-menu a { width: 100%; text-align: center; padding: 1rem !important; display: block; }
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
    .container { padding: 0 1.5rem; }
    .index-hero-title { font-size: 3.5rem !important; }
    .index-hero-subtitle { font-size: 1.5rem !important; }
}

/* ===== MOBILE (768px) ===== */
@media (max-width: 768px) {
    html { font-size: 14px; }
    .container { padding: 0 1rem; }
    
    h1, .index-hero-title { font-size: 2.5rem !important; line-height: 1.2; }
    h2 { font-size: 2rem !important; }
    h3 { font-size: 1.5rem !important; }
    .index-hero-subtitle { font-size: 1.2rem !important; margin-bottom: 2rem !important; }
    
    .grid-2, .grid-3, .grid-4, .projects-grid, .merch-grid, .downloads-grid, .team-grid {
        grid-template-columns: 1fr !important; gap: 1.5rem;
    }
    
    .index-hero-section, .hero-section {
        background-attachment: scroll !important;
        min-height: 100vh; padding: 2rem 0;
    }
    
    .index-hero-content { padding: 1rem; }
    .index-hero-logo { width: 100px !important; height: 100px !important; margin-bottom: 2rem !important; }
    .index-logo-ring { width: 100px !important; height: 100px !important; }
    .index-logo-ring-2 { width: 80px !important; height: 80px !important; }
    
    .index-hero-buttons { flex-direction: column; width: 100%; gap: 1rem !important; }
    .index-btn { width: 100%; justify-content: center; padding: 1rem 2rem !important; }
    
    .index-hero-stats {
        flex-direction: column !important; gap: 1.5rem !important;
        padding: 1.5rem !important; margin-top: 2rem !important;
    }
    .index-stat-item { width: 100%; }
    .index-stat-divider {
        width: 60px !important; height: 2px !important;
        background: linear-gradient(90deg, transparent, rgba(193, 154, 107, 0.5), transparent) !important;
    }
    .index-stat-number { font-size: 2.5rem !important; }
    .index-stat-label { font-size: 0.9rem !important; }
    
    .card { padding: 1.5rem; }
    .card-image { height: 180px; }
    .logo a { font-size: 2rem !important; }
    .nav-menu { width: 100% !important; }
    .section-padding { padding: 3rem 1rem; }
    .btn { padding: 0.8rem 1.5rem; font-size: 0.95rem; }
    
    .radio-player { padding: 1.5rem; }
    .radio-logo { width: 120px; height: 120px; }
    .radio-title { font-size: 1.8rem; }
    .radio-controls { flex-wrap: wrap; gap: 0.8rem; }
    .radio-btn { width: 50px; height: 50px; font-size: 1.2rem; }
    .radio-btn.play { width: 70px; height: 70px; font-size: 1.8rem; }
    
    .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { min-width: 600px; }
}

/* ===== MOBILE PEQUENO (550px) ===== */
@media (max-width: 550px) {
    html { font-size: 13px; }
    .container { padding: 0 0.8rem; }
    
    h1, .index-hero-title { font-size: 2rem !important; }
    h2 { font-size: 1.6rem !important; }
    .index-hero-subtitle { font-size: 1rem !important; }
    
    .index-hero-logo { width: 80px !important; height: 80px !important; margin-bottom: 1.5rem !important; }
    .index-logo-ring { width: 80px !important; height: 80px !important; }
    .index-logo-ring-2 { width: 60px !important; height: 60px !important; }
    
    .index-btn { padding: 0.8rem 1.5rem !important; font-size: 0.9rem; }
    .btn { padding: 0.7rem 1.2rem; font-size: 0.85rem; }
    
    .index-hero-stats { gap: 1rem !important; padding: 1rem !important; }
    .index-stat-number { font-size: 2rem !important; }
    .index-stat-label { font-size: 0.75rem !important; }
    
    .card { padding: 1rem; }
    .card-title { font-size: 1.2rem; }
    .card-image { height: 150px; }
    
    .logo a { font-size: 1.8rem !important; }
    .logo::before, .logo::after { display: none !important; }
    
    .radio-logo { width: 100px; height: 100px; }
    .radio-title { font-size: 1.5rem; }
    .radio-btn { width: 45px; height: 45px; font-size: 1rem; }
    .radio-btn.play { width: 60px; height: 60px; font-size: 1.5rem; }
    
    .scroll-indicator, .index-scroll-indicator { display: none; }
    .section-padding { padding: 2rem 0.8rem; }
}

/* ===== MOBILE EXTRA PEQUENO (360px) ===== */
@media (max-width: 360px) {
    html { font-size: 12px; }
    .container { padding: 0 0.5rem; }
    h1, .index-hero-title { font-size: 1.8rem !important; }
    .index-hero-subtitle { font-size: 0.9rem !important; }
    .index-hero-logo { width: 70px !important; height: 70px !important; }
    .index-logo-ring { width: 70px !important; height: 70px !important; }
    .index-logo-ring-2 { width: 50px !important; height: 50px !important; }
    .card { padding: 0.8rem; }
    .index-hero-stats { padding: 0.8rem !important; }
    .nav-menu { width: 100% !important; padding-top: 80px; }
}

/* ===== LANDSCAPE ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .index-hero-section, .hero-section { min-height: 120vh; }
    .index-hero-content { padding: 1rem 2rem; }
    .index-hero-logo { width: 80px !important; height: 80px !important; margin-bottom: 1rem !important; }
    .index-hero-title { font-size: 2rem !important; margin-bottom: 1rem !important; }
    .index-hero-subtitle { font-size: 1rem !important; margin-bottom: 1.5rem !important; }
    .index-hero-buttons { margin-bottom: 2rem !important; }
    .index-hero-stats { flex-direction: row !important; gap: 1rem !important; }
    .index-stat-divider { width: 2px !important; height: 40px !important; }
}

/* ===== TELAS GRANDES (1400px+) ===== */
@media (min-width: 1400px) {
    .container { max-width: 1400px; }
    .index-hero-title { font-size: 5rem !important; }
    .index-hero-subtitle { font-size: 2rem !important; }
    .grid-4 { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ===== TOUCH DEVICES ===== */
@media (hover: none) and (pointer: coarse) {
    .btn, .index-btn { min-height: 44px; min-width: 44px; }
    .nav-menu a { min-height: 44px; padding: 1rem !important; }
    .index-btn:active, .btn:active { transform: scale(0.95); }
}

/* ===== PRINT ===== */
@media print {
    .navbar, .mobile-menu-toggle, .footer, .scroll-indicator, button, .btn { display: none !important; }
    body { background: white !important; color: black !important; }
    .container { max-width: 100%; padding: 0; }
}

/* ===== UTILITIES ===== */
.hide-mobile { display: block; }
.show-mobile { display: none; }
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
    .show-mobile { display: block !important; }
    .w-100-mobile { width: 100% !important; }
    .text-center-mobile { text-align: center !important; }
}