:root { --primary: #004793; --secondary: #0db7ff; --dark: #111; --light: #f9f9f9; }
        body { font-family: Arial, Helvetica, sans-serif; line-height: 1.6; color: #333; margin: 0; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
        header { padding: 20px 0; border-bottom: 2px solid #eee; }
        .flex { display: flex; align-items: center; justify-content: space-between; }
        .navbar ul { list-style: none; padding: 0; display: flex; gap: 20px; }
        .navbar a { text-decoration: none; color: var(--primary); font-weight: bold; }
        .banner-home { width: 100%; height: 400px; background: #ddd; display: flex; align-items: center; justify-content: center; overflow: hidden; }
        .banner-home img { width: 100%; height: 100%; object-fit: cover; }
        .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; padding: 40px 0; }
        .thumbnail img { width: 100%; height: auto; border-radius: 8px; transition: transform 0.3s; }
        .thumbnail img:hover { transform: scale(1.02); }
        .footer { background: #eee; padding: 40px 0; text-align: center; }
        .fallback-banner { background: linear-gradient(45deg, var(--primary), var(--secondary)); color: white; display: flex; align-items: center; justify-content: center; height: 300px; font-size: 2rem; }
        @media (max-width: 768px) { .navbar { display: none; } }