@font-face {
    font-family: "KMR";
    src: url("/assets/fonts/KMR-Waldenburg-Fein.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "KMR";
    src: url("/assets/fonts/KMR-Waldenburg-Mager.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "KMR";
    src: url("/assets/fonts/KMR-Waldenburg-Buch.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "KMR";
    src: url("/assets/fonts/KMR-Waldenburg-Normal.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: "KMR";
    src: url("/assets/fonts/KMR-Waldenburg-Schwer.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/*** UNIVERSAL VARIABLES ***/

:root {
    /* MEASUREMENT UNITS */
    --0un: 8px;
    --1un: 15px;
    --2un: 30px;
    --3un: 60px;

    /* COLOR PALETTE */
    --beige: rgb(188, 175, 166);
    --offwhite: #F2EEDF;
    --truewhite: rgb(248, 247, 243);
    --white: #FFF;
    --grey: #AAA;
    --offblack: #626162;
    --offblack45: rgba(98, 97, 98, .45);
    --black: #000;

    /* TYPOGRAPHY */
    --universalfontsize: .8vw;
    --universalfontsize: 11px;
    --fontsizes: 1rem;
    --fontsizem: 1.5rem;
    --fontsizel: 1.9rem;
    --fontsizexl: 3rem;
    --lineheightuniversal: 135%;
    --lineheightdisplay: 105%;

    --uniopacityhidden: .5;

    /* GRID */
    --gutter: var(--1un);
    --columntotal: 16;
    --templatecolumns: repeat(var(--columntotal), 1fr);
    --singlecolumn: calc(((100vw - var(--1un) * 2) - (var(--gutter) * (var(--columntotal) - 1))) / var(--columntotal));

}


/*** UNIVERSAL RULES ***/
html {
    font-family: 'KMR', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: var(--universalfontsize);
    font-weight: 400;
    color: var(--offblack);
}

html * {
    line-height: var(--lineheightuniversal);
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
}

* {
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    scrollbar-width: none;
    /* Firefox, Safari 18.2+, Chromium 121+ */
}

*::-webkit-scrollbar {
    display: none;
    /* Older Safari and Chromium */
}

body {
    --bgcolor: var(--truewhite);
    width: 100%;
    overflow-x: hidden;
    background-color: var(--bgcolor);
    transition: background-color .75s ease;
}

*::selection {
    background-color: white;
    color: var(--offblack);
}


/*** TYPOGRAPHY SETTINGS ***/
a:hover {
    cursor: pointer;
    opacity: 1 !important;
}

a:link, a:visited {
    text-decoration: none;
    color: inherit;
}

figure figcaption {
    margin-top: var(--0un);
}

h1 {
    font-size: var(--fontsizexl);
    font-weight: 100;
    text-transform: uppercase;
    -webkit-font-smoothing: initial;
    line-height: var(--lineheightdisplay);
}

h2, h3, strong {
    font-weight: 700;
    /*    font-size: 1.1rem; */
}

h2 b {
    font-weight: initial;
    opacity: var(--uniopacityhidden);
}

sup {
    vertical-align: super;
    font-size: .7rem;
}

/*
p, figcaption {
    line-height: 120%;
}
    */


/*** NAV ***/
.header_nav {
    position: sticky;
    top: 0;
    width: 100vw;
    padding: var(--1un);
    padding-bottom: 0;
    box-sizing: border-box;
    z-index: 10;
}

nav.header_nav::before {
    width: 100%;
    height: calc(100% + var(--1un));
    content: '';
    display: block;
    background-color: var(--bgcolor);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    pointer-events: none;
    transition: background-color .75s ease;
}

body:has(.nav_options) nav.header_nav::before {
    height: calc(100% + var(--1un) + 1.25rem);
}

.header_nav ul {
    width: 100%;
    display: grid;
    grid-template-columns: var(--templatecolumns);
    gap: var(--gutter);
}

.header_nav ul li {
    grid-column: span 5;
    font-weight: 700;
}

.header_nav ul li.active a {
    pointer-events: none;
}



.logo_bar {
    width: 100%;
    height: auto;
}

.logo_bar a {
    --heightheadernav: .95rem;
    width: calc(var(--heightheadernav) * 14.9);
    height: var(--heightheadernav);
    display: block;
    background-image: url(/assets/logos/logobar/SAC_Logo_Gray.png);
    background-size: auto 99%;
    background-repeat: no-repeat;
    background-position: left center;
    transition: opacity .35s ease !important;
}

.header_nav ul li#menu_toggle {
    grid-column: var(--columntotal) / -1;
    text-align: right;
}

.header_nav ul:has(.active) li:not(.active) a {
    opacity: var(--uniopacityhidden);
    transition: all .35s ease;
}

.header_nav ul li:not(.active) a:hover {
    opacity: 1;
}


/* NAV OPTIONS */
.nav_options {
    position: sticky;
    width: 100%;
    display: grid;
    grid-template-columns: var(--templatecolumns);
    gap: var(--gutter);
    top: calc(var(--1un) + 1rem * 1.35);
    padding-top: 0;
    transition: margin-left 1s ease;
    pointer-events: none;
    z-index: 11;
}

.nav_options ul {
    grid-column: 6 / 11;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
}

.nav_options ul li {
    font-weight: initial;
    pointer-events: all;
}

.nav_options ul li a {
    display: flex;
    align-content: center;
    align-items: center;
    flex-direction: row;
}

.nav_options ul li:first-child {
    font-weight: 700;
    display: none;
}

.nav_options ul li:not(:first-child) a:before {
    content: '';
    display: inline-block;
    width: .9rem;
    height: .9rem;
    background-image: url();
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: .3rem;
    overflow: hidden;
    transform: scale(1);
    transition: opacity .25s ease, transform .25s ease .15s;
}

.nav_options ul li a:hover:before {
    transform: scale(.95);
    opacity: 0;
}

@keyframes blinkerfilter {
    50% {
        opacity: var(--uniopacityhidden);
    }
}

main.filter_active:not(.filter_open, .liked_open) .nav_options ul li.navop_filter {
    animation: blinkerfilter 1.2s infinite ease;
}

.nav_options ul li.navop_filter a::before {
    background-image: url(/assets/icons/filter.svg);
}

.nav_options ul li.navop_liked a::before {
    background-image: url(/assets/icons/liked.svg);
}

.nav_options ul li.navop_like_project a::before {
    background-image: url(/assets/icons/liked.svg);
}

.nav_options ul li.navop_like_project.active a::before {
    background-image: url(/assets/icons/liked-filled.svg);
}

.nav_options ul li.navop_view a::before {
    background-image: url(/assets/icons/list.svg);
}


/** FOOTER **/
body:has(.filter_open) footer, body:has(.liked_open) footer, body.front-page footer {
    display: none;
}

footer {
    display: grid;
    grid-template-columns: var(--templatecolumns);
    grid-auto-rows: min-content;
    gap: var(--gutter);
    padding: var(--1un);
    box-sizing: border-box;
    width: 100%;
    transition: opacity .35s ease;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

footer .footer_div {
    grid-column: span 4;
}

footer .footer_div li * {
    opacity: var(--uniopacityhidden);
    transition: opacity .35s ease;
}

footer .footer_div:first-child {
    grid-column: span 5;
}

footer .footer_div:last-child {
    grid-column: span 3;
}

footer .footer_div a {
    font-weight: 700;
}

footer #footer_socials .instagram_list {
    display: flex;
    gap: var(--0un);
    flex-direction: row;
    flex-wrap: wrap;
}

footer #footer_socials .instagram_list stronger {
    pointer-events: none;
}

footer #footer_socials a:not(:link) {
    pointer-events: none;
}

footer #footer_socials a:link::after {
    content: ' ↗';
    vertical-align: middle;
    font-weight: 300;
    opacity: 0;
    pointer-events: none;
}

@media not all and (hover: none) {
    footer #footer_socials a:link:hover::after {
        opacity: 1;
    }
}


footer #footer_socials .instagram_list a {
    font-weight: 300;

}

footer::after {
    content: '';
    display: block;
    margin-top: var(--gutter);
    grid-column: 1 / -1;
    width: 100%;
    
    /*
    height: calc((100vw - var(--1un) * 2) / 14.9);
    background-image: url(/assets/logos/SAC_Logo_Gray.svg);
    */
    height: calc((100vw - var(--1un) * 2) * 0.07);
    background-image: url(/assets/logos/SAC_Logo_Footer.svg);

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: .35;
}

footer #footer_legalinfo a {
    display: none;
}




/** MAIN MENU **/

html:has(#menu.active), body:has(#menu.active), #menu.active, .contact-form.active {
    cursor: none;
}

/*
html:has(#menu.active), body:has(#menu.active), #menu.active {
    cursor: pointer;
}*/

html:has(#menu.active), html:has(#menu.active) body, html:has(#menu.active) main, body:has(.contact-form.active) {
    overflow: hidden;
    overflow-y: hidden;
}

#menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(188, 175, 166, .95);
    z-index: 100;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: var(--truewhite);
    backdrop-filter: blur(20px);
    transition: background-color 1s ease, backdrop-filter .7s ease .3s;
}

#menu:not(.active) {
    pointer-events: none;
    background-color: rgba(188, 175, 166, 0);
    backdrop-filter: blur(0px);
    transition: background-color .7s ease .3s, backdrop-filter 1s ease;
}

#menu:not(.active) ul, #menu:not(.active) .logo_bar {
    opacity: 0;
    transition: all .35s ease;
    pointer-events: none;
}

#menu .menu_wrapper {
    display: contents;
}

#menu ul, #menu .logo_bar {
    transition: all .35s ease .5s;
    padding: var(--1un);
    cursor: default;
    pointer-events: all;
}

#menu #pop_nav_links {
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: var(--fontsizel);
    font-weight: 300;
    gap: 3px;
}

#menu #pop_nav_functions li {
    flex-basis: 0;
    flex-grow: 1;
    width: 100%;
    text-align: center;
}



#menu #pop_nav_links * {
    line-height: var(--lineheightdisplay);
}

#menu #pop_nav_links #nav_institute, #menu #pop_nav_links #nav_instituto {
    cursor: alias;
}

#menu #pop_nav_functions {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
}

#menu #pop_nav_functions .lang_switch {
    width: auto;
    flex-grow: 0;
}

#menu #pop_nav_functions .lang_switch a {
    opacity: 1;
}

#menu .logo_bar a {
    --heightheadernav: calc(var(--fontsizel) * .8);
    background-image: url(/assets/logos/logobar/SAC_Logo_White.png);
    background-position: center;
    background-size: contain;
    margin: auto;
    pointer-events: none;
}

#menu ul li#menu_toggle {
    grid-column: var(--columntotal) / -1;
    text-align: right;
}

#menu #pop_nav_links:has(a:hover) a:not(:hover) {
    opacity: var(--uniopacityhidden);
    transition: all .35s ease;
}

#menu #pop_nav_functions li:not(.lang_switch) a:hover {
    opacity: var(--uniopacityhidden) !important;
    transition: all .35s ease;
}

