/* Cor institucional (marrom padrão do layout) */
.text-marrom {
    color: #89623E;
}
.bg-marrom{
    background-color: #89623E;
}
/* ============================================
   NAVBAR (menu hamburguer)
   ============================================ */
.nav-cyrela {
    background-color: #89623E;
    padding-top: 12px;
    padding-bottom: 12px;
}

.nav-cyrela .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}

.nav-cyrela .navbar-brand img {
    height: 30px;
    width: auto;
}

.nav-cyrela .navbar-nav {
    align-items: center;
}

.nav-cyrela .navbar-nav .nav-link {
    color: #fff;
    opacity: 1;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 14px;
    transition: color .2s ease;
}

.nav-cyrela .navbar-nav .nav-link:hover,
.nav-cyrela .navbar-nav .nav-link:focus {
    color: #fff;
}

.nav-cyrela .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
    padding: 4px 10px;
}

.nav-cyrela .navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}

/* deslocamento das âncoras por causa do menu fixo (sticky) */
section[id] {
    scroll-margin-top: 64px;
}

@font-face {
    font-family: 'TT Norms';
    src: url('fonts/TTNorms-Light.eot');
    src: url('fonts/TTNorms-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/TTNorms-Light.woff2') format('woff2'),
        url('fonts/TTNorms-Light.woff') format('woff'),
        url('fonts/TTNorms-Light.ttf') format('truetype'),
        url('fonts/TTNorms-Light.svg#TTNorms-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Norms Pro';
    src: url('fonts/TTNormsPro-Bd.eot');
    src: url('fonts/TTNormsPro-Bd.eot?#iefix') format('embedded-opentype'),
        url('fonts/TTNormsPro-Bd.woff2') format('woff2'),
        url('fonts/TTNormsPro-Bd.woff') format('woff'),
        url('fonts/TTNormsPro-Bd.ttf') format('truetype'),
        url('fonts/TTNormsPro-Bd.svg#TTNormsPro-Bd') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Norms Pro';
    src: url('fonts/TTNormsPro-Md.eot');
    src: url('fonts/TTNormsPro-Md.eot?#iefix') format('embedded-opentype'),
        url('fonts/TTNormsPro-Md.woff2') format('woff2'),
        url('fonts/TTNormsPro-Md.woff') format('woff'),
        url('fonts/TTNormsPro-Md.ttf') format('truetype'),
        url('fonts/TTNormsPro-Md.svg#TTNormsPro-Md') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Norms Pro';
    src: url('fonts/TTNormsPro-Rg.eot');
    src: url('fonts/TTNormsPro-Rg.eot?#iefix') format('embedded-opentype'),
        url('fonts/TTNormsPro-Rg.woff2') format('woff2'),
        url('fonts/TTNormsPro-Rg.woff') format('woff'),
        url('fonts/TTNormsPro-Rg.ttf') format('truetype'),
        url('fonts/TTNormsPro-Rg.svg#TTNormsPro-Rg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



/* ============================================
   BASE
   ============================================ */
html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'TT Norms Pro', Arial, sans-serif;
    color: #1a1a1a;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    padding-top: 54px; /* espaço para o menu fixo */
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   HERO (section 01)
   ============================================ */
.hero {
    padding: 0;
}

.hero .container,
.hero .row,
.hero [class*="col-"] {
    padding: 0;
    margin: 0;
    max-width: 100%;
}

.hero img {
    width: 100%;
    height: auto;
}

/* ============================================
   CONTATO (section 02)
   ============================================ */
.contato {
    background: url('../img/contatobg.png') center center / cover no-repeat;
    padding: 40px 20px 50px;
    color: #fff;
}

.contato-header {
    text-align: center;
    padding: 14px 16px;
    /* margin-bottom: 28px; */
}

.contato-header h2 {
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.contato-form .form-field {
    margin-bottom: 22px;
}

.contato-form label {
    display: block;
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.contato-form input {
    display: block;
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #fff;
    color: #fff;
    font-size: 14px;
    padding: 6px 0;
    outline: none;
    border-radius: 0;
}

.contato-form input:focus {
    border-bottom-color: #7a9ea3;
}

.contato-form input:-webkit-autofill {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 30px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
}

.form-actions {
    margin-top: 28px;
    text-align: center;
}

.btn-enviar {
    display: inline-block;
    background-color: #7a9ea3;
    color: #fff;
    border: 0;
    padding: 12px 32px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: background-color .2s ease;
}

.btn-enviar:hover,
.btn-enviar:focus {
    background-color: #5f858a;
    outline: none;
}

/* ============================================
   CIDADE JARDIM (section 03)
   ============================================ */
.cidade-jardim {
    background-color: #e8dfd3;
    color: #3d332b;
    padding: 0 0 48px;
}

.cj-topbar {
    background-color: #89623E;
    text-align: center;
    padding: 28px 20px;
    margin-bottom: 32px;
}

.cj-logo {
    display: inline-block;
    max-width: 160px;
  
    height: auto;
}

.cidade-jardim > .container-fluid {
    padding-left: 24px;
    padding-right: 24px;
}
 

.cj-title {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 1.6;
    margin: 0 0 20px;
}

.cj-subtitle {
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 2.5px;
    margin: 0 0 28px;
}

.cj-subtitle strong {
    font-weight: 700;
}

.cj-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
}

.cj-list li {
    display: flex;
    align-items: flex-start;
    font-size: 15px;
    letter-spacing: 0.8px;
    line-height: 1.5;
    margin-bottom: 14px;
}

.cj-list li::before {
    content: "";
    flex: 0 0 auto;
    width: 28px;
    height: 14px;
    margin-right: 14px;
    margin-top: 2px;
    background: url('../img/bullet.png') center / contain no-repeat;
}

.cj-galeria {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
    margin-bottom: 28px;
}

.cj-galeria a,
.cj-galeria-desk a {
    display: block;
    line-height: 0;
    overflow: hidden;
    border-radius: 6px;
    cursor: pointer;
}

.cj-galeria img,
.cj-galeria-desk img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.cj-galeria a:hover img,
.cj-galeria-desk a:hover img {
    transform: scale(1.15);
}

/* galeria em grid só aparece no desktop */
.cj-galeria-desk {
    display: none;
}

.cj-cta {
    text-align: center;
}

.btn-cj {
    display: inline-block;
    background-color: #7a9ea3;
    color: #fff;
    padding: 14px 40px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-decoration: none;
    transition: background-color .2s ease;
}

.btn-cj:hover,
.btn-cj:focus {
    background-color: #5f858a;
    color: #fff;
    text-decoration: none;
    outline: none;
}

/* ============================================
   CONCEITO (section 04) — slick carousel
   ============================================ */
.conceito {
    background-color: #fff;
    padding: 40px 0 32px;
    border-top: 1px dashed #c9b8a3;
}

.conceito-title {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 2.5px;
    line-height: 1.8;
    color: #3d332b;
    text-transform: uppercase;
}

.conceito-slider {
    margin: 0;
    position: relative;
}

.conceito-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #3d332b;
    border: 1px solid rgba(61, 51, 43, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    transition: background .2s ease, color .2s ease;
}

.conceito-prev {
    left: 12px;
}

.conceito-next {
    right: 12px;
}

.conceito-arrow:hover,
.conceito-arrow:focus {
    background: #7a9ea3;
    color: #fff;
    outline: none;
}

.conceito-arrow::before {
    display: none;
}

.conceito-arrow.slick-disabled {
    opacity: 0.4;
    cursor: default;
}

.conceito-slide {
    padding: 0 6px;
}

.conceito-card {
    position: relative;
    overflow: hidden;
}

.conceito-img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
}

.conceito-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    padding: 24px 20px 40px;
    color: #fff;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.65) 100%);
}

/* Grupo ícone + título, centralizado verticalmente no card */
.conceito-overlay-head {
    margin: auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.conceito-icon {
    width: 40px;
    height: auto;
    margin-bottom: 16px;
    filter: brightness(0) invert(1);
}

.conceito-itens {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
}

.conceito-itens li {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.85;
    letter-spacing: 0.4px;
    color: #fff;
}

.conceito-nome {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin: 0 0 16px;
    color: #fff;
}

.conceito-desc {
    font-size: 11px;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.4px;
    margin: 0;
    color: #fff;
}

/* ============================================
   VIVER OU INVESTIR (section 05)
   ============================================ */
.vi {
    background: url('../img/casal.png') left top / cover no-repeat;
    color: #fff;
    padding: 44px 24px 56px;
}

.vi-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #fff;
    margin: 0 0 24px;
}

/* Toggle animado */
.vi-toggle {
    position: relative;
    display: inline-flex;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    padding: 4px;
    margin: 0 auto 24px;
    overflow: hidden;
}

.vi-toggle-indicator {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    z-index: 0;
}

.vi-toggle[data-active="investir"] .vi-toggle-indicator {
    transform: translateX(100%);
}

.vi-toggle-btn {
    position: relative;
    z-index: 1;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    padding: 10px 26px;
    cursor: pointer;
    transition: color .3s ease;
}

.vi-toggle-btn.is-active {
    color: #fff;
}

.vi-toggle-btn:focus {
    outline: none;
}

/* Box com acordeons */
.vi-box {
    position: relative;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    padding: 4px 20px;
    text-align: left;
    color: #fff;
    overflow: hidden;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.vi-panel {
    display: none;
}

.vi-panel.is-active {
    display: block;
}

/* Acordeon */
.vi-acc {
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.vi-acc:last-child {
    border-bottom: 0;
}

.vi-acc-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: transparent;
    border: 0;
    color: #fff;
    text-align: left;
    padding: 16px 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    line-height: 1.35;
}

.vi-acc-head:focus {
    outline: none;
}

.vi-acc-icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s ease, background .2s ease;
}

.vi-acc.is-open .vi-acc-icon {
    transform: rotate(180deg);
}

.vi-acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

.vi-acc.is-open .vi-acc-body {
    max-height: 400px;
}

.vi-acc-body p {
    margin: 0;
    padding: 0 0 16px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    color: #f5f0ea;
}

/* ============================================
   AIRBNB-FRIENDLY (após viver ou investir)
   ============================================ */
.airbnb {
    background-color: #e6ddd0;
    padding: 40px 20px;
}

.airbnb-panel {
    max-width: 1100px;
     
    background-color: #f4efe8;
    border: 1px solid rgba(137, 98, 62, 0.15);
    
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: center;
}

.airbnb-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.airbnb-logo {
    width: 66px;
    height: auto;
}

.airbnb-brand-title {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
    color: #000;
}

.airbnb-left-sub {
    font-size: 14px;
    font-weight: 700;
    color: #5b5048;
    margin: 12px 0 0;
}

.airbnb-heading {
    font-size: 15px;
    font-weight: 700;
    color: #6b6058;
    margin: 0 0 12px;
}

.airbnb-text {
    font-size: 15px;
    line-height: 1.6;
    color: #6b6058;
    margin: 0 0 14px;
}

.airbnb-note {
    font-size: 10px;
    line-height: 1.5;
    color: #9a8f84;
    margin: 0 0 20px;
}

.airbnb-cta {
    margin-top: 4px;
}

/* ============================================
   MAPA (section 06)
   ============================================ */
.mapa {
    position: relative;
    background-image: url('../img/mapa.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% bottom;
    color: #fff;
    padding: 44px 24px 40px;
    transition: background-position .5s ease;
    touch-action: pan-y;
}

.mapa::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 36, 71, 0.65) 0%, rgba(14, 36, 71, 0.15) 45%, rgba(14, 36, 71, 0) 100%);
    pointer-events: none;
    z-index: 0;
}

