@charset 'utf-8';

@font-face {
    font-family: 'Cera Pro';

    src: url('fonts/CeraPro-Regular.eot');
    src: url('fonts/CeraPro-Regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/CeraPro-Regular.woff2') format('woff2'),
         url('fonts/CeraPro-Regular.woff') format('woff'),
         url('fonts/CeraPro-Regular.ttf') format('truetype'),
         url('fonts/CeraPro-Regular.svg#CeraPro-Regular') format('svg');

    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';

    src: url('fonts/CeraPro-Bold.eot');
    src: url('fonts/CeraPro-Bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/CeraPro-Bold.woff2') format('woff2'),
         url('fonts/CeraPro-Bold.woff') format('woff'),
         url('fonts/CeraPro-Bold.ttf') format('truetype'),
         url('fonts/CeraPro-Bold.svg#CeraPro-Bold') format('svg');

    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Cera Pro';

    src: url('fonts/CeraPro-Black.eot');
    src: url('fonts/CeraPro-Black.eot?#iefix') format('embedded-opentype'),
         url('fonts/CeraPro-Black.woff2') format('woff2'),
         url('fonts/CeraPro-Black.woff') format('woff'),
         url('fonts/CeraPro-Black.ttf') format('truetype'),
         url('fonts/CeraPro-Black.svg#CeraPro-Black') format('svg');

    font-style: normal;
    font-weight: 900;
    font-display: swap;
}


/** reset **/

*,
*::after,
*::before {
    margin: 0;
    padding: 0;

    resize: none;
    outline: none;

    box-sizing: inherit;
}

html,
body {
    font-size: 10px;

    min-width: 100%;
    min-height: 100%;

    -webkit-font-smoothing: antialiased;
            font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    background: white;
    box-sizing: border-box;

    overflow-x: hidden;
}

a {
    text-decoration: none;
}

ol,
ul {
    list-style: none;
}

img,
svg,
figure {
    display: block;

    width: 100%;
    height: auto;
}

button {
    cursor: pointer;
}

button,
input,
select,
textarea {
    border: 0;
    border-radius: 0;

    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;

    background: transparent;
}

picture img {
    max-width: 100%;
    max-height: 100%;
}

@media (max-width: 1600px) {
    html,
    body {
        font-size: 8px;
    }
}


/** lenis **/

html.lenis {
    height: auto;
}

html.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

html.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

html.lenis.lenis-stopped {
    overflow: hidden;
}

html.lenis.lenis-scrolling iframe {
    pointer-events: none;
}


/** wcag **/

.for-display { speak: none }

.for-sreader {
    width: 0;
    height: 0;

    margin: 0 !important;
    padding: 0 !important;

    display: block;
    overflow: hidden;

    font-size: 14px;
    line-height: 16px;

    text-overflow: -100vw;
}


/** cover **/

.cover,
.contain {
    object-fit: cover;
    object-position: center;
}

.contain {
    object-fit: contain;
}

.cover.top-center,
.contain.top-center {
    object-position: top center;
}

.cover.left-center,
.contain.left-center {
    object-position: left center;
}

.cover.right-center,
.contain.right-center {
    object-position: right center;
}


/** flexbox **/

.flex { display: flex }
.flex.wrap { flex-wrap: wrap }
.flex.inline { display: inline-flex }
.flex.column { flex-direction: column }

.flex.al-end { align-items: flex-end }
.flex.al-start { align-items: flex-start }
.flex.al-center { align-items: center }

.flex.jf-end { justify-content: flex-end }
.flex.jf-start { justify-content: flex-start }
.flex.jf-center { justify-content: center }
.flex.jf-around { justify-content: space-around }
.flex.jf-between { justify-content: space-between }

.flex > * {
    flex-grow: 0;
    flex-shrink: 0;
}

.flex > .grow { flex-grow: 1 }
.flex > .shrink { flex-shrink: 1 }

:root {
    --wrapper: 1650px;
}

body {
    margin: 17.0rem 0 0;
}

.wrapper {
    width: 100%;
    margin: 0 auto;
    max-width: var(--wrapper);
}

.pattern,
.pattern-2 {
    background-image: url(images/pattern.jpg);
    background-size: cover;
    background-position: center;
}

.pattern-2 {
    background-image: url(images/pattern-2.jpg);
}