#menu #pop_nav_functions li.icon_button:has(a:hover)::before {
    opacity: var(--uniopacityhidden) !important;
}

.icon_button::before {
    --symsize: 1.1rem;
    content: '';
    width: var(--symsize);
    height: var(--symsize);
    display: inline-block;
    vertical-align: middle;
    margin-right: calc(var(--0un) / 2);
    background-image: url();
    background-size: 99% 99%;
    background-repeat: no-repeat;
    overflow: hidden;
    transition: opacity .35s ease;
}

#menu #pop_nav_functions .icon_button::before {
    pointer-events: all;
}

#menu #pop_nav_functions #search_toggle::before {
    background-image: url(/assets/icons/search-white.svg);
}


#menu #pop_nav_functions #liked_projects::before {
    background-image: url(/assets/icons/liked-white.svg);
}

/*
#menu #pop_nav_functions #liked_projects:hover::before {
    background-image: url(/assets/icons/liked-filled-white.svg);
}
    */

html:has(#menu ul:hover) {
    cursor: pointer !important;
}


@media not all and (hover: none) {
    #menu:not(.active) .close_cursor, #menu:has(ul:hover) .close_cursor {
        display: none !important;
    }
}



/*** BY PAGE ***/
body:not(.front-page) main {
    min-height: 100vh;
}

body.page-about main {
    animation: fadeInUpabout 0.8s cubic-bezier(.4, 0, .2, 1);
}

body:not(.front-page, .page-about, .single-projetos) main section {
    animation: fadeInUp 0.8s cubic-bezier(.4, 0, .2, 1);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        margin-top: 100px;
    }

    to {
        opacity: 1;
        margin-top: var(--1un);
    }
}


@keyframes fadeInUpabout {
    from {
        opacity: 0;
        margin-top: 100px;
    }

    to {
        opacity: 1;
        margin-top: 0;
    }
}



/*
body:has(#menu.active) main {
    opacity: var(--uniopacityhidden);
}

main {
    transition: opacity .35s ease;
}
    */



/* HOME - ENTRY */
.front-page main {
    width: 100%;
    display: flex;
}

.front-page main section {
    width: 50%;
    height: 100vh;
    background-color: var(--truewhite);
    padding: var(--1un);
    box-sizing: border-box;
}

.front-page main section.home_nav>* {
    flex: 1;
}


.front-page main section.home_nav {
    color: var(--beige);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.lang_switch {
    text-transform: uppercase;
    display: flex;
    flex-direction: row;
    gap: var(--1un);
    width: 100%;
}

.lang_switch ul {
    display: contents;
}

.lang_switch ul li {
    flex: 1;
}

.lang_switch ul li:first-child {
    text-align: right;
}

.lang_switch a {
    opacity: var(--uniopacityhidden);
}

.lang_switch .active {
    font-weight: 700;
    opacity: 1;
}

.front-page #logo_home {
    position: relative;
    width: 100%;
}

.front-page #logo_home .logo {
    content: '';
    display: block;
    width: calc((var(--fontsizel) * .85) * 14.9);
    height: calc(var(--fontsizel) * .85);
    background-image: url(/assets/logos/SAC_Logo_Beige.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
}


.front-page nav {
    text-align: center;
    font-size: var(--fontsizel);
    font-weight: 300;
    display: flex;
    align-items: flex-end;
}

@media not all and (hover: none) {

    .front-page nav ul:hover li a:not(:hover) {
        transition: opacity .5s ease;
        opacity: .4;
    }

    .front-page nav:has(.active) a:not(.active) {
        opacity: .4;
    }

}

.front-page nav ul {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.front-page nav ul * {
    line-height: var(--lineheightdisplay);
}

.front-page main section.home_galleries {
    background-color: var(--offblack);
    display: flex;
    padding: 0;
}

.front-page main section .home_gallery {
    background-color: var(--white);
    position: relative;
    width: 100%;
}

.home_gallery {
    opacity: 0;
    transition: opacity .65s ease .3s;
}

.home_gallery.active {
    opacity: 1;
    transition: opacity .65s ease;
}

body:has(.home_gallery.active) .home_gallery:not(.active) {
    display: none;
}


.home_gallery:not(#gallery_entry)::before, .home_gallery .gslider .gallery_info::before {
    width: 100%;
    height: 300px;
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    background: #ffffff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, .9) 100%);
    mix-blend-mode: darken;
    display: block;
    pointer-events: none;
    user-select: none;
    opacity: .7;
    z-index: 10;
    mask: linear-gradient(180deg, transparent, rgba(0, 0, 0, 1) 80%);
    backdrop-filter: blur(0px);

}

.gallery_info {
    position: absolute;
    bottom: 0;
    padding: var(--1un);
    box-sizing: border-box;
    width: 50vw;
    display: flex;
    padding: var(--1un);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--1un);
    z-index: 11;
}

.gallery_info p {
    flex: 3;
}

.home_gallery>.gallery_info p {
    font-size: var(--fontsizel);
    font-weight: 700;
    font-weight: 300;
    color: var(--beige);
    line-height: var(--lineheightdisplay);
}

.gallery_info .cta_area {
    flex: 1;
    text-align: right;
}

.gallery_info .cta_area .button {
    float: right;
}

.button {
    --buttoncolor: var(--beige);
    color: var(--buttoncolor) !important;
    padding: var(--1un);
    border: 1px solid rgb(188, 175, 166, .5);
    box-sizing: border-box;
    background-color: transparent;
    transition: all .4s ease;
    display: block;
    width: max-content;
    font-weight: 700;
}

.button:hover {
    background-color: var(--buttoncolor);
    color: var(--truewhite) !important;
}

.home_gallery .gslider {
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
}

.home_gallery .gslider::-webkit-scrollbar {
    display: none;
}

.home_gallery .gslider .gslider-slide {
   /* height: 50vh; */
   height: 100vh;
    position: relative;
}

#gallery_about .gslider .gslider-slide {
     height: 100vh;
}

.home_gallery#gallery_entry .gslider .gslider-slide {
    height: 100vh;
}

.home_gallery .gslider .gslider-slide .cta_img {
    display: contents;
}

.home_gallery .gslider .gslider-slide .cta_img::after {
    display: none;
}


.home_gallery .gslider .gallery_info {
    position: sticky;
    color: var(--beige);
    bottom: auto;
    top: 0;
    align-items: flex-start;
    position: sticky;
    z-index: 1;
    transition: opacity .5s ease, color .5s ease;
        color: var(--offwhite);
}

.home_gallery .gslider .gslider-slide:not(:hover) .gallery_info {
    opacity: 0;
}

.home_gallery .gslider .gslider-slide:hover .gallery_info {
    color: var(--offwhite);
}


.home_gallery .gslider .gallery_info .cta_area a {
    font-weight: 700;
}

.home_gallery .gslider .gallery_info .cta_area a::after {
    content: ' ↗';
    vertical-align: middle;
    font-weight: initial;
}

/*
.home_gallery .gslider .gslider-slide:not(:hover) .gallery_info .cta_area a::after {
    display: none;
}
    */

.gallery_slider.single_cat .gallery_info {
    justify-content: flex-end;
}

.gallery_slider.single_cat .gallery_info .cta_area {
    flex: initial;
    text-align: left;
}

.home_gallery .gslider .gallery_info::before {
    background: linear-gradient(0deg, transparent, rgba(0, 0, 0, .8));
    top: 0;
    height: 100%;
    opacity: .5;
    filter: none;
    mask: none;
    z-index: -1;
}

.home_gallery .gslider-slide {
    background-color: var(--beige);
    background-color: rgb(238 221 210);
}

.home_gallery img, .home_gallery video {
    position: absolute;
    top: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    filter: grayscale(0);
    opacity: .85;
    transition: all .75s ease;
}


.home_gallery .gslider-slide:hover img, .home_gallery .gslider-slide:hover video {
    opacity: 1;
}

.home_gallery .gslider-slide:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--beige);
    mix-blend-mode: color;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    opacity: 1;
    transition: opacity .75s ease;
}

.home_gallery .gslider-slide:hover:after {
    opacity: 0;
}




/* ARCHITECTURE-DESIGN LOOP */
.projects_wrapper {
    width: 100%;
    /*
    display: grid;
    grid-template-columns: var(--templatecolumns);
    grid-auto-rows: min-content;
    column-gap: var(--gutter);
    row-gap: var(--gutter);
    */
    display: flex;
    /*gap: var(--gutter);*/
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--1un);
    padding-top: 0;
    margin-top: var(--1un);
    box-sizing: border-box;
    --projthumbwidth: calc(var(--singlecolumn) * 5 + var(--gutter) * 4);

}

.projects_wrapper .project_thumbnail {
    width: var(--projthumbwidth);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    transition: opacity .5s ease, width 1.3s cubic-bezier(0.4, 0, 0.2, 1), pointer-events 1s ease 1.3s;
    position: relative;
    margin-right: var(--gutter);
    margin-bottom: var(--gutter);
    pointer-events: auto;
    backface-visibility: hidden;
}

body:not(.archive-noticias) .projects_wrapper .project_thumbnail {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
        will-change: opacity, width;
}

.projects_wrapper::before {
    content: '';
    display: block;
    width: calc(var(--singlecolumn) * 5 + var(--gutter) * 5);
    grid-column: span 5;
    visibility: hidden;
    pointer-events: none;
}

/*
.projects_wrapper .project_thumbnail *:not(a, figure, figure *) {
    opacity: 1;
    transition: opacity .35s ease .7s!important;
}
    */
/*
.filter_active .projects_wrapper:has(.project_thumbnail:hover) .project_thumbnail:not(:hover) figure, .filter_active .projects_wrapper:has(.project_thumbnail:hover) .project_thumbnail:not(:hover) .title_area {
    opacity: var(--uniopacityhidden);
}

.filter_active .projects_wrapper:has(.project_thumbnail:hover) .project_thumbnail:not(:hover) figure img {
    filter: grayscale(1);
    opacity: var(--uniopacityhidden);
}
    */
/*
.projects_wrapper:has(.project_thumbnail a:active) .project_thumbnail figure {
    filter: grayscale(1);
    opacity: calc(var(--uniopacityhidden) / 2);
    transition: none;
}

.projects_wrapper:has(.project_thumbnail a:active) .project_thumbnail a:active figure {
    filter: grayscale(0);
    opacity: 1;
    transition: none;
}
*/


.projects_wrapper .project_thumbnail figure a, .projects_wrapper .project_thumbnail .title_area a, #search_results .title_area a {
    display: contents;
}

.projects_wrapper .project_thumbnail .title_area .info_project_id, #search_results .title_area .info_project_id {
    display: none;
    opacity: var(--uniopacityhidden);
}

.projects_wrapper:not(.list_view) .project_thumbnail .title_area .info_project_title b {
    display: none;
}

#search_results .search_subsection {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--offblack45);
    gap: 3px;
    aspect-ratio: 4 / 3;
}