.mapa > .container-fluid {
    position: relative;
    z-index: 1;
}

.mapa-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.mapa-head-text {
    flex: 1 1 auto;
    min-width: 0;
}

.mapa-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    letter-spacing: 1.5px;
    color: #fff;
    margin: 0 0 8px;
}

.mapa-bullet {
    width: 26px;
    height: auto;
    display: inline-block;
}

.mapa-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #fff;
    margin: 0 0 12px;
}

.mapa-desc {
    /* font-size: 12px; */
    line-height: 1.6;
    color: #ffffff;
    margin: 0;
    max-width: 240px;
}

.mapa-nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 4px;
    padding-right: 14px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    margin-top: 32px;
    background: transparent;
}

.mapa-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: 0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background .2s ease, color .2s ease;
}

.mapa-arrow.is-active {
    background: rgba(255, 255, 255, 0.9);
    color: #0e2447;
}

.mapa-arrow:hover:not(.is-active),
.mapa-arrow:focus:not(.is-active) {
    background: rgba(255, 255, 255, 0.18);
    outline: none;
}

.mapa-cta {
    text-align: center;
    margin-top: 300px;
    padding: 0 32px;
}

.mapa-cta .btn-cj {
    display: inline-block;
    width: auto;
    white-space: nowrap;
    padding: 14px 32px;
    font-size: 12px;
    background-color: rgba(122, 158, 163, 0.85);
}

