:root {
    --bg: #0f0f0f;
    --card: #1a1a1a;
    --text: #ffffff;
    --accent: #ffb300;
    --whatsapp: #25d366;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding-bottom: 50px;
}

/* Header Responsivo */
.navbar {
    position: sticky; top: 0; z-index: 1000;
    background: rgba(15, 15, 15, 0.9);
    backdrop-filter: blur(12px);
    padding: 1rem;
    display: flex; flex-direction: column; align-items: center;
    border-bottom: 1px solid #333;
}

.logo { font-size: 1.8rem; font-weight: bold; margin-bottom: 10px; }
.logo span { color: var(--accent); }

#busca {
    width: 90%; max-width: 500px;
    padding: 12px 20px; border-radius: 25px;
    border: 1px solid #444; background: #222; color: white;
}

/* Grid Adaptável (UX) */
.grid {
    display: grid;
    padding: 20px;
    gap: 20px;
    /* Mobile: 1 coluna | Tablet: 2 colunas | Desktop: 3 ou 4 */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.card {
    background: var(--card);
    border-radius: 15px;
    overflow: hidden;
    transition: 0.3s;
    border: 1px solid #2a2a2a;
}

/* Efeito Hover na Imagem (Frente e Verso) */
.img-box {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
}

.img-box img {
    position: absolute; width: 100%; height: 100%;
    object-fit: cover; transition: opacity 0.4s ease;
}

.foto-verso { opacity: 0; }

/* No desktop, troca ao passar o mouse. No mobile, o toque ativa brevemente. */
.card:hover .foto-verso { opacity: 1; }
.card:hover .foto-frente { opacity: 0; }

.info { padding: 20px; }
.info h3 { margin: 0; font-size: 1.2rem; }
.info p { color: #888; font-size: 0.9rem; margin: 5px 0; }

.preco {
    font-size: 1.5rem; color: var(--accent);
    font-weight: bold; display: block; margin: 15px 0;
}

.btn-whats {
    display: block; background: var(--whatsapp);
    color: #000; text-align: center; padding: 12px;
    border-radius: 8px; text-decoration: none; font-weight: bold;
}

/* Ajustes Desktop */
@media (min-width: 768px) {
    .navbar { flex-direction: row; justify-content: space-between; padding: 1rem 5%; }
    .logo { margin-bottom: 0; }
    #busca { width: 300px; }
}