.text-1 {
    color: #233B49;

    font-size: 2.0rem;
    font-weight: 400;
    line-height: 3.0rem;
    font-family: 'Cera Pro';

    text-align: left;
}

.text-1 strong { font-weight: 600; }

.title-1,
.title-2,
.title-3 {
    font-size: 3.5rem;
    font-weight: 400;
    line-height: 4.0rem;
    font-family: 'Cera Pro';
    text-transform: uppercase;
}

.title-2 {
    font-size: 4.0rem;
    font-weight: 600;
}

.title-3 {
    font-size: 3.0rem;
    font-weight: 900;
}

.title-1 + .title-2 {
    margin-top: 5.4rem;
}

.title-2 + .title-1 {
    margin-left: 5.4rem;
}

.button {
    color: white;
    padding: 2.0rem 5.0rem;
    background: #233B49;

    font-size: 2.0rem;
    font-weight: 900;
    line-height: 4.0rem;
    font-family: 'Cera Pro';

    transition: 0.3s ease-out;

    text-transform: uppercase;
}

.button svg {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 0 0 2.0rem;
}

.button.cta {
    margin: 5.4rem 0 0;
    display: inline-flex;
}

.button.light {
    color: white;
    background: #A78870;
}


.lg-relative {
    position: relative;
}

.lg-note {
    color: white;
    z-index: 2;

    left: 0;
    bottom: 0;
    padding: 0 0 2rem 2rem;

    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.4rem;
    font-family: 'Cera Pro';
    text-transform: uppercase;

    position: absolute;
}

.lg-note.lg-top {
    top: 0;
    bottom: auto;
    padding-top: 2rem;
    padding-bottom: 0;
}

.lg-note.lg-right {
    left: auto;
    right: 0;
    padding-left: 0;
    padding-right: 2rem;
}


@media (any-hover: hover) {
    .button:hover {
        transform: scale(1.1);
    }
}


@media (max-width: 1800px) {
    :root {
        --wrapper: 1550px;
    }
}

@media (max-width: 1600px) {
    :root {
        --wrapper: 1350px;
    }
}

@media (max-width: 1400px) {
    :root {
        --wrapper: 1150px;
    }

    .text-1 {
        font-size: 1.8rem;
        line-height: 2.4rem;
    }

    .title-1,
    .title-2,
    .title-3 {
        font-size: 3.2rem;
        line-height: 3.6rem;
    }

    .title-2 {
        font-size: 3.6rem;
    }

    .title-3 {
        font-size: 2.7rem;
    }

    .button {
        font-size: 1.8rem;
        line-height: 3.6rem;
    }
}

@media (max-width: 1200px) {
    :root {
        --wrapper: calc(100% - 40px);
    }
}

@media (max-width: 1100px) {
    body {
        margin: 10.0rem 0 0;
    }

    .text-1 {
        font-size: 1.4rem;
        line-height: 2.0rem;
    }

    .title-1,
    .title-2,
    .title-3 {
        font-size: 2.6rem;
        line-height: 2.8rem;
    }

    .title-2 {
        font-size: 2.8rem;
    }

    .title-3 {
        font-size: 2.1rem;
    }

    .title-1 br,
    .title-2 br,
    .title-3 br {
        display: none;
    }

    .title-1 + .title-2 {
        margin-top: 0;
    }


    .button {
        padding: 1.8rem 3rem;
        font-size: 1.4rem;
        line-height: 2.8rem;
    }

    .button.cta {
        margin-top: 3.2rem;
    }

    .lg-note {
        font-size: 1.2rem;
        padding: 0 0 1rem 1rem;
    }

    .lg-note.lg-top {
        padding-top: 1rem;
        padding-bottom: 0;
    }

    .lg-note.lg-right {
        padding-left: 0;
        padding-right: 1rem;
    }
}


/** header & footer **/

.site-header {
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;

    position: fixed;
    overflow: visible;

    background: white;
}

.site-header,
.site-header .wrapper {
    height: 17.0rem;
    transition: height 0.3s ease-out,
                box-shadow 0.3s ease-out;
}

.site-header h1 {
    top: 3.5rem;
    width: 37.8rem;
    height: 24.1rem;
    position: relative;
    background: #233B49;

    transition: top 0.3s ease-out,
                width 0.3s ease-out,
                height 0.3s ease-out;
}

.site-header h1 svg {
    width: 23.4rem;
    height: auto;
    transition: width 0.3s ease-out;
}