.mapa-cta .btn-cj:hover,
.mapa-cta .btn-cj:focus {
    background-color: rgba(95, 133, 138, 0.95);
}

/* ============================================
   COMODIDADE (section 07) — galeria sincronizada
   ============================================ */
.comod {
    background-color: #e8dfd3;
    color: #3d332b;
    padding: 40px 24px;
}

.comod-container {
    max-width: 1160px;
    margin: 0 auto;
}

.comod-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* ----- texto dinâmico (esquerda) ----- */
.comod-info {
    position: relative;
}

.comod-panels {
    position: relative;
    height: 200px; /* JS ajusta pela altura do painel ativo */
    transition: height .35s ease;
}

.comod-panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .4s ease, transform .4s ease;
    pointer-events: none;
}

.comod-panel.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.comod-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0 0 20px;
}

.comod-list {
    list-style: disc;
    padding-left: 18px;
    margin: 0;
}

.comod-list li {
    font-size: 13px;
    line-height: 2;
    color: #3d332b;
}

/* setas prev/next */
.comod-nav {
    display: flex;
    gap: 12px;
    margin-top: 8px;
     visibility: hidden;
}

@media (max-width: 800px){
    .comod-nav{
        visibility: hidden;
    
    }
}

.comod-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(122, 110, 90, 0.5);
    background: transparent;
    color: #7a6e5a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.comod-arrow:hover,
