/* SISTEMA DE TRANSIÇÃO DE FUNDO SIMPLES */
:root {
    --azul-petroleo: #28666E;
    --preto: #212121;
    --verde-agua: #44BDAC;
    --bege: #DDE3E9;
    --branco: #FFFFFF;

    --transition-duration: 1.5s;
    --transition-delay: 0.2s;
}

/* Fundo principal com transição */
.main-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: background-color var(--transition-duration) ease var(--transition-delay);
}

/* Grid fixo (sempre visível) */
.grid-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(40, 102, 110, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(40, 102, 110, 0.15) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: -1;
    opacity: 1;
}

/* Cores iniciais */
.main-bg {
    background-color: var(--azul-petroleo);
}

/* EFEITO PARALLAX COM IMAGEM */
.hero-with-image {
    position: relative;
    overflow: hidden;
}

.parallax-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background-size: cover;
    background-position-x: left;
    background-position-y: top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: 1;
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (max-width: 768px) {
    .parallax-image {
    background-size: cover;
    background-position-x: 68%;
    background-position-y: top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    }
}
/* Garantir que o conteúdo fique acima */
.hero-content {
    z-index: 3;
}