:root {
    --cream: #FDF5C9; --mint: #B9E3D3; --orange: #E58F7B;
    --dark: #555; --white: #fff;
}

body { font-family: 'Nunito', sans-serif; color: var(--dark); margin: 0; }
header { padding: 20px 5%; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 5px #eee; sticky: top; background: white; }
nav ul { display: flex; list-style: none; gap: 20px; }
nav a { text-decoration: none; color: var(--dark); font-weight: bold; }

.hero { background: linear-gradient(180deg, var(--cream) 0%, #fff 100%); padding: 60px 20px; text-align: center; }
.hero h1 span { color: var(--orange); }

.section { padding: 50px 10%; text-align: center; }
.alt-bg { background-color: #fcfcfc; }

.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 30px; }
.card { padding: 30px; border-radius: 25px; border: 2px solid var(--cream); transition: 0.3s; background: white; }
.card.popular { border-color: var(--orange); transform: scale(1.05); }
.badge { background: var(--orange); color: white; padding: 5px 15px; border-radius: 20px; display: inline-block; margin-bottom: 10px; font-size: 0.8rem; }

.price { font-size: 1.8rem; font-weight: bold; color: var(--orange); }
.price span { font-size: 1rem; color: #999; }

.rules-list { text-align: left; max-width: 500px; margin: 0 auto; list-style: none; }
.rules-list li { padding: 10px; border-bottom: 1px solid #eee; }

.btn-wa { background: #25D366; color: white; padding: 12px 25px; border-radius: 50px; text-decoration: none; display: inline-block; margin-top: 15px; }