body.bemavi-home-page,
body.page-home-2,
body.bemavi-emp-page {
    --bemavi-bg: #d0c9bd;
    --bemavi-sand: #c1b4a2;
    --bemavi-taupe: #b1a086;
    --bemavi-text: #50423f;
    --bemavi-muted: #6f5f47;
    --bemavi-dark: #413532;
    --bemavi-deep: #231b1a;
    --bemavi-cream: #ebe7e4;
    --bemavi-mobile-gutter: 6vw;
    --bemavi-mobile-footer-gutter: 13vw;
    background: #d0c9bd;
    color: #50423f;
}

body.page-home-2 .site-header,
body.page-home-2 .site-footer,
body.bemavi-home-page .bt-whatsbox:not(.bt-whatsbox-bemavi),
body.page-home-2 .bt-whatsbox:not(.bt-whatsbox-bemavi) {
    display: none !important;
}

body.bemavi-home-page .smooth-scroll-content,
body.page-home-2 .smooth-scroll-content {
    padding-top: 0;
    padding-bottom: 0;
}

body.bemavi-home-page .smooth-scroll-container,
body.page-home-2 .smooth-scroll-container {
    background: #d0c9bd;
}

@media only screen and (min-width: 1025px) {
    html:has(body.bemavi-home-page),
    html:has(body.page-home-2) {
        margin-top: 0 !important;
    }

    body.bemavi-home-page,
    body.page-home-2 {
        margin-top: 0 !important;
    }
}

body.bemavi-home-page .site-header.bemavi-site-header,
body.bemavi-home-page .site-header.bemavi-site-header.is-compact {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    height: 136px;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.bemavi-home-page .site-header.bemavi-site-header.is-hide,
body.bemavi-home-page.header-lock-visible .site-header.bemavi-site-header {
    transform: translateY(0) !important;
}

.bemavi-home {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    background: var(--bemavi-bg);
    color: var(--bemavi-text);
    font-family: var(--font-base);
    font-weight: 300;
}

.bemavi-home img {
    display: block;
}

.bemavi-text-mobile {
    display: none;
}

.bemavi-container {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
}

.bemavi-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    height: 136px;
    pointer-events: none;
}

/* Botão que abre o menu (canto superior direito) */
.bemavi-menu-trigger {
    position: fixed;
    top: 50px;
    right: 50px;
    z-index: 210;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bemavi-taupe);
    text-transform: uppercase;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 5.4px;
    cursor: pointer;
}

.bemavi-menu-trigger-label,
.bemavi-menu-trigger-icon {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.bemavi-menu-trigger-label--open,
.bemavi-menu-trigger-icon--open {
    opacity: 1;
    transform: translateX(0);
}

.bemavi-menu-trigger-label--close {
    position: absolute;
    right: 32px;
    opacity: 0;
    transform: translateX(10px);
}

.bemavi-menu-trigger-icon--close {
    position: absolute;
    right: 0;
    top: 26%;
    opacity: 0;
    transform: translate(10px, -50%);
}

.bemavi-menu-trigger.is-open .bemavi-menu-trigger-label--open,
.bemavi-menu-trigger.is-open .bemavi-menu-trigger-icon--open {
    opacity: 0;
    transform: translateX(-10px);
}

.bemavi-menu-trigger.is-open .bemavi-menu-trigger-label--close,
.bemavi-menu-trigger.is-open .bemavi-menu-trigger-icon--close {
    opacity: 1;
    transform: translateX(0);
}

.bemavi-menu-trigger-icon--open {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.bemavi-menu-trigger-icon--close {
    width: 15px;
    height: 15px;
    object-fit: contain;
}

/* Overlay full-screen do menu (com transição de abrir/fechar) */
.bemavi-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(46, 37, 35, 0.82);   /* marrom escuro sobre o blur — fundo visível, texto legível */
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    transition: opacity 0.55s var(--ease-animation, cubic-bezier(0.38, 0, 0.02, 1)), visibility 0.55s;
}

.bemavi-menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.bemavi-menu-overlay-inner {
    position: relative;
    min-height: 100%;
    width: min(1280px, calc(100% - 100px));
    margin: 0 auto;
    padding: 50px 0 64px;
    display: flex;
    flex-direction: column;
}

.bemavi-menu-nav {
    margin-top: 56px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.bemavi-menu-nav a {
    color: var(--bemavi-taupe);
    text-transform: uppercase;
    font-size: 16px;
    line-height: 58px;
    font-weight: 400;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s ease, transform 0.5s ease, color 0.3s, letter-spacing 0.3s;
}

.bemavi-menu-nav a:hover {
    color: var(--bemavi-cream);
    letter-spacing: 2px;
}

.bemavi-menu-overlay.is-open .bemavi-menu-nav a {
    opacity: 1;
    transform: none;
}

.bemavi-menu-overlay.is-open .bemavi-menu-nav a:nth-child(1) { transition-delay: 0.10s; }
.bemavi-menu-overlay.is-open .bemavi-menu-nav a:nth-child(2) { transition-delay: 0.16s; }
.bemavi-menu-overlay.is-open .bemavi-menu-nav a:nth-child(3) { transition-delay: 0.22s; }
.bemavi-menu-overlay.is-open .bemavi-menu-nav a:nth-child(4) { transition-delay: 0.28s; }
.bemavi-menu-overlay.is-open .bemavi-menu-nav a:nth-child(5) { transition-delay: 0.34s; }
.bemavi-menu-overlay.is-open .bemavi-menu-nav a:nth-child(6) { transition-delay: 0.40s; }
.bemavi-menu-overlay.is-open .bemavi-menu-nav a:nth-child(7) { transition-delay: 0.46s; }
.bemavi-menu-overlay.is-open .bemavi-menu-nav a:nth-child(8) { transition-delay: 0.52s; }
.bemavi-menu-overlay.is-open .bemavi-menu-nav a:nth-child(9) { transition-delay: 0.58s; }

.bemavi-menu-bottom {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 40px;
    padding-top: 60px;
}

.bemavi-menu-bottom .bemavi-menu-brand {
    width: 115px;
    height: auto;
}

.bemavi-menu-socials {
    display: flex;
    align-items: center;
    gap: 20px;
}

.bemavi-menu-socials a {
    display: inline-flex;
    transition: opacity 0.3s;
}

.bemavi-menu-socials a:hover {
    opacity: 0.7;
}

.bemavi-menu-socials img {
    display: block;
    width: auto;
    height: 18px;
    object-fit: contain;
}

.bemavi-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1490px;
    z-index: 0;
    /* Base sólida marrom: preenche a área na hora (sem flash branco). A imagem
       da "lente" entra por cima, em ::before, já decodificada. */
    background-color: var(--bemavi-deep);
    pointer-events: none;
    -webkit-mask-image: none;
    mask-image: none;
}

.bemavi-banner-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../img/bg-bemavi.jpg') center top / cover no-repeat;
    opacity: 1;
    transition: opacity 0.8s ease;
}

@media (max-width: 768px), (max-width: 1024px) and (orientation: portrait) {
    body.bemavi-home-page .bemavi-banner-bg::before {
        background-image: url('../img/bg-bemavi-mobile.webp');
    }
}

.bemavi-hero {
    position: relative;
    min-height: 890px;
    display: grid;
    place-items: center;
    isolation: isolate;
    z-index: 1;
    background: transparent;
}