.projects_wrapper .project_thumbnail figure {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    transition: opacity .5s ease;
    user-select: none;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

.projects_wrapper .project_thumbnail figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    image-rendering: crisp-edges;
    /*
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    */
}

.projects_wrapper .title_area, .projects_wrapper .description_area, #search_results .title_area {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: var(--1un);
    margin-top: var(--0un);
}

#search_results .project_thumbnail:hover .title_area {
    bottom: var(--gutter);
}

#search_results .project_thumbnail:hover .title_area::before {
    bottom: calc(var(--gutter) * -1);

}

.projects_wrapper:not(:hover) .project_thumbnail .title_area {
    transition: opacity .25s ease .8s, font-size .75s ease, margin-top .75s ease;
}

.projects_wrapper .description_area {
    width: 90%;
    align-items: flex-start;
    align-items: flex-end;
}

.projects_wrapper .title_area .info_project_location, #search_results .title_area .info_project_location {
    text-align: right;
}

.projects_wrapper:not(.list_view) .title_area .info_project_location {
   text-wrap: nowrap;
}

.projects_wrapper:not(.list_view) .project_thumbnail:not(.liked_project):hover .info_project_location {
opacity: 0;
pointer-events: none;
}

.projects_wrapper .description_area {
        will-change: opacity, font-size, margin-top;
    transition: opacity .25s ease .25s, font-size .25s ease, margin-top .25s ease;
}

.projects_wrapper .project_thumbnail:not(:hover) .description_area {
    font-size: 0;
    opacity: 0;
    margin-top: 0;
    transition: opacity .25s ease 0s, font-size .25s ease .25s, margin-top .25s ease .25s;
}

.like_proj_toggle {
    --symsize: 1.1rem;
    position: absolute;
    z-index: 1;
    top: calc(100% - var(--symsize));
    top: calc(var(--projthumbwidth) / 4 * 3 + var(--0un));
    right: 0;
    display: block;
    flex-shrink: 0;
    width: var(--symsize);
    height: var(--symsize);
    background-image: url();
    background-repeat: no-repeat;
    overflow: hidden;
    transform: scale(1);
    transition: opacity .35s ease .25s;
    background-image: url(/assets/icons/liked.svg);
    background-size: 99% 99%;
}

.project_thumbnail.liked_project .like_proj_toggle {
    top: var(--0un);
    right: var(--0un);
    opacity: 1;
        background-image: url(/assets/icons/liked-filled-red.svg);
    background-image: url(/assets/icons/liked-filled-white.svg);
    /*filter: invert(1);*/
    transition: opacity .35s ease, top .75s ease .2s, right .25s ease, filter .65s ease;
}

.list_view .project_thumbnail.liked_project .like_proj_toggle {
        background-image: url(/assets/icons/liked-filled.svg);
}

.like_proj_toggle:hover, .project_thumbnail.liked_project .like_proj_toggle:hover {
    background-image: url(/assets/icons/liked-filled.svg);
    opacity: var(--uniopacityhidden) !important;
    transition: opacity .35s ease, top .75s ease .2s, right .25s ease, filter .65s ease;
}

.like_proj_toggle:hover {
    transition: opacity .35s ease;
}

.filter_selected .projects_wrapper:has(.project_thumbnail:hover) .project_thumbnail.liked_project:not(:hover) .like_proj_toggle {
    filter: invert(0);
}

.project_thumbnail.liked_project .like_proj_toggle:hover {
    background-image: url(/assets/icons/liked.svg);
}


.projects_wrapper .project_thumbnail:not(:hover, .liked_project) .like_proj_toggle {
    opacity: 0;
    transition: opacity .35s ease;
}

/* No transition for initial load */
.like_proj_toggle.no-transition {
    transition: none !important;
}

.project_thumbnail.liked_project .like_proj_toggle.no-transition {
    transition: none !important;
}


/** LIST VIEW **/
#view_toggle a {
    visibility: hidden;
}

#view_toggle.active_list a::before {
    background-image: url(/assets/icons/grid.svg);
}

#view_toggle a {
    position: relative;
}


#view_toggle:not(.active_list) a:after {
    content: 'Lista';
    font-size: 1rem;
    right: 0;
    position: absolute;
}

html:lang(en-US) #view_toggle:not(.active_list) a:after {
    content: 'List';
}




#view_toggle a:before, #view_toggle a:after {
    visibility: visible;
}

#view_toggle.active_list a {
    visibility: visible;
}

#view_toggle:not(.active_list) a::before {
    margin-right: 0;
    margin-left: .25rem;
}

.projects_wrapper.list_view {
    width: calc(50% + var(--gutter) / 2);
}

.projects_wrapper.list_view .project_thumbnail {
    width: 100%;
    margin: 0;
    padding-bottom: var(--0un);
    padding-bottom: 4px;
            will-change: opacity, font-size, padding-bottom;
    transition: opacity .5s ease .25s, font-size .35s cubic-bezier(0.4, 0, 0.2, 1), padding-bottom 0s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.projects_wrapper.list_view .description_area {
    display: none;
}

.projects_wrapper.list_view .title_area {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(calc(var(--columntotal) / 2), 1fr);
    gap: var(--gutter);
    transition: none;
}

body.archive-noticias .projects_wrapper:not(:hover) .project_thumbnail .title_area {
    transition: opacity .25s ease;
}


.projects_wrapper.list_view .like_proj_toggle, .projects_wrapper.list_view .project_thumbnail:not(:hover, .liked_project) .like_proj_toggle, .projects_wrapper.list_view .project_thumbnail.liked_project .like_proj_toggle {
    transition: none;
}

.projects_wrapper.list_view .like_proj_toggle, .projects_wrapper.list_view .project_thumbnail.liked_project .like_proj_toggle {
    top: -1px;
    left: calc(var(--singlecolumn) - var(--gutter));
    /* right: calc(var(--gutter) / 2); */
    left: var(--singlecolumn);
}

.projects_wrapper.list_view .project_thumbnail .like_proj_toggle:hover {
    background-image: url(/assets/icons/liked.svg);
}

.projects_wrapper.list_view .project_thumbnail.liked_project .like_proj_toggle:hover {
    background-image: url(/assets/icons/liked-filled.svg);
}

.projects_wrapper.list_view .title_area h2 {
    grid-column: span 5;
}

.projects_wrapper.list_view .title_area h2 b {
    width: calc(var(--singlecolumn) + var(--1un));
    display: inline-block;
}

.projects_wrapper.list_view .title_area .info_project_location {
    grid-column: span 3;
    text-align: left;
}

/*
.projects_wrapper.list_view .project_thumbnail figure {
    position: fixed;
    right: 0;
    top: 0;
    width: 50vw;
    height: 100vh;
    aspect-ratio: initial;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    will-change: opacity, transform;
    transition: opacity .25s ease;
    transition: none;
}

.projects_wrapper.list_view .project_thumbnail:hover figure {
    opacity: 1;
}

    */

.projects_wrapper.list_view .project_thumbnail figure, .projects_wrapper.list_view .project_thumbnail a:has(+ figure) {
    display: none;
}

.projects_wrapper .list_showcase {
 position: fixed;
    right: 0;
    top: 0;
    width: 50vw;
    height: 100vh;
    pointer-events: none;
    display: block;
    transition: opacity .25s ease;
    transition: none;
    background-position: center;
    background-size: cover;
    z-index: -1;
}

.projects_wrapper:not(.list_view) .list_showcase {
display: none;
opacity: 0;
}



body:has(.list_view) nav.header_nav::before {
    opacity: 0;
}



.projects_wrapper.list_view::before {
    display: none;
}

.projects_wrapper.list_view:has(.project_thumbnail:hover) .project_thumbnail:not(:hover) .title_area {
    opacity: var(--uniopacityhidden);
    transition: opacity .25s ease;
}

.filter_active:not(.filter_open) .projects_wrapper.list_view .project_thumbnail:not(.active) {
    opacity: 0;
    width: 0;
    font-size: 0;
    padding-bottom: 0;
    transition: opacity .35s ease, font-size .5s cubic-bezier(0.4, 0, 0.2, 1) .35s, padding-bottom .5s cubic-bezier(0.4, 0, 0.2, 1) .35s, width .5s linear .35s !important;
}

.filter_active:not(.filter_open) .projects_wrapper.list_view.grid_transition_off .project_thumbnail:not(.active) {
    transition: none !important;
}

/*** FILTER ***/
/* FILTER MENU */
#filter {
    position: sticky;
    width: 100%;
    display: grid;
    grid-template-columns: var(--templatecolumns);
    gap: var(--gutter);
    padding: var(--1un);
    box-sizing: border-box;
    top: 0;
    transition: margin-left .5s ease;
    z-index: 10;
    margin-top: calc(-2.5rem - var(--1un));
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    background-color: var(--truewhite);
    /*transition: opacity .5s ease, visibility .1s ease .5s;*/
    transition: background-color .75s ease;

    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.filter_open #filter {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    /*
    background-color: var(--grey);
    transition: opacity .5s ease;*/
}

#filter ul {
    grid-column: span 2;
    pointer-events: all;
    display: flex;
    flex-direction: column;
    /* gap: 3px; */
    transition: gap .35s ease;
    box-sizing: border-box;
        max-height: 45vh;
    overflow: auto;
}

#filter ul:nth-child(3).active {
 mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .9), rgba(0, 0, 0, .95), rgba(0, 0, 0, 1));
    padding-bottom: 20vh;

}

#filter ul:not(.active) {
    gap: 0;
}

#filter ul:first-of-type {
    grid-column: 6 / 8;
}

#filter ul h2 {
    position: sticky;
    top: 0;
    background-color: var(--bgcolor);
    z-index: 1;
}

#filter ul h2 a {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#filter ul h2 a:after {
    content: '';
    display: inline-block;
    width: 1.1rem;
    height: .9rem;
    background-image: url(/assets/icons/arrow-reveal.svg);
    background-size: 99% 99%;
    background-repeat: no-repeat;
    margin-left: .25rem;
    vertical-align: baseline;
    overflow: hidden;
    transition: opacity .25s ease, transform .25s ease .15s;
}


#filter ul h2 a i {
    font-weight: initial;
    margin-left: 3px;
    margin-right: 1px;
}


#filter ul h2 a i:before {
    content: '(';
}

#filter ul h2 a i:after {
    content: ')';
}

#clear_filter {
    position: relative;
    opacity: 1;
    grid-column: span 2;
    display: inline-block;
    height: min-content;
    width: max-content;
    transition: opacity .25s ease;
    pointer-events: all;
}

#clear_filter::before, #clear_liked::before {
    content: '';
    display: inline-block;
    width: .9rem;
    height: .9rem;
    background-image: url('/assets/icons/close.svg');
    background-size: 99% 99%;
    background-repeat: no-repeat;
    margin-right: .3rem;
    margin-top: 1px;
    vertical-align: baseline;
    overflow: hidden;
    transform: scale(1);
    transition: opacity .25s ease, transform .5s ease;
}




#clear_filter:hover::before {
    transform: scale(.8);
}