.site-header nav a {
    color: #233B49;

    display: block;
    margin: 0rem 1.6rem;
    padding: 1.0rem 2.5rem;

    font-size: 1.5rem;
    font-weight: 400;
    line-height: 90%;
    font-family: 'Cera Pro';

    text-align: center;
    text-transform: uppercase;
}

.site-header nav a.button {
    color: white;
    padding: 2.0rem 5.0rem;
}


.scrolled .site-header,
.scrolled .site-header .wrapper {
    height: 8rem;
}

.scrolled .site-header {
    box-shadow: 0 0.4rem 0.4rem rgba(0,0,0, 0.1);
}

.scrolled .site-header h1 {
    top: 0rem;
    width: 20rem;
    height: 8rem;
}

.scrolled .site-header h1 svg {
    width: 10.0rem;
}


@media (any-hover: hover) {
    .site-header nav a {
        transition: color 0.3s ease-out,
                    transform 0.3s ease-out,
                    background 0.3s ease-out;
    }

    .site-header nav a:hover {
        color: white;
        font-weight: 900;
        background-color: #233B49;
    }
}

@media (max-width: 1400px) {
    .site-header nav {
        top: 100%;
        right: 0;
        width: 32rem;
        height: 100vh;
        padding: 8rem 0 0;
        position: absolute;
        transform: translateX(100%);
        flex-direction: column;
        background-color: white;
        pointer-events: none;
        transition: 0.3s ease-out;
    }

    .site-header nav a {
        width: 100%;
        margin: 0;
        padding: 2rem 0;
        font-size: 2.0rem;
    }

    .site-header nav a.button {
        width: calc(100% - 30px);
        margin: 0 15px;
    }

    .site-header nav:after {
        top: 0;
        right: 100%;
        width: 100vw;
        bottom: 0;
        opacity: 0;

        content: '';
        display: block;
        position: absolute;

        transition: 0.3s ease-out;
        background: rgba(0,0,0, 0.2);
    }

    .site-header .menu-toggle {
        width: 6.0rem;
        cursor: pointer;
    }

    .site-header .menu-toggle div {
        width: 100%;
        height: 0.6rem;
        margin: 0.4rem 0;
        background: #233B49;
        transition: 0.3s ease-out;
    }

    .menu-visible .site-header nav {
        transform: translateX(0%);
        box-shadow: -0.4rem 0 0.4rem rgba(0,0,0, 0.1);
        pointer-events: auto;
    }

    .menu-visible .site-header nav:after {
        opacity: 1;
    }

    .menu-visible .site-header .menu-toggle div:nth-child(1) {
        transform: translateY(1.0rem) rotate(-45deg);
    }
    .menu-visible .site-header .menu-toggle div:nth-child(2) {
        opacity: 0;
    }
    .menu-visible .site-header .menu-toggle div:nth-child(3) {
        transform: translateY(-1.0rem) rotate(45deg);
    }
}

@media (max-width: 1100px) {
    .site-header,
    .site-header .wrapper {
        height: 10.0rem;
    }

    .site-header h1 {
        width: 24rem;
        height: 15.3rem;
        z-index: 2;
    }

    .site-header h1 svg {
        width: 14.8rem;
    }

    .site-header nav a.button {
        padding: 1.8rem 3rem;
    }
}


/** animate **/

[animate="opacity"],
[animate="from-left"],
[animate="from-right"],
[animate="from-bottom"] {
    transition: opacity 0.6s ease-out,
                transform 0.6s ease-out;
}

[animate="opacity"]:not(.visible) {
    opacity: 0 !important;
}
[animate="from-left"]:not(.visible) {
    transform: translateX(-20%) !important;
    opacity: 0 !important;
}
[animate="from-right"]:not(.visible) {
    transform: translateX(20%) !important;
    opacity: 0 !important;
}
[animate="from-bottom"]:not(.visible) {
    transform: translateY(20%) !important;
    opacity: 0 !important;
}


[animate="width-to"],
[animate="width-from"] {
    transition: width 0.6s ease-out;
}

[animate="width-to"]:not(.visible) {
    width: 0vw !important;
}
[animate="width-from"]:not(.visible) {
    width: 100vw !important;
}


[animate="width-from-left-40"],
[animate="width-from-left-50"],
[animate="width-from-right-50"] {
    transition: left 0.6s ease-out,
                width 0.6s ease-out,
                transform 0.6s ease-out;
}