.bemavi-hero-bg,
.bemavi-hero-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.bemavi-hero-bg {
    object-fit: cover;
    opacity: 0.7;
    transition: opacity 0.8s ease;
    filter: brightness(0.38) saturate(0.65);
    -webkit-mask-image: radial-gradient(ellipse 68% 61% at 50% 45%, #000 8%, rgba(0, 0, 0, 0.78) 54%, rgba(0, 0, 0, 0.10) 72%, transparent 82%);
    mask-image: radial-gradient(ellipse 68% 61% at 50% 45%, #000 8%, rgba(0, 0, 0, 0.78) 54%, rgba(0, 0, 0, 0.10) 72%, transparent 82%);
}

/* Overlay marrom claro SÓ sobre a imagem do banner — usa a MESMA máscara da imagem,
   então o veil marrom só aparece onde a foto aparece (não no fundo escuro ao redor).
   Fica acima da imagem e abaixo do conteúdo/setas, sem atrapalhar o resto.
   Ajuste a cor/opacidade no rgba() abaixo. */
.hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: rgba(110, 76, 52, 0.32);
    -webkit-mask-image: radial-gradient(ellipse 68% 61% at 50% 45%, #000 8%, rgba(0, 0, 0, 0.78) 54%, rgba(0, 0, 0, 0.10) 72%, transparent 82%);
    mask-image: radial-gradient(ellipse 68% 61% at 50% 45%, #000 8%, rgba(0, 0, 0, 0.78) 54%, rgba(0, 0, 0, 0.10) 72%, transparent 82%);
}

.bemavi-hero-shade {
    z-index: -1;
  
}

.bemavi-hero-content {
    position: relative;
    z-index: 2;
    width: min(1080px, calc(100% - 80px));
    margin-top: -22px;
    text-align: center;
    color: var(--bemavi-cream);
}

.bemavi-hero-logo {
    width: 450px;
    height: 52px;
    max-width: 62vw;
    object-fit: contain;
    margin: 0 auto 137px;
}

.bemavi-hero h1 {
    margin: 0 auto 74px;
    min-height: 102px;
    color: #d1cec9;
    text-transform: uppercase;
    font-size: 35px;
    line-height: 51px;
    font-weight: 300;
}

.bemavi-hero p {
    width: min(520px, 100%);
    margin: 0 auto;
    min-height: 48px;
    color: #d1cec9;
    font-size: 20px;
    line-height: 24px;
}

.hero-slide {
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: 0;
    transition: opacity 3s ease-in;
}

.hero-slide.is-active {
    opacity: 1;
    z-index: -1;
    transition: opacity 2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .bemavi-banner-bg::before,
    .bemavi-hero-bg { transition: none; }
}

.bemavi-hero-arrow {
    position: absolute;
    top: 48%;
    z-index: 4;
    width: 38px;
    height: 48px;
    display: grid;
    place-items: center;
    opacity: 0.7;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.35s ease;
}

.bemavi-hero-arrow:hover,
.bemavi-hero-arrow:focus-visible {
    opacity: 1;
}

.bemavi-hero-arrow img {
    width: 17px;
    height: 39px;
}

.bemavi-hero-arrow-prev img {
    transform: scaleX(-1);
}

.bemavi-hero-arrow-prev {
    left: 304px;
}

.bemavi-hero-arrow-next {
    right: 304px;
}

.bemavi-scroll {
    position: absolute;
    left: 50%;
    bottom: 100px;
    z-index: 4;
    width: 38px;
    height: 38px;
    transform: translateX(-50%);
}

.bemavi-scroll::before,
.bemavi-footer-top::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1.5px solid var(--bemavi-taupe);
    border-radius: 999px;
    transition: border-color 0.35s ease;
}

.bemavi-scroll span,
.bemavi-footer-top span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 13px;
    height: 13px;
    border-right: 1.5px solid var(--bemavi-taupe);
    border-bottom: 1.5px solid var(--bemavi-taupe);
    transform: translate(-50%, -62%) rotate(45deg);
    transition: border-color 0.35s ease;
}

.bemavi-scroll:hover::before,
.bemavi-scroll:focus-visible::before,
.bemavi-footer-top:hover::before,
.bemavi-footer-top:focus-visible::before {
    border-color: var(--bemavi-cream);
}

.bemavi-scroll:hover span,
.bemavi-scroll:focus-visible span,
.bemavi-footer-top:hover span,
.bemavi-footer-top:focus-visible span {
    border-color: var(--bemavi-cream);
}

.bemavi-projects {
    position: relative;
    overflow: visible;
    padding-bottom: 150px;
    z-index: 1;
    background: linear-gradient(180deg, transparent 0%, transparent 590px, #a38f81 594px, rgba(209, 206, 201, 0) 100%);
}

.bemavi-projects::before {
    content: none;
}

.bemavi-symbol-hero {
    position: absolute;
    top: -288px;
    left: -112px;
    width: 532px;
    height: 638px;
    max-width: none;
    object-fit: fill;
    z-index: 1;
    pointer-events: none;
}

.bemavi-intro {
    position: relative;
    z-index: 2;
    min-height: 350px;
    display: grid;
    place-items: center;
    text-align: center;
}

.bemavi-intro h2 {
    margin: 0 0 52px;
    color: var(--bemavi-taupe);
    text-transform: uppercase;
    font-size: 35px;
    line-height: 38px;
    font-weight: 300;
}

.bemavi-intro p {
    margin: 0;
    color: #75615c;
    font-size: 20px;
    line-height: 32px;
}

.bemavi-intro a {
    display: inline-block;
    margin-top: 30px;
    color: var(--bemavi-taupe);
    text-transform: uppercase;
    font-size: 20px;
    line-height: 32px;
    font-weight: 600;
}

.bemavi-rule {
    position: relative;
    z-index: 2;
    height: 2px;
    background: var(--bemavi-taupe);
    margin-bottom: 50px;
}

.bemavi-project-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

/* Carousel wrapper is inert on desktop/notebook — only activates on mobile. */
.bemavi-project-carousel {
    position: relative;
}

.bemavi-carousel-arrow {
    display: none;
}

.bemavi-project-empty,
.bemavi-blog-empty {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--bemavi-muted);
    text-align: center;
    font-size: 16px;
    line-height: 24px;
}

.bemavi-project-card {
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    min-width: 0;
    color: var(--bemavi-text);
}

.bemavi-project-card:hover,
.bemavi-project-card:focus-visible {
    color: var(--bemavi-text);
}

/* Apenas listagem: card sem link — mantém os efeitos de hover, mas sem cursor de link.
   (igual à listagem de empreendimentos: sem pointer-events: none) */
.bemavi-project-card.is-apenas-listagem {
    cursor: default;
}

.bemavi-project-status,
.bemavi-project-type,
.bemavi-blog-card span,
.bemavi-footer-nav a {
    text-transform: uppercase;
}

.bemavi-project-status {
    position: absolute;
    top: 12px;
    left: 24px;
    z-index: 2;
    color: var(--bemavi-text);
    font-size: 13px;
    line-height: 32px;
    transition: color 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

/* No hover o overlay escurece a imagem — o selo ("LANÇAMENTO") clareia p/ seguir legível. */
.bemavi-project-card:hover .bemavi-project-status,
.bemavi-project-card:focus-visible .bemavi-project-status {
    color: var(--bemavi-cream);
}

.bemavi-project-media {
    position: relative;
    display: block;
    aspect-ratio: 416 / 650;
    overflow: hidden;
    background: #b8afa3;
}

.bemavi-project-media::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 52%;
    background: linear-gradient(180deg, rgba(186, 174, 161, 0) 0%, rgba(186, 174, 161, 0.45) 100%);
    pointer-events: none;
}

.bemavi-project-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(35, 27, 26, 0.58);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

.bemavi-project-media picture {
    display: block;
    width: 100%;
    height: 100%;
}

.bemavi-project-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.bemavi-project-card:hover .bemavi-project-media::before,
.bemavi-project-card:focus-visible .bemavi-project-media::before {
    opacity: 1;
}

.bemavi-project-card:hover .bemavi-project-media img,
.bemavi-project-card:focus-visible .bemavi-project-media img {
    transform: scale(1.045);
    filter: saturate(0.88) contrast(0.94);
}

.bemavi-project-type {
    margin: 46px 0 6px 23px;
    color: var(--bemavi-muted);
    font-size: 13px;
    line-height: 32px;
    transition: transform 0.86s cubic-bezier(0.22, 1, 0.36, 1);
}

.bemavi-project-card strong {
    display: block;
    margin-left: 20px;
    color: var(--bemavi-text);
    text-transform: uppercase;
    font-size: 30px;
    line-height: 38px;
    font-weight: 300;
    transition: transform 0.86s cubic-bezier(0.22, 1, 0.36, 1);
}

.bemavi-project-card:hover .bemavi-project-type,
.bemavi-project-card:focus-visible .bemavi-project-type {
    transform: translateX(37px);
}

.bemavi-project-card:hover strong,
.bemavi-project-card:focus-visible strong {
    transform: translateX(40px);
}

.bemavi-project-details {
    position: relative;
    display: block;
    margin: 22px 0 0 40px;
    padding-left: 20px;
    min-height: 98px;
}

.bemavi-project-details span {
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 100%;
    background: var(--bemavi-taupe);
    transition:
        top 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.bemavi-project-details small {
    display: block;
    color: var(--bemavi-muted);
    text-transform: uppercase;
    font-size: 16px;
    line-height: 32px;
    font-weight: 300;
    transition: transform 0.86s cubic-bezier(0.22, 1, 0.36, 1);
}

.bemavi-project-card:hover .bemavi-project-details span,
.bemavi-project-card:focus-visible .bemavi-project-details span {
    top: -72px;
    height: calc(100% + 72px);
}

.bemavi-about {
    position: relative;
    min-height: 850px;
    padding: 0 0 188px;
    display: flex;
    align-items: flex-start;
    /* ruído sutil sobre o gradiente = dither, evita faixas (banding) em áreas lisas */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05' intercept='0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(180deg, rgba(209, 206, 201, 0) 0%, #a38f81 100%);
}

.bemavi-about-bg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 680px;
    object-fit: cover;
    opacity: 0.58;
}

.bemavi-about-card {
    position: relative;
    z-index: 2;
    min-height: 660px;
    padding: 78px 108px;
    display: grid;
    grid-template-columns: 1fr 412px;
    align-items: center;
    gap: 112px;
    color: var(--bemavi-cream);
    /* card opaco: gradiente próprio (sem transparência/backdrop-blur, que causavam faixas) + ruído sutil de dither */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.06' intercept='0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(116deg, #413532 0%, #5b4e48 100%);
}

.bemavi-about-symbol {
    width: 129px;
    margin-bottom: 150px;
}

.bemavi-about h2 {
    margin: 0;
    max-width: 330px;
    color: var(--bemavi-cream);
    text-transform: uppercase;
    font-size: 28px;
    line-height: 38px;
    font-weight: 300;
}

.bemavi-about-copy p {
    margin: 0 0 72px;
    color: var(--bemavi-cream);
    font-size: 16px;
    line-height: 23px;
}

.bemavi-button {
    --bemavi-button-bg: #3c302e;
    --bemavi-button-fill: #4b3d39;
    --bemavi-button-line: var(--bemavi-taupe);
    position: relative;
    display: inline-grid;
    place-items: center;
    min-width: 271px;
    min-height: 60px;
    padding: 18px 26px;
    overflow: visible;
    isolation: isolate;
    background-color: var(--bemavi-button-bg);
    background-image: linear-gradient(90deg, var(--bemavi-button-fill) 0%, var(--bemavi-button-fill) 100%);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 0 100%;
    text-align: center;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 500;
    transition:
        background-size 0.72s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.35s ease,
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.bemavi-button::after {
    content: "";
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    width: 1px;
    height: 0;
    background: var(--bemavi-button-line);
    opacity: 0.85;
    transform: translateY(-50%);
    transition: height 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
    pointer-events: none;
}

.bemavi-button:hover,
.bemavi-button:focus-visible {
    background-size: 100% 100%;
}

.bemavi-button:hover::after,
.bemavi-button:focus-visible::after {
    height: 100%;
}

.bemavi-button-dark {
    --bemavi-button-bg: #3c302e;
    --bemavi-button-fill: #4b3d39;
    --bemavi-button-line: var(--bemavi-taupe);
    color: var(--bemavi-taupe);
}

.bemavi-button-light {
    --bemavi-button-bg: var(--bemavi-taupe);
    --bemavi-button-fill: #cbbda8;
    --bemavi-button-line: #806e52;
    color: var(--bemavi-dark);
}

.bemavi-contact {
    position: relative;
    min-height: 642px;
    display: grid;
    align-items: center;
    overflow: visible;
    background: linear-gradient(180deg, #6e6056 0%, #312723 100%);
}

.bemavi-contact-inner {
    position: relative;
    z-index: 4;
    display: grid;
    justify-items: center;
}

.bemavi-contact-copy {
    width: min(570px, 100%);
    text-align: center;
}

.bemavi-contact h2 {
    margin: 0 0 42px;
    color: var(--bemavi-cream);
    text-transform: uppercase;
    font-size: 28px;
    line-height: 38px;
    font-weight: 300;
}

.bemavi-contact p {
    margin: 0 0 56px;
    color: var(--bemavi-taupe);
    font-size: 20px;
    line-height: 24px;
}

.bemavi-contact-woman-stage {
    position: absolute;
    right: 54px;
    top: -81px;
    width: 558px;
    height: calc(100% + 81px);
    max-width: none;
    z-index: 3;
    pointer-events: none;
}

.bemavi-contact-woman-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    background: var(--bemavi-taupe);
    -webkit-mask-image: url('../img/bemavi-home/symbol-hero.svg');
    mask-image: url('../img/bemavi-home/symbol-hero.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center 43%;
    mask-position: center 43%;
    -webkit-mask-size: 116% auto;
    mask-size: 116% auto;
    will-change: opacity, transform;
}

.bemavi-contact-woman-stage img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center top;
}

.bemavi-contact-pattern-frame {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0;
    -webkit-mask-image: url('../img/bemavi-home/symbol-hero.svg');
    mask-image: url('../img/bemavi-home/symbol-hero.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center 43%;
    mask-position: center 43%;
    -webkit-mask-size: 116% auto;
    mask-size: 116% auto;
    transform: translateX(calc(var(--anim-offset) * -1));
    will-change: opacity, transform;
}

.bemavi-contact-woman-pattern {
    left: 0;
    right: auto;
    width: 100%;
    z-index: 1;
    opacity: 1;
    object-position: center top;
    transform: translateX(var(--anim-offset));
    will-change: transform;
}

.bemavi-contact-woman {
    z-index: 1;
    opacity: 0;
    will-change: opacity;
}

.bemavi-contact-woman-stage.animated .bemavi-contact-pattern-frame {
    animation: bemaviContactSymbolReveal 1.55s 1 var(--ease-animation) 0.52s both,
        bemaviContactPatternFadeOut 0.85s 1 cubic-bezier(0.4, 0, 0.2, 1) 1.85s forwards;
}

.bemavi-contact-woman-stage.animated .bemavi-contact-woman-pattern {
    animation: bemaviContactPatternImageLock 1.55s 1 var(--ease-animation) 0.52s both;
}

.bemavi-contact-woman-stage.animated .bemavi-contact-woman {
    animation: bemaviContactWomanReveal 0.95s 1 cubic-bezier(0.4, 0, 0.2, 1) 1.7s both;
}

@keyframes bemaviContactSymbolReveal {
    0%,
    20% {
        opacity: 0;
        transform: translateX(calc(var(--anim-offset) * -1));
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bemaviContactPatternImageLock {
    0%,
    20% {
        transform: translateX(var(--anim-offset));
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes bemaviContactPatternFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes bemaviContactWomanReveal {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bemavi-contact-woman-stage::before,
    .bemavi-contact-pattern-frame,
    .bemavi-contact-woman-pattern,
    .bemavi-contact-woman {
        animation: none !important;
        transform: none !important;
        filter: none !important;
    }

    .bemavi-contact-pattern-frame,
    .bemavi-contact-woman-pattern {
        display: none;
    }

    .bemavi-contact-woman-stage.animated .bemavi-contact-woman,
    .bemavi-contact-woman {
        opacity: 1 !important;
    }
}

.bemavi-regions {
    padding: 88px 0 90px;
    background: linear-gradient(
        180deg,
        rgba(163, 143, 129, 0) 0,
        rgba(163, 143, 129, 0) 212px,
        rgba(163, 143, 129, 0.92) 212px,
        rgba(209, 206, 201, 0) 100%
    );
}

.bemavi-region-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: center;
    gap: 90px;
}

.bemavi-region-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 416px));
    gap: 16px;
}

.bemavi-region-card {
    position: relative;
    min-width: 0;
}

.bemavi-region-media {
    position: relative;
    display: block;
    aspect-ratio: 416 / 540;
    overflow: hidden;
    background: #4b403b;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.bemavi-region-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(41, 38, 35, 0) 45%, #292623 100%);
    mix-blend-mode: multiply;
}

.bemavi-region-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bemavi-region-media h3 {
    position: absolute;
    left: 48px;
    right: 32px;
    bottom: 22px;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    min-height: 88px;
    margin: 0;
    color: var(--bemavi-taupe);
    text-transform: uppercase;
    font-size: 38px;
    line-height: 44px;
    font-weight: 300;
    transition: transform 0.86s cubic-bezier(0.22, 1, 0.36, 1);
}

.bemavi-region-text {
    position: relative;
    display: block;
    margin: 50px 0 0 40px;
    padding-left: 30px;
    min-height: 217px;
}

.bemavi-region-text span {
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 100%;
    background: var(--bemavi-taupe);
    transition:
        top 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.bemavi-region-text p {
    margin: 0;
    color: var(--bemavi-text);
    font-size: 16px;
    line-height: 23px;
    transition: transform 0.86s cubic-bezier(0.22, 1, 0.36, 1);
}

.bemavi-region-card:hover .bemavi-region-text span,
.bemavi-region-card:focus-within .bemavi-region-text span {
    top: -160px;
    height: calc(100% + 160px);
}

.bemavi-region-card:hover .bemavi-region-media h3,
.bemavi-region-card:focus-within .bemavi-region-media h3 {
    transform: translateX(16px);
}

.bemavi-region-copy {
    transform: translateY(-46px);
}

.bemavi-region-copy h2 {
    margin: 0 0 68px;
    color: var(--bemavi-text);
    text-transform: uppercase;
    font-size: 28px;
    line-height: 38px;
    font-weight: 300;
}

.bemavi-blog {
    position: relative;
    padding: 40px 0 80px;
    background: var(--bemavi-bg);
}

.bemavi-blog::before {
    content: "";
    position: absolute;
    top: 172px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--bemavi-taupe);
}

.bemavi-blog-head {
    margin-bottom: 122px;
}

.bemavi-blog-head h2 {
    margin: 0;
    color: var(--bemavi-text);
    text-transform: uppercase;
    font-size: 28px;
    line-height: 38px;
    font-weight: 300;
}

.bemavi-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.bemavi-blog-card {
    position: relative;
    min-width: 0;
}

.bemavi-blog-media {
    position: relative;
    display: block;
    aspect-ratio: 416 / 330;
    overflow: hidden;
    background: #8d8074;
}

.bemavi-blog-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(35, 27, 26, 0.58);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

.bemavi-blog-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.bemavi-blog-card:hover .bemavi-blog-media::before,
.bemavi-blog-card:focus-within .bemavi-blog-media::before {
    opacity: 1;
}

.bemavi-blog-card:hover .bemavi-blog-media img,
.bemavi-blog-card:focus-within .bemavi-blog-media img {
    transform: scale(1.045);
    filter: saturate(0.88) contrast(0.94);
}

.bemavi-blog-card span {
    display: block;
    margin: 28px 0 44px 32px;
    color: var(--bemavi-taupe);
    font-size: 13px;
    line-height: 32px;
    transition: transform 0.86s cubic-bezier(0.22, 1, 0.36, 1);
}

.bemavi-blog-card h3 {
    margin: 0 30px 48px;
    min-height: 86px;
    color: var(--bemavi-text);
    font-size: 22px;
    line-height: 28px;
    font-weight: 300;
    transition: transform 0.86s cubic-bezier(0.22, 1, 0.36, 1);
}

.bemavi-read-more {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 30px;
    min-height: 51px;
    padding-left: 20px;
    color: var(--bemavi-muted);
    text-transform: uppercase;
    font-size: 16px;
    line-height: 32px;
    transition: transform 0.86s cubic-bezier(0.22, 1, 0.36, 1);
}

.bemavi-read-more::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 2px;
    background: var(--bemavi-taupe);
    transition:
        top 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.bemavi-blog-card:hover .bemavi-read-more::before,
.bemavi-blog-card:focus-within .bemavi-read-more::before {
    top: -16px;
    height: calc(100% + 16px);
}

/* "Veja todos os empreendimentos" abaixo do carrossel da home.
   Mesmas medidas do .regiao-emp-all (bemavi-regiao.css), replicadas aqui
   porque a home nao carrega o CSS da pagina de regiao. */
.bemavi-projects-all {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 90px auto 0;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--bemavi-text);
    color: var(--bemavi-text);
    text-align: center;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 1.6px;
    font-weight: 500;
    transition: opacity 0.4s ease;
}

.bemavi-projects-all:hover,
.bemavi-projects-all:focus-visible {
    opacity: 0.65;
}

.bemavi-all-posts {
    display: block;
    width: min(270px, 100%);
    margin: 90px auto 70px;
    padding-bottom: 18px;
    border-bottom: 2px solid var(--bemavi-text);
    color: var(--bemavi-text);
    text-align: center;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
}

.bemavi-newsletter {
    min-height: 140px;
    padding: 42px 50px;
    display: grid;
    grid-template-columns: 1fr 416px 207px;
    align-items: center;
    gap: 66px;
    background: var(--bemavi-sand);
}

.bemavi-newsletter label {
    color: #fff;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 34px;
    font-weight: 300;
}

.bemavi-newsletter input {
    width: 100%;
    height: 45px;
    border: 0;
    border-bottom: 2px solid #806e52;
    border-radius: 0;
    background: transparent;
    color: var(--bemavi-text);
    text-transform: uppercase;
    font-size: 14px;
    line-height: 24px;
    outline: none;
}

.bemavi-newsletter input::placeholder {
    color: var(--bemavi-text);
    opacity: 1;
}

.bemavi-newsletter button {
    min-height: 45px;
    padding: 12px 22px;
    min-width: 0;
    width: 100%;
    color: var(--bemavi-taupe);
    text-transform: uppercase;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 500;
}

.bemavi-footer {
    position: relative;
    padding: 58px 0 0;
    overflow: hidden;
    background: var(--bemavi-bg);
}

.bemavi-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: url('../img/bemavi-home/footer-texture.svg');
    background-repeat: no-repeat;
    background-position: center -360px;
    background-size: 2267px 1958px;
    opacity: 0.9;
}

.bemavi-footer-card {
    position: relative;
    z-index: 2;
    width: min(1280px, calc(100% - 48px));
    min-height: 720px;
    margin: 0 auto;
    padding: 58px 40px 42px;
    display: grid;
    justify-items: center;
    text-align: center;
    background: linear-gradient(180deg, var(--bemavi-dark) 0%, var(--bemavi-deep) 100%);
}

.bemavi-footer-top {
    position: relative;
    z-index: 3;
    width: 37px;
    height: 37px;
    margin: 0 auto 20px;
    display: block;
}

.bemavi-footer-top::before {
    border-color: var(--bemavi-text);
}

.bemavi-footer-top span {
    width: 12px;
    height: 12px;
    border-color: var(--bemavi-text);
    transform: translate(-50%, -36%) rotate(225deg);
}

.bemavi-footer-logo-link {
    display: inline-block;
    cursor: pointer;
    line-height: 0;
    margin-bottom: 48px;
}

.bemavi-footer-logo-link:hover,
.bemavi-footer-logo-link:focus-visible {
    opacity: .85;
}

.bemavi-footer-logo {
    width: 152px;
    height: 18px;
    object-fit: contain;
    display: block;
    margin-bottom: 0;
}

.bemavi-footer-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    margin-bottom: 46px;
}

.bemavi-footer-socials a,
.bemavi-footer-socials img {
    width: 20px;
    height: 20px;
}

.bemavi-footer-nav {
    display: grid;
    gap: 14px;
    margin-bottom: 56px;
}

.bemavi-footer-nav a {
    color: var(--bemavi-cream);
    font-size: 15px;
    line-height: 24px;
    transition: color 0.35s ease;
}

.bemavi-footer-nav a:hover,
.bemavi-footer-nav a:focus-visible {
    color: var(--bemavi-taupe);
}

.bemavi-footer-line {
    display: block;
    width: calc(100% + 80px);
    height: 2px;
    margin: 0 -40px 30px;
    background: var(--bemavi-taupe);
    transform: scaleX(0);
    transform-origin: center center;
    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.bemavi-footer-line.waypoint.animated {
    transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
    .bemavi-footer-line {
        transform: none;
        transition: none;
    }
}

.bemavi-footer-contact {
    width: min(800px, 100%);
    color: #5d4f4b;
}

.bemavi-footer-contact p {
    margin: 0 0 26px;
    font-size: 16px;
    line-height: 26px;
}

.bemavi-footer-contact small {
    text-transform: uppercase;
    font-size: 13px;
    line-height: 26px;
}

.bemavi-footer-texture {
    display: none;
}

.bemavi-floating {
    position: fixed;
    right: 77px;
    bottom: 48px;
    z-index: 20;
    width: 90px;
    height: 90px;
}

.bemavi-floating img {
    width: 100%;
    height: 100%;
}

body.bemavi-home-page .bemavi-floating,
body.page-home-2 .bemavi-floating,
body.bemavi-emp-page .bemavi-floating {
    display: none;
}

@keyframes bemaviWhatsFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes bemaviWhatsPulse {
    0% {
        transform: scale(0.92);
        opacity: 0.64;
    }

    70% {
        transform: scale(1.34);
        opacity: 0;
    }

    100% {
        transform: scale(1.34);
        opacity: 0;
    }
}

body.bemavi-home-page .bt-whatsbox-bemavi,
body.page-home-2 .bt-whatsbox-bemavi,
body.bemavi-emp-page .bt-whatsbox-bemavi {
    right: 24px;
    bottom: 24px;
    z-index: 1200;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(177, 160, 134, 0.38);
    background: #4b3c39;
    color: var(--bemavi-taupe);
    isolation: isolate;
    box-shadow: 0 24px 48px rgba(35, 27, 26, 0.26);
    animation: bemaviWhatsFloat 4.6s ease-in-out infinite;
    transition: transform .42s cubic-bezier(0.22, 1, 0.36, 1), opacity .28s ease, box-shadow .35s ease;
}

body.bemavi-home-page .bt-whatsbox-bemavi::before,
body.page-home-2 .bt-whatsbox-bemavi::before,
body.bemavi-emp-page .bt-whatsbox-bemavi::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 999px;
}

body.bemavi-home-page .bt-whatsbox-bemavi::after,
body.page-home-2 .bt-whatsbox-bemavi::after,
body.bemavi-emp-page .bt-whatsbox-bemavi::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 1.5px solid rgba(177, 160, 134, 0.42);
    transform: scale(0.92);
    opacity: 0;
    animation: bemaviWhatsPulse 2s ease-out infinite;
    pointer-events: none;
    will-change: transform, opacity;
}

body.bemavi-home-page .bt-whatsbox-bemavi i,
body.page-home-2 .bt-whatsbox-bemavi i,
body.bemavi-emp-page .bt-whatsbox-bemavi i {
    position: relative;
    z-index: 1;
    font-size: 24px;
}

body.bemavi-home-page .bt-whatsbox-bemavi:hover,
body.page-home-2 .bt-whatsbox-bemavi:hover,
body.bemavi-emp-page .bt-whatsbox-bemavi:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 28px 56px rgba(35, 27, 26, 0.34);
}