main:not(.filter_active) #clear_filter {
    opacity: 0 !important;
    pointer-events: none;
}

/*
a i {
    font-weight: 700;
    font-size: .9rem;
    background-color: var(--truewhite);
    padding: 0 .3rem;
    margin: 0 1px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 10px;
}


a i:before {
        content: '';
    width: .8rem;
    height: .8rem;
    vertical-align: middle;
    display: inline-block;
    background-image: url(/assets/icons/close.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
    border-radius: 10px;
    overflow: visible;
    margin-right: 2px;
    background-clip: content-box;
}
  */

#filter ul.active h2 a:after {
    transform: rotate(180deg);
}

#filter ul li {
     transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    will-change: opacity, font-size, margin-top;
    transition: opacity .25s ease .25s, font-size .25s ease, margin-top .25s ease;
}

#filter ul:not(.active) li {
    transform: translate3d(0, -10px, 0);
    -webkit-transform: translate3d(0, -10px, 0);
    font-size: 0;
    opacity: 0;
    transition: opacity .25s ease 0s, font-size .25s ease .25s, margin-top .25s ease .25s;
}

#filter ul.active li {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

#filter ul li a {
    transition: padding-left .25s ease;
}

#filter ul li a:hover {
    padding-left: 1rem;
}

#filter ul li.active a {
    font-weight: 700;
    padding-left: calc(.9rem + .25rem);
}


/* FILTERING */

/*
body:has(.filter_open) {
    --bgcolor: var(--grey);
}
    */



/* NOT FOUND */
.no_filter_found {
    display: none;
}

.filter_active .projects_wrapper:not(:has(.active)) .no_filter_found {
    display: block;
}

.filter_active:not(.filter_open) .projects_wrapper:not(:has(.active)) {
position: sticky;
top: calc(var(--1un) * 2 + (1rem * 1.35) * 2);
padding-top: 0;
}




body.archive:has(.filter_open) .filter_active:has(.project_thumbnail:not(.active)) {
min-height: 0;
}




.filter_open .projects_wrapper {
    cursor: pointer;
}



.filter_open .nav_options, .liked_open .nav_options {
    margin-left: calc((var(--singlecolumn) * 2 + var(--gutter) * 1) * -1);
    transition: margin-left .5s ease;
}

body:has(#menu.active) .nav_options {
    opacity: 0;
}

.filter_open .nav_options ul li:not(.navop_filter), .liked_open .nav_options ul li:not(.navop_liked) {
    opacity: 0;
    pointer-events: none;
}

.filter_open .nav_options ul li.navop_filter a, .liked_open .nav_options ul li.navop_liked a {
    font-size: 0;
}

.filter_open .nav_options ul li.navop_filter a:after, .liked_open .nav_options ul li.navop_liked a:after {
    content: 'Fechar';
    font-size: 1rem;
}

html:lang(en-US) .filter_open .nav_options ul li.navop_filter a:after, html:lang(en-US) .liked_open .nav_options ul li.navop_liked a:after {
    content: 'Close';
}


.filter_open .nav_options ul li.navop_filter a:before, .liked_open .nav_options ul li.navop_liked a:before {
    background-image: url(/assets/icons/close-minus.svg);
}

.filter_open .projects_wrapper {
    --projthumbwidth: calc(var(--singlecolumn) * 1 + var(--gutter) * 0);
}

.filter_open .projects_wrapper .project_thumbnail {
    pointer-events: none;
}

/*
.filter_open .projects_wrapper .project_thumbnail:not(.active), body:has(.anchor_loc) .project_thumbnail:not(.anchor_loc) {
        transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    filter: grayscale(1);
    opacity: var(--uniopacityhidden);
}*/

.filter_open .projects_wrapper .project_thumbnail, body:has(.anchor_loc) .project_thumbnail:not(.anchor_loc) {
        transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    filter: grayscale(1);
}

.filter_open .projects_wrapper .project_thumbnail:not(.active) {
    opacity: var(--uniopacityhidden);
}

body:has(.anchor_loc) .project_thumbnail.anchor_loc {
    animation: blinker .5s infinite linear;
}

@keyframes blinker {
    50% {
        opacity: .1;
    }
}

.filter_open.filter_active .projects_wrapper.list_view .project_thumbnail:not(.active) {
    opacity: .35;
}

.filter_open.filter_active .projects_wrapper:not(.list_view) .project_thumbnail:not(.active) figure {
    opacity: var(--uniopacityhidden);
}

.filter_open .projects_wrapper:not(.list_view) .project_thumbnail:not(.active) .title_area {
    font-size: 0;
    opacity: 0;
    margin-top: 0;
    transition: opacity .35s ease 0s, font-size .35s ease .25s, margin-top .35s ease .25s;
}

body.archive-noticias .filter_open .projects_wrapper:not(.list_view) .project_thumbnail .title_area {
    font-size: 0;
    opacity: 0;
    margin-top: 0;
    transition: opacity .35s ease 0s, font-size .35s ease .25s, margin-top .35s ease .25s;
}

.filter_open .projects_wrapper .project_thumbnail .like_proj_toggle {
    display: none;
}

.filter_active:not(.filter_open) .projects_wrapper:not(.list_view) .project_thumbnail:not(.active), body.archive-projetos .filter_open.filter_active .projects_wrapper:not(.list_view) .project_thumbnail:not(.active) {
    --projthumbwidth: 0;
    opacity: 0;
    width: 0;
    margin-right: 0;
    margin-bottom: 0;
    overflow: hidden;
    transition: margin .65s ease, width 1.3s cubic-bezier(0.4, 0, 0.2, 1), padding 1.3s ease, gap 1.3s ease, opacity .25s ease;
}

body.archive-projetos .filter_open.filter_active .projects_wrapper:not(.list_view) .project_thumbnail.active {
     --projthumbwidth: calc(var(--singlecolumn) * 5 + var(--gutter) * 4);
}

body.archive-projetos .filter_active .projects_wrapper:not(.list_view) .project_thumbnail figure {
    transition: filter .75s ease, opacity .75s ease;
}

body.archive-projetos .filter_open.filter_active .projects_wrapper:not(.list_view) .project_thumbnail.active figure {
     filter: grayscale(1);
     opacity: .7;
}


body.archive-noticias #filter {
    background-color: var(--offwhite);
}

/*
body.archive-noticias .filter_open #filter {
    background-color: var(--grey);
}*/



/** NEWS  **/
body.archive-noticias {
    --bgcolor: var(--offwhite);
}


body.archive-noticias .projects_wrapper {
    padding-bottom: 0;
}

/*
body.archive-noticias:has(.filter_open) {
    --bgcolor: var(--grey);
}
    */

body.archive-noticias main .project_thumbnail {
    padding: var(--1un);
    box-sizing: border-box;
    background-color: var(--truewhite);
    display: flex;
    gap: calc(var(--1un));
    flex-direction: column;
}

body.archive-noticias .filter_active:not(.filter_open) .projects_wrapper:not(.list_view) .project_thumbnail:not(.active) {
    padding: 0;
}

body.archive-noticias .projects_wrapper.list_view .project_thumbnail {
    transition: opacity .5s ease .25s, font-size .35s cubic-bezier(0.4, 0, 0.2, 1), padding-bottom .35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}


body.archive-noticias main .project_thumbnail .header_area {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

body.archive-noticias main .project_thumbnail figure {
    aspect-ratio: initial;
    width: 100%;
    background-color: transparent;
    transition: background-color .25s ease;
}



body.archive-projetos .project_thumbnail figure {
    background-color: rgba(255, 255, 255, .45);
    transition: background-color .25s ease;
}

body.archive-projetos .filter_open .project_thumbnail figure, body.archive-noticias .filter_open .project_thumbnail figure {
    background-color: var(--grey);
    transition: background-color .25s ease;
}

/*
body.archive-noticias .filter_open .project_thumbnail.active figure img {
    opacity: 1; 
}*/

body.archive-noticias .filter_open .project_thumbnail.active figure {
    background-color: var(--offblack);
    transition: background-color .25s ease;
}

body.archive-noticias .filter_open .projects_wrapper:not(.list_view) .project_thumbnail:not(.active) figure {
    opacity: var(--uniopacityhidden);
}

body.archive-noticias main .project_thumbnail:has(.boxlink_iframe) a {
    cursor: copy;
}

body.archive-noticias main .project_thumbnail.link:hover {
    background-color: var(--white);
    transition: background-color .25s ease;
}

body.archive-noticias main .project_thumbnail.link h2:after {
    /*
    content: ' ↗';
    vertical-align: middle;
    font-weight: 200;
    */
    content: 'PDF';
    vertical-align: middle;
    font-weight: normal;
    font-size: calc(var(--fontsizes) - .1rem);
    border: 1px solid var(--grey);
    padding: 1px 5px;
    margin-left: 4px;
    border-radius: 10px;
    letter-spacing: .03rem;
    transition: all .35s ease;
}


body.archive-noticias main .project_thumbnail.link:hover h2:after {
    opacity: 1;
}

body.archive-noticias main .project_thumbnail a {
    display: contents;
}

body.archive-noticias main .project_thumbnail figure img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    max-height: 300px;
    object-position: left;
    transition: filter .25s ease, opacity .5s ease;
}

.filter_open:not(.filter_active) .project_thumbnail figure img, body.archive-noticias .filter_open .project_thumbnail figure img, body.archive-noticias .filter_active .project_thumbnail:not(.active) figure img {
    filter: grayscale(1);
    opacity: 0;
    transition: opacity .25s ease .5s, filter .5s ease;
}

body.archive-noticias main .project_thumbnail h2 {
    font-size: var(--fontsizel);
    line-height: 110%;
}

body.archive-noticias main .project_thumbnail h2 * {
    line-height: 110%;
}

body.archive-noticias main.filter_open .project_thumbnail span, body.archive-noticias main.filter_open .project_thumbnail p, body.archive-noticias main.filter_open .project_thumbnail h2 {
    font-size: 0;
    opacity: 0;
    transition: font-size .5s ease, opacity 0s ease;
}

body.archive-noticias main .project_thumbnail span, body.archive-noticias main .project_thumbnail p, body.archive-noticias main .project_thumbnail h2 {
    transition: font-size .8s ease .3s, opacity .5s ease 1.25s;
}

body.archive-noticias main .project_thumbnail {
    transition: width 1.3s cubic-bezier(0.4, 0, 0.2, 1), padding 1.3s ease, gap 1.3s ease, height .5s ease .8s, background-color .5s ease;
}

body.archive-noticias .filter_open .project_thumbnail {
    height: 100%;
    padding: calc(var(--1un) / 4);
    gap: calc(var(--1un) / 3);
}

.filter_open.filter_active .projects_wrapper:not(.list_view) .project_thumbnail:not(.active) {
    opacity: var(--uniopacityhidden);
}

