:root{
	--bg:#ffffff;
	--text:#111827;
	--muted:#6b7280;
	--primary:#2563eb;
	--radius:10px;
	--container:1100px;
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

*{box-sizing:border-box}

html,body{
    height:100%;
    margin:0 10px;
    color:var(--text);
    background:var(--bg);
}

.container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 1rem
}

.site-header{
    border-bottom:1px solid #000911;
    background:#fff;
    position:fixed;
    width: 96%;
    top:0;
    z-index:40
}

.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0.75rem 0
}

.logo{
    font-weight:700;
    color:var(--text);
    text-decoration:none;
    font-size:1.1rem
}

.logo .muted{
    font-weight:400;
    color:var(--muted);
    font-size:0.9rem
}

.nav ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    gap:1rem
}

.nav a{
    text-decoration:none;
    color:var(--text);
    padding:0.5rem
}

.nav-toggle{
    display:none;
    background:transparent;
    border:1px solid #e5e7eb;
    padding:0.35rem 0.6rem;
    border-radius:6px
}

.hero{
    padding:4rem 0;
    height: 70vh;
    display: flex;
    color: var(--text);
    align-items: center;
    justify-content: center;
}

.heroImage{
    height: 70vh;
    width: 30%;
    object-position: center;
    object-fit: contain;
}

.home{
    width: 100%;
    height: 100%;
}

.hero-inner{
    text-align:center;
    padding:2rem 0
}

.hero h1{
    font-size:2rem;
    margin:0 0 0.5rem
}

.lead{
    color:var(--muted);
    max-width:700px;
    margin:0.5rem auto 1rem
}

.hero-ctas{
    display:flex;
    gap:0.75rem;
    justify-content:center
}

.btn{
    display:inline-block;
    padding:0.6rem 1rem;
    border-radius:8px;
    background:transparent;
    border:1px solid #e5e7eb;
    color: var(--text);
    text-decoration:none
}

.btn-primary{
    background:var(--primary);
    color:#fff;
    border:0
}

.btn-sm{
    padding:0.4rem 0.7rem;
    font-size:0.9rem
}

.section{padding:2.25rem 0}

.cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1rem;
    margin-top:1rem
}

.card{
    background:#fff;
    border:1px solid #a6a7a7;
    box-shadow: 10px 10px 10px rgb(26, 25, 25);
    padding:1rem;
    border-radius:10px
}

.card-emoji{font-size:2rem}

.sweets{
    background:#fff9f7;
}

.img{
    width: 33%;
    height: 50vh;
}

.contact-form{
    display:grid;
    gap:0.5rem;
    border: 1px solid #a6a7a7;
    border-radius: 10px;
    padding: 2%;
    max-width:520px
}

.contact-form input,.contact-form textarea,.contact-form select{
    padding:0.6rem;
    border-radius:8px;
    border:1px solid #e6edf3;
    width: 80%
}

#form-status{
    margin-top:0.5rem;
    color:var(--muted)
}

.site-footer{
    border-top:1px solid #000a14;
    padding:1.25rem 0;
    margin-top:2rem
}

.footer-inner{
    display:flex;
    justify-content:space-between;
    gap:1rem;
    align-items:center
}

.muted{color:var(--muted)}

/* Responsividade */
@media (max-width:880px){
	.cards{grid-template-columns:1fr}

	.nav ul{
        flex-direction:column;
        background:#fff;
        position:absolute;right:1rem;
        top:64px;padding:0.75rem;
        border-radius:8px;box-shadow:0 8px 24px rgba(15,23,42,0.06);
        display:none
    }

	.nav[aria-hidden="false"] ul{display:flex}
	.nav-toggle{display:inline-block}
	.header-inner{gap:0.5rem}
	.hero h1{font-size:1.6rem}
	.footer-inner{
        flex-direction:column;
        align-items:flex-start
    }

    .img{
    width: 100%;
    height: 40vh;
    }

    select option{
    font-size: 10px;
    }

    .home{
        display: none;
    }

    .heroImage{
        display: none;
    }
}

@media (prefers-reduced-motion:reduce){
    *{
        animation-duration:0.01ms!important;
        transition-duration:0.01ms!important
    }
}

/* Small helper */
.visually-hidden{
    position:absolute!important;
    height:1px;
    width:1px;
    overflow:hidden;
    clip:rect(1px,1px,1px,1px)
}