/* Variáveis e Reset */
:root { --bg: #0a0a0a; --card: #141414; --text: #f0f0f0; --accent: #fff; --gold: #ffbc00; }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body { background-color: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; }

/* Header */
header { display: flex; justify-content: space-between; align-items: center; padding: 15px 5%; background: rgba(10,10,10,0.95); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid #222; backdrop-filter: blur(10px); }
.logo { font-weight: 800; font-size: 1.2rem; letter-spacing: 1px; color: var(--accent); }
nav a { color: #aaa; text-decoration: none; margin-left: 20px; font-size: 0.95rem; transition: 0.3s; }
nav a:hover { color: #fff; }
.cta-btn { border: 1px solid #fff; padding: 8px 16px; border-radius: 4px; color: #fff; }

/* Hero */
.hero { min-height: 80vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, #1a1a1a 0%, #000000 100%); text-align: center; padding: 0 20px; }
.hero h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); margin-bottom: 15px; line-height: 1.1; }
.hero p { color: #ccc; margin-bottom: 30px; font-size: 1.1rem; }
.btn { padding: 12px 30px; background: #fff; color: #000; text-decoration: none; font-weight: bold; text-transform: uppercase; border-radius: 4px; transition: 0.3s; }
.btn:hover { background: #ccc; }

/* Portfolio */
.portfolio { padding: 80px 5%; }
.portfolio h2, .shop-section h2 { text-align: center; margin-bottom: 40px; font-size: 2rem; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }

.video-card { cursor: pointer; background: var(--card); border-radius: 8px; overflow: hidden; transition: transform 0.3s; }
.video-card:hover { transform: translateY(-5px); }
.thumbnail { position: relative; width: 100%; aspect-ratio: 16/9; background: #222; }
.thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.4); opacity: 0; transition: 0.3s; }
.thumbnail:hover .overlay { opacity: 1; }
.overlay i { font-size: 3rem; color: #fff; }
.info { padding: 15px; }
.info h3 { font-size: 1.1rem; color: #fff; margin-bottom: 5px; }
.info p { color: #888; font-size: 0.9rem; }

/* --- ESTILO DA LOJA (NOVO) --- */
.shop-section { padding: 80px 5%; background-color: #0e0e0e; text-align: center; border-top: 1px solid #1a1a1a; }
.shop-subtitle { color: #888; margin-bottom: 40px; margin-top: -30px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }

.product-card { background: #161616; border: 1px solid #222; border-radius: 12px; overflow: hidden; transition: transform 0.3s; text-align: left; display: flex; flex-direction: column; }
.product-card:hover { transform: translateY(-5px); border-color: #444; }
.product-thumb { position: relative; height: 200px; overflow: hidden; }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
.product-card:hover .product-thumb img { transform: scale(1.05); }
.tag { position: absolute; top: 10px; right: 10px; background: var(--gold); color: #000; font-size: 0.75rem; font-weight: bold; padding: 4px 10px; border-radius: 4px; text-transform: uppercase; }

.product-info { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
.product-info h3 { font-size: 1.2rem; margin-bottom: 10px; color: #fff; }
.product-info p { color: #aaa; font-size: 0.9rem; margin-bottom: 20px; }

.price-row { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.price { font-size: 1.3rem; font-weight: bold; color: #fff; }
.buy-btn { background: #fff; color: #000; padding: 8px 20px; border-radius: 6px; text-decoration: none; font-weight: bold; font-size: 0.9rem; transition: 0.2s; }
.buy-btn:hover { background: #ccc; }

/* Sobre & Footer */
.about { padding: 80px 5%; text-align: center; background: #0f0f0f; }
.about p { max-width: 700px; margin: 0 auto; color: #ccc; }
footer { padding: 60px 5%; text-align: center; border-top: 1px solid #222; }
.social-links { margin: 25px 0; }
.social-links a { color: #fff; margin: 0 12px; font-size: 1.5rem; transition: 0.2s; display: inline-block; }
.social-links a:hover { transform: scale(1.1); color: var(--gold); }
.copyright { color: #444; font-size: 0.8rem; }

/* Modal */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); align-items: center; justify-content: center; }
.modal-content { position: relative; width: 90%; max-width: 900px; }
.video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; background: #000; }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.close { position: absolute; top: -40px; right: 0; background: none; border: none; color: #fff; font-size: 40px; cursor: pointer; }

/* Mobile */
@media (max-width: 600px) {
    nav a { display: none; }
    nav a.cta-btn { display: block; margin: 0; }
    .hero h1 { font-size: 2.2rem; }
}