.comod-arrow:focus {
    background: #89623E;
    border-color: #89623E;
    color: #fff;
    outline: none;
}

/* ----- galeria acordeon (direita) ----- */
.comod-accordion {
    display: flex;
    gap: 12px;
    height: 340px;
}

.comod-acc-item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    border-radius: 16px;
    cursor: pointer;
    transition: flex-grow .5s ease;
}

.comod-acc-item.is-active {
    flex-grow: 3.4;
}

.comod-acc-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter .4s ease;
}

/* imagens não-ativas: escurecidas com ícone */
.comod-acc-item:not(.is-active) img {
    filter: brightness(0.5);
}

.comod-acc-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    color: rgba(255, 255, 255, 0.92);
    opacity: 1;
    transition: opacity .3s ease;
    pointer-events: none;
}

.comod-acc-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.comod-acc-item.is-active .comod-acc-icon {
    opacity: 0;
}

/* CTA */
.comod-cta {
    margin-top: 32px;
    text-align: center;
}

.comod-btn {
    display: inline-block;
    background-color: rgba(122, 158, 163, 0.85);
}

.comod-btn:hover,
.comod-btn:focus {
    background-color: rgba(95, 133, 138, 0.95);
}

/* mobile: acordeon vira carrossel (uma imagem por vez) */
@media (max-width: 991.98px) {
    .comod-grid {
        gap: 14px;
    }

    .comod-accordion.slick-initialized {
        display: block;
        height: auto;
    }

    .comod-accordion .comod-acc-item {
        height: 180px;
        border-radius: 200px;
    }

    .comod-accordion .slick-dots {
        position: static;
        margin-top: 14px;
    }

    .comod-accordion .slick-dots li button:before {
        font-size: 8px;
        color: #89623E;
        opacity: 0.4;
    }

    .comod-accordion .slick-dots li.slick-active button:before {
        color: #89623E;
        opacity: 1;
    }
}

/* ============================================
   RJZ CYRELA (section 08)
   ============================================ */
.rjz {
    background-color: #000;
    color: #fff;
    padding: 44px 24px 40px;
}

