@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Poppins:wght@300;400;600&display=swap');

:root {
    --primary: #d2691e; /* Chocolate */
    --accent: #ff80ab;  /* Rosa Sandy */
    --bg: #fffcf5;      /* Creme */
    --dark: #3e2723;
}

body { font-family: 'Poppins', sans-serif; background: var(--bg); margin: 0; scroll-behavior: smooth; }

header { 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 20px 5%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky; top: 0; z-index: 1000;
}

.logo { font-family: 'Dancing Script', cursive; font-size: 2.5rem; color: var(--dark); }
.logo span { color: var(--accent); }

nav a { text-decoration: none; color: var(--dark); margin: 0 15px; font-weight: 600; }

.cart-btn { background: var(--accent); color: #fff; padding: 10px 20px; border-radius: 30px; cursor: pointer; display: flex; gap: 10px; }

.hero { height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)), url('https://images.unsplash.com/photo-1548943487-a2e4e43b4853?auto=format&fit=crop&q=80&w=1000'); background-size: cover; }
.hero h1 { font-size: 3.5rem; color: var(--dark); }
.hero span { color: var(--primary); }

.grid-doces { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; padding: 50px 5%; }

.card-doce { background: #fff; padding: 25px; border-radius: 20px; border: 1px solid #eee; text-align: center; transition: 0.3s; position: relative; }
.card-doce:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.tag { position: absolute; top: 10px; right: 10px; background: var(--accent); color: #fff; padding: 5px 10px; border-radius: 10px; font-size: 0.7rem; }
.img-doce { font-size: 4rem; margin-bottom: 15px; }

button { background: var(--dark); color: #fff; border: none; padding: 12px 30px; border-radius: 30px; cursor: pointer; font-weight: 600; width: 100%; }
button:hover { background: var(--primary); }

.cart-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 2000; justify-content: center; align-items: center; }
.cart-content { background: #fff; padding: 30px; border-radius: 20px; width: 90%; max-width: 400px; }