body.archive-noticias .filter_active:not(.filter_open) .projects_wrapper:not(.list_view) .project_thumbnail:not(.active) {
    --projthumbwidth: 0;
    opacity: 0;
    width: 0;
    margin-right: 0;
    margin-bottom: 0;
    height: 0;
    overflow: hidden;
    transition: margin .65s ease, width 1.3s cubic-bezier(0.4, 0, 0.2, 1), padding 1.3s ease, gap 1.3s ease, opacity .25s ease, height .5s ease;
}

.boxlink_iframe {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    border: none;
    z-index: 99;
    background-color: color-mix(in oklab, var(--offblack) 35%, var(--offblack) 35%);
    backdrop-filter: blur(20px);
    padding: var(--1un);
    box-sizing: border-box;
    opacity: 1;
    pointer-events: all;
    transition: opacity .25s ease, background-color .75s ease, backdrop-filter .75s ease !important;
    cursor: none;
}

#menu, .boxlink_iframe,
.contact-form {
    /* Backdrop filters are expensive, force GPU */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    
    /* Isolate compositing */
    isolation: isolate;
}

html:has(.boxlink_iframe.active), body:has(.boxlink_iframe.active), .boxlink_iframe {
    cursor: none;
}



body:has(.boxlink_iframe.active) {
    overflow: hidden;
}

.boxlink_iframe:not(.active) {
    backdrop-filter: blur(0px);
    background-color: transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s ease .2s, visibility 0s ease .35s, background-color 0s ease .35s, backdrop-filter 0s ease .35s !important;
}

.iframe_wrapper {
    width: 60%;
    height: 100%;
    position: relative;
    z-index: 100;
    margin: auto;
    display: block;
    background-color: color-mix(in oklab, var(--offblack) 15%, var(--offblack) 15%);
    backdrop-filter: blur(10px);
    cursor: default;
}

.iframe_wrapper:not(.loaded) {
  background: url(/assets/icons/spinner.svg) no-repeat center center;
    background-size: 70px 70px;
}

.boxlink_iframe:not(.active) .iframe_wrapper iframe {
    opacity: 0;
    transition: opacity .25s ease;
}

.close_cursor {
    position: fixed;
    z-index: 9999;
    top: -50%;
    left: 0;
    width: max-content;
    word-wrap: nowrap;
    color: var(--truewhite);
    pointer-events: all;
    user-select: none;
    display: none;
    background-color: rgba(255, 255, 255, .2);
    padding: 3px 6px;
    border-radius: 100px;
    backdrop-filter: blur(5px);
    box-shadow: inset 1px 1px 5px 0 rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, .2);
    /*  margin-left: var(--0un);
        margin-top: calc(var(--1un) * -1);
        */
    transform: translateY(-50%);
}

.close_cursor::before {
    content: '';
    display: inline-block;
    width: .9rem;
    height: .9rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cline x1='.7' y1='8.3' x2='8.3' y2='.7' stroke='%23f8f7f3' stroke-width='1'/%3E%3Cline x1='8.3' y1='8.3' x2='.7' y2='.7' stroke='%23f8f7f3' stroke-width='1'/%3E%3C/svg%3E");
background-size: 99% 99%;
    background-repeat: no-repeat;
    margin-right: .3rem;
    vertical-align: middle;
    overflow: hidden;
    transform: scale(1);
    transition: opacity .25s ease, transform .25s ease .15s;
}

.boxlink_iframe iframe {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 100;
    border: 1px solid var(--grey);
}



/* LOAD MORE */
.load_more_wrapper {
     display: contents;
}

.project_thumbnail:nth-child(23):has(+ .load_more_wrapper) {
    display: none;
}


#load_more {
    width: var(--projthumbwidth);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
            justify-content: center;
    align-items: center;
    aspect-ratio: 4 / 3;
    appearance: none;
    text-align: center;
    padding: var(--0un);
    box-sizing: border-box;
    border: 1px solid var(--grey);
    background-color: transparent;
    color: var(--offblack);
    font-weight: 700;
    font-family: 'KMR', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    transition: background-color .5s ease, color .5s ease;
}


main.filter_open .load_more_wrapper, main.filter_open #load_more {
    display: none;
}


.projects_wrapper.list_view #load_more {
    width: calc(100% - var(--gutter) / 2);
    margin-top: var(--1un);
    aspect-ratio: auto;
}

#load_more:hover {
    background-color: var(--grey);
    color: var(--truewhite);
}

body:has(.projects_wrapper.list_view) footer {
    display: none;
}




/** ABOUT PAGE **/
body.page-about main {
    padding: var(--1un);
    box-sizing: border-box;
}

body.page-about:has(.nav_options) nav.header_nav::before {
    height: calc(100% + var(--1un));
}

.about_section {
    display: grid;
    grid-template-columns: var(--templatecolumns);
    gap: var(--gutter);
    width: 100%;
    border-top: 1px solid var(--grey);
    padding: var(--1un) 0;
    box-sizing: border-box;
}

body.page-about main .about_section:first-of-type {
    border: none;
    padding-top: 0;
}

body.page-about main .about_section:last-of-type {
    padding-bottom: 0;
}

#about_description>p {
    grid-column: 6 / -1;
    font-size: var(--fontsizel);
    font-weight: 300;
    line-height: 125%;
    letter-spacing: -.03rem;
    max-width: 62ch;
}

#about_description figure {
    grid-column: 6 / 11;
}

#about_description figure img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

#about_description figure#abdesc_studios {
    grid-column: 6 / -1;
    max-width: 62ch;
    font-size: var(--fontsizel);
    position: relative;
}

#about_description figure#abdesc_studios figcaption {
    font-size: 1rem;
}

#about_description figure#abdesc_studios img {
    aspect-ratio: 5 / 3;
}

#about_description figure#abdesc_studios img:not(.active) {
    display: none;
}

#about_description figure#abdesc_studios ul {
    font-size: 1rem;
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--1un);
    justify-content: space-between;
    display: none;
}

/*
#about_description figure#abdesc_studios ul li {
    flex: 1;
}

#about_description figure#abdesc_studios ul li:nth-child(2) {
    text-align: center;
}

#about_description figure#abdesc_studios ul li:last-child {
    text-align: right;
}
    */

#about_description figure#abdesc_studios ul li a {
    transition: opacity .35s ease;
}

#about_description figure#abdesc_studios ul li.active a {
    font-weight: 700;
}

#about_description figure#abdesc_studios ul li:not(.active) a:hover {
    cursor: pointer;
    opacity: var(--uniopacityhidden) !important;
}

body.page-about main .about_section:not(:first-of-type) h3 {
    grid-column: 1 / 6;
}

body.page-about .subsection3 {
    grid-column: span 3;
}


/* ABOUT - CONTACT SECTION */

.contact_form_action:after {
    content: ' ↗';
    vertical-align: middle;
    font-weight: 300;
    transition: opacity .25s ease;
}

#about_contact .subsection3>* {
    display: inline-block;
    width: max-content;
}

.contact_form_action, #about_contact .subsection3>*:first-child {
    font-weight: 700;
}

/*
.contact_form_action, #about_contact .subsection3>*:not(:first-child) {
    opacity: var(--uniopacityhidden);
}
    */

.contact_form_action, #about_contact .subsection3>*:not(:first-child):hover {
    opacity: 1;
}

/*
#about_contact .subsection3.generalsocials>a:has(+ a) {
font-weight: 400;
}*/

#about_contact .subsection3.generalsocials>a {
    font-weight: 700;
}


#about_contact .subsection3:not(:first-of-type)>a:after {
    content: ' ↗';
    vertical-align: middle;
    font-weight: 300;
    opacity: 0;
    pointer-events: none;
}

#about_contact .subsection3:not(:first-of-type)>a:hover:after {
    opacity: 1;
}

body.page-about main .about_list {
    display: flex;
    flex-direction: column;
}


/* ABOUT - PARTNERS SECTION */
body.page-about main #about_partners {
    position: relative;
}

body.page-about main #about_partners .about_list .partner_item *:not(img) {
    cursor: pointer;
    display: inline-block;
    max-width: max-content;
}

body.page-about main #about_partners .about_list .partner_item:not(:hover) span {
    opacity: var(--uniopacityhidden);
}

body.page-about main #about_partners .about_list .partner_item {
    display: flex;
    flex-direction: column;
    width: fit-content;
}

body.page-about main #about_partners .about_list .partner_item:not(:last-child) {
    padding-bottom: var(--1un);
}

#about_partners .partner_item img {
    position: absolute;
    height: calc(100% - var(--gutter) * 2);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    position: absolute;
    transition: none;
    left: calc(var(--singlecolumn) * 5 + var(--gutter) * 4);
    transform: translateX(-100%);
    top: var(--gutter);
    object-position: center top;
    filter: grayscale(1);
    pointer-events: none;
}

#about_partners .partner_item:hover h4 {
    font-weight: 700;
}

@media not all and (hover: none) {

    #about_partners .partner_item:not(:hover) img {
        opacity: 0;
       /* transition: opacity .35s ease;*/
    }

    #about_partners:has(.partner_item:hover) .partner_item:not(:hover) *:not(img) {
        opacity: var(--uniopacityhidden);
    }

}

.list_selection li {
    cursor: default;
    width: max-content;
}

.list_selection:has(li:hover) li:not(:hover) {
    opacity: var(--uniopacityhidden);
    transition: opacity .15s ease;
}


/* ABOUT - TEAM */
#about_team .team_list {
    row-gap: 0;
    grid-column: 6 / 16;
    column-count: 3;
    column-gap: var(--gutter);
}

#about_team .team_list li {
    display: block;
    grid-column: span 3;
    break-inside: avoid;
    max-width: calc(var(--singlecolumn) * 3 + var(--gutter) * 2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



/* ABOUT - AWARDS */
#about_awards *:not(h3) {
    grid-column: 6 / 12;
}

#about_awards>p {
    max-width: 120ch;
}

#about_awards .awards_list {
    grid-column: 6 / 16;
}

#about_awards .list_selection li {
    width: auto;
}




/** SEARCH **/
body:has(.search_wrapper.active) #menu, body:has(.liked_open) #menu.liked_project_active {
    background-color: var(--beige);
}


body:has(.search_wrapper.active) #menu .menu_wrapper ul, body:has(.liked_open) #menu.liked_project_active .menu_wrapper ul {
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
}

body:has(.search_wrapper.search_mode) #menu .menu_wrapper ul, body:has(.search_wrapper.search_mode) #menu .menu_wrapper .logo_bar, body:has(.liked_open) #menu.liked_project_active.liked_project_active .menu_wrapper .logo_bar {
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
}

body:has(.search_wrapper.active) #menu .close_cursor::after {
    content: ' busca';
}

html:lang(en-US) body:has(.search_wrapper.active) #menu .close_cursor::after {
    content: ' search';
}

body:has(.liked_open) #menu .close_cursor::after {
    content: ' favoritos';
}

html:lang(en-US) body:has(.liked_open) #menu .close_cursor::after {
    content: ' liked';
}


body:has(.search_wrapper.active) #menu .close_cursor, body:has(.liked_open) #menu.liked_project_active .close_cursor {
    pointer-events: none;
}