.rjz-logo-img {
    display: block;
    max-width: 130px;
    height: auto;
    margin: 0 0 22px;
}

.rjz-desc {
    font-size: 12px;
    line-height: 1.7;
    color: #e5e5e5;
    margin: 0 0 34px;
    text-align: left;
}

.rjz-projetos-title {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 2.5px;
    text-align: center;
    color: #e5e5e5;
    margin: 0 0 20px;
}

/* imagem completa dos empreendimentos aparece só no desktop */
.rjz-projetos-desk {
    display: none;
}

/* Galeria de empreendimentos (carrossel — uma por vez) */
.galeriacyrela {
    margin: 0;
}

.galeriacyrela-slide {
    padding: 0 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.galeriacyrela .slick-track {
    display: flex;
    align-items: flex-start;
}

.galeriacyrela .slick-slide {
    height: auto;
}

.galeriacyrela-slide img {
    width: auto;
    max-width: 200px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
}

/* legenda (nome + linha) — troca junto com o slide */
.galeriacyrela-cap {
    text-align: center;
    margin-top: 18px;
}

.galeriacyrela-cap h4 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #fff;
    margin: 0 0 6px;
}

.galeriacyrela-cap span {
    display: block;
    font-size: 12px;
    letter-spacing: 1.5px;
    color: #e5e5e5;
}

.galeriacyrela .slick-dots {
    position: static;
    margin-top: 16px;
}

.galeriacyrela .slick-dots li button:before {
    font-size: 8px;
    color: #fff;
    opacity: 0.4;
}