body.bemavi-home-page .bt-whatsbox-bemavi.is-hide,
body.bemavi-home-page .bt-whatsbox-bemavi.is-hide:hover,
body.page-home-2 .bt-whatsbox-bemavi.is-hide,
body.page-home-2 .bt-whatsbox-bemavi.is-hide:hover,
body.bemavi-emp-page .bt-whatsbox-bemavi.is-hide,
body.bemavi-emp-page .bt-whatsbox-bemavi.is-hide:hover {
    opacity: 0;
    transform: translateY(14px) scale(0.84);
    pointer-events: none;
}

html:has(.bemavi-menu-overlay.is-open) .bt-whatsbox-bemavi {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease;
}

body.bemavi-home-page .whatsbox-bemavi,
body.page-home-2 .whatsbox-bemavi,
body.bemavi-emp-page .whatsbox-bemavi {
    right: 24px;
    bottom: 24px;
    z-index: 1201;
    width: min(360px, calc(100vw - 32px));
    border: 1px solid rgba(177, 160, 134, 0.22);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(65, 53, 50, 0.98) 0%, rgba(35, 27, 26, 0.98) 100%);
    box-shadow: 0 34px 72px rgba(35, 27, 26, 0.36);
}

body.bemavi-home-page .whatsbox-bemavi .whatsbox-head,
body.page-home-2 .whatsbox-bemavi .whatsbox-head,
body.bemavi-emp-page .whatsbox-bemavi .whatsbox-head {
    padding: 20px 24px 14px;
    background: transparent;
    border-bottom: 1px solid rgba(177, 160, 134, 0.18);
    color: var(--bemavi-taupe);
    font-size: 18px;
    font-weight: 500;
}

