html {
    scroll-behavior: smooth;
}

/* Container base */
.hero {
    position: relative;
    width: 100%;
    height: var(--hero-h-desktop);
    background: var(--hero-bg) center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

    /* Escurecedor opcional */
    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,.45); /* força do “darken” */
        mix-blend-mode: multiply; /* mantém cores vivas */
        pointer-events: none;
    }

/* Conteúdo */
.hero-content {
    position: relative; /* ficar acima do overlay */
    color: #fff;
    padding: 0 16px;
}

    .hero-content h1 {
        font-family: "Playfair Display", serif; /* opcional */
        font-weight: 700;
        font-size: clamp(2rem, 4vw + 1rem, 3.8rem);
        line-height: 1.1;
        margin: 0 0 24px;
    }

/* Botão */
.btn-cta {
    display: inline-block;
    background: var(--cta-bg);
    color: #fff;
    padding: 14px 32px;
    border-radius: 40px;
    font-size: 1.15rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .25s;
}

    .btn-cta:hover {
        background: var(--cta-bg-hover);
    }

@media (max-width: 1300px) {
    .hero {
        background: var(--hero-bg-tablet) center / cover no-repeat;
    }
}


/* -------- Mobile ajustes -------- */
@media (max-width: 768px) {
    .hero {
        height: var(--hero-h-mobile);
        background-attachment: scroll;
        background: var(--hero-bg-mobile) center / cover no-repeat;
    }

    .hero-content h1 {
        font-size: clamp(1.8rem, 6vw + .5rem, 2.6rem);
    }

    .btn-cta {
        font-size: 1rem;
        padding: 12px 26px;
    }

}