.galeriacyrela .slick-dots li.slick-active button:before {
    color: #fff;
    opacity: 1;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    background: url('../img/bg-footer.png') center center / cover no-repeat;
    color: #fff;
    padding: 18px 20px;
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.footer-logo {
    max-width: 120px;
    height: auto;
    display: block;
}

.footer-credit {
    font-size: 10px;
    letter-spacing: 2px;
    color: #fff;
    text-transform: uppercase;
}

.footer-credit strong {
    font-weight: 700;
}

/* ============================================
   MOBILE ONLY (< 768px)
   ============================================ */
@media (max-width: 767.98px) {
    .hero img {
        width: 100%;
    }
}



input::placeholder{

    color:#fff;
    font-size: 12px;



}

/* ============================================
   DESKTOP (>= 992px) — layout específico
   ============================================ */
@media (min-width: 992px) {

    /* ----- CONTATO ----- */
    .contato {
        background-image: url('../img/contatobgdek.png');
    }

    .contato .container {
        max-width: 1140px;
    }

    /* formulário em linha: 3 campos + botão, cada ~col-md-3 */
    .contato-form {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-end;
        gap: 24px;
    }

    .contato-form .form-field {
        flex: 1 1 25%;
        margin-bottom: 0;
    }

    .contato-form .form-actions {
        flex: 1 1 25%;
        margin-top: 0;
    }

    .contato-form .btn-enviar {
        width: 100%;
    }

    /* ----- CIDADE JARDIM (mais que um bairro) ----- */
    .cidade-jardim .col-11 {
        max-width: 980px;
    }

    /* lista de bullets em duas colunas */
    .cj-list {
        column-count: 2;
        column-gap: 60px;
        width: 100%;
    }

    .cj-list li {
        break-inside: avoid;
    }

    /* no desktop, mostra o grid 4 colunas */
    .cj-galeria-desk {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        width: 100%;
        margin-bottom: 40px;
    }

    .cj-galeria-desk img {
        width: 100%;
        height: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        display: block;
    }

    /* ----- CONCEITO (lifestyle experience) ----- */
    .conceito .container-fluid {
        max-width: 1160px;
        margin: 0 auto;
    }

    .conceito-slide {
        padding: 0 10px;
    }

    /* ----- VIVER OU INVESTIR ----- */
    .vi {
        min-height: 600px;
        
        display: flex;
        align-items: center;
        background-image: url('../img/casalbg-desk.png');
                background-position: 0rem -8rem !important;
    }

    .vi .container-fluid {
        width: 100%;
        max-width: 1160px;
        margin: 0 auto;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    /* duas colunas: título+toggle | acordeons */
    .vi-col {
        display: flex;
        align-items: flex-start;
        gap: 56px;
        text-align: left;
    }

    .vi-head {
        flex: 0 0 36%;
        max-width: 36%;
        padding-top: 8px;
    }

    .vi-title {
        font-size: 26px;
        line-height: 1.15;
        margin-bottom: 24px;
    }

    .vi-head .vi-toggle {
        margin: 0;
    }

    /* remove o painel translúcido — cada card é branco */
    .vi-box {
        flex: 1 1 64%;
        background: transparent;
        border-radius: 0;
        padding: 0;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .vi-acc {
        background: #fff;
        border-bottom: 0;
        border-radius: 12px;
        margin-bottom: 14px;
        padding: 2px 24px;
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    }

    .vi-acc-head {
        color: #89623E;
        padding: 18px 0;
    }

    .vi-acc-icon {
        background: #89623E;
        color: #fff;
    }

    .vi-acc-body p {
        color: #9a8877;
    }

    /* ----- AIRBNB-FRIENDLY ----- */
    .airbnb {
        padding: 56px 24px;
    }

    .airbnb-panel {
        flex-direction: row;
        align-items: center;
        gap: 56px;
        padding: 48px 64px;
        text-align: left;
    }

    .airbnb-left {
        flex: 0 0 36%;
        max-width: 36%;
    }

    .airbnb-brand {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
    }

    .airbnb-brand-title {
        font-size: 28px;
    }

    .airbnb-left-sub {
        margin-top: 22px;
        font-size: 15px;
    }

    .airbnb-right {
        flex: 1 1 auto;
    }

    .airbnb-heading {
        font-size: 16px;
    }

    .airbnb-cta {
        text-align: center;
        margin-top: 20px;
    }

    /* ----- MAPA (localização) ----- */
    .mapa {
        aspect-ratio: 1920 / 1313;
        background-image: url('../img/mapadesktop.png');
        background-size: 100% auto;
        background-position: center top;
        background-repeat: no-repeat;
        padding: 0;
    }

    /* a imagem desktop já tem o degradê/topo azul */
    .mapa::before {
        display: none;
    }

    .mapa > .container-fluid {
        height: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 48px 24px 40px;
    }

    .mapa .row,
    .mapa .col-12 {
        height: 100%;
    }

    /* header no topo, botão embaixo */
    .mapa .col-12 {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* header centralizado, sem as setas */
    .mapa-head {
        justify-content: center;
        text-align: center;
    }

    .mapa-nav {
        display: none;
    }

    .mapa-eyebrow {
        justify-content: center;
    }

    .mapa-title,
    .mapa-desc {
        text-align: center;
    }

    .mapa-desc {
        max-width: 620px;
        margin-left: auto;
        margin-right: auto;
    }

    .mapa-cta {
        margin-top: 0;
        text-align: center;
    }

    /* ----- COMODIDADES (galeria sincronizada) ----- */
    .comod {
        padding: 56px 24px;
    }

    .comod-grid {
        flex-direction: row;
        align-items: center;
        gap: 48px;
    }

    .comod-info {
        flex: 0 0 34%;
        max-width: 34%;
    }

    .comod-title {
        font-size: 20px;
    }

    .comod-list li {
        font-size: 14px;
    }

    .comod-accordion {
        flex: 1 1 auto;
        height: 460px;
    }

    .comod-btn {
        width: auto;
        padding: 15px 90px;
    }

    /* ----- RJZ CYRELA ----- */
    .rjz .container-fluid {
        max-width: 1000px;
        margin: 0 auto;
        padding-top: 64px;
        padding-bottom: 64px;
        text-align: center;
    }

    .rjz-logo-img {
        margin: 0 0 28px;
    }

    .rjz-desc {
        max-width: 760px;
        margin: 0 auto 40px;
    }

    .rjz-projetos-title {
        margin-bottom: 28px;
    }

    /* esconde o carrossel e mostra a imagem completa */
    .galeriacyrela {
        display: none;
    }

    .rjz-projetos-desk {
        display: block;
        max-width: 760px;   /* imagem tem 770px nativos — não esticar além disso */
        margin: 0 auto;
    }

    .rjz-projetos-desk img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* ----- FOOTER ----- */
    .footer {
        padding: 26px 24px;
    }

    .footer .container-fluid {
        max-width: 1200px;
        margin: 0 auto;
    }

    .footer-logo {
        max-width: 220px;
    }

    .footer-credit {
        font-size: 11px;
        letter-spacing: 3px;
    }
}


.mapa-nav{
    display: none;
}

/* ============================================
   MODAL DE CONTATO (botões "QUERO MAIS INFORMAÇÕES")
   ============================================ */
#modalInfo .modal-content.modal-info {
    background-color: #89623E;
    color: #fff;
    border: 0;
    border-radius: 2px;
    padding: 8px 12px 20px;
}

#modalInfo .modal-header {
    padding-bottom: 0;
}

#modalInfo .modal-title {
    font-family: 'TT Norms Pro', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

#modalInfo .close {
    color: #fff;
    opacity: .8;
    text-shadow: none;
    font-size: 26px;
    font-weight: 400;
}
#modalInfo .close:hover {
    opacity: 1;
}