body.bemavi-home-page .whatsbox-bemavi .whatsbox-head i,
body.page-home-2 .whatsbox-bemavi .whatsbox-head i,
body.bemavi-emp-page .whatsbox-bemavi .whatsbox-head i {
    margin-right: 8px;
    font-size: 18px;
}

body.bemavi-home-page .whatsbox-bemavi .bt-close-whatsbox,
body.page-home-2 .whatsbox-bemavi .bt-close-whatsbox,
body.bemavi-emp-page .whatsbox-bemavi .bt-close-whatsbox {
    color: var(--bemavi-taupe);
    opacity: 0.7;
}

body.bemavi-home-page .whatsbox-bemavi .whatsbox-body,
body.page-home-2 .whatsbox-bemavi .whatsbox-body,
body.bemavi-emp-page .whatsbox-bemavi .whatsbox-body {
    padding: 18px 24px 24px;
}

body.bemavi-home-page .whatsbox-bemavi .whatsbox-body p,
body.page-home-2 .whatsbox-bemavi .whatsbox-body p,
body.bemavi-emp-page .whatsbox-bemavi .whatsbox-body p {
    margin: 0 0 14px;
    color: rgba(235, 231, 228, 0.72);
    font-size: 14px;
    line-height: 22px;
}

body.bemavi-home-page .whatsbox-bemavi .whatsbox-body input,
body.bemavi-home-page .whatsbox-bemavi .whatsbox-body select,
body.page-home-2 .whatsbox-bemavi .whatsbox-body input,
body.page-home-2 .whatsbox-bemavi .whatsbox-body select,
body.bemavi-emp-page .whatsbox-bemavi .whatsbox-body input,
body.bemavi-emp-page .whatsbox-bemavi .whatsbox-body select {
    margin-top: 10px;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid rgba(177, 160, 134, 0.4);
    border-radius: 0;
    background: transparent;
    color: var(--bemavi-cream);
    font-size: 13px;
    line-height: 20px;
}