body:has(#menu.liked_project_active) #clear_liked::before {
    background-image: url(/assets/icons/close-white.svg);
}

.search_wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    padding: var(--1un);
    padding-top: 100vh;
    box-sizing: border-box;
    pointer-events: all;
    overflow-y: auto;
    transition: padding-top .65s ease, opacity 0s ease;
}

.search_wrapper:not(.active, .search_mode) {
    opacity: 0;
    pointer-events: none;
    transition: padding-top .85s ease, opacity .35s ease .5s;
}

.search_wrapper.active {
    padding-top: calc(50vh - var(--1un) * 2 - var(--fontsizel) * .8);
    padding-top: calc(50dvh - var(--1un) * 2 - var(--fontsizel) * .8);
}

.search_wrapper.search_mode {
    padding-top: 0;
}

/* Reset all default input styles */
.search_wrapper input[type="text"],
.search_wrapper input[type="search"],
.search_wrapper input {
    /* Remove default styles */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    background: none;
    margin: 0;
    padding: 0;
    box-shadow: none;

    /* Custom styling to match your design */
    background-color: none;
    border-bottom: 1px solid rgb(248, 247, 243, .4);
    color: var(--truewhite);
    font-size: var(--fontsizel);
    font-weight: 300;
    padding: var(--0un) 0;
    width: 100%;
    text-align: center;

    /* Smooth transition */
    transition: all .75s ease .35s;
    transform-origin: center;
    position: sticky;
    top: 0;
    background-color: var(--beige);
    font-family: 'KMR', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 300;
    z-index: 100;
}

.search_wrapper:not(.active) input[type="text"],
.search_wrapper:not(.active) input[type="search"],
.search_wrapper:not(.active) input {
    transform: scaleX(0);
    background-color: transparent;
}

.search_wrapper:not(.active) input[type="text"]::placeholder,
.search_wrapper:not(.active) input[type="search"]::placeholder,
.search_wrapper:not(.active) input::placeholder {
    opacity: 0;
    transition: opacity .35s ease;
}

/* Placeholder styling */
.search_wrapper input::placeholder {
    color: var(--truewhite);
    opacity: var(--uniopacityhidden);
    transition: opacity .25s ease 1.15s;
}

/* Focus state */
.search_wrapper input:focus {
    border-bottom: 1px solid rgb(248, 247, 243, .7);
    opacity: 1;
}

/* Remove autofill background color */
.search_wrapper input:-webkit-autofill,
.search_wrapper input:-webkit-autofill:hover,
.search_wrapper input:-webkit-autofill:focus {
    -webkit-text-fill-color: rgba(255, 255, 255, 0.7);
    -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.05) inset;
    transition: background-color 5000s ease-in-out 0s;
}

#search_results {
    padding: var(--gutter) 0;
    pointer-events: none;
    transition: opacity .35s ease;
}

.search_wrapper:not(.search_mode) #search_results {
    opacity: 0;
    pointer-events: none;
}

.search_wrapper:not(.search_mode) {
    overflow-y: hidden;
}

.search_wrapper:not(.search_mode) #search_results * {
    pointer-events: none !important;
}

#search_results ul {
    padding: 0;
    display: grid;
    grid-template-columns: var(--templatecolumns);
    grid-auto-rows: min-content;
    gap: var(--gutter);
    pointer-events: none;
}

#search_results ul::after {
    content: 'Nada encontrado';
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fontsizel);
    font-weight: 300;
    text-align: center;
    transition: all .35s ease;
    pointer-events: none;
}

html:lang(en-US) #search_results ul::after  {
    content: 'Nothing found';

}

#search_results:not(.search_nofound) ul::after {
    opacity: 0;
}

#search_results.search_nofound ul li {
    opacity: 0;
    pointer-events: none;
}

#search_results ul li {
    position: relative;
    grid-column: span 5;
    pointer-events: all;
}

#search_results ul li.search_loading, #search_results ul li.search_no_results {
position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
}

#search_results figure {
    width: 100%;
    aspect-ratio: 4 / 3;
    transition: opacity .5s ease;
    user-select: none;
}

#search_results figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
}

#search_results .title_area, #search_results .header_area {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: var(--0un);
    box-sizing: border-box;
    z-index: 2;
    transition: bottom .5s ease;
}

#search_results .title_area::before, #search_results .header_area::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 250%;
    background: #000;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .8));
    z-index: -1;
    left: 0;
    bottom: 0;
    opacity: .8;
    transition: bottom .5s ease;
}

#search_results .header_area::before {
    height: 100%;

}

#search_results .header_area::before {
    background: linear-gradient(0deg, transparent, rgba(0, 0, 0, .8));
    top: 0;
    opacity: .5;
    height: 100%;
}

#search_results .header_area {
    top: 0;
    width: 100%;
    display: flex;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    pointer-events: none;
}



/** LIKED PROJECT **/
.liked_wrapper {
    position: fixed;
    top: var(--1un);
    width: calc(var(--singlecolumn) * 5 + var(--gutter) * 4);
    left: calc(var(--singlecolumn) * 7 + var(--gutter) * 7 + var(--1un));
    z-index: 10;
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--1un) * 2);
    --bordercolor: var(--grey);
    margin-top: 0;
    transition: opacity .65s ease .5s;
    cursor: default;
    pointer-events: none;
}

body:has(.liked_open) .liked_wrapper {
    transition: opacity .65s ease .5s, z-index 0s ease .5s, top 0s ease .5s;
}


body:has(main:not(.liked_open)) .liked_wrapper {
    opacity: 0;
    pointer-events: none;
    transition: none;
}


.liked_wrapper h3 {
    font-weight: 300;
}

.liked_wrapper .header_bar {
    display: flex;
    flex-direction: row;
    padding-bottom: var(--0un);
    justify-content: space-between;
    border-bottom: 1px solid var(--bordercolor);
    align-items: center;
    pointer-events: all;
}

.liked_wrapper .header_bar span#liked_export_date {
    display: none;
}

.liked_wrapper ul {
    display: flex;
    flex-direction: column;
    flex: 1;
    max-height: max-content;
    overflow: auto;
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    scrollbar-width: none;
    /* Firefox, Safari 18.2+, Chromium 121+ */
}

.liked_wrapper ul::-webkit-scrollbar {
    display: none;
}

.liked_wrapper ul li {
    display: flex;
    flex-direction: row;
    gap: var(--gutter);
    padding: var(--0un) 0;
    transition: opacity .35s ease .65s, font-size .65s ease, padding .65s ease, filter .65s ease;

}

.liked_wrapper ul li:not(:last-child) {
    border-bottom: 1px solid var(--bordercolor);
}

.liked_wrapper ul li.removing {
    opacity: 0;
    font-size: 0;
    padding: 0;
    border-color: transparent;
    transform: translateX(-100%);
    pointer-events: none;
    transition: transform .65s ease, opacity .55s ease, font-size .65s ease .35s, padding .65s ease .35s, border-color .25s ease;
    filter: grayscale(1);
}



.liked_wrapper ul li figure {
    width: calc(var(--singlecolumn) * 2 + var(--gutter) * 1);
    aspect-ratio: 4 / 3;
    transition: all .65s ease .35s;
}

.liked_wrapper ul li.removing figure {
    width: 0px;
    filter: grayscale(1);
}

.liked_wrapper ul li.removing figure img {
    width: 0px;
    height: 0px;
}

.liked_wrapper ul li figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: all .65s ease .35s;
}

.liked_wrapper ul li .title_area {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.liked_wrapper ul li .title_area .info_project_id {
    display: none;
}

.liked_wrapper ul li .like_proj_removal {
    position: relative;
    height: min-content;
}

.liked_wrapper ul li .like_proj_removal:not(:hover) {
    color: transparent;
}


.liked_wrapper ul li:has(.like_proj_removal:hover) {
    filter: grayscale(1);
}

.liked_wrapper ul li .like_proj_removal:not(:hover)::before {
    --symsize: 1.1rem;
    content: '';
    width: var(--symsize);
    height: var(--symsize);
    display: inline-block;
    vertical-align: middle;
    background-image: url(/assets/icons/liked-filled.svg);
    background-size: 99% 99%;
    background-repeat: no-repeat;
    overflow: hidden;
    transition: opacity .35s ease;
    position: absolute;
    right: 1px;
}

.liked_wrapper ul li.removing .like_proj_removal:not(:hover)::before {
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

.liked_wrapper .logo_bar {
    display: none;
}

.liked_wrapper:not(:has(.liked_project_card)) #clear_liked {
    display: none;
}

#clear_liked {
    pointer-events: all;
}


.liked_wrapper #export_liked, .liked_wrapper #send_liked_email, #liked_email_modal button {
    width: 100%;
    display: block;
    text-align: center;
    padding: var(--0un);
    box-sizing: border-box;
    border: 1px solid var(--bordercolor);
    font-weight: 700;
    pointer-events: hover;
    transition: all .35s ease;
    --buttoncolor: var(--offblack);
    font-family: 'KMR', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.liked_wrapper #export_liked:hover, .liked_wrapper #send_liked_email:hover {
    background-color: var(--offblack);
    color: var(--truewhite);
}

.liked_wrapper #export_liked:hover, .liked_wrapper #send_liked_email:hover, #liked_email_modal button:hover {
    border: 1px solid var(--offblack);
}

.liked_wrapper:not(:has(.liked_project_card)) #export_liked {
    border: none;
    pointer-events: none;
    font-weight: 300;
    font-size: 0;
    transition: none;
    padding-left: 0;
    margin: 0;
    text-align: left;
}

.liked_wrapper:not(:has(.liked_project_card)) #export_liked::after {
    content: 'Nenhum projeto favoritado';
    font-size: var(--universalfontsize);
    display: block;
    line-height: var(--lineheightuniversal);
}

.liked_wrapper:not(:has(.liked_project_card)) ul {
    flex: 0;
}

html:lang(en-US) .liked_wrapper:not(:has(.liked_project_card)) #export_liked::after {
    content: 'No projects liked';

}

body:has(.removing) #export_liked, body:has(.removing) #clear_liked {
    pointer-events: none;
}

body:has(#menu.liked_project_active) .liked_wrapper {
    color: var(--truewhite);
    --buttoncolor: var(--truewhite);
    --bordercolor: rgba(248, 247, 243, .6);
    left: 50vw;
    transform: translateX(-50%);
    z-index: 10000000;
}

body:has(#menu.liked_project_active) .liked_wrapper #export_liked:hover {
    border: 1px solid var(--truewhite);
    background-color: var(--truewhite);
        color: var(--beige)!important;
}

body:has(#menu.liked_project_active) .liked_wrapper ul li .like_proj_removal:not(:hover)::before {
    background-image: url(/assets/icons/liked-filled-white.svg);
}

body:has(#menu:not(.liked_project_active)) main.liked_open .project_thumbnail, body:has(#menu:not(.liked_project_active)) main.liked_open #load_more {
    display: none;
}

body:has(.liked_open) {
    overflow: hidden;
}