/* dentro do modal os campos ficam empilhados (um embaixo do outro) */
#modalInfo .contato-form {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
}
#modalInfo .contato-form .form-field {
    flex: none;
    width: 100%;
    margin-bottom: 22px;
}
#modalInfo .contato-form .form-actions {
    flex: none;
    width: 100%;
    margin-top: 10px;
}

/* botão do modal na cor da marca (mais clara) p/ contraste com o fundo marrom */
#modalInfo .btn-enviar {
    background-color: #7a9ea3;
}
#modalInfo .btn-enviar:hover,
#modalInfo .btn-enviar:focus {
    background-color: #5f858a;
}

/* spinner de carregamento (append do bus.js) */
#modalInfo .btn-enviar .carregando,
#principal .btn-enviar .carregando {
    margin-left: 10px;
}

/* ===== section video mockup (smartphone) ===== */
.mockup {
    background-color: #e8dfd3;
    padding: 60px 20px 70px;
}

.mockup-stage {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* carcaça do aparelho */
.phone {
    position: relative;
    width: 300px;
    max-width: 78vw;
    aspect-ratio: 300 / 620;
    background: linear-gradient(160deg, #2a2a2e 0%, #0c0c0e 55%, #050506 100%);
    border-radius: 46px;
    padding: 13px;
    box-shadow:
        0 34px 60px rgba(41, 30, 18, 0.35),
        inset 0 0 0 2px rgba(255, 255, 255, 0.06),
        inset 0 0 3px 1px rgba(255, 255, 255, 0.10);
}

/* botões laterais */
.phone::before,
.phone::after {
    content: "";
    position: absolute;
    left: -3px;
    width: 3px;
    border-radius: 3px 0 0 3px;
    background: #131315;
}
.phone::before { top: 130px; height: 30px; }
.phone::after  { top: 175px; height: 54px; }

/* tela — recorta o vídeo respeitando o arredondamento */
.phone-screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 34px;
    overflow: hidden;
    background: #000;
    -webkit-mask-image: -webkit-radial-gradient(#fff, #000); /* garante clip no Safari */
}

/* dynamic island / notch */
.phone-island {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 92px;
    height: 26px;
    background: #000;
    border-radius: 16px;
    z-index: 3;
    pointer-events: none;
}

/* vídeo ocupa toda a área útil do display */
.phone-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #000;
    cursor: pointer;
}

/* cta abaixo do aparelho */
.mockup-cta {
    margin-top: 40px;
}

/* botão play — moderno e discreto */
.phone-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    width: 72px;
    height: 72px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .45s ease, transform .45s ease, background-color .2s ease;
}

.phone-play svg {
    width: 30px;
    height: 30px;
    margin-left: 3px; /* corrige o peso óptico do triângulo */
    fill: #fff;
}

.phone-play:hover,
.phone-play:focus {
    background: rgba(122, 158, 163, 0.55);
    outline: none;
}

/* estado ao clicar: some suavemente */
.phone-play.is-hidden {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
    pointer-events: none;
}

/* máscara mais escura apenas no modal de vídeo */
body.modal-video-open .modal-backdrop {
    opacity: 0.9;
}