[animate="width-from-left-40"]:not(.visible) {
    transform: translateX(-50%) !important;
    width: 100vw !important;
    left: -25% !important;
}

[animate="width-from-left-50"]:not(.visible) {
    transform: translateX(-50%) !important;
    width: 100vw !important;
}

[animate="width-from-right-50"]:not(.visible) {
    width: 100vw !important;
}


[animate-delay="0.1"].visible { transition-delay: 0.1s }
[animate-delay="0.2"].visible { transition-delay: 0.2s }
[animate-delay="0.3"].visible { transition-delay: 0.3s }
[animate-delay="0.4"].visible { transition-delay: 0.4s }
[animate-delay="0.5"].visible { transition-delay: 0.5s }
[animate-delay="0.6"].visible { transition-delay: 0.6s }
[animate-delay="0.7"].visible { transition-delay: 0.7s }
[animate-delay="0.8"].visible { transition-delay: 0.8s }
[animate-delay="0.9"].visible { transition-delay: 0.9s }
[animate-delay="1.0"].visible { transition-delay: 1.0s }
[animate-delay="1.1"].visible { transition-delay: 1.1s }

@media (max-width: 1100px) {
    [animate="width-from-left-40"]:not(.visible) {
        left: 0 !important;
        width: 0 !important;
        transform: none !important;
    }

    [animate="width-from-right-50"]:not(.visible),
    [animate="width-from-left-50"]:not(.visible) {
        left: 0 !important;
        width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        transform: none !important;
    }
}


/** o-empreendimento **/

#o-empreendimento .left {
    width: 33.3333%;
    position: relative;
}

#o-empreendimento .left .text {
    color: white;

    height: 60%;
    padding: 7.4rem 0 0 6.6rem;
    position: relative;

    text-transform: uppercase;
}

#o-empreendimento .left .text:after {
    top: 0%;
    right: calc(100% - 1px);
    width: calc(50vw + 1px);
    bottom: 0%;

    content: '';
    display: block;
    position: absolute;
}

#o-empreendimento .left .text,
#o-empreendimento .left .text:after {
    background: #A78870;
}

#o-empreendimento .left .cover {
    top: 60%;
    right: 0%;
    height: 40%;
    width: calc(100% + (100vw - var(--wrapper))/2);
    position: absolute;
}

#o-empreendimento .right {
    width: 66.6666%;
}

#o-empreendimento .right img,
#o-empreendimento .right video {
    height: 40vw;/*calc(100vh - 17.0rem - 13.0rem);*/
}

#o-empreendimento .right img:last-child,
#o-empreendimento .right video:last-child {
    width: calc(20% + (100vw - var(--wrapper))/2);
}

#o-empreendimento .right img:first-child,
#o-empreendimento .right video:first-child {
    width: 80%;
}

#o-empreendimento .right .text {
    color: white;
    width: 100%;
    height: 13.0rem;
    position: relative;
}

#o-empreendimento .right .text:after {
    top: 0%;
    left: calc(100% - 1px);
    width: calc((100vw - var(--wrapper))/2 + 1px);
    height: 100%;

    content: '';
    display: block;
    position: absolute;
}

#o-empreendimento .right .text,
#o-empreendimento .right .text:after {
    background: #233B49;
}

#o-empreendimento .right .text span {
    margin: 0 5.0rem;
}


@media (max-width: 1100px) {
    #o-empreendimento .left,
    #o-empreendimento .right {
        width: 100%;
    }

    #o-empreendimento .left .text {
        height: auto;
        padding: 10rem 0 10rem;
        justify-content: center;
    }

    #o-empreendimento .left .text > div {
        flex-grow: 0;
    }

    #o-empreendimento .left .cover,
    #o-empreendimento .right img:last-child,
    #o-empreendimento .right video:last-child {
        display: none;
    }

    #o-empreendimento .right img:first-child,
    #o-empreendimento .right video:first-child {
        width: 100%;
        height: 80vw;
    }

    #o-empreendimento .right img,
    #o-empreendimento .right video {
        min-height: 28rem;
    }

    #o-empreendimento .right .text {
        height: auto;
        padding: 4rem 0;
        flex-direction: column;
    }

    #o-empreendimento .right .text span {
        width: 100%;
        margin: 1rem 0;
        text-align: center;
    }

    #o-empreendimento .wrapper {
        flex-wrap: wrap;
        max-width: 100%;
    }
}