body:has(.liked_open) nav.header_nav {
    opacity: 0;
}

body:has(.liked_open) .liked_wrapper h3, body:has(.liked_open) .liked_wrapper ul, body:has(.liked_open) .liked_wrapper ul li *, body:has(.liked_open) .liked_wrapper:has(.liked_project_card) #export_liked {
    pointer-events: all;
}

/* Botão "Enviar por Email" */
body:has(#menu.liked_project_active) .liked_wrapper #send_liked_email {
    color: var(--truewhite);
    border-color: rgba(248, 247, 243, .6);
    --buttoncolor: var(--truewhite);
}

body:has(#menu.liked_project_active) .liked_wrapper #send_liked_email:hover {
    background-color: var(--truewhite);
    color: var(--beige)!important;
    border-color: var(--truewhite);
}

/* Modal do formulário */
body:has(#menu.liked_project_active) #liked_email_modal {
    color: var(--truewhite);
}

/* Input do email */

body:has(#menu.liked_project_active) #liked_email_modal form input[type="email"] {
    border-color: rgba(248, 247, 243, .6);
    color: var(--truewhite);
    background-color: transparent;
}

body:has(#menu.liked_project_active) #liked_email_modal form input[type="email"]::placeholder {
    color: rgba(248, 247, 243, .5);
}

body:has(#menu.liked_project_active) #liked_email_modal form input[type="email"]:focus {
    border-color: var(--truewhite);
}

/* Botão Submit (Enviar) */
body:has(#menu.liked_project_active) #liked_email_modal button[type="submit"] {
    background-color: var(--truewhite);
    border-color: var(--truewhite);
    color: var(--beige)!important;
}

#liked_email_modal button[type="submit"]:has(+ button) {
    margin-right: var(--0un);
}

body:has(#menu.liked_project_active) #liked_email_modal button[type="submit"]:hover {
    background-color: transparent;
    border-color: var(--truewhite);
    color: var(--truewhite)!important;
}

/* Botão Cancel */
body:has(#menu.liked_project_active) #liked_email_modal button.cancel_button {
    border-color: rgba(248, 247, 243, .6);
    color: var(--truewhite)!important;
    background-color: transparent;
}

body:has(#menu.liked_project_active) #liked_email_modal button.cancel_button:hover {
    background-color: var(--truewhite);
    border-color: var(--truewhite);
    color: var(--beige)!important;
}

/* Mensagem de status */
#liked_form_message {
    color: var(--offblack);
}

body:has(#menu.liked_project_active) #liked_form_message {
    color: var(--truewhite);
}

body:has(#menu.liked_project_active) #liked_form_message p {
    color: inherit;
}

.export_actions {
    display: flex;
    flex-direction: row;
    gap: var(--0un);
    pointer-events: all;
}

.export_actions > * {
    flex: 1;
}



/* SUBSTITUIR DPS */
#send_liked_email {
    pointer-events: all;
    cursor: pointer;
    font-family: 'KMR', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
}

#liked_email_modal, #liked_form_message {
    pointer-events: all;
    margin-top: var(--0un);
}

.modal_content {
    pointer-events: all;
}


#liked_email_modal form {
    display: flex;
}

#liked_email_modal form input[type="email"] {
    flex: 1;
    border-right: none;
    margin-top: 0;
}

#liked_email_modal button {
    width: auto;
}




.liked_wrapper:not(:has(.liked_project_card)) #send_liked_email, .liked_wrapper:not(:has(.liked_project_card)) #liked_email_modal {
    display: none;
}


.navop_like_project, .navop_like_project.active {
    pointer-events: all;
    cursor: pointer;
}


@media print {

    body:has(.liked_open) {
        background-color: none !important;
        --bgcolor: transparent;
    }

    html:has(.liked_open) {
        font-size: 16px;
        --0un: 1rem;
    }

    body:has(.liked_open) .liked_wrapper {
        width: 100vw;
        left: 0;
        top: 0;
        padding: 2rem;
        box-sizing: border-box;
    }

    body:has(.liked_open) #export_liked, body:has(.liked_open) .header_nav:not(nav) {
        display: none;
    }

    body:has(.liked_open) .liked_wrapper ul li figure {
        width: 30vw;
    }


    body:has(.liked_open) .liked_wrapper .logo_bar {
        display: block;
        margin-bottom: var(--0un);
        max-width: 30vw;
    }

    body:has(.liked_open) .liked_wrapper .header_bar span#liked_export_date {
        display: block;
    }


}



/** MAIN PROJECT - INDIVIDUAL **/
.project_intro_img {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    box-sizing: border-box;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.project_intro_img img, .project_intro_img video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(.8);
    opacity: 1;
    mix-blend-mode: luminosity;
    user-select: none;
}

.project_intro_img::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--beige);
    z-index: -1;
    pointer-events: none;
}

.project_intro_img::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #42362E;
    z-index: 1;
    opacity: .65;
    mix-blend-mode: darken;
}

/*
body.single-projetos:has(main.intro_active) nav.header_nav::before {
    background: #000;
background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
opacity: .2;
}
*/

body.single-projetos:has(.nav_options) nav.header_nav::before {
    height: calc(100% + var(--1un));
}


body.single-projetos:has(main.intro_active) nav.header_nav::before {
    opacity: 0;
}

body.single-projetos:has(main.intro_active) nav.header_nav * {
    color: var(--truewhite);
    opacity: .75;
}

body.single-projetos:has(main.intro_active) .nav_options {
    display: none;
}

body.single-projetos .nav_options {
    top: var(--1un);
}

body.single-projetos .nav_options ul {
    grid-column: 11 / -1;
}

body.single-projetos:has(main.intro_active) .logo_bar a, body.single-projetos:has(main.outro_active) .logo_bar a {
    background-image: url(/assets/logos/logobar/SAC_Logo_White.png);
}

body.single-projetos:has(main.intro_active) .header_nav ul li.active {
    opacity: 0;
}

.project_intro_info {
    width: calc(var(--singlecolumn) * 6 + var(--gutter) * 5);
    position: sticky;
    top: var(--1un);
    color: var(--truewhite);
    z-index: 20;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--0un);
    padding-bottom: var(--1un);
}

.project_intro_info_bar {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
}

.project_intro_info_bar span {
    flex: 1;
}

.project_intro_info_bar span.info_project_id {
    text-align: left;
}

.project_intro_info_bar span.info_project_year {
    text-align: right;
}

.project_intro_info p {
    max-width: calc(var(--singlecolumn) * 5 + var(--gutter) * 4);
    margin: auto;
}

.project_intro_info p + p {
    display: none;
}

.design_proj .info_project_location {
    opacity: 0;
}


body.single-projetos:has(main.outro_active) nav.header_nav::before {
    background: var(--beige);
    background: linear-gradient(0deg, rgba(188, 175, 166, 0) 0%, rgba(188, 175, 166, 1) 70%);
    transition: none;
    opacity: 1;
}

body.single-projetos:has(main.outro_active) nav.header_nav, body.single-projetos:has(main.outro_active) .header_nav ul li a {
    color: var(--truewhite);
}

body.single-projetos:has(main.outro_active) .nav_options ul li.navop_like_project.active a::before {
    background-image: url(/assets/icons/liked-filled-white.svg);
}

body.single-projetos:has(main.outro_active) .nav_options ul li.navop_like_project a::before {
    background-image: url(/assets/icons/liked-white.svg);
}

.project_outro_description {
    width: 100vw;
    min-height: 120vh;
    margin-top: calc(var(--gutter) / 2);
    padding: var(--3un) var(--1un);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--beige);
    color: var(--truewhite);
}


.project_description_wrapper {
    width: 100%;
    display: grid;
    padding: var(--0un) 0;
    padding-bottom: 0;
    grid-template-columns: var(--templatecolumns);
    column-gap: var(--gutter);
    row-gap: var(--gutter);
    grid-template-rows: min-content;
    border-top: 1px solid rgba(248, 247, 243, .6);
}

.project_description_wrapper h3 {
    position: absolute;
}

.project_description_table {
    grid-column: 11 / -1;
    display: flex;
    flex-direction: column;
}

.project_description_table li {
    display: flex;
    flex-direction: row;
    margin-bottom: var(--0un);
}

.project_description_table li .description_descript > p {
    max-width: 80ch;
}


.project_description_table li:not(:first-child) {
    border-top: 1px solid rgba(248, 247, 243, .6);
    padding-top: var(--0un);
    box-sizing: border-box;
}

.project_description_table li .description_title {
    width: calc(var(--singlecolumn) * 2 + var(--gutter) * 2);
    max-width: calc(var(--singlecolumn) * 2 + var(--gutter) * 2);
    flex-grow: 0;
    flex-shrink: 0;
    font-weight: 700;
}



#pdesc_status .description_descript .pdesc_status_input::before {
    content: '';
    display: inline-block;
    margin-right: 5px;
    width: .9rem;
    height: .9rem;
    border: 1px solid rgba(248, 247, 243, .6);
    padding: 1px;
    box-sizing: border-box;
}


#pdesc_status .description_descript .pdesc_status_input.active::before {
    background: var(--truewhite);
    background-clip: content-box;
    border: 1px solid rgba(248, 247, 243, .8);
}


#pdesc_status .description_descript, #pdesc_awards .description_descript {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gutter);
    flex: 1;
}

#pdesc_status .description_descript .pdesc_status_input, .pdesc_award_tag {
    width: calc(50% - var(--gutter) / 2);
    flex-shrink: 0;
    flex-grow: 0;
    position: relative;
}

figure.pdesc_award_tag figcaption {
    margin-top: calc(var(--0un) / 2);
}

figure.pdesc_award_tag img {
    width: 35px;
    height: 35px;
    object-fit: contain;
}

.project_outro_description .project_description_map {
    position: relative;
    grid-column: 1 / 8;
    --mapwidth: calc(var(--singlecolumn) * 7 + var(--gutter) * 6);
    width: 100%;
    height: calc(var(--mapwidth) * 0.5027);
    background-image: url(/assets/general/mundimap.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: calc(var(--1un) + 1rem);
    overflow: visible;
    cursor: crosshair;
}

#pdesc_download .description_descript a::before {
    content: '↓ ';
    vertical-align: middle;
    font-weight: 300;
}

.design_proj .project_outro_description {
min-height: 0;
    padding: 0;
    margin: 0;
}

.design_proj .project_description_wrapper {
    display: none;
}

.design_proj .more_projects {
margin-top: calc(var(--gutter) / 2);
}

/* PINS MAPA */
.map_pin {
    --pinsize: calc((var(--singlecolumn) * 7 + var(--gutter) * 6) * 0.02);
    --leftpin: 0;
    --toppin: 0;
    position: absolute;
    width: var(--pinsize);
    height: var(--pinsize);
    border-radius: 100px;
    border: 1px solid rgba(248, 247, 243, .8);
    top: calc(var(--toppin) * 100 / 50.27);
    left: var(--leftpin);
    transform: translate(-50%, -50%);
        display: flex;
    align-content: center;
    align-items: center;
    flex-direction: row;
        transition: opacity .75s ease, width .75s ease, height .75s ease;
            overflow: visible;

}