body.bemavi-home-page .whatsbox-bemavi .whatsbox-body input::placeholder,
body.page-home-2 .whatsbox-bemavi .whatsbox-body input::placeholder,
body.bemavi-emp-page .whatsbox-bemavi .whatsbox-body input::placeholder {
    color: rgba(177, 160, 134, 0.72);
    opacity: 1;
}

body.bemavi-home-page .whatsbox-bemavi .whatsbox-body input:focus,
body.bemavi-home-page .whatsbox-bemavi .whatsbox-body select:focus,
body.page-home-2 .whatsbox-bemavi .whatsbox-body input:focus,
body.page-home-2 .whatsbox-bemavi .whatsbox-body select:focus,
body.bemavi-emp-page .whatsbox-bemavi .whatsbox-body input:focus,
body.bemavi-emp-page .whatsbox-bemavi .whatsbox-body select:focus {
    border-color: var(--bemavi-cream);
}

/* Dropdown custom do whatsbox na variante escura (base em style.css).
   Substituiu o <select> nativo, cuja lista o sistema pintava com fundo branco
   e cujo posicionamento/seta nao eram controlaveis. */
.whatsbox-bemavi .whatsbox-select-trigger {
    margin-top: 10px;
    padding: 12px 28px 12px 0;
    border: 0;
    border-bottom: 1px solid rgba(177, 160, 134, 0.4);
    border-radius: 0;
    background: transparent;
    color: var(--bemavi-cream);
    font-size: 13px;
    line-height: 20px;
}

.whatsbox-bemavi .whatsbox-select-trigger:focus-visible {
    border-bottom-color: var(--bemavi-cream);
}

.whatsbox-bemavi .whatsbox-select-trigger::after {
    right: 6px;
    border-right-color: var(--bemavi-taupe);
    border-bottom-color: var(--bemavi-taupe);
}

.whatsbox-bemavi .whatsbox-select-label.is-placeholder {
    color: rgba(177, 160, 134, 0.72);
}

.whatsbox-bemavi .whatsbox-select-menu {
    border: 1px solid rgba(177, 160, 134, 0.22);
    border-radius: 14px;
    background: var(--bemavi-deep);
    box-shadow: 0 -18px 40px rgba(35, 27, 26, 0.5);
}

.whatsbox-bemavi .whatsbox-select-menu button {
    padding: 10px 16px;
    color: var(--bemavi-cream);
}

.whatsbox-bemavi .whatsbox-select-menu button:hover,
.whatsbox-bemavi .whatsbox-select-menu button:focus-visible {
    background: rgba(177, 160, 134, 0.16);
}

.whatsbox-bemavi .whatsbox-select-menu button[aria-selected="true"] {
    color: var(--bemavi-taupe);
}

body.bemavi-home-page .whatsbox-bemavi .btn-whatsbox,
body.page-home-2 .whatsbox-bemavi .btn-whatsbox,
body.bemavi-emp-page .whatsbox-bemavi .btn-whatsbox {
    margin-top: 20px;
    min-height: 48px;
    border-radius: 0;
    background: var(--bemavi-taupe);
    color: var(--bemavi-deep);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.08em;
    font-weight: 600;
    --btn-base-fill: var(--bemavi-taupe);
    --btn-hover-fill: #ebe7e4;
    --btn-hover-color: var(--bemavi-deep);
    --btn-hover-border: #ebe7e4;
}

body.bemavi-home-page .whatsbox-bemavi .btn-whatsbox i,
body.page-home-2 .whatsbox-bemavi .btn-whatsbox i,
body.bemavi-emp-page .whatsbox-bemavi .btn-whatsbox i {
    margin-right: 8px;
}

/* Mobile: celulares (<=768) OU tablets em pe (<=1024 em retrato) */
@media (max-width: 768px), (max-width: 1024px) and (orientation: portrait) {
    body.bemavi-home-page .bt-whatsbox-bemavi,
    body.page-home-2 .bt-whatsbox-bemavi,
    body.bemavi-emp-page .bt-whatsbox-bemavi {
        right: 16px;
        bottom: 16px;
        width: 46px;
        height: 46px;
    }

    body.bemavi-home-page .bt-whatsbox-bemavi::after,
    body.page-home-2 .bt-whatsbox-bemavi::after,
    body.bemavi-emp-page .bt-whatsbox-bemavi::after {
        inset: -3px;
        border-width: 1.25px;
    }

    body.bemavi-home-page .bt-whatsbox-bemavi i,
    body.page-home-2 .bt-whatsbox-bemavi i,
    body.bemavi-emp-page .bt-whatsbox-bemavi i {
        font-size: 20px;
    }

    body.bemavi-home-page .whatsbox-bemavi,
    body.page-home-2 .whatsbox-bemavi,
    body.bemavi-emp-page .whatsbox-bemavi {
        right: 16px;
        bottom: 16px;
        width: calc(100vw - 32px);
        /* Caixa full-width: origem ao centro para abrir alinhada com a tela
           (o padrao "right bottom" fazia a animacao puxar para a direita). */
        transform-origin: center bottom;
    }
}

@media (max-width: 1440px) {
    .bemavi-hero-arrow-prev {
        left: 64px;
    }

    .bemavi-hero-arrow-next {
        right: 64px;
    }

    .bemavi-symbol-hero {
        top: -184px;
        left: -72px;
        width: 340px;
        height: 408px;
    }
.bemavi-region-copy {
    transform: translateY(-70px);
}

.bemavi-region-copy h2 {
    margin: 0 0 48px;
    font-size: 22px;
    line-height: 32px;
}

.bemavi-region-copy .bemavi-button {
    margin-top: -20px;
}

    .bemavi-contact-woman-stage {
        right: 0;
        top: -66px;
        width: 472px;
        height: calc(100% + 66px);
    }

    .bemavi-footer-texture {
        display: none;
    }

    .bemavi-footer::before {
        background-position: center -318px;
        background-size: 1495px 1291px;
        opacity: 0.82;
    }

    /* Notebook (1181–1440px): conteúdo centralizado com mais margem lateral
       e ritmo vertical reduzido — fica mais próximo do equilíbrio do desktop. */
    .bemavi-container,
    .bemavi-footer-card {
        width: min(1120px, calc(100% - 8vw));
    }

    .bemavi-projects {
        padding-bottom: 104px;
    }

    .bemavi-intro {
        min-height: 280px;
    }

    .bemavi-about {
        min-height: 700px;
        padding-bottom: 120px;
    }

    .bemavi-contact {
        min-height: 540px;
    }

    .bemavi-regions {
        padding: 68px 0 70px;
    }

    .bemavi-blog-head {
        margin-bottom: 74px;
    }

    .bemavi-all-posts {
        margin: 60px auto 52px;
    }
}

@media (max-width: 1180px) {
    .bemavi-container,
    .bemavi-footer-card {
        width: min(100% - 40px, 960px);
    }

    .bemavi-project-grid,
    .bemavi-blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
    }

    .bemavi-about-card {
        grid-template-columns: 1fr;
        gap: 56px;
        padding: 70px;
    }

    .bemavi-about-symbol {
        margin-bottom: 60px;
    }

    .bemavi-about h2,
    .bemavi-about-copy {
        max-width: 720px;
    }

    .bemavi-contact-inner {
        justify-items: start;
    }

    .bemavi-contact-copy {
        width: min(520px, 58%);
        text-align: left;
    }

    .bemavi-region-layout {
        grid-template-columns: 1fr;
        gap: 64px;
    }

    .bemavi-region-copy {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: end;
        gap: 30px;
        transform: none;
    }

    .bemavi-newsletter {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .bemavi-newsletter input {
        max-width: 520px;
    }

    .bemavi-newsletter button {
        width: 207px;
    }
}

/* ==========================================================================
   MOBILE BASE (<=767px) — regras COMPARTILHADAS entre TODAS as páginas Bemavi.
   bemavi-home.css é carregado em todas as páginas (contato/blog/regiao/etc.),
   então este bloco permanece como estava — não mexer para não regredir as
   páginas internas. A reestruturação da HOME fica no bloco seguinte, escopado
   em body.bemavi-home-page.
   ========================================================================== */