@media (max-width: 575.98px) {
    .mockup { padding: 20px 20px 54px; }
    .phone { width: 300px;        height: 554px; }
}

/* elementos que só existem no layout desktop */
.mockup-photo,
.mockup-ellipse,
.mockup-text {
    display: none;
}

/* desktop: texto à esquerda, celular à direita sobre a borda da foto */
@media (min-width: 992px) {
    .mockup {
        position: relative;
        overflow: hidden;
        height: clamp(540px, 48.5vw, 940px);
        padding: 0;
        background-color: #e3dfdb;
    }

    /* foto da mulher ocupando o terço direito */
    .mockup-photo {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 33.4%;
        background: url('../img/img--mulher.png') center / cover no-repeat;
    }

    /* linha curva: continua a borda do 1º círculo do fundo do contato.
       O JS da seção define o "left" (ponto de encontro) e o translate leva a ponta
       superior do traço (x=196 de 646px) exatamente para esse ponto.
       19.6% é o valor calculado para 1920px, usado caso o JS não rode. */
    .mockup-ellipse {
        display: block;
        position: absolute;
        top: 0;
        left: 19.6%;
        width: auto;
        max-width: none;
        height: 116%;
        transform: translateX(-30.4%);
        pointer-events: none;
    }

    /* medidas do layout (1920px): valores exatos em 1920 e proporcionais abaixo */
    .mockup-text {
        display: block;
        position: absolute;
        top: 52%;
        left: 21.5625%; /* 414px em 1920 */
        transform: translateY(-50%);
        z-index: 2;
        text-align: left;
        font-family: 'TT Norms Pro', Arial, sans-serif;
    }

    /* TT Norms Pro Bold */
    .mockup-title {
        margin: 0 0 clamp(20px, 1.823vw, 35px);
        font-size: clamp(20px, 1.5625vw, 30px);
        font-weight: 700;
        line-height: 1.333;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: #89623E;
    }

    /* TT Norms Pro Regular */
    .mockup-desc {
        margin: 0 0 clamp(40px, 4.219vw, 81px);
        font-size: clamp(15px, 1.1458vw, 22px);
        font-weight: 400;
        line-height: 1.6;
        color: #89623E;
    }

    /* botão: 445 x 56 em 1920, fundo #718F93 */
    .mockup-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: clamp(300px, 23.177vw, 445px);
        height: clamp(44px, 2.917vw, 56px);
        padding: 0;
        background-color: #718F93;
        font-size: clamp(16px, 1.25vw, 24px);
        font-weight: 400;
        letter-spacing: 0;
    }

    .mockup-btn:hover,
    .mockup-btn:focus {
        background-color: #5f7b7f;
    }

    /* celular centralizado sobre a borda esquerda da foto */
    .mockup-stage {
        position: absolute;
        top: 50.8%;
        left: 68.6%;
        transform: translate(-50%, -50%);
        z-index: 3;
    }

    /* sombra projetada no "chão", à esquerda do aparelho */
    .mockup-stage::before {
        content: "";
        position: absolute;
        z-index: -1;
        left: -105%;
        bottom: 1%;
        width: 120%;
        height: 9%;
        background: radial-gradient(ellipse at 70% 50%, rgba(70, 55, 40, 0.30) 0%, rgba(70, 55, 40, 0) 68%);
        filter: blur(6px);
        pointer-events: none;
    }

    /* carcaça prateada */
    .phone {
        width: clamp(230px, 18.3vw, 360px);
        max-width: none;
        padding: 6px;
        border-radius: 40px;
        background: linear-gradient(145deg, #f7f7f8 0%, #d4d4d7 35%, #efeff1 55%, #b8b8bc 100%);
        box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.10),
            -26px 34px 50px rgba(41, 30, 18, 0.22),
            inset 0 0 2px 1px rgba(255, 255, 255, 0.8);
    }

    .phone::before,
    .phone::after {
        background: #bdbdc1;
    }

    .phone-screen {
        border: 6px solid #0b0b0c;
        border-radius: 34px;
    }

    .mockup-cta {
        display: none;
    }
}

/* desktop estreito: aproxima o texto da borda para não encostar no celular */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .mockup-text { left: 6%; }
}