.map_pin.active {
    background-color: var(--truewhite);
}

/*
.map_pin.br {
    --leftpin: 36%;
    --toppin: 29%;
}

.map_pin.us {
    --leftpin: 24%;
    --toppin: 13%;
}

.map_pin.colombia {
    --leftpin: 32%;
    --toppin: 23.25%;
}

.map_pin.peru {
    --leftpin: 29%;
    --toppin: 28%;
}

.map_pin.uruguai {
    --leftpin: 35.3%;
    --toppin: 35.2%;
}

.map_pin.angola {
    --leftpin: 55%;
    --toppin: 29%;
}


.map_pin.china {
    --leftpin: 76.39%;
    --toppin: 14%;
}

.map_pin.portugal {
    --leftpin: 47.8%;
    --toppin: 12.6%;
}

.map_pin.spain {
    --leftpin: 49%;
    --toppin: 12.2%;
}

.map_pin.monaco {
    --leftpin: 51.33%;
    --toppin: 10.73%;
}

.map_pin.greece {
    --leftpin: 55.03%;
    --toppin: 12.37%;
}

.map_pin.croacia {
    --leftpin: 53.59%;
    --toppin: 10.11%;
}

.map_pin.france {
    --leftpin: 50.1%;
    --toppin: 9.7%;
}

.map_pin.italy {
    --leftpin: 52.77%;
    --toppin: 11.14%;
}

.map_pin.switzerland {
    --leftpin: 51.33%;
    --toppin: 9.7%;
}

.map_pin.uk {
    --leftpin: 48.87%;
    --toppin: 7.65%;
}

.map_pin.uae {
    --leftpin: 64.07%;
    --toppin: 16.89%;
}

.map_pin.japan {
    --leftpin: 86%;
    --toppin: 13.5%;
}

.map_pin.bahamas {
    --leftpin: 28.54%;
    --toppin: 17.3%;
}

.map_pin.mexico {
    --leftpin: 22.3%;
    --toppin: 17.91%;
}
    */

.map_pin span {
    word-break: keep-all;
    white-space: nowrap;
    margin-left: calc(var(--pinsize) + 4px);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}

.map_pin.active span {
        font-weight: 700;
}

.project_description_map:hover .map_pin.active span {
    opacity: 1;
}


@keyframes blinkermap {
    50% {
        background-color: transparent;
        border-color: transparent;
    }
}


.project_description_map:hover .map_pin.active:not(:hover) {
    animation: blinkermap .45s infinite ease;
}

.project_description_map .map_pin:not(.active):hover  {
    background-color: var(--truewhite);
}

.project_description_map .map_pin:not(.active):hover span {
    opacity: 1;
    font-weight: normal;
}

.project_description_map:hover .map_pin:not(.active) {
--pinsize: calc((var(--singlecolumn) * 7 + var(--gutter) * 6) * 0.012);
}


/* MORE PROJECTS */
.more_projects {
    width: 100%;
    height: auto;
    position: relative;
    padding-bottom: var(--1un);
}

.more_projects > h3 {
    color: var(--truewhite);
    padding: var(--1un);
    display: none;
}

.more_projects::before {
    position: absolute;
    top: var(--1un);
    content: '';
    height: calc(100% - var(--1un) * 2);
    width: var(--singlecolumn);
z-index: 1;
    pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg width='13' height='35' viewBox='0 0 13 35' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.3828 0.395904L0.882812 17.2834L11.3828 34.1709' stroke='%23626162' stroke-width='1px'/%3E%3C/svg%3E%0A");    background-repeat: no-repeat;
    background-position: var(--1un) center;
        background-size: 15px;
            transition: opacity .35s ease;
}


.more_projects::after {
    position: absolute;
    top: var(--1un);
    right: 0;
    content: '';
    height: calc(100% - var(--1un) * 2);
    width: var(--singlecolumn);
        pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg width='13' height='35' viewBox='0 0 13 35' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.636717 0.395905L11.1367 17.2834L0.636719 34.1709' stroke='%23626162' stroke-width='1px'/%3E%3C/svg%3E%0A");    background-repeat: no-repeat;
    background-position: calc(100% - var(--1un)) center;
    background-size: 15px;
    transition: opacity .35s ease;
}


.more_projects:not(:hover)::after, .more_projects:not(:hover)::before {
    opacity: 0;
}

.more_projects:has(.scroll_start)::before, .more_projects:has(.scroll_end)::after {
    opacity: 0!important;
}



.more_projects ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: fit-content;
    max-width: 100vw;
    overflow: scroll;
    position: relative;
    padding: var(--1un);
    padding-right: 0;
    padding-bottom: 0;
    box-sizing: border-box;
    pointer-events: none;
}

.more_projects ul a {
    display: contents;
}

.more_projects ul li {
    width: calc(var(--singlecolumn) * 3 + var(--gutter) * 2);
    padding-right: var(--gutter);
    overflow: visible;
    transition: var(--transitionthumb);
    pointer-events: all;
    position: relative;
    flex-shrink: 0;
    flex-grow: 0;
}

.more_projects ul li img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    transition: opacity .5s ease, filter .5s ease;
}

.more_projects ul li span {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - var(--1un));
    height: 100%;
    background-color: var(--truewhite);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    padding: var(--1un);
    box-sizing: border-box;
    text-align: center;
    color: var(--grey);
}

.more_projects ul li span:not(:hover) {
    opacity: 0;
}

.more_projects:has(span:hover) ul li img {
    opacity: var(--uniopacityhidden);
}



/** NOT FOUND PAGE **/
body.error404 {
    --bgcolor: var(--truewhite);
}

body.error404 .nav_options ul li a {
    transition: opacity .35s ease;

}

body.error404 .nav_options ul li a:hover {
    opacity: var(--uniopacityhidden)!important;
}


.navop_notfound a::before {
    display: none!important;
}



/** CONTACT FORM **/
.contact-form {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    backdrop-filter: blur(15px);
    background-color: color-mix(in oklab, var(--offblack) 35%, var(--offblack) 35%);
    transition: background-color 1s ease, backdrop-filter .7s ease .3s;
}

.contact-form:not(.active) {
    pointer-events: none;
    background-color: rgba(188, 175, 166, 0);
    backdrop-filter: blur(0px);
    transition: background-color .7s ease .3s, backdrop-filter 1s ease;
}

.contact-form.active:has(form:not(:hover)) .close_cursor {
    display: block;
}

.contact-form:not(.active) .close_cursor {
    display: none!important;
}

/*
.contact-form .field > label {
    font-weight: 700;
    opacity: var(--uniopacityhidden);
}
    */

.contact-form form {
     position: absolute;
    bottom: var(--1un);
    background-color: var(--white);
    padding: var(--1un);
    width: calc(var(--singlecolumn) * 6 + var(--gutter) * 5);
    left: 50vw;
    transform: translateX(-50%);
    box-sizing: border-box;
    transition: bottom .65s ease .1s, opacity .1s ease;
    display: flex;
    flex-direction: column;
    gap: var(--1un);
    cursor: default;
}

.contact-form:not(.active) form {
    bottom: calc(100% * -1);
    opacity: 0;
    transition: bottom .75s ease, opacity .1s ease .75s;
}

.contact-form .status-error {
    color: red;
    margin-top: 3px;
}

.contact-form .field {
    display: flex;
    flex-direction: column;
}

.contact-form form > .field:first-child {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.contact-form input[type="text"], .contact-form .form-input, #liked_email_modal input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    background: none;
    margin: 0;
    padding: calc(var(--0un) / 3 * 2) var(--0un);
    box-shadow: none;
    background-color: none;
    border: 1px solid var(--grey);
    width: 100%;
    transition: all .35s ease;
    font-family: 'Courier New', Courier, monospace;
    z-index: 100;
    font-size: 1.15rem;
    letter-spacing: .02rem;
    line-height: 120%;
    box-sizing: border-box;
            margin-top: 3px;
}

.contact-form input[type="text"]::selection, .contact-form .form-input::selection {
    background-color: var(--grey);
    color: var(--white);
}

/*
.contact-form input[type="text"]:focus, .contact-form .form-input:focus {
    border-color: rgba(0, 0, 0, .2)
}
    */

.contact-form .field-field-choices-items {
display: grid;
margin-top: 3px;
    grid-template-columns: repeat(2, 1fr);
    column-count: 2;
    column-gap: var(--gutter);
    row-gap: 2px;
}

.contact-form .field-field-choices-items .field-choice {
    grid-column: span 1;
}

.contact-form button {
      -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    display: block;
    text-align: center;
    padding: var(--0un);
    box-sizing: border-box;
    border: 1px solid transparent;
    background-color: var(--grey);
    font-weight: 700;
    font-family: 'KMR', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    transition: background-color .35s ease, border .35s ease;
    color: var(--truewhite);
}

.contact-form button:hover {
    background-color: transparent;
    border: 1px solid var(--grey);
    color: var(--offblack);
}



/* Hide the default checkbox */
.field-choice input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Style the label with custom checkbox */
.field-choice label {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding-left: 1.5rem;
    user-select: none;
}

/* Create the custom checkbox box using ::before */
.field-choice label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.9rem;
    height: 0.9rem;
    border: 1px solid var(--grey);
    box-sizing: border-box;
    transition: all 0.2s ease;
    background-clip: content-box;
    padding: 1px;
}

/* When checkbox is checked - show inner square */
.field-choice input[type="radio"]:checked + label::before {
    background-color: var(--offblack);
}

.form-message.success {
    text-align: center;
}

.form-message.error {
    color: red;
}

/*
.contact-form:has(.form-message.success) {
    background-color: rgba(248, 247, 243, .9);
}
    */

#contact_form:has(.form-message.success) .field, #contact_form:has(.form-message.success) button {
    display: none;
}

.contact-form.active:has(.form-message.success) form {
    bottom: calc(50vh + 1rem);
    bottom: calc(50dvh + 1rem);
}

.contact-form:has(.form-message.success) form {
    background-color: transparent;
    color: var(--white);
    padding: 0;
}


/* ============================================
   CSS OPCIONAL - TRANSIÇÕES SUAVES DE IMAGENS
   ============================================ */

/* Loading state suave */
.projects_wrapper.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Opcional: Skeleton loading para imagens que ainda não carregaram */
body.archive-projetos .project_thumbnail figure {
    position: relative;
    /*
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    */
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.project_thumbnail figure img {
    position: relative;
    z-index: 1;
}

/* Remove o skeleton quando a imagem carregar */
.project_thumbnail figure img[src] {
    background: none;
}

/* ============================================
   ALTERNATIVA: Efeito de fade-in suave
   ============================================ */

/* Se preferir fade-in em vez de blur: */
/*
.project_thumbnail img.thumbnail-quality {
    opacity: 0.7;
    transition: opacity 0.5s ease;
}

.project_thumbnail img:not(.thumbnail-quality) {
    opacity: 1;
}
*/