/* Mobile: celulares (<=768) OU tablets em pe (<=1024 em retrato) */
@media (max-width: 768px), (max-width: 1024px) and (orientation: portrait) {
    body.bemavi-home-page,
    body.page-home-2,
    body.bemavi-emp-page {
        --bemavi-mobile-gutter: 6vw;
        --bemavi-mobile-footer-gutter: 13vw;
        --bemavi-menu-panel-width: min(330px, calc(100vw - 96px));
        --bemavi-menu-content-indent: clamp(48px, 16.5vw, 90px);
    }

    .bemavi-container,
    .bemavi-footer-card {
        width: calc(100% - var(--bemavi-mobile-gutter) * 2);
    }

    .bemavi-footer-texture {
        display: none;
    }

    .bemavi-footer::before {
        background-position: center -96px;
        background-size: 1120px 967px;
        opacity: 0.52;
    }

    .bemavi-header {
        height: 98px;
    }

    .bemavi-header-logo {
        top: 34px;
        width: 190px;
        max-width: 52vw;
    }

    /* Padrão único em todas as telas mobile: rótulo "MENU" + ícone (igual à home) */
    /* Posição do trigger "MENU" padronizada em TODAS as telas pelo padrão da
       home: topo 30px e direita 6vw (--m-pad da home = --bemavi-mobile-gutter). */
    .bemavi-menu-trigger {
        top: 30px;
        right: var(--bemavi-mobile-gutter, 6vw);
        gap: 12px;
        font-size: 14px;
        letter-spacing: 0.28em;
    }

    /* Menu agora é full-width (como o Figma): o FECHAR fica fixo no canto
       superior direito da tela, não mais alinhado à "caixa" de 330px. */
    body.bemavi-home-page .bemavi-menu-trigger.is-open,
    body.page-home-2 .bemavi-menu-trigger.is-open,
    body.bemavi-emp-page .bemavi-menu-trigger.is-open {
        right: 24px;
    }

    .bemavi-menu-trigger-icon--open {
        width: 34px;
        height: 34px;
    }

    .bemavi-menu-trigger-icon--close {
        width: 14px;
        height: 14px;
    }

    .bemavi-menu-overlay-inner {
        width: 100%;
        min-height: calc(100% - 64px);
        padding: 32px 0 48px;
    }

    .bemavi-menu-nav {
        /* Desce mais os itens (começam ~128px do topo, como no Figma). */
        margin-top: clamp(80px, 24.6vw, 120px);
        padding-left: var(--bemavi-menu-content-indent);
    }

    .bemavi-menu-nav a {
        /* Mais respiro entre os itens (Figma: line-height 66 / fonte 22). */
        line-height: min(66px, 12.22vw);
        font-size: min(22px, 4.07vw);
    }

    /* Logo + redes maiores e centralizados no rodapé do menu (como o Figma). */
    .bemavi-menu-bottom {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: min(44px, 11vw);
        padding-left: 0;
        padding-top: 64px;
    }

    .bemavi-menu-bottom .bemavi-menu-brand {
        width: min(130px, 28vw);
    }

    .bemavi-menu-socials {
        gap: min(26px, 6.5vw);
    }

    .bemavi-menu-socials img {
        height: min(24px, 6vw);
    }

    .bemavi-hero {
        min-height: 720px;
        align-items: center;
    }

    .bemavi-hero-content {
        width: calc(100% - 36px);
        margin-top: -18px;
    }

    .bemavi-hero-logo {
        width: 240px;
        max-width: 70vw;
        margin-bottom: 86px;
    }

    .bemavi-hero h1 {
        margin-bottom: 42px;
        font-size: 28px;
        line-height: 39px;
    }

    .bemavi-hero p {
        font-size: 16px;
        line-height: 24px;
    }

    .bemavi-hero-arrow {
        display: none;
    }

    .bemavi-scroll {
        bottom: 54px;
    }

    .bemavi-symbol-hero {
        top: -120px;
        left: -96px;
        width: 310px;
        height: 372px;
        opacity: 0.55;
    }

    .bemavi-intro {
        min-height: 360px;
        padding: 58px 0;
    }

    .bemavi-intro h2 {
        margin-bottom: 34px;
        font-size: 28px;
        line-height: 36px;
    }

    .bemavi-intro p,
    .bemavi-intro a {
        font-size: 16px;
        line-height: 26px;
    }

    .bemavi-rule {
        margin-bottom: 32px;
    }

    .bemavi-project-grid,
    .bemavi-blog-grid,
    .bemavi-region-cards {
        grid-template-columns: 1fr;
    }

    .bemavi-projects {
        padding-bottom: 86px;
    }

    .bemavi-project-type {
        margin-top: 28px;
    }

    .bemavi-project-card strong {
        font-size: 26px;
        line-height: 34px;
    }

    .bemavi-project-details {
        margin-left: 24px;
    }

    .bemavi-project-card:hover .bemavi-project-type,
    .bemavi-project-card:focus-visible .bemavi-project-type {
        transform: translateX(21px);
    }

    .bemavi-project-card:hover strong,
    .bemavi-project-card:focus-visible strong {
        transform: translateX(24px);
    }

    .bemavi-about {
        min-height: auto;
        padding-bottom: 80px;
    }

    .bemavi-about-bg {
        height: 100%;
    }

    .bemavi-about-card {
        min-height: auto;
        padding: 46px 24px;
        gap: 42px;
    }

    .bemavi-about-symbol {
        width: 96px;
        margin-bottom: 42px;
    }

    .bemavi-about h2,
    .bemavi-contact h2,
    .bemavi-region-copy h2,
    .bemavi-blog-head h2 {
        font-size: 24px;
        line-height: 34px;
    }

    .bemavi-about-copy p {
        margin-bottom: 34px;
    }

    .bemavi-button {
        min-width: 100%;
    }

    .bemavi-button::after {
        left: calc(100% + 10px);
    }

    .bemavi-contact {
        min-height: 760px;
        align-items: start;
        padding-top: 72px;
    }

    .bemavi-contact-copy {
        width: 100%;
        text-align: center;
    }

    .bemavi-contact p {
        font-size: 16px;
        line-height: 24px;
    }

    .bemavi-contact-woman-stage {
        right: 50%;
        top: auto;
        bottom: 0;
        width: min(410px, 78vw);
        height: auto;
        aspect-ratio: 558 / 723;
        max-width: none;
        transform: translateX(50%);
    }

    .bemavi-contact-woman-stage.animated {
        opacity: 0.72;
    }

    .bemavi-regions {
        padding: 64px 0;
        background: linear-gradient(
            180deg,
            rgba(163, 143, 129, 0) 0,
            rgba(163, 143, 129, 0) 120px,
            rgba(163, 143, 129, 0.9) 120px,
            rgba(209, 206, 201, 0) 100%
        );
    }

    .bemavi-region-layout {
        gap: 48px;
    }

    .bemavi-region-media h3 {
        left: 28px;
        min-height: 76px;
        font-size: 30px;
        line-height: 38px;
    }

    .bemavi-region-text {
        margin: 30px 0 0 22px;
        padding-left: 20px;
        min-height: 150px;
    }

    .bemavi-region-card:hover .bemavi-region-text span,
    .bemavi-region-card:focus-within .bemavi-region-text span {
        top: -128px;
        height: calc(100% + 128px);
    }

    .bemavi-region-copy {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .bemavi-region-copy h2 {
        margin-bottom: 0;
    }

    .bemavi-blog {
        padding-top: 56px;
    }

    .bemavi-blog::before {
        top: 142px;
    }

    .bemavi-blog-head {
        margin-bottom: 72px;
    }

    .bemavi-blog-card h3 {
        min-height: auto;
    }

    .bemavi-all-posts {
        margin: 58px auto;
    }

    .bemavi-newsletter {
        padding: 32px 22px;
    }

    .bemavi-newsletter label {
        font-size: 18px;
        line-height: 28px;
    }

    .bemavi-newsletter button {
        width: 100%;
    }

    .bemavi-footer {
        padding-top: 58px;
    }

    .bemavi-footer-card {
        min-height: auto;
        padding: 56px 24px 38px;
    }

    .bemavi-footer-nav {
        margin-bottom: 52px;
    }

    .bemavi-floating {
        right: 18px;
        bottom: 18px;
        width: 64px;
        height: 64px;
    }
}

/* ==========================================================================
   MOBILE HOME (<=767px) — reestrutura fiel ao Figma, ESCOPADA na home.
   Tudo aqui usa o prefixo body.bemavi-home-page para sobrepor o bloco base
   acima apenas na home (sem afetar contato/blog/regiao/etc.).
   --m-pad: gutter padrão (Figma 32/540 ≈ 6%). Sliders: gap só à esquerda e
   sangram até a borda direita. Fontes menores e consistentes.
   ========================================================================== */
/* Mobile: celulares (<=768) OU tablets em pe (<=1024 em retrato) */
@media (max-width: 768px), (max-width: 1024px) and (orientation: portrait) {
    body.bemavi-home-page {
        --m-pad: var(--bemavi-mobile-gutter);
        --m-curitiba-bg-extra: 430px;
        --m-region-gradient-start: 340px;
    }

    body.bemavi-home-page .bemavi-container {
        width: calc(100% - var(--m-pad) * 2);
    }

    body.bemavi-home-page .bemavi-text-desktop {
        display: none;
    }

    body.bemavi-home-page .bemavi-text-mobile {
        display: inline;
    }

    /* ---- Header / menu (rótulo "menu" visível só na home) ---------------- */
    body.bemavi-home-page .bemavi-menu-trigger {
        top: 30px;
        right: var(--m-pad);
        gap: 12px;
        font-size: 14px;
        letter-spacing: 0.28em;
    }

    /* ---- Hero — proporções do Figma (hero ~960px):
       logo ~28%  ->  symbol  ->  texto ~61%  ->  subtítulo ~75%  ->  seta ~91% */
    body.bemavi-home-page .bemavi-hero {
        min-height: 86vh;
        align-items: start;
    }

    body.bemavi-home-page .bemavi-hero-bg {
        opacity: 0.5;
        filter: brightness(0.32) saturate(0.62);
        -webkit-mask-image:
            linear-gradient(90deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.42) 18%, rgba(0, 0, 0, 0.86) 42%, rgba(0, 0, 0, 0.86) 58%, rgba(0, 0, 0, 0.42) 82%, rgba(0, 0, 0, 0.02) 100%),
            linear-gradient(180deg, #000 0%, #000 66%, rgba(0, 0, 0, 0.42) 84%, rgba(0, 0, 0, 0.10) 100%);
        mask-image:
            linear-gradient(90deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.42) 18%, rgba(0, 0, 0, 0.86) 42%, rgba(0, 0, 0, 0.86) 58%, rgba(0, 0, 0, 0.42) 82%, rgba(0, 0, 0, 0.02) 100%),
            linear-gradient(180deg, #000 0%, #000 66%, rgba(0, 0, 0, 0.42) 84%, rgba(0, 0, 0, 0.10) 100%);
        -webkit-mask-composite: source-in;
        mask-composite: intersect;
    }

    /* overlay marrom acompanha a máscara da imagem no mobile */
    body.bemavi-home-page .hero-slide::after {
        -webkit-mask-image:
            linear-gradient(90deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.42) 18%, rgba(0, 0, 0, 0.86) 42%, rgba(0, 0, 0, 0.86) 58%, rgba(0, 0, 0, 0.42) 82%, rgba(0, 0, 0, 0.02) 100%),
            linear-gradient(180deg, #000 0%, #000 66%, rgba(0, 0, 0, 0.42) 84%, rgba(0, 0, 0, 0.10) 100%);
        mask-image:
            linear-gradient(90deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.42) 18%, rgba(0, 0, 0, 0.86) 42%, rgba(0, 0, 0, 0.86) 58%, rgba(0, 0, 0, 0.42) 82%, rgba(0, 0, 0, 0.02) 100%),
            linear-gradient(180deg, #000 0%, #000 66%, rgba(0, 0, 0, 0.42) 84%, rgba(0, 0, 0, 0.10) 100%);
        -webkit-mask-composite: source-in;
        mask-composite: intersect;
    }

    /* "fundo de Curitiba" = a imagem escura INTEIRA (sem gradiente nela).
       Diminuída p/ terminar no topo dos cards -> os cards vazam pra baixo dela. */
    body.bemavi-home-page .bemavi-banner-bg {
        height: calc(86vh + var(--m-curitiba-bg-extra));
    }

    /* o gradiente fica no FUNDO DA TELA, começando logo depois do banner/Curitiba,
       atrás dos cards que vazam (claro -> taupe em direção ao "Sobre"). */
    body.bemavi-home-page .bemavi-banner-bg::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 760px;
        background: linear-gradient(180deg, #a38f81  0%, var(--bemavi-bg) 100%);
        pointer-events: none;
    }

    body.bemavi-home-page .bemavi-hero-content {
        width: calc(100% - var(--m-pad) * 2);
        margin-top: 24vh;       /* logo desce p/ ~28% do hero */
    }

    body.bemavi-home-page .bemavi-hero-logo {
        width: min(210px, 50vw);
        max-width: none;
        height: auto;
        margin-bottom: 26vh;    /* vão grande do symbol; joga o texto p/ ~61% */
    }

    body.bemavi-home-page .bemavi-hero h1 {
        max-width: 220px;
        margin: 0 auto 6vh;     /* respiro entre texto e subtítulo */
        min-height: 0;
        font-size: 14px;
        line-height: 19px;
        letter-spacing: 0.28em;
    }

    body.bemavi-home-page .bemavi-hero p {
        width: min(230px, 100%);
        min-height: 0;
        font-size: 14px;
        line-height: 19px;
    }

    body.bemavi-home-page .bemavi-scroll {
        bottom: 3vh;            /* seta bem na base do banner (~91%) */
        width: 32px;
         height: 32px;
    }

    /* symbol entre o logo e o texto; o texto cai sobre a parte de baixo dele */
    body.bemavi-home-page .bemavi-symbol-hero {
        top: -55vh;
        left: -14vw;
        width: 44vw;
        height: auto;
        opacity: 0.4;
    }

    /* ---- Intro (mais respiro entre título, texto e CTA) ------------------ */
    body.bemavi-home-page .bemavi-intro {
        min-height: auto;
        padding: 24px 0 38px;
        
    }

    body.bemavi-home-page .bemavi-intro h2 {
        margin-bottom: 32px;
        font-size: 25px;
        line-height: 28px;
        max-width: 220px;
        margin-left: auto;
        margin-right: auto;
    }

    body.bemavi-home-page .bemavi-intro p {
        font-size: 15px;
        line-height: 24px;
            max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }

    body.bemavi-home-page .bemavi-intro a {
        margin-top: 36px;
        font-size: 18px;
        line-height: 24px;
    }

    /* ---- Títulos de seção (tamanho único e consistente) ----------------- */
    body.bemavi-home-page .bemavi-about h2,
    body.bemavi-home-page .bemavi-contact h2,
    body.bemavi-home-page .bemavi-region-copy h2,
    body.bemavi-home-page .bemavi-blog-head h2 {
        font-size: 21px;
        line-height: 28px;
    }

    /* ---- Corpo de texto (tamanho único) --------------------------------- */
    body.bemavi-home-page .bemavi-about-copy p,
    body.bemavi-home-page .bemavi-contact p,
    body.bemavi-home-page .bemavi-region-text p {
        font-size: 15px;
        line-height: 22px;
    }

    /* ---- Botões — todos iguais ao "quero receber" (altura + largura) ------- */
    body.bemavi-home-page .bemavi-button {
        min-width: 0;
        width: min(290px, 54vw);
        min-height: 45px;
        padding: 12px 22px;
        font-size: 13px;
    }

    /* ---- Projetos: carrossel (gap só à esquerda, sangra à direita) ------- */
    /* SEM fundo aqui: a imagem escura (.bemavi-banner-bg) aparece inteira atrás
       do intro e o gradiente do fundo da tela (.bemavi-banner-bg::after) aparece
       atrás dos cards que vazam. */
    body.bemavi-home-page .bemavi-projects {
        padding-bottom: 52px;
        background: none;
    }

    body.bemavi-home-page .bemavi-rule {
        margin: 0 calc(var(--m-pad) * -1) 22px;
    }

    body.bemavi-home-page .bemavi-project-carousel {
        margin-right: calc(var(--m-pad) * -1);
    }

    body.bemavi-home-page .bemavi-project-grid {
        display: flex;
        grid-template-columns: none;
        gap: 3.5vw;
        padding-right: var(--m-pad);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body.bemavi-home-page .bemavi-project-grid::-webkit-scrollbar {
        display: none;
    }

    body.bemavi-home-page .bemavi-project-card {
        flex: 0 0 55vw;
        scroll-snap-align: start;
    }

    body.bemavi-home-page .bemavi-project-status {
        font-size: 11px;
    }

    body.bemavi-home-page .bemavi-project-type {
        margin: 22px 0 4px 20px;
        font-size: 11px;
        line-height: 20px;
        letter-spacing: 0.14em;
    }

    body.bemavi-home-page .bemavi-project-card strong {
        margin-left: 18px;
        font-size: 18px;
        line-height: 23px;
    }

    body.bemavi-home-page .bemavi-project-details {
        margin: 14px 0 0 30px;
        padding-left: 16px;
        min-height: auto;
    }

    body.bemavi-home-page .bemavi-project-details small {
        font-size: 12px;
        line-height: 20px;
    }

    /* setas redondas, centradas verticalmente na imagem do card */
    body.bemavi-home-page .bemavi-carousel-arrow {
        display: grid;
        place-items: center;
        position: absolute;
        top: 43vw; /* metade da altura da imagem: 55vw * 650/416 / 2 */
        z-index: 5;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 1px solid rgba(177, 160, 134, 0.45);
        border-radius: 50%;
        cursor: pointer;
        background: rgba(60, 48, 46, 0.6);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        transform: translateY(-50%);
        transition: opacity 0.3s ease;
    }

    body.bemavi-home-page .bemavi-carousel-arrow-prev {
        left: 1vw;
    }

    body.bemavi-home-page .bemavi-carousel-arrow-next {
        right: 2vw;
    }

    body.bemavi-home-page .bemavi-carousel-arrow span {
        width: 9px;
        height: 9px;
        border-right: 1.5px solid var(--bemavi-taupe);
        border-bottom: 1.5px solid var(--bemavi-taupe);
    }

    body.bemavi-home-page .bemavi-carousel-arrow-prev span {
        transform: translateX(2px) rotate(135deg);
    }

    body.bemavi-home-page .bemavi-carousel-arrow-next span {
        transform: translateX(-2px) rotate(-45deg);
    }

    body.bemavi-home-page .bemavi-carousel-arrow.is-disabled {
        opacity: 0;
        pointer-events: none;
    }

    /* ---- Sobre — cartão único centralizado ------------------------------ */
    body.bemavi-home-page .bemavi-about {
        padding-bottom: 64px;
    }

    body.bemavi-home-page .bemavi-about-card {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        padding: 50px 7vw;
        gap: 30px;
    }

    body.bemavi-home-page .bemavi-about-symbol {
        width: 64px;
        margin: 0 auto 24px;
    }

    body.bemavi-home-page .bemavi-about h2 {
        max-width: 320px;
        margin: 30px auto;
    }

    body.bemavi-home-page .bemavi-about-copy p {
        width: min(100%, 240px);
        margin: 0 auto 50px;
        font-size: 15px;
    }

    body.bemavi-home-page .bemavi-about-copy .bemavi-button {
        width: min(290px, 54vw);
    }

    /* ---- Contato — foto abaixo do texto, centralizada ------------------- */
    body.bemavi-home-page .bemavi-contact {
        display: block;
        min-height: auto;
        padding: 96px 0 0;
        overflow: hidden;
    }

    body.bemavi-home-page .bemavi-contact-inner {
        justify-items: center;
    }

    body.bemavi-home-page .bemavi-contact-copy {
        width: 100%;
        text-align: center;
    }

    body.bemavi-home-page .bemavi-contact p {
        width: min(61vw, 317px);
        margin-left: auto;
        margin-right: auto;
        font-size: 15px;
    }

    body.bemavi-home-page .bemavi-contact-woman-stage {
        position: relative;
        right: auto;
        left: auto;
        top: auto;
        bottom: auto;
        width: min(300px, 64vw);
        height: auto;
        aspect-ratio: 312 / 405;
        max-width: none;
        margin: 44px auto 0;
        transform: none;
        opacity: 1;
    }

    body.bemavi-home-page .bemavi-contact-woman-stage.animated {
        opacity: 1;
    }

    /* ---- Regiões — gap maior à esquerda, imagens sangram à direita ------- */
    /* início do taupe alinhado mais perto do meio da imagem de Curitiba. */
    body.bemavi-home-page .bemavi-regions {
        padding: 0 0 60px;
        background: linear-gradient(
            180deg,
            rgba(163, 143, 129, 0) 0,
            rgba(163, 143, 129, 0) var(--m-region-gradient-start),
            rgba(163, 143, 129, 0.9) var(--m-region-gradient-start),
            rgba(209, 206, 201, 0) 100%
        );
    }

    /* gap só à esquerda = igual ao footer (13vw); sangra até a borda direita.
       width + margin-left somam 100% (sem margin-right negativo, p/ não ficar
       "over-constrained" e o browser não recentralizar). Vale p/ título,
       cards, textos e botão "conheça a região" (todos filhos do layout). */
    body.bemavi-home-page .bemavi-region-layout {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 30px;
        width: calc(100% - 13vw);
        margin-left: 13vw;
        margin-right: 0;
    }

    /* dissolve o container para reordenar: título acima, botão abaixo */
    body.bemavi-home-page .bemavi-region-copy {
        display: contents;
    }

    body.bemavi-home-page .bemavi-region-copy h2 {
        order: -1;
        max-width: 230px;
        margin: 0;
        padding-bottom: 22px;
        padding-top: 50px;
    }

    body.bemavi-home-page .bemavi-region-cards {
        order: 0;
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        gap: 42px;
    }

    body.bemavi-home-page .bemavi-region-copy .bemavi-button {
        order: 1;
        margin-left: 18px;   /* início do botão alinhado à linha vertical do texto */
        margin-top: 34px;    /* mais respiro do texto de Balneário até o botão */
    }

    body.bemavi-home-page .bemavi-region-media {
        aspect-ratio: 476 / 270;
    }

    body.bemavi-home-page .bemavi-region-media h3 {
        left: 22px;
        right: 22px;
        bottom: 16px;
        min-height: auto;
        font-size: 22px;
        line-height: 26px;
    }

    body.bemavi-home-page .bemavi-region-text {
        margin: 22px 0 0 18px;
        padding-left: 18px;
        padding-right: 12vw;   /* texto não vaza p/ a borda (só a imagem sangra) */
        min-height: auto;
    }

    body.bemavi-home-page .bemavi-region-card:hover .bemavi-region-text span,
    body.bemavi-home-page .bemavi-region-card:focus-within .bemavi-region-text span {
        top: -90px;
        height: calc(100% + 90px);
    }

    /* ---- Blog — carrossel (gap só à esquerda, sangra à direita) ---------- */
    body.bemavi-home-page .bemavi-blog {
        padding: 64px 0 28px;       /* + gap de cima, - gap até o footer */
    }

    body.bemavi-home-page .bemavi-blog::before {
        top: 150px;                 /* linha mais pra baixo, com mais respiro */
    }

    body.bemavi-home-page .bemavi-blog-head {
        margin-bottom: 56px;        /* mais gap até a linha/cards */
        margin-left: calc(7vw + 18px); /* título alinhado à linha vertical das regiões */
    }

    body.bemavi-home-page .bemavi-blog-grid {
        display: flex;
        grid-template-columns: none;
        gap: 3.5vw;
        margin-right: calc(var(--m-pad) * -1);
        padding-right: var(--m-pad);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body.bemavi-home-page .bemavi-blog-grid::-webkit-scrollbar {
        display: none;
    }

    body.bemavi-home-page .bemavi-blog-card {
        flex: 0 0 80vw;
        scroll-snap-align: start;
    }

    /* gradiente permanente p/ legibilidade da categoria sobre a imagem */
    body.bemavi-home-page .bemavi-blog-media::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(180deg, rgba(41, 38, 35, 0) 48%, rgba(41, 38, 35, 0.82) 100%);
        pointer-events: none;
    }

    body.bemavi-home-page .bemavi-blog-card span {
        position: absolute;
        top: calc(80vw * 0.7955 - 46px); /* base da imagem (350/440) */
        left: 22px;
        margin: 0;
        z-index: 2;
        font-size: 12px;
        line-height: 22px;
        letter-spacing: 0.18em;
    }

    body.bemavi-home-page .bemavi-blog-card h3 {
        margin: 20px 22px 24px;
        max-width: 232px;
        min-height: auto;
        font-size: 17px;
        line-height: 24px;
    }

    body.bemavi-home-page .bemavi-read-more {
        margin-left: 22px;
        font-size: 13px;
    }

    body.bemavi-home-page .bemavi-all-posts {
        margin: 42px auto;
        margin-bottom: 78px;
        font-size: 13px;
    }

    /* Mantido visivel no mobile (a regiao esconde o equivalente): na home o
       carrossel mostra um card por vez, entao o atalho e mais util aqui. */
    body.bemavi-home-page .bemavi-projects-all {
        margin-top: 42px;
        padding-bottom: 12px;
        font-size: 13px;
        letter-spacing: 1.3px;
    }

    /* ---- Newsletter — cartão areia (mais largo que o rodapé) ------------- */
    body.bemavi-home-page .bemavi-newsletter {
        display: flex;
        flex-direction: column;
        align-items: center;
        grid-template-columns: none;
        text-align: center;
        gap: 28px;
        min-height: 0;
        padding: 44px 7vw;
    }

    body.bemavi-home-page .bemavi-newsletter label {
        max-width: 170px;
        font-size: 17px;
        line-height: 25px;
    }

    body.bemavi-home-page .bemavi-newsletter input {
        max-width: 100%;
        text-align: center;
        font-size: 13px;
    }

    body.bemavi-home-page .bemavi-newsletter button {
        width: min(290px, 54vw);
        margin-top: 14px;   /* mais respiro do "informe o e-mail" até o botão */
    }

    /* ---- Rodapé — padrão mobile compartilhado nas páginas Bemavi ---------- */
    body.bemavi-home-page .bemavi-footer-card,
    body.page-home-2 .bemavi-footer-card,
    body.bemavi-emp-page .bemavi-footer-card {
        width: calc(100% - var(--bemavi-mobile-footer-gutter) * 2);
        min-height: auto;
        padding: 48px 24px 34px;
    }

    body.bemavi-home-page .bemavi-footer-socials,
    body.page-home-2 .bemavi-footer-socials,
    body.bemavi-emp-page .bemavi-footer-socials {
        gap: 22px;
        margin-bottom: 36px;
    }

    body.bemavi-home-page .bemavi-footer-nav,
    body.page-home-2 .bemavi-footer-nav,
    body.bemavi-emp-page .bemavi-footer-nav {
        gap: 0;
        margin-bottom: 40px;
    }

    body.bemavi-home-page .bemavi-footer-nav a,
    body.page-home-2 .bemavi-footer-nav a,
    body.bemavi-emp-page .bemavi-footer-nav a {
        font-size: 15px;
        line-height: 42px;
        text-transform: uppercase;
    }

    body.bemavi-home-page .bemavi-footer-contact p,
    body.page-home-2 .bemavi-footer-contact p,
    body.bemavi-emp-page .bemavi-footer-contact p {
        font-size: 13px;
        line-height: 24px;
    }

    body.bemavi-home-page .bemavi-footer-address-lines,
    body.bemavi-home-page .bemavi-footer-phone {
        display: block;
    }

    body.bemavi-home-page .bemavi-footer-phone-separator {
        display: none;
    }

    body.bemavi-home-page .bemavi-footer-top,
    body.page-home-2 .bemavi-footer-top,
    body.bemavi-emp-page .bemavi-footer-top {
        height: 32px;
        width: 32px;
    }

    /* menos espaço entre newsletter e footer */
    body.bemavi-home-page .bemavi-footer,
    body.page-home-2 .bemavi-footer,
    body.bemavi-emp-page .bemavi-footer {
        padding-top: 36px;
    }

    /* logo do rodapé menor */
    body.bemavi-home-page .bemavi-footer-logo,
    body.page-home-2 .bemavi-footer-logo,
    body.bemavi-emp-page .bemavi-footer-logo {
        width: 120px;
    }

    /* a linha do rodapé deve ir de borda a borda do card (não vazar além dele):
       o card tem 24px de padding lateral no mobile, então +48px / -24px. */
    body.bemavi-home-page .bemavi-footer-line,
    body.page-home-2 .bemavi-footer-line,
    body.bemavi-emp-page .bemavi-footer-line {
        width: calc(100% + 48px);
        margin-left: -24px;
        margin-right: -24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bemavi-project-media,
    .bemavi-project-media img,
    .bemavi-project-media::before,
    .bemavi-project-type,
    .bemavi-project-card strong,
    .bemavi-project-details span,
    .bemavi-project-details small,
    .bemavi-region-media h3,
    .bemavi-region-text span,
    .bemavi-region-text p {
        transition: none !important;
    }

}

/* Menu overlay: telas curtas (notebooks ~640-750px de altura) */
@media (min-width: 768px) and (max-height: 760px) {
    .bemavi-menu-overlay-inner {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .bemavi-menu-nav {
        margin-top: 20px;
    }

    .bemavi-menu-nav a {
        line-height: 50px;
    }

    .bemavi-menu-bottom {
        padding-top: 24px;
    }
}

/* ==========================================================================
   TABLET EM PE (769-1024 retrato) — ajustes finos sobre o layout mobile.
   O carrossel de celular (cards em vw) crescia demais a 1024; aqui os cards
   ganham um tamanho fixo, proprio de tablet. Celular (<=768) fica intacto.
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    body.bemavi-home-page .bemavi-project-card { flex-basis: 300px; }
    body.bemavi-home-page .bemavi-blog-card    { flex-basis: 460px; }
}