:root {
    color-scheme: dark;
    --gold: #c89d59;
    --gold-light: #edc582;
    --black: #090909
}

* {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--black)
}

body {
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    -webkit-font-smoothing: antialiased
}

.hero {
    position: relative;
    min-height: 100svh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(ellipse at 50% 70%, #25170f 0%, #090909 72%)
}

.photo {
    position: absolute;
    inset: -4% -4% auto;
    height: 90%;
    z-index: -3;
    background: url('assets/executivos-v3.webp') center 24%/cover no-repeat;
    transform: scale(1.05);
    animation: floatPhoto 20s ease-in-out infinite alternate;
    will-change: transform
}

.photo-shade {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(180deg, rgba(5, 5, 5, .22) 0%, rgba(5, 5, 5, .38) 25%, rgba(6, 5, 5, .77) 50%, #100c0b 81%, #090909 100%), linear-gradient(90deg, rgba(0, 0, 0, .22), transparent 32%, transparent 68%, rgba(0, 0, 0, .22))
}

.ambient {
    position: absolute;
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
    filter: blur(65px);
    opacity: .1
}

.ambient-one {
    width: 30vw;
    height: 30vw;
    top: 5%;
    left: -12%;
    background: #db8b38;
    animation: ambientDrift 15s ease-in-out infinite alternate
}

.ambient-two {
    width: 24vw;
    height: 24vw;
    right: -8%;
    bottom: 8%;
    background: #b67a39;
    animation: ambientDrift 18s ease-in-out infinite alternate-reverse
}

.content {
    width: min(100%, 1200px);
    padding: clamp(24px, 4vw, 56px) 24px 115px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    animation: enter 1.4s ease-out both
}

.brand {
    display: block;
    width: clamp(270px, 36vw, 450px);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 3px 18px rgba(0, 0, 0, .35));
    margin: -90px auto -112px;
    user-select: none
}

.announcement {
    text-align: center;
    margin-top: clamp(32px, 5vh, 70px);
    width: 100%
}

.eyebrow {
    margin: 0 0 12px;
    font-size: clamp(15px, 2.1vw, 27px);
    letter-spacing: clamp(.3em, 1.3vw, .65em);
    font-weight: 300;
    padding-left: .5em;
    color: #f2eee9
}

h1 {
    font-family: 'Montserrat', serif;
    font-weight: 400;
    font-size: clamp(16px, 4.6vw, 48px);
    line-height: 1.13;
    letter-spacing: .015em;
    margin: 0;
    color: var(--gold-light);
    text-shadow: 0 2px 24px rgba(0, 0, 0, .55)
}

h1 span {
    white-space: nowrap
}

.light-track {
    position: relative;
    width: min(450px, 58vw);
    height: 1px;
    margin: clamp(32px, 5vh, 55px) auto 0;
    background: linear-gradient(90deg, transparent, #a97b42 15%, #d8ac69 50%, #a97b42 85%, transparent)
}

.light-track::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 28%;
    height: 3px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, #f0c780 0%, rgba(218, 161, 76, .55) 35%, transparent 75%);
    filter: blur(2px);
    opacity: .32;
    box-shadow: 0 0 12px 3px rgba(207, 148, 62, .12);
    animation: pulse 6s ease-in-out infinite
}

.light-sweep {
    display: none
}

.waves {
    position: absolute;
    z-index: 1;
    bottom: -2px;
    left: -3%;
    width: 106%;
    height: clamp(110px, 19vw, 220px);
    background: url('assets/ondas.webp') center bottom/100% 100% no-repeat;
    opacity: .8;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, transparent, black 38%)
}

@keyframes floatPhoto {
    0% {
        transform: scale(1.05) translate3d(-.5%, 0, 0)
    }

    50% {
        transform: scale(1.09) translate3d(.4%, -.7%, 0)
    }

    100% {
        transform: scale(1.06) translate3d(.6%, .6%, 0)
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: .22;
        filter: blur(3px);
        transform: translate(-50%, -50%) scaleX(.78)
    }

    50% {
        opacity: .7;
        filter: blur(1.6px);
        transform: translate(-50%, -50%) scaleX(1.12)
    }
}

@keyframes ambientDrift {
    to {
        transform: translate(35px, -25px)
    }
}

@keyframes enter {
    from {
        opacity: 0;
        transform: translateY(16px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media(max-width:700px) {
    .hero {
        min-height: 100svh
    }

    .photo {
        inset: 0 0 auto;
        height: 75svh;
        background-image: url('assets/executivos-v3.webp');
        background-size: 100% auto;
        background-position: center top;
        animation-duration: 25s
    }

    .photo-shade {
        background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .3) 26%, rgba(0, 0, 0, .82) 58%, #0b0908 89%)
    }

    .content {
        padding: 45px 18px 100px;
        justify-content: flex-end;
        min-height: 100svh
    }

    .brand {
        width: clamp(260px, 77vw, 365px);
        margin: -70px auto -85px
    }

    .announcement {
        margin-top: 25px
    }

    .eyebrow {
        font-size: 16px;
        letter-spacing: .45em
    }

    h1 {
        font-size: clamp(28px, 7.3vw, 46px);
        line-height: 1.22
    }

    h1 span {
        white-space: normal
    }

    .light-track {
        width: 65vw;
        margin-top: 32px
    }

    .waves {
        height: 115px;
        width: 150%;
        left: -25%;
        background-size: cover
    }
}

@media(max-width:390px) {
    .brand {
        width: 280px
    }

    .content {
        padding-bottom: 100px
    }

    .announcement {
        margin-top: 12px
    }
}

@media(max-height:620px) and (min-width:701px) {
    .content {
        padding-top: 10px;
        padding-bottom: 65px
    }

    .brand {
        width: 300px;
        margin: -70px auto -80px
    }

    .announcement {
        margin-top: 12px
    }

    .waves {
        height: 110px
    }
}

@media(prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important
    }

    .photo {
        transform: scale(1.05)
    }

    .light-track::after {
        opacity: .3
    }
}

/* V3: fotografia sem monograma incorporado e enquadramento mobile preservando os dois rostos */
@media (max-width:700px) {
    .photo {
        inset: 0 0 auto;
        height: 66svh;
        background-size: 100% auto;
        background-repeat: no-repeat;
        transform-origin: 50% 12%;
        animation: floatPhotoMobile 22s ease-in-out infinite alternate
    }

    .photo-shade {
        background: linear-gradient(180deg, rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, .19) 18%, rgba(0, 0, 0, .30) 37%, rgba(0, 0, 0, .88) 64%, #090909 90%)
    }

    .content {
        justify-content: space-between;
        padding: clamp(18px, 4svh, 35px) 18px clamp(118px, 15svh, 155px);
        min-height: 100svh
    }

    .brand {
        width: clamp(220px, 67vw, 320px);
        margin: -65px auto -80px
    }

    .announcement {
        margin: 0 auto
    }

    .eyebrow {
        margin-bottom: 13px
    }

    h1 {
        font-size: clamp(29px, 7.1vw, 44px)
    }

    .waves {
        height: 105px;
        opacity: .65
    }
}

@keyframes floatPhotoMobile {
    from {
        transform: scale(1.005) translate3d(0, 0, 0)
    }

    to {
        transform: scale(1.035) translate3d(0, -.5%, 0)
    }
}

@media(max-width:390px) {
    .brand {
        width: 245px
    }

    .content {
        padding-bottom: 115px
    }
}

@media(prefers-reduced-motion:reduce) {
    .photo {
        animation: none
    }
}

/* V4 — composição mobile centralizada, sem alterar desktop */
@media (max-width:700px) {
    .hero {
        min-height: 100svh;
        min-height: 100dvh;
        display: grid;
        place-items: center;
        background: #090909
    }

    .photo {
        inset: 0;
        height: 100%;
        background-image: url('assets/executivos-v3.webp');
        background-size: 100% auto;
        background-position: center 10%;
        background-repeat: no-repeat;
        transform-origin: center top;
        animation: floatPhotoMobileV4 22s ease-in-out infinite alternate
    }

    .photo-shade {
        background: linear-gradient(180deg, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, .42) 24%, rgba(0, 0, 0, .75) 46%, rgba(0, 0, 0, .86) 73%, #090909 100%)
    }

    .content {
        min-height: 100svh;
        min-height: 100dvh;
        width: 100%;
        padding: 60px 18px 95px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: clamp(4px, 1.5vh, 14px)
    }

    .brand {
        width: clamp(240px, 70vw, 330px);
        max-width: 100%;
        margin: -65px auto -65px;
        flex-shrink: 0
    }

    .announcement {
        margin: 0 auto;
        width: 100%;
        max-width: 570px
    }

    .eyebrow {
        font-size: clamp(13px, 3.5vw, 17px);
        margin: 0 0 13px;
        letter-spacing: .4em
    }

    h1 {
        font-size: clamp(29px, 7.4vw, 46px);
        line-height: 1.18
    }

    .light-track {
        width: min(70vw, 380px);
        margin-top: 30px
    }

    .waves {
        height: clamp(75px, 13vh, 120px);
        opacity: .68
    }
}

@keyframes floatPhotoMobileV4 {
    from {
        transform: scale(1) translate3d(0, 0, 0)
    }

    to {
        transform: scale(1.025) translate3d(0, -.3%, 0)
    }
}

@media(max-width:390px) {
    .brand {
        width: clamp(230px, 68vw, 270px)
    }

    .content {
        padding-bottom: 80px
    }

    h1 {
        font-size: clamp(28px, 7.4vw, 36px)
    }
}

@media(max-height:650px) and (max-width:700px) {
    .content {
        padding-top: 12px;
        padding-bottom: 55px
    }

    .brand {
        width: 220px;
        margin: -58px auto -65px
    }

    .light-track {
        margin-top: 18px
    }

    .waves {
        height: 65px
    }
}

@media(prefers-reduced-motion:reduce) {
    .photo {
        animation: none
    }
}

/* V5 — mobile: fotografia vertical de corpo inteiro, preenchimento integral e conteúdo centralizado. */
@media(max-width:700px) {
    .hero {
        min-height: 100svh;
        min-height: 100dvh;
        background: #0a0807
    }

    .photo {
        inset: -3% -3%;
        width: 106%;
        height: 106%;
        background-image: url('assets/executivos.webp');
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        transform-origin: center;
        animation: floatPhotoMobileV5 22s ease-in-out infinite alternate
    }

    .photo-shade {
        background: linear-gradient(180deg, rgba(0, 0, 0, .16) 0%, rgba(0, 0, 0, .22) 23%, rgba(0, 0, 0, .63) 45%, rgba(0, 0, 0, .74) 68%, rgba(0, 0, 0, .44) 100%), radial-gradient(ellipse at center, rgba(0, 0, 0, .48), transparent 75%)
    }

    .content {
        min-height: 100svh;
        min-height: 100dvh;
        padding: 28px 18px 75px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0;
        transform: translateY(-1vh)
    }

    .brand {
        width: clamp(250px, 72vw, 350px);
        margin: -67px auto -65px
    }

    .announcement {
        margin: 10px auto 0
    }

    .eyebrow {
        font-size: clamp(14px, 3.5vw, 17px);
        letter-spacing: .42em;
        margin-bottom: 12px
    }

    h1 {
        font-size: clamp(30px, 7.4vw, 47px);
        line-height: 1.16
    }

    .light-track {
        margin-top: 27px
    }

    .waves {
        height: clamp(65px, 11vh, 105px);
        opacity: .48
    }
}

@keyframes floatPhotoMobileV5 {
    from {
        transform: scale(1.015) translate3d(0, 0, 0)
    }

    to {
        transform: scale(1.045) translate3d(0, -.35%, 0)
    }
}

@media(max-width:390px) {
    .brand {
        width: clamp(235px, 68vw, 285px)
    }

    .content {
        padding-bottom: 60px
    }

    h1 {
        font-size: clamp(28px, 7.1vw, 35px)
    }
}

@media(max-height:650px) and (max-width:700px) {
    .content {
        padding: 10px 14px 45px
    }

    .brand {
        width: 215px;
        margin: -55px auto -58px
    }

    .light-track {
        margin-top: 18px
    }
}

@media(prefers-reduced-motion:reduce) {
    .photo {
        animation